diff --git a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
index 3533cc10..b27a1624 100644
--- a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
+++ b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
@@ -94,6 +94,72 @@ exports[`screen snapshots > Activity feed 1`] = `
         </button>
         <button
           class="btn-ghost"
+          disabled=""
+        >
+          <svg
+            class="lucide lucide-download w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+            />
+            <polyline
+              points="7 10 12 15 17 10"
+            />
+            <line
+              x1="12"
+              x2="12"
+              y1="15"
+              y2="3"
+            />
+          </svg>
+           
+          CSV
+        </button>
+        <button
+          class="btn-ghost"
+          disabled=""
+        >
+          <svg
+            class="lucide lucide-download w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+            />
+            <polyline
+              points="7 10 12 15 17 10"
+            />
+            <line
+              x1="12"
+              x2="12"
+              y1="15"
+              y2="3"
+            />
+          </svg>
+           
+          JSON
+        </button>
+        <button
+          aria-label="Refresh"
+          class="btn-ghost"
+          title="Refresh"
         >
           <svg
             class="lucide lucide-refresh-cw w-4 h-4"
@@ -202,10 +268,10 @@ exports[`screen snapshots > Activity feed 1`] = `
               >
                 <dt>
                   <span
-                    class="badge bg-emerald-500/10 border-emerald-500/20 text-emerald-700 dark:text-emerald-400"
+                    class="badge bg-status-success/10 border-status-success/25 text-status-success"
                   >
                     <span
-                      class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse-dot"
+                      class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
                     />
                     Working
                   </span>
@@ -217,10 +283,10 @@ exports[`screen snapshots > Activity feed 1`] = `
                 </dd>
                 <dt>
                   <span
-                    class="badge bg-yellow-500/10 border-yellow-500/20 text-yellow-700 dark:text-yellow-400"
+                    class="badge bg-status-warning/10 border-status-warning/25 text-status-warning"
                   >
                     <span
-                      class="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse-dot"
+                      class="w-1.5 h-1.5 rounded-full bg-status-warning animate-pulse-dot"
                     />
                     Waiting
                   </span>
@@ -232,10 +298,10 @@ exports[`screen snapshots > Activity feed 1`] = `
                 </dd>
                 <dt>
                   <span
-                    class="badge bg-violet-500/10 border-violet-500/20 text-violet-700 dark:text-violet-400"
+                    class="badge bg-accent/10 border-accent/25 text-accent"
                   >
                     <span
-                      class="w-1.5 h-1.5 rounded-full bg-violet-400 "
+                      class="w-1.5 h-1.5 rounded-full bg-accent "
                     />
                     Completed
                   </span>
@@ -247,10 +313,10 @@ exports[`screen snapshots > Activity feed 1`] = `
                 </dd>
                 <dt>
                   <span
-                    class="badge bg-red-500/10 border-red-500/20 text-red-700 dark:text-red-400"
+                    class="badge bg-status-danger/10 border-status-danger/25 text-status-danger"
                   >
                     <span
-                      class="w-1.5 h-1.5 rounded-full bg-red-400 "
+                      class="w-1.5 h-1.5 rounded-full bg-status-danger "
                     />
                     Error
                   </span>
@@ -290,7 +356,7 @@ exports[`screen snapshots > Activity feed 1`] = `
                 A typical tool call emits two events sharing the same tool_use_id:
               </p>
               <code
-                class="block bg-black/40 border border-border rounded p-2 text-[11px] font-mono text-fg-secondary whitespace-pre-wrap"
+                class="block bg-surface-1 border border-border rounded p-2 text-[11px] font-mono text-fg-secondary whitespace-pre-wrap"
               >
                 PreToolUse (Working) → PostToolUse (Connected) → ... → Stop (Completed)
               </code>
@@ -501,8 +567,10 @@ exports[`screen snapshots > Activity feed 1`] = `
             class="relative "
           >
             <button
+              aria-expanded="false"
+              aria-haspopup="dialog"
               aria-label="From"
-              class="flex items-center gap-2 bg-surface-2 border border-border rounded px-2 py-1.5 min-w-[150px] text-xs focus:outline-none focus:border-accent transition-colors w-full text-left"
+              class="flex items-center gap-2 bg-surface-2 border border-border rounded px-2 py-1.5 min-w-[150px] text-xs focus:outline-none focus:border-accent transition-colors w-full text-left "
               title="From"
               type="button"
             >
@@ -551,8 +619,10 @@ exports[`screen snapshots > Activity feed 1`] = `
             class="relative "
           >
             <button
+              aria-expanded="false"
+              aria-haspopup="dialog"
               aria-label="To"
-              class="flex items-center gap-2 bg-surface-2 border border-border rounded px-2 py-1.5 min-w-[150px] text-xs focus:outline-none focus:border-accent transition-colors w-full text-left"
+              class="flex items-center gap-2 bg-surface-2 border border-border rounded px-2 py-1.5 min-w-[150px] text-xs focus:outline-none focus:border-accent transition-colors w-full text-left "
               title="To"
               type="button"
             >
@@ -638,6 +708,20 @@ exports[`screen snapshots > Activity feed 1`] = `
               </span>
             </button>
           </div>
+          <div
+            class="relative"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              class="text-[11px] px-2 py-1 rounded border cursor-pointer flex items-center gap-1.5 border-border bg-surface-2 text-fg-secondary hover:text-fg-primary"
+              type="button"
+            >
+              <span>
+                Session
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -648,6 +732,7 @@ exports[`screen snapshots > Activity feed 1`] = `
         class="rounded-2xl bg-surface-4 flex items-center justify-center w-14 h-14 mb-5"
       >
         <svg
+          aria-hidden="true"
           class="lucide lucide-activity w-6 h-6 text-fg-muted"
           fill="none"
           height="24"
@@ -688,87 +773,21 @@ exports[`screen snapshots > Claude Config 1`] = `
       class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"
     >
       <div
-        class="flex items-start gap-3 min-w-0 flex-1"
+        class="flex items-start gap-2 min-w-0 flex-1"
       >
-        <div
-          class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0"
+        <span
+          class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full flex-shrink-0"
         >
-          <svg
-            class="lucide lucide-boxes w-4.5 h-4.5 text-accent"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
-            />
-            <path
-              d="m7 16.5-4.74-2.85"
-            />
-            <path
-              d="m7 16.5 5-3"
-            />
-            <path
-              d="M7 16.5v5.17"
-            />
-            <path
-              d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
-            />
-            <path
-              d="m17 16.5-5-3"
-            />
-            <path
-              d="m17 16.5 4.74-2.85"
-            />
-            <path
-              d="M17 16.5v5.17"
-            />
-            <path
-              d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
-            />
-            <path
-              d="M12 8 7.26 5.15"
-            />
-            <path
-              d="m12 8 4.74-2.85"
-            />
-            <path
-              d="M12 13.5V8"
-            />
-          </svg>
-        </div>
-        <div
-          class="min-w-0"
+          <span
+            class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
+          />
+          Live
+        </span>
+        <p
+          class="text-xs text-fg-muted max-w-2xl"
         >
-          <div
-            class="flex items-center gap-2"
-          >
-            <h1
-              class="text-lg font-semibold text-fg-primary"
-            >
-              Claude Config Explorer
-            </h1>
-            <span
-              class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
-            >
-              <span
-                class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
-              />
-              Live
-            </span>
-          </div>
-          <p
-            class="text-xs text-fg-muted max-w-2xl"
-          >
-            Your Claude Code setup at a glance - plugins, skills, subagents, MCP servers, hooks, and settings.
-          </p>
-        </div>
+          Your Claude Code setup at a glance - plugins, skills, subagents, MCP servers, hooks, and settings.
+        </p>
       </div>
       <div
         class="flex flex-col items-stretch lg:items-end gap-2 flex-shrink-0"
@@ -776,27 +795,9 @@ exports[`screen snapshots > Claude Config 1`] = `
         <div
           class="flex items-center gap-2 justify-end flex-wrap"
         >
-          <div
-            class="inline-flex rounded-lg border border-border bg-surface-2 p-0.5"
-          >
-            <button
-              class="px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors bg-accent/20 text-accent border border-accent/30"
-            >
-              All scopes
-            </button>
-            <button
-              class="px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors text-fg-secondary hover:text-fg-primary"
-            >
-              User
-            </button>
-            <button
-              class="px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors text-fg-secondary hover:text-fg-primary"
-            >
-              Project
-            </button>
-          </div>
           <button
             class="inline-flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium text-fg-secondary hover:bg-surface-3 transition-colors"
+            type="button"
           >
             <svg
               class="lucide lucide-user-cog w-3.5 h-3.5"
@@ -852,6 +853,7 @@ exports[`screen snapshots > Claude Config 1`] = `
           </button>
           <button
             class="inline-flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium text-fg-secondary hover:bg-surface-3 transition-colors"
+            type="button"
           >
             <svg
               class="lucide lucide-history w-3.5 h-3.5"
@@ -879,6 +881,7 @@ exports[`screen snapshots > Claude Config 1`] = `
           </button>
           <button
             class="inline-flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium text-fg-secondary hover:bg-surface-3 disabled:opacity-60 transition-colors"
+            type="button"
           >
             <svg
               class="lucide lucide-refresh-cw w-3.5 h-3.5"
@@ -930,557 +933,615 @@ exports[`screen snapshots > Claude Config 1`] = `
       </div>
     </header>
     <div
-      class="relative rounded-xl border border-border bg-surface-1"
+      aria-label="Claude Config Explorer"
+      class="flex flex-wrap items-center gap-1 rounded-xl border border-border bg-surface-1 p-1"
+      role="tablist"
     >
-      <div
-        class="pointer-events-none absolute left-0 top-0 bottom-0 w-12 rounded-l-xl bg-gradient-to-r from-surface-1 to-transparent transition-opacity z-10 opacity-0"
-      />
-      <div
-        aria-label="Claude Config Explorer"
-        class="flex gap-1 p-1 overflow-x-auto scroll-smooth [&::-webkit-scrollbar]:hidden"
-        role="tablist"
-        style="scrollbar-width: none;"
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="true"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 bg-accent/15 text-accent border border-accent/30"
+        data-tab-active="true"
+        data-testid="cc-tab-overview"
+        id="cc-tab-overview"
+        role="tab"
+        tabindex="0"
+        type="button"
       >
-        <button
-          aria-selected="true"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap bg-accent/15 text-accent border border-accent/30"
-          data-tab-active="true"
-          data-testid="cc-tab-overview"
-          role="tab"
+        <svg
+          class="lucide lucide-boxes w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            class="lucide lucide-boxes w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
-            />
-            <path
-              d="m7 16.5-4.74-2.85"
-            />
-            <path
-              d="m7 16.5 5-3"
-            />
-            <path
-              d="M7 16.5v5.17"
-            />
-            <path
-              d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
-            />
-            <path
-              d="m17 16.5-5-3"
-            />
-            <path
-              d="m17 16.5 4.74-2.85"
-            />
-            <path
-              d="M17 16.5v5.17"
-            />
-            <path
-              d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
-            />
-            <path
-              d="M12 8 7.26 5.15"
-            />
-            <path
-              d="m12 8 4.74-2.85"
-            />
-            <path
-              d="M12 13.5V8"
-            />
-          </svg>
-          <span>
-            Overview
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-skills"
-          role="tab"
+          <path
+            d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
+          />
+          <path
+            d="m7 16.5-4.74-2.85"
+          />
+          <path
+            d="m7 16.5 5-3"
+          />
+          <path
+            d="M7 16.5v5.17"
+          />
+          <path
+            d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
+          />
+          <path
+            d="m17 16.5-5-3"
+          />
+          <path
+            d="m17 16.5 4.74-2.85"
+          />
+          <path
+            d="M17 16.5v5.17"
+          />
+          <path
+            d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
+          />
+          <path
+            d="M12 8 7.26 5.15"
+          />
+          <path
+            d="m12 8 4.74-2.85"
+          />
+          <path
+            d="M12 13.5V8"
+          />
+        </svg>
+        <span>
+          Overview
+        </span>
+      </button>
+      <span
+        aria-hidden="true"
+        class="flex items-center gap-1 px-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted ml-1 border-l border-border pl-2"
+      >
+        Content
+      </span>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-skills"
+        id="cc-tab-skills"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-sparkles w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            class="lucide lucide-sparkles w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"
-            />
-            <path
-              d="M20 3v4"
-            />
-            <path
-              d="M22 5h-4"
-            />
-            <path
-              d="M4 17v2"
-            />
-            <path
-              d="M5 18H3"
-            />
-          </svg>
-          <span>
-            Skills
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-agents"
-          role="tab"
+          <path
+            d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"
+          />
+          <path
+            d="M20 3v4"
+          />
+          <path
+            d="M22 5h-4"
+          />
+          <path
+            d="M4 17v2"
+          />
+          <path
+            d="M5 18H3"
+          />
+        </svg>
+        <span>
+          Skills
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
         >
-          <svg
-            class="lucide lucide-user-round w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="12"
-              cy="8"
-              r="5"
-            />
-            <path
-              d="M20 21a8 8 0 0 0-16 0"
-            />
-          </svg>
-          <span>
-            Subagents
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-commands"
-          role="tab"
+          0
+        </span>
+      </button>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-agents"
+        id="cc-tab-agents"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-user-round w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            class="lucide lucide-slash w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M22 2 2 22"
-            />
-          </svg>
-          <span>
-            Slash commands
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-memory"
-          role="tab"
+          <circle
+            cx="12"
+            cy="8"
+            r="5"
+          />
+          <path
+            d="M20 21a8 8 0 0 0-16 0"
+          />
+        </svg>
+        <span>
+          Subagents
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
         >
-          <svg
-            class="lucide lucide-book-open w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 7v14"
-            />
-            <path
-              d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
-            />
-          </svg>
-          <span>
-            Memory
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-plugins"
-          role="tab"
+          0
+        </span>
+      </button>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-commands"
+        id="cc-tab-commands"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-slash w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            class="lucide lucide-plug-zap w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
-            />
-            <path
-              d="m2 22 3-3"
-            />
-            <path
-              d="M7.5 13.5 10 11"
-            />
-            <path
-              d="M10.5 16.5 13 14"
-            />
-            <path
-              d="m18 3-4 4h6l-4 4"
-            />
-          </svg>
-          <span>
-            Plugins
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-marketplaces"
-          role="tab"
+          <path
+            d="M22 2 2 22"
+          />
+        </svg>
+        <span>
+          Slash commands
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
         >
-          <svg
-            class="lucide lucide-store w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"
-            />
-            <path
-              d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
-            />
-            <path
-              d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"
-            />
-            <path
-              d="M2 7h20"
-            />
-            <path
-              d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"
-            />
-          </svg>
-          <span>
-            Marketplaces
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-mcp"
-          role="tab"
+          0
+        </span>
+      </button>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-outputStyles"
+        id="cc-tab-outputStyles"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-palette w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            class="lucide lucide-server w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect
-              height="8"
-              rx="2"
-              ry="2"
-              width="20"
-              x="2"
-              y="2"
-            />
-            <rect
-              height="8"
-              rx="2"
-              ry="2"
-              width="20"
-              x="2"
-              y="14"
-            />
-            <line
-              x1="6"
-              x2="6.01"
-              y1="6"
-              y2="6"
-            />
-            <line
-              x1="6"
-              x2="6.01"
-              y1="18"
-              y2="18"
-            />
-          </svg>
-          <span>
-            MCP servers
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-hooks"
-          role="tab"
+          <circle
+            cx="13.5"
+            cy="6.5"
+            fill="currentColor"
+            r=".5"
+          />
+          <circle
+            cx="17.5"
+            cy="10.5"
+            fill="currentColor"
+            r=".5"
+          />
+          <circle
+            cx="8.5"
+            cy="7.5"
+            fill="currentColor"
+            r=".5"
+          />
+          <circle
+            cx="6.5"
+            cy="12.5"
+            fill="currentColor"
+            r=".5"
+          />
+          <path
+            d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
+          />
+        </svg>
+        <span>
+          Output styles
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
         >
-          <svg
-            class="lucide lucide-webhook w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
-            />
-            <path
-              d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
-            />
-            <path
-              d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"
-            />
-          </svg>
-          <span>
-            Hooks
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-keybindings"
-          role="tab"
+          0
+        </span>
+      </button>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-memory"
+        id="cc-tab-memory"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-book-open w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            class="lucide lucide-keyboard w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10 8h.01"
-            />
-            <path
-              d="M12 12h.01"
-            />
-            <path
-              d="M14 8h.01"
-            />
-            <path
-              d="M16 12h.01"
-            />
-            <path
-              d="M18 8h.01"
-            />
-            <path
-              d="M6 8h.01"
-            />
-            <path
-              d="M7 16h10"
-            />
-            <path
-              d="M8 12h.01"
-            />
-            <rect
-              height="16"
-              rx="2"
-              width="20"
-              x="2"
-              y="4"
-            />
-          </svg>
-          <span>
-            Keybindings
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-settings"
-          role="tab"
+          <path
+            d="M12 7v14"
+          />
+          <path
+            d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
+          />
+        </svg>
+        <span>
+          Memory
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
         >
-          <svg
-            class="lucide lucide-settings w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
-            />
-            <circle
-              cx="12"
-              cy="12"
-              r="3"
-            />
-          </svg>
-          <span>
-            Settings
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
-          data-testid="cc-tab-outputStyles"
-          role="tab"
+          0
+        </span>
+      </button>
+      <span
+        aria-hidden="true"
+        class="flex items-center gap-1 px-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted ml-1 border-l border-border pl-2"
+      >
+        Extensions
+      </span>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-plugins"
+        id="cc-tab-plugins"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-plug-zap w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            class="lucide lucide-palette w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="13.5"
-              cy="6.5"
-              fill="currentColor"
-              r=".5"
-            />
-            <circle
-              cx="17.5"
-              cy="10.5"
-              fill="currentColor"
-              r=".5"
-            />
-            <circle
-              cx="8.5"
-              cy="7.5"
-              fill="currentColor"
-              r=".5"
-            />
-            <circle
-              cx="6.5"
-              cy="12.5"
-              fill="currentColor"
-              r=".5"
-            />
-            <path
-              d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
-            />
-          </svg>
-          <span>
-            Output styles
-          </span>
-          <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
-          >
-            0
-          </span>
-        </button>
-      </div>
-      <div
-        class="pointer-events-none absolute right-0 top-0 bottom-0 w-12 rounded-r-xl bg-gradient-to-l from-surface-1 to-transparent transition-opacity z-10 opacity-0"
-      />
+          <path
+            d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
+          />
+          <path
+            d="m2 22 3-3"
+          />
+          <path
+            d="M7.5 13.5 10 11"
+          />
+          <path
+            d="M10.5 16.5 13 14"
+          />
+          <path
+            d="m18 3-4 4h6l-4 4"
+          />
+        </svg>
+        <span>
+          Plugins
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
+        >
+          0
+        </span>
+      </button>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-marketplaces"
+        id="cc-tab-marketplaces"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-store w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"
+          />
+          <path
+            d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
+          />
+          <path
+            d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"
+          />
+          <path
+            d="M2 7h20"
+          />
+          <path
+            d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"
+          />
+        </svg>
+        <span>
+          Marketplaces
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
+        >
+          0
+        </span>
+      </button>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-mcp"
+        id="cc-tab-mcp"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-server w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            height="8"
+            rx="2"
+            ry="2"
+            width="20"
+            x="2"
+            y="2"
+          />
+          <rect
+            height="8"
+            rx="2"
+            ry="2"
+            width="20"
+            x="2"
+            y="14"
+          />
+          <line
+            x1="6"
+            x2="6.01"
+            y1="6"
+            y2="6"
+          />
+          <line
+            x1="6"
+            x2="6.01"
+            y1="18"
+            y2="18"
+          />
+        </svg>
+        <span>
+          MCP servers
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
+        >
+          0
+        </span>
+      </button>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-hooks"
+        id="cc-tab-hooks"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-webhook w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
+          />
+          <path
+            d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
+          />
+          <path
+            d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"
+          />
+        </svg>
+        <span>
+          Hooks
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
+        >
+          0
+        </span>
+      </button>
+      <span
+        aria-hidden="true"
+        class="flex items-center gap-1 px-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted ml-1 border-l border-border pl-2"
+      >
+        Config
+      </span>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-settings"
+        id="cc-tab-settings"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-settings w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            r="3"
+          />
+        </svg>
+        <span>
+          Settings
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
+        >
+          0
+        </span>
+      </button>
+      <button
+        aria-controls="cc-tabpanel"
+        aria-selected="false"
+        class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+        data-testid="cc-tab-keybindings"
+        id="cc-tab-keybindings"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-keyboard w-3.5 h-3.5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10 8h.01"
+          />
+          <path
+            d="M12 12h.01"
+          />
+          <path
+            d="M14 8h.01"
+          />
+          <path
+            d="M16 12h.01"
+          />
+          <path
+            d="M18 8h.01"
+          />
+          <path
+            d="M6 8h.01"
+          />
+          <path
+            d="M7 16h10"
+          />
+          <path
+            d="M8 12h.01"
+          />
+          <rect
+            height="16"
+            rx="2"
+            width="20"
+            x="2"
+            y="4"
+          />
+        </svg>
+        <span>
+          Keybindings
+        </span>
+        <span
+          class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
+        >
+          0
+        </span>
+      </button>
     </div>
     <div
+      aria-labelledby="cc-tab-overview"
       class="rounded-xl border border-border bg-surface-1"
+      id="cc-tabpanel"
+      role="tabpanel"
     >
       <div
         class="p-4"
@@ -1548,8 +1609,10 @@ exports[`screen snapshots > Claude Config 1`] = `
                   </div>
                 </div>
                 <button
+                  aria-label="Copy path"
                   class="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
                   title="Copy path"
+                  type="button"
                 >
                   <svg
                     class="lucide lucide-copy w-3 h-3"
@@ -1628,8 +1691,10 @@ exports[`screen snapshots > Claude Config 1`] = `
                   </div>
                 </div>
                 <button
+                  aria-label="Copy path"
                   class="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
                   title="Copy path"
+                  type="button"
                 >
                   <svg
                     class="lucide lucide-copy w-3 h-3"
@@ -1711,8 +1776,10 @@ exports[`screen snapshots > Claude Config 1`] = `
                   </div>
                 </div>
                 <button
+                  aria-label="Copy path"
                   class="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
                   title="Copy path"
+                  type="button"
                 >
                   <svg
                     class="lucide lucide-copy w-3 h-3"
@@ -2497,59 +2564,68 @@ exports[`screen snapshots > Claude Config 1`] = `
       class="space-y-8"
     >
       <section
-        class="scroll-mt-24"
+        class="card p-5 scroll-mt-24"
         id="claude-home"
       >
         <h3
-          class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
+          class="text-sm font-semibold text-fg-primary"
         >
-          <svg
-            class="lucide lucide-folder-open w-4 h-4 text-fg-muted"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="flex items-center gap-2"
           >
-            <path
-              d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
-            />
-          </svg>
-          CLAUDE_HOME
+            <svg
+              class="lucide lucide-folder-open w-4 h-4 text-fg-muted"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
+              />
+            </svg>
+            CLAUDE_HOME
+          </span>
         </h3>
         <p
-          class="text-xs text-fg-muted mb-1"
+          class="mt-0.5 text-xs text-fg-muted"
         >
           Root directory for Claude Code session data. Changing this updates the scan path for transcripts and imports immediately.
         </p>
-        <p
-          class="text-[11px] text-fg-muted italic mb-4 leading-snug"
-        >
-          Informational: Cursor sessions count here too — Cursor happens to use the same ~/.claude paths as Claude Code (locally and on synced remotes).
-        </p>
         <div
-          class="card p-5 space-y-4 "
+          class="mt-2"
         >
           <div
-            class="flex items-center gap-3"
+            class="space-y-4"
           >
-            <input
-              aria-label="CLAUDE_HOME"
-              class="flex-1 bg-surface-4 border border-surface-3 rounded-lg px-3 py-2 text-sm text-fg-secondary font-mono focus:outline-none focus:border-violet-500/50"
-              placeholder="/path/to/claude-home"
-              type="text"
-              value="/home/test/.claude"
-            />
-            <button
-              class="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
-              disabled=""
+            <p
+              class="text-[11px] text-fg-muted italic leading-snug"
             >
-              Save
-            </button>
+              Nothing is moved or copied: AgentHub just starts reading transcripts, config and hooks from the new folder. Cursor sessions use the same ~/.claude paths, so they follow it too.
+            </p>
+            <div
+              class="flex items-center gap-3"
+            >
+              <input
+                aria-label="CLAUDE_HOME"
+                class="input flex-1 font-mono"
+                placeholder="/path/to/claude-home"
+                type="text"
+                value="/home/test/.claude"
+              />
+              <button
+                class="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled=""
+                type="button"
+              >
+                Save
+              </button>
+            </div>
           </div>
         </div>
       </section>
@@ -2883,10 +2959,14 @@ exports[`screen snapshots > Dashboard 1`] = `
         class="flex items-center gap-3"
       >
         <div
+          aria-label="Dashboard views"
           class="flex bg-surface-2 rounded-lg p-0.5 border border-border"
+          role="tablist"
         >
           <button
+            aria-selected="true"
             class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 bg-accent/15 text-accent shadow-sm"
+            role="tab"
           >
             <svg
               class="lucide lucide-chart-column w-3.5 h-3.5"
@@ -2913,10 +2993,13 @@ exports[`screen snapshots > Dashboard 1`] = `
                 d="M8 17v-3"
               />
             </svg>
-             Analytics
+             
+            Analytics
           </button>
           <button
+            aria-selected="false"
             class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-fg-muted hover:text-fg-secondary"
+            role="tab"
           >
             <svg
               class="lucide lucide-activity w-3.5 h-3.5"
@@ -2934,10 +3017,13 @@ exports[`screen snapshots > Dashboard 1`] = `
                 d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
               />
             </svg>
-             Monitor
+             
+            Monitor
           </button>
           <button
+            aria-selected="false"
             class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-fg-muted hover:text-fg-secondary"
+            role="tab"
           >
             <svg
               class="lucide lucide-server w-3.5 h-3.5"
@@ -2980,40 +3066,10 @@ exports[`screen snapshots > Dashboard 1`] = `
                 y2="18"
               />
             </svg>
-             Health
+             
+            Health
           </button>
         </div>
-        <button
-          class="btn-ghost flex-shrink-0"
-        >
-          <svg
-            class="lucide lucide-refresh-cw w-4 h-4"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
-            />
-            <path
-              d="M21 3v5h-5"
-            />
-            <path
-              d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
-            />
-            <path
-              d="M8 16H3v5"
-            />
-          </svg>
-           
-          Refresh
-        </button>
       </div>
     </div>
     <div
@@ -3116,19 +3172,20 @@ exports[`screen snapshots > Dashboard 1`] = `
       <div
         class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"
       >
-        <div
-          class="card p-5 flex flex-col gap-2"
+        <a
+          class="card p-5 block hover:bg-surface-4/40 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+          href="/sessions"
         >
           <div
-            class="flex items-center justify-between"
+            class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs text-fg-muted uppercase tracking-wider"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
             >
               Total Sessions
             </span>
             <svg
-              class="lucide lucide-folder-open w-4 h-4 text-blue-500"
+              class="lucide lucide-folder-open w-5 h-5 flex-shrink-0 text-syntax-builtin"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -3144,34 +3201,38 @@ exports[`screen snapshots > Dashboard 1`] = `
               />
             </svg>
           </div>
-          <p
-            class="text-2xl font-bold text-blue-500"
+          <div
+            class="flex items-end gap-2 min-w-0"
           >
             <span
               class="relative inline-block cursor-default"
             >
-              0
+              <span
+                class="text-2xl font-semibold text-fg-primary truncate"
+              >
+                0
+              </span>
             </span>
-          </p>
-          <p
-            class="text-[11px] text-fg-muted"
-          >
-            0 active
-          </p>
-        </div>
+            <span
+              class="text-xs text-fg-muted mb-1 flex-shrink-0"
+            >
+              0 active
+            </span>
+          </div>
+        </a>
         <div
-          class="card p-5 flex flex-col gap-2"
+          class="card p-5"
         >
           <div
-            class="flex items-center justify-between"
+            class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs text-fg-muted uppercase tracking-wider"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
             >
               Total Agents
             </span>
             <svg
-              class="lucide lucide-bot w-4 h-4 text-status-success"
+              class="lucide lucide-bot w-5 h-5 flex-shrink-0 text-status-success"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -3206,34 +3267,38 @@ exports[`screen snapshots > Dashboard 1`] = `
               />
             </svg>
           </div>
-          <p
-            class="text-2xl font-bold text-status-success"
+          <div
+            class="flex items-end gap-2 min-w-0"
           >
             <span
               class="relative inline-block cursor-default"
             >
-              0
+              <span
+                class="text-2xl font-semibold text-fg-primary truncate"
+              >
+                0
+              </span>
             </span>
-          </p>
-          <p
-            class="text-[11px] text-fg-muted"
-          >
-            0 active
-          </p>
+            <span
+              class="text-xs text-fg-muted mb-1 flex-shrink-0"
+            >
+              0 active
+            </span>
+          </div>
         </div>
         <div
-          class="card p-5 flex flex-col gap-2"
+          class="card p-5"
         >
           <div
-            class="flex items-center justify-between"
+            class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs text-fg-muted uppercase tracking-wider"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
             >
-              Total Tokens
+              Tokens (excl. cache reads)
             </span>
             <svg
-              class="lucide lucide-cpu w-4 h-4 text-violet-700 dark:text-violet-400"
+              class="lucide lucide-cpu w-5 h-5 flex-shrink-0 text-syntax-keyword"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -3284,34 +3349,38 @@ exports[`screen snapshots > Dashboard 1`] = `
               />
             </svg>
           </div>
-          <p
-            class="text-2xl font-bold text-violet-700 dark:text-violet-400"
+          <div
+            class="flex items-end gap-2 min-w-0"
           >
             <span
               class="relative inline-block cursor-default"
             >
-              0
+              <span
+                class="text-2xl font-semibold text-fg-primary truncate"
+              >
+                0
+              </span>
             </span>
-          </p>
-          <p
-            class="text-[11px] text-fg-muted"
-          >
-            0% cache hit rate
-          </p>
+            <span
+              class="text-xs text-fg-muted mb-1 flex-shrink-0"
+            >
+              +0 cache reads · 0% hit rate
+            </span>
+          </div>
         </div>
         <div
-          class="card p-5 flex flex-col gap-2"
+          class="card p-5"
         >
           <div
-            class="flex items-center justify-between"
+            class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs text-fg-muted uppercase tracking-wider"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
             >
               Total Cost
             </span>
             <svg
-              class="lucide lucide-dollar-sign w-4 h-4 text-status-success"
+              class="lucide lucide-dollar-sign w-5 h-5 flex-shrink-0 text-status-success"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -3333,34 +3402,39 @@ exports[`screen snapshots > Dashboard 1`] = `
               />
             </svg>
           </div>
-          <p
-            class="text-2xl font-bold text-status-success"
+          <div
+            class="flex items-end gap-2 min-w-0"
           >
             <span
               class="relative inline-block cursor-default"
             >
-              $0.00
+              <span
+                class="text-2xl font-semibold text-fg-primary truncate"
+              >
+                $0.00
+              </span>
             </span>
-          </p>
-          <p
-            class="text-[11px] text-fg-muted"
-          >
-            0 Model
-          </p>
+            <span
+              class="text-xs text-fg-muted mb-1 flex-shrink-0"
+            >
+              0 Model
+            </span>
+          </div>
         </div>
-        <div
-          class="card p-5 flex flex-col gap-2"
+        <a
+          class="card p-5 block hover:bg-surface-4/40 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+          href="/sessions?view=events"
         >
           <div
-            class="flex items-center justify-between"
+            class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs text-fg-muted uppercase tracking-wider"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
             >
               Total Events
             </span>
             <svg
-              class="lucide lucide-zap w-4 h-4 text-yellow-700 dark:text-yellow-400"
+              class="lucide lucide-zap w-5 h-5 flex-shrink-0 text-status-warning"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -3376,21 +3450,25 @@ exports[`screen snapshots > Dashboard 1`] = `
               />
             </svg>
           </div>
-          <p
-            class="text-2xl font-bold text-yellow-700 dark:text-yellow-400"
+          <div
+            class="flex items-end gap-2 min-w-0"
           >
             <span
               class="relative inline-block cursor-default"
             >
-              0
+              <span
+                class="text-2xl font-semibold text-fg-primary truncate"
+              >
+                0
+              </span>
             </span>
-          </p>
-          <p
-            class="text-[11px] text-fg-muted"
-          >
-            ~0 per session
-          </p>
-        </div>
+            <span
+              class="text-xs text-fg-muted mb-1 flex-shrink-0"
+            >
+              ~0 per session
+            </span>
+          </div>
+        </a>
       </div>
       <div
         class="grid grid-cols-1 lg:grid-cols-3 gap-6"
@@ -3404,7 +3482,10 @@ exports[`screen snapshots > Dashboard 1`] = `
             Event Activity - Last 52 Weeks
           </h3>
           <div
+            aria-label="Event Activity - Last 52 Weeks"
             class="overflow-x-auto"
+            role="region"
+            tabindex="0"
           >
             <div
               class="w-fit min-w-max mx-auto"
@@ -4954,123 +5035,123 @@ exports[`screen snapshots > Dashboard 1`] = `
           >
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
             <div
               class="flex-1 rounded-sm transition-all cursor-default"
-              style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
+              style="height: 4%; background-color: rgb(var(--accent)); opacity: 0.15;"
             />
           </div>
           <div
@@ -5134,21 +5215,25 @@ exports[`screen snapshots > Dashboard 1`] = `
           class="flex gap-1 bg-surface-2 rounded-lg p-1 mb-6 w-fit"
         >
           <button
+            aria-pressed="true"
             class="px-4 py-1.5 text-xs font-medium rounded-md transition-colors bg-surface-4 text-fg-secondary"
           >
             Cost Analytics
           </button>
           <button
+            aria-pressed="false"
             class="px-4 py-1.5 text-xs font-medium rounded-md transition-colors text-fg-muted hover:text-fg-secondary"
           >
             Token Analytics
           </button>
           <button
+            aria-pressed="false"
             class="px-4 py-1.5 text-xs font-medium rounded-md transition-colors text-fg-muted hover:text-fg-secondary"
           >
             Productivity Analytics
           </button>
           <button
+            aria-pressed="false"
             class="px-4 py-1.5 text-xs font-medium rounded-md transition-colors text-fg-muted hover:text-fg-secondary"
           >
             Workflow Intelligence
@@ -5397,7 +5482,7 @@ exports[`screen snapshots > Run 1`] = `
         </span>
       </button>
       <div
-        class="flex min-h-0 flex-1"
+        class="relative flex min-h-0 flex-1"
       >
         <section
           class="flex min-h-0 min-w-0 flex-1 flex-col"
@@ -5423,14 +5508,14 @@ exports[`screen snapshots > Run 1`] = `
                     style="left: 0%; top: 0%; width: 100%; height: 100%;"
                   >
                     <div
-                      class="flex min-h-0 flex-1 flex-col pb-1 pl-3 pr-1 pt-1.5"
+                      class="flex min-h-0 flex-1 flex-col"
                     >
                       <div
                         class="flex min-h-0 flex-1 flex-col gap-3"
                         data-testid="console-body"
                       >
                         <div
-                          class="flex flex-1 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border p-6 text-center text-sm text-fg-muted"
+                          class="m-3 flex flex-1 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border p-6 text-center text-sm text-fg-muted"
                           data-testid="pane-no-run"
                         >
                           <p>
@@ -5460,6 +5545,7 @@ exports[`screen snapshots > Session detail 1`] = `
       class="flex items-start gap-4"
     >
       <button
+        aria-label="Back"
         class="btn-ghost mt-1"
       >
         <svg
@@ -5488,13 +5574,13 @@ exports[`screen snapshots > Session detail 1`] = `
         <div
           class="flex items-center gap-3 mb-2"
         >
-          <h2
+          <h1
             class="text-xl font-semibold text-fg-primary"
           >
             Test Session
-          </h2>
+          </h1>
           <span
-            class="badge bg-emerald-500/10 border-emerald-500/20 text-emerald-700 dark:text-emerald-400"
+            class="badge bg-status-success/10 border-status-success/25 text-status-success"
           >
             Active
           </span>
@@ -5684,7 +5770,9 @@ exports[`screen snapshots > Session detail 1`] = `
         </div>
       </div>
       <button
+        aria-label="Refresh"
         class="btn-ghost"
+        title="Refresh"
       >
         <svg
           class="lucide lucide-refresh-cw w-4 h-4"
@@ -5717,7 +5805,7 @@ exports[`screen snapshots > Session detail 1`] = `
       class="flex items-center gap-1 border-b border-border"
     >
       <button
-        class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-violet-500 text-violet-700 dark:text-violet-400"
+        class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-accent text-accent"
       >
         <svg
           class="lucide lucide-bot w-4 h-4"
@@ -5859,13 +5947,13 @@ exports[`screen snapshots > Session detail 1`] = `
             </div>
           </div>
           <div
-            class="rounded-lg border px-3 py-2.5 border-violet-500/20 bg-violet-500/5 text-violet-800 dark:text-violet-200"
+            class="rounded-lg border px-3 py-2.5 border-syntax-keyword/20 bg-syntax-keyword/5 text-syntax-keyword"
           >
             <div
               class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
             >
               <span
-                class="text-violet-700 dark:text-violet-400"
+                class="text-syntax-keyword"
               >
                 <svg
                   class="lucide lucide-wrench w-3 h-3"
@@ -5893,13 +5981,13 @@ exports[`screen snapshots > Session detail 1`] = `
             </div>
           </div>
           <div
-            class="rounded-lg border px-3 py-2.5 border-cyan-500/20 bg-cyan-500/5 text-cyan-800 dark:text-cyan-200"
+            class="rounded-lg border px-3 py-2.5 border-syntax-property/20 bg-syntax-property/5 text-syntax-property"
           >
             <div
               class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
             >
               <span
-                class="text-cyan-700 dark:text-cyan-400"
+                class="text-syntax-property"
               >
                 <svg
                   class="lucide lucide-git-branch w-3 h-3"
@@ -5943,13 +6031,13 @@ exports[`screen snapshots > Session detail 1`] = `
             </div>
           </div>
           <div
-            class="rounded-lg border px-3 py-2.5 border-blue-600/20 bg-blue-600/5 text-blue-700 dark:text-blue-300"
+            class="rounded-lg border px-3 py-2.5 border-syntax-builtin/20 bg-syntax-builtin/5 text-syntax-builtin"
           >
             <div
               class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
             >
               <span
-                class="text-blue-500"
+                class="text-syntax-builtin"
               >
                 <svg
                   class="lucide lucide-layers w-3 h-3"
@@ -6063,7 +6151,7 @@ exports[`screen snapshots > Session detail 1`] = `
             <div
               class="text-[10px] text-fg-muted mt-0.5"
             >
-              running
+              Active
             </div>
           </div>
         </div>
@@ -6080,7 +6168,7 @@ exports[`screen snapshots > Session detail 1`] = `
                 class="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5"
               >
                 <svg
-                  class="lucide lucide-wrench w-3.5 h-3.5 text-violet-700 dark:text-violet-400"
+                  class="lucide lucide-wrench w-3.5 h-3.5 text-syntax-keyword"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -6100,8 +6188,7 @@ exports[`screen snapshots > Session detail 1`] = `
               <span
                 class="text-[10px] text-fg-muted font-mono"
               >
-                0
-                 total
+                0 total
               </span>
             </div>
             <div
@@ -6120,7 +6207,7 @@ exports[`screen snapshots > Session detail 1`] = `
                 class="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5"
               >
                 <svg
-                  class="lucide lucide-git-branch w-3.5 h-3.5 text-cyan-700 dark:text-cyan-400"
+                  class="lucide lucide-git-branch w-3.5 h-3.5 text-syntax-property"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -6156,8 +6243,7 @@ exports[`screen snapshots > Session detail 1`] = `
               <span
                 class="text-[10px] text-fg-muted font-mono"
               >
-                0
-                 runs
+                0 runs
               </span>
             </div>
             <div
@@ -6175,7 +6261,7 @@ exports[`screen snapshots > Session detail 1`] = `
           class="text-xs font-semibold text-fg-secondary uppercase tracking-wider mb-2 flex items-center gap-1.5"
         >
           <svg
-            class="lucide lucide-workflow w-3.5 h-3.5 text-violet-700 dark:text-violet-400"
+            class="lucide lucide-workflow w-3.5 h-3.5 text-syntax-keyword"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -6382,37 +6468,105 @@ exports[`screen snapshots > Sessions 1`] = `
           </p>
         </div>
       </div>
-      <button
-        class="btn-ghost flex-shrink-0"
+      <div
+        class="flex items-center gap-2 flex-shrink-0"
       >
-        <svg
-          class="lucide lucide-refresh-cw w-4 h-4"
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          class="btn-ghost"
+          disabled=""
         >
-          <path
-            d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
-          />
-          <path
-            d="M21 3v5h-5"
-          />
-          <path
-            d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
-          />
-          <path
-            d="M8 16H3v5"
-          />
-        </svg>
-         
-        Refresh
-      </button>
+          <svg
+            class="lucide lucide-download w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+            />
+            <polyline
+              points="7 10 12 15 17 10"
+            />
+            <line
+              x1="12"
+              x2="12"
+              y1="15"
+              y2="3"
+            />
+          </svg>
+           
+          CSV
+        </button>
+        <button
+          class="btn-ghost"
+          disabled=""
+        >
+          <svg
+            class="lucide lucide-download w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+            />
+            <polyline
+              points="7 10 12 15 17 10"
+            />
+            <line
+              x1="12"
+              x2="12"
+              y1="15"
+              y2="3"
+            />
+          </svg>
+           
+          JSON
+        </button>
+        <button
+          class="btn-ghost"
+        >
+          <svg
+            class="lucide lucide-refresh-cw w-4 h-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+            />
+            <path
+              d="M21 3v5h-5"
+            />
+            <path
+              d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+            />
+            <path
+              d="M8 16H3v5"
+            />
+          </svg>
+           
+          Refresh
+        </button>
+      </div>
     </div>
     <div
       class="flex flex-wrap lg:flex-nowrap items-center gap-3 mb-6 bg-surface-2/40 p-2 rounded-xl border border-border w-full"
@@ -6442,6 +6596,7 @@ exports[`screen snapshots > Sessions 1`] = `
           />
         </svg>
         <input
+          aria-label="Search sessions..."
           class="input w-full pl-10"
           placeholder="Search sessions..."
           type="text"
@@ -6452,30 +6607,15 @@ exports[`screen snapshots > Sessions 1`] = `
         class="relative shrink-0 w-[180px]"
       >
         <select
-          class="input w-full text-ellipsis bg-surface-1 pr-9 appearance-none cursor-pointer"
+          aria-label="Filter by directory"
+          class="select w-full text-ellipsis"
         >
           <option
             value=""
           >
-            All Directories
+            All directories
           </option>
         </select>
-        <svg
-          class="lucide lucide-chevron-down absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-fg-muted pointer-events-none"
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="m6 9 6 6 6-6"
-          />
-        </svg>
       </div>
       <div
         class="flex items-center gap-1.5 bg-surface-1 px-1.5 py-1 rounded-lg border border-border h-[38px] flex-1 min-w-[180px]"
@@ -6484,51 +6624,31 @@ exports[`screen snapshots > Sessions 1`] = `
           class="relative flex-1"
         >
           <select
-            class="bg-transparent w-full text-sm text-fg-secondary outline-none pl-3 pr-8 appearance-none cursor-pointer whitespace-nowrap"
+            aria-label="Sort sessions"
+            class="select w-full border-0 bg-transparent py-0 whitespace-nowrap"
           >
             <option
               value="time"
             >
-              Sort by Time (
-              Newest
-              )
+              Sort by time (newest)
             </option>
             <option
               value="duration"
             >
-              Sort by Duration (
-              Longest
-              )
+              Sort by duration (longest)
             </option>
             <option
               value="price"
             >
-              Sort by Price (
-              Highest
-              )
+              Sort by price (highest)
             </option>
           </select>
-          <svg
-            class="lucide lucide-chevron-down absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-fg-muted pointer-events-none"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m6 9 6 6 6-6"
-            />
-          </svg>
         </div>
         <div
           class="w-px h-4 bg-border mx-1"
         />
         <button
+          aria-label="Descending"
           class="p-1.5 rounded hover:bg-surface-3 text-fg-secondary hover:text-fg-primary transition-colors shrink-0"
           title="Descending"
         >
@@ -6566,37 +6686,87 @@ exports[`screen snapshots > Sessions 1`] = `
         class="flex gap-1 bg-surface-1 rounded-lg p-1 border border-border ml-auto shrink-0"
       >
         <button
+          aria-pressed="true"
           class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap bg-surface-4 text-fg-secondary"
         >
           All
         </button>
         <button
+          aria-pressed="false"
           class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
         >
           Active
         </button>
         <button
+          aria-pressed="false"
           class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
         >
           Waiting
         </button>
         <button
+          aria-pressed="false"
           class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
         >
           Completed
         </button>
         <button
+          aria-pressed="false"
           class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
         >
           Error
         </button>
         <button
+          aria-pressed="false"
           class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
         >
           Abandoned
         </button>
       </div>
     </div>
+    <div
+      class="flex flex-wrap items-center gap-3 -mt-3 mb-6 text-xs"
+    >
+      <select
+        aria-label="Filter by AI tool"
+        class="select py-1 text-xs w-auto"
+      >
+        <option
+          value=""
+        >
+          All AI tools
+        </option>
+      </select>
+      <select
+        aria-label="Filter by workspace"
+        class="select py-1 text-xs w-auto max-w-[16rem]"
+      >
+        <option
+          value=""
+        >
+          All workspaces
+        </option>
+      </select>
+      <label
+        class="flex items-center gap-1.5 text-fg-muted"
+      >
+        From
+        <input
+          class="input py-1 text-xs w-auto"
+          type="date"
+          value=""
+        />
+      </label>
+      <label
+        class="flex items-center gap-1.5 text-fg-muted"
+      >
+        To
+        <input
+          class="input py-1 text-xs w-auto"
+          type="date"
+          value=""
+        />
+      </label>
+    </div>
     <div
       class="flex flex-col items-center justify-center text-center py-20"
     >
@@ -6604,6 +6774,7 @@ exports[`screen snapshots > Sessions 1`] = `
         class="rounded-2xl bg-surface-4 flex items-center justify-center w-14 h-14 mb-5"
       >
         <svg
+          aria-hidden="true"
           class="lucide lucide-folder-open w-6 h-6 text-fg-muted"
           fill="none"
           height="24"
@@ -6680,6 +6851,7 @@ exports[`screen snapshots > Settings 1`] = `
                 aria-checked="true"
                 class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors bg-accent/20 text-accent"
                 role="radio"
+                tabindex="0"
                 type="button"
               >
                 English
@@ -6688,6 +6860,7 @@ exports[`screen snapshots > Settings 1`] = `
                 aria-checked="false"
                 class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
                 role="radio"
+                tabindex="-1"
                 type="button"
               >
                 Tiếng Việt
@@ -6697,78 +6870,353 @@ exports[`screen snapshots > Settings 1`] = `
         </div>
       </div>
     </section>
+  </div>
+</div>
+`;
+
+exports[`screen snapshots > Settings — about 1`] = `
+<div>
+  <div
+    class="animate-fade-in space-y-8"
+  >
     <section
       class="scroll-mt-24"
-      id="lanes"
+      id="about"
     >
-      <h3
-        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
-      >
-        <svg
-          class="lucide lucide-git-branch w-4 h-4 text-fg-muted"
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <line
-            x1="6"
-            x2="6"
-            y1="3"
-            y2="15"
-          />
-          <circle
-            cx="18"
-            cy="6"
-            r="3"
-          />
-          <circle
-            cx="6"
-            cy="18"
-            r="3"
-          />
-          <path
-            d="M18 9a9 9 0 0 1-9 9"
-          />
-        </svg>
-        Workspaces
-      </h3>
       <p
         class="text-xs text-fg-muted mb-4"
       >
-        Machine-wide workspace housekeeping.
+        Server runtime information.
       </p>
       <div
-        class="card p-5 space-y-4"
+        class="card p-5"
       >
         <div
-          class="flex items-center justify-between flex-wrap gap-3"
+          class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3"
         >
-          <button
-            aria-checked="false"
-            class="group inline-flex items-center gap-2 text-left disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none "
-            role="checkbox"
-            type="button"
+          <div
+            class="bg-surface-2 rounded-lg px-4 py-3"
           >
-            <span
-              class="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-[5px] border transition-colors group-focus-visible:ring-2 group-focus-visible:ring-accent/40 bg-surface-2 border-border group-hover:border-border-light"
-            />
-            <span
-              class="text-xs text-fg-secondary group-hover:text-fg-secondary"
+            <div
+              class="flex items-center gap-2 mb-1.5"
             >
-              Dry run
-            </span>
-          </button>
-          <button
-            class="btn-ghost text-xs disabled:opacity-50"
+              <svg
+                class="lucide lucide-server w-4 h-4 text-accent"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  height="8"
+                  rx="2"
+                  ry="2"
+                  width="20"
+                  x="2"
+                  y="2"
+                />
+                <rect
+                  height="8"
+                  rx="2"
+                  ry="2"
+                  width="20"
+                  x="2"
+                  y="14"
+                />
+                <line
+                  x1="6"
+                  x2="6.01"
+                  y1="6"
+                  y2="6"
+                />
+                <line
+                  x1="6"
+                  x2="6.01"
+                  y1="18"
+                  y2="18"
+                />
+              </svg>
+              <p
+                class="text-[11px] text-fg-muted uppercase tracking-wider"
+              >
+                Release
+              </p>
+            </div>
+            <p
+              class="text-sm font-semibold text-fg-secondary font-mono"
+            >
+              v
+            </p>
+            <p
+              class="text-[10px] text-status-warning/90 mt-1"
+            >
+              UI build v1.8.13 (rebuild client to match)
+            </p>
+          </div>
+          <div
+            class="bg-surface-2 rounded-lg px-4 py-3"
+          >
+            <div
+              class="flex items-center gap-2 mb-1.5"
+            >
+              <svg
+                class="lucide lucide-clock w-4 h-4 text-accent"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                />
+                <polyline
+                  points="12 6 12 12 16 14"
+                />
+              </svg>
+              <p
+                class="text-[11px] text-fg-muted uppercase tracking-wider"
+              >
+                Uptime
+              </p>
+            </div>
+            <p
+              class="text-sm font-semibold text-fg-secondary"
+            >
+              0m
+            </p>
+          </div>
+          <div
+            class="bg-surface-2 rounded-lg px-4 py-3"
+          >
+            <div
+              class="flex items-center gap-2 mb-1.5"
+            >
+              <svg
+                class="lucide lucide-cpu w-4 h-4 text-status-success"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  height="16"
+                  rx="2"
+                  width="16"
+                  x="4"
+                  y="4"
+                />
+                <rect
+                  height="6"
+                  rx="1"
+                  width="6"
+                  x="9"
+                  y="9"
+                />
+                <path
+                  d="M15 2v2"
+                />
+                <path
+                  d="M15 20v2"
+                />
+                <path
+                  d="M2 15h2"
+                />
+                <path
+                  d="M2 9h2"
+                />
+                <path
+                  d="M20 15h2"
+                />
+                <path
+                  d="M20 9h2"
+                />
+                <path
+                  d="M9 2v2"
+                />
+                <path
+                  d="M9 20v2"
+                />
+              </svg>
+              <p
+                class="text-[11px] text-fg-muted uppercase tracking-wider"
+              >
+                Node.js
+              </p>
+            </div>
+            <p
+              class="text-sm font-semibold text-fg-secondary font-mono"
+            >
+              v22.0.0
+            </p>
+          </div>
+          <div
+            class="bg-surface-2 rounded-lg px-4 py-3"
+          >
+            <div
+              class="flex items-center gap-2 mb-1.5"
+            >
+              <svg
+                class="lucide lucide-globe w-4 h-4 text-syntax-keyword"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                />
+                <path
+                  d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+                />
+                <path
+                  d="M2 12h20"
+                />
+              </svg>
+              <p
+                class="text-[11px] text-fg-muted uppercase tracking-wider"
+              >
+                Platform
+              </p>
+            </div>
+            <p
+              class="text-sm font-semibold text-fg-secondary"
+            >
+              linux
+            </p>
+          </div>
+          <div
+            class="bg-surface-2 rounded-lg px-4 py-3"
+          >
+            <div
+              class="flex items-center gap-2 mb-1.5"
+            >
+              <svg
+                class="lucide lucide-wifi w-4 h-4 text-status-warning"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 20h.01"
+                />
+                <path
+                  d="M2 8.82a15 15 0 0 1 20 0"
+                />
+                <path
+                  d="M5 12.859a10 10 0 0 1 14 0"
+                />
+                <path
+                  d="M8.5 16.429a5 5 0 0 1 7 0"
+                />
+              </svg>
+              <p
+                class="text-[11px] text-fg-muted uppercase tracking-wider"
+              >
+                WS Clients
+              </p>
+            </div>
+            <p
+              class="text-sm font-semibold text-fg-secondary"
+            >
+              0
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>
+`;
+
+exports[`screen snapshots > Settings — data 1`] = `
+<div>
+  <div
+    class="animate-fade-in space-y-8"
+  >
+    <section
+      class="scroll-mt-24"
+      id="data"
+    >
+      <div
+        class="mb-4 flex flex-wrap items-start justify-between gap-2"
+      >
+        <div>
+          <h3
+            class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
           >
             <svg
-              class="lucide lucide-rotate-ccw w-3.5 h-3.5"
+              class="lucide lucide-database w-4 h-4 text-fg-muted"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <ellipse
+                cx="12"
+                cy="5"
+                rx="9"
+                ry="3"
+              />
+              <path
+                d="M3 5V19A9 3 0 0 0 21 19V5"
+              />
+              <path
+                d="M3 12A9 3 0 0 0 21 12"
+              />
+            </svg>
+            Data Management
+          </h3>
+          <p
+            class="text-xs text-fg-muted"
+          >
+            Database info, import/export, and cleanup.
+          </p>
+        </div>
+        <div
+          class="flex items-center gap-2"
+        >
+          <a
+            class="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md border border-border text-fg-secondary hover:text-fg-primary hover:border-border-light transition-colors"
+            download=""
+            href="/api/settings/export"
+          >
+            <svg
+              class="lucide lucide-file-down w-3.5 h-3.5"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -6780,16 +7228,358 @@ exports[`screen snapshots > Settings 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+                d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
               />
               <path
-                d="M3 3v5h5"
+                d="M14 2v4a2 2 0 0 0 2 2h4"
+              />
+              <path
+                d="M12 18v-6"
+              />
+              <path
+                d="m9 15 3 3 3-3"
               />
             </svg>
-            Run housekeeping
+            Export Data
+          </a>
+          <button
+            class="btn-ghost"
+          >
+            <svg
+              class="lucide lucide-refresh-cw w-4 h-4"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+              />
+              <path
+                d="M21 3v5h-5"
+              />
+              <path
+                d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+              />
+              <path
+                d="M8 16H3v5"
+              />
+            </svg>
+             
+            Refresh
           </button>
         </div>
       </div>
+      <div
+        class="space-y-4"
+      >
+        <div
+          class="card p-6"
+        >
+          <div
+            class="flex items-center justify-between flex-wrap gap-4"
+          >
+            <div
+              class="flex items-center gap-4"
+            >
+              <div
+                class="w-12 h-12 rounded-xl bg-status-success/10 border border-status-success/20 flex items-center justify-center"
+              >
+                <svg
+                  class="lucide lucide-dollar-sign w-6 h-6 text-status-success"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <line
+                    x1="12"
+                    x2="12"
+                    y1="2"
+                    y2="22"
+                  />
+                  <path
+                    d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
+                  />
+                </svg>
+              </div>
+              <div>
+                <p
+                  class="text-sm text-fg-muted"
+                >
+                  Total Estimated Cost
+                </p>
+                <p
+                  class="text-2xl font-semibold text-fg-primary"
+                >
+                  <span
+                    class="relative inline-block cursor-default"
+                  >
+                    $0.00
+                  </span>
+                </p>
+              </div>
+            </div>
+            <div
+              class="text-right text-xs text-fg-muted"
+            >
+              <p>
+                Across all tracked sessions
+              </p>
+              <p>
+                Based on per-model token usage
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          class="card p-5 space-y-4"
+        >
+          <div
+            class="flex flex-wrap items-center justify-between gap-2"
+          >
+            <p
+              class="text-xs text-fg-muted uppercase tracking-wider font-semibold flex-shrink-0"
+            >
+              Database Overview
+            </p>
+            <div
+              class="flex items-center gap-1.5 text-[11px] text-fg-muted font-mono bg-surface-2 px-2.5 py-1 rounded-md min-w-0"
+            >
+              <svg
+                class="lucide lucide-hard-drive w-3 h-3 flex-shrink-0"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <line
+                  x1="22"
+                  x2="2"
+                  y1="12"
+                  y2="12"
+                />
+                <path
+                  d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
+                />
+                <line
+                  x1="6"
+                  x2="6.01"
+                  y1="16"
+                  y2="16"
+                />
+                <line
+                  x1="10"
+                  x2="10.01"
+                  y1="16"
+                  y2="16"
+                />
+              </svg>
+              <span
+                class="truncate"
+              >
+                /tmp/test.db
+              </span>
+            </div>
+          </div>
+          <div
+            class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2"
+          >
+            <div
+              class="bg-surface-2 rounded-lg px-3 py-3 border-l-2 border-border-light"
+            >
+              <div
+                class="flex items-center gap-2 mb-1.5"
+              >
+                <svg
+                  class="lucide lucide-hard-drive w-4 h-4 text-syntax-property"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <line
+                    x1="22"
+                    x2="2"
+                    y1="12"
+                    y2="12"
+                  />
+                  <path
+                    d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
+                  />
+                  <line
+                    x1="6"
+                    x2="6.01"
+                    y1="16"
+                    y2="16"
+                  />
+                  <line
+                    x1="10"
+                    x2="10.01"
+                    y1="16"
+                    y2="16"
+                  />
+                </svg>
+                <p
+                  class="text-[11px] text-fg-muted uppercase tracking-wider"
+                >
+                  DB Size
+                </p>
+              </div>
+              <p
+                class="text-xl font-semibold text-fg-secondary"
+              >
+                0 B
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section
+      class="scroll-mt-24"
+      id="lanes"
+    >
+      <section
+        class="card p-5"
+      >
+        <h3
+          class="text-sm font-semibold text-fg-primary"
+        >
+          <span
+            class="flex items-center gap-2"
+          >
+            <svg
+              class="lucide lucide-git-branch w-4 h-4 text-fg-muted"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <line
+                x1="6"
+                x2="6"
+                y1="3"
+                y2="15"
+              />
+              <circle
+                cx="18"
+                cy="6"
+                r="3"
+              />
+              <circle
+                cx="6"
+                cy="18"
+                r="3"
+              />
+              <path
+                d="M18 9a9 9 0 0 1-9 9"
+              />
+            </svg>
+            Workspaces
+          </span>
+        </h3>
+        <p
+          class="mt-0.5 text-xs text-fg-muted"
+        >
+          Cleans up after workspace sessions: stops MCP server processes that ended sessions left running, and trims workspace log files that grew too large. Nothing in your repositories is touched.
+        </p>
+        <div
+          class="mt-2"
+        >
+          <div
+            class="space-y-4 pt-2"
+          >
+            <div
+              class="flex items-center justify-between flex-wrap gap-3"
+            >
+              <button
+                aria-checked="true"
+                class="group inline-flex items-center gap-2 text-left disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none "
+                role="checkbox"
+                type="button"
+              >
+                <span
+                  class="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-[5px] border transition-colors group-focus-visible:ring-2 group-focus-visible:ring-accent/60 bg-accent-solid border-accent-solid text-white"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-check h-3 w-3"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="3"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M20 6 9 17l-5-5"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="text-xs text-fg-secondary group-hover:text-fg-secondary"
+                >
+                  Dry run
+                </span>
+              </button>
+              <button
+                class="btn-ghost text-xs disabled:opacity-50"
+                type="button"
+              >
+                <svg
+                  class="lucide lucide-rotate-ccw w-3.5 h-3.5"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+                  />
+                  <path
+                    d="M3 3v5h5"
+                  />
+                </svg>
+                Preview housekeeping
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
     </section>
     <section
       class="scroll-mt-24"
@@ -6846,7 +7636,7 @@ exports[`screen snapshots > Settings 1`] = `
                 class="flex items-center gap-2 text-xs font-semibold text-fg-secondary uppercase tracking-wider"
               >
                 <svg
-                  class="lucide lucide-list-checks w-3.5 h-3.5 text-blue-500"
+                  class="lucide lucide-list-checks w-3.5 h-3.5 text-accent"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -7122,10 +7912,12 @@ exports[`screen snapshots > Settings 1`] = `
             class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2"
           >
             <button
-              class="text-left p-3 rounded-lg border transition-colors border-blue-600/40 bg-blue-600/10"
+              aria-pressed="true"
+              class="text-left p-3 rounded-lg border transition-colors border-accent/40 bg-accent/10"
+              type="button"
             >
               <div
-                class="flex items-center gap-1.5 text-xs font-medium mb-1 text-blue-700 dark:text-blue-400"
+                class="flex items-center gap-1.5 text-xs font-medium mb-1 text-accent"
               >
                 <svg
                   class="lucide lucide-refresh-cw w-3.5 h-3.5"
@@ -7161,7 +7953,9 @@ exports[`screen snapshots > Settings 1`] = `
               </p>
             </button>
             <button
+              aria-pressed="false"
               class="text-left p-3 rounded-lg border transition-colors border-border bg-surface-2 hover:bg-surface-3"
+              type="button"
             >
               <div
                 class="flex items-center gap-1.5 text-xs font-medium mb-1 text-fg-secondary"
@@ -7197,7 +7991,9 @@ exports[`screen snapshots > Settings 1`] = `
               </p>
             </button>
             <button
+              aria-pressed="false"
               class="text-left p-3 rounded-lg border transition-colors border-border bg-surface-2 hover:bg-surface-3"
+              type="button"
             >
               <div
                 class="flex items-center gap-1.5 text-xs font-medium mb-1 text-fg-secondary"
@@ -7233,7 +8029,9 @@ exports[`screen snapshots > Settings 1`] = `
               </p>
             </button>
             <button
+              aria-pressed="false"
               class="text-left p-3 rounded-lg border transition-colors border-border bg-surface-2 hover:bg-surface-3"
+              type="button"
             >
               <div
                 class="flex items-center gap-1.5 text-xs font-medium mb-1 text-fg-secondary"
@@ -7433,7 +8231,10 @@ exports[`screen snapshots > Settings 1`] = `
             <button
               aria-checked="true"
               class="relative text-left rounded-xl border p-3 transition-colors border-accent bg-accent/10 ring-1 ring-accent/40"
+              data-mode="all"
               role="radio"
+              tabindex="0"
+              type="button"
             >
               <svg
                 class="lucide lucide-circle-check-big w-4 h-4 text-accent absolute top-2.5 right-2.5"
@@ -7492,7 +8293,10 @@ exports[`screen snapshots > Settings 1`] = `
             <button
               aria-checked="false"
               class="relative text-left rounded-xl border p-3 transition-colors border-border bg-surface-2 hover:border-accent/40 hover:bg-surface-2/70"
+              data-mode="local"
               role="radio"
+              tabindex="-1"
+              type="button"
             >
               <svg
                 class="lucide lucide-monitor w-5 h-5 mb-2 text-fg-secondary"
@@ -7540,7 +8344,10 @@ exports[`screen snapshots > Settings 1`] = `
             <button
               aria-checked="false"
               class="relative text-left rounded-xl border p-3 transition-colors border-border bg-surface-2 hover:border-accent/40 hover:bg-surface-2/70"
+              data-mode="selected"
               role="radio"
+              tabindex="-1"
+              type="button"
             >
               <svg
                 class="lucide lucide-list-checks w-5 h-5 mb-2 text-fg-secondary"
@@ -7679,505 +8486,117 @@ exports[`screen snapshots > Settings 1`] = `
       </div>
     </section>
     <section
-      class="scroll-mt-24"
-      id="data"
+      class="card p-5 space-y-4 scroll-mt-24"
+      id="cleanup"
     >
       <div
-        class="mb-4 flex flex-wrap items-start justify-between gap-2"
+        class="flex items-center gap-3"
       >
+        <div
+          class="w-9 h-9 rounded-lg bg-status-warning/10 border border-status-warning/20 flex items-center justify-center"
+        >
+          <svg
+            class="lucide lucide-eraser w-4 h-4 text-status-warning"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"
+            />
+            <path
+              d="M22 21H7"
+            />
+            <path
+              d="m5 11 9 9"
+            />
+          </svg>
+        </div>
         <div>
           <h3
-            class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
+            class="text-sm font-medium text-fg-secondary"
           >
-            <svg
-              class="lucide lucide-database w-4 h-4 text-fg-muted"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="12"
-                cy="5"
-                rx="9"
-                ry="3"
-              />
-              <path
-                d="M3 5V19A9 3 0 0 0 21 19V5"
-              />
-              <path
-                d="M3 12A9 3 0 0 0 21 12"
-              />
-            </svg>
-            Data Management
+            Session Cleanup
           </h3>
           <p
             class="text-xs text-fg-muted"
           >
-            Database info, import/export, and cleanup.
+            Abandon stale sessions and purge old data
           </p>
         </div>
-        <div
-          class="flex items-center gap-2"
-        >
-          <a
-            class="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md border border-border text-fg-secondary hover:text-fg-primary hover:border-border-light transition-colors"
-            download=""
-            href="/api/settings/export"
-          >
-            <svg
-              class="lucide lucide-file-down w-3.5 h-3.5"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
-              />
-              <path
-                d="M14 2v4a2 2 0 0 0 2 2h4"
-              />
-              <path
-                d="M12 18v-6"
-              />
-              <path
-                d="m9 15 3 3 3-3"
-              />
-            </svg>
-            Export Data
-          </a>
-          <button
-            class="btn-ghost"
-          >
-            <svg
-              class="lucide lucide-refresh-cw w-4 h-4"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
-              />
-              <path
-                d="M21 3v5h-5"
-              />
-              <path
-                d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
-              />
-              <path
-                d="M8 16H3v5"
-              />
-            </svg>
-             
-            Refresh
-          </button>
-        </div>
       </div>
       <div
-        class="space-y-4"
+        class="grid grid-cols-1 sm:grid-cols-2 gap-3"
       >
         <div
-          class="card p-6"
+          class="bg-surface-2 rounded-lg px-4 py-3"
         >
-          <div
-            class="flex items-center justify-between flex-wrap gap-4"
+          <label
+            class="text-xs text-fg-secondary block mb-2"
+            for="cleanup-abandon-hours"
           >
-            <div
-              class="flex items-center gap-4"
+            Abandon stale active sessions older than
+          </label>
+          <div
+            class="flex items-center gap-2"
+          >
+            <input
+              class="input w-20 text-sm text-right font-mono"
+              id="cleanup-abandon-hours"
+              inputmode="numeric"
+              min="1"
+              step="1"
+              type="number"
+              value="24"
+            />
+            <span
+              class="text-xs text-fg-muted"
             >
-              <div
-                class="w-12 h-12 rounded-xl bg-status-success/10 border border-status-success/20 flex items-center justify-center"
-              >
-                <svg
-                  class="lucide lucide-dollar-sign w-6 h-6 text-status-success"
-                  fill="none"
-                  height="24"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <line
-                    x1="12"
-                    x2="12"
-                    y1="2"
-                    y2="22"
-                  />
-                  <path
-                    d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p
-                  class="text-sm text-fg-muted"
-                >
-                  Total Estimated Cost
-                </p>
-                <p
-                  class="text-2xl font-semibold text-fg-primary"
-                >
-                  <span
-                    class="relative inline-block cursor-default"
-                  >
-                    $0.00
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              class="text-right text-xs text-fg-muted"
-            >
-              <p>
-                Across all tracked sessions
-              </p>
-              <p>
-                Based on per-model token usage
-              </p>
-            </div>
+              hours
+            </span>
           </div>
         </div>
         <div
-          class="card p-5 space-y-4"
+          class="bg-surface-2 rounded-lg px-4 py-3"
         >
+          <label
+            class="text-xs text-fg-secondary block mb-2"
+            for="cleanup-purge-days"
+          >
+            Purge completed/errored sessions older than
+          </label>
           <div
-            class="flex flex-wrap items-center justify-between gap-2"
+            class="flex items-center gap-2"
           >
-            <p
-              class="text-xs text-fg-muted uppercase tracking-wider font-semibold flex-shrink-0"
+            <input
+              class="input w-20 text-sm text-right font-mono"
+              id="cleanup-purge-days"
+              inputmode="numeric"
+              min="1"
+              step="1"
+              type="number"
+              value="90"
+            />
+            <span
+              class="text-xs text-fg-muted"
             >
-              Database Overview
-            </p>
-            <div
-              class="flex items-center gap-1.5 text-[11px] text-fg-muted font-mono bg-surface-2 px-2.5 py-1 rounded-md min-w-0"
-            >
-              <svg
-                class="lucide lucide-hard-drive w-3 h-3 flex-shrink-0"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <line
-                  x1="22"
-                  x2="2"
-                  y1="12"
-                  y2="12"
-                />
-                <path
-                  d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
-                />
-                <line
-                  x1="6"
-                  x2="6.01"
-                  y1="16"
-                  y2="16"
-                />
-                <line
-                  x1="10"
-                  x2="10.01"
-                  y1="16"
-                  y2="16"
-                />
-              </svg>
-              <span
-                class="truncate"
-              >
-                /tmp/test.db
-              </span>
-            </div>
+              days
+            </span>
           </div>
-          <div
-            class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2"
-          >
-            <div
-              class="bg-surface-2 rounded-lg px-3 py-3 border-l-2 border-indigo-500/20"
-            >
-              <div
-                class="flex items-center gap-2 mb-1.5"
-              >
-                <svg
-                  class="lucide lucide-hard-drive w-4 h-4 text-indigo-700 dark:text-indigo-400"
-                  fill="none"
-                  height="24"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <line
-                    x1="22"
-                    x2="2"
-                    y1="12"
-                    y2="12"
-                  />
-                  <path
-                    d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
-                  />
-                  <line
-                    x1="6"
-                    x2="6.01"
-                    y1="16"
-                    y2="16"
-                  />
-                  <line
-                    x1="10"
-                    x2="10.01"
-                    y1="16"
-                    y2="16"
-                  />
-                </svg>
-                <p
-                  class="text-[11px] text-fg-muted uppercase tracking-wider"
-                >
-                  DB Size
-                </p>
-              </div>
-              <p
-                class="text-xl font-semibold text-fg-secondary"
-              >
-                0 B
-              </p>
-            </div>
-          </div>
-        </div>
-        <div
-          class="card p-5 space-y-4"
-        >
-          <div
-            class="flex items-center gap-3"
-          >
-            <div
-              class="w-9 h-9 rounded-lg bg-status-warning/10 border border-status-warning/20 flex items-center justify-center"
-            >
-              <svg
-                class="lucide lucide-eraser w-4 h-4 text-status-warning"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"
-                />
-                <path
-                  d="M22 21H7"
-                />
-                <path
-                  d="m5 11 9 9"
-                />
-              </svg>
-            </div>
-            <div>
-              <p
-                class="text-sm font-medium text-fg-secondary"
-              >
-                Session Cleanup
-              </p>
-              <p
-                class="text-xs text-fg-muted"
-              >
-                Abandon stale sessions and purge old data
-              </p>
-            </div>
-          </div>
-          <div
-            class="grid grid-cols-1 sm:grid-cols-2 gap-3"
-          >
-            <div
-              class="bg-surface-2 rounded-lg px-4 py-3"
-            >
-              <label
-                class="text-xs text-fg-secondary block mb-2"
-              >
-                Abandon stale active sessions older than
-              </label>
-              <div
-                class="flex items-center gap-2"
-              >
-                <input
-                  class="input w-20 text-sm text-right font-mono"
-                  min="1"
-                  type="number"
-                  value="24"
-                />
-                <span
-                  class="text-xs text-fg-muted"
-                >
-                  hours
-                </span>
-              </div>
-            </div>
-            <div
-              class="bg-surface-2 rounded-lg px-4 py-3"
-            >
-              <label
-                class="text-xs text-fg-secondary block mb-2"
-              >
-                Purge completed/errored sessions older than
-              </label>
-              <div
-                class="flex items-center gap-2"
-              >
-                <input
-                  class="input w-20 text-sm text-right font-mono"
-                  min="1"
-                  type="number"
-                  value="90"
-                />
-                <span
-                  class="text-xs text-fg-muted"
-                >
-                  days
-                </span>
-              </div>
-            </div>
-          </div>
-          <button
-            class="text-xs px-3 py-1.5 rounded-md transition-colors disabled:opacity-50 text-fg-secondary hover:text-fg-primary hover:bg-surface-4 border border-border"
-          >
-            <svg
-              class="lucide lucide-eraser w-3 h-3 inline mr-1"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"
-              />
-              <path
-                d="M22 21H7"
-              />
-              <path
-                d="m5 11 9 9"
-              />
-            </svg>
-            Run Cleanup
-          </button>
-        </div>
-        <div
-          class="card p-5 space-y-4 border-status-danger/10"
-        >
-          <div
-            class="flex items-center gap-3"
-          >
-            <div
-              class="w-9 h-9 rounded-lg bg-status-danger/10 border border-status-danger/20 flex items-center justify-center"
-            >
-              <svg
-                class="lucide lucide-triangle-alert w-4 h-4 text-status-danger"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
-                />
-                <path
-                  d="M12 9v4"
-                />
-                <path
-                  d="M12 17h.01"
-                />
-              </svg>
-            </div>
-            <div>
-              <p
-                class="text-sm font-medium text-status-danger"
-              >
-                Danger Zone
-              </p>
-              <p
-                class="text-xs text-fg-muted"
-              >
-                Irreversible actions that delete data permanently
-              </p>
-            </div>
-          </div>
-          <button
-            class="text-xs px-3 py-1.5 rounded-md text-status-danger hover:bg-status-danger/10 border border-status-danger/20 transition-colors disabled:opacity-50"
-          >
-            <svg
-              class="lucide lucide-triangle-alert w-3.5 h-3.5 inline mr-1"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
-              />
-              <path
-                d="M12 9v4"
-              />
-              <path
-                d="M12 17h.01"
-              />
-            </svg>
-            Clear All Data
-          </button>
         </div>
       </div>
-    </section>
-    <section
-      class="scroll-mt-24"
-      id="about"
-    >
-      <h3
-        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
+      <button
+        class="text-xs px-3 py-1.5 rounded-md transition-colors disabled:opacity-50 text-fg-secondary hover:text-fg-primary hover:bg-surface-4 border border-border"
+        type="button"
       >
         <svg
-          class="lucide lucide-server w-4 h-4 text-fg-muted"
+          class="lucide lucide-eraser w-3 h-3 inline mr-1"
           fill="none"
           height="24"
           stroke="currentColor"
@@ -8188,56 +8607,48 @@ exports[`screen snapshots > Settings 1`] = `
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <rect
-            height="8"
-            rx="2"
-            ry="2"
-            width="20"
-            x="2"
-            y="2"
+          <path
+            d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"
           />
-          <rect
-            height="8"
-            rx="2"
-            ry="2"
-            width="20"
-            x="2"
-            y="14"
+          <path
+            d="M22 21H7"
           />
-          <line
-            x1="6"
-            x2="6.01"
-            y1="6"
-            y2="6"
-          />
-          <line
-            x1="6"
-            x2="6.01"
-            y1="18"
-            y2="18"
+          <path
+            d="m5 11 9 9"
           />
         </svg>
-        About
-      </h3>
-      <p
-        class="text-xs text-fg-muted mb-4"
-      >
-        Server runtime information.
-      </p>
-      <div
+        Run Cleanup
+      </button>
+    </section>
+    <section
+      class="scroll-mt-24"
+      id="prefs"
+    >
+      <section
         class="card p-5"
       >
+        <h3
+          class="text-sm font-semibold text-fg-primary"
+        >
+          This browser's preferences
+        </h3>
+        <p
+          class="mt-0.5 text-xs text-fg-muted"
+        >
+          Theme, language, notification settings, pet, sidebar and workspace layout are kept in this browser. Save them to a file to move them to another browser, or restore them from one.
+        </p>
         <div
-          class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3"
+          class="mt-2"
         >
           <div
-            class="bg-surface-2 rounded-lg px-4 py-3"
+            class="flex flex-wrap items-center gap-2 pt-2"
           >
-            <div
-              class="flex items-center gap-2 mb-1.5"
+            <button
+              class="btn-ghost text-xs"
+              type="button"
             >
               <svg
-                class="lucide lucide-server w-4 h-4 text-indigo-700 dark:text-indigo-400"
+                class="lucide lucide-file-down w-3.5 h-3.5"
                 fill="none"
                 height="24"
                 stroke="currentColor"
@@ -8248,60 +8659,26 @@ exports[`screen snapshots > Settings 1`] = `
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <rect
-                  height="8"
-                  rx="2"
-                  ry="2"
-                  width="20"
-                  x="2"
-                  y="2"
+                <path
+                  d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
                 />
-                <rect
-                  height="8"
-                  rx="2"
-                  ry="2"
-                  width="20"
-                  x="2"
-                  y="14"
+                <path
+                  d="M14 2v4a2 2 0 0 0 2 2h4"
                 />
-                <line
-                  x1="6"
-                  x2="6.01"
-                  y1="6"
-                  y2="6"
+                <path
+                  d="M12 18v-6"
                 />
-                <line
-                  x1="6"
-                  x2="6.01"
-                  y1="18"
-                  y2="18"
+                <path
+                  d="m9 15 3 3 3-3"
                 />
               </svg>
-              <p
-                class="text-[11px] text-fg-muted uppercase tracking-wider"
-              >
-                Release
-              </p>
-            </div>
-            <p
-              class="text-sm font-semibold text-fg-secondary font-mono"
-            >
-              v
-            </p>
-            <p
-              class="text-[10px] text-status-warning/90 mt-1"
-            >
-              UI build v1.8.13 (rebuild client to match)
-            </p>
-          </div>
-          <div
-            class="bg-surface-2 rounded-lg px-4 py-3"
-          >
-            <div
-              class="flex items-center gap-2 mb-1.5"
+              Export preferences
+            </button>
+            <label
+              class="btn-ghost text-xs cursor-pointer focus-within:ring-2 focus-within:ring-accent/40"
             >
               <svg
-                class="lucide lucide-clock w-4 h-4 text-blue-500"
+                class="lucide lucide-upload w-3.5 h-3.5"
                 fill="none"
                 height="24"
                 stroke="currentColor"
@@ -8312,183 +8689,104 @@ exports[`screen snapshots > Settings 1`] = `
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <circle
-                  cx="12"
-                  cy="12"
-                  r="10"
+                <path
+                  d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
                 />
                 <polyline
-                  points="12 6 12 12 16 14"
+                  points="17 8 12 3 7 8"
+                />
+                <line
+                  x1="12"
+                  x2="12"
+                  y1="3"
+                  y2="15"
                 />
               </svg>
-              <p
-                class="text-[11px] text-fg-muted uppercase tracking-wider"
-              >
-                Uptime
-              </p>
-            </div>
-            <p
-              class="text-sm font-semibold text-fg-secondary"
-            >
-              0m
-            </p>
-          </div>
-          <div
-            class="bg-surface-2 rounded-lg px-4 py-3"
-          >
-            <div
-              class="flex items-center gap-2 mb-1.5"
-            >
-              <svg
-                class="lucide lucide-cpu w-4 h-4 text-status-success"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="16"
-                  rx="2"
-                  width="16"
-                  x="4"
-                  y="4"
-                />
-                <rect
-                  height="6"
-                  rx="1"
-                  width="6"
-                  x="9"
-                  y="9"
-                />
-                <path
-                  d="M15 2v2"
-                />
-                <path
-                  d="M15 20v2"
-                />
-                <path
-                  d="M2 15h2"
-                />
-                <path
-                  d="M2 9h2"
-                />
-                <path
-                  d="M20 15h2"
-                />
-                <path
-                  d="M20 9h2"
-                />
-                <path
-                  d="M9 2v2"
-                />
-                <path
-                  d="M9 20v2"
-                />
-              </svg>
-              <p
-                class="text-[11px] text-fg-muted uppercase tracking-wider"
-              >
-                Node.js
-              </p>
-            </div>
-            <p
-              class="text-sm font-semibold text-fg-secondary font-mono"
-            >
-              v22.0.0
-            </p>
-          </div>
-          <div
-            class="bg-surface-2 rounded-lg px-4 py-3"
-          >
-            <div
-              class="flex items-center gap-2 mb-1.5"
-            >
-              <svg
-                class="lucide lucide-globe w-4 h-4 text-violet-700 dark:text-violet-400"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="12"
-                  cy="12"
-                  r="10"
-                />
-                <path
-                  d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
-                />
-                <path
-                  d="M2 12h20"
-                />
-              </svg>
-              <p
-                class="text-[11px] text-fg-muted uppercase tracking-wider"
-              >
-                Platform
-              </p>
-            </div>
-            <p
-              class="text-sm font-semibold text-fg-secondary"
-            >
-              linux
-            </p>
-          </div>
-          <div
-            class="bg-surface-2 rounded-lg px-4 py-3"
-          >
-            <div
-              class="flex items-center gap-2 mb-1.5"
-            >
-              <svg
-                class="lucide lucide-wifi w-4 h-4 text-status-warning"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 20h.01"
-                />
-                <path
-                  d="M2 8.82a15 15 0 0 1 20 0"
-                />
-                <path
-                  d="M5 12.859a10 10 0 0 1 14 0"
-                />
-                <path
-                  d="M8.5 16.429a5 5 0 0 1 7 0"
-                />
-              </svg>
-              <p
-                class="text-[11px] text-fg-muted uppercase tracking-wider"
-              >
-                WS Clients
-              </p>
-            </div>
-            <p
-              class="text-sm font-semibold text-fg-secondary"
-            >
-              0
-            </p>
+              Import preferences…
+              <input
+                accept="application/json,.json"
+                class="sr-only"
+                type="file"
+              />
+            </label>
           </div>
         </div>
+      </section>
+    </section>
+    <section
+      class="card p-5 space-y-4 border-status-danger/30 scroll-mt-24"
+      id="danger"
+    >
+      <div
+        class="flex items-center gap-3"
+      >
+        <div
+          class="w-9 h-9 rounded-lg bg-status-danger/10 border border-status-danger/20 flex items-center justify-center"
+        >
+          <svg
+            class="lucide lucide-triangle-alert w-4 h-4 text-status-danger"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+            />
+            <path
+              d="M12 9v4"
+            />
+            <path
+              d="M12 17h.01"
+            />
+          </svg>
+        </div>
+        <div>
+          <h3
+            class="text-sm font-medium text-status-danger"
+          >
+            Danger Zone
+          </h3>
+          <p
+            class="text-xs text-fg-muted"
+          >
+            Irreversible actions that delete data permanently
+          </p>
+        </div>
       </div>
+      <button
+        class="text-xs px-3 py-1.5 rounded-md text-status-danger hover:bg-status-danger/10 border border-status-danger/30 transition-colors disabled:opacity-50"
+        type="button"
+      >
+        <svg
+          class="lucide lucide-triangle-alert w-3.5 h-3.5 inline mr-1"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+          />
+          <path
+            d="M12 9v4"
+          />
+          <path
+            d="M12 17h.01"
+          />
+        </svg>
+        Clear All Data
+      </button>
     </section>
   </div>
 </div>
@@ -8499,53 +8797,144 @@ exports[`screen snapshots > Settings — notifications 1`] = `
   <div
     class="animate-fade-in space-y-8"
   >
+    <p
+      class="text-xs text-fg-muted"
+    >
+      These notification settings are saved in this browser only. Alert rules and webhooks below are server-wide: they apply to everyone using this dashboard.
+    </p>
     <section
       class="scroll-mt-24"
       id="notifications"
     >
-      <h3
-        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
+      <section
+        class="card p-5"
       >
-        <svg
-          class="lucide lucide-bell w-4 h-4 text-fg-muted"
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
+        <h3
+          class="text-sm font-semibold text-fg-primary"
         >
-          <path
-            d="M10.268 21a2 2 0 0 0 3.464 0"
-          />
-          <path
-            d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
-          />
-        </svg>
-        Notifications
-      </h3>
-      <p
-        class="text-xs text-fg-muted mb-4"
-      >
-        Browser notifications for important events. Requires permission.
-      </p>
-      <div
-        class="card p-5 space-y-5"
-      >
+          <span
+            class="flex items-center gap-2"
+          >
+            <svg
+              class="lucide lucide-bell w-4 h-4 text-fg-muted"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10.268 21a2 2 0 0 0 3.464 0"
+              />
+              <path
+                d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+              />
+            </svg>
+            Notifications
+          </span>
+        </h3>
+        <p
+          class="mt-0.5 text-xs text-fg-muted"
+        >
+          Browser notifications for important events. Requires permission.
+        </p>
         <div
-          class="flex items-center justify-between flex-wrap gap-3"
+          class="mt-2"
         >
           <div
-            class="flex items-center gap-3"
+            class="space-y-5 pt-2"
           >
+            <p
+              class="rounded-lg border border-status-warning/30 bg-status-warning/10 px-3 py-2 text-xs text-status-warning"
+              role="note"
+            >
+              This page is served from http://localhost, which is not a secure origin. Browsers only show notifications on HTTPS or localhost — open the dashboard through one of those to get them.
+            </p>
+            <p
+              class="text-xs text-fg-muted"
+              role="note"
+            >
+              This browser does not support notifications.
+            </p>
             <div
-              class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors bg-surface-2 border border-border"
+              class="flex items-center justify-between flex-wrap gap-3"
+            >
+              <div
+                class="flex items-center gap-3"
+              >
+                <div
+                  class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors bg-surface-2 border border-border"
+                >
+                  <svg
+                    class="lucide lucide-bell-off w-5 h-5 text-fg-muted"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.268 21a2 2 0 0 0 3.464 0"
+                    />
+                    <path
+                      d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"
+                    />
+                    <path
+                      d="m2 2 20 20"
+                    />
+                    <path
+                      d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="min-w-0 flex-1"
+                >
+                  <div
+                    class="flex justify-between gap-4 border-b border-border/60 last:border-b-0 py-2 items-center"
+                  >
+                    <div
+                      class="min-w-0"
+                    >
+                      <p
+                        class="text-sm text-fg-secondary"
+                      >
+                        Enable Browser Notifications
+                      </p>
+                    </div>
+                    <div
+                      class="shrink-0"
+                    >
+                      <button
+                        aria-checked="false"
+                        aria-label="Enable Browser Notifications"
+                        class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50 bg-border-light ring-1 ring-inset ring-fg-muted/80"
+                        role="switch"
+                        type="button"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="inline-block h-4 w-4 rounded-full bg-white shadow transition-transform translate-x-0.5"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="flex items-center gap-2 text-xs text-fg-muted"
             >
               <svg
-                class="lucide lucide-bell-off w-5 h-5 text-fg-muted"
+                class="lucide lucide-bell-off w-3.5 h-3.5"
                 fill="none"
                 height="24"
                 stroke="currentColor"
@@ -8569,73 +8958,40 @@ exports[`screen snapshots > Settings — notifications 1`] = `
                   d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"
                 />
               </svg>
+              Notifications are disabled - enable to get alerts for session events
             </div>
             <div
-              class="min-w-0 flex-1"
+              class="flex justify-end"
             >
-              <div
-                class="flex justify-between gap-4 border-b border-border/60 last:border-b-0 py-2 items-center"
+              <button
+                class="btn-ghost text-xs"
+                type="button"
               >
-                <div
-                  class="min-w-0"
+                <svg
+                  class="lucide lucide-rotate-ccw w-3.5 h-3.5"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <p
-                    class="text-sm text-fg-secondary"
-                  >
-                    Enable Browser Notifications
-                  </p>
-                </div>
-                <div
-                  class="shrink-0"
-                >
-                  <button
-                    aria-checked="false"
-                    aria-label="Enable Browser Notifications"
-                    class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:cursor-not-allowed disabled:opacity-50 bg-surface-4"
-                    role="switch"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="inline-block h-4 w-4 rounded-full bg-white shadow transition-transform translate-x-0.5"
-                    />
-                  </button>
-                </div>
-              </div>
+                  <path
+                    d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+                  />
+                  <path
+                    d="M3 3v5h5"
+                  />
+                </svg>
+                Reset to defaults
+              </button>
             </div>
           </div>
         </div>
-        <div
-          class="flex items-center gap-2 text-xs text-fg-muted"
-        >
-          <svg
-            class="lucide lucide-bell-off w-3.5 h-3.5"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10.268 21a2 2 0 0 0 3.464 0"
-            />
-            <path
-              d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"
-            />
-            <path
-              d="m2 2 20 20"
-            />
-            <path
-              d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"
-            />
-          </svg>
-          Notifications are disabled - enable to get alerts for session events
-        </div>
-      </div>
+      </section>
     </section>
     <section
       class="scroll-mt-24"
@@ -8823,6 +9179,7 @@ exports[`screen snapshots > Settings — notifications 1`] = `
               class="rounded-2xl bg-surface-4 flex items-center justify-center w-10 h-10 mb-3"
             >
               <svg
+                aria-hidden="true"
                 class="lucide lucide-list-checks w-6 h-6 text-fg-muted"
                 fill="none"
                 height="24"
@@ -8875,7 +9232,7 @@ exports[`screen snapshots > Workflows 1`] = `
     class="space-y-6"
   >
     <div
-      class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"
+      class="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between"
     >
       <div
         class="flex items-center gap-3"
@@ -9506,78 +9863,82 @@ exports[`screen snapshots > Workflows 1`] = `
       </div>
     </div>
     <div
-      class="flex flex-col h-full"
+      class="hidden"
     >
       <div
-        class="flex items-center justify-between gap-4 mb-3"
+        class="flex flex-col h-full"
       >
         <div
-          class="flex items-center gap-2.5 min-w-0"
+          class="flex items-center justify-between gap-4 mb-3"
         >
-          <span
-            class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
+          <div
+            class="flex items-center gap-2.5 min-w-0"
           >
-            1
-          </span>
-          <h2
-            class="text-sm font-semibold text-fg-primary"
-          >
-            Workspace Pipeline Pass Rates
-          </h2>
-          <button
-            aria-expanded="false"
-            aria-label="What this shows"
-            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
-            type="button"
-          >
-            <svg
-              class="lucide lucide-info w-3.5 h-3.5"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M12 16v-4"
-              />
-              <path
-                d="M12 8h.01"
-              />
-            </svg>
-          </button>
-        </div>
-        <span
-          class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
-          title="How often each stage of your own pipelines is actually passed"
-        >
-          How often each stage of your own pipelines is actually passed
-        </span>
-      </div>
-      <div
-        class="card p-4 flex-1"
-      >
-        <div
-          class="space-y-3"
-        >
-          <p
-            class="text-sm text-fg-muted"
+              1
+            </span>
+            <h2
+              class="text-sm font-semibold text-fg-primary"
+            >
+              Workspace Pipeline Pass Rates
+            </h2>
+            <button
+              aria-expanded="false"
+              aria-label="What this shows"
+              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
+              type="button"
+            >
+              <svg
+                class="lucide lucide-info w-3.5 h-3.5"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                />
+                <path
+                  d="M12 16v-4"
+                />
+                <path
+                  d="M12 8h.01"
+                />
+              </svg>
+            </button>
+          </div>
+          <span
+            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
+            title="How often each stage of your own pipelines is actually passed"
           >
-            No workspace has recorded a stage yet. Create one with
-             
-            <code>
-              agenthub lanes add --cwd $(pwd)
-            </code>
-          </p>
+            How often each stage of your own pipelines is actually passed
+          </span>
+        </div>
+        <div
+          class="card p-4 flex-1"
+        >
+          <div
+            class="space-y-3"
+          >
+            <p
+              class="text-sm text-fg-muted"
+            >
+              No workspace has recorded a stage yet. Create one with
+               
+              <code>
+                agenthub lanes add --cwd $(pwd)
+              </code>
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -10243,128 +10604,35 @@ exports[`screen snapshots > Workflows 1`] = `
       </div>
     </div>
     <div
-      class="flex flex-col h-full"
+      class="scroll-mt-4"
     >
       <div
-        class="flex items-center justify-between gap-4 mb-3"
+        class="flex flex-col h-full"
       >
         <div
-          class="flex items-center gap-2.5 min-w-0"
-        >
-          <span
-            class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
-          >
-            7
-          </span>
-          <h2
-            class="text-sm font-semibold text-fg-primary"
-          >
-            Session Drill-In
-          </h2>
-          <button
-            aria-expanded="false"
-            aria-label="What this shows"
-            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
-            type="button"
-          >
-            <svg
-              class="lucide lucide-info w-3.5 h-3.5"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M12 16v-4"
-              />
-              <path
-                d="M12 8h.01"
-              />
-            </svg>
-          </button>
-        </div>
-        <span
-          class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
-          title="Select a session from the scatter plot or use the dropdown to explore"
-        >
-          Select a session from the scatter plot or use the dropdown to explore
-        </span>
-      </div>
-      <div
-        class="card p-4 flex-1"
-      >
-        <div
-          class="flex flex-col py-6 px-4 border-2 border-dashed border-border rounded-xl"
+          class="flex items-center justify-between gap-4 mb-3"
         >
           <div
-            class="relative mb-4"
+            class="flex items-center gap-2.5 min-w-0"
           >
-            <div
-              class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-surface-3 transition-colors cursor-text border-border"
+            <span
+              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
+            >
+              7
+            </span>
+            <h2
+              class="text-sm font-semibold text-fg-primary"
+            >
+              Session Drill-In
+            </h2>
+            <button
+              aria-expanded="false"
+              aria-label="What this shows"
+              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
+              type="button"
             >
               <svg
-                class="lucide lucide-search w-3.5 h-3.5 text-fg-muted flex-shrink-0"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="11"
-                  cy="11"
-                  r="8"
-                />
-                <path
-                  d="m21 21-4.3-4.3"
-                />
-              </svg>
-              <input
-                class="flex-1 bg-transparent text-xs text-fg-secondary placeholder-fg-muted outline-none min-w-0"
-                placeholder="Search sessions..."
-                type="text"
-                value=""
-              />
-              <svg
-                class="lucide lucide-chevron-down w-3.5 h-3.5 text-fg-muted flex-shrink-0 transition-transform duration-150"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m6 9 6 6 6-6"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="flex flex-col items-center text-center mt-2"
-          >
-            <div
-              class="w-10 h-10 rounded-xl bg-surface-4 flex items-center justify-center mb-4"
-            >
-              <svg
-                class="lucide lucide-git-fork w-5 h-5 text-fg-muted"
+                class="lucide lucide-info w-3.5 h-3.5"
                 fill="none"
                 height="24"
                 stroke="currentColor"
@@ -10377,45 +10645,91 @@ exports[`screen snapshots > Workflows 1`] = `
               >
                 <circle
                   cx="12"
-                  cy="18"
-                  r="3"
-                />
-                <circle
-                  cx="6"
-                  cy="6"
-                  r="3"
-                />
-                <circle
-                  cx="18"
-                  cy="6"
-                  r="3"
+                  cy="12"
+                  r="10"
                 />
                 <path
-                  d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"
+                  d="M12 16v-4"
                 />
                 <path
-                  d="M12 12v3"
+                  d="M12 8h.01"
                 />
               </svg>
-            </div>
-            <p
-              class="text-sm font-medium text-fg-secondary mb-1"
-            >
-              No session selected
-            </p>
-            <p
-              class="text-xs text-fg-muted max-w-xs"
-            >
-              Search and select a session above, or click a bubble in the scatter plot, to drill into its agent tree, tool timeline, and event sequence.
-            </p>
+            </button>
+          </div>
+          <span
+            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
+            title="Select a session from the scatter plot or use the dropdown to explore"
+          >
+            Select a session from the scatter plot or use the dropdown to explore
+          </span>
+        </div>
+        <div
+          class="card p-4 flex-1"
+        >
+          <div
+            class="flex flex-col py-6 px-4 border-2 border-dashed border-border rounded-xl"
+          >
             <div
-              class="flex gap-2 mt-5"
+              class="relative mb-4"
             >
               <div
-                class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted bg-surface-3 border border-border"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-surface-3 transition-colors cursor-text focus-within:ring-2 focus-within:ring-accent/40 border-border"
               >
                 <svg
-                  class="lucide lucide-git-fork w-3.5 h-3.5"
+                  class="lucide lucide-search w-3.5 h-3.5 text-fg-muted flex-shrink-0"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="11"
+                    cy="11"
+                    r="8"
+                  />
+                  <path
+                    d="m21 21-4.3-4.3"
+                  />
+                </svg>
+                <input
+                  aria-label="Search sessions..."
+                  class="flex-1 bg-transparent text-xs text-fg-secondary placeholder-fg-muted outline-none min-w-0"
+                  placeholder="Search sessions..."
+                  type="text"
+                  value=""
+                />
+                <svg
+                  class="lucide lucide-chevron-down w-3.5 h-3.5 text-fg-muted flex-shrink-0 transition-transform duration-150"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m6 9 6 6 6-6"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="flex flex-col items-center text-center mt-2"
+            >
+              <div
+                class="w-10 h-10 rounded-xl bg-surface-4 flex items-center justify-center mb-4"
+              >
+                <svg
+                  class="lucide lucide-git-fork w-5 h-5 text-fg-muted"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -10448,64 +10762,116 @@ exports[`screen snapshots > Workflows 1`] = `
                     d="M12 12v3"
                   />
                 </svg>
-                Agent Tree
               </div>
-              <div
-                class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted bg-surface-3 border border-border"
+              <p
+                class="text-sm font-medium text-fg-secondary mb-1"
               >
-                <svg
-                  class="lucide lucide-wrench w-3.5 h-3.5"
-                  fill="none"
-                  height="24"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
-                  />
-                </svg>
-                Tool Timeline
-              </div>
-              <div
-                class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted bg-surface-3 border border-border"
+                No session selected
+              </p>
+              <p
+                class="text-xs text-fg-muted max-w-xs"
               >
-                <svg
-                  class="lucide lucide-list w-3.5 h-3.5"
-                  fill="none"
-                  height="24"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
+                Search and select a session above, or click a bubble in the scatter plot, to drill into its agent tree, tool timeline, and event sequence.
+              </p>
+              <div
+                class="flex gap-2 mt-5"
+              >
+                <div
+                  class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted bg-surface-3 border border-border"
                 >
-                  <path
-                    d="M3 12h.01"
-                  />
-                  <path
-                    d="M3 18h.01"
-                  />
-                  <path
-                    d="M3 6h.01"
-                  />
-                  <path
-                    d="M8 12h13"
-                  />
-                  <path
-                    d="M8 18h13"
-                  />
-                  <path
-                    d="M8 6h13"
-                  />
-                </svg>
-                Event Sequence
+                  <svg
+                    class="lucide lucide-git-fork w-3.5 h-3.5"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="12"
+                      cy="18"
+                      r="3"
+                    />
+                    <circle
+                      cx="6"
+                      cy="6"
+                      r="3"
+                    />
+                    <circle
+                      cx="18"
+                      cy="6"
+                      r="3"
+                    />
+                    <path
+                      d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"
+                    />
+                    <path
+                      d="M12 12v3"
+                    />
+                  </svg>
+                  Agent Tree
+                </div>
+                <div
+                  class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted bg-surface-3 border border-border"
+                >
+                  <svg
+                    class="lucide lucide-wrench w-3.5 h-3.5"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+                    />
+                  </svg>
+                  Tool Timeline
+                </div>
+                <div
+                  class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted bg-surface-3 border border-border"
+                >
+                  <svg
+                    class="lucide lucide-list w-3.5 h-3.5"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3 12h.01"
+                    />
+                    <path
+                      d="M3 18h.01"
+                    />
+                    <path
+                      d="M3 6h.01"
+                    />
+                    <path
+                      d="M8 12h13"
+                    />
+                    <path
+                      d="M8 18h13"
+                    />
+                    <path
+                      d="M8 6h13"
+                    />
+                  </svg>
+                  Event Sequence
+                </div>
               </div>
             </div>
           </div>
diff --git a/client/src/pages/__tests__/screens.snapshot.test.tsx b/client/src/pages/__tests__/screens.snapshot.test.tsx
index cf9fd06a..bef91bf9 100644
--- a/client/src/pages/__tests__/screens.snapshot.test.tsx
+++ b/client/src/pages/__tests__/screens.snapshot.test.tsx
@@ -599,6 +599,13 @@ describe("screen snapshots", () => {
   it("Settings — notifications", async () => {
     await snapshot(<Settings section="notifications" />, "/settings/notifications");
   });
+  // General split into General / Data / About: keep the moved content covered.
+  it("Settings — data", async () => {
+    await snapshot(<Settings section="data" />, "/settings/data");
+  });
+  it("Settings — about", async () => {
+    await snapshot(<Settings section="about" />, "/settings/about");
+  });
   it("Not found", async () => {
     await snapshot(<NotFound />, "/nope");
   });