feat: Refactor service management scripts to use a unified dev script

- Added package.json to manage development scripts.
- Updated restart-services.ps1 to call the new dev script for starting services.
- Refactored start-admin.ps1, start-backend.ps1, start-frontend.ps1, and start-mcp.ps1 to utilize the dev script for starting respective services.
- Enhanced stop-services.ps1 to improve process termination logic by matching command patterns.

frontend/src/pages/index.astro

@@ -13,15 +13,22 @@ import { api, DEFAULT_SITE_SETTINGS } from '../lib/api/client';
 import { formatReadTime, getI18n } from '../lib/i18n';
 import type { AppFriendLink } from '../lib/api/client';
 import type { Post } from '../lib/types';
+import { getAccentVars, getCategoryTheme, getPostTypeTheme, getTagTheme } from '../lib/utils';
 
 export const prerender = false;
 
 const url = new URL(Astro.request.url);
 const selectedType = url.searchParams.get('type') || 'all';
+const selectedTag = url.searchParams.get('tag') || '';
+const selectedCategory = url.searchParams.get('category') || '';
+const normalizedSelectedTag = selectedTag.trim().toLowerCase();
+const normalizedSelectedCategory = selectedCategory.trim().toLowerCase();
+const previewLimit = 5;
 
 let siteSettings = DEFAULT_SITE_SETTINGS;
 let allPosts: Post[] = [];
 let recentPosts: Post[] = [];
+let filteredPostsCount = 0;
 let pinnedPost: Post | null = null;
 let tags: string[] = [];
 let friendLinks: AppFriendLink[] = [];
@@ -32,12 +39,17 @@ const { locale, t } = getI18n(Astro);
 try {
   siteSettings = await api.getSiteSettings();
   allPosts = await api.getPosts();
-  const filteredPosts = selectedType === 'all'
-    ? allPosts
-    : allPosts.filter(post => post.type === selectedType);
+  const filteredPosts = allPosts.filter(post => {
+    const normalizedCategory = post.category?.trim().toLowerCase() || '';
+    if (selectedType !== 'all' && post.type !== selectedType) return false;
+    if (selectedCategory && normalizedCategory !== normalizedSelectedCategory) return false;
+    if (selectedTag && !post.tags.some(tag => tag.trim().toLowerCase() === normalizedSelectedTag)) return false;
+    return true;
+  });
 
-  recentPosts = filteredPosts.slice(0, 5);
-  pinnedPost = filteredPosts.find(post => post.pinned) || null;
+  recentPosts = filteredPosts.slice(0, previewLimit);
+  filteredPostsCount = filteredPosts.length;
+  pinnedPost = allPosts.find(post => post.pinned) || null;
   tags = (await api.getTags()).map(tag => tag.name);
   friendLinks = (await api.getFriendLinks()).filter(friend => friend.status === 'approved');
   categories = await api.getCategories();
@@ -54,12 +66,74 @@ const systemStats = [
 ];
 
 const techStack = siteSettings.techStack.map(name => ({ name }));
+const tagFrequency = new Map<string, number>();
+
+for (const post of allPosts) {
+  for (const tag of post.tags) {
+    tagFrequency.set(tag, (tagFrequency.get(tag) ?? 0) + 1);
+  }
+}
+
+const tagEntries = tags
+  .map(name => ({
+    name,
+    count: tagFrequency.get(name) ?? 0,
+  }))
+  .sort((left, right) => right.count - left.count || left.name.localeCompare(right.name));
+
+const getTagCloudStyle = (name: string) => {
+  return getAccentVars(getTagTheme(name));
+};
+const matchesSelectedFilters = (post: Post) => {
+  const normalizedCategory = post.category?.trim().toLowerCase() || '';
+  if (selectedType !== 'all' && post.type !== selectedType) return false;
+  if (selectedCategory && normalizedCategory !== normalizedSelectedCategory) return false;
+  if (selectedTag && !post.tags.some(tag => tag.trim().toLowerCase() === normalizedSelectedTag)) return false;
+  return true;
+};
+const buildHomeUrl = ({
+  type = selectedType,
+  tag = selectedTag,
+  category = selectedCategory,
+}: {
+  type?: string;
+  tag?: string;
+  category?: string;
+}) => {
+  const params = new URLSearchParams();
+  if (type && type !== 'all') params.set('type', type);
+  if (category) params.set('category', category);
+  if (tag) params.set('tag', tag);
+  const query = params.toString();
+  return query ? `/?${query}` : '/';
+};
+const homeTagHrefPrefix = `${buildHomeUrl({ tag: '' })}${buildHomeUrl({ tag: '' }).includes('?') ? '&' : '?'}tag=`;
+const hasActiveFilters = selectedType !== 'all' || Boolean(selectedCategory) || Boolean(selectedTag);
+const previewCount = Math.min(filteredPostsCount, previewLimit);
+const categoryAccentMap = Object.fromEntries(
+  categories.map((category) => [category.name.trim().toLowerCase(), getAccentVars(getCategoryTheme(category.name))])
+);
+const tagAccentMap = Object.fromEntries(
+  tagEntries.map((tag) => [tag.name.trim().toLowerCase(), getAccentVars(getTagTheme(tag.name))])
+);
+const initialPinnedVisible = pinnedPost ? matchesSelectedFilters(pinnedPost) : false;
 
 const postTypeFilters = [
   { id: 'all', name: t('common.all'), icon: 'fa-stream' },
   { id: 'article', name: t('common.article'), icon: 'fa-file-alt' },
   { id: 'tweet', name: t('common.tweet'), icon: 'fa-comment-dots' }
 ];
+const activeFilterLabels = [
+  selectedType !== 'all' ? `type=${selectedType}` : '',
+  selectedCategory ? `category=${selectedCategory}` : '',
+  selectedTag ? `tag=${selectedTag}` : '',
+].filter(Boolean);
+const discoverPrompt = hasActiveFilters
+  ? t('home.promptDiscoverFiltered', { filters: activeFilterLabels.join(' · ') })
+  : t('home.promptDiscoverDefault');
+const postsPrompt = hasActiveFilters
+  ? t('home.promptPostsFiltered', { count: previewCount, filters: activeFilterLabels.join(' · ') })
+  : t('home.promptPostsDefault', { count: previewCount });
 const navLinks = [
   { icon: 'fa-file-code', text: t('nav.articles'), href: '/articles' },
   { icon: 'fa-folder', text: t('nav.categories'), href: '/categories' },
@@ -68,33 +142,43 @@ const navLinks = [
   { icon: 'fa-star', text: t('nav.reviews'), href: '/reviews' },
   { icon: 'fa-link', text: t('nav.friends'), href: '/friends' },
   { icon: 'fa-user-secret', text: t('nav.about'), href: '/about' },
+  ...(siteSettings.ai.enabled ? [{ icon: 'fa-robot', text: t('nav.ask'), href: '/ask' }] : []),
 ];
 ---
 
 <BaseLayout title={siteSettings.siteTitle} description={siteSettings.siteDescription}>
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
     <TerminalWindow title={terminalConfig.title} class="w-full">
-      <div class="mb-6 px-4 overflow-x-auto">
+      <div class="mb-5 px-4 overflow-x-auto">
         <pre class="font-mono text-xs sm:text-sm text-[var(--primary)] whitespace-pre">{terminalConfig.asciiArt}</pre>
       </div>
 
-      <div class="mb-8 px-4">
-        <CommandPrompt command="cat welcome.txt" />
-        <div class="ml-4">
-          <p class="text-lg font-bold text-[var(--primary)] mb-1">{siteSettings.heroTitle}</p>
-          <p class="text-[var(--text-secondary)]">{siteSettings.heroSubtitle}</p>
-        </div>
-      </div>
+      <div class="mb-6 px-4">
+        <CommandPrompt command={t('home.promptWelcome')} />
+        <div class="ml-4 home-hero-shell">
+          <div class="min-w-0">
+            <p class="mb-1 text-lg font-bold text-[var(--primary)]">{siteSettings.heroTitle}</p>
+            <p class="text-sm leading-6 text-[var(--text-secondary)]">{siteSettings.heroSubtitle}</p>
+          </div>
 
-      <div class="mb-8 px-4">
-        <CommandPrompt command="ls -l" />
-        <div class="ml-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
+          <div class="home-hero-meta">
+            <span class="terminal-stat-pill">
+              <i class="fas fa-file-alt text-[10px]"></i>
+              <span id="home-results-count">{t('common.resultsCount', { count: filteredPostsCount })}</span>
+            </span>
+            {siteSettings.ai.enabled && (
+              <a href="/ask" class="terminal-subtle-link">
+                <i class="fas fa-robot text-[11px]"></i>
+                <span>{t('nav.ask')}</span>
+              </a>
+            )}
+          </div>
+        </div>
+
+        <div class="ml-4 mt-4 home-nav-strip">
           {navLinks.map(link => (
-            <a
-              href={link.href}
-              class="flex items-center gap-2 text-[var(--text)] hover:text-[var(--primary)] transition-colors py-2"
-            >
-              <i class={`fas ${link.icon}`}></i>
+            <a href={link.href} class="home-nav-pill">
+              <i class={`fas ${link.icon} text-[11px]`}></i>
               <span>{link.text}</span>
             </a>
           ))}
@@ -109,38 +193,146 @@ const navLinks = [
         </div>
       )}
 
-      <div id="categories" class="mb-8 px-4">
-        <CommandPrompt command="ls -l ./categories" />
-        <div class="ml-4 flex flex-wrap gap-2">
-          {categories.map(category => (
-            <FilterPill tone="amber" href={`/articles?category=${encodeURIComponent(category.name)}`}>
-              <i class="fas fa-folder"></i>
-              <span>{category.name}</span>
-            </FilterPill>
-          ))}
-        </div>
-      </div>
+      <div id="discover" class="mb-6 px-4">
+        <CommandPrompt promptId="home-discover-prompt" command={discoverPrompt} />
+        <div class="ml-4 terminal-panel home-discovery-shell">
+          <div class="home-discovery-head">
+            <div class="home-taxonomy-copy">
+              <span class="terminal-kicker">
+                <i class="fas fa-sliders-h"></i>
+                <span>home filters</span>
+              </span>
+              <div>
+                <h2 class="text-xl font-bold text-[var(--title-color)]">{t('common.browsePosts')}</h2>
+                <p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">
+                  {t('common.categoriesCount', { count: categories.length })} · {t('common.tagsCount', { count: tags.length })} · <span id="home-discovery-results">{t('common.resultsCount', { count: filteredPostsCount })}</span>
+                </p>
+              </div>
+            </div>
 
-      <div class="mb-4 px-4">
-        <CommandPrompt command="./filter_posts.sh" />
-        <div class="ml-4 flex flex-wrap gap-2">
-          {postTypeFilters.map(filter => (
-            <FilterPill tone="blue" active={selectedType === filter.id} href={`/?type=${filter.id}`}>
-              <i class={`fas ${filter.icon}`}></i>
-              <span>{filter.name}</span>
-            </FilterPill>
-          ))}
+            <div class="home-discovery-actions">
+              <a id="home-clear-filters" href="/" class:list={['terminal-link-arrow', !hasActiveFilters && 'hidden']}>
+                <span>{t('common.clearFilters')}</span>
+                <i class="fas fa-rotate-left text-xs"></i>
+              </a>
+              <ViewMoreLink href="/articles" text={t('common.viewAllArticles')} command="cd ~/articles" />
+            </div>
+          </div>
+
+          <div class="home-filter-toolbar">
+            {postTypeFilters.map(filter => (
+              <FilterPill
+                tone={filter.id === 'all' ? 'neutral' : 'accent'}
+                active={selectedType === filter.id}
+                href={buildHomeUrl({ type: filter.id, category: selectedCategory, tag: selectedTag })}
+                data-home-type-filter={filter.id}
+                style={filter.id === 'all' ? undefined : getAccentVars(getPostTypeTheme(filter.id))}
+              >
+                <i class={`fas ${filter.icon}`}></i>
+                <span>{filter.name}</span>
+              </FilterPill>
+            ))}
+          </div>
+
+          <div id="home-active-filters" class:list={['home-active-filter-row', !hasActiveFilters && 'hidden']}>
+            <span id="home-active-type" class:list={['terminal-chip', selectedType === 'all' && 'hidden']}>
+              <i id="home-active-type-icon" class={`fas ${postTypeFilters.find((item) => item.id === selectedType)?.icon || 'fa-stream'} text-[10px]`}></i>
+              <span id="home-active-type-text">{postTypeFilters.find((item) => item.id === selectedType)?.name || selectedType}</span>
+            </span>
+            <span
+              id="home-active-category"
+              class:list={['terminal-chip terminal-chip--accent', !selectedCategory && 'hidden']}
+              style={selectedCategory ? getAccentVars(getCategoryTheme(selectedCategory)) : undefined}
+            >
+              <i class="fas fa-folder-open text-[10px]"></i>
+              <span id="home-active-category-text">{selectedCategory}</span>
+            </span>
+            <span
+              id="home-active-tag"
+              class:list={['terminal-chip terminal-chip--accent', !selectedTag && 'hidden']}
+              style={selectedTag ? getAccentVars(getTagTheme(selectedTag)) : undefined}
+            >
+              <i class="fas fa-hashtag text-[10px]"></i>
+              <span id="home-active-tag-text">{selectedTag}</span>
+            </span>
+          </div>
+
+          <div class="home-discovery-grid">
+            <section id="categories" class="home-discovery-panel">
+              <div class="home-discovery-panel__head">
+                <h3 class="text-sm font-semibold text-[var(--title-color)]">{t('nav.categories')}</h3>
+                <span class="terminal-stat-pill">{categories.length}</span>
+              </div>
+              <div class="home-category-grid home-category-grid--compact">
+                {categories.map(category => (
+                  <a
+                    href={buildHomeUrl({
+                      category: normalizedSelectedCategory === category.name.trim().toLowerCase() ? '' : category.name,
+                      tag: selectedTag,
+                    })}
+                    data-home-category-filter={category.name}
+                    class:list={[
+                      'home-category-card terminal-panel-accent terminal-interactive-card group',
+                      normalizedSelectedCategory === category.name.trim().toLowerCase() && 'is-active'
+                    ]}
+                    style={getAccentVars(getCategoryTheme(category.name))}
+                  >
+                    <div class="home-category-card__icon terminal-accent-icon">
+                      <i class="fas fa-folder-open"></i>
+                    </div>
+                    <div class="min-w-0 flex flex-1 items-center justify-between gap-3">
+                      <h3 class="truncate text-sm font-semibold text-[var(--title-color)] transition-colors group-hover:text-[var(--accent-color,var(--primary))]">
+                        {category.name}
+                      </h3>
+                      <span class="terminal-stat-pill terminal-stat-pill--accent shrink-0" style={getAccentVars(getCategoryTheme(category.name))}>
+                        <span>{category.count ?? 0}</span>
+                      </span>
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </section>
+
+            <section id="tags" class="home-discovery-panel home-tag-shell">
+              <div class="home-discovery-panel__head">
+                <h3 class="text-sm font-semibold text-[var(--title-color)]">{t('nav.tags')}</h3>
+                <span class="terminal-stat-pill">{tags.length}</span>
+              </div>
+              <div class="home-tag-cloud">
+                {tagEntries.map((tag) => (
+                  <a
+                    href={buildHomeUrl({
+                      tag: normalizedSelectedTag === tag.name.trim().toLowerCase() ? '' : tag.name,
+                      category: selectedCategory,
+                    })}
+                    data-home-tag-filter={tag.name}
+                    class:list={[
+                      'home-tag-cloud__item',
+                      normalizedSelectedTag === tag.name.trim().toLowerCase() && 'is-active'
+                    ]}
+                    style={getTagCloudStyle(tag.name)}
+                  >
+                    <span class="home-tag-cloud__hash">#</span>
+                    <span>{tag.name}</span>
+                    <span class="home-tag-cloud__count">{tag.count}</span>
+                  </a>
+                ))}
+              </div>
+            </section>
+          </div>
         </div>
       </div>
 
       {pinnedPost && (
-        <div class="mb-8 px-4">
-          <CommandPrompt command="cat ./pinned_post.md" />
-          <div class="ml-4">
-            <div class="p-4 rounded-lg border border-[var(--border-color)] bg-[var(--header-bg)] transition-colors hover:border-[var(--primary)]">
+        <div class="mb-6 px-4">
+          <CommandPrompt command={t('home.promptPinned')} />
+          <div id="home-pinned-wrap" class:list={['ml-4', !initialPinnedVisible && 'hidden']}>
+            <div class="terminal-panel terminal-panel-accent terminal-interactive-card p-4" style={getAccentVars(getPostTypeTheme(pinnedPost.type))}>
               <div class="flex items-center gap-2 mb-2">
                 <span class="px-2 py-0.5 text-xs rounded bg-[var(--primary)] text-[var(--terminal-bg)] font-bold">{t('home.pinned')}</span>
-                <span class="w-3 h-3 rounded-full" style={`background-color: ${pinnedPost.type === 'article' ? 'var(--primary)' : 'var(--secondary)'}`}></span>
+                <span class="terminal-chip terminal-chip--accent text-[10px] py-1 px-2" style={getAccentVars(getPostTypeTheme(pinnedPost.type))}>
+                  {pinnedPost.type === 'article' ? t('common.article') : t('common.tweet')}
+                </span>
                 <a href={`/articles/${pinnedPost.slug}`} class="text-lg font-bold text-[var(--title-color)] transition hover:text-[var(--primary)]">
                   {pinnedPost.title}
                 </a>
@@ -159,49 +351,88 @@ const navLinks = [
       )}
 
       <div id="posts" class="mb-10 px-4">
-        <CommandPrompt command="find ./posts -type f -name *.md | head -n 5" />
+        <CommandPrompt promptId="home-posts-prompt" command={postsPrompt} />
         <div class="ml-4">
-          <div class="divide-y divide-[var(--border-color)]">
-            {recentPosts.map(post => (
-              <PostCard post={post} />
-            ))}
-          </div>
+          {allPosts.length > 0 ? (
+            <div id="home-posts-list" class="divide-y divide-[var(--border-color)]">
+              {allPosts.map((post) => {
+                const matchesCurrentFilter = matchesSelectedFilters(post);
+                const filteredIndex = matchesCurrentFilter
+                  ? allPosts.filter(matchesSelectedFilters).findIndex((item) => item.slug === post.slug)
+                  : -1;
+                const isVisible = matchesCurrentFilter && filteredIndex < previewLimit;
+
+                return (
+                  <div
+                    data-home-post-card
+                    data-home-type={post.type}
+                    data-home-category={post.category?.trim().toLowerCase() || ''}
+                    data-home-tags={post.tags.map((tag) => tag.trim().toLowerCase()).join('|')}
+                    data-home-pinned={post.pinned ? 'true' : 'false'}
+                    data-home-slug={post.slug}
+                    class:list={[!isVisible && 'hidden']}
+                  >
+                    <PostCard post={post} selectedTag={selectedTag} tagHrefPrefix={homeTagHrefPrefix} />
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div id="home-posts-empty" class="terminal-empty">
+              <p class="text-base font-semibold text-[var(--title-color)]">{t('articlesPage.emptyTitle')}</p>
+              <p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">{t('articlesPage.emptyDescription')}</p>
+              <div class="mt-4 flex flex-wrap justify-center gap-2">
+                <a href="/" class="terminal-subtle-link">
+                  <i class="fas fa-rotate-left text-[11px]"></i>
+                  <span>{t('common.clearFilters')}</span>
+                </a>
+                <a href="/articles" class="terminal-subtle-link">
+                  <i class="fas fa-file-code text-[11px]"></i>
+                  <span>{t('common.viewAllArticles')}</span>
+                </a>
+              </div>
+            </div>
+          )}
+          {allPosts.length > 0 && (
+            <div id="home-posts-empty" class:list={['terminal-empty', recentPosts.length > 0 && 'hidden']}>
+              <p class="text-base font-semibold text-[var(--title-color)]">{t('articlesPage.emptyTitle')}</p>
+              <p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">{t('articlesPage.emptyDescription')}</p>
+              <div class="mt-4 flex flex-wrap justify-center gap-2">
+                <a href="/" class="terminal-subtle-link">
+                  <i class="fas fa-rotate-left text-[11px]"></i>
+                  <span>{t('common.clearFilters')}</span>
+                </a>
+                <a href="/articles" class="terminal-subtle-link">
+                  <i class="fas fa-file-code text-[11px]"></i>
+                  <span>{t('common.viewAllArticles')}</span>
+                </a>
+              </div>
+            </div>
+          )}
           <div class="mt-4">
-            <ViewMoreLink href="/articles" text={t('common.viewAllArticles')} />
+            <ViewMoreLink href="/articles" text={t('common.viewAllArticles')} command="cd ~/articles" />
           </div>
         </div>
       </div>
 
-      <div id="tags" class="mb-10 px-4">
-        <CommandPrompt command="cat ./tags.txt" />
-        <div class="ml-4 flex flex-wrap gap-2">
-          {tags.map(tag => (
-            <FilterPill tone="teal" href={`/tags?tag=${encodeURIComponent(tag)}`}>
-              <i class="fas fa-hashtag"></i>
-              <span>{tag}</span>
-            </FilterPill>
-          ))}
-        </div>
-      </div>
+      <div class="border-t border-[var(--border-color)] my-8"></div>
 
-      <div class="border-t border-[var(--border-color)] my-10"></div>
-
-      <div id="friends" class="mb-10 px-4">
-        <CommandPrompt command="cat ./friends.txt" />
+      <div id="friends" class="mb-8 px-4">
+        <CommandPrompt command={t('home.promptFriends')} />
         <div class="ml-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
           {friendLinks.map(friend => (
             <FriendLinkCard friend={friend} />
           ))}
         </div>
         <div class="mt-6 ml-4">
-          <ViewMoreLink href="/friends" text={t('common.viewAllLinks')} />
+          <ViewMoreLink href="/friends" text={t('common.viewAllLinks')} command="cd ~/friends" />
         </div>
       </div>
 
-      <div class="border-t border-[var(--border-color)] my-10"></div>
+      <div class="border-t border-[var(--border-color)] my-8"></div>
 
       <div id="about" class="px-4">
-        <CommandPrompt command="cat about_me.txt" />
+        <CommandPrompt command={t('home.promptAbout')} />
         <div class="ml-4">
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
@@ -222,3 +453,254 @@ const navLinks = [
     </TerminalWindow>
   </div>
 </BaseLayout>
+
+<script
+  is:inline
+  define:vars={{
+    previewLimit,
+    categoryAccentMap,
+    tagAccentMap,
+    initialHomeState: {
+      type: selectedType,
+      category: selectedCategory,
+      tag: selectedTag,
+    },
+  }}
+>
+  (function() {
+    /** @type {Window['__termiCommandPrompt']} */
+    let promptApi;
+
+    const t = window.__termiTranslate;
+    const typeButtons = Array.from(document.querySelectorAll('[data-home-type-filter]'));
+    const categoryButtons = Array.from(document.querySelectorAll('[data-home-category-filter]'));
+    const tagButtons = Array.from(document.querySelectorAll('[data-home-tag-filter]'));
+    const postCards = Array.from(document.querySelectorAll('[data-home-post-card]'));
+    const postsRoot = document.getElementById('posts');
+    const resultsCount = document.getElementById('home-results-count');
+    const discoveryResults = document.getElementById('home-discovery-results');
+    const clearFilters = document.getElementById('home-clear-filters');
+    const activeFilters = document.getElementById('home-active-filters');
+    const activeType = document.getElementById('home-active-type');
+    const activeTypeIcon = document.getElementById('home-active-type-icon');
+    const activeTypeText = document.getElementById('home-active-type-text');
+    const activeCategory = document.getElementById('home-active-category');
+    const activeCategoryText = document.getElementById('home-active-category-text');
+    const activeTag = document.getElementById('home-active-tag');
+    const activeTagText = document.getElementById('home-active-tag-text');
+    const emptyState = document.getElementById('home-posts-empty');
+    const pinnedWrap = document.getElementById('home-pinned-wrap');
+
+    promptApi = window.__termiCommandPrompt;
+
+    const typeMeta = {
+      all: { icon: 'fa-stream', label: t('common.all') },
+      article: { icon: 'fa-file-alt', label: t('common.article') },
+      tweet: { icon: 'fa-comment-dots', label: t('common.tweet') },
+    };
+
+    const state = {
+      type: initialHomeState.type || 'all',
+      category: initialHomeState.category || '',
+      tag: initialHomeState.tag || '',
+    };
+
+    function getActiveTokens() {
+      return [
+        state.type !== 'all' ? `type=${state.type}` : '',
+        state.category ? `category=${state.category}` : '',
+        state.tag ? `tag=${state.tag}` : '',
+      ].filter(Boolean);
+    }
+
+    function syncPromptText(total) {
+      const tokens = getActiveTokens();
+      const discoverCommand = tokens.length
+        ? t('home.promptDiscoverFiltered', { filters: tokens.join(' · ') })
+        : t('home.promptDiscoverDefault');
+      const postsCommand = tokens.length
+        ? t('home.promptPostsFiltered', { count: Math.min(total, previewLimit), filters: tokens.join(' · ') })
+        : t('home.promptPostsDefault', { count: Math.min(total, previewLimit) });
+
+      promptApi?.set?.('home-discover-prompt', discoverCommand, { typing: false });
+      promptApi?.set?.('home-posts-prompt', postsCommand, { typing: false });
+    }
+
+    function updateUrl() {
+      const params = new URLSearchParams();
+      if (state.type && state.type !== 'all') params.set('type', state.type);
+      if (state.category) params.set('category', state.category);
+      if (state.tag) params.set('tag', state.tag);
+      const nextUrl = params.toString() ? `/?${params.toString()}` : '/';
+      window.history.replaceState({}, '', nextUrl);
+    }
+
+    function syncActiveButtons() {
+      typeButtons.forEach((button) => {
+        button.classList.toggle('is-active', (button.getAttribute('data-home-type-filter') || 'all') === state.type);
+      });
+
+      categoryButtons.forEach((button) => {
+        const value = (button.getAttribute('data-home-category-filter') || '').trim().toLowerCase();
+        const activeValue = state.category.trim().toLowerCase();
+        button.classList.toggle('is-active', Boolean(activeValue) && value === activeValue);
+      });
+
+      tagButtons.forEach((button) => {
+        const value = (button.getAttribute('data-home-tag-filter') || '').trim().toLowerCase();
+        const activeValue = state.tag.trim().toLowerCase();
+        button.classList.toggle('is-active', Boolean(activeValue) && value === activeValue);
+      });
+    }
+
+    function syncActiveSummary() {
+      const hasActive = state.type !== 'all' || Boolean(state.category) || Boolean(state.tag);
+
+      activeFilters?.classList.toggle('hidden', !hasActive);
+      clearFilters?.classList.toggle('hidden', !hasActive);
+
+      if (activeType && activeTypeIcon && activeTypeText) {
+        const typeInfo = typeMeta[state.type] || typeMeta.all;
+        activeType.classList.toggle('hidden', state.type === 'all');
+        activeTypeIcon.className = `fas ${typeInfo.icon} text-[10px]`;
+        activeTypeText.textContent = typeInfo.label;
+      }
+
+      if (activeCategory && activeCategoryText) {
+        activeCategory.classList.toggle('hidden', !state.category);
+        activeCategoryText.textContent = state.category;
+        if (state.category) {
+          activeCategory.setAttribute('style', categoryAccentMap[String(state.category).trim().toLowerCase()] || '');
+        } else {
+          activeCategory.removeAttribute('style');
+        }
+      }
+
+      if (activeTag && activeTagText) {
+        activeTag.classList.toggle('hidden', !state.tag);
+        activeTagText.textContent = state.tag;
+        if (state.tag) {
+          activeTag.setAttribute('style', tagAccentMap[String(state.tag).trim().toLowerCase()] || '');
+        } else {
+          activeTag.removeAttribute('style');
+        }
+      }
+    }
+
+    function syncPostTagSelection() {
+      if (!postsRoot) return;
+
+      const activeValue = state.tag.trim().toLowerCase();
+      const tagLinks = postsRoot.querySelectorAll('a[href*="tag="]');
+
+      tagLinks.forEach((link) => {
+        const href = link.getAttribute('href') || '';
+        let tagValue = '';
+
+        try {
+          tagValue = new URL(href, window.location.origin).searchParams.get('tag')?.trim().toLowerCase() || '';
+        } catch {
+          tagValue = '';
+        }
+
+        link.classList.toggle('is-active', Boolean(activeValue) && tagValue === activeValue);
+      });
+    }
+
+    function applyHomeFilters(pushHistory = true) {
+      const filtered = postCards.filter((card) => {
+        const type = card.getAttribute('data-home-type') || '';
+        const category = (card.getAttribute('data-home-category') || '').trim().toLowerCase();
+        const tags = `|${(card.getAttribute('data-home-tags') || '').trim().toLowerCase()}|`;
+        const typeMatch = state.type === 'all' || type === state.type;
+        const categoryMatch = !state.category || category === state.category.trim().toLowerCase();
+        const tagMatch = !state.tag || tags.includes(`|${state.tag.trim().toLowerCase()}|`);
+        return typeMatch && categoryMatch && tagMatch;
+      });
+
+      postCards.forEach((card) => card.classList.add('hidden'));
+      filtered.slice(0, previewLimit).forEach((card) => card.classList.remove('hidden'));
+
+      const total = filtered.length;
+      const hasPinned = filtered.some((card) => card.getAttribute('data-home-pinned') === 'true');
+
+      if (resultsCount) {
+        resultsCount.textContent = t('common.resultsCount', { count: total });
+      }
+      if (discoveryResults) {
+        discoveryResults.textContent = t('common.resultsCount', { count: total });
+      }
+      if (emptyState) {
+        emptyState.classList.toggle('hidden', total > 0);
+      }
+      if (pinnedWrap) {
+        pinnedWrap.classList.toggle('hidden', !hasPinned);
+      }
+
+      syncActiveButtons();
+      syncActiveSummary();
+      syncPostTagSelection();
+      syncPromptText(total);
+
+      if (pushHistory) {
+        updateUrl();
+      }
+    }
+
+    typeButtons.forEach((button) => {
+      button.addEventListener('click', (event) => {
+        event.preventDefault();
+        state.type = button.getAttribute('data-home-type-filter') || 'all';
+        applyHomeFilters();
+      });
+    });
+
+    categoryButtons.forEach((button) => {
+      button.addEventListener('click', (event) => {
+        event.preventDefault();
+        const nextValue = button.getAttribute('data-home-category-filter') || '';
+        const normalizedCurrent = state.category.trim().toLowerCase();
+        state.category = normalizedCurrent === nextValue.trim().toLowerCase() ? '' : nextValue;
+        applyHomeFilters();
+      });
+    });
+
+    tagButtons.forEach((button) => {
+      button.addEventListener('click', (event) => {
+        event.preventDefault();
+        const nextValue = button.getAttribute('data-home-tag-filter') || '';
+        const normalizedCurrent = state.tag.trim().toLowerCase();
+        state.tag = normalizedCurrent === nextValue.trim().toLowerCase() ? '' : nextValue;
+        applyHomeFilters();
+      });
+    });
+
+    clearFilters?.addEventListener('click', (event) => {
+      event.preventDefault();
+      state.type = 'all';
+      state.category = '';
+      state.tag = '';
+      applyHomeFilters();
+    });
+
+    postsRoot?.addEventListener('click', (event) => {
+      const target = event.target instanceof Element ? event.target.closest('a[href*="tag="]') : null;
+      if (!target) return;
+
+      const href = target.getAttribute('href') || '';
+
+      try {
+        const nextTag = new URL(href, window.location.origin).searchParams.get('tag') || '';
+        if (!nextTag) return;
+        event.preventDefault();
+        const normalizedCurrent = state.tag.trim().toLowerCase();
+        state.tag = normalizedCurrent === nextTag.trim().toLowerCase() ? '' : nextTag;
+        applyHomeFilters();
+      } catch {
+        return;
+      }
+    });
+
+    applyHomeFilters(false);
+  })();
+</script>