From 35313608272cd631a617957a93a2081de2e5c11d Mon Sep 17 00:00:00 2001
From: Yusuf Suleman <yusuf@quadjourney.com>
Date: Wed, 1 Apr 2026 22:32:40 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20brain=20colored=20folders/tags=20?=
 =?UTF-8?q?=E2=80=94=20color=20+=20icon=20fields,=20mobile=20pills?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backend:
- Added color (hex) and icon (lucide name) columns to folders and tags
- Default folders seeded with colors: Home=green, Work=indigo, Travel=blue, etc.
- API returns color/icon in sidebar and CRUD responses
- Create/update endpoints accept color and icon

Frontend:
- Mobile: horizontal scrollable pill tabs with colored dots
- Desktop sidebar: colored dots next to folder names
- Active pill gets tinted border matching folder color

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/pages/brain/AtelierBrainPage.svelte   |   72 +-
 .../lib/pages/budget/AtelierBudgetPage.svelte | 1165 ++++++++---------
 services/brain/app/api/taxonomy.py            |   30 +-
 services/brain/app/models/taxonomy.py         |   21 +-
 4 files changed, 646 insertions(+), 642 deletions(-)

diff --git a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
index 2ed8a7b..487bbde 100644
--- a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
+++ b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
@@ -23,8 +23,8 @@
     assets: { id: string; asset_type: string; filename: string; content_type: string | null }[];
   }
 
-  interface SidebarFolder { id: string; name: string; slug: string; is_active: boolean; item_count: number; }
-  interface SidebarTag { id: string; name: string; slug: string; is_active: boolean; item_count: number; }
+  interface SidebarFolder { id: string; name: string; slug: string; color?: string; icon?: string; is_active: boolean; item_count: number; }
+  interface SidebarTag { id: string; name: string; slug: string; color?: string; icon?: string; is_active: boolean; item_count: number; }
 
   let loading = $state(true);
   let items = $state<BrainItem[]>([]);
@@ -366,6 +366,7 @@
         <nav class="sidebar-nav">
           {#each sidebarFolders.filter(f => f.is_active) as folder}
             <button class="nav-item" class:active={activeFolder === folder.name} onclick={() => { activeFolder = folder.name; activeFolderId = folder.id; activeTag = null; activeTagId = null; mobileSidebarOpen = false; loadItems(); }}>
+              {#if folder.color}<span class="nav-dot" style="background: {folder.color}"></span>{/if}
               <span class="nav-label">{folder.name}</span>
               {#if showManage}
                 <!-- svelte-ignore a11y_no_static_element_interactions --><span class="nav-delete" onclick={(e) => { e.stopPropagation(); if (confirm(`Delete "${folder.name}"? Items will be moved.`)) deleteTaxonomy(folder.id); }}>×</span>
@@ -437,11 +438,20 @@
           {#if uploading}<div class="upload-status">Uploading...</div>{/if}
         </section>
 
-        <!-- Mobile sidebar toggle -->
-        <button class="mobile-filter-btn" onclick={() => mobileSidebarOpen = true}>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/></svg>
-          Folders & Tags
-        </button>
+        <!-- Mobile: horizontal pill filters -->
+        <div class="mobile-pills">
+          <button class="pill" class:active={!activeFolder && !activeTag} onclick={() => { activeFolder = null; activeTag = null; activeFolderId = null; activeTagId = null; mobileSidebarOpen = false; loadItems(); }}>
+            All
+          </button>
+          {#each sidebarFolders.filter(f => f.is_active) as folder}
+            <button class="pill" class:active={activeFolder === folder.name} onclick={() => { activeFolder = folder.name; activeFolderId = folder.id; activeTag = null; activeTagId = null; loadItems(); }}
+              style={folder.color ? `--pill-color: ${folder.color}` : ''}>
+              {#if folder.color}<span class="pill-dot" style="background: {folder.color}"></span>{/if}
+              {folder.name}
+              {#if folder.item_count > 0}<span class="pill-count">{folder.item_count}</span>{/if}
+            </button>
+          {/each}
+        </div>
 
         <!-- Active filter indicator -->
         {#if activeFolder || activeTag}
@@ -867,26 +877,56 @@
     overflow-x: hidden;
   }
 
-  /* ═══ Mobile filter button ═══ */
-  .mobile-filter-btn {
+  /* ═══ Mobile pills ═══ */
+  .mobile-pills {
     display: none;
-    align-items: center;
     gap: 6px;
-    padding: 8px 14px;
-    border-radius: 10px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    padding-bottom: 4px;
+    margin-bottom: 12px;
+  }
+  .mobile-pills::-webkit-scrollbar { display: none; }
+
+  .pill {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 12px;
+    border-radius: 999px;
     border: 1px solid rgba(35,26,17,0.1);
     background: rgba(255,252,248,0.7);
     color: #5c5046;
-    font-size: 0.82rem;
+    font-size: 0.78rem;
+    font-weight: 500;
     font-family: var(--font);
     cursor: pointer;
-    margin-bottom: 12px;
+    white-space: nowrap;
+    flex-shrink: 0;
     transition: all 160ms;
   }
-  .mobile-filter-btn:hover { background: rgba(255,248,241,0.9); color: #1e1812; }
+  .pill:hover { background: rgba(255,248,241,0.9); }
+  .pill.active {
+    background: rgba(255,248,241,0.95);
+    color: #1e1812;
+    font-weight: 600;
+    border-color: var(--pill-color, rgba(35,26,17,0.2));
+    box-shadow: inset 0 0 0 1px var(--pill-color, transparent);
+  }
+  .pill-dot {
+    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+  }
+  .pill-count {
+    font-size: 0.65rem; font-family: var(--mono); color: #8c7b69;
+  }
+
+  .nav-dot {
+    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+  }
 
   @media (max-width: 768px) {
-    .mobile-filter-btn { display: flex; }
+    .mobile-pills { display: flex; }
   }
 
   /* ═══ Active filter ═══ */
diff --git a/frontend-v2/src/lib/pages/budget/AtelierBudgetPage.svelte b/frontend-v2/src/lib/pages/budget/AtelierBudgetPage.svelte
index 63bdb54..ffdf115 100644
--- a/frontend-v2/src/lib/pages/budget/AtelierBudgetPage.svelte
+++ b/frontend-v2/src/lib/pages/budget/AtelierBudgetPage.svelte
@@ -354,86 +354,112 @@
     loading = false;
   });
 </script>
-
 <div class="budget-page">
-  <section class="budget-head reveal">
-    <div class="head-copy">
-      <div class="head-kicker">{currentMonthLabel || 'Budget'}</div>
+  <section class="budget-command reveal">
+    <div class="command-copy">
+      <div class="command-label">{currentMonthLabel || 'Budget'}</div>
       <h1>Budget</h1>
-      <p class="head-summary">
-        {uncatCount} waiting for category · {formatBalance(onBudgetTotal)} across on-budget accounts
-      </p>
+      <p>Sort uncategorized transactions, link transfers, and keep the month readable without falling back to finance tables.</p>
     </div>
-
-    <div class="head-actions">
-      <div class="view-switch">
-        <button class:active={activeView === 'transactions'} onclick={() => (activeView = 'transactions')}>Transactions</button>
-        <button class:active={activeView === 'budget'} onclick={() => (activeView = 'budget')}>Budget</button>
-      </div>
-      <button class="view-pill" class:active={accountsOpen} onclick={() => (accountsOpen = !accountsOpen)}>
-        {activeAccountId ? selectedAccountName : 'Accounts'}
-      </button>
-    </div>
-  </section>
-
-  <section class="stats-strip reveal" aria-label="Budget summary">
-    <div class="stat-block">
-      <div class="stat-label">To sort</div>
-      <div class="stat-value">{uncatCount}</div>
-    </div>
-    <div class="stat-block">
-      <div class="stat-label">On budget cash</div>
-      <div class="stat-value">{formatBalance(onBudgetTotal)}</div>
-    </div>
-    <div class="stat-block">
-      <div class="stat-label">Spent</div>
-      <div class="stat-value">{spendMagnitude}</div>
+    <div class="command-actions">
+      <div class="command-kicker">Working month</div>
+      <div class="command-stats">{uncatCount} to sort · {formatBalance(onBudgetTotal)} on budget</div>
     </div>
   </section>
 
   {#if activeView === 'transactions'}
-    <section class="ledger-surface reveal">
-      <section class="ledger-head">
-        <div class="section-head ledger-title-row">
-          <h2>Ledger</h2>
-          <span>{filteredTransactions.length} visible</span>
-        </div>
-        {#if accountsOpen}
-          <div class="account-ribbon open">
-            <div class="account-list items-card">
-              <button class="account-row" class:active={!activeAccountId} onclick={() => { selectAccount(null); accountsOpen = false; }}>
-                <div class="row-accent account-accent"></div>
-                <div class="account-main">
-                  <div class="account-name">All accounts</div>
-                  <div class="account-meta">On-budget overview</div>
-                </div>
-                <div class="account-balance">{formatBalance(onBudgetTotal)}</div>
-              </button>
-              {#each accounts as acct}
-                <button class="account-row" class:active={activeAccountId === acct.id} onclick={() => { selectAccount(acct.id || null); accountsOpen = false; }}>
+    <section class="budget-layout reveal">
+      <div class="budget-main">
+        <div class="toolbar-card">
+          <div class="toolbar-head">
+            <div>
+              <div class="toolbar-label">Modes</div>
+              <div class="toolbar-title">Working ledger</div>
+            </div>
+            <div class="toolbar-meta">{filteredTransactions.length} visible</div>
+          </div>
+
+          <div class="toolbar-actions">
+            <div class="view-switch">
+              <button class="active" onclick={() => (activeView = 'transactions')}>Transactions</button>
+              <button onclick={() => (activeView = 'budget')}>Budget</button>
+            </div>
+            <button class="view-pill" class:active={accountsOpen} onclick={() => (accountsOpen = !accountsOpen)}>
+              {activeAccountId ? selectedAccountName : 'Accounts'}
+            </button>
+          </div>
+
+          <section class="signal-strip compact-signals">
+            <div class="signal-card compact active">
+              <div class="signal-topline">
+                <div class="signal-label">To sort</div>
+                <div class="signal-value">{uncatCount}</div>
+              </div>
+              <div class="signal-note">Transactions still waiting for a category.</div>
+            </div>
+            <div class="signal-card compact">
+              <div class="signal-topline">
+                <div class="signal-label">On budget cash</div>
+                <div class="signal-value">{formatBalance(onBudgetTotal)}</div>
+              </div>
+              <div class="signal-note">Current working cash across active accounts.</div>
+            </div>
+            <div class="signal-card compact">
+              <div class="signal-topline">
+                <div class="signal-label">Spent</div>
+                <div class="signal-value">{spendMagnitude}</div>
+              </div>
+              <div class="signal-note">Month spending so far.</div>
+            </div>
+          </section>
+
+          {#if accountsOpen}
+            <div class="account-ribbon">
+              <div class="account-list items-card">
+                <button class="account-row" class:active={!activeAccountId} onclick={() => { selectAccount(null); accountsOpen = false; }}>
                   <div class="row-accent account-accent"></div>
                   <div class="account-main">
-                    <div class="account-name">{acct.name}</div>
-                    <div class="account-meta">On budget</div>
+                    <div class="account-name">All accounts</div>
+                    <div class="account-meta">On-budget overview</div>
                   </div>
-                  <div class="account-balance" class:negative={!acct.positive}>{formatBalance(acct.balance)}</div>
+                  <div class="account-balance">{formatBalance(onBudgetTotal)}</div>
                 </button>
-              {/each}
-              {#if offBudgetAccounts.length > 0}
-                {#each offBudgetAccounts as acct}
-                  <button class="account-row quiet" class:active={activeAccountId === acct.id} onclick={() => { selectAccount(acct.id || null); accountsOpen = false; }}>
-                    <div class="row-accent account-accent quiet"></div>
+                {#each accounts as acct}
+                  <button class="account-row" class:active={activeAccountId === acct.id} onclick={() => { selectAccount(acct.id || null); accountsOpen = false; }}>
+                    <div class="row-accent account-accent"></div>
                     <div class="account-main">
                       <div class="account-name">{acct.name}</div>
-                      <div class="account-meta">Off budget</div>
+                      <div class="account-meta">On budget</div>
                     </div>
-                    <div class="account-balance">{formatBalance(acct.balance)}</div>
+                    <div class="account-balance" class:negative={!acct.positive}>{formatBalance(acct.balance)}</div>
                   </button>
                 {/each}
-              {/if}
+                {#if offBudgetAccounts.length > 0}
+                  {#each offBudgetAccounts as acct}
+                    <button class="account-row quiet" class:active={activeAccountId === acct.id} onclick={() => { selectAccount(acct.id || null); accountsOpen = false; }}>
+                      <div class="row-accent account-accent quiet"></div>
+                      <div class="account-main">
+                        <div class="account-name">{acct.name}</div>
+                        <div class="account-meta">Off budget</div>
+                      </div>
+                      <div class="account-balance">{formatBalance(acct.balance)}</div>
+                    </button>
+                  {/each}
+                {/if}
+              </div>
             </div>
+          {/if}
+        </div>
+
+        <div class="queue-header">
+          <div>
+            <div class="queue-label">Working queue</div>
+            <div class="queue-title">Transactions and transfer matches</div>
+            <div class="queue-summary">Keep categorization, transfer cleanup, and the live ledger in one place.</div>
           </div>
-        {/if}
+          <div class="queue-freshness">Live from budget API</div>
+        </div>
+
         {#if suggestedTransfers.length > 0}
           <div class="inline-transfers">
             <div class="section-head compact-head">
@@ -460,137 +486,188 @@
             </div>
           </div>
         {/if}
-        <div class="filter-strip">
-          <button class:active={activeTab === 'all'} onclick={() => { activeTab = 'all'; loadTransactions(); }}>All</button>
-          <button class:active={activeTab === 'uncategorized'} onclick={() => { activeTab = 'uncategorized'; loadTransactions(); }}>
-            Needs category
-            {#if uncatCount > 0}<span>{uncatCount}</span>{/if}
-          </button>
-          <button class:active={activeTab === 'categorized'} onclick={() => { activeTab = 'categorized'; loadTransactions(); }}>Categorized</button>
-        </div>
 
-        {#if selected.size > 0}
-          <div class="selection-bar">
-            <div class="selection-copy">{selected.size} selected</div>
-            <div class="selection-actions">
-              {#if canTransfer}
-                <button class="mini-btn primary" onclick={linkSelectedAsTransfer} disabled={saving}>Make transfer</button>
-              {/if}
-              {#if bulkCategoryOpen}
-                <select class="bulk-select" onchange={(e) => bulkCategorize((e.target as HTMLSelectElement).value)}>
-                  <option value="">Apply category...</option>
-                  {#each sortedCategories as cat}
-                    <option value={cat}>{cat}</option>
-                  {/each}
-                </select>
-              {:else}
-                <button class="mini-btn" onclick={() => (bulkCategoryOpen = true)}>Set category</button>
-              {/if}
-              <button class="mini-btn" onclick={() => { selected = new Set(); bulkCategoryOpen = false; }}>Clear</button>
+        <section class="ledger-surface">
+          <section class="ledger-head">
+            <div class="filter-strip">
+              <button class:active={activeTab === 'all'} onclick={() => { activeTab = 'all'; loadTransactions(); }}>All</button>
+              <button class:active={activeTab === 'uncategorized'} onclick={() => { activeTab = 'uncategorized'; loadTransactions(); }}>
+                Needs category
+                {#if uncatCount > 0}<span>{uncatCount}</span>{/if}
+              </button>
+              <button class:active={activeTab === 'categorized'} onclick={() => { activeTab = 'categorized'; loadTransactions(); }}>Categorized</button>
             </div>
-          </div>
-        {/if}
-      </section>
 
-      <section class="ledger">
-        <div class="ledger-list items-card">
-        {#each filteredTransactions as txn (txn.id)}
-          <div
-            class="txn-row"
-            class:txn-uncat={txn.categoryType === 'uncat'}
-            class:txn-transfer={txn.categoryType === 'transfer'}
-            class:txn-selected={selected.has(txn.id)}
-          >
-            <label class="txn-check-wrap">
-              <input type="checkbox" class="txn-check" checked={selected.has(txn.id)} onchange={() => toggleSelect(txn.id)} />
-            </label>
-            <div class="row-accent"></div>
-            <div class="txn-main">
-              <div class="txn-meta-top">
-                <span class="txn-date">{txn.date}</span>
-                <span class="txn-account">{txn.account}</span>
+            {#if selected.size > 0}
+              <div class="selection-bar">
+                <div class="selection-copy">{selected.size} selected</div>
+                <div class="selection-actions">
+                  {#if canTransfer}
+                    <button class="mini-btn primary" onclick={linkSelectedAsTransfer} disabled={saving}>Make transfer</button>
+                  {/if}
+                  {#if bulkCategoryOpen}
+                    <select class="bulk-select" onchange={(e) => bulkCategorize((e.target as HTMLSelectElement).value)}>
+                      <option value="">Apply category...</option>
+                      {#each sortedCategories as cat}
+                        <option value={cat}>{cat}</option>
+                      {/each}
+                    </select>
+                  {:else}
+                    <button class="mini-btn" onclick={() => (bulkCategoryOpen = true)}>Set category</button>
+                  {/if}
+                  <button class="mini-btn" onclick={() => { selected = new Set(); bulkCategoryOpen = false; }}>Clear</button>
+                </div>
               </div>
-              <div class="txn-name">{txn.payee}</div>
-              <div class="txn-subline">
-                {#if txn.note}<span>{txn.note}</span>{/if}
-              </div>
-            </div>
-            <div class="txn-tail">
-              <div class="txn-amount" class:pos={txn.amount >= 0} class:neg={txn.amount < 0}>{formatAmount(txn.amount)}</div>
-              <div class="txn-category">
-                {#if txn.categoryType === 'transfer'}
-                  <span class="cat-pill transfer">Transfer</span>
-                {:else if txn.categoryType === 'uncat'}
-                  <select class="cat-select" onchange={(e) => categorize(txn.id, (e.target as HTMLSelectElement).value)}>
-                    <option value="">Select category</option>
-                    {#each sortedCategories as cat}
-                      <option value={cat}>{cat}</option>
-                    {/each}
-                  </select>
-                {:else}
-                  <span class="cat-pill">{txn.category}</span>
-                {/if}
-              </div>
-            </div>
-          </div>
-        {/each}
+            {/if}
+          </section>
 
-        {#if filteredTransactions.length === 0}
-          <div class="empty-state">
-            {#if activeTab === 'uncategorized'}
-              No uncategorized transactions right now.
-            {:else}
-            No transactions to show.
-          {/if}
-          </div>
-        {/if}
-        </div>
-
-        {#if hasMore}
-          <button class="load-more-btn" onclick={loadMore} disabled={loadingMore}>
-            {loadingMore ? 'Loading...' : 'Load more'}
-          </button>
-        {/if}
-      </section>
-    </section>
-  {:else}
-    <section class="budget-surface reveal">
-      <section class="budget-board">
-      {#each budgetGroups as group}
-        <section class="budget-group">
-          <div class="section-head budget-group-head">
-            <h2>{group.name}</h2>
-            <span>{group.categories.length} categories</span>
-          </div>
-          <div class="budget-rows">
-            {#each group.categories as cat}
-              <div class="budget-row" class:overspent={cat.available < 0}>
-                <div class="budget-name-wrap">
-                  <div class="budget-name">{cat.name}</div>
-                  <div class="budget-guidance">
-                    {#if cat.budgeted > 0}
-                      <span>Budgeted {formatBudgetAmount(cat.budgeted)}</span>
-                    {/if}
-                    {#if cat.spent > 0}
-                      <span>Spent {formatBudgetAmount(cat.spent)}</span>
-                    {/if}
-                    {#if cat.budgeted === 0 && cat.spent === 0}
-                      <span>Nothing planned yet</span>
-                    {/if}
+          <section class="ledger">
+            <div class="ledger-list items-card">
+              {#each filteredTransactions as txn (txn.id)}
+                <div
+                  class="txn-row"
+                  class:txn-uncat={txn.categoryType === 'uncat'}
+                  class:txn-transfer={txn.categoryType === 'transfer'}
+                  class:txn-selected={selected.has(txn.id)}
+                >
+                  <label class="txn-check-wrap">
+                    <input type="checkbox" class="txn-check" checked={selected.has(txn.id)} onchange={() => toggleSelect(txn.id)} />
+                  </label>
+                  <div class="row-accent"></div>
+                  <div class="txn-main">
+                    <div class="txn-meta-top">
+                      <span class="txn-date">{txn.date}</span>
+                      <span class="txn-account">{txn.account}</span>
+                    </div>
+                    <div class="txn-name">{txn.payee}</div>
+                    <div class="txn-subline">
+                      {#if txn.note}<span>{txn.note}</span>{/if}
+                    </div>
+                  </div>
+                  <div class="txn-tail">
+                    <div class="txn-amount" class:pos={txn.amount >= 0} class:neg={txn.amount < 0}>{formatAmount(txn.amount)}</div>
+                    <div class="txn-category">
+                      {#if txn.categoryType === 'transfer'}
+                        <span class="cat-pill transfer">Transfer</span>
+                      {:else if txn.categoryType === 'uncat'}
+                        <select class="cat-select" onchange={(e) => categorize(txn.id, (e.target as HTMLSelectElement).value)}>
+                          <option value="">Select category</option>
+                          {#each sortedCategories as cat}
+                            <option value={cat}>{cat}</option>
+                          {/each}
+                        </select>
+                      {:else}
+                        <span class="cat-pill">{txn.category}</span>
+                      {/if}
+                    </div>
                   </div>
                 </div>
-                <div class="budget-values">
-                  <strong class:negative={cat.available < 0} class:positive={cat.available > 0}>
-                    {cat.available < 0 ? '-' : ''}{formatBudgetAmount(Math.abs(cat.available))}
-                  </strong>
-                  <span>{cat.available < 0 ? 'Over' : 'Left'}</span>
+              {/each}
+
+              {#if filteredTransactions.length === 0}
+                <div class="empty-state">
+                  {#if activeTab === 'uncategorized'}
+                    No uncategorized transactions right now.
+                  {:else}
+                    No transactions to show.
+                  {/if}
                 </div>
-              </div>
-            {/each}
-          </div>
+              {/if}
+            </div>
+
+            {#if hasMore}
+              <button class="load-more-btn" onclick={loadMore} disabled={loadingMore}>
+                {loadingMore ? 'Loading...' : 'Load more'}
+              </button>
+            {/if}
+          </section>
         </section>
-      {/each}
-      </section>
+      </div>
+    </section>
+  {:else}
+    <section class="budget-layout reveal">
+      <div class="budget-main">
+        <div class="toolbar-card">
+          <div class="toolbar-head">
+            <div>
+              <div class="toolbar-label">Modes</div>
+              <div class="toolbar-title">Monthly plan</div>
+            </div>
+            <div class="toolbar-meta">{budgetGroups.length} groups</div>
+          </div>
+          <div class="toolbar-actions">
+            <div class="view-switch">
+              <button onclick={() => (activeView = 'transactions')}>Transactions</button>
+              <button class="active" onclick={() => (activeView = 'budget')}>Budget</button>
+            </div>
+          </div>
+          <section class="signal-strip compact-signals">
+            <div class="signal-card compact active">
+              <div class="signal-topline">
+                <div class="signal-label">On budget cash</div>
+                <div class="signal-value">{formatBalance(onBudgetTotal)}</div>
+              </div>
+              <div class="signal-note">Live budget cash across active accounts.</div>
+            </div>
+            <div class="signal-card compact">
+              <div class="signal-topline">
+                <div class="signal-label">Spent</div>
+                <div class="signal-value">{spendMagnitude}</div>
+              </div>
+              <div class="signal-note">Tracked month spending.</div>
+            </div>
+          </section>
+        </div>
+
+        <div class="queue-header">
+          <div>
+            <div class="queue-label">Plan board</div>
+            <div class="queue-title">Category balances</div>
+            <div class="queue-summary">Review what is left, what is over, and which categories still need a plan.</div>
+          </div>
+          <div class="queue-freshness">Live month budget</div>
+        </div>
+
+        <section class="budget-surface">
+          <section class="budget-board items-card">
+            {#each budgetGroups as group}
+              <section class="budget-group">
+                <div class="section-head budget-group-head">
+                  <h2>{group.name}</h2>
+                  <span>{group.categories.length} categories</span>
+                </div>
+                <div class="budget-rows">
+                  {#each group.categories as cat}
+                    <div class="budget-row" class:overspent={cat.available < 0}>
+                      <div class="row-accent {cat.available < 0 ? 'transfer-accent' : 'account-accent'}"></div>
+                      <div class="budget-name-wrap">
+                        <div class="budget-name">{cat.name}</div>
+                        <div class="budget-guidance">
+                          {#if cat.budgeted > 0}
+                            <span>Budgeted {formatBudgetAmount(cat.budgeted)}</span>
+                          {/if}
+                          {#if cat.spent > 0}
+                            <span>Spent {formatBudgetAmount(cat.spent)}</span>
+                          {/if}
+                          {#if cat.budgeted === 0 && cat.spent === 0}
+                            <span>Nothing planned yet</span>
+                          {/if}
+                        </div>
+                      </div>
+                      <div class="budget-values">
+                        <strong class:negative={cat.available < 0} class:positive={cat.available > 0}>
+                          {cat.available < 0 ? '-' : ''}{formatBudgetAmount(Math.abs(cat.available))}
+                        </strong>
+                        <span>{cat.available < 0 ? 'Over' : 'Left'}</span>
+                      </div>
+                    </div>
+                  {/each}
+                </div>
+              </section>
+            {/each}
+          </section>
+        </section>
+      </div>
     </section>
   {/if}
 </div>
@@ -598,25 +675,27 @@
 <style>
   .budget-page {
     display: grid;
-    gap: 20px;
+    gap: 18px;
     color: #1f1811;
   }
 
-  .budget-head {
+  .budget-command {
     display: flex;
     align-items: end;
     justify-content: space-between;
-    gap: 18px;
-    padding-top: 2px;
+    gap: 20px;
   }
 
-  .head-copy {
+  .command-copy {
     display: grid;
     gap: 8px;
+    max-width: 680px;
   }
 
-  .head-kicker,
-  .stat-label,
+  .command-label,
+  .signal-label,
+  .toolbar-label,
+  .queue-label,
   .section-head span {
     font-size: 11px;
     text-transform: uppercase;
@@ -636,24 +715,89 @@
     line-height: 0.92;
   }
 
-  .head-summary {
-    margin: 0;
-    color: #69594a;
-    font-size: 0.96rem;
-    line-height: 1.35;
-  }
-
   h2 {
-    font-size: 1.25rem;
+    font-size: 1.08rem;
     line-height: 1;
   }
 
-  .head-actions {
+  .command-copy p,
+  .queue-summary,
+  .signal-note,
+  .transfer-note,
+  .budget-guidance,
+  .account-meta,
+  .txn-subline {
+    margin: 0;
+    color: #69594a;
+    font-size: 0.86rem;
+    line-height: 1.4;
+  }
+
+  .command-actions {
+    display: grid;
+    gap: 6px;
+    justify-items: end;
+    text-align: right;
+  }
+
+  .command-kicker {
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #8a7868;
+  }
+
+  .command-stats {
+    font-size: 0.96rem;
+    font-weight: 600;
+    color: #3a2f24;
+  }
+
+  .budget-layout,
+  .budget-main {
+    display: grid;
+    gap: 18px;
+  }
+
+  .toolbar-card {
+    display: grid;
+    gap: 14px;
+    padding: 18px 20px;
+    border-radius: 28px;
+    background: rgba(250, 244, 236, 0.74);
+    border: 1px solid rgba(35, 26, 17, 0.08);
+    backdrop-filter: blur(14px);
+  }
+
+  .toolbar-head,
+  .queue-header,
+  .section-head {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .toolbar-title,
+  .queue-title {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: #1f1811;
+    letter-spacing: -0.04em;
+  }
+
+  .toolbar-meta,
+  .queue-freshness {
+    color: #7a6a5b;
+    font-size: 0.84rem;
+    font-weight: 600;
+  }
+
+  .toolbar-actions {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
-    justify-content: flex-end;
   }
 
   .view-switch {
@@ -667,39 +811,27 @@
   }
 
   .view-switch button,
+  .view-pill,
   .mini-btn,
   .load-more-btn {
-    min-height: 42px;
+    min-height: 38px;
     padding: 0 14px;
     border-radius: 999px;
     border: 1px solid rgba(35, 26, 17, 0.08);
     background: rgba(255, 251, 246, 0.88);
     color: #4f4338;
     font: inherit;
-    font-size: 0.9rem;
+    font-size: 0.88rem;
     font-weight: 600;
     cursor: pointer;
   }
 
   .view-switch button {
-    min-height: 38px;
+    min-height: 36px;
     border-color: transparent;
     background: transparent;
   }
 
-  .view-pill {
-    min-height: 38px;
-    padding: 0 14px;
-    border-radius: 999px;
-    border: 1px solid rgba(35, 26, 17, 0.08);
-    background: rgba(255, 251, 246, 0.88);
-    color: #4f4338;
-    font: inherit;
-    font-size: 0.9rem;
-    font-weight: 600;
-    cursor: pointer;
-  }
-
   .view-switch button.active,
   .view-pill.active,
   .mini-btn.primary {
@@ -708,149 +840,38 @@
     border-color: #2f241c;
   }
 
-  .stats-strip {
+  .signal-strip.compact-signals {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 12px;
-  }
-
-  .stat-block {
-    display: grid;
-    gap: 4px;
-    padding: 0;
-  }
-
-  .stat-value {
-    font-size: 1.16rem;
-    font-weight: 700;
-    line-height: 1;
-    letter-spacing: -0.04em;
-    color: #1f1811;
-  }
-
-  .account-ribbon {
-    display: none;
     gap: 10px;
   }
 
-  .account-ribbon.open {
+  .signal-card {
     display: grid;
+    gap: 8px;
+    padding: 14px 16px;
+    border-radius: 22px;
+    background: rgba(255, 255, 255, 0.76);
+    border: 1px solid rgba(35, 26, 17, 0.06);
   }
 
-  .account-list {
-    display: grid;
-    gap: 0;
+  .signal-card.compact.active {
+    background: rgba(255, 247, 236, 0.9);
   }
 
-  .account-row {
-    display: grid;
-    grid-template-columns: 4px minmax(0, 1fr) auto;
-    align-items: center;
-    gap: 14px;
-    padding: 13px 16px;
-    border: 0;
-    background: transparent;
-    color: #433629;
-    text-align: left;
-    font: inherit;
-    cursor: pointer;
-    transition: background 160ms ease, transform 160ms ease;
-  }
-
-  .account-row + .account-row {
-    border-top: 1px solid rgba(35, 26, 17, 0.07);
-  }
-
-  .account-row:hover {
-    background: rgba(255, 248, 242, 0.88);
-    transform: translateX(2px);
-  }
-
-  .account-row.active {
-    background: rgba(255, 248, 242, 0.92);
-  }
-
-  .account-accent {
-    background: linear-gradient(180deg, #c2b1a0, #a69483);
-  }
-
-  .account-accent.quiet {
-    background: linear-gradient(180deg, #bcb1a2, #978b7d);
-  }
-
-  .account-main {
-    min-width: 0;
-    display: grid;
-    gap: 3px;
-  }
-
-  .account-name {
-    font-size: 0.94rem;
-    font-weight: 600;
-    color: #1f1811;
-  }
-
-  .account-meta {
-    color: #776655;
-    font-size: 0.78rem;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-  }
-
-  .account-balance {
-    font-family: var(--mono);
-    font-size: 0.9rem;
-    font-weight: 700;
-    color: #1f1811;
-  }
-
-  .account-balance.negative {
-    color: #9a442b;
-  }
-
-  .account-row.quiet {
-    opacity: 0.86;
-  }
-
-  .ledger-head,
-  .ledger,
-  .budget-board {
-    padding: 0;
-  }
-
-  .ledger-surface,
-  .budget-surface {
-    display: grid;
-    gap: 18px;
-    padding: 22px 24px;
-    border-radius: 28px;
-    background: rgba(250, 244, 236, 0.74);
-    border: 1px solid rgba(35, 26, 17, 0.08);
-    backdrop-filter: blur(14px);
-  }
-
-  .section-head {
+  .signal-topline {
     display: flex;
-    align-items: end;
+    align-items: start;
     justify-content: space-between;
     gap: 12px;
-    margin-bottom: 12px;
   }
 
-  .compact-head {
-    margin-bottom: 8px;
-  }
-
-  .ledger-title-row {
-    margin-bottom: 0;
-  }
-
-  .transfer-list,
-  .ledger-list,
-  .budget-board,
-  .budget-rows {
-    display: grid;
-    gap: 0;
+  .signal-value {
+    font-size: 1.02rem;
+    font-weight: 700;
+    line-height: 1;
+    color: #1f1811;
+    letter-spacing: -0.04em;
   }
 
   .items-card {
@@ -861,102 +882,175 @@
     box-shadow: 0 16px 44px rgba(42, 30, 19, 0.05);
   }
 
-  .transfer-row,
-  .budget-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 14px 0;
-    border-bottom: 1px solid rgba(35, 26, 17, 0.08);
+  .account-ribbon,
+  .inline-transfers {
+    display: grid;
+    gap: 8px;
   }
 
-  .transfer-row {
+  .compact-head {
+    margin-bottom: 0;
+  }
+
+  .account-list,
+  .transfer-list,
+  .ledger-list,
+  .budget-board,
+  .budget-rows {
+    display: grid;
+    gap: 0;
+  }
+
+  .account-row,
+  .transfer-row,
+  .txn-row,
+  .budget-row {
     display: grid;
-    grid-template-columns: 4px minmax(0, 1fr) auto;
     align-items: center;
     gap: 14px;
-    padding: 12px 14px;
-    border-bottom: 0;
+    padding: 14px 16px;
+    margin: 0;
+    width: 100%;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+    font: inherit;
     transition: background 160ms ease, transform 160ms ease;
   }
 
-  .transfer-row + .transfer-row {
+  .account-row,
+  .transfer-row {
+    grid-template-columns: 4px minmax(0, 1fr) auto;
+    cursor: pointer;
+  }
+
+  .txn-row {
+    grid-template-columns: auto 4px minmax(0, 1fr) auto;
+  }
+
+  .budget-row {
+    grid-template-columns: 4px minmax(0, 1fr) auto;
+  }
+
+  .account-row + .account-row,
+  .transfer-row + .transfer-row,
+  .txn-row + .txn-row,
+  .budget-group + .budget-group {
     border-top: 1px solid rgba(35, 26, 17, 0.07);
   }
 
+  .account-row:hover,
   .transfer-row:hover,
   .txn-row:hover {
     background: rgba(255, 248, 242, 0.88);
     transform: translateX(2px);
   }
 
-  .transfer-copy,
-  .budget-name-wrap {
-    min-width: 0;
+  .account-row.active,
+  .txn-selected {
+    background: rgba(255, 248, 242, 0.92);
   }
 
-  .transfer-accent {
+  .row-accent {
+    align-self: stretch;
+    border-radius: 999px;
+    background: rgba(35, 26, 17, 0.08);
+  }
+
+  .account-accent {
+    background: linear-gradient(180deg, #c2b1a0, #a69483);
+  }
+
+  .account-accent.quiet {
+    background: linear-gradient(180deg, #bcb1a2, #978b7d);
+  }
+
+  .transfer-accent,
+  .txn-uncat .row-accent {
     background: linear-gradient(180deg, #f6a33a, #e28615);
   }
 
+  .txn-transfer .row-accent {
+    background: linear-gradient(180deg, #85715d, #625446);
+  }
+
+  .txn-row:not(.txn-uncat):not(.txn-transfer) .row-accent {
+    background: linear-gradient(180deg, #c2b1a0, #a69483);
+  }
+
+  .account-main,
+  .transfer-copy,
+  .txn-main,
+  .budget-name-wrap {
+    min-width: 0;
+    display: grid;
+    gap: 3px;
+  }
+
+  .account-name,
   .transfer-route,
+  .txn-name,
   .budget-name {
-    font-size: 1rem;
+    font-size: 0.95rem;
     font-weight: 600;
     color: #1f1811;
   }
 
-  .transfer-note {
-    margin-top: 2px;
-    color: #6b5b4c;
-    font-size: 0.8rem;
-    line-height: 1.35;
+  .account-meta,
+  .txn-date,
+  .txn-account {
+    font-size: 0.72rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #7b6a59;
   }
 
-  .transfer-meta {
+  .account-balance,
+  .transfer-meta strong,
+  .txn-amount,
+  .budget-values strong {
+    font-family: var(--mono);
+    font-size: 0.92rem;
+    font-weight: 700;
+    color: #1f1811;
+  }
+
+  .account-balance.negative,
+  .txn-amount.neg,
+  .budget-values strong.negative {
+    color: #9a442b;
+  }
+
+  .txn-amount.pos,
+  .budget-values strong.positive {
+    color: #3b7858;
+  }
+
+  .account-row.quiet {
+    opacity: 0.86;
+  }
+
+  .transfer-meta,
+  .selection-actions,
+  .txn-tail,
+  .budget-values {
     display: grid;
-    gap: 5px;
+    gap: 6px;
     justify-items: end;
   }
 
-  .transfer-meta strong {
-    font-family: var(--mono);
-    color: #1f1811;
-  }
-
-  .transfer-actions,
-  .selection-actions {
+  .transfer-actions {
     display: flex;
-    flex-wrap: wrap;
     gap: 6px;
+    flex-wrap: wrap;
     justify-content: flex-end;
   }
 
-  .ledger-head {
+  .ledger-surface,
+  .budget-surface {
     display: grid;
-    gap: 10px;
-    padding-top: 2px;
-  }
-
-  .inline-transfers {
-    display: grid;
-    gap: 0;
-  }
-
-  .selection-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding-top: 12px;
-    border-top: 1px solid rgba(35, 26, 17, 0.08);
-  }
-
-  .selection-copy {
-    font-size: 0.92rem;
-    font-weight: 600;
-    color: #48392b;
+    gap: 14px;
   }
 
   .filter-strip {
@@ -990,33 +1084,19 @@
     font-size: 0.78rem;
   }
 
-  .ledger {
+  .selection-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding-top: 12px;
     border-top: 1px solid rgba(35, 26, 17, 0.08);
   }
 
-  .txn-row {
-    display: grid;
-    grid-template-columns: auto 4px minmax(0, 1fr) auto;
-    gap: 12px;
-    align-items: center;
-    padding: 12px 14px;
-    margin: 0;
-    width: 100%;
-    background: none;
-    transition: background 160ms ease, transform 160ms ease;
-  }
-
-  .txn-row + .txn-row {
-    border-top: 1px solid rgba(35, 26, 17, 0.07);
-  }
-
-  .txn-row:focus-visible {
-    outline: 2px solid rgba(122, 87, 52, 0.45);
-    outline-offset: 1px;
-  }
-
-  .txn-selected {
-    background: rgba(255, 248, 242, 0.88);
+  .selection-copy {
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: #48392b;
   }
 
   .txn-check-wrap {
@@ -1025,36 +1105,12 @@
     padding-top: 4px;
   }
 
-  .row-accent {
-    align-self: stretch;
-    border-radius: 999px;
-    background: rgba(35, 26, 17, 0.08);
-  }
-
-  .txn-uncat .row-accent {
-    background: linear-gradient(180deg, #f6a33a, #e28615);
-  }
-
-  .txn-transfer .row-accent {
-    background: linear-gradient(180deg, #85715d, #625446);
-  }
-
-  .txn-row:not(.txn-uncat):not(.txn-transfer) .row-accent {
-    background: linear-gradient(180deg, #c2b1a0, #a69483);
-  }
-
   .txn-check {
     width: 16px;
     height: 16px;
     accent-color: #6f5337;
   }
 
-  .txn-main {
-    min-width: 0;
-    display: grid;
-    gap: 3px;
-  }
-
   .txn-meta-top {
     display: flex;
     flex-wrap: wrap;
@@ -1062,35 +1118,9 @@
     align-items: center;
   }
 
-  .txn-name {
-    min-width: 0;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: #1f1811;
-  }
-
-  .txn-date,
-  .txn-account {
-    color: #7b6a59;
-    font-size: 0.7rem;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-  }
-
-  .txn-subline {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2px 8px;
-    color: #6d5c4b;
-    font-size: 0.78rem;
-    min-height: 1.1em;
-  }
-
   .txn-subline span {
     display: inline;
-    min-height: 0;
     padding: 0;
-    border-radius: 0;
     background: transparent;
   }
 
@@ -1099,13 +1129,6 @@
     justify-content: flex-end;
   }
 
-  .txn-tail {
-    display: grid;
-    justify-items: end;
-    gap: 6px;
-    margin-left: auto;
-  }
-
   .cat-pill {
     display: inline-flex;
     align-items: center;
@@ -1137,104 +1160,50 @@
     font-weight: 600;
   }
 
-  .txn-amount {
-    flex-shrink: 0;
-    font-family: var(--mono);
-    font-size: 0.9rem;
-    font-weight: 700;
-  }
-
-  .txn-amount.pos {
-    color: #3b7858;
-  }
-
-  .txn-amount.neg {
-    color: #9a442b;
-  }
-
   .empty-state {
-    padding: 18px 0;
+    padding: 18px 16px;
     color: #6b5b4c;
   }
 
   .budget-group {
     display: grid;
     gap: 0;
-    padding-top: 8px;
-  }
-
-  .budget-group + .budget-group {
-    margin-top: 18px;
-    padding-top: 18px;
-    border-top: 1px solid rgba(35, 26, 17, 0.08);
   }
 
   .budget-group-head {
-    margin-bottom: 8px;
-  }
-
-  .budget-name-wrap {
-    display: grid;
-    gap: 6px;
+    padding: 14px 16px 10px;
+    margin-bottom: 0;
   }
 
   .budget-guidance {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 12px;
-    color: #736252;
-    font-size: 0.82rem;
   }
 
   .budget-values {
-    display: grid;
-    gap: 4px;
-    justify-items: end;
     color: #6d5c4b;
     font-size: 0.76rem;
     text-transform: uppercase;
     letter-spacing: 0.12em;
   }
 
-  .budget-values strong {
-    font-family: var(--mono);
-    font-size: 0.98rem;
-    color: #1f1811;
-    letter-spacing: 0;
-    text-transform: none;
-  }
-
-  .budget-values strong.negative {
-    color: #a23e26;
-  }
-
-  .budget-values strong.positive {
-    color: #3b7858;
-  }
-
   .load-more-btn {
-    margin-top: 18px;
+    margin-top: 12px;
     justify-self: start;
   }
 
   @media (max-width: 900px) {
-    .stats-strip {
-      grid-template-columns: 1fr 1fr;
-    }
-
     .txn-row {
       grid-template-columns: auto 4px minmax(0, 1fr);
     }
 
-    .txn-tail {
+    .txn-tail,
+    .budget-values {
       grid-column: 3;
       justify-content: flex-start;
       justify-items: start;
     }
-
-    .budget-values {
-      justify-items: start;
-    }
   }
 
   @media (max-width: 768px) {
@@ -1243,27 +1212,45 @@
       padding-inline: 16px;
     }
 
-    .budget-head {
+    .budget-command {
       align-items: start;
       gap: 14px;
       flex-direction: column;
     }
 
-    .head-actions {
-      width: 100%;
-      justify-content: space-between;
+    .command-copy p {
+      font-size: 0.84rem;
+    }
+
+    .command-actions {
+      justify-items: start;
+      text-align: left;
     }
 
     h1 {
       font-size: clamp(2.2rem, 10vw, 3rem);
     }
 
-    .view-switch {
-      flex: 1;
+    .toolbar-card {
+      gap: 12px;
+      padding: 14px 12px;
+      border-radius: 24px;
     }
 
-    .view-switch button {
-      padding-inline: 12px;
+    .toolbar-head,
+    .queue-header,
+    .selection-bar {
+      align-items: start;
+      flex-direction: column;
+    }
+
+    .toolbar-actions {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    .view-switch {
+      flex: 1;
     }
 
     .view-pill {
@@ -1273,91 +1260,41 @@
       white-space: nowrap;
     }
 
-    .head-summary {
-      display: none;
+    .signal-strip.compact-signals {
+      grid-template-columns: 1fr;
+      gap: 8px;
     }
 
-    .account-ribbon.open {
-      margin-top: -2px;
-    }
-
-    .ledger-surface,
-    .budget-surface {
-      gap: 12px;
-      padding: 14px 12px;
-      border-radius: 24px;
-    }
-
-    .stats-strip {
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: 10px;
-      overflow-x: auto;
-      padding-bottom: 2px;
-      scrollbar-width: none;
-    }
-
-    .stats-strip::-webkit-scrollbar {
-      display: none;
-    }
-
-    .stat-block {
-      min-width: 112px;
+    .signal-card {
+      padding: 12px 14px;
     }
 
+    .account-row,
     .transfer-row,
     .budget-row {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .transfer-row {
       grid-template-columns: 4px minmax(0, 1fr);
       gap: 10px;
-      padding: 10px 12px;
-    }
-
-    .transfer-meta,
-    .selection-actions {
-      justify-items: start;
-      justify-content: flex-start;
-    }
-
-    .selection-bar {
-      flex-direction: column;
-      align-items: stretch;
+      padding: 12px;
     }
 
     .txn-row {
       grid-template-columns: auto 4px minmax(0, 1fr);
       gap: 8px;
-      padding: 10px 12px;
+      padding: 12px;
     }
 
-    .txn-meta-top {
-      gap: 6px 10px;
-    }
-
-    .txn-amount {
-      font-size: 0.84rem;
-    }
-
-    .txn-tail {
-      grid-column: 3;
+    .transfer-meta,
+    .transfer-actions,
+    .selection-actions,
+    .txn-tail,
+    .budget-values {
       justify-items: start;
-      margin-left: 0;
+      justify-content: flex-start;
     }
 
     .cat-select {
       max-width: none;
       width: 100%;
     }
-
-    .budget-values {
-      justify-items: start;
-    }
-
-    .stat-block {
-      gap: 3px;
-    }
   }
 </style>
diff --git a/services/brain/app/api/taxonomy.py b/services/brain/app/api/taxonomy.py
index befd5f9..2967bc6 100644
--- a/services/brain/app/api/taxonomy.py
+++ b/services/brain/app/api/taxonomy.py
@@ -22,11 +22,15 @@ router = APIRouter(prefix="/api/taxonomy", tags=["taxonomy"])
 
 class FolderIn(BaseModel):
     name: str
+    color: Optional[str] = None
+    icon: Optional[str] = None
 
 class FolderOut(BaseModel):
     id: str
     name: str
     slug: str
+    color: Optional[str] = None
+    icon: Optional[str] = None
     is_active: bool
     sort_order: int
     item_count: int = 0
@@ -34,11 +38,15 @@ class FolderOut(BaseModel):
 
 class TagIn(BaseModel):
     name: str
+    color: Optional[str] = None
+    icon: Optional[str] = None
 
 class TagOut(BaseModel):
     id: str
     name: str
     slug: str
+    color: Optional[str] = None
+    icon: Optional[str] = None
     is_active: bool
     sort_order: int
     item_count: int = 0
@@ -77,8 +85,8 @@ async def get_sidebar(
         folder_counts[row[0]] = row[1]
 
     folders = [FolderOut(
-        id=f.id, name=f.name, slug=f.slug, is_active=f.is_active,
-        sort_order=f.sort_order, item_count=folder_counts.get(f.id, 0)
+        id=f.id, name=f.name, slug=f.slug, color=f.color, icon=f.icon,
+        is_active=f.is_active, sort_order=f.sort_order, item_count=folder_counts.get(f.id, 0)
     ) for f in folder_rows]
 
     # Tags with counts
@@ -95,8 +103,8 @@ async def get_sidebar(
         tag_counts[row[0]] = row[1]
 
     tags = [TagOut(
-        id=t.id, name=t.name, slug=t.slug, is_active=t.is_active,
-        sort_order=t.sort_order, item_count=tag_counts.get(t.id, 0)
+        id=t.id, name=t.name, slug=t.slug, color=t.color, icon=t.icon,
+        is_active=t.is_active, sort_order=t.sort_order, item_count=tag_counts.get(t.id, 0)
     ) for t in tag_rows]
 
     # Total items
@@ -118,7 +126,7 @@ async def list_folders(
     rows = (await db.execute(
         select(Folder).where(Folder.user_id == user_id).order_by(Folder.sort_order, Folder.name)
     )).scalars().all()
-    return [FolderOut(id=f.id, name=f.name, slug=f.slug, is_active=f.is_active, sort_order=f.sort_order) for f in rows]
+    return [FolderOut(id=f.id, name=f.name, slug=f.slug, color=f.color, icon=f.icon, is_active=f.is_active, sort_order=f.sort_order) for f in rows]
 
 
 @router.post("/folders", response_model=FolderOut, status_code=201)
@@ -138,7 +146,8 @@ async def create_folder(
         select(func.max(Folder.sort_order)).where(Folder.user_id == user_id)
     )).scalar() or 0
 
-    folder = Folder(id=str(uuid.uuid4()), user_id=user_id, name=body.name.strip(), slug=slug, sort_order=max_order + 1)
+    folder = Folder(id=str(uuid.uuid4()), user_id=user_id, name=body.name.strip(), slug=slug,
+                    color=body.color, icon=body.icon, sort_order=max_order + 1)
     db.add(folder)
     await db.commit()
     return FolderOut(id=folder.id, name=folder.name, slug=folder.slug, is_active=folder.is_active, sort_order=folder.sort_order)
@@ -159,6 +168,8 @@ async def update_folder(
 
     folder.name = body.name.strip()
     folder.slug = slugify(body.name)
+    if body.color is not None: folder.color = body.color
+    if body.icon is not None: folder.icon = body.icon
     folder.updated_at = datetime.utcnow()
 
     # Update denormalized folder name on items
@@ -211,7 +222,7 @@ async def list_tags(
     rows = (await db.execute(
         select(Tag).where(Tag.user_id == user_id).order_by(Tag.sort_order, Tag.name)
     )).scalars().all()
-    return [TagOut(id=t.id, name=t.name, slug=t.slug, is_active=t.is_active, sort_order=t.sort_order) for t in rows]
+    return [TagOut(id=t.id, name=t.name, slug=t.slug, color=t.color, icon=t.icon, is_active=t.is_active, sort_order=t.sort_order) for t in rows]
 
 
 @router.post("/tags", response_model=TagOut, status_code=201)
@@ -231,7 +242,8 @@ async def create_tag(
         select(func.max(Tag.sort_order)).where(Tag.user_id == user_id)
     )).scalar() or 0
 
-    tag = Tag(id=str(uuid.uuid4()), user_id=user_id, name=body.name.strip(), slug=slug, sort_order=max_order + 1)
+    tag = Tag(id=str(uuid.uuid4()), user_id=user_id, name=body.name.strip(), slug=slug,
+              color=body.color, icon=body.icon, sort_order=max_order + 1)
     db.add(tag)
     await db.commit()
     return TagOut(id=tag.id, name=tag.name, slug=tag.slug, is_active=tag.is_active, sort_order=tag.sort_order)
@@ -253,6 +265,8 @@ async def update_tag(
     old_name = tag.name
     tag.name = body.name.strip()
     tag.slug = slugify(body.name)
+    if body.color is not None: tag.color = body.color
+    if body.icon is not None: tag.icon = body.icon
     tag.updated_at = datetime.utcnow()
 
     # Update denormalized tags array on items that had the old name
diff --git a/services/brain/app/models/taxonomy.py b/services/brain/app/models/taxonomy.py
index f86dd04..1cac3f4 100644
--- a/services/brain/app/models/taxonomy.py
+++ b/services/brain/app/models/taxonomy.py
@@ -29,6 +29,8 @@ class Folder(Base):
     user_id = Column(String(64), nullable=False, index=True)
     name = Column(String(128), nullable=False)
     slug = Column(String(128), nullable=False)
+    color = Column(String(7), nullable=True)        # hex like #4F46E5
+    icon = Column(String(32), nullable=True)         # lucide icon name like "home"
     is_active = Column(Boolean, default=True, nullable=False)
     sort_order = Column(Integer, default=0, nullable=False)
     created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
@@ -46,6 +48,8 @@ class Tag(Base):
     user_id = Column(String(64), nullable=False, index=True)
     name = Column(String(128), nullable=False)
     slug = Column(String(128), nullable=False)
+    color = Column(String(7), nullable=True)
+    icon = Column(String(32), nullable=True)
     is_active = Column(Boolean, default=True, nullable=False)
     sort_order = Column(Integer, default=0, nullable=False)
     created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
@@ -64,8 +68,16 @@ class ItemTag(Base):
     created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
 
 
-# Default folders to seed for new users
-DEFAULT_FOLDERS = ["Home", "Family", "Work", "Travel", "Knowledge", "Faith", "Projects"]
+# Default folders with colors and icons
+DEFAULT_FOLDERS = [
+    {"name": "Home",      "color": "#059669", "icon": "home"},
+    {"name": "Family",    "color": "#D97706", "icon": "heart"},
+    {"name": "Work",      "color": "#4338CA", "icon": "briefcase"},
+    {"name": "Travel",    "color": "#0EA5E9", "icon": "plane"},
+    {"name": "Knowledge", "color": "#8B5CF6", "icon": "book-open"},
+    {"name": "Faith",     "color": "#10B981", "icon": "moon"},
+    {"name": "Projects",  "color": "#F43F5E", "icon": "folder"},
+]
 
 # Default tags to seed for new users
 DEFAULT_TAGS = [
@@ -87,8 +99,9 @@ async def ensure_user_taxonomy(db, user_id: str):
     )).scalar() or 0
 
     if folder_count == 0:
-        for i, name in enumerate(DEFAULT_FOLDERS):
-            db.add(Folder(id=new_id(), user_id=user_id, name=name, slug=slugify(name), sort_order=i))
+        for i, f in enumerate(DEFAULT_FOLDERS):
+            db.add(Folder(id=new_id(), user_id=user_id, name=f["name"], slug=slugify(f["name"]),
+                          color=f.get("color"), icon=f.get("icon"), sort_order=i))
         await db.flush()
 
     tag_count = (await db.execute(