From f7b6b5b938843007cf40556317259c4119edbdfa Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Wed, 25 Mar 2026 19:11:20 +0100
Subject: [PATCH 01/16] feat: improve project creation validation and welcome
 screen polish

Add inline validation to CreateProjectDialog with character checks and
debounced directory existence warnings. Show capabilities section only
for first-time users on the welcome screen and display agent detection
summary. Fix open-project restoration to correctly handle first launch
vs returning users.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Shell/CreateProjectDialog.tsx | 92 +++++++++++++++++--
 src/components/Shell/WelcomeScreen.tsx       | 95 +++++++++++++-------
 src/store/appStore.ts                        | 16 ++--
 3 files changed, 157 insertions(+), 46 deletions(-)

diff --git a/src/components/Shell/CreateProjectDialog.tsx b/src/components/Shell/CreateProjectDialog.tsx
index 667776f..2fc874a 100644
--- a/src/components/Shell/CreateProjectDialog.tsx
+++ b/src/components/Shell/CreateProjectDialog.tsx
@@ -1,6 +1,7 @@
 import { open } from "@tauri-apps/plugin-dialog";
+import { exists, readDir } from "@tauri-apps/plugin-fs";
 import { FolderOpen, Plus, X } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { useAppStore } from "../../store/appStore";
 import {
@@ -14,6 +15,9 @@ import {
 import { Input } from "../ui/input";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 
+const INVALID_CHARS = /[/\\:*?"<>|]/;
+const INVALID_CHARS_DISPLAY = '/ \\ : * ? " < > |';
+
 interface CreateProjectDialogProps {
   onDismiss: () => void;
 }
@@ -30,7 +34,72 @@ export default function CreateProjectDialog({
   const [creating, setCreating] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const canCreate = name.trim().length > 0 && parentPath.length > 0 && !creating;
+  // Inline validation state
+  const [nameError, setNameError] = useState<string | null>(null);
+  const [pathWarning, setPathWarning] = useState<string | null>(null);
+
+  // Validate name on change
+  const trimmedName = name.trim();
+  const hasInvalidChars = useMemo(
+    () => INVALID_CHARS.test(trimmedName),
+    [trimmedName],
+  );
+
+  useEffect(() => {
+    if (!trimmedName) {
+      setNameError(null);
+    } else if (hasInvalidChars) {
+      setNameError(`Invalid characters: ${INVALID_CHARS_DISPLAY}`);
+    } else {
+      setNameError(null);
+    }
+  }, [trimmedName, hasInvalidChars]);
+
+  // Debounced directory existence check
+  const checkTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (checkTimerRef.current) clearTimeout(checkTimerRef.current);
+    setPathWarning(null);
+
+    if (!parentPath || !trimmedName || hasInvalidChars) return;
+
+    const targetPath = `${parentPath}/${trimmedName}`;
+    checkTimerRef.current = setTimeout(async () => {
+      try {
+        const pathExists = await exists(targetPath);
+        if (!pathExists) {
+          setPathWarning(null);
+          return;
+        }
+        // Check if it's a non-empty directory
+        try {
+          const entries = await readDir(targetPath);
+          if (entries.length > 0) {
+            setPathWarning("Directory already exists and is not empty");
+          } else {
+            setPathWarning(null); // Empty dir is OK
+          }
+        } catch {
+          // If readDir fails it might be a file, not a directory
+          setPathWarning("A file already exists at this path");
+        }
+      } catch {
+        // exists() failed — ignore, backend will catch it
+      }
+    }, 300);
+
+    return () => {
+      if (checkTimerRef.current) clearTimeout(checkTimerRef.current);
+    };
+  }, [parentPath, trimmedName, hasInvalidChars]);
+
+  const canCreate =
+    trimmedName.length > 0 &&
+    parentPath.length > 0 &&
+    !creating &&
+    !hasInvalidChars &&
+    !pathWarning;
 
   const handlePickLocation = useCallback(async () => {
     const selected = await open({
@@ -47,7 +116,7 @@ export default function CreateProjectDialog({
     setCreating(true);
     addBackgroundTask("Creating project");
     try {
-      await createProject(parentPath, name.trim());
+      await createProject(parentPath, trimmedName);
       onDismiss();
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -55,7 +124,7 @@ export default function CreateProjectDialog({
       setCreating(false);
       removeBackgroundTask("Creating project");
     }
-  }, [canCreate, parentPath, name, createProject, addBackgroundTask, removeBackgroundTask, onDismiss]);
+  }, [canCreate, parentPath, trimmedName, createProject, addBackgroundTask, removeBackgroundTask, onDismiss]);
 
   const handleNameKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -69,8 +138,8 @@ export default function CreateProjectDialog({
 
   // Build path preview
   const pathPreview =
-    parentPath && name.trim()
-      ? `${parentPath}/${name.trim()}`
+    parentPath && trimmedName
+      ? `${parentPath}/${trimmedName}`
       : null;
 
   return (
@@ -99,7 +168,11 @@ export default function CreateProjectDialog({
             onKeyDown={handleNameKeyDown}
             placeholder="my-project"
             autoFocus
+            className={nameError ? "border-destructive" : ""}
           />
+          {nameError && (
+            <p className="mt-1 text-[11px] text-destructive">{nameError}</p>
+          )}
         </div>
 
         {/* Location picker */}
@@ -130,17 +203,20 @@ export default function CreateProjectDialog({
 
         {/* Path preview */}
         {pathPreview && (
-          <div className="rounded-md bg-muted/50 px-3 py-2">
+          <div className={`rounded-md px-3 py-2 ${pathWarning ? "bg-destructive/10" : "bg-muted/50"}`}>
             <p className="text-[10px] text-muted-foreground mb-0.5">
               Will be created at
             </p>
             <p className="text-xs text-dim-foreground font-mono truncate">
               {pathPreview}
             </p>
+            {pathWarning && (
+              <p className="mt-1 text-[11px] text-destructive">{pathWarning}</p>
+            )}
           </div>
         )}
 
-        {/* Error */}
+        {/* Error from backend */}
         {error && <p className="text-xs text-destructive">{error}</p>}
 
         {/* Actions */}
diff --git a/src/components/Shell/WelcomeScreen.tsx b/src/components/Shell/WelcomeScreen.tsx
index 2f5a2b4..0580294 100644
--- a/src/components/Shell/WelcomeScreen.tsx
+++ b/src/components/Shell/WelcomeScreen.tsx
@@ -1,5 +1,6 @@
 import {
   ChevronRight,
+  CircleCheck,
   FolderCode,
   FolderOpen,
   FolderPlus,
@@ -58,6 +59,7 @@ export default function WelcomeScreen() {
   const projects = useAppStore((s) => s.projects);
   const openProject = useAppStore((s) => s.openProject);
   const backgroundTasks = useAppStore((s) => s.backgroundTasks);
+  const agents = useAppStore((s) => s.agents);
 
   const isLoading = useMemo(
     () => backgroundTasks.some((t) => LOADING_LABELS.includes(t)),
@@ -88,6 +90,17 @@ export default function WelcomeScreen() {
   const hasProjects = projects.length > 0;
   const showProjects = hasProjects && !isLoading;
 
+  const isDetectingAgents = useMemo(
+    () => backgroundTasks.includes("Detecting agents"),
+    [backgroundTasks],
+  );
+  const agentSummary = useMemo(() => {
+    if (isDetectingAgents || agents.length === 0) return null;
+    const installed = agents.filter((a) => a.installed).length;
+    if (installed === agents.length) return { text: "All agents ready", allReady: true };
+    return { text: `${installed} of ${agents.length} agents detected`, allReady: false };
+  }, [agents, isDetectingAgents]);
+
   const handleOpenProject = useCallback(
     (id: string) => openProject(id),
     [openProject],
@@ -214,35 +227,37 @@ export default function WelcomeScreen() {
                 </CardContent>
               </Card>
 
-              {/* Capabilities */}
-              <div className="grid grid-cols-3 gap-3 w-full mt-5">
-                {CAPABILITIES.map((cap, i) => {
-                  const Icon = cap.icon;
-                  return (
-                    <Card
-                      key={cap.label}
-                      type="subtle"
-                      radius="md"
-                      border
-                      animationPreset="slide-up"
-                      animationDelay={0.15 + i * STAGGER_DELAYS.fast}
-                      className="text-center"
-                    >
-                      <CardContent className="p-4 flex flex-col items-center gap-1.5">
-                        <div className="text-muted-foreground">
-                          <Icon size={18} strokeWidth={1.5} />
-                        </div>
-                        <div className="text-[12px] font-medium text-dim-foreground">
-                          {cap.label}
-                        </div>
-                        <div className="text-[10px] text-muted-foreground leading-snug">
-                          {cap.description}
-                        </div>
-                      </CardContent>
-                    </Card>
-                  );
-                })}
-              </div>
+              {/* Capabilities — only shown for first-time users */}
+              {!hasProjects && (
+                <div className="grid grid-cols-3 gap-3 w-full mt-5">
+                  {CAPABILITIES.map((cap, i) => {
+                    const Icon = cap.icon;
+                    return (
+                      <Card
+                        key={cap.label}
+                        type="subtle"
+                        radius="md"
+                        border
+                        animationPreset="slide-up"
+                        animationDelay={0.15 + i * STAGGER_DELAYS.fast}
+                        className="text-center"
+                      >
+                        <CardContent className="p-4 flex flex-col items-center gap-1.5">
+                          <div className="text-muted-foreground">
+                            <Icon size={18} strokeWidth={1.5} />
+                          </div>
+                          <div className="text-[12px] font-medium text-dim-foreground">
+                            {cap.label}
+                          </div>
+                          <div className="text-[10px] text-muted-foreground leading-snug">
+                            {cap.description}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    );
+                  })}
+                </div>
+              )}
 
               {/* Supported agents — 3-per-row card grid */}
               <motion.div
@@ -251,9 +266,25 @@ export default function WelcomeScreen() {
                 transition={{ duration: 0.4, delay: 0.35, ease: EASE.out }}
                 className="mt-5 w-full flex flex-col items-center gap-2.5"
               >
-                <span className="text-[11px] text-muted-foreground">
-                  Supported agents
-                </span>
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] text-muted-foreground">
+                    Supported agents
+                  </span>
+                  {agentSummary && (
+                    <span
+                      className={`flex items-center gap-1 text-[11px] ${
+                        agentSummary.allReady
+                          ? "text-success"
+                          : "text-dim-foreground"
+                      }`}
+                    >
+                      {agentSummary.allReady && (
+                        <CircleCheck size={11} />
+                      )}
+                      <span>· {agentSummary.text}</span>
+                    </span>
+                  )}
+                </div>
                 <AgentCardGrid
                   selectedAgentName={null}
                   accentColor="blue"
diff --git a/src/store/appStore.ts b/src/store/appStore.ts
index 2929d7a..2f9046d 100644
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -1361,15 +1361,19 @@ export const useAppStore = create<AppState>()(
           const sorted = [...projects].sort((a, b) => a.name.localeCompare(b.name));
           const allIds = sorted.map((p) => p.id);
 
-          // Restore persisted open projects, falling back to all
-          let openProjectIds = allIds;
+          // Restore persisted open projects, or open all on first launch
+          let openProjectIds: string[];
           if (savedOpenIds) {
             try {
               const parsed: string[] = JSON.parse(savedOpenIds);
-              // Filter to only valid project IDs
-              const valid = parsed.filter((id) => allIds.includes(id));
-              if (valid.length > 0) openProjectIds = valid;
-            } catch { /* fall back to all */ }
+              openProjectIds = parsed.filter((id) => allIds.includes(id));
+            } catch {
+              openProjectIds = allIds;
+            }
+          } else {
+            // No saved state (first launch) — auto-open all projects
+            // (if only 1 project exists, it skips the welcome screen automatically)
+            openProjectIds = allIds;
           }
 
           set({

From 4f29e4f403cb8258f9217f3987e0f82a3691bf38 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Thu, 26 Mar 2026 07:19:27 +0100
Subject: [PATCH 02/16] fix: keep sidebar and chat branch display in sync with
 external git operations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Branch name was only refreshed at init, project switch, and session
completion — external git checkout/branch commands were never picked up.
Add 15s polling, window focus listener, and session start/stop refresh.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/store/appStore.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/store/appStore.ts b/src/store/appStore.ts
index 2f9046d..6b91152 100644
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -1332,6 +1332,17 @@ export const useAppStore = create<AppState>()(
       }, 300_000);
       cleanups.push(() => clearInterval(usageInterval));
 
+      // Poll branch names every 15s so external git operations are reflected
+      const branchInterval = setInterval(() => {
+        get().refreshProjectBranches();
+      }, 15_000);
+      cleanups.push(() => clearInterval(branchInterval));
+
+      // Refresh branches immediately when window regains focus
+      const handleFocus = () => get().refreshProjectBranches();
+      window.addEventListener("focus", handleFocus);
+      cleanups.push(() => window.removeEventListener("focus", handleFocus));
+
       // Check GitHub CLI auth status (tracked as background task)
       addBackgroundTask("Checking GitHub auth");
       invoke<GhAuthStatus>("check_gh_auth")
@@ -1528,6 +1539,8 @@ export const useAppStore = create<AppState>()(
             if (pid) {
               refreshProject(pid);
             }
+            // Refresh branch names — session start/stop may involve branch operations
+            get().refreshProjectBranches();
             // For ACP sessions with an initial prompt (task/research), set
             // promptPending so the chat UI shows a thinking indicator immediately.
             // Chat and vibe sessions start without a prompt — they wait for user input.

From 23a1e4ec1f478ab47d72140ea9d8ec009c1fde78 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Thu, 26 Mar 2026 19:49:08 +0100
Subject: [PATCH 03/16] feat: v0.9.2 settings view, status bar, file search,
 and UI polish

New dedicated Settings view with 8 organized tabs replacing sidebar modals,
bottom status bar with MCP/GitHub/usage indicators, file browser search with
highlighting and right-click context menu (open in editor, copy path, reveal),
success toast notifications, focus-within accessibility for action buttons,
improved ACP adapter update flow with pinned versions and cache invalidation,
and session grid resize handle indicators.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  28 +
 docs/general.md                               |  60 +-
 src-tauri/src/agent/registry.rs               | 133 +++-
 src-tauri/src/commands/agents.rs              | 105 ++-
 src-tauri/src/commands/files.rs               | 202 ++++-
 src-tauri/src/lib.rs                          |   3 +
 src/components/Chat/AgentTurnBlock.tsx        |   2 +-
 src/components/Chat/ChatMessage.tsx           |   4 +-
 src/components/Chat/PermissionDialog.tsx      |   4 +-
 src/components/CommandPalette/useCommands.ts  |   2 +
 src/components/Dashboard/ArchivedTaskList.tsx |   2 +-
 src/components/Dashboard/DependencyGraph.tsx  |   2 +-
 src/components/Dashboard/TaskCard.tsx         |   2 +-
 src/components/Files/FileContextMenu.tsx      | 205 ++++++
 src/components/Files/FileTree.tsx             |  99 ++-
 src/components/Files/FileTreeItem.tsx         | 112 +--
 src/components/Sessions/QuickActionBar.tsx    |   2 +-
 src/components/Sessions/SessionGrid.tsx       |  20 +-
 src/components/Sessions/SessionPane.tsx       |  86 +--
 src/components/Sessions/SessionsView.tsx      |  71 +-
 src/components/Settings/AcpPermissionsTab.tsx | 247 ++++---
 src/components/Settings/AgentsTab.tsx         | 202 +++--
 src/components/Settings/GeneralTab.tsx        | 181 ++---
 src/components/Settings/GitHubTab.tsx         |  49 +-
 src/components/Settings/GitWorktreesTab.tsx   | 186 +++++
 src/components/Settings/ProjectTab.tsx        | 693 ++++++++++++++++++
 src/components/Settings/PromptsTab.tsx        |  12 +-
 src/components/Settings/SettingsView.tsx      | 218 ++++++
 src/components/Settings/TerminalTab.tsx       |  42 +-
 src/components/Settings/shared.ts             |   5 -
 src/components/Settings/shared.tsx            |  44 ++
 src/components/Shell/AppShell.tsx             |  37 +-
 src/components/Shell/RightSidebar.tsx         |  62 +-
 .../Shell/RightSidebarResizeHandle.tsx        |  19 +-
 src/components/Shell/Sidebar.tsx              | 218 +-----
 src/components/Shell/SidebarResizeHandle.tsx  |  19 +-
 src/components/Shell/SidebarStatusPanel.tsx   |   2 +-
 src/components/Shell/StatusBar.tsx            | 413 +++++++++++
 src/components/Shell/UsagePanel.tsx           |   2 +-
 .../SkillsRules/AgentExtensionCard.tsx        |  94 +--
 .../SkillsRules/AgentsExtensionTab.tsx        |  17 +-
 .../SkillsRules/InstalledSkillsList.tsx       |  32 +-
 src/components/SkillsRules/PluginsTab.tsx     | 100 ++-
 src/components/SkillsRules/SkillsTab.tsx      |   6 +-
 src/components/TaskDetail/TaskBody.tsx        |   2 +-
 src/components/TaskDetail/TaskTitle.tsx       |   2 +-
 src/components/ai-elements/attachments.tsx    |   4 +-
 src/lib/highlightMatch.tsx                    |  26 +
 src/store/appStore.ts                         |  12 +
 src/types.ts                                  |   2 +-
 50 files changed, 3180 insertions(+), 912 deletions(-)
 create mode 100644 src/components/Files/FileContextMenu.tsx
 create mode 100644 src/components/Settings/GitWorktreesTab.tsx
 create mode 100644 src/components/Settings/ProjectTab.tsx
 create mode 100644 src/components/Settings/SettingsView.tsx
 delete mode 100644 src/components/Settings/shared.ts
 create mode 100644 src/components/Settings/shared.tsx
 create mode 100644 src/components/Shell/StatusBar.tsx
 create mode 100644 src/lib/highlightMatch.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b30355..4419117 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,34 @@ All notable changes to Faber will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.2] - 2026-03-xx WIP
+
+### Added
+
+- **Settings View** — Dedicated full-screen settings page with master-detail layout replacing the old sidebar modals. Eight organized tabs split into App-scoped (General, Terminal, Agents, Prompts) and Project-scoped (Project, Git & Worktrees, ACP Permissions, GitHub) sections. Open with **Ctrl+,** or from the command palette
+- **Status Bar** — New bottom bar showing MCP status and port, GitHub auth status, top agent usage percentage, context-sensitive keyboard shortcuts, and app version
+- **File Search** — File browser now preloads a project file index in the background and supports client-side filtering with highlighted search matches. Re-indexes automatically when files change
+- **File Context Menu** — Right-click any file in the tree for quick actions: copy relative path, copy absolute path, reveal in file explorer, or open in an external editor (auto-detects VS Code, Cursor, Zed, Windsurf, Fleet, Sublime, Vim, Neovim)
+- **Success Toasts** — Green flash notifications (3-second auto-dismiss) for confirming actions like ACP adapter installs and session renames
+- **Editor Detection** — Backend probes PATH for 8 known editors and exposes `detect_editors` / `open_in_editor` IPC commands
+- **Project File Indexing** — New `index_project_files` Rust command recursively indexes project files (skipping hidden dirs, node_modules, target, .git) for fast client-side search
+
+### Changed
+
+- **Settings Architecture** — Moved all settings from sidebar dialog modals into the new dedicated Settings view. Sidebar gear icon and Ctrl+, both navigate to the settings page. Git & Worktrees settings (branch naming, instruction files) now have their own tab instead of being buried in the Project tab
+- **ToggleRow Component** — Replaced repetitive inline Checkbox + label patterns across settings tabs with a shared `ToggleRow` component using the Switch primitive
+- **ACP Adapter Updates** — Install command now pins to the exact registry version (e.g., `npm install -g @package@0.24.1`), invalidates npm and registry caches after install, and extracts user-friendly error messages from npm stderr instead of dumping raw output
+- **Agent Registry Logging** — Enhanced diagnostic logging throughout the registry (debug for cache hits, info for version checks) with improved error handling for non-semver formats and npm non-zero exit codes
+- **Focus-Within Accessibility** — Action buttons on task cards, chat messages, dependency graph rows, quick action bar, and task body now appear on focus-within (not just hover) for keyboard accessibility
+- **Session Grid Resize Handles** — Column and row resize handles now show centered dot indicators on hover for better discoverability
+- **Session Pane** — Removed reorder arrows (drag-and-drop is the primary method); added brief "Saved" indicator after session rename; wider rename input field
+- **Permission Dialog Urgency** — Timeout bar is thicker and the urgent state (last 30 seconds) now pulses with an animation
+- **Command Palette** — Added "Go to Settings" navigation command
+
+### Fixed
+
+- **ACP Adapter Install on Windows** — npm install now hides the console window (CREATE_NO_WINDOW flag) to prevent a flash of a terminal window
+
 ## [0.9.1] - 2026-03-xx WIP
 
 ### Added
diff --git a/docs/general.md b/docs/general.md
index 3be6fc9..07431c6 100644
--- a/docs/general.md
+++ b/docs/general.md
@@ -70,7 +70,7 @@ Faber runs a local MCP (Model Context Protocol) server that agents use to report
 
 ## Views
 
-Navigate between views using the top bar tabs or the command palette.
+Navigate between views using the top bar tabs, the command palette, or keyboard shortcuts.
 
 ### Dashboard (Tasks)
 
@@ -120,10 +120,11 @@ The Tree view is especially useful when you have many tasks with dependency rela
 
 A multi-pane terminal grid showing all active agent sessions. Features:
 
-- Resize the grid layout (1×1, 2×1, 2×2, 3×2, etc.)
+- Resize the grid layout (1×1, 2×1, 2×2, 3×2, etc.) — resize handles show dot indicators on hover
 - Maximize a single pane to full size
 - Drag-and-drop panes to reorder
 - Each pane shows the agent name and MCP status overlay
+- Rename sessions inline — a brief "Saved" confirmation appears after renaming
 - **Quick Action Bar** — hover over an active agent session to reveal floating action buttons (Commit, Fix Errors, Summarize, etc.) that send one-click prompts to the agent. Configure actions in Settings > Prompts.
 - Terminal output is buffered so you can switch views and come back without losing output
 
@@ -158,6 +159,7 @@ Press **Ctrl+K** (or **Cmd+K** on macOS) to open the command palette. It provide
 - **Go to Sessions** — Switch to the session grid
 - **Go to GitHub** — Switch to the GitHub view
 - **Go to Review** — Switch to the review/diff view
+- **Go to Settings** — Open the settings page (also available via **Ctrl+,**)
 
 ### Projects
 
@@ -179,18 +181,33 @@ All active sessions are listed. Select one to focus its pane in the session grid
 
 The palette shows your **recent commands** when the search field is empty. Use the arrow keys to navigate and Enter to select.
 
+## Status Bar
+
+A thin bar at the bottom of the app window provides at-a-glance system information:
+
+- **MCP Status** — Shows the MCP server port. Click to copy the sidecar binary path.
+- **GitHub Auth** — Shows authentication status. Warning icons appear for missing auth or insufficient token scopes.
+- **Agent Usage** — Displays the top utilization percentage across all agents.
+- **Keyboard Shortcuts** — Context-sensitive hints for the current view (e.g., Ctrl+K for command palette, Ctrl+, for settings).
+- **App Version** — Current Faber version number.
+
 ## Settings
 
-Open settings from the gear icon in the sidebar. Settings are organized into tabs:
+Open settings with **Ctrl+,** (or **Cmd+,** on macOS), the gear icon in the sidebar, the status bar settings button, or from the command palette. Settings open as a dedicated full-screen view with a navigation sidebar on the left and content area on the right. Press **Escape** to close and return to your previous view.
+
+Settings are organized into **App** (global) and **Project** (per-project) sections:
+
+### App Settings
 
-### General
+#### General
 
 - **Color Mode** — Switch between Dark and Light themes
 - **Glass Effect** — Toggle the translucent glass UI style (not available on macOS)
 - **Show Project Icons** — Show or hide project icons in the sidebar
+- **Notifications** — Master toggle plus per-event toggles (Session Complete, Session Error, Input Needed). Clicking a notification takes you directly to the relevant session.
 - **Updates** — Check for app updates, enable auto-checking, and set the check frequency (hourly to daily). An advanced option lets you point to a custom update endpoint.
 
-### Terminal
+#### Terminal
 
 - **Default Shell** — Choose which shell to use for sessions (system default or a specific installed shell)
 - **Font Family** — Pick a terminal font from embedded fonts (JetBrains Mono), installed Nerd Fonts, or system fonts
@@ -199,16 +216,7 @@ Open settings from the gear icon in the sidebar. Settings are organized into tab
 - **Line Height** — Adjust line spacing (1.0–2.0)
 - **Reset to Defaults** — Restore all terminal settings to their defaults
 
-### Notifications
-
-- **Enable Notifications** — Master toggle for all OS notifications
-- **Session Complete** — Notify when an agent finishes its work
-- **Session Error** — Notify when an agent encounters an error
-- **Input Needed** — Notify when an agent is waiting for your input
-
-Clicking a notification takes you directly to the relevant session.
-
-### Agents
+#### Agents
 
 - **Default Agent** — Choose which AI agent to use by default (Claude Code, Codex CLI, Gemini CLI, OpenCode, or Cursor)
 - **Per-agent settings** (for installed agents):
@@ -216,7 +224,7 @@ Clicking a notification takes you directly to the relevant session.
   - **Custom Flags** — Add extra CLI flags to the agent command
   - **Command Preview** — See the exact command that will be executed
 
-### Prompts
+#### Prompts
 
 Manage prompt templates and quick actions:
 
@@ -224,15 +232,27 @@ Manage prompt templates and quick actions:
 - **Quick Actions** — Action buttons that appear on active session panes when you hover over them. Click a quick action to send the prompt directly to the agent. Built-in actions include "Commit", "Fix Errors", and "Summarize". You can add, edit, and delete custom actions with configurable labels, icons, and prompts.
 - **Reset to Defaults** — Restore all templates and actions to their built-in defaults.
 
-### Projects
+### Project Settings
 
-Per-project configuration:
+#### Project
 
 - **Project Icon** — Set an SVG icon for the project
 - **Tab Color** — Choose a color for the project's sidebar tab
 - **Default Agent / Model** — Override the global default for this project
-- **Branch Naming Pattern** — Customize the worktree branch format using `{{task_id}}` and `{{task_slug}}` variables
-- **Instruction File** — Point to a custom instruction file (relative to project root) for agent system prompts
+- **Default Transport** — Choose PTY (terminal) or ACP (chat) as the default session transport
 - **Priorities** — Define custom priority levels for the project. Each priority has an ID (stored in task files), a display label, a color (from the ThemeColor palette), and a sort order. Add, remove, and reorder priorities as needed. Defaults to P0/P1/P2 for new projects.
 - **GitHub Sync** — Configure automatic syncing between task statuses and GitHub issues/PRs (see the [GitHub Workflow](github_workflow) guide for details)
 - **Delete Project** — Remove the project from Faber (does not delete files on disk)
+
+#### Git & Worktrees
+
+- **Branch Naming Pattern** — Customize the worktree branch format using `{{task_id}}` and `{{task_slug}}` variables
+- **Instruction File** — Point to a custom instruction file (relative to project root) for agent system prompts
+
+#### ACP Permissions
+
+See the [ACP Permissions](acp_permissions) guide for details on configuring permission rules, trust mode, and timeout policies.
+
+#### GitHub
+
+GitHub CLI authentication status and configuration. See the [GitHub Workflow](github_workflow) guide for details.
diff --git a/src-tauri/src/agent/registry.rs b/src-tauri/src/agent/registry.rs
index bd4d672..c8b3993 100644
--- a/src-tauri/src/agent/registry.rs
+++ b/src-tauri/src/agent/registry.rs
@@ -32,29 +32,75 @@ fn get_global_npm_versions() -> HashMap<String, String> {
     if let Ok(guard) = NPM_VERSION_CACHE.lock() {
         if let Some(ref entry) = *guard {
             if entry.fetched_at.elapsed() < NPM_CACHE_TTL {
+                tracing::debug!(
+                    age_secs = entry.fetched_at.elapsed().as_secs(),
+                    count = entry.versions.len(),
+                    "npm version cache hit"
+                );
                 return entry.versions.clone();
             }
         }
     }
 
+    tracing::debug!("npm version cache miss — querying npm list -g");
+
     let mut versions = HashMap::new();
 
-    let output = crate::cmd_no_window(if cfg!(windows) { "npm.cmd" } else { "npm" })
+    let npm_cmd = if cfg!(windows) { "npm.cmd" } else { "npm" };
+    let output = crate::cmd_no_window(npm_cmd)
         .args(["list", "-g", "--json", "--depth=0"])
         .stdout(std::process::Stdio::piped())
         .stderr(std::process::Stdio::null())
         .output();
 
-    if let Ok(output) = output {
-        if let Ok(json) = serde_json::from_slice::<serde_json::Value>(&output.stdout) {
-            if let Some(deps) = json.get("dependencies").and_then(|d| d.as_object()) {
-                for (pkg_name, pkg_info) in deps {
-                    if let Some(ver) = pkg_info.get("version").and_then(|v| v.as_str()) {
-                        versions.insert(pkg_name.clone(), ver.to_string());
+    match output {
+        Ok(ref result) if result.status.success() => {
+            match serde_json::from_slice::<serde_json::Value>(&result.stdout) {
+                Ok(json) => {
+                    if let Some(deps) = json.get("dependencies").and_then(|d| d.as_object()) {
+                        for (pkg_name, pkg_info) in deps {
+                            if let Some(ver) = pkg_info.get("version").and_then(|v| v.as_str()) {
+                                versions.insert(pkg_name.clone(), ver.to_string());
+                            }
+                        }
+                    }
+                    tracing::debug!(count = versions.len(), "Parsed global npm packages");
+                }
+                Err(e) => {
+                    tracing::warn!(%e, "Failed to parse npm list JSON output");
+                }
+            }
+        }
+        Ok(ref result) => {
+            let stderr = String::from_utf8_lossy(&result.stderr);
+            tracing::warn!(
+                exit_code = ?result.status.code(),
+                stderr = %stderr.trim(),
+                "npm list -g exited with non-zero status"
+            );
+            // npm list returns exit code 1 when there are peer dep warnings
+            // but still outputs valid JSON — try parsing anyway
+            if let Ok(json) = serde_json::from_slice::<serde_json::Value>(&result.stdout) {
+                if let Some(deps) = json.get("dependencies").and_then(|d| d.as_object()) {
+                    for (pkg_name, pkg_info) in deps {
+                        if let Some(ver) = pkg_info.get("version").and_then(|v| v.as_str()) {
+                            versions.insert(pkg_name.clone(), ver.to_string());
+                        }
                     }
                 }
+                tracing::debug!(
+                    count = versions.len(),
+                    "Parsed global npm packages from non-zero exit output"
+                );
             }
         }
+        Err(e) => {
+            tracing::warn!(
+                error = %e,
+                command = %npm_cmd,
+                "Failed to run npm list -g — npm may not be installed"
+            );
+        }
     }
 
     // Update cache
@@ -72,14 +118,47 @@ fn get_global_npm_versions() -> HashMap<String, String> {
 /// Returns `true` if the registry version is strictly newer.
 fn is_update_available(installed_version: &str, registry_version: &str) -> bool {
     // Try parsing as semver
-    if let (Ok(installed), Ok(registry)) = (
+    match (
         semver::Version::parse(installed_version),
         semver::Version::parse(registry_version),
     ) {
-        return registry > installed;
+        (Ok(installed), Ok(registry)) => {
+            let has_update = registry > installed;
+            tracing::debug!(
+                %installed_version,
+                %registry_version,
+                has_update,
+                "Semver version comparison"
+            );
+            has_update
+        }
+        (installed_result, registry_result) => {
+            // Log parse failures for diagnostics
+            if let Err(ref e) = installed_result {
+                tracing::debug!(
+                    version = %installed_version,
+                    error = %e,
+                    "Failed to parse installed version as semver"
+                );
+            }
+            if let Err(ref e) = registry_result {
+                tracing::debug!(
+                    version = %registry_version,
+                    error = %e,
+                    "Failed to parse registry version as semver"
+                );
+            }
+            // Fallback: simple string comparison — only flag if they differ
+            let has_update = installed_version != registry_version;
+            tracing::debug!(
+                %installed_version,
+                %registry_version,
+                has_update,
+                "Fallback string version comparison"
+            );
+            has_update
+        }
     }
-    // Fallback: simple string comparison — only flag if they differ
-    installed_version != registry_version
 }
 
 // ── Constants ──
@@ -228,6 +307,24 @@ fn registry_id_to_faber() -> HashMap<&'static str, &'static str> {
 
 // ── Public API ──
 
+/// Invalidate the npm version cache so the next `fetch_registry` call re-queries
+/// globally installed packages.  Called after an adapter install/update.
+pub fn invalidate_npm_cache() {
+    if let Ok(mut guard) = NPM_VERSION_CACHE.lock() {
+        *guard = None;
+        tracing::debug!("NPM version cache invalidated");
+    }
+}
+
+/// Invalidate the registry cache so the next `fetch_registry` call re-fetches
+/// from the CDN and re-checks installed versions.
+pub fn invalidate_registry_cache() {
+    if let Ok(mut guard) = REGISTRY_CACHE.lock() {
+        *guard = None;
+        tracing::debug!("ACP registry cache invalidated");
+    }
+}
+
 /// Fetch the ACP registry, filter to Faber-supported agents, and enrich
 /// with local installation status. Uses a 1-hour in-memory cache.
 pub async fn fetch_registry(force_refresh: bool) -> Result<Vec<AcpRegistryInfo>, String> {
@@ -308,10 +405,24 @@ pub async fn fetch_registry(force_refresh: bool) -> Result<Vec<AcpRegistryInfo>,
                 let npm_versions = get_global_npm_versions();
                 if let Some(installed_ver) = npm_versions.get(local_pkg.as_str()) {
                     let has_update = is_update_available(installed_ver, &agent.version);
+                    tracing::info!(
+                        agent = %faber_name,
+                        package = %local_pkg,
+                        installed = %installed_ver,
+                        registry = %agent.version,
+                        update_available = has_update,
+                        "Version check for ACP adapter"
+                    );
                     (Some(installed_ver.clone()), has_update)
                 } else {
                     // Package is installed (detected by file existence) but npm doesn't report it.
                     // Don't flag as update available — could be a non-npm install method.
+                    tracing::info!(
+                        agent = %faber_name,
+                        package = %local_pkg,
+                        registry = %agent.version,
+                        "ACP adapter detected but not found in npm list — skipping version check"
+                    );
                     (None, false)
                 }
             } else {
diff --git a/src-tauri/src/commands/agents.rs b/src-tauri/src/commands/agents.rs
index 94c4067..5838111 100644
--- a/src-tauri/src/commands/agents.rs
+++ b/src-tauri/src/commands/agents.rs
@@ -15,6 +15,7 @@ pub fn list_agents() -> Vec<AgentInfo> {
 pub async fn install_acp_adapter(
     app: AppHandle,
     agent_name: String,
+    target_version: Option<String>,
 ) -> Result<Vec<AgentInfo>, AppError> {
     let adapter = agent::get_adapter(&agent_name)
         .ok_or_else(|| AppError::NotFound(format!("Agent {agent_name}")))?;
@@ -26,7 +27,7 @@ pub async fn install_acp_adapter(
         )));
     }
 
-    let install_cmd = adapter.acp_install_command().ok_or_else(|| {
+    let base_install_cmd = adapter.acp_install_command().ok_or_else(|| {
         AppError::Validation(format!(
             "{} has native ACP support — no adapter to install",
             adapter.display_name()
@@ -39,10 +40,23 @@ pub async fn install_acp_adapter(
         .unwrap_or("unknown")
         .to_string();
 
+    // When a target version is specified (update), pin the install to that exact version.
+    // e.g. "npm install -g @zed-industries/claude-agent-acp" → "npm install -g @zed-industries/claude-agent-acp@0.24.1"
+    let install_cmd = if let Some(ref version) = target_version {
+        if !package.is_empty() && package != "unknown" {
+            base_install_cmd.replace(&package, &format!("{package}@{version}"))
+        } else {
+            base_install_cmd.to_string()
+        }
+    } else {
+        base_install_cmd.to_string()
+    };
+
     tracing::info!(
         agent = %agent_name,
         command = %install_cmd,
         package = %package,
+        target_version = ?target_version,
         "Starting ACP adapter installation"
     );
 
@@ -56,17 +70,23 @@ pub async fn install_acp_adapter(
         }),
     );
 
-    // Run the install command
-    let output = if cfg!(windows) {
-        tokio::process::Command::new("cmd")
-            .args(["/C", install_cmd])
-            .output()
-            .await
-    } else {
-        tokio::process::Command::new("sh")
-            .args(["-c", install_cmd])
-            .output()
-            .await
+    // Run the install command (hide console window on Windows)
+    let output = {
+        let mut cmd = if cfg!(windows) {
+            let mut c = tokio::process::Command::new("cmd");
+            c.args(["/C", &install_cmd]);
+            c
+        } else {
+            let mut c = tokio::process::Command::new("sh");
+            c.args(["-c", &install_cmd]);
+            c
+        };
+        #[cfg(windows)]
+        {
+            const CREATE_NO_WINDOW: u32 = 0x08000000;
+            cmd.creation_flags(CREATE_NO_WINDOW);
+        }
+        cmd.output().await
     };
 
     match output {
@@ -79,6 +99,10 @@ pub async fn install_acp_adapter(
                 "ACP adapter installed successfully"
             );
 
+            // Invalidate caches so the next registry fetch picks up the new version
+            agent::registry::invalidate_npm_cache();
+            agent::registry::invalidate_registry_cache();
+
             // Re-detect all agents to pick up the new adapter
             let agents = agent::list_agent_info();
 
@@ -105,18 +129,21 @@ pub async fn install_acp_adapter(
                 "ACP adapter installation failed"
             );
 
+            // Extract a clean, user-friendly message from npm's verbose stderr.
+            // Prioritise "npm error notarget ..." lines, then any "npm error ..." line,
+            // falling back to a generic message.  Full output is already in the logs.
+            let user_message = extract_npm_error(&stderr)
+                .unwrap_or_else(|| format!("Installation failed (exit code {}). Check logs for details.", result.status.code().unwrap_or(-1)));
+
             let _ = app.emit(
                 "acp-adapter-install-progress",
                 serde_json::json!({
                     "agent_name": agent_name,
                     "status": "failed",
-                    "message": format!("Failed to install ACP adapter: {}", stderr.trim()),
+                    "message": user_message,
                 }),
             );
-            Err(AppError::Io(format!(
-                "ACP adapter installation failed: {}",
-                stderr.trim()
-            )))
+            Err(AppError::Io(user_message))
         }
         Err(e) => {
             let msg = if e.kind() == std::io::ErrorKind::NotFound {
@@ -210,3 +237,47 @@ pub fn delete_agent_config(
     db::agent_configs::delete(&conn, &scope, scope_id.as_deref(), &agent_name)
         .map_err(AppError::from)
 }
+
+// ── Helpers ──
+
+/// Extract a clean, user-facing error message from npm's stderr output.
+///
+/// npm stderr contains warnings, error codes, and multi-line explanations.
+/// This extracts the most relevant line for display in the UI — the full
+/// output is already captured in the structured log.
+fn extract_npm_error(stderr: &str) -> Option<String> {
+    let mut best: Option<&str> = None;
+
+    for line in stderr.lines() {
+        let trimmed = line.trim();
+
+        // "npm error notarget No matching version found for ..." — most specific
+        if trimmed.starts_with("npm error notarget") || trimmed.starts_with("npm ERR! notarget") {
+            let msg = trimmed
+                .trim_start_matches("npm error notarget")
+                .trim_start_matches("npm ERR! notarget")
+                .trim();
+            if !msg.is_empty() {
+                // Return the first meaningful notarget line
+                return Some(msg.to_string());
+            }
+        }
+
+        // Any "npm error <text>" / "npm ERR! <text>" that isn't a code/log path
+        if (trimmed.starts_with("npm error") || trimmed.starts_with("npm ERR!"))
+            && !trimmed.contains("A complete log of this run")
+            && !trimmed.starts_with("npm error code")
+            && !trimmed.starts_with("npm ERR! code")
+        {
+            let msg = trimmed
+                .trim_start_matches("npm error")
+                .trim_start_matches("npm ERR!")
+                .trim();
+            if !msg.is_empty() && best.is_none() {
+                best = Some(msg);
+            }
+        }
+    }
+
+    best.map(|s| s.to_string())
+}
diff --git a/src-tauri/src/commands/files.rs b/src-tauri/src/commands/files.rs
index 3b7d51c..9535a24 100644
--- a/src-tauri/src/commands/files.rs
+++ b/src-tauri/src/commands/files.rs
@@ -1,5 +1,6 @@
 use crate::db::models::FileEntry;
 use crate::error::AppError;
+use serde::Serialize;
 use std::path::Path;
 
 /// Open a file using the OS default application.
@@ -43,6 +44,199 @@ pub async fn open_file_in_os(path: String) -> Result<(), AppError> {
     Ok(())
 }
 
+#[derive(Debug, Clone, Serialize)]
+pub struct EditorInfo {
+    pub id: String,
+    pub label: String,
+    pub command: String,
+}
+
+/// Known editors to probe for in PATH.
+const KNOWN_EDITORS: &[(&str, &str, &str)] = &[
+    ("vscode", "VS Code", "code"),
+    ("cursor", "Cursor", "cursor"),
+    ("zed", "Zed", "zed"),
+    ("windsurf", "Windsurf", "windsurf"),
+    ("fleet", "Fleet", "fleet"),
+    ("sublime", "Sublime Text", "subl"),
+    ("vim", "Vim", "vim"),
+    ("neovim", "Neovim", "nvim"),
+];
+
+/// Check if a command is available on PATH.
+fn command_exists(cmd: &str) -> bool {
+    #[cfg(target_os = "windows")]
+    {
+        // On Windows, check for cmd, cmd.exe, and cmd.cmd variants
+        use std::process::Command;
+        use std::os::windows::process::CommandExt;
+        const CREATE_NO_WINDOW: u32 = 0x08000000;
+        Command::new("where")
+            .arg(cmd)
+            .creation_flags(CREATE_NO_WINDOW)
+            .output()
+            .map(|o| o.status.success())
+            .unwrap_or(false)
+    }
+    #[cfg(not(target_os = "windows"))]
+    {
+        use std::process::Command;
+        Command::new("which")
+            .arg(cmd)
+            .output()
+            .map(|o| o.status.success())
+            .unwrap_or(false)
+    }
+}
+
+/// Detect which code editors are available on the system PATH.
+#[tauri::command]
+pub async fn detect_editors() -> Result<Vec<EditorInfo>, AppError> {
+    let editors: Vec<EditorInfo> = KNOWN_EDITORS
+        .iter()
+        .filter(|(_, _, cmd)| command_exists(cmd))
+        .map(|(id, label, cmd)| EditorInfo {
+            id: id.to_string(),
+            label: label.to_string(),
+            command: cmd.to_string(),
+        })
+        .collect();
+
+    Ok(editors)
+}
+
+/// Open a file or directory in a specific editor.
+#[tauri::command]
+pub async fn open_in_editor(path: String, editor_id: String) -> Result<(), AppError> {
+    let file_path = Path::new(&path);
+    if !file_path.exists() {
+        return Err(AppError::Validation(format!(
+            "Path does not exist: {}",
+            path
+        )));
+    }
+
+    let cmd = KNOWN_EDITORS
+        .iter()
+        .find(|(id, _, _)| *id == editor_id.as_str())
+        .map(|(_, _, cmd)| *cmd)
+        .ok_or_else(|| AppError::Validation(format!("Unknown editor: {}", editor_id)))?;
+
+    #[cfg(target_os = "windows")]
+    {
+        use std::os::windows::process::CommandExt;
+        const CREATE_NO_WINDOW: u32 = 0x08000000;
+        std::process::Command::new("cmd")
+            .args(["/c", cmd, &path])
+            .creation_flags(CREATE_NO_WINDOW)
+            .spawn()
+            .map_err(|e| AppError::Io(format!("Failed to open in editor: {}", e)))?;
+    }
+
+    #[cfg(not(target_os = "windows"))]
+    {
+        std::process::Command::new(cmd)
+            .arg(&path)
+            .spawn()
+            .map_err(|e| AppError::Io(format!("Failed to open in editor: {}", e)))?;
+    }
+
+    Ok(())
+}
+
+/// Directories to skip during file listing/search.
+const IGNORED_DIRS: &[&str] = &[
+    "node_modules",
+    "target",
+    "__pycache__",
+    ".git",
+    "dist",
+    "build",
+    ".next",
+    ".nuxt",
+    ".output",
+    "out",
+    ".turbo",
+    ".cache",
+];
+
+/// Check if a directory name should be skipped.
+fn should_skip_dir(name: &str) -> bool {
+    IGNORED_DIRS.contains(&name)
+}
+
+/// Recursively index all files in a project directory.
+/// Returns a flat list of all FileEntry items, sorted alphabetically by path.
+/// Skips hidden files/dirs and common noisy directories.
+#[tauri::command]
+pub async fn index_project_files(
+    project_root: String,
+) -> Result<Vec<FileEntry>, AppError> {
+    let root = Path::new(&project_root);
+    let canonical_root = root
+        .canonicalize()
+        .map_err(|e| AppError::Io(format!("Cannot resolve project root '{}': {}", project_root, e)))?;
+
+    let mut results = Vec::new();
+
+    fn walk(dir: &Path, canonical_root: &Path, results: &mut Vec<FileEntry>) {
+        let read_dir = match std::fs::read_dir(dir) {
+            Ok(rd) => rd,
+            Err(_) => return,
+        };
+
+        for entry in read_dir {
+            let entry = match entry {
+                Ok(e) => e,
+                Err(_) => continue,
+            };
+            let metadata = match entry.metadata() {
+                Ok(m) => m,
+                Err(_) => continue,
+            };
+            let file_name = entry.file_name().to_string_lossy().to_string();
+
+            if file_name.starts_with('.') {
+                continue;
+            }
+
+            if metadata.is_dir() {
+                if should_skip_dir(&file_name) {
+                    continue;
+                }
+                walk(&entry.path(), canonical_root, results);
+            } else {
+                let rel_path = entry
+                    .path()
+                    .strip_prefix(canonical_root)
+                    .unwrap_or(&entry.path())
+                    .to_string_lossy()
+                    .replace('\\', "/");
+
+                let extension = entry
+                    .path()
+                    .extension()
+                    .map(|e| e.to_string_lossy().to_string());
+
+                results.push(FileEntry {
+                    name: file_name,
+                    path: rel_path,
+                    is_dir: false,
+                    size: Some(metadata.len()),
+                    extension,
+                });
+            }
+        }
+    }
+
+    walk(&canonical_root, &canonical_root, &mut results);
+
+    // Sort alphabetically by path
+    results.sort_by(|a, b| a.path.to_lowercase().cmp(&b.path.to_lowercase()));
+
+    Ok(results)
+}
+
 /// List entries in a directory, sorted: directories first, then alphabetically.
 /// The `path` must be an absolute path. Returns relative paths from `project_root`.
 #[tauri::command]
@@ -84,12 +278,8 @@ pub async fn list_directory(
         }
 
         // Skip common noisy directories
-        if metadata.is_dir() {
-            match file_name.as_str() {
-                "node_modules" | "target" | "__pycache__" | ".git" | "dist" | "build"
-                | ".next" | ".nuxt" | ".output" | "out" | ".turbo" | ".cache" => continue,
-                _ => {}
-            }
+        if metadata.is_dir() && should_skip_dir(&file_name) {
+            continue;
         }
 
         let is_dir = metadata.is_dir();
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 1cfc725..0516f2c 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -337,7 +337,10 @@ pub fn run() {
             commands::continuous::get_continuous_mode_status,
             commands::usage::get_agent_usage,
             commands::files::list_directory,
+            commands::files::index_project_files,
             commands::files::open_file_in_os,
+            commands::files::detect_editors,
+            commands::files::open_in_editor,
             commands::plugins::list_plugins,
             commands::plugins::get_plugin_readme,
             commands::plugins::install_plugin,
diff --git a/src/components/Chat/AgentTurnBlock.tsx b/src/components/Chat/AgentTurnBlock.tsx
index 09a6291..2a01274 100644
--- a/src/components/Chat/AgentTurnBlock.tsx
+++ b/src/components/Chat/AgentTurnBlock.tsx
@@ -949,7 +949,7 @@ export default React.memo(function AgentTurnBlock({
       </MessageContent>
 
       {hasResponse && (
-        <MessageActions className="opacity-0 group-hover:opacity-100 transition-opacity ml-auto">
+        <MessageActions className="opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity ml-auto">
           <MessageAction tooltip="Copy message" onClick={handleCopy}>
             {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
           </MessageAction>
diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx
index 5e92ca6..0bbd2c9 100644
--- a/src/components/Chat/ChatMessage.tsx
+++ b/src/components/Chat/ChatMessage.tsx
@@ -60,7 +60,7 @@ export default React.memo(function ChatMessage({
         <div className="flex items-center gap-1 ml-auto">
           {/* Edit & resend — inline beside the bubble */}
           {onEditResend && (
-            <div className="opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+            <div className="opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity shrink-0">
               <MessageAction
                 tooltip="Edit & resend"
                 onClick={handleEditResend}
@@ -130,7 +130,7 @@ export default React.memo(function ChatMessage({
 
       {/* Actions — hover-visible */}
       {message.text.length > 0 && (
-        <MessageActions className="opacity-0 group-hover:opacity-100 transition-opacity ml-auto">
+        <MessageActions className="opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity ml-auto">
           <MessageAction
             tooltip="Copy message"
             onClick={handleCopy}
diff --git a/src/components/Chat/PermissionDialog.tsx b/src/components/Chat/PermissionDialog.tsx
index c7a1f30..c16b99c 100644
--- a/src/components/Chat/PermissionDialog.tsx
+++ b/src/components/Chat/PermissionDialog.tsx
@@ -147,13 +147,13 @@ const PermissionCard = React.memo(function PermissionCard({
       } bg-card`}
     >
       {/* Timeout progress bar — prominent strip at top */}
-      <div className="absolute top-0 inset-x-0 h-[3px] bg-border/20">
+      <div className="absolute top-0 inset-x-0 h-1 bg-border/20">
         <div
           className={`h-full transition-all duration-1000 linear ${
             isExpired
               ? "bg-muted/40"
               : isUrgent
-                ? "bg-destructive"
+                ? "bg-destructive animate-pulse"
                 : "bg-primary/60"
           }`}
           style={{ width: `${progress}%` }}
diff --git a/src/components/CommandPalette/useCommands.ts b/src/components/CommandPalette/useCommands.ts
index f54a6ba..a4afe77 100644
--- a/src/components/CommandPalette/useCommands.ts
+++ b/src/components/CommandPalette/useCommands.ts
@@ -9,6 +9,7 @@ import {
   Monitor,
   PanelRight,
   Blocks,
+  Settings,
 } from "lucide-react";
 import { useAppStore } from "../../store/appStore";
 import type { Command } from "./commandRegistry";
@@ -43,6 +44,7 @@ export function useCommands(onExecuted: () => void): Command[] {
     nav("github", "Go to GitHub", Github, "github");
     nav("skills-rules", "Go to Extensions", Blocks, "skills-rules");
     nav("review", "Go to Review", GitCompare, "review");
+    nav("settings", "Go to Settings", Settings, "settings");
 
     // ── Projects ──
     for (const p of projects) {
diff --git a/src/components/Dashboard/ArchivedTaskList.tsx b/src/components/Dashboard/ArchivedTaskList.tsx
index 85db3d7..3bc81f1 100644
--- a/src/components/Dashboard/ArchivedTaskList.tsx
+++ b/src/components/Dashboard/ArchivedTaskList.tsx
@@ -98,7 +98,7 @@ export default function ArchivedTaskList({
               </span>
 
               {/* Actions — visible on hover */}
-              <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+              <div className="flex items-center gap-0.5 opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity shrink-0">
                 <Button
                   variant="ghost"
                   size="icon-xs"
diff --git a/src/components/Dashboard/DependencyGraph.tsx b/src/components/Dashboard/DependencyGraph.tsx
index 6d69b0c..322401c 100644
--- a/src/components/Dashboard/DependencyGraph.tsx
+++ b/src/components/Dashboard/DependencyGraph.tsx
@@ -274,7 +274,7 @@ function TreeRow({
         </div>
 
         {/* Action buttons */}
-        <div className="w-14 shrink-0 flex items-center justify-end gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+        <div className="w-14 shrink-0 flex items-center justify-end gap-0.5 opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity">
           {!isActive && (task.status === "backlog" || task.status === "ready") && onResearchSession && (
             <Button
               variant="ghost"
diff --git a/src/components/Dashboard/TaskCard.tsx b/src/components/Dashboard/TaskCard.tsx
index 7e0ec79..f720f3a 100644
--- a/src/components/Dashboard/TaskCard.tsx
+++ b/src/components/Dashboard/TaskCard.tsx
@@ -200,7 +200,7 @@ export default React.memo(function TaskCard({ task, linkedSession, onClick, onSt
         <div className="flex-1" />
         {/* Action buttons — inline, visible on hover */}
         {!isDragOverlay && !isSessionActive && (
-          <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+          <div className="flex items-center gap-0.5 opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity">
             {task.status === "in-review" && linkedSession && onViewSession && (
               <Button
                 variant="ghost"
diff --git a/src/components/Files/FileContextMenu.tsx b/src/components/Files/FileContextMenu.tsx
new file mode 100644
index 0000000..2b037ca
--- /dev/null
+++ b/src/components/Files/FileContextMenu.tsx
@@ -0,0 +1,205 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import {
+  ChevronRightIcon,
+  Copy,
+  ExternalLink,
+  FileCode2,
+  FolderOpen,
+} from "lucide-react";
+
+// ── Shared menu styles (same as TaskCardContextMenu) ──
+
+const menuItemClass =
+  "flex items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none cursor-default data-disabled:pointer-events-none data-disabled:opacity-50 focus:bg-accent focus:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+const subTriggerClass =
+  "flex items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none cursor-default focus:bg-accent focus:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+const popupClass =
+  "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 bg-popover text-popover-foreground min-w-[160px] rounded-md p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden";
+
+// ── Types ──
+
+interface EditorInfo {
+  id: string;
+  label: string;
+  command: string;
+}
+
+export interface FileContextMenuRenderProps {
+  onContextMenu: (e: React.MouseEvent) => void;
+}
+
+interface FileContextMenuProps {
+  fullPath: string;
+  relativePath: string;
+  isDir: boolean;
+  children: (props: FileContextMenuRenderProps) => React.ReactNode;
+}
+
+export default function FileContextMenu({
+  fullPath,
+  relativePath,
+  isDir,
+  children,
+}: FileContextMenuProps) {
+  const [open, setOpen] = useState(false);
+  const positionRef = useRef({ x: 0, y: 0 });
+  const [editors, setEditors] = useState<EditorInfo[]>([]);
+  const editorsLoaded = useRef(false);
+
+  // Load available editors once
+  useEffect(() => {
+    if (editorsLoaded.current) return;
+    editorsLoaded.current = true;
+    invoke<EditorInfo[]>("detect_editors")
+      .then(setEditors)
+      .catch(() => setEditors([]));
+  }, []);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    positionRef.current = { x: e.clientX, y: e.clientY };
+    setOpen(true);
+  }, []);
+
+  // Close on scroll
+  useEffect(() => {
+    if (!open) return;
+    const handleScroll = () => setOpen(false);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => window.removeEventListener("scroll", handleScroll, true);
+  }, [open]);
+
+  const handleCopyPath = useCallback(() => {
+    navigator.clipboard.writeText(relativePath);
+    setOpen(false);
+  }, [relativePath]);
+
+  const handleCopyAbsolutePath = useCallback(() => {
+    navigator.clipboard.writeText(fullPath);
+    setOpen(false);
+  }, [fullPath]);
+
+  const handleRevealInExplorer = useCallback(() => {
+    // For files, reveal the parent dir; for dirs, reveal the dir itself
+    invoke("open_file_in_os", { path: fullPath });
+    setOpen(false);
+  }, [fullPath]);
+
+  const handleOpenInEditor = useCallback(
+    (editorId: string) => {
+      invoke("open_in_editor", { path: fullPath, editorId });
+      setOpen(false);
+    },
+    [fullPath],
+  );
+
+  return (
+    <MenuPrimitive.Root open={open} onOpenChange={setOpen}>
+      <MenuPrimitive.Trigger
+        className="hidden"
+        style={{ position: "fixed", left: 0, top: 0 }}
+      />
+
+      {children({ onContextMenu: handleContextMenu })}
+
+      <MenuPrimitive.Portal>
+        <MenuPrimitive.Positioner
+          side="bottom"
+          align="start"
+          sideOffset={0}
+          anchor={{
+            getBoundingClientRect: () => ({
+              x: positionRef.current.x,
+              y: positionRef.current.y,
+              width: 0,
+              height: 0,
+              top: positionRef.current.y,
+              right: positionRef.current.x,
+              bottom: positionRef.current.y,
+              left: positionRef.current.x,
+              toJSON: () => {},
+            }),
+          }}
+        >
+          <MenuPrimitive.Popup className={popupClass}>
+            {/* Open in Editor — single item or submenu */}
+            {editors.length === 1 && (
+              <MenuPrimitive.Item
+                className={menuItemClass}
+                onClick={() => handleOpenInEditor(editors[0].id)}
+              >
+                <FileCode2 size={14} />
+                Open in {editors[0].label}
+              </MenuPrimitive.Item>
+            )}
+            {editors.length > 1 && (
+              <MenuPrimitive.SubmenuRoot>
+                <MenuPrimitive.SubmenuTrigger className={subTriggerClass}>
+                  <FileCode2 size={14} />
+                  Open in Editor
+                  <ChevronRightIcon className="size-3.5 ml-auto" />
+                </MenuPrimitive.SubmenuTrigger>
+                <MenuPrimitive.Portal>
+                  <MenuPrimitive.Positioner className="isolate z-50 outline-none" side="right" align="start" sideOffset={2}>
+                    <MenuPrimitive.Popup className={popupClass}>
+                      {editors.map((editor) => (
+                        <MenuPrimitive.Item
+                          key={editor.id}
+                          className={menuItemClass}
+                          onClick={() => handleOpenInEditor(editor.id)}
+                        >
+                          {editor.label}
+                        </MenuPrimitive.Item>
+                      ))}
+                    </MenuPrimitive.Popup>
+                  </MenuPrimitive.Positioner>
+                </MenuPrimitive.Portal>
+              </MenuPrimitive.SubmenuRoot>
+            )}
+
+            {editors.length > 0 && (
+              <MenuPrimitive.Separator className="bg-border -mx-1 my-1 h-px" />
+            )}
+
+            {/* Reveal in Explorer */}
+            <MenuPrimitive.Item
+              className={menuItemClass}
+              onClick={handleRevealInExplorer}
+            >
+              {isDir ? (
+                <FolderOpen size={14} />
+              ) : (
+                <ExternalLink size={14} />
+              )}
+              {isDir ? "Open in File Manager" : "Reveal in File Manager"}
+            </MenuPrimitive.Item>
+
+            <MenuPrimitive.Separator className="my-1 h-px bg-border" />
+
+            {/* Copy path options */}
+            <MenuPrimitive.Item
+              className={menuItemClass}
+              onClick={handleCopyPath}
+            >
+              <Copy size={14} />
+              Copy Relative Path
+            </MenuPrimitive.Item>
+
+            <MenuPrimitive.Item
+              className={menuItemClass}
+              onClick={handleCopyAbsolutePath}
+            >
+              <Copy size={14} />
+              Copy Absolute Path
+            </MenuPrimitive.Item>
+          </MenuPrimitive.Popup>
+        </MenuPrimitive.Positioner>
+      </MenuPrimitive.Portal>
+    </MenuPrimitive.Root>
+  );
+}
diff --git a/src/components/Files/FileTree.tsx b/src/components/Files/FileTree.tsx
index 63dbe5b..8ff5217 100644
--- a/src/components/Files/FileTree.tsx
+++ b/src/components/Files/FileTree.tsx
@@ -1,7 +1,7 @@
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { Loader2 } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import FileTreeItem from "./FileTreeItem";
 import type { ChangedFile, FileEntry } from "../../types";
@@ -9,6 +9,7 @@ import type { ChangedFile, FileEntry } from "../../types";
 interface FileTreeProps {
   projectPath: string;
   projectId: string;
+  filterText?: string;
 }
 
 /** Priority for propagating git status to parent directories. Higher = more important. */
@@ -51,7 +52,10 @@ function buildGitStatusMaps(
   return [fileMap, dirMap];
 }
 
-export default function FileTree({ projectPath, projectId }: FileTreeProps) {
+/** Max search results to show */
+const MAX_SEARCH_RESULTS = 100;
+
+export default function FileTree({ projectPath, projectId, filterText = "" }: FileTreeProps) {
   // Directory contents cache: path → entries
   const [dirCache, setDirCache] = useState<Record<string, FileEntry[]>>({});
   const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set());
@@ -64,6 +68,40 @@ export default function FileTree({ projectPath, projectId }: FileTreeProps) {
   const [gitDirStatus, setGitDirStatus] = useState<Record<string, string>>({});
   const prevProjectPath = useRef(projectPath);
 
+  // File index for search — preloaded flat list of all project files
+  const [fileIndex, setFileIndex] = useState<FileEntry[] | null>(null);
+  const [indexing, setIndexing] = useState(false);
+
+  const filter = filterText.trim().toLowerCase();
+  const isFiltering = filter.length > 0;
+
+  // Preload file index in the background after root directory loads
+  useEffect(() => {
+    setIndexing(true);
+    invoke<FileEntry[]>("index_project_files", { projectRoot: projectPath })
+      .then((files) => {
+        setFileIndex(files);
+        setIndexing(false);
+      })
+      .catch(() => {
+        setFileIndex([]);
+        setIndexing(false);
+      });
+  }, [projectPath]);
+
+  // Client-side filtered results from the preloaded index
+  const searchResults = useMemo(() => {
+    if (!isFiltering || !fileIndex) return null;
+    const results: FileEntry[] = [];
+    for (const entry of fileIndex) {
+      if (entry.name.toLowerCase().includes(filter)) {
+        results.push(entry);
+        if (results.length >= MAX_SEARCH_RESULTS) break;
+      }
+    }
+    return results;
+  }, [filter, isFiltering, fileIndex]);
+
   // Fetch git status for the project
   const fetchGitStatus = useCallback(async () => {
     try {
@@ -120,6 +158,7 @@ export default function FileTree({ projectPath, projectId }: FileTreeProps) {
       setSelectedPath(null);
       setGitFileStatus({});
       setGitDirStatus({});
+      setFileIndex(null);
       prevProjectPath.current = projectPath;
     }
     // Always load root
@@ -137,15 +176,19 @@ export default function FileTree({ projectPath, projectId }: FileTreeProps) {
     fetchGitStatus();
   }, [projectPath, fetchGitStatus]);
 
-  // Auto-refresh git status on mcp-files-changed events
+  // Auto-refresh git status and re-index on mcp-files-changed events
   useEffect(() => {
     const unlisten = listen("mcp-files-changed", () => {
       fetchGitStatus();
+      // Re-index when files change
+      invoke<FileEntry[]>("index_project_files", { projectRoot: projectPath })
+        .then(setFileIndex)
+        .catch(() => {});
     });
     return () => {
       unlisten.then((fn) => fn());
     };
-  }, [fetchGitStatus]);
+  }, [fetchGitStatus, projectPath]);
 
   const toggleDir = useCallback(
     (dirFullPath: string) => {
@@ -168,7 +211,7 @@ export default function FileTree({ projectPath, projectId }: FileTreeProps) {
     setSelectedPath((prev) => (prev === filePath ? null : filePath));
   }, []);
 
-  // Render a directory's entries recursively
+  // Render a directory's entries recursively (normal tree mode)
   const renderEntries = (
     parentPath: string,
     depth: number,
@@ -245,6 +288,52 @@ export default function FileTree({ projectPath, projectId }: FileTreeProps) {
     );
   }
 
+  // Search results mode — flat list filtered from preloaded index
+  if (isFiltering) {
+    // Index still loading
+    if (indexing || !fileIndex) {
+      return (
+        <div className="flex items-center gap-1.5 justify-center h-32 text-xs text-muted-foreground">
+          <Loader2 size={12} className="animate-spin" />
+          <span>Indexing project files…</span>
+        </div>
+      );
+    }
+
+    if (!searchResults || searchResults.length === 0) {
+      return (
+        <div className="flex items-center justify-center h-32">
+          <p className="text-xs text-muted-foreground">No matching files</p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="py-1">
+        {searchResults.map((entry) => {
+          const fullPath = projectPath + "/" + entry.path;
+          const gitStatus = gitFileStatus[entry.path];
+
+          return (
+            <FileTreeItem
+              key={fullPath}
+              entry={entry}
+              fullPath={fullPath}
+              depth={0}
+              isExpanded={false}
+              isSelected={selectedPath === fullPath}
+              gitStatus={gitStatus}
+              onToggle={() => {}}
+              onSelect={() => handleSelect(fullPath)}
+              showRelativePath
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Normal tree mode
   if (!dirCache[projectPath]) {
     return (
       <div className="flex items-center justify-center h-32">
diff --git a/src/components/Files/FileTreeItem.tsx b/src/components/Files/FileTreeItem.tsx
index fc1d449..a067dee 100644
--- a/src/components/Files/FileTreeItem.tsx
+++ b/src/components/Files/FileTreeItem.tsx
@@ -9,6 +9,7 @@ import React, { useCallback } from "react";
 
 import { getFileIcon } from "./fileIcons";
 import { useAppStore } from "../../store/appStore";
+import FileContextMenu from "./FileContextMenu";
 import type { FileEntry } from "../../types";
 
 interface FileTreeItemProps {
@@ -20,6 +21,8 @@ interface FileTreeItemProps {
   gitStatus?: string;
   onToggle: () => void;
   onSelect: () => void;
+  /** When true, show the relative path below the filename (used in search results). */
+  showRelativePath?: boolean;
 }
 
 /** Map git status to a Tailwind text color class for files. */
@@ -65,6 +68,7 @@ const FileTreeItem = React.memo(function FileTreeItem({
   gitStatus,
   onToggle,
   onSelect,
+  showRelativePath,
 }: FileTreeItemProps) {
   const FileIcon = getFileIcon(entry.extension);
   const addBackgroundTask = useAppStore((s) => s.addBackgroundTask);
@@ -92,58 +96,72 @@ const FileTreeItem = React.memo(function FileTreeItem({
   const nameColorClass = statusColor || "";
 
   return (
-    <div
-      onClick={handleClick}
-      className={`flex items-center gap-1.5 h-[26px] pr-2 text-xs cursor-pointer transition-colors ${
-        isSelected
-          ? "bg-accent text-foreground"
-          : "text-dim-foreground hover:bg-accent/50"
-      }`}
-      style={{ paddingLeft: `${depth * 16 + 8}px` }}
-      title={entry.is_dir ? entry.path : `Click to open ${entry.name}`}
+    <FileContextMenu
+      fullPath={fullPath}
+      relativePath={entry.path}
+      isDir={entry.is_dir}
     >
-      {entry.is_dir ? (
-        <>
-          <span className="shrink-0 w-3 flex items-center justify-center text-muted-foreground">
-            {isExpanded ? (
-              <ChevronDown size={12} />
-            ) : (
-              <ChevronRight size={12} />
+      {({ onContextMenu }) => (
+        <div
+          onClick={handleClick}
+          onContextMenu={onContextMenu}
+          className={`flex items-center gap-1.5 h-[26px] pr-2 text-xs cursor-pointer transition-colors ${
+            isSelected
+              ? "bg-accent text-foreground"
+              : "text-dim-foreground hover:bg-accent/50"
+          }`}
+          style={{ paddingLeft: `${depth * 16 + 8}px` }}
+          title={entry.is_dir ? entry.path : `Click to open ${entry.name}`}
+        >
+          {entry.is_dir ? (
+            <>
+              <span className="shrink-0 w-3 flex items-center justify-center text-muted-foreground">
+                {isExpanded ? (
+                  <ChevronDown size={12} />
+                ) : (
+                  <ChevronRight size={12} />
+                )}
+              </span>
+              <span className="shrink-0 text-muted-foreground">
+                {isExpanded ? <FolderOpen size={14} /> : <Folder size={14} />}
+              </span>
+            </>
+          ) : (
+            <>
+              <span className="shrink-0 w-3" />
+              <span className="shrink-0 text-muted-foreground">
+                <FileIcon size={14} />
+              </span>
+            </>
+          )}
+          <span className={`truncate min-w-0 flex-1 ${nameColorClass}`}>
+            {entry.name}
+            {showRelativePath && entry.path.includes("/") && (
+              <span className="ml-1.5 text-muted-foreground opacity-70">
+                {entry.path.slice(0, entry.path.lastIndexOf("/"))}
+              </span>
             )}
           </span>
-          <span className="shrink-0 text-muted-foreground">
-            {isExpanded ? <FolderOpen size={14} /> : <Folder size={14} />}
-          </span>
-        </>
-      ) : (
-        <>
-          <span className="shrink-0 w-3" />
-          <span className="shrink-0 text-muted-foreground">
-            <FileIcon size={14} />
-          </span>
-        </>
-      )}
-      <span className={`truncate min-w-0 flex-1 ${nameColorClass}`}>
-        {entry.name}
-      </span>
 
-      {/* Git status dot indicator for directories */}
-      {entry.is_dir && gitStatus && (
-        <span
-          className={`shrink-0 w-1.5 h-1.5 rounded-full ${
-            gitStatus === "added" || gitStatus === "untracked"
-              ? "bg-success"
-              : gitStatus === "modified"
-                ? "bg-warning"
-                : gitStatus === "deleted"
-                  ? "bg-destructive"
-                  : gitStatus === "renamed"
-                    ? "bg-primary"
-                    : ""
-          }`}
-        />
+          {/* Git status dot indicator for directories */}
+          {entry.is_dir && gitStatus && (
+            <span
+              className={`shrink-0 w-1.5 h-1.5 rounded-full ${
+                gitStatus === "added" || gitStatus === "untracked"
+                  ? "bg-success"
+                  : gitStatus === "modified"
+                    ? "bg-warning"
+                    : gitStatus === "deleted"
+                      ? "bg-destructive"
+                      : gitStatus === "renamed"
+                        ? "bg-primary"
+                        : ""
+              }`}
+            />
+          )}
+        </div>
       )}
-    </div>
+    </FileContextMenu>
   );
 });
 
diff --git a/src/components/Sessions/QuickActionBar.tsx b/src/components/Sessions/QuickActionBar.tsx
index 83a47ab..1f393ed 100644
--- a/src/components/Sessions/QuickActionBar.tsx
+++ b/src/components/Sessions/QuickActionBar.tsx
@@ -67,7 +67,7 @@ export default React.memo(function QuickActionBar({
   if (!isActive || !isAgent || actions.length === 0) return null;
 
   return (
-    <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-[5] flex items-center gap-1 px-1.5 py-1 rounded-lg bg-popover/80 backdrop-blur-sm ring-1 ring-border/30 shadow-lg opacity-0 group-hover/pane:opacity-100 transition-opacity duration-200 pointer-events-none group-hover/pane:pointer-events-auto">
+    <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-[5] flex items-center gap-1 px-1.5 py-1 rounded-lg bg-popover/80 backdrop-blur-sm ring-1 ring-border/30 shadow-lg opacity-0 group-hover/pane:opacity-100 group-focus-within/pane:opacity-100 transition-opacity duration-200 pointer-events-none group-hover/pane:pointer-events-auto group-focus-within/pane:pointer-events-auto">
       {actions.map((action) => {
         const Icon = getIcon(action.icon);
         return (
diff --git a/src/components/Sessions/SessionGrid.tsx b/src/components/Sessions/SessionGrid.tsx
index 932c236..f8a0ed4 100644
--- a/src/components/Sessions/SessionGrid.tsx
+++ b/src/components/Sessions/SessionGrid.tsx
@@ -282,12 +282,18 @@ const SessionGrid = memo(function SessionGrid({
       <div
         key={`col-handle-${c}`}
         onMouseDown={(e) => handleColumnResize(c, e)}
-        className="cursor-col-resize bg-transparent z-5"
+        className="group cursor-col-resize z-5 relative"
         style={{
           gridColumn,
           gridRow: `1 / -1`,
         }}
-      />,
+      >
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+          <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+          <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+          <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+        </div>
+      </div>,
     );
   }
 
@@ -299,12 +305,18 @@ const SessionGrid = memo(function SessionGrid({
         <div
           key={`row-handle-${r}`}
           onMouseDown={(e) => handleRowResize(r, e)}
-          className="cursor-row-resize bg-transparent z-5"
+          className="group cursor-row-resize z-5 relative"
           style={{
             gridColumn: `1 / -1`,
             gridRow,
           }}
-        />,
+        >
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-row gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+            <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+            <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+            <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+          </div>
+        </div>,
       );
     }
   }
diff --git a/src/components/Sessions/SessionPane.tsx b/src/components/Sessions/SessionPane.tsx
index 786b699..a3d9681 100644
--- a/src/components/Sessions/SessionPane.tsx
+++ b/src/components/Sessions/SessionPane.tsx
@@ -1,6 +1,6 @@
 import { useDraggable, useDroppable } from "@dnd-kit/core";
 import { invoke } from "@tauri-apps/api/core";
-import { ChevronLeft, ChevronRight, Pencil, RotateCcw, X } from "lucide-react";
+import { Pencil, RotateCcw, X } from "lucide-react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { useTheme } from "../../contexts/ThemeContext";
@@ -42,10 +42,6 @@ interface SessionPaneProps {
   onDismiss: (sessionId: string) => void;
   onStop: (sessionId: string) => void;
   onRelaunch: (sessionId: string) => void;
-  index: number;
-  totalCount: number;
-  onMoveLeft: (sessionId: string) => void;
-  onMoveRight: (sessionId: string) => void;
   dragDisabled?: boolean;
 }
 
@@ -57,10 +53,6 @@ export default React.memo(function SessionPane({
   onDismiss,
   onStop,
   onRelaunch,
-  index,
-  totalCount,
-  onMoveLeft,
-  onMoveRight,
   dragDisabled,
 }: SessionPaneProps) {
   const { isGlass } = useTheme();
@@ -82,6 +74,7 @@ export default React.memo(function SessionPane({
 
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState("");
+  const [showSaved, setShowSaved] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const {
@@ -129,6 +122,9 @@ export default React.memo(function SessionPane({
           projSessions.map((s) => (s.id === updated.id ? updated : s)),
         );
       }
+      // Flash "Saved" indicator
+      setShowSaved(true);
+      setTimeout(() => setShowSaved(false), 1500);
     } catch {
       // Ignore rename errors
     }
@@ -150,7 +146,6 @@ export default React.memo(function SessionPane({
   }, [isEditing]);
 
   const displayName = session.name || session.agent;
-  const showArrows = totalCount > 1;
 
   return (
     <div
@@ -205,18 +200,25 @@ export default React.memo(function SessionPane({
             onKeyDown={handleKeyDown}
             onPointerDown={(e) => e.stopPropagation()}
             placeholder={session.agent}
-            className="text-xs bg-transparent border border-border rounded px-1 py-0 text-foreground outline-none focus:border-primary min-w-0 w-24"
+            className="text-xs bg-transparent border border-border rounded px-1 py-0 text-foreground outline-none focus:border-primary min-w-0 w-auto min-w-24 max-w-48"
           />
         ) : (
-          <span
-            className="text-xs text-foreground overflow-hidden text-ellipsis whitespace-nowrap shrink-0"
-            title={
-              session.name
-                ? `${session.name} (${session.agent})`
-                : session.agent
-            }
-          >
-            {displayName}
+          <span className="flex items-center gap-1 shrink-0 min-w-0">
+            <span
+              className="text-xs text-foreground overflow-hidden text-ellipsis whitespace-nowrap"
+              title={
+                session.name
+                  ? `${session.name} (${session.agent})`
+                  : session.agent
+              }
+            >
+              {displayName}
+            </span>
+            {showSaved && (
+              <span className="text-[10px] text-success font-medium animate-in fade-in duration-200">
+                Saved
+              </span>
+            )}
           </span>
         )}
 
@@ -233,7 +235,7 @@ export default React.memo(function SessionPane({
               startEditing();
             }}
             title="Rename session"
-            className="text-muted-foreground opacity-0 group-hover/header:opacity-100 hover:!opacity-100 shrink-0"
+            className="text-muted-foreground opacity-30 group-hover/header:opacity-100 group-focus-within/header:opacity-100 hover:!opacity-100 shrink-0"
           >
             <Pencil size={10} />
           </Button>
@@ -298,46 +300,6 @@ export default React.memo(function SessionPane({
           )}
         </span>
 
-        {/* Arrow reorder buttons */}
-        {showArrows && (
-          <>
-            <Button
-              variant="ghost"
-              size="icon-xs"
-              hoverEffect="none"
-              clickEffect="none"
-              onPointerDown={(e) => e.stopPropagation()}
-              onClick={(e) => {
-                e.stopPropagation();
-                onMoveLeft(session.id);
-              }}
-              title="Move left"
-              className={`${
-                index === 0 ? "opacity-0 pointer-events-none" : ""
-              } text-muted-foreground`}
-            >
-              <ChevronLeft size={12} />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-xs"
-              hoverEffect="none"
-              clickEffect="none"
-              onPointerDown={(e) => e.stopPropagation()}
-              onClick={(e) => {
-                e.stopPropagation();
-                onMoveRight(session.id);
-              }}
-              title="Move right"
-              className={`${
-                index === totalCount - 1 ? "opacity-0 pointer-events-none" : ""
-              } text-muted-foreground`}
-            >
-              <ChevronRight size={12} />
-            </Button>
-          </>
-        )}
-
         {/* Action buttons */}
         <Button
           variant="ghost"
@@ -384,7 +346,7 @@ export default React.memo(function SessionPane({
 
         {/* Session Ended Overlay */}
         {isEnded && (
-          <div className="absolute inset-0 z-10 bg-black/60 flex flex-col items-center justify-center gap-3">
+          <div className="absolute inset-0 z-10 bg-black/40 backdrop-blur-sm flex flex-col items-center justify-center gap-3">
             <div
               className="text-sm font-medium"
               style={{
diff --git a/src/components/Sessions/SessionsView.tsx b/src/components/Sessions/SessionsView.tsx
index 4fb3de6..21a4a48 100644
--- a/src/components/Sessions/SessionsView.tsx
+++ b/src/components/Sessions/SessionsView.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, useCallback } from "react";
+import { useEffect, useMemo, useState, useCallback } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import {
   DndContext,
@@ -147,23 +147,6 @@ export default function SessionsView() {
     [visibleSessions, reorderSession],
   );
 
-  // Arrow move handlers
-  const handleMoveLeft = useCallback(
-    (sessionId: string) => {
-      const idx = visibleSessions.findIndex((s) => s.id === sessionId);
-      if (idx > 0) reorderSession(sessionId, idx - 1);
-    },
-    [visibleSessions, reorderSession],
-  );
-
-  const handleMoveRight = useCallback(
-    (sessionId: string) => {
-      const idx = visibleSessions.findIndex((s) => s.id === sessionId);
-      if (idx < visibleSessions.length - 1) reorderSession(sessionId, idx + 1);
-    },
-    [visibleSessions, reorderSession],
-  );
-
   // Relaunch a stopped/ended session with the same config
   const handleRelaunch = useCallback(
     async (sessionId: string) => {
@@ -217,6 +200,52 @@ export default function SessionsView() {
     setLaunchTaskForSession(null);
   }, [setLaunchTaskForSession]);
 
+  // ── Keyboard navigation between panes ──
+  const activeView = useAppStore((s) => s.activeView);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      // Only handle when sessions view is active
+      if (activeView !== "sessions") return;
+      // Skip when typing in an input/textarea/contenteditable
+      const el = document.activeElement;
+      if (
+        el instanceof HTMLInputElement ||
+        el instanceof HTMLTextAreaElement ||
+        (el instanceof HTMLElement && el.isContentEditable)
+      ) return;
+
+      // Tab / Shift+Tab — cycle focus between panes
+      if (e.key === "Tab" && !e.ctrlKey && !e.altKey && !e.metaKey) {
+        if (visibleSessions.length <= 1) return;
+        e.preventDefault();
+        const ids = visibleSessions.map((s) => s.id);
+        const currentIdx = ids.indexOf(gridLayout.focusedPaneId ?? "");
+        let nextIdx: number;
+        if (e.shiftKey) {
+          nextIdx = currentIdx <= 0 ? ids.length - 1 : currentIdx - 1;
+        } else {
+          nextIdx = currentIdx >= ids.length - 1 ? 0 : currentIdx + 1;
+        }
+        setGridLayout({ focusedPaneId: ids[nextIdx] });
+        return;
+      }
+
+      // Ctrl+Shift+S — stop the focused session
+      if (e.key === "S" && e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey) {
+        e.preventDefault();
+        const focusedId = gridLayout.focusedPaneId;
+        if (focusedId && visibleSessions.some((s) => s.id === focusedId)) {
+          handleStop(focusedId);
+        }
+        return;
+      }
+    };
+
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [activeView, visibleSessions, gridLayout.focusedPaneId, setGridLayout, handleStop]);
+
   const hasContinuousRun = !!(activeProjectId && continuousMode[activeProjectId]);
 
   return (
@@ -242,7 +271,7 @@ export default function SessionsView() {
           onDragEnd={handleDragEnd}
         >
           <SessionGrid layout={gridLayout} onLayoutChange={handleLayoutChange}>
-            {visibleSessions.map((session, index) => (
+            {visibleSessions.map((session) => (
               <SessionPane
                 key={session.id}
                 session={session}
@@ -252,10 +281,6 @@ export default function SessionsView() {
                 onDismiss={handleDismiss}
                 onStop={handleStop}
                 onRelaunch={handleRelaunch}
-                index={index}
-                totalCount={visibleSessions.length}
-                onMoveLeft={handleMoveLeft}
-                onMoveRight={handleMoveRight}
                 dragDisabled={isDragDisabled}
               />
             ))}
diff --git a/src/components/Settings/AcpPermissionsTab.tsx b/src/components/Settings/AcpPermissionsTab.tsx
index 32e1e56..1ac3b1f 100644
--- a/src/components/Settings/AcpPermissionsTab.tsx
+++ b/src/components/Settings/AcpPermissionsTab.tsx
@@ -1,6 +1,7 @@
 import { invoke } from "@tauri-apps/api/core";
 import {
   Eye,
+  FolderCode,
   Loader2,
   Pencil,
   Plus,
@@ -41,11 +42,31 @@ const ACTION_LABELS: Record<PermissionAction, { label: string; color: string }>
 };
 
 const TRUST_MODE_OPTIONS = [
-  { value: "auto_approve", label: "Auto-approve all" },
-  { value: "normal", label: "Use normal rules" },
-  { value: "deny_writes", label: "Deny write operations" },
+  {
+    value: "auto_approve",
+    label: "Auto-approve all",
+    description: "All file and terminal operations are approved without prompts.",
+  },
+  {
+    value: "normal",
+    label: "Apply rules normally",
+    description: "Evaluate rules as usual. \"Ask\" rules will still prompt (session pauses until answered).",
+  },
+  {
+    value: "deny_writes",
+    label: "Read-only",
+    description: "Auto-approve file reads, deny file writes and terminal commands.",
+  },
 ];
 
+/** Returns the contextual pattern field config based on capability */
+function getPatternConfig(capability: string) {
+  if (capability === "terminal") {
+    return { label: "Command pattern", placeholder: "e.g. npm test", field: "command" as const };
+  }
+  return { label: "Path pattern", placeholder: "e.g. src/**", field: "path" as const };
+}
+
 // ── Component ──
 
 export function AcpPermissionsTab() {
@@ -108,12 +129,14 @@ export function AcpPermissionsTab() {
   const addRule = useCallback(async () => {
     if (!activeProjectId) return;
     setAdding(true);
+    const patternConfig = getPatternConfig(newCapability);
+    const trimmed = newPattern.trim() || null;
     try {
       await invoke("create_permission_rule", {
         projectId: activeProjectId,
         capability: newCapability,
-        pathPattern: newPattern.trim() || null,
-        commandPattern: null,
+        pathPattern: patternConfig.field === "path" ? trimmed : null,
+        commandPattern: patternConfig.field === "command" ? trimmed : null,
         action: newAction,
       });
       setNewPattern("");
@@ -134,7 +157,7 @@ export function AcpPermissionsTab() {
         console.error("Failed to delete rule:", e);
       }
     },
-    [loadData],
+    [activeProjectId, loadData],
   );
 
   const resetRules = useCallback(async () => {
@@ -203,8 +226,14 @@ export function AcpPermissionsTab() {
 
   if (!activeProjectId) {
     return (
-      <div className="text-sm text-muted-foreground py-8 text-center">
-        Select a project to manage ACP permissions.
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <FolderCode className="mb-3 size-10 opacity-30" />
+        <p className="text-sm font-medium text-foreground">
+          No project selected
+        </p>
+        <p className="mt-1 text-xs text-center max-w-xs">
+          Open a project to manage ACP permissions.
+        </p>
       </div>
     );
   }
@@ -218,77 +247,22 @@ export function AcpPermissionsTab() {
     );
   }
 
+  const patternConfig = getPatternConfig(newCapability);
+
   return (
     <div className="space-y-6">
-      {/* ── Default Policy ── */}
-      <section>
-        <h3 className={sectionHeadingClass}>Default Policy</h3>
-        <p className="text-xs text-muted-foreground mb-2">
-          When no rule matches a permission request, this action is taken.
-        </p>
-        <Select
-          value={defaultPolicy}
-          onValueChange={(v) => v && updateDefaultPolicy(v)}
-          items={[
-            { value: "ask", label: "Ask (safest)" },
-            { value: "auto_approve", label: "Auto-Approve" },
-            { value: "deny", label: "Deny" },
-          ]}
-        >
-          <SelectTrigger className={`${inputClass} w-48`}>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="ask">Ask (safest)</SelectItem>
-            <SelectItem value="auto_approve">Auto-Approve</SelectItem>
-            <SelectItem value="deny">Deny</SelectItem>
-          </SelectContent>
-        </Select>
-      </section>
-
-      {/* ── Trust Mode ── */}
-      <section>
-        <h3 className={sectionHeadingClass}>Trust Mode</h3>
-        <p className="text-xs text-muted-foreground mb-2">
-          Permission behavior when tasks run autonomously (e.g. continuous mode auto-launch queue).
-        </p>
-        <Select
-          value={trustModePolicy}
-          onValueChange={(v) => v && updateTrustModePolicy(v)}
-          items={TRUST_MODE_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label }))}
-        >
-          <SelectTrigger className={`${inputClass} w-56`}>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {TRUST_MODE_OPTIONS.map((opt) => (
-              <SelectItem key={opt.value} value={opt.value}>
-                {opt.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </section>
-
-      {/* ── Permission Timeout ── */}
-      <section>
-        <h3 className={sectionHeadingClass}>Permission Timeout</h3>
-        <p className="text-xs text-muted-foreground mb-2">
-          How long to wait for a user response before auto-denying a permission request (seconds).
+      {/* ── How It Works ── */}
+      <div className="rounded-lg bg-muted/20 ring-1 ring-border/30 px-3.5 py-2.5">
+        <p className="text-[11px] text-muted-foreground leading-relaxed">
+          When an ACP agent requests file or terminal access, permissions are evaluated in order:{" "}
+          <span className="text-dim-foreground font-medium">Trust mode override</span> (autonomous sessions only)
+          {" \u2192 "}
+          <span className="text-dim-foreground font-medium">Matching rules</span> (most specific first)
+          {" \u2192 "}
+          <span className="text-dim-foreground font-medium">Default policy</span>.
+          {" "}If the result is &quot;Ask&quot;, a dialog prompts you for approval.
         </p>
-        <div className="flex items-center gap-2">
-          <input
-            type="number"
-            min={10}
-            max={600}
-            step={10}
-            value={permissionTimeout}
-            onChange={(e) => updatePermissionTimeout(parseInt(e.target.value, 10) || 120)}
-            className={`${inputClass} w-24 h-8`}
-          />
-          <span className="text-xs text-muted-foreground">seconds (default: 120)</span>
-        </div>
-      </section>
+      </div>
 
       {/* ── Permission Rules ── */}
       <section>
@@ -304,6 +278,10 @@ export function AcpPermissionsTab() {
             </button>
           )}
         </div>
+        <p className="text-[11px] text-muted-foreground mb-3">
+          Rules with patterns (e.g. <code className="text-[10px] bg-muted/50 px-1 py-0.5 rounded">src/**</code>)
+          take priority over capability-wide rules. First match wins.
+        </p>
 
         {/* Existing rules */}
         {rules.length > 0 ? (
@@ -333,7 +311,7 @@ export function AcpPermissionsTab() {
                   </div>
                   <button
                     onClick={() => deleteRule(rule.id)}
-                    className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-all"
+                    className="opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 text-muted-foreground hover:text-destructive transition-all"
                   >
                     <Trash2 size={13} />
                   </button>
@@ -342,25 +320,30 @@ export function AcpPermissionsTab() {
             })}
           </div>
         ) : (
-          <p className="text-xs text-muted-foreground/60 mb-3">
+          <p className="text-[11px] text-muted-foreground/60 mb-3">
             No rules configured. The default policy will be used for all requests.
           </p>
         )}
 
-        {/* Add rule form — two-row grid: labels on top, controls on bottom */}
+        {/* Add rule form */}
         <div className="grid grid-cols-[auto_1fr_auto_auto] gap-x-2 gap-y-1">
           {/* Row 1: labels */}
           <span className="text-[11px] text-muted-foreground">Capability</span>
           <span className="text-[11px] text-muted-foreground">
-            Path pattern <span className="text-muted-foreground/40">(optional)</span>
+            {patternConfig.label} <span className="text-muted-foreground/40">(optional)</span>
           </span>
           <span className="text-[11px] text-muted-foreground">Action</span>
           <span />
 
-          {/* Row 2: controls — all h-8 */}
+          {/* Row 2: controls */}
           <Select
             value={newCapability}
-            onValueChange={(v) => v && setNewCapability(v)}
+            onValueChange={(v) => {
+              if (v) {
+                setNewCapability(v);
+                setNewPattern("");
+              }
+            }}
             items={CAPABILITIES.map((cap) => ({ value: cap.value, label: cap.label }))}
           >
             <SelectTrigger size="sm" className="w-32">
@@ -379,7 +362,7 @@ export function AcpPermissionsTab() {
             type="text"
             value={newPattern}
             onChange={(e) => setNewPattern(e.target.value)}
-            placeholder="e.g. src/**"
+            placeholder={patternConfig.placeholder}
             className={`${inputClass} w-full h-8 min-w-[140px]`}
           />
 
@@ -418,34 +401,110 @@ export function AcpPermissionsTab() {
         </div>
       </section>
 
+      {/* ── Default Policy ── */}
+      <section>
+        <h3 className={sectionHeadingClass}>Default Policy</h3>
+        <p className="text-[11px] text-muted-foreground mb-2">
+          Fallback action when no rule matches a permission request.
+        </p>
+        <Select
+          value={defaultPolicy}
+          onValueChange={(v) => v && updateDefaultPolicy(v)}
+          items={[
+            { value: "ask", label: "Ask \u2014 prompt for approval (safest)" },
+            { value: "auto_approve", label: "Auto-Approve \u2014 allow without prompt" },
+            { value: "deny", label: "Deny \u2014 block without prompt" },
+          ]}
+        >
+          <SelectTrigger className="w-72">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="ask">Ask &mdash; prompt for approval (safest)</SelectItem>
+            <SelectItem value="auto_approve">Auto-Approve &mdash; allow without prompt</SelectItem>
+            <SelectItem value="deny">Deny &mdash; block without prompt</SelectItem>
+          </SelectContent>
+        </Select>
+      </section>
+
+      {/* ── Autonomous Sessions (Trust Mode) ── */}
+      <section>
+        <h3 className={sectionHeadingClass}>Autonomous Sessions</h3>
+        <p className="text-[11px] text-muted-foreground mb-2">
+          Override policy for sessions launched automatically by continuous mode.
+          This takes priority over rules and the default policy.
+        </p>
+        <Select
+          value={trustModePolicy}
+          onValueChange={(v) => v && updateTrustModePolicy(v)}
+          items={TRUST_MODE_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label }))}
+        >
+          <SelectTrigger className="w-72">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {TRUST_MODE_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {/* Description for selected option */}
+        <p className="text-[10px] text-muted-foreground/70 mt-1.5">
+          {TRUST_MODE_OPTIONS.find((o) => o.value === trustModePolicy)?.description}
+        </p>
+      </section>
+
+      {/* ── Permission Timeout ── */}
+      <section>
+        <h3 className={sectionHeadingClass}>Prompt Timeout</h3>
+        <p className="text-[11px] text-muted-foreground mb-2">
+          When a permission dialog appears, how long to wait for your response before auto-denying.
+        </p>
+        <div className="flex items-center gap-2">
+          <input
+            type="number"
+            min={10}
+            max={600}
+            step={10}
+            value={permissionTimeout}
+            onChange={(e) => updatePermissionTimeout(parseInt(e.target.value, 10) || 120)}
+            className={`${inputClass} w-24 h-8`}
+          />
+          <span className="text-[11px] text-muted-foreground">seconds</span>
+        </div>
+      </section>
+
       {/* ── Recent Permission Log ── */}
       <section>
         <h3 className={sectionHeadingClass}>Recent Decisions</h3>
         {log.length > 0 ? (
-          <div className="max-h-[200px] overflow-y-auto space-y-0.5">
-            {log.slice(0, 5).map((entry) => {
+          <div className="max-h-[280px] overflow-y-auto space-y-0.5 rounded-lg ring-1 ring-border/20 bg-muted/10 p-1.5">
+            {log.map((entry) => {
               const isApproved =
                 entry.decision === "approved" || entry.decision === "auto_approved";
               const isAuto =
                 entry.decision === "auto_approved" || entry.decision === "auto_denied";
+              const capCfg = CAPABILITIES.find((c) => c.value === entry.capability);
 
               return (
                 <div
                   key={entry.id}
-                  className="flex items-center gap-2 px-2 py-1 text-[11px] text-muted-foreground"
+                  className="flex items-center gap-2 px-2 py-1 text-[11px] text-muted-foreground rounded-md hover:bg-muted/30 transition-colors"
                 >
                   <span
                     className={`size-1.5 rounded-full shrink-0 ${
                       isApproved ? "bg-green-500" : "bg-red-500"
                     }`}
                   />
-                  <span className="font-medium truncate max-w-[100px]">
-                    {entry.capability}
-                  </span>
-                  <span className="truncate flex-1 text-muted-foreground/50">
-                    {entry.detail || "—"}
+                  <span className="font-medium truncate w-[72px] shrink-0">
+                    {capCfg?.label ?? entry.capability}
                   </span>
-                  <span className={isApproved ? "text-green-500" : "text-red-500"}>
+                  <code className="truncate flex-1 text-[10px] text-muted-foreground/60 font-mono">
+                    {entry.detail || "\u2014"}
+                  </code>
+                  <span className={`shrink-0 text-[10px] ${isApproved ? "text-green-500" : "text-red-500"}`}>
                     {isAuto ? "auto-" : ""}
                     {isApproved ? "approved" : "denied"}
                   </span>
@@ -454,8 +513,8 @@ export function AcpPermissionsTab() {
             })}
           </div>
         ) : (
-          <p className="text-xs text-muted-foreground/60">
-            No permission decisions recorded yet.
+          <p className="text-[11px] text-muted-foreground/60">
+            No permission decisions recorded yet. Decisions will appear here once an ACP session runs.
           </p>
         )}
       </section>
diff --git a/src/components/Settings/AgentsTab.tsx b/src/components/Settings/AgentsTab.tsx
index 81c5cc5..c5dece8 100644
--- a/src/components/Settings/AgentsTab.tsx
+++ b/src/components/Settings/AgentsTab.tsx
@@ -4,13 +4,11 @@ import { useCallback, useEffect, useState } from "react";
 
 import { AgentIcon } from "../../lib/agentIcons";
 import { Badge } from "../ui/badge";
-import { Checkbox } from "../ui/checkbox";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupInput,
 } from "../ui/input-group";
-import { Card, CardContent } from "../ui/orecus.io/cards/card";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 import {
   type ThemeColor,
@@ -23,7 +21,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
-import { sectionHeadingClass } from "./shared";
+import { sectionHeadingClass, ToggleRow } from "./shared";
 
 import type { AgentInfo } from "../../types";
 
@@ -37,19 +35,19 @@ const PERMISSION_FLAGS: Record<
     flag: "--dangerously-skip-permissions",
     label: "Skip Permission Prompts",
     description:
-      "Adds --dangerously-skip-permissions flag. The CLI will not ask for confirmation before running commands.",
+      "The CLI will not ask for confirmation before running commands.",
   },
   codex: {
     flag: "--dangerously-bypass-approvals-and-sandbox",
     label: "Bypass Approvals & Sandbox",
     description:
-      "Adds --dangerously-bypass-approvals-and-sandbox flag. The CLI will execute all actions without confirmation or sandboxing.",
+      "The CLI will execute all actions without confirmation or sandboxing.",
   },
   gemini: {
     flag: "--yolo",
     label: "YOLO Mode",
     description:
-      "Adds --yolo flag. The CLI will execute all actions without confirmation.",
+      "The CLI will execute all actions without confirmation.",
   },
 };
 
@@ -114,7 +112,6 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
           if (permFlag && config.flags.includes(permFlag)) {
             setSkipPerms(true);
           }
-          // Custom flags = all flags except the known permission flag
           const custom = config.flags.filter((f) => f !== permFlag);
           if (custom.length > 0) setCustomFlags(custom.join(" "));
         }
@@ -160,74 +157,67 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
   if (!loaded) return null;
 
   return (
-    <Card
-      type="normal"
-      radius="lg"
-      border
-      accentBar="top"
-      accentBarVariant="solid"
-      accentColor={accentColor}
-    >
-      {/* Card header */}
-      <CardContent
+    <div className="rounded-lg bg-muted/20 ring-1 ring-border/30 overflow-hidden">
+      {/* Header */}
+      <button
         onClick={() => agent.installed && setExpanded(!expanded)}
-        className={`group flex items-center justify-between ${agent.installed ? "cursor-pointer" : ""}`}
+        className={`w-full flex items-center gap-3 px-3.5 py-2.5 text-left transition-colors ${
+          agent.installed ? "cursor-pointer hover:bg-accent/30" : ""
+        }`}
       >
-        <div className="flex items-center gap-3">
-          <div
-            className="flex items-center justify-center size-8 rounded-md shrink-0 transition-colors duration-150"
-            style={{ backgroundColor: `${accentHex}18` }}
-          >
-            <AgentIcon agent={agent.name} size={18} className="shrink-0" />
-          </div>
-          <div className="flex flex-col min-w-0">
-            <div className="flex items-center gap-2">
-              <span className="text-[13px] font-medium text-foreground">
-                {agent.display_name}
-              </span>
-              <div
-                className={`size-1.5 rounded-full shrink-0 ${agent.installed ? "bg-success" : "bg-destructive"}`}
-              />
-            </div>
-            <span className="text-[11px] text-muted-foreground font-mono truncate">
-              {agent.command}
-            </span>
-          </div>
+        {/* Agent icon with accent tint */}
+        <div
+          className="flex items-center justify-center size-8 rounded-md shrink-0"
+          style={{ backgroundColor: `${accentHex}15` }}
+        >
+          <AgentIcon agent={agent.name} size={17} className="shrink-0" />
         </div>
-        <div className="flex items-center gap-2.5">
-          <Badge
-            variant={agent.installed ? "secondary" : "destructive"}
-            className={`text-[11px] font-medium ${agent.installed ? "bg-emerald-500/10 text-success" : ""}`}
-          >
+
+        {/* Name + command */}
+        <div className="flex flex-col flex-1 min-w-0">
+          <span className="text-[13px] font-medium text-foreground">
+            {agent.display_name}
+          </span>
+          <span className="text-[11px] text-muted-foreground font-mono truncate">
+            {agent.command}
+          </span>
+        </div>
+
+        {/* Status + actions */}
+        <div className="flex items-center gap-2 shrink-0">
+          <span
+            className={`size-1.5 rounded-full shrink-0 ${agent.installed ? "bg-success" : "bg-destructive"}`}
+          />
+          <span className={`text-[11px] ${agent.installed ? "text-success" : "text-destructive"}`}>
             {agent.installed ? "Detected" : "Not found"}
-          </Badge>
-          {agent.installed && (
-            <ChevronDown
-              size={14}
-              className="text-muted-foreground transition-transform duration-150 shrink-0"
-              style={{
-                transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-              }}
-            />
-          )}
+          </span>
+
           {!agent.installed && agent.cli_install_url && (
             <a
               href={agent.cli_install_url}
               target="_blank"
               rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
               className="flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-medium text-primary transition-colors hover:bg-primary/20"
             >
               <Download size={10} />
               Install
             </a>
           )}
+
+          {agent.installed && (
+            <ChevronDown
+              size={14}
+              className={`text-muted-foreground transition-transform duration-150 shrink-0 ${expanded ? "rotate-180" : ""}`}
+            />
+          )}
         </div>
-      </CardContent>
+      </button>
 
       {/* CLI install hint — shown when agent is NOT installed */}
       {!agent.installed && agent.cli_install_hint && (
-        <div className="border-t border-border/50 px-6 py-3">
-          <div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-2">
+        <div className="border-t border-border/30 px-3.5 py-2.5">
+          <div className="flex items-center gap-2 rounded-md bg-muted/40 px-2.5 py-1.5">
             <Terminal size={12} className="shrink-0 text-muted-foreground" />
             <code className="flex-1 select-all text-[11px] text-dim-foreground font-mono">
               {agent.cli_install_hint}
@@ -247,49 +237,40 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
         </div>
       )}
 
-      {/* Card body — only shown when expanded */}
+      {/* Expanded body */}
       {expanded && agent.installed && (
-        <div className="border-t border-border px-6 py-4 flex flex-col gap-5">
-          {/* Permissions section */}
+        <div className="border-t border-border/30 px-3.5 py-3 flex flex-col gap-4">
+          {/* Permissions toggle */}
           {permInfo && (
-            <section>
-              <div className="flex items-baseline gap-2 mb-2.5">
-                <span className={`${sectionHeadingClass} mb-0`}>
+            <div>
+              <div className="flex items-center gap-2 mb-1">
+                <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
                   Permissions
                 </span>
                 <Badge
                   variant="destructive"
-                  className="text-[10px] uppercase tracking-wide"
+                  className="text-[9px] uppercase tracking-wide px-1.5 py-0"
                 >
                   Security
                 </Badge>
               </div>
-              <label className="flex items-start gap-2.5 p-2.5 rounded-[var(--radius-element)] bg-background border border-border cursor-pointer">
-                <Checkbox
-                  checked={skipPerms}
-                  onCheckedChange={(checked) =>
-                    handleSkipPermsChange(checked === true)
-                  }
-                  className="mt-0.5"
-                />
-                <div>
-                  <div className="text-[13px] font-medium text-foreground">
-                    {permInfo.label}
-                  </div>
-                  <div className="text-[11px] text-muted-foreground mt-1 leading-[1.4]">
-                    {permInfo.description}
-                  </div>
-                </div>
-              </label>
-            </section>
+              <ToggleRow
+                label={permInfo.label}
+                description={permInfo.description}
+                checked={skipPerms}
+                onChange={handleSkipPermsChange}
+              />
+            </div>
           )}
 
-          {/* Custom flags section */}
-          <section>
-            <div className={`${sectionHeadingClass} mb-2.5`}>Custom Flags</div>
+          {/* Custom flags */}
+          <div>
+            <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground block mb-1.5">
+              Custom Flags
+            </span>
             <InputGroup>
               <InputGroupAddon align="inline-start">
-                <Flag className="size-4" />
+                <Flag className="size-3.5" />
               </InputGroupAddon>
               <InputGroupInput
                 type="text"
@@ -298,48 +279,32 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
                 placeholder={"e.g., --verbose --model opus"}
               />
             </InputGroup>
-            <div className="text-[11px] text-muted-foreground mt-1.5">
-              Additional flags to pass to the {agent.display_name} CLI. Separate
-              multiple flags with spaces.
-            </div>
-          </section>
-
-          {/* Command preview section */}
-          <section>
-            <div className={`${sectionHeadingClass} mb-2.5`}>
-              Command Preview
-            </div>
-            <InputGroup className="cursor-default">
-              <InputGroupAddon align="inline-start">
-                <TerminalSquare className="size-4" />
-              </InputGroupAddon>
-              <InputGroupInput
-                readOnly
-                value={commandPreview}
-                className="font-mono cursor-default"
-              />
-            </InputGroup>
-            <div className="text-[11px] text-muted-foreground mt-1.5">
-              This is the base command used when launching a new session. The
-              session prompt and project-specific overrides will be appended
-              automatically.
+            <div className="text-[10px] text-muted-foreground mt-1">
+              Additional flags appended to every {agent.display_name} session.
             </div>
-          </section>
+          </div>
 
-          {/* Reset button */}
-          <div className="flex justify-end">
+          {/* Command preview + reset */}
+          <div className="flex items-center gap-2 rounded-md bg-muted/30 px-2.5 py-2">
+            <TerminalSquare size={13} className="shrink-0 text-muted-foreground" />
+            <code className="flex-1 text-[11px] font-mono text-dim-foreground truncate select-all">
+              {commandPreview}
+            </code>
             <Button
               variant="ghost"
-              size="sm"
+              size="icon-xs"
+              hoverEffect="none"
+              clickEffect="none"
               onClick={handleReset}
-              leftIcon={<RotateCcw className="size-3.5" />}
+              title={`Reset ${agent.display_name} config`}
+              className="shrink-0 text-muted-foreground hover:text-foreground"
             >
-              Reset {agent.display_name}
+              <RotateCcw size={12} />
             </Button>
           </div>
         </div>
       )}
-    </Card>
+    </div>
   );
 }
 
@@ -355,7 +320,6 @@ export function AgentsTab({ agents }: { agents: AgentInfo[] }) {
         if (v) {
           setDefaultAgent(v);
         } else if (firstInstalled) {
-          // No persisted setting — auto-select first detected CLI and persist it
           setDefaultAgent(firstInstalled);
           invoke("set_setting", {
             key: "default_agent",
@@ -408,7 +372,7 @@ export function AgentsTab({ agents }: { agents: AgentInfo[] }) {
       {/* Agent cards */}
       <section>
         <div className={sectionHeadingClass}>Agent Configuration</div>
-        <div className="flex flex-col gap-3 p-1">
+        <div className="flex flex-col gap-2">
           {agents.map((agent) => (
             <AgentCard key={agent.name} agent={agent} />
           ))}
diff --git a/src/components/Settings/GeneralTab.tsx b/src/components/Settings/GeneralTab.tsx
index 1e3f306..68ff682 100644
--- a/src/components/Settings/GeneralTab.tsx
+++ b/src/components/Settings/GeneralTab.tsx
@@ -15,10 +15,16 @@ import { type Theme, useTheme } from "../../contexts/ThemeContext";
 import { usePersistedBoolean } from "../../hooks/usePersistedState";
 import { updateNotificationSettings } from "../../lib/notifications";
 import { useUpdateStore } from "../../store/updateStore";
-import { Checkbox } from "../ui/checkbox";
 import { Card, CardContent } from "../ui/orecus.io/cards/card";
 import { Tabs } from "../ui/orecus.io/navigation/tabs";
-import { sectionHeadingClass, inputClass } from "./shared";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { sectionHeadingClass, inputClass, ToggleRow } from "./shared";
 
 type GeneralTabId = "appearance" | "notifications" | "updates" | "system";
 
@@ -138,43 +144,24 @@ function AppearancePanel() {
           </div>
 
           {/* Glass effect toggle */}
-          <label className="flex items-start gap-2.5 p-2.5 rounded-[var(--radius-element)] bg-background border border-border cursor-pointer">
-            <Checkbox
-              checked={isGlass}
-              onCheckedChange={(checked) => handleGlassToggle(checked === true)}
-              className="mt-0.5"
-            />
-            <div>
-              <div className="text-[13px] font-medium text-foreground">
-                Glass effect
-              </div>
-              <div className="text-[11px] text-muted-foreground mt-1 leading-[1.4]">
-                Apply frosted glass blur to panels and sidebars.
-              </div>
-            </div>
-          </label>
+          <ToggleRow
+            label="Glass effect"
+            description="Apply frosted glass blur to panels and sidebars."
+            checked={isGlass}
+            onChange={handleGlassToggle}
+          />
         </div>
       </section>
 
       {/* Display */}
       <section>
         <div className={sectionHeadingClass}>Display</div>
-        <label className="flex items-start gap-2.5 p-2.5 rounded-[var(--radius-element)] bg-background border border-border cursor-pointer">
-          <Checkbox
-            checked={showIcons}
-            onCheckedChange={(checked) => setShowIcons(checked === true)}
-            className="mt-0.5"
-          />
-          <div>
-            <div className="text-[13px] font-medium text-foreground">
-              Show project icons in tabs
-            </div>
-            <div className="text-[11px] text-muted-foreground mt-1 leading-[1.4]">
-              Display auto-detected or custom SVG icons next to project names in
-              the tab bar.
-            </div>
-          </div>
-        </label>
+        <ToggleRow
+          label="Show project icons in tabs"
+          description="Display auto-detected or custom SVG icons next to project names in the tab bar."
+          checked={showIcons}
+          onChange={setShowIcons}
+        />
       </section>
     </div>
   );
@@ -221,48 +208,27 @@ function NotificationsPanel() {
       {/* Master toggle */}
       <section>
         <div className={sectionHeadingClass}>Notifications</div>
-        <label className="flex items-start gap-2.5 p-2.5 rounded-[var(--radius-element)] bg-background border border-border cursor-pointer">
-          <Checkbox
-            checked={enabled}
-            onCheckedChange={(checked) => setEnabled(checked === true)}
-            className="mt-0.5"
-          />
-          <div>
-            <div className="text-[13px] font-medium text-foreground">
-              Enable notifications
-            </div>
-            <div className="text-[11px] text-muted-foreground mt-1 leading-[1.4]">
-              Send OS-native notifications for agent events. Notifications are
-              suppressed when the app is focused on the relevant terminal.
-            </div>
-          </div>
-        </label>
+        <ToggleRow
+          label="Enable notifications"
+          description="Send OS-native notifications for agent events. Notifications are suppressed when the app is focused on the relevant terminal."
+          checked={enabled}
+          onChange={setEnabled}
+        />
       </section>
 
       {/* Per-event toggles */}
       <section>
         <div className={sectionHeadingClass}>Event Types</div>
-        <div className="flex flex-col gap-2.5">
+        <div className="flex flex-col gap-1">
           {toggles.map((t) => (
-            <label
+            <ToggleRow
               key={t.key}
-              className={`flex items-start gap-2.5 p-2.5 rounded-[var(--radius-element)] bg-background border border-border cursor-pointer ${!enabled ? "opacity-50 pointer-events-none" : ""}`}
-            >
-              <Checkbox
-                checked={t.value}
-                onCheckedChange={(checked) => t.setter(checked === true)}
-                disabled={!enabled}
-                className="mt-0.5"
-              />
-              <div>
-                <div className="text-[13px] font-medium text-foreground">
-                  {t.label}
-                </div>
-                <div className="text-[11px] text-muted-foreground mt-1 leading-[1.4]">
-                  {t.description}
-                </div>
-              </div>
-            </label>
+              label={t.label}
+              description={t.description}
+              checked={t.value}
+              onChange={t.setter}
+              disabled={!enabled}
+            />
           ))}
         </div>
       </section>
@@ -279,22 +245,12 @@ function AcpAutoCheckToggle() {
   );
 
   return (
-    <label className="flex items-start gap-2.5 p-2.5 rounded-[var(--radius-element)] bg-background border border-border cursor-pointer">
-      <Checkbox
-        checked={autoCheck}
-        onCheckedChange={(checked) => setAutoCheck(checked === true)}
-        className="mt-0.5"
-      />
-      <div>
-        <div className="text-[13px] font-medium text-foreground">
-          Check for ACP adapter updates
-        </div>
-        <div className="text-[11px] text-muted-foreground mt-1 leading-[1.4]">
-          Automatically check for newer versions of installed ACP adapters on
-          app launch (at most once per hour).
-        </div>
-      </div>
-    </label>
+    <ToggleRow
+      label="Check for ACP adapter updates"
+      description="Automatically check for newer versions of installed ACP adapters on app launch (at most once per hour)."
+      checked={autoCheck}
+      onChange={setAutoCheck}
+    />
   );
 }
 
@@ -340,7 +296,7 @@ function UpdatesPanel() {
   return (
     <div className="flex flex-col gap-3">
       {/* Version + Check button */}
-      <div className="flex items-center justify-between p-2.5 rounded-[var(--radius-element)] bg-background border border-border">
+      <div className="flex items-center justify-between p-2.5 rounded-lg bg-muted/20 ring-1 ring-border/30">
         <div>
           <div className="text-[13px] font-medium text-foreground">
             Current version
@@ -369,37 +325,36 @@ function UpdatesPanel() {
       </div>
 
       {/* Auto-check toggle */}
-      <label className="flex items-start gap-2.5 p-2.5 rounded-[var(--radius-element)] bg-background border border-border cursor-pointer">
-        <Checkbox
-          checked={autoCheckEnabled}
-          onCheckedChange={(checked) => setAutoCheckEnabled(checked === true)}
-          className="mt-0.5"
-        />
-        <div>
-          <div className="text-[13px] font-medium text-foreground">
-            Automatically check for updates
-          </div>
-          <div className="text-[11px] text-muted-foreground mt-1 leading-[1.4]">
-            Periodically check for new versions in the background.
-          </div>
-        </div>
-      </label>
+      <ToggleRow
+        label="Automatically check for updates"
+        description="Periodically check for new versions in the background."
+        checked={autoCheckEnabled}
+        onChange={setAutoCheckEnabled}
+      />
 
       {/* Check interval */}
       {autoCheckEnabled && (
-        <div className="flex items-center justify-between p-2.5 rounded-[var(--radius-element)] bg-background border border-border">
+        <div className="flex items-center justify-between p-2.5 rounded-lg bg-muted/20 ring-1 ring-border/30">
           <div className="text-[13px] text-foreground">Check frequency</div>
-          <select
-            value={checkIntervalHours}
-            onChange={(e) => setCheckIntervalHours(Number(e.target.value))}
-            className={`${inputClass} w-40`}
+          <Select
+            value={String(checkIntervalHours)}
+            onValueChange={(v) => v && setCheckIntervalHours(Number(v))}
+            items={CHECK_INTERVALS.map((opt) => ({
+              value: String(opt.value),
+              label: opt.label,
+            }))}
           >
-            {CHECK_INTERVALS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger className="w-40">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {CHECK_INTERVALS.map((opt) => (
+                <SelectItem key={opt.value} value={String(opt.value)}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )}
 
@@ -419,7 +374,7 @@ function UpdatesPanel() {
       </button>
 
       {advancedOpen && (
-        <div className="flex flex-col gap-2 p-2.5 rounded-[var(--radius-element)] bg-background border border-border">
+        <div className="flex flex-col gap-2 p-2.5 rounded-lg bg-muted/20 ring-1 ring-border/30">
           <div className="text-[11px] text-muted-foreground">
             Custom update endpoint URL
           </div>
@@ -458,7 +413,7 @@ function SystemPanel() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="flex items-center justify-between p-2.5 rounded-[var(--radius-element)] bg-background border border-border">
+      <div className="flex items-center justify-between p-2.5 rounded-lg bg-muted/20 ring-1 ring-border/30">
         <div>
           <div className="text-[13px] font-medium text-foreground">
             Log files
diff --git a/src/components/Settings/GitHubTab.tsx b/src/components/Settings/GitHubTab.tsx
index 3212f3e..0192a7b 100644
--- a/src/components/Settings/GitHubTab.tsx
+++ b/src/components/Settings/GitHubTab.tsx
@@ -25,57 +25,10 @@ import {
   SelectValue,
 } from "../ui/select";
 import { Separator } from "../ui/separator";
-import { sectionHeadingClass } from "./shared";
+import { sectionHeadingClass, ToggleRow } from "./shared";
 
 import type { GhAuthStatus, GitHubLabelFull, GitHubLabelMapping, TaskStatus } from "../../types";
 
-// ── Toggle Row ──
-
-function ToggleRow({
-  label,
-  description,
-  checked,
-  onChange,
-  disabled,
-}: {
-  label: string;
-  description?: string;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  disabled?: boolean;
-}) {
-  return (
-    <label
-      className={`flex items-center justify-between gap-3 py-1.5 ${disabled ? "opacity-40 pointer-events-none" : "cursor-pointer"}`}
-    >
-      <div className="flex flex-col min-w-0">
-        <span className="text-[13px] text-foreground">{label}</span>
-        {description && (
-          <span className="text-[11px] text-muted-foreground mt-0.5">
-            {description}
-          </span>
-        )}
-      </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={checked}
-        disabled={disabled}
-        onClick={() => onChange(!checked)}
-        className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
-          checked ? "bg-primary" : "bg-muted"
-        }`}
-      >
-        <span
-          className={`pointer-events-none inline-block size-4 rounded-full bg-background shadow-sm transition-transform duration-200 ${
-            checked ? "translate-x-4" : "translate-x-0"
-          }`}
-        />
-      </button>
-    </label>
-  );
-}
-
 // ── Auth Status Card ──
 
 function AuthStatusCard({
diff --git a/src/components/Settings/GitWorktreesTab.tsx b/src/components/Settings/GitWorktreesTab.tsx
new file mode 100644
index 0000000..f049ad3
--- /dev/null
+++ b/src/components/Settings/GitWorktreesTab.tsx
@@ -0,0 +1,186 @@
+import { invoke } from "@tauri-apps/api/core";
+import { FileText, FolderCode, GitBranch } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { formatError } from "../../lib/errorMessages";
+import { useAppStore } from "../../store/appStore";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "../ui/input-group";
+import { sectionHeadingClass, ToggleRow } from "./shared";
+
+import type { Project } from "../../types";
+
+// ── Git & Worktrees Tab ──
+
+export function GitWorktreesTab() {
+  const activeProjectId = useAppStore((s) => s.activeProjectId);
+  const project = useAppStore(
+    (s) => s.projects.find((p) => p.id === activeProjectId),
+  );
+  const updateProjectInStore = useAppStore((s) => s.updateProject);
+
+  const [branchPattern, setBranchPattern] = useState(
+    project?.branch_naming_pattern ?? "feat/{{task_id}}-{{task_slug}}",
+  );
+  const [instructionFile, setInstructionFile] = useState(
+    (project?.instruction_file_path ?? "").replace(/\\/g, "/"),
+  );
+  const [worktreeAutoCleanup, setWorktreeAutoCleanup] = useState(false);
+
+  // Sync local state when project changes
+  useEffect(() => {
+    setBranchPattern(
+      project?.branch_naming_pattern ?? "feat/{{task_id}}-{{task_slug}}",
+    );
+    setInstructionFile(
+      (project?.instruction_file_path ?? "").replace(/\\/g, "/"),
+    );
+  }, [
+    project?.id,
+    project?.branch_naming_pattern,
+    project?.instruction_file_path,
+  ]);
+
+  // Load per-project settings
+  useEffect(() => {
+    if (!activeProjectId) return;
+    invoke<string | null>("get_project_setting", {
+      projectId: activeProjectId,
+      key: "worktree_auto_cleanup",
+    })
+      .then((val) => setWorktreeAutoCleanup(val === "true"))
+      .catch(() => {});
+  }, [activeProjectId]);
+
+  const handleUpdate = useCallback(
+    async (updates: Record<string, unknown>) => {
+      if (!activeProjectId) return;
+      try {
+        const result = await invoke<Project>("update_project", {
+          id: activeProjectId,
+          ...updates,
+        });
+        updateProjectInStore(result);
+      } catch (e) {
+        console.error("Failed to update project:", e);
+        useAppStore
+          .getState()
+          .flashError(`Failed to update project: ${formatError(e)}`);
+      }
+    },
+    [activeProjectId, updateProjectInStore],
+  );
+
+  const handleBranchPatternBlur = useCallback(() => {
+    handleUpdate({
+      branchNamingPattern: branchPattern ? branchPattern : null,
+    });
+  }, [branchPattern, handleUpdate]);
+
+  const handleInstructionFileBlur = useCallback(() => {
+    const normalized = instructionFile.replace(/\\/g, "/");
+    handleUpdate({
+      instructionFilePath: normalized ? normalized : null,
+    });
+  }, [instructionFile, handleUpdate]);
+
+  const handleWorktreeAutoCleanupChange = useCallback(
+    (value: boolean) => {
+      setWorktreeAutoCleanup(value);
+      invoke("set_project_setting", {
+        projectId: activeProjectId,
+        key: "worktree_auto_cleanup",
+        value: value ? "true" : "false",
+      }).catch(() => {});
+    },
+    [activeProjectId],
+  );
+
+  if (!activeProjectId || !project) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <FolderCode className="mb-3 size-10 opacity-30" />
+        <p className="text-sm font-medium text-foreground">
+          No project selected
+        </p>
+        <p className="mt-1 text-xs text-center max-w-xs">
+          Open a project to configure git and worktree settings.
+        </p>
+      </div>
+    );
+  }
+
+  const panelClass =
+    "rounded-lg bg-muted/20 ring-1 ring-border/30 p-4 flex flex-col gap-4";
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ── Branch Naming ── */}
+      <div className={panelClass}>
+        <div className={sectionHeadingClass}>Branch Naming</div>
+        <div className="flex flex-col gap-1.5">
+          <span className="text-[12px] text-dim-foreground font-medium">
+            Branch pattern
+          </span>
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <GitBranch className="size-3.5" />
+            </InputGroupAddon>
+            <InputGroupInput
+              type="text"
+              value={branchPattern}
+              onChange={(e) => setBranchPattern(e.target.value)}
+              onBlur={handleBranchPatternBlur}
+              placeholder="feat/{{task_id}}-{{task_slug}}"
+            />
+          </InputGroup>
+          <span className="text-[10px] text-muted-foreground">
+            Template for branch names when creating worktrees. Variables:{" "}
+            {"{{task_id}}"}, {"{{task_slug}}"}
+          </span>
+        </div>
+      </div>
+
+      {/* ── Session Configuration ── */}
+      <div className={panelClass}>
+        <div className={sectionHeadingClass}>Session Configuration</div>
+        <div className="flex flex-col gap-1.5">
+          <span className="text-[12px] text-dim-foreground font-medium">
+            Instruction file
+          </span>
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <FileText className="size-3.5" />
+            </InputGroupAddon>
+            <InputGroupInput
+              type="text"
+              value={instructionFile}
+              onChange={(e) =>
+                setInstructionFile(e.target.value.replace(/\\/g, "/"))
+              }
+              onBlur={handleInstructionFileBlur}
+              placeholder="CLAUDE.md (auto-detected)"
+            />
+          </InputGroup>
+          <span className="text-[10px] text-muted-foreground">
+            Relative path from project root. Injected into agent session prompts.
+          </span>
+        </div>
+      </div>
+
+      {/* ── Worktree Management ── */}
+      <div className={panelClass}>
+        <div className={sectionHeadingClass}>Worktree Management</div>
+        <ToggleRow
+          label="Auto-cleanup worktrees"
+          description="Remove worktrees when sessions stop. Worktrees with uncommitted changes are preserved."
+          checked={worktreeAutoCleanup}
+          onChange={handleWorktreeAutoCleanupChange}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Settings/ProjectTab.tsx b/src/components/Settings/ProjectTab.tsx
new file mode 100644
index 0000000..655dcc0
--- /dev/null
+++ b/src/components/Settings/ProjectTab.tsx
@@ -0,0 +1,693 @@
+import { invoke } from "@tauri-apps/api/core";
+import { open } from "@tauri-apps/plugin-dialog";
+import { formatError } from "../../lib/errorMessages";
+import {
+  Bot,
+  Cpu,
+  FolderCode,
+  Flag,
+  Image,
+  MessageSquare,
+  Plus,
+  Terminal,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { clearIconCache, useProjectIcon } from "../../hooks/useProjectIcon";
+import { useAppStore } from "../../store/appStore";
+import { Button } from "../ui/orecus.io/components/enhanced-button";
+import {
+  colorStyles,
+  gradientHexColors,
+  solidColorGradients,
+} from "../ui/orecus.io/lib/color-utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { TaskFileConflictDialog } from "./TaskFileConflictDialog";
+import { ToggleRow, sectionHeadingClass } from "./shared";
+
+import type { PriorityLevel, Project, SessionTransport, TaskConflict } from "../../types";
+import type { ThemeColor } from "../ui/orecus.io/lib/color-utils";
+import { DEFAULT_PRIORITIES, PRIORITY_COLORS } from "../../lib/priorities";
+import { Input } from "../ui/input";
+
+const TAB_COLORS: { value: ThemeColor; label: string }[] = [
+  { value: "blue", label: "Blue" },
+  { value: "purple", label: "Purple" },
+  { value: "violet", label: "Violet" },
+  { value: "indigo", label: "Indigo" },
+  { value: "cyan", label: "Cyan" },
+  { value: "teal", label: "Teal" },
+  { value: "green", label: "Green" },
+  { value: "emerald", label: "Emerald" },
+  { value: "lime", label: "Lime" },
+  { value: "yellow", label: "Yellow" },
+  { value: "amber", label: "Amber" },
+  { value: "orange", label: "Orange" },
+  { value: "red", label: "Red" },
+  { value: "rose", label: "Rose" },
+  { value: "pink", label: "Pink" },
+  { value: "fuchsia", label: "Fuchsia" },
+];
+
+// ── Project Icon Preview ──
+
+function ProjectIconPreview({
+  project,
+  accentHex,
+}: {
+  project: Project;
+  accentHex: string;
+}) {
+  const svgMarkup = useProjectIcon(project.id, project.path, project.icon_path);
+
+  if (svgMarkup) {
+    return (
+      <span
+        className="size-5 inline-flex items-center justify-center [&>svg]:w-full [&>svg]:h-full"
+        dangerouslySetInnerHTML={{ __html: svgMarkup }}
+      />
+    );
+  }
+  return (
+    <FolderCode
+      size={16}
+      strokeWidth={1.5}
+      className="transition-colors duration-150"
+      style={{ color: accentHex }}
+    />
+  );
+}
+
+// ── Project Tab ──
+
+export function ProjectTab() {
+  const activeProjectId = useAppStore((s) => s.activeProjectId);
+  const project = useAppStore((s) => s.projects.find((p) => p.id === activeProjectId));
+  const agents = useAppStore((s) => s.agents);
+  const updateProjectInStore = useAppStore((s) => s.updateProject);
+  const removeProjectFromStore = useAppStore((s) => s.removeProject);
+
+  const [agent, setAgent] = useState(project?.default_agent ?? "");
+  const [model, setModel] = useState(project?.default_model ?? "");
+  const [defaultTransport, setDefaultTransport] =
+    useState<SessionTransport>("pty");
+  const [taskFilesToDisk, setTaskFilesToDisk] = useState(true);
+  const [conflictDialogOpen, setConflictDialogOpen] = useState(false);
+  const [taskConflicts, setTaskConflicts] = useState<TaskConflict[]>([]);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const storePriorities = useAppStore((s) =>
+    activeProjectId ? (s.projectPriorities[activeProjectId] ?? DEFAULT_PRIORITIES) : DEFAULT_PRIORITIES
+  );
+  const [priorities, setPriorities] = useState<PriorityLevel[]>(storePriorities);
+
+  // Sync local state when project changes
+  useEffect(() => {
+    setAgent(project?.default_agent ?? "");
+    setModel(project?.default_model ?? "");
+    setConfirmDelete(false);
+  }, [project?.id, project?.default_agent, project?.default_model]);
+
+  // Load per-project settings
+  useEffect(() => {
+    if (!activeProjectId) return;
+    invoke<string | null>("get_project_setting", {
+      projectId: activeProjectId,
+      key: "default_transport",
+    })
+      .then((val) => setDefaultTransport((val as SessionTransport) || "pty"))
+      .catch(() => {});
+    invoke<string | null>("get_project_setting", {
+      projectId: activeProjectId,
+      key: "task_files_to_disk",
+    })
+      .then((val) => setTaskFilesToDisk(val !== "false"))
+      .catch(() => {});
+  }, [activeProjectId]);
+
+  const handleUpdate = useCallback(
+    async (updates: Record<string, unknown>) => {
+      if (!activeProjectId) return;
+      try {
+        const result = await invoke<Project>("update_project", {
+          id: activeProjectId,
+          ...updates,
+        });
+        updateProjectInStore(result);
+      } catch (e) {
+        console.error("Failed to update project:", e);
+        useAppStore
+          .getState()
+          .flashError(`Failed to update project: ${formatError(e)}`);
+      }
+    },
+    [activeProjectId, updateProjectInStore],
+  );
+
+  const handleDelete = useCallback(async () => {
+    if (!activeProjectId) return;
+    try {
+      await invoke("remove_project", { id: activeProjectId });
+      removeProjectFromStore(activeProjectId);
+    } catch (e) {
+      console.error("Failed to remove project:", e);
+      useAppStore
+        .getState()
+        .flashError(`Failed to remove project: ${formatError(e)}`);
+    }
+  }, [activeProjectId, removeProjectFromStore]);
+
+  const handleTransportChange = useCallback(
+    (value: SessionTransport) => {
+      setDefaultTransport(value);
+      invoke("set_project_setting", {
+        projectId: activeProjectId,
+        key: "default_transport",
+        value,
+      }).catch(() => {});
+    },
+    [activeProjectId],
+  );
+
+  const handleTaskFilesToDiskChange = useCallback(
+    async (value: boolean) => {
+      if (value) {
+        try {
+          const detected = await invoke<TaskConflict[]>(
+            "detect_task_conflicts",
+            { projectId: activeProjectId },
+          );
+          if (detected.length > 0) {
+            setTaskConflicts(detected);
+            setConflictDialogOpen(true);
+            return;
+          }
+        } catch (e) {
+          console.error("Failed to detect conflicts:", e);
+        }
+      }
+      setTaskFilesToDisk(value);
+      invoke("set_project_setting", {
+        projectId: activeProjectId,
+        key: "task_files_to_disk",
+        value: value ? "true" : "false",
+      }).catch(() => {});
+    },
+    [activeProjectId],
+  );
+
+  // ── Priority management ──
+
+  const savePriorities = useCallback(
+    (updated: PriorityLevel[]) => {
+      setPriorities(updated);
+      invoke("set_project_setting", {
+        projectId: activeProjectId,
+        key: "priorities",
+        value: JSON.stringify(updated),
+      }).catch(() => {});
+    },
+    [activeProjectId],
+  );
+
+  const addPriority = useCallback(() => {
+    const nextOrder = priorities.length > 0 ? Math.max(...priorities.map((p) => p.order)) + 1 : 0;
+    const id = `P${priorities.length}`;
+    savePriorities([...priorities, { id, label: "New", color: "gray", order: nextOrder }]);
+  }, [priorities, savePriorities]);
+
+  const removePriority = useCallback(
+    (index: number) => {
+      if (priorities.length <= 1) return;
+      savePriorities(priorities.filter((_, i) => i !== index));
+    },
+    [priorities, savePriorities],
+  );
+
+  const updatePriority = useCallback(
+    (index: number, field: keyof PriorityLevel, value: string | number) => {
+      const updated = priorities.map((p, i) => (i === index ? { ...p, [field]: value } : p));
+      savePriorities(updated);
+    },
+    [priorities, savePriorities],
+  );
+
+  const movePriority = useCallback(
+    (index: number, direction: -1 | 1) => {
+      const targetIndex = index + direction;
+      if (targetIndex < 0 || targetIndex >= priorities.length) return;
+      const updated = [...priorities];
+      [updated[index], updated[targetIndex]] = [updated[targetIndex], updated[index]];
+      const reordered = updated.map((p, i) => ({ ...p, order: i }));
+      savePriorities(reordered);
+    },
+    [priorities, savePriorities],
+  );
+
+  const selectedAgent = agents.find((a) => a.name === agent);
+  const availableModels = selectedAgent?.supported_models ?? [];
+
+  const handleAgentChange = useCallback(
+    (value: string) => {
+      setAgent(value);
+      setModel("");
+      handleUpdate({
+        defaultAgent: value ? value : null,
+        defaultModel: null,
+      });
+    },
+    [handleUpdate],
+  );
+
+  const handleModelChange = useCallback(
+    (value: string) => {
+      setModel(value);
+      handleUpdate({ defaultModel: value ? value : null });
+    },
+    [handleUpdate],
+  );
+
+  const handlePickIcon = useCallback(async () => {
+    if (!activeProjectId) return;
+    try {
+      const selected = await open({
+        multiple: false,
+        filters: [{ name: "SVG", extensions: ["svg"] }],
+      });
+      if (selected) {
+        clearIconCache(activeProjectId);
+        handleUpdate({ iconPath: selected });
+      }
+    } catch {
+      // User cancelled
+    }
+  }, [activeProjectId, handleUpdate]);
+
+  const handleClearIcon = useCallback(() => {
+    if (!activeProjectId) return;
+    clearIconCache(activeProjectId);
+    handleUpdate({ iconPath: null });
+  }, [activeProjectId, handleUpdate]);
+
+  if (!activeProjectId || !project) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <FolderCode className="mb-3 size-10 opacity-30" />
+        <p className="text-sm font-medium text-foreground">
+          No project selected
+        </p>
+        <p className="mt-1 text-xs text-center max-w-xs">
+          Open a project to configure its settings.
+        </p>
+      </div>
+    );
+  }
+
+  const themeColor = (project.color as ThemeColor) || "primary";
+  const accentHex =
+    gradientHexColors[themeColor]?.start ?? gradientHexColors.primary.start;
+
+  const panelClass =
+    "rounded-lg bg-muted/20 ring-1 ring-border/30 p-4 flex flex-col gap-4";
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ── Appearance ── */}
+      <div className={panelClass}>
+        <div className={sectionHeadingClass}>Appearance</div>
+        <div className="grid grid-cols-[1fr_1fr] gap-4">
+          {/* Icon */}
+          <div className="flex flex-col gap-2">
+            <span className="text-[12px] text-dim-foreground font-medium">
+              Icon
+            </span>
+            <div className="flex items-center gap-2">
+              <div className="size-9 rounded-[var(--radius-element)] bg-background border border-border flex items-center justify-center shrink-0 overflow-hidden">
+                <ProjectIconPreview
+                  project={project}
+                  accentHex={accentHex}
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-1.5">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handlePickIcon}
+                    leftIcon={<Image className="size-3" />}
+                    className="h-6 px-2 text-[11px]"
+                  >
+                    Choose SVG
+                  </Button>
+                  {project.icon_path && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleClearIcon}
+                      leftIcon={<X className="size-3" />}
+                      className="h-6 px-1.5 text-[11px]"
+                    >
+                      Reset
+                    </Button>
+                  )}
+                </div>
+                <span className="text-[10px] text-muted-foreground truncate max-w-48">
+                  {project.icon_path
+                    ? project.icon_path.split(/[\\/]/).pop()
+                    : "Auto-detected from project"}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Color */}
+          <div className="flex flex-col gap-2">
+            <span className="text-[12px] text-dim-foreground font-medium">
+              Color
+            </span>
+            <div className="flex flex-wrap gap-1.5">
+              {TAB_COLORS.map((c) => {
+                const hex = gradientHexColors[c.value];
+                const isActive = project.color === c.value;
+                return (
+                  <button
+                    key={c.value}
+                    onClick={() => handleUpdate({ color: c.value })}
+                    title={c.label}
+                    className={`size-[20px] rounded-full cursor-pointer p-0 transition-[box-shadow,border-color] duration-150 ${isActive ? "border-2 border-foreground" : "border border-transparent"}`}
+                    style={{
+                      background: `linear-gradient(135deg, ${hex.start}, ${hex.end})`,
+                      outline: isActive ? "2px solid transparent" : "none",
+                      outlineOffset: 1,
+                      boxShadow: isActive
+                        ? `0 0 0 2px var(--card), 0 0 0 3px ${hex.start}`
+                        : "none",
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Agent Defaults ── */}
+      <div className={panelClass}>
+        <div className={sectionHeadingClass}>Agent Defaults</div>
+
+        {/* Agent + Model row */}
+        <div className="grid grid-cols-2 gap-3">
+          <div className="flex flex-col gap-1.5">
+            <span className="text-[12px] text-dim-foreground font-medium">
+              Agent
+            </span>
+            <Select
+              value={agent || "__global__"}
+              onValueChange={(val) =>
+                handleAgentChange(!val || val === "__global__" ? "" : val)
+              }
+              items={[
+                { value: "__global__", label: "Use global default" },
+                ...agents.map((a) => ({
+                  value: a.name,
+                  label: `${a.display_name}${a.installed ? "" : " (not installed)"}`,
+                })),
+              ]}
+            >
+              <SelectTrigger className="w-full">
+                <Bot className="size-3.5 text-muted-foreground" />
+                <SelectValue placeholder="Use global default" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__global__">
+                  Use global default
+                </SelectItem>
+                {agents.map((a) => (
+                  <SelectItem key={a.name} value={a.name}>
+                    {a.display_name}
+                    {a.installed ? "" : " (not installed)"}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <span className="text-[12px] text-dim-foreground font-medium">
+              Model
+            </span>
+            <Select
+              value={model || "__default__"}
+              onValueChange={(val) =>
+                handleModelChange(!val || val === "__default__" ? "" : val)
+              }
+              disabled={!agent || availableModels.length === 0}
+              items={[
+                { value: "__default__", label: "Default" },
+                ...availableModels.map((m) => ({ value: m, label: m })),
+              ]}
+            >
+              <SelectTrigger className="w-full">
+                <Cpu className="size-3.5 text-muted-foreground" />
+                <SelectValue placeholder="Default" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__default__">Default</SelectItem>
+                {availableModels.map((m) => (
+                  <SelectItem key={m} value={m}>
+                    {m}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Transport */}
+        <div className="flex flex-col gap-1.5">
+          <span className="text-[12px] text-dim-foreground font-medium">
+            Transport
+          </span>
+          <div className="flex rounded-[var(--radius-element)] bg-background/50 p-0.5 ring-1 ring-border/40">
+            <button
+              type="button"
+              onClick={() => handleTransportChange("pty")}
+              className={`flex flex-1 items-center justify-center gap-1.5 rounded-[calc(var(--radius-element)-2px)] px-3 py-1.5 text-xs transition-all duration-150 ${
+                defaultTransport === "pty"
+                  ? `bg-linear-to-r ${solidColorGradients[themeColor]} ${colorStyles[themeColor].text} shadow-sm font-medium`
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Terminal size={13} />
+              Terminal
+            </button>
+            <button
+              type="button"
+              onClick={() => handleTransportChange("acp")}
+              className={`flex flex-1 items-center justify-center gap-1.5 rounded-[calc(var(--radius-element)-2px)] px-3 py-1.5 text-xs transition-all duration-150 ${
+                defaultTransport === "acp"
+                  ? `bg-linear-to-r ${solidColorGradients[themeColor]} ${colorStyles[themeColor].text} shadow-sm font-medium`
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <MessageSquare size={13} />
+              Chat
+            </button>
+          </div>
+          <span className="text-[10px] text-muted-foreground">
+            Pre-selects the transport mode when launching new sessions
+          </span>
+        </div>
+      </div>
+
+      {/* ── Task Storage ── */}
+      <div className={panelClass}>
+        <div className={sectionHeadingClass}>Task Storage</div>
+        <ToggleRow
+          label="Save task files to disk"
+          description="Write .agents/tasks/ markdown files and TODOS.md so tasks appear in git"
+          checked={taskFilesToDisk}
+          onChange={handleTaskFilesToDiskChange}
+        />
+      </div>
+
+      {/* ── Priorities ── */}
+      <div className={panelClass}>
+        <div className="flex items-center justify-between">
+          <div className={sectionHeadingClass}>
+            <Flag className="inline size-3 mr-1 -mt-px" />
+            Priorities
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 px-2 text-[11px]"
+            onClick={addPriority}
+          >
+            <Plus className="size-3 mr-1" />
+            Add
+          </Button>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          {priorities.map((p, i) => {
+            const hex = gradientHexColors[(p.color as ThemeColor) || "gray"] ?? gradientHexColors.gray;
+            return (
+              <div
+                key={i}
+                className="flex items-center gap-2 rounded-md bg-background/50 ring-1 ring-border/20 px-2 py-1.5"
+              >
+                {/* Reorder buttons */}
+                <div className="flex flex-col -my-1">
+                  <button
+                    className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-[9px]"
+                    onClick={() => movePriority(i, -1)}
+                    disabled={i === 0}
+                    title="Move up"
+                  >
+                    ▲
+                  </button>
+                  <button
+                    className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-[9px]"
+                    onClick={() => movePriority(i, 1)}
+                    disabled={i === priorities.length - 1}
+                    title="Move down"
+                  >
+                    ▼
+                  </button>
+                </div>
+
+                {/* Color dot */}
+                <span
+                  className="size-2.5 rounded-full shrink-0"
+                  style={{ background: `linear-gradient(135deg, ${hex.start}, ${hex.end})` }}
+                />
+
+                {/* ID */}
+                <Input
+                  className="!h-7 w-14 text-[11px] font-mono px-1.5 py-0"
+                  value={p.id}
+                  onChange={(e) => updatePriority(i, "id", e.target.value)}
+                  placeholder="ID"
+                />
+
+                {/* Label */}
+                <Input
+                  className="!h-7 flex-1 text-[11px] px-1.5 py-0"
+                  value={p.label}
+                  onChange={(e) => updatePriority(i, "label", e.target.value)}
+                  placeholder="Label"
+                />
+
+                {/* Color select */}
+                <Select
+                  value={p.color}
+                  onValueChange={(v) => { if (v) updatePriority(i, "color", v); }}
+                  items={PRIORITY_COLORS.map((c) => ({ value: c.value, label: c.label }))}
+                >
+                  <SelectTrigger className="!h-7 w-[100px] text-[11px] px-1.5 py-0">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PRIORITY_COLORS.map((c) => {
+                      const cHex = gradientHexColors[c.value];
+                      return (
+                        <SelectItem key={c.value} value={c.value}>
+                          <span className="flex items-center gap-1.5">
+                            <span
+                              className="inline-block size-2 rounded-full shrink-0"
+                              style={{ background: `linear-gradient(135deg, ${cHex.start}, ${cHex.end})` }}
+                            />
+                            {c.label}
+                          </span>
+                        </SelectItem>
+                      );
+                    })}
+                  </SelectContent>
+                </Select>
+
+                {/* Delete */}
+                <button
+                  className="text-muted-foreground hover:text-destructive disabled:opacity-30 p-0.5"
+                  onClick={() => removePriority(i)}
+                  disabled={priorities.length <= 1}
+                  title="Remove priority"
+                >
+                  <X className="size-3" />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+
+        <span className="text-[10px] text-muted-foreground">
+          Define priority levels for this project. ID is stored in task files, label is shown in the UI.
+        </span>
+      </div>
+
+      {/* ── Danger Zone ── */}
+      <div className="rounded-lg ring-1 ring-destructive/20 p-4 flex items-center justify-between gap-4">
+        <div className="min-w-0">
+          <div className="text-[12px] font-medium text-destructive">
+            Delete Project
+          </div>
+          <div className="text-[11px] text-muted-foreground mt-0.5">
+            Remove from Faber. Files on disk are not affected.
+          </div>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          {confirmDelete && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setConfirmDelete(false)}
+              className="h-7"
+            >
+              Cancel
+            </Button>
+          )}
+          <Button
+            variant="destructive"
+            size="sm"
+            leftIcon={<Trash2 className="size-3.5" />}
+            className="h-7"
+            onClick={() => {
+              if (confirmDelete) {
+                handleDelete();
+              } else {
+                setConfirmDelete(true);
+              }
+            }}
+          >
+            {confirmDelete ? "Confirm" : "Delete"}
+          </Button>
+        </div>
+      </div>
+
+      {activeProjectId && (
+        <TaskFileConflictDialog
+          open={conflictDialogOpen}
+          onClose={() => setConflictDialogOpen(false)}
+          onResolved={() => {
+            setTaskFilesToDisk(true);
+            invoke("set_project_setting", {
+              projectId: activeProjectId,
+              key: "task_files_to_disk",
+              value: "true",
+            }).catch(() => {});
+            setConflictDialogOpen(false);
+          }}
+          projectId={activeProjectId}
+          conflicts={taskConflicts}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Settings/PromptsTab.tsx b/src/components/Settings/PromptsTab.tsx
index 4687c55..433d85f 100644
--- a/src/components/Settings/PromptsTab.tsx
+++ b/src/components/Settings/PromptsTab.tsx
@@ -72,7 +72,7 @@ function IconPicker({
             className={`flex items-center justify-center size-8 rounded-[var(--radius-element)] border transition-colors cursor-pointer ${
               isSelected
                 ? "border-primary bg-primary/10 text-primary"
-                : "border-border bg-background text-muted-foreground hover:text-foreground hover:border-foreground/30"
+                : "border-border bg-transparent text-muted-foreground hover:text-foreground hover:border-foreground/30"
             }`}
           >
             <Icon size={15} />
@@ -121,7 +121,7 @@ function SessionPromptRow({ template, onSave }: { template: PromptTemplate; onSa
   }, []);
 
   return (
-    <div className="rounded-[var(--radius-element)] border border-border bg-background overflow-hidden">
+    <div className="rounded-lg bg-muted/20 ring-1 ring-border/30 overflow-hidden">
       <button
         onClick={() => setExpanded(!expanded)}
         className="w-full flex items-center gap-3 px-3 py-2.5 cursor-pointer hover:bg-accent/40 transition-colors"
@@ -222,7 +222,7 @@ function QuickActionRow({
   }, [template, editedLabel, editedPrompt, editedIcon, editedQuickAction, onSave]);
 
   return (
-    <div className="rounded-[var(--radius-element)] border border-border bg-background overflow-hidden">
+    <div className="rounded-lg bg-muted/20 ring-1 ring-border/30 overflow-hidden">
       <div className="flex items-center gap-3 px-3 py-2.5">
         <button
           onClick={() => setExpanded(!expanded)}
@@ -285,7 +285,7 @@ function QuickActionRow({
             <input
               value={editedLabel}
               onChange={(e) => { setEditedLabel(e.target.value); setDirty(true); }}
-              className="w-full px-2.5 py-1.5 text-[13px] bg-background border border-border rounded-[var(--radius-element)] text-foreground outline-none"
+              className="w-full px-2.5 py-1.5 text-[13px] bg-transparent border border-border rounded-md text-foreground outline-none transition-[color,box-shadow] focus:ring-2 focus:ring-ring/50 focus:border-ring"
             />
           </div>
 
@@ -366,7 +366,7 @@ function AddActionForm({ onAdd }: { onAdd: (t: Omit<PromptTemplate, "sort_order"
   }
 
   return (
-    <div className="rounded-[var(--radius-element)] border border-border bg-background p-3 flex flex-col gap-3">
+    <div className="rounded-lg bg-muted/20 ring-1 ring-border/30 p-3 flex flex-col gap-3">
       {/* Label */}
       <div>
         <label className="text-[11px] text-muted-foreground mb-1 block">Label</label>
@@ -374,7 +374,7 @@ function AddActionForm({ onAdd }: { onAdd: (t: Omit<PromptTemplate, "sort_order"
           value={label}
           onChange={(e) => setLabel(e.target.value)}
           placeholder="e.g., Run Tests"
-          className="w-full px-2.5 py-1.5 text-[13px] bg-background border border-border rounded-[var(--radius-element)] text-foreground outline-none"
+          className="w-full px-2.5 py-1.5 text-[13px] bg-transparent border border-border rounded-md text-foreground outline-none transition-[color,box-shadow] focus:ring-2 focus:ring-ring/50 focus:border-ring"
         />
       </div>
 
diff --git a/src/components/Settings/SettingsView.tsx b/src/components/Settings/SettingsView.tsx
new file mode 100644
index 0000000..c4c269a
--- /dev/null
+++ b/src/components/Settings/SettingsView.tsx
@@ -0,0 +1,218 @@
+import {
+  Bot,
+  FolderCode,
+  GitBranch,
+  Github,
+  MessageSquare,
+  Palette,
+  Shield,
+  SlidersHorizontal,
+  TerminalSquare,
+} from "lucide-react";
+import { memo, useCallback, useEffect, useState } from "react";
+
+import { useAppStore } from "../../store/appStore";
+import { AcpPermissionsTab } from "./AcpPermissionsTab";
+import { AgentsTab } from "./AgentsTab";
+import { GeneralTab } from "./GeneralTab";
+import { GitHubTab } from "./GitHubTab";
+import { GitWorktreesTab } from "./GitWorktreesTab";
+import { ProjectTab } from "./ProjectTab";
+import { PromptsTab } from "./PromptsTab";
+import { TerminalTab } from "./TerminalTab";
+
+import type { LucideIcon } from "lucide-react";
+
+// ── Tab definitions ──
+
+export type SettingsTabId =
+  | "general"
+  | "terminal"
+  | "agents"
+  | "prompts"
+  | "project"
+  | "git-worktrees"
+  | "acp-permissions"
+  | "github";
+
+interface SettingsTabDef {
+  id: SettingsTabId;
+  label: string;
+  icon: LucideIcon;
+  group: "app" | "project";
+}
+
+const SETTINGS_TABS: SettingsTabDef[] = [
+  { id: "general", label: "General", icon: SlidersHorizontal, group: "app" },
+  { id: "terminal", label: "Terminal", icon: TerminalSquare, group: "app" },
+  { id: "agents", label: "Agents", icon: Bot, group: "app" },
+  { id: "prompts", label: "Prompts", icon: MessageSquare, group: "app" },
+  { id: "project", label: "Project", icon: FolderCode, group: "project" },
+  { id: "git-worktrees", label: "Git & Worktrees", icon: GitBranch, group: "project" },
+  { id: "acp-permissions", label: "ACP Permissions", icon: Shield, group: "project" },
+  { id: "github", label: "GitHub", icon: Github, group: "project" },
+];
+
+const APP_TABS = SETTINGS_TABS.filter((t) => t.group === "app");
+const PROJECT_TABS = SETTINGS_TABS.filter((t) => t.group === "project");
+
+// ── Settings Nav ──
+
+function SettingsNav({
+  activeTab,
+  onTabChange,
+  hasProject,
+}: {
+  activeTab: SettingsTabId;
+  onTabChange: (tab: SettingsTabId) => void;
+  hasProject: boolean;
+}) {
+  return (
+    <nav className="flex flex-col w-[180px] shrink-0 border-r border-border/60 py-3 pr-2 overflow-y-auto">
+      {/* App section */}
+      <div className="px-3 pb-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/70">
+        App
+      </div>
+      {APP_TABS.map((tab) => {
+        const Icon = tab.icon;
+        const isActive = activeTab === tab.id;
+        return (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`flex items-center gap-2.5 px-3 py-1.5 text-[13px] rounded-r-md transition-colors duration-100 text-left ${
+              isActive
+                ? "bg-accent/60 text-foreground font-medium border-l-2 border-primary"
+                : "text-dim-foreground hover:text-foreground hover:bg-accent/30 border-l-2 border-transparent"
+            }`}
+          >
+            <Icon size={14} className={isActive ? "text-primary" : "text-muted-foreground"} />
+            {tab.label}
+          </button>
+        );
+      })}
+
+      {/* Project section */}
+      <div className="px-3 pt-4 pb-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/70">
+        Project
+      </div>
+      {PROJECT_TABS.map((tab) => {
+        const Icon = tab.icon;
+        const isActive = activeTab === tab.id;
+        const isDisabled = !hasProject;
+        return (
+          <button
+            key={tab.id}
+            onClick={() => !isDisabled && onTabChange(tab.id)}
+            disabled={isDisabled}
+            className={`flex items-center gap-2.5 px-3 py-1.5 text-[13px] rounded-r-md transition-colors duration-100 text-left ${
+              isDisabled
+                ? "text-muted-foreground/40 cursor-not-allowed border-l-2 border-transparent"
+                : isActive
+                  ? "bg-accent/60 text-foreground font-medium border-l-2 border-primary"
+                  : "text-dim-foreground hover:text-foreground hover:bg-accent/30 border-l-2 border-transparent"
+            }`}
+          >
+            <Icon
+              size={14}
+              className={
+                isDisabled
+                  ? "text-muted-foreground/30"
+                  : isActive
+                    ? "text-primary"
+                    : "text-muted-foreground"
+              }
+            />
+            {tab.label}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
+
+// ── Settings Content ──
+
+function SettingsContent({
+  activeTab,
+}: {
+  activeTab: SettingsTabId;
+}) {
+  const agents = useAppStore((s) => s.agents);
+
+  return (
+    <div className="flex-1 min-h-0 overflow-y-auto px-6 py-4">
+      <div className="max-w-2xl">
+        {activeTab === "general" && <GeneralTab />}
+        {activeTab === "terminal" && <TerminalTab />}
+        {activeTab === "agents" && <AgentsTab agents={agents} />}
+        {activeTab === "prompts" && <PromptsTab />}
+        {activeTab === "project" && <ProjectTab />}
+        {activeTab === "git-worktrees" && <GitWorktreesTab />}
+        {activeTab === "acp-permissions" && <AcpPermissionsTab />}
+        {activeTab === "github" && <GitHubTab />}
+      </div>
+    </div>
+  );
+}
+
+// ── Settings View ──
+
+export default memo(function SettingsView() {
+  const activeProjectId = useAppStore((s) => s.activeProjectId);
+  const previousView = useAppStore((s) => s.previousView);
+  const setActiveView = useAppStore((s) => s.setActiveView);
+  const [activeTab, setActiveTab] = useState<SettingsTabId>("general");
+
+  const hasProject = !!activeProjectId;
+
+  // If on a project tab but no project is active, fall back to general
+  useEffect(() => {
+    const projectTabs: SettingsTabId[] = ["project", "git-worktrees", "acp-permissions", "github"];
+    if (!hasProject && projectTabs.includes(activeTab)) {
+      setActiveTab("general");
+    }
+  }, [hasProject, activeTab]);
+
+  // Escape to go back
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setActiveView(previousView ?? "dashboard");
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [previousView, setActiveView]);
+
+  const handleTabChange = useCallback((tab: SettingsTabId) => {
+    setActiveTab(tab);
+  }, []);
+
+  return (
+    <div
+      className="flex flex-col min-h-0 overflow-hidden bg-card/80"
+      style={{ gridArea: "content" }}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-2 px-5 py-2.5 shrink-0 border-b border-border/40">
+        <Palette size={16} className="text-primary" />
+        <h1 className="text-sm font-semibold text-foreground">Settings</h1>
+        <kbd className="ml-auto px-1.5 py-0.5 rounded bg-accent/60 font-mono text-[10px] text-muted-foreground">
+          Esc
+        </kbd>
+      </div>
+
+      {/* Master-detail layout */}
+      <div className="flex flex-1 min-h-0">
+        <SettingsNav
+          activeTab={activeTab}
+          onTabChange={handleTabChange}
+          hasProject={hasProject}
+        />
+        <SettingsContent activeTab={activeTab} />
+      </div>
+    </div>
+  );
+});
diff --git a/src/components/Settings/TerminalTab.tsx b/src/components/Settings/TerminalTab.tsx
index 9d0e2fd..d011648 100644
--- a/src/components/Settings/TerminalTab.tsx
+++ b/src/components/Settings/TerminalTab.tsx
@@ -1,6 +1,7 @@
 import { invoke } from "@tauri-apps/api/core";
 import { Loader2, RefreshCw } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
 import {
   usePersistedNumber,
   usePersistedString,
@@ -37,14 +38,20 @@ const EMBEDDED_FONT = "JetBrains Mono";
 function buildFontList(detected: AvailableFont[]): FontEntry[] {
   const entries: FontEntry[] = [
     // Embedded font is always available
-    { name: EMBEDDED_FONT, family: `'${EMBEDDED_FONT}', monospace`, category: "embedded" },
+    {
+      name: EMBEDDED_FONT,
+      family: `'${EMBEDDED_FONT}', monospace`,
+      category: "embedded",
+    },
   ];
 
   for (const font of detected) {
     // Skip the embedded font (already added)
     if (font.family === EMBEDDED_FONT) continue;
 
-    const category: FontEntry["category"] = font.is_nerd_font ? "nerd" : "system";
+    const category: FontEntry["category"] = font.is_nerd_font
+      ? "nerd"
+      : "system";
     entries.push({
       name: font.family,
       family: `'${font.family}', monospace`,
@@ -126,10 +133,22 @@ function SettingsSlider({
 export function TerminalTab() {
   const shells = useAppStore((s) => s.shells);
 
-  const [terminalShell, setTerminalShell] = usePersistedString("terminal_shell", "");
-  const [fontFamily, setFontFamily] = usePersistedString("terminal_font_family", DEFAULTS.fontFamily);
-  const [fontSize, setFontSize] = usePersistedNumber("terminal_font_size", DEFAULTS.fontSize);
-  const [lineHeight, setLineHeight] = usePersistedNumber("terminal_line_height", DEFAULTS.lineHeight);
+  const [terminalShell, setTerminalShell] = usePersistedString(
+    "terminal_shell",
+    "",
+  );
+  const [fontFamily, setFontFamily] = usePersistedString(
+    "terminal_font_family",
+    DEFAULTS.fontFamily,
+  );
+  const [fontSize, setFontSize] = usePersistedNumber(
+    "terminal_font_size",
+    DEFAULTS.fontSize,
+  );
+  const [lineHeight, setLineHeight] = usePersistedNumber(
+    "terminal_line_height",
+    DEFAULTS.lineHeight,
+  );
   const [zoom, setZoom] = usePersistedNumber("terminal_zoom", DEFAULTS.zoom);
 
   const [fontFilter, setFontFilter] = useState("");
@@ -137,7 +156,11 @@ export function TerminalTab() {
 
   // Detect which fonts are actually installed via the Rust backend
   const [fontList, setFontList] = useState<FontEntry[]>([
-    { name: EMBEDDED_FONT, family: `'${EMBEDDED_FONT}', monospace`, category: "embedded" },
+    {
+      name: EMBEDDED_FONT,
+      family: `'${EMBEDDED_FONT}', monospace`,
+      category: "embedded",
+    },
   ]);
   const [fontsLoading, setFontsLoading] = useState(true);
 
@@ -229,7 +252,8 @@ export function TerminalTab() {
           </SelectContent>
         </Select>
         <div className="text-[11px] text-muted-foreground mt-1.5">
-          Takes effect on new sessions. Existing sessions keep their current shell.
+          Takes effect on new sessions. Existing sessions keep their current
+          shell.
         </div>
       </section>
 
@@ -250,7 +274,7 @@ export function TerminalTab() {
             )}
           </button>
         </div>
-        <div className="rounded-[var(--radius-container)] border border-border overflow-hidden">
+        <div className="rounded-lg ring-1 ring-border/30 overflow-hidden bg-card">
           {/* Search / filter */}
           <div className="border-b border-border px-3 py-2">
             <input
diff --git a/src/components/Settings/shared.ts b/src/components/Settings/shared.ts
deleted file mode 100644
index 7227c94..0000000
--- a/src/components/Settings/shared.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const sectionHeadingClass =
-  "text-xs font-medium text-muted-foreground uppercase tracking-[0.5px] mb-2.5";
-
-export const inputClass =
-  "px-2.5 py-1.5 text-[13px] bg-background border border-border rounded-[var(--radius-element)] text-foreground outline-none";
diff --git a/src/components/Settings/shared.tsx b/src/components/Settings/shared.tsx
new file mode 100644
index 0000000..4ffe818
--- /dev/null
+++ b/src/components/Settings/shared.tsx
@@ -0,0 +1,44 @@
+import { Switch } from "../ui/switch";
+
+export const sectionHeadingClass =
+  "text-xs font-medium text-muted-foreground uppercase tracking-[0.5px] mb-2.5";
+
+export const inputClass =
+  "px-2.5 py-1.5 text-[13px] bg-transparent border border-border rounded-md text-foreground outline-none transition-[color,box-shadow] focus:ring-2 focus:ring-ring/50 focus:border-ring";
+
+// ── Toggle Row ──
+// Shared toggle switch component used across settings tabs.
+
+export function ToggleRow({
+  label,
+  description,
+  checked,
+  onChange,
+  disabled,
+}: {
+  label: string;
+  description?: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <label
+      className={`flex items-center justify-between gap-3 py-1.5 ${disabled ? "opacity-40 pointer-events-none" : "cursor-pointer"}`}
+    >
+      <div className="flex flex-col min-w-0">
+        <span className="text-[13px] text-foreground">{label}</span>
+        {description && (
+          <span className="text-[11px] text-muted-foreground mt-0.5">
+            {description}
+          </span>
+        )}
+      </div>
+      <Switch
+        checked={checked}
+        onCheckedChange={onChange}
+        disabled={disabled}
+      />
+    </label>
+  );
+}
diff --git a/src/components/Shell/AppShell.tsx b/src/components/Shell/AppShell.tsx
index 4bce28d..c505d49 100644
--- a/src/components/Shell/AppShell.tsx
+++ b/src/components/Shell/AppShell.tsx
@@ -1,4 +1,4 @@
-import { AlertTriangle, Loader2 } from "lucide-react";
+import { AlertTriangle, CheckCircle2, Loader2 } from "lucide-react";
 import { memo, useMemo } from "react";
 
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -13,6 +13,7 @@ import GitHubView from "../GitHub/GitHubView";
 import HelpView from "../Help/HelpView";
 import ReviewView from "../Review/ReviewView";
 import SessionsView from "../Sessions/SessionsView";
+import SettingsView from "../Settings/SettingsView";
 import SkillsRulesView from "../SkillsRules/SkillsRulesView";
 import TaskDetailView from "../TaskDetail/TaskDetailView";
 import UpdateNotification from "../Update/UpdateNotification";
@@ -20,6 +21,7 @@ import ApplicationBar from "./ApplicationBar";
 import ErrorBoundary from "./ErrorBoundary";
 import RightSidebar from "./RightSidebar";
 import Sidebar from "./Sidebar";
+import StatusBar from "./StatusBar";
 import WelcomeScreen from "./WelcomeScreen";
 
 import type { ReactNode } from "react";
@@ -51,6 +53,8 @@ const ViewRouter = memo(function ViewRouter({
     otherView = <SkillsRulesView />;
   } else if (activeView === "help") {
     otherView = <HelpView />;
+  } else if (activeView === "settings") {
+    otherView = <SettingsView />;
   }
 
   return (
@@ -70,23 +74,32 @@ const ViewRouter = memo(function ViewRouter({
 function FloatingStatusToast() {
   const backgroundTasks = useAppStore((s) => s.backgroundTasks);
   const errorFlash = useAppStore((s) => s.errorFlash);
+  const successFlash = useAppStore((s) => s.successFlash);
   const isBusy = backgroundTasks.length > 0;
   const currentTask = backgroundTasks[backgroundTasks.length - 1];
-  const isVisible = isBusy || errorFlash;
+  const isVisible = isBusy || errorFlash || successFlash;
+
+  const variant = errorFlash
+    ? "error"
+    : successFlash
+      ? "success"
+      : "default";
 
   return (
     <div
       className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 px-4 py-2 rounded-full backdrop-blur-md ring-1 shadow-lg transition-all duration-300 ease-out ${
-        errorFlash
+        variant === "error"
           ? "bg-destructive/90 ring-destructive/50"
-          : "bg-card/90 ring-border/50"
+          : variant === "success"
+            ? "bg-success/90 ring-success/50"
+            : "bg-card/90 ring-border/50"
       } ${
         isVisible
           ? "translate-y-0 opacity-100"
           : "translate-y-4 opacity-0 pointer-events-none"
       }`}
     >
-      {errorFlash ? (
+      {variant === "error" ? (
         <>
           <AlertTriangle
             size={14}
@@ -96,6 +109,13 @@ function FloatingStatusToast() {
             {errorFlash}
           </span>
         </>
+      ) : variant === "success" ? (
+        <>
+          <CheckCircle2 size={14} className="text-foreground shrink-0" />
+          <span className="text-xs text-foreground whitespace-nowrap">
+            {successFlash}
+          </span>
+        </>
       ) : (
         <>
           <Loader2 size={14} className="animate-spin text-primary shrink-0" />
@@ -132,11 +152,11 @@ export default function AppShell() {
   const gridStyle = useMemo(
     () => ({
       display: "grid" as const,
-      gridTemplateRows: "auto 1fr",
+      gridTemplateRows: "auto 1fr auto",
       gridTemplateColumns: `${leftCol} 1fr ${rightCol}`,
       gridTemplateAreas: rightSidebarOpen
-        ? `"sidebar topbar rightsidebar" "sidebar content rightsidebar"`
-        : `"sidebar topbar ." "sidebar content ."`,
+        ? `"sidebar topbar rightsidebar" "sidebar content rightsidebar" "statusbar statusbar statusbar"`
+        : `"sidebar topbar ." "sidebar content ." "statusbar statusbar statusbar"`,
       height: "100vh",
       overflow: "hidden" as const,
     }),
@@ -161,6 +181,7 @@ export default function AppShell() {
             <ViewRouter activeView={activeView} />
           </ErrorBoundary>
           {rightSidebarOpen && <RightSidebar />}
+          <StatusBar />
         </TooltipProvider>
       </div>
 
diff --git a/src/components/Shell/RightSidebar.tsx b/src/components/Shell/RightSidebar.tsx
index 5892c3d..cc3a61d 100644
--- a/src/components/Shell/RightSidebar.tsx
+++ b/src/components/Shell/RightSidebar.tsx
@@ -1,6 +1,6 @@
 import { invoke } from "@tauri-apps/api/core";
-import { FolderOpen, FolderTree } from "lucide-react";
-import { useCallback } from "react";
+import { ExternalLink, FolderTree, Search, X } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
 
 import { useAppStore } from "../../store/appStore";
 import FileTree from "../Files/FileTree";
@@ -9,17 +9,24 @@ import RightSidebarResizeHandle from "./RightSidebarResizeHandle";
 export default function RightSidebar() {
   const activeProjectId = useAppStore((s) => s.activeProjectId);
   const projects = useAppStore((s) => s.projects);
+  const [filterText, setFilterText] = useState("");
+  const filterInputRef = useRef<HTMLInputElement>(null);
 
   const activeProject = activeProjectId
     ? projects.find((p) => p.id === activeProjectId)
     : null;
 
-  const handleOpenFolder = useCallback(() => {
+  const handleRevealInExplorer = useCallback(() => {
     if (activeProject?.path) {
       invoke("open_file_in_os", { path: activeProject.path });
     }
   }, [activeProject?.path]);
 
+  const handleClearFilter = useCallback(() => {
+    setFilterText("");
+    filterInputRef.current?.focus();
+  }, []);
+
   return (
     <div
       className="relative flex flex-col overflow-hidden select-none border-l border-border bg-card/60"
@@ -33,32 +40,67 @@ export default function RightSidebar() {
         </span>
       </div>
 
+      {/* Search/filter input */}
+      {activeProject && (
+        <div className="shrink-0 px-2 py-1.5 border-b border-border">
+          <div className="relative flex items-center">
+            <Search
+              size={12}
+              className="absolute left-2 text-muted-foreground pointer-events-none"
+            />
+            <input
+              ref={filterInputRef}
+              type="text"
+              value={filterText}
+              onChange={(e) => setFilterText(e.target.value)}
+              placeholder="Filter files..."
+              className="w-full h-6 pl-6 pr-6 rounded bg-muted/50 border border-border text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+            />
+            {filterText && (
+              <button
+                type="button"
+                onClick={handleClearFilter}
+                className="absolute right-1.5 text-muted-foreground hover:text-foreground cursor-pointer"
+              >
+                <X size={12} />
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Body */}
       <div className="flex-1 min-h-0 overflow-y-auto">
         {activeProject ? (
           <FileTree
             projectPath={activeProject.path}
             projectId={activeProject.id}
+            filterText={filterText}
           />
         ) : (
-          <div className="flex items-center justify-center h-full px-4">
-            <p className="text-xs text-muted-foreground text-center">
-              Select a project to browse files
+          <div className="flex flex-col items-center justify-center h-full px-4">
+            <FolderTree className="mb-3 size-10 opacity-30 text-muted-foreground" />
+            <p className="text-sm font-medium text-foreground">
+              No project open
+            </p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Open a project to browse its files
             </p>
           </div>
         )}
       </div>
 
-      {/* Footer — Open Folder button */}
+      {/* Footer — Reveal in Explorer button */}
       {activeProject && (
         <div className="shrink-0 border-t border-border px-2 py-1.5">
           <button
             type="button"
-            onClick={handleOpenFolder}
+            onClick={handleRevealInExplorer}
             className="flex items-center gap-1.5 w-full px-2 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer"
+            title="Open the project folder in your system file manager"
           >
-            <FolderOpen size={13} />
-            <span>Open Folder</span>
+            <ExternalLink size={13} />
+            <span>Reveal in File Manager</span>
           </button>
         </div>
       )}
diff --git a/src/components/Shell/RightSidebarResizeHandle.tsx b/src/components/Shell/RightSidebarResizeHandle.tsx
index a0737ca..b3290ca 100644
--- a/src/components/Shell/RightSidebarResizeHandle.tsx
+++ b/src/components/Shell/RightSidebarResizeHandle.tsx
@@ -40,15 +40,14 @@ export default function RightSidebarResizeHandle() {
   return (
     <div
       onMouseDown={onMouseDown}
-      style={{
-        position: "absolute",
-        top: 0,
-        left: -3,
-        width: 6,
-        height: "100%",
-        cursor: "col-resize",
-        zIndex: 10,
-      }}
-    />
+      className="group absolute top-0 -left-[3px] w-1.5 h-full cursor-col-resize z-10"
+    >
+      {/* Grip dots — appear on hover */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+      </div>
+    </div>
   );
 }
diff --git a/src/components/Shell/Sidebar.tsx b/src/components/Shell/Sidebar.tsx
index bd5d20b..b29669d 100644
--- a/src/components/Shell/Sidebar.tsx
+++ b/src/components/Shell/Sidebar.tsx
@@ -1,11 +1,9 @@
 import {
   AlertCircle,
-  Bot,
   Bug,
   CheckCircle2,
   ChevronDown,
   ChevronRight,
-  CircleHelp,
   CirclePause,
   CirclePlay,
   ClipboardList,
@@ -19,11 +17,8 @@ import {
   Lightbulb,
   Loader2,
   MessageCircle,
-  MessageSquare,
   Plus,
   Settings,
-  Shield,
-  SlidersHorizontal,
   TerminalSquare,
 } from "lucide-react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -35,14 +30,7 @@ import { useProjectIcon } from "../../hooks/useProjectIcon";
 import { AgentIcon } from "../../lib/agentIcons";
 import { useAppStore } from "../../store/appStore";
 import { pickProjectFolder } from "../../utils/pickProjectFolder";
-import { AcpPermissionsTab } from "../Settings/AcpPermissionsTab";
-import { AgentsTab } from "../Settings/AgentsTab";
-import { GeneralTab } from "../Settings/GeneralTab";
-
 import { ManageProjectsTab } from "../Settings/ProjectsTab";
-import { ProjectSettingsDialog } from "../Settings/ProjectSettingsDialog";
-import { PromptsTab } from "../Settings/PromptsTab";
-import { TerminalTab } from "../Settings/TerminalTab";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import {
   DropdownMenu,
@@ -56,10 +44,7 @@ import { Button } from "../ui/orecus.io/components/enhanced-button";
 import { gradientHexColors } from "../ui/orecus.io/lib/color-utils";
 import { FaberLogo } from "../ui/FaberLogo";
 import SidebarResizeHandle from "./SidebarResizeHandle";
-import SidebarStatusPanel from "./SidebarStatusPanel";
-import UsagePanel from "./UsagePanel";
 
-import type { LucideIcon } from "lucide-react";
 import type { ChangedFile, McpSessionState, SessionStatus, WorktreeInfo } from "../../types";
 import type { ThemeColor } from "../ui/orecus.io/lib/color-utils";
 
@@ -67,139 +52,6 @@ import type { ThemeColor } from "../ui/orecus.io/lib/color-utils";
 const EMPTY_SESSIONS: never[] = [];
 const EMPTY_WORKTREES: WorktreeInfo[] = [];
 
-// ── Settings Bar ──
-
-type SettingsDialogId =
-  | "general"
-  | "terminal"
-  | "agents"
-  | "prompts"
-  | "manage-projects"
-  | "acp-permissions";
-
-const SETTINGS_ITEMS: {
-  id: SettingsDialogId;
-  icon: LucideIcon;
-  title: string;
-  tooltip: string;
-  maxWidth: string;
-}[] = [
-  {
-    id: "general",
-    icon: SlidersHorizontal,
-    title: "General Settings",
-    tooltip: "General",
-    maxWidth: "sm:max-w-xl",
-  },
-  {
-    id: "terminal",
-    icon: TerminalSquare,
-    title: "Terminal Settings",
-    tooltip: "Terminal",
-    maxWidth: "sm:max-w-md",
-  },
-  {
-    id: "agents",
-    icon: Bot,
-    title: "Agent Configuration",
-    tooltip: "Agents",
-    maxWidth: "sm:max-w-2xl",
-  },
-  {
-    id: "prompts",
-    icon: MessageSquare,
-    title: "Prompt Templates & Quick Actions",
-    tooltip: "Prompts",
-    maxWidth: "sm:max-w-2xl",
-  },
-  {
-    id: "acp-permissions",
-    icon: Shield,
-    title: "ACP Permissions",
-    tooltip: "ACP Permissions",
-    maxWidth: "sm:max-w-2xl",
-  },
-];
-
-// Dialog config for items not in the settings bar (opened externally)
-const EXTRA_DIALOG_CONFIG: Record<string, { title: string; maxWidth: string }> =
-  {
-    "manage-projects": { title: "Manage Projects", maxWidth: "sm:max-w-xl" },
-  };
-
-function SettingsBar({
-  openDialog,
-  setOpenDialog,
-}: {
-  openDialog: SettingsDialogId | null;
-  setOpenDialog: (id: SettingsDialogId | null) => void;
-}) {
-  const agents = useAppStore((s) => s.agents);
-  const setActiveView = useAppStore((s) => s.setActiveView);
-  const config = openDialog
-    ? (SETTINGS_ITEMS.find((i) => i.id === openDialog) ??
-      (EXTRA_DIALOG_CONFIG[openDialog]
-        ? { ...EXTRA_DIALOG_CONFIG[openDialog], id: openDialog }
-        : null))
-    : null;
-
-  return (
-    <>
-      <div className="flex items-center justify-center gap-0.5 px-2 py-1">
-        {SETTINGS_ITEMS.map((item) => {
-          const Icon = item.icon;
-          return (
-            <Button
-              key={item.id}
-              variant="ghost"
-              size="icon-sm"
-              hoverEffect="none"
-              clickEffect="none"
-              title={item.tooltip}
-              onClick={() => setOpenDialog(item.id)}
-            >
-              <Icon size={14} />
-            </Button>
-          );
-        })}
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          hoverEffect="none"
-          clickEffect="none"
-          title="Help & Docs"
-          onClick={() => setActiveView("help")}
-        >
-          <CircleHelp size={14} />
-        </Button>
-      </div>
-
-      {openDialog && config && (
-        <Dialog
-          open
-          onOpenChange={(open) => {
-            if (!open) setOpenDialog(null);
-          }}
-        >
-          <DialogContent className={config.maxWidth}>
-            <DialogHeader>
-              <DialogTitle>{config.title}</DialogTitle>
-            </DialogHeader>
-            <div className="max-h-[70vh] overflow-y-auto -mx-6 px-6">
-              {openDialog === "general" && <GeneralTab />}
-              {openDialog === "terminal" && <TerminalTab />}
-              {openDialog === "agents" && <AgentsTab agents={agents} />}
-              {openDialog === "prompts" && <PromptsTab />}
-              {openDialog === "manage-projects" && <ManageProjectsTab />}
-              {openDialog === "acp-permissions" && <AcpPermissionsTab />}
-            </div>
-          </DialogContent>
-        </Dialog>
-      )}
-    </>
-  );
-}
-
 // ── Helpers ──
 
 const STATUS_COLOR: Record<string, string> = {
@@ -400,7 +252,7 @@ const ProjectSessionList = React.memo(function ProjectSessionList({
 
   return (
     <>
-      <div className="px-1 pt-2 pb-1 text-[11px] uppercase tracking-wide text-muted-foreground">
+      <div className="px-1 pt-2.5 pb-1.5 text-[11px] uppercase tracking-wide text-muted-foreground">
         Sessions
       </div>
       <div className="text-dim-foreground">
@@ -444,12 +296,12 @@ const ProjectWorktreeList = React.memo(function ProjectWorktreeList({
 
   return (
     <>
-      <div className="px-1 pt-2 pb-1 text-[11px] uppercase tracking-wide text-muted-foreground">
+      <div className="px-1 pt-2.5 pb-1.5 text-[11px] uppercase tracking-wide text-muted-foreground">
         Worktrees
       </div>
       <div className="pb-1">
         {nonMainWorktrees.length === 0 ? (
-          <div className="flex items-center gap-1.5 px-1 py-1 text-xs text-muted-foreground/60">
+          <div className="flex items-center gap-1.5 px-1 h-7 text-xs text-muted-foreground/60">
             <GitFork size={12} />
             <span>No worktrees</span>
           </div>
@@ -464,7 +316,7 @@ const ProjectWorktreeList = React.memo(function ProjectWorktreeList({
                   onSelect();
                   navigateToReview(w.path);
                 }}
-                className={`flex items-center gap-1.5 px-1 py-1 text-xs rounded-[var(--radius-element)] cursor-pointer hover:bg-accent ${isActiveWorktree ? "bg-accent text-foreground" : "text-dim-foreground"}`}
+                className={`flex items-center gap-1.5 px-1 h-7 text-xs rounded-[var(--radius-element)] cursor-pointer hover:bg-accent ${isActiveWorktree ? "bg-accent text-foreground" : "text-dim-foreground"}`}
               >
                 <GitFork
                   size={12}
@@ -557,7 +409,7 @@ const ProjectItem = React.memo(function ProjectItem({
       {/* Project header */}
       <div
         onClick={onSelect}
-        className={`group flex items-center gap-1.5 px-2 h-8 cursor-pointer ${
+        className={`group flex items-center gap-1.5 px-2 h-8 cursor-pointer transition-colors duration-150 ${
           isActive ? "bg-accent/50" : "hover:bg-accent/30"
         }`}
       >
@@ -591,7 +443,7 @@ const ProjectItem = React.memo(function ProjectItem({
             render={
               <span
                 onClick={(e) => e.stopPropagation()}
-                className="cursor-pointer text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0 inline-flex items-center justify-center size-5 rounded-sm hover:bg-accent/50"
+                className="cursor-pointer text-muted-foreground hover:text-foreground opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity shrink-0 inline-flex items-center justify-center size-5 rounded-sm hover:bg-accent/50"
               />
             }
           >
@@ -645,21 +497,12 @@ export default function Sidebar() {
   const openProjectIds = useAppStore((s) => s.openProjectIds);
   const activeProjectId = useAppStore((s) => s.activeProjectId);
   const setActiveProject = useAppStore((s) => s.setActiveProject);
+  const setActiveView = useAppStore((s) => s.setActiveView);
   const closeProject = useAppStore((s) => s.closeProject);
   const addProjectFromPath = useAppStore((s) => s.addProjectFromPath);
-  const agents = useAppStore((s) => s.agents);
   const [showIcons] = usePersistedBoolean("show_project_icons", true);
-  const [settingsDialog, setSettingsDialog] = useState<SettingsDialogId | null>(
-    null,
-  );
-  const [projectSettingsId, setProjectSettingsId] = useState<string | null>(null);
+  const [manageProjectsOpen, setManageProjectsOpen] = useState(false);
   const [showCreateProject, setShowCreateProject] = useState(false);
-  const [version, setVersion] = useState("");
-
-  useEffect(() => {
-    invoke<string>("get_app_version").then(setVersion).catch(() => {});
-  }, []);
-
   const openProjects = useMemo(
     () => projects.filter((p) => openProjectIds.includes(p.id)),
     [projects, openProjectIds],
@@ -674,6 +517,15 @@ export default function Sidebar() {
     [closeProject],
   );
 
+  const handleOpenProjectSettings = useCallback(
+    (projectId: string) => {
+      // Ensure the project is active, then navigate to project settings
+      setActiveProject(projectId);
+      setActiveView("settings");
+    },
+    [setActiveProject, setActiveView],
+  );
+
   async function handleAddProject() {
     try {
       const selected = await pickProjectFolder();
@@ -694,16 +546,13 @@ export default function Sidebar() {
         <div className="flex items-center gap-1.5 flex-1 min-w-0">
           <FaberLogo className="size-3.5 shrink-0 text-primary" />
           <span className="text-[11px] font-medium text-foreground">Faber</span>
-          {version && (
-            <span className="text-[10px] text-muted-foreground">v{version}</span>
-          )}
         </div>
         <Button
           variant="ghost"
           size="icon-sm"
           hoverEffect="none"
           clickEffect="none"
-          onClick={() => setSettingsDialog("manage-projects")}
+          onClick={() => setManageProjectsOpen(true)}
           title="Manage projects"
         >
           <Settings size={13} />
@@ -739,16 +588,21 @@ export default function Sidebar() {
         <CreateProjectDialog onDismiss={() => setShowCreateProject(false)} />
       )}
 
-      {projectSettingsId && (
-        <ProjectSettingsDialog
-          projectId={projectSettingsId}
-          agents={agents}
-          onDismiss={() => setProjectSettingsId(null)}
-        />
+      {manageProjectsOpen && (
+        <Dialog open onOpenChange={(open) => { if (!open) setManageProjectsOpen(false); }}>
+          <DialogContent className="sm:max-w-xl">
+            <DialogHeader>
+              <DialogTitle>Manage Projects</DialogTitle>
+            </DialogHeader>
+            <div className="max-h-[70vh] overflow-y-auto -mx-6 px-6">
+              <ManageProjectsTab />
+            </div>
+          </DialogContent>
+        </Dialog>
       )}
 
       {/* ── Scrollable project list ── */}
-      <div className="flex-1 min-h-0 overflow-y-auto divide-y divide-border/40">
+      <div className="flex-1 min-h-0 overflow-y-auto divide-y divide-border/60">
         {openProjects.map((project) => (
           <ProjectItem
             key={project.id}
@@ -757,21 +611,11 @@ export default function Sidebar() {
             showIcons={showIcons}
             onSelect={() => handleSelectProject(project.id)}
             onClose={() => handleCloseProject(project.id)}
-            onOpenSettings={() => setProjectSettingsId(project.id)}
+            onOpenSettings={() => handleOpenProjectSettings(project.id)}
           />
         ))}
       </div>
 
-      {/* ── Bottom: settings + status ── */}
-      <div className="mt-auto shrink-0 border-t border-border">
-        <SettingsBar
-          openDialog={settingsDialog}
-          setOpenDialog={setSettingsDialog}
-        />
-        <UsagePanel />
-        <SidebarStatusPanel />
-      </div>
-
       <SidebarResizeHandle />
     </div>
   );
diff --git a/src/components/Shell/SidebarResizeHandle.tsx b/src/components/Shell/SidebarResizeHandle.tsx
index 75dbdc5..a2d85da 100644
--- a/src/components/Shell/SidebarResizeHandle.tsx
+++ b/src/components/Shell/SidebarResizeHandle.tsx
@@ -42,15 +42,14 @@ export default function SidebarResizeHandle() {
   return (
     <div
       onMouseDown={onMouseDown}
-      style={{
-        position: "absolute",
-        top: 0,
-        right: -3,
-        width: 6,
-        height: "100%",
-        cursor: "col-resize",
-        zIndex: 10,
-      }}
-    />
+      className="group absolute top-0 -right-[3px] w-1.5 h-full cursor-col-resize z-10"
+    >
+      {/* Grip dots — appear on hover */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+      </div>
+    </div>
   );
 }
diff --git a/src/components/Shell/SidebarStatusPanel.tsx b/src/components/Shell/SidebarStatusPanel.tsx
index 811a552..b9fd20e 100644
--- a/src/components/Shell/SidebarStatusPanel.tsx
+++ b/src/components/Shell/SidebarStatusPanel.tsx
@@ -115,7 +115,7 @@ export default function SidebarStatusPanel() {
             ) : (
               <Copy
                 size={12}
-                className="opacity-0 group-hover/row:opacity-100 transition-opacity text-muted-foreground"
+                className="opacity-30 group-hover/row:opacity-100 group-focus-within/row:opacity-100 transition-opacity text-muted-foreground"
               />
             )
           }
diff --git a/src/components/Shell/StatusBar.tsx b/src/components/Shell/StatusBar.tsx
new file mode 100644
index 0000000..1038970
--- /dev/null
+++ b/src/components/Shell/StatusBar.tsx
@@ -0,0 +1,413 @@
+import { invoke } from "@tauri-apps/api/core";
+import {
+  AlertTriangle,
+  BarChart3,
+  Check,
+  Copy,
+  Loader2,
+  Radio,
+  RefreshCw,
+  Settings,
+} from "lucide-react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { AgentIcon } from "../../lib/agentIcons";
+import { useAppStore } from "../../store/appStore";
+import UsageProgressBar from "./UsageProgressBar";
+
+import type { AgentUsageData, McpInfo, ViewId } from "../../types";
+
+// ── Key command config per view ──
+
+interface KeyCommand {
+  keys: string;
+  label: string;
+}
+
+const VIEW_KEY_COMMANDS: Record<ViewId, KeyCommand[]> = {
+  dashboard: [
+    { keys: "Ctrl+N", label: "New task" },
+    { keys: "Ctrl+K", label: "Command" },
+    { keys: "/", label: "Search" },
+  ],
+  sessions: [
+    { keys: "Ctrl+K", label: "Command" },
+    { keys: "Ctrl+B", label: "Files" },
+  ],
+  chat: [
+    { keys: "Enter", label: "Send" },
+    { keys: "Ctrl+K", label: "Command" },
+  ],
+  "task-detail": [
+    { keys: "Ctrl+K", label: "Command" },
+    { keys: "Esc", label: "Back" },
+  ],
+  review: [{ keys: "Ctrl+K", label: "Command" }],
+  github: [{ keys: "Ctrl+K", label: "Command" }],
+  "skills-rules": [
+    { keys: "Ctrl+S", label: "Save" },
+    { keys: "Ctrl+K", label: "Command" },
+  ],
+  help: [{ keys: "Ctrl+K", label: "Command" }],
+  settings: [
+    { keys: "Esc", label: "Back" },
+    { keys: "Ctrl+K", label: "Command" },
+  ],
+};
+
+// ── Kbd badge ──
+
+function Kbd({ keys, label }: KeyCommand) {
+  return (
+    <span className="inline-flex items-center gap-1 text-[10px] text-muted-foreground select-none">
+      <kbd className="px-1 py-px rounded bg-accent/60 font-mono text-[10px] text-dim-foreground">
+        {keys}
+      </kbd>
+      <span>{label}</span>
+    </span>
+  );
+}
+
+// ── Usage popover content (reuses AgentUsageSection pattern) ──
+
+const AgentUsageSection = React.memo(function AgentUsageSection({
+  agent,
+}: {
+  agent: AgentUsageData;
+}) {
+  if (agent.needs_auth) {
+    return (
+      <div className="px-1 py-1">
+        <div className="flex items-center gap-1.5 text-[11px] text-dim-foreground mb-1">
+          <AgentIcon
+            agent={agent.agent_name}
+            size={13}
+            className="shrink-0 opacity-80"
+          />
+          <span className="truncate">{agent.display_name}</span>
+        </div>
+        <div className="px-3 text-[10px] text-muted-foreground">
+          Run{" "}
+          <code className="px-1 py-px rounded bg-accent/60 text-[10px]">
+            claude
+          </code>{" "}
+          to authenticate
+        </div>
+      </div>
+    );
+  }
+
+  if (agent.error) {
+    return (
+      <div className="px-1 py-1">
+        <div className="flex items-center gap-1.5 text-[11px] text-dim-foreground mb-1">
+          <AgentIcon
+            agent={agent.agent_name}
+            size={13}
+            className="shrink-0 opacity-80"
+          />
+          <span className="truncate">{agent.display_name}</span>
+        </div>
+        <div className="flex items-center gap-1 px-3 text-[10px] text-destructive">
+          <AlertTriangle size={10} className="shrink-0" />
+          <span className="truncate">{agent.error}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (agent.windows.length === 0) return null;
+
+  return (
+    <div className="py-1">
+      <div className="flex items-center gap-1.5 px-1 text-[11px] text-dim-foreground mb-0.5">
+        <AgentIcon
+          agent={agent.agent_name}
+          size={13}
+          className="shrink-0 opacity-80"
+        />
+        <span className="truncate">{agent.display_name}</span>
+      </div>
+      {agent.windows.map((w) => (
+        <UsageProgressBar
+          key={w.label}
+          label={w.label}
+          utilization={w.utilization}
+          resetTime={w.resets_at}
+        />
+      ))}
+    </div>
+  );
+});
+
+// ── Usage indicator + popover ──
+
+const UsageIndicator = React.memo(function UsageIndicator() {
+  const agentUsage = useAppStore((s) => s.agentUsage);
+  const agentUsageLoading = useAppStore((s) => s.agentUsageLoading);
+  const fetchAgentUsage = useAppStore((s) => s.fetchAgentUsage);
+
+  // Compute the top utilization across all agents
+  const topUtilization = useMemo(() => {
+    let max = 0;
+    for (const agent of agentUsage) {
+      for (const w of agent.windows) {
+        if (w.utilization > max) max = w.utilization;
+      }
+    }
+    return Math.round(max);
+  }, [agentUsage]);
+
+  const handleRefresh = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      fetchAgentUsage();
+    },
+    [fetchAgentUsage],
+  );
+
+  if (agentUsage.length === 0 && !agentUsageLoading) return null;
+
+  const utilizationColor =
+    topUtilization >= 80
+      ? "text-destructive"
+      : topUtilization >= 50
+        ? "text-warning"
+        : "text-dim-foreground";
+
+  return (
+    <Popover>
+      <PopoverTrigger className="inline-flex items-center gap-1.5 px-2 h-full text-[11px] text-dim-foreground cursor-pointer hover:bg-accent/40 rounded-sm transition-colors">
+        {agentUsageLoading ? (
+          <Loader2 size={12} className="animate-spin text-muted-foreground" />
+        ) : (
+          <BarChart3 size={12} className={utilizationColor} />
+        )}
+        <span className={utilizationColor}>{topUtilization}%</span>
+      </PopoverTrigger>
+      <PopoverContent
+        side="top"
+        sideOffset={6}
+        align="start"
+        className="w-64 p-0"
+      >
+        <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+          <span className="text-[11px] font-medium text-foreground">
+            Agent Usage
+          </span>
+          <button
+            onClick={handleRefresh}
+            className="p-0.5 rounded hover:bg-accent/60 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {agentUsageLoading ? (
+              <Loader2 size={11} className="animate-spin" />
+            ) : (
+              <RefreshCw size={11} />
+            )}
+          </button>
+        </div>
+        <div className="py-1 overflow-y-auto">
+          {agentUsage.map((agent) => (
+            <AgentUsageSection key={agent.agent_name} agent={agent} />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+});
+
+// ── MCP status segment ──
+
+const McpStatus = React.memo(function McpStatus() {
+  const mcpActiveCount = useAppStore((s) => Object.keys(s.mcpStatus).length);
+  const [mcpInfo, setMcpInfo] = useState<McpInfo | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const refreshMcpInfo = useCallback(() => {
+    invoke<McpInfo>("get_mcp_info")
+      .then(setMcpInfo)
+      .catch(() => setMcpInfo(null));
+  }, []);
+
+  useEffect(() => {
+    refreshMcpInfo();
+  }, [refreshMcpInfo]);
+
+  const mcpOnline = mcpInfo != null && mcpInfo.port > 0;
+
+  const handleCopy = useCallback(() => {
+    if (!mcpInfo?.sidecar_path) return;
+    navigator.clipboard.writeText(mcpInfo.sidecar_path).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [mcpInfo]);
+
+  return (
+    <button
+      onClick={handleCopy}
+      title={mcpOnline ? "Click to copy MCP sidecar path" : "MCP offline"}
+      className="group/mcp inline-flex items-center gap-1.5 px-2 h-full text-[11px] text-dim-foreground hover:bg-accent/40 rounded-sm transition-colors"
+    >
+      <Radio
+        size={12}
+        className={mcpOnline ? "text-success" : "text-muted-foreground"}
+      />
+      {mcpOnline ? (
+        <>
+          <span>
+            MCP :{mcpInfo.port}
+            {mcpActiveCount > 0 && (
+              <span className="ml-1 text-muted-foreground">
+                ({mcpActiveCount})
+              </span>
+            )}
+          </span>
+          {copied ? (
+            <Check size={10} className="text-success" />
+          ) : (
+            <Copy
+              size={10}
+              className="opacity-0 group-hover/mcp:opacity-100 transition-opacity text-muted-foreground"
+            />
+          )}
+        </>
+      ) : (
+        <span className="text-muted-foreground">MCP</span>
+      )}
+    </button>
+  );
+});
+
+// ── GitHub auth segment ──
+
+const GitHubStatus = React.memo(function GitHubStatus() {
+  const ghAuthStatus = useAppStore((s) => s.ghAuthStatus);
+
+  if (!ghAuthStatus) return null;
+
+  const notInstalled = !ghAuthStatus.installed;
+  const notAuthenticated =
+    ghAuthStatus.installed && !ghAuthStatus.authenticated;
+  const scopeWarning = ghAuthStatus.has_scope_warnings;
+  const hasWarning = notInstalled || notAuthenticated || scopeWarning;
+
+  if (!hasWarning && ghAuthStatus.authenticated) {
+    // All good — show subtle checkmark
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 px-2 h-full text-[11px] text-dim-foreground"
+        title={`GitHub: ${ghAuthStatus.username ?? "authenticated"}`}
+      >
+        <Check size={12} className="text-success" />
+        <span>GitHub</span>
+      </span>
+    );
+  }
+
+  if (!hasWarning) return null;
+
+  const warningText = notInstalled
+    ? "gh missing"
+    : notAuthenticated
+      ? "gh unauthed"
+      : "gh scopes";
+
+  const tooltip = notInstalled
+    ? "GitHub CLI (gh) is not installed"
+    : notAuthenticated
+      ? "GitHub CLI is not authenticated. Run `gh auth login`"
+      : `Missing scopes: ${ghAuthStatus.missing_scopes.join(", ")}`;
+
+  const isScopeOnly = scopeWarning && !notInstalled && !notAuthenticated;
+  const colorClass = isScopeOnly ? "text-warning" : "text-destructive";
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2 h-full text-[11px] ${colorClass}`}
+      title={tooltip}
+    >
+      <AlertTriangle size={12} />
+      <span>{warningText}</span>
+    </span>
+  );
+});
+
+// ── Status Bar ──
+
+export default function StatusBar() {
+  const activeView = useAppStore((s) => s.activeView);
+  const setActiveView = useAppStore((s) => s.setActiveView);
+
+  const [version, setVersion] = useState("");
+  useEffect(() => {
+    invoke<string>("get_app_version")
+      .then(setVersion)
+      .catch(() => {});
+  }, []);
+
+  const keyCommands = VIEW_KEY_COMMANDS[activeView] ?? [];
+
+  return (
+    <div
+      className="flex items-center h-7 min-h-7 max-h-7 border-t border-border select-none bg-card/60"
+      style={{ gridArea: "statusbar" }}
+    >
+      {/* ── Left zone ── */}
+      <div className="flex items-center h-full min-w-0 overflow-hidden">
+        <McpStatus />
+        <div className="w-px h-3.5 bg-border/60 shrink-0" />
+        <GitHubStatus />
+        <div className="w-px h-3.5 bg-border/60 shrink-0" />
+        <UsageIndicator />
+      </div>
+
+      {/* ── Right zone ── */}
+      <div className="ml-auto flex items-center gap-2 h-full pr-2">
+        {/* Contextual key commands */}
+        {keyCommands.length > 0 && (
+          <div className="hidden sm:flex items-center gap-2.5">
+            {keyCommands.map((cmd) => (
+              <Kbd
+                key={cmd.keys + cmd.label}
+                keys={cmd.keys}
+                label={cmd.label}
+              />
+            ))}
+          </div>
+        )}
+
+        {keyCommands.length > 0 && (
+          <div className="hidden sm:block w-px h-3.5 bg-border/60 shrink-0" />
+        )}
+
+        {/* Settings */}
+        <button
+          onClick={() => setActiveView("settings")}
+          className={`inline-flex items-center gap-1.5 px-1.5 h-5 rounded-sm transition-colors ${
+            activeView === "settings"
+              ? "text-primary bg-accent/60"
+              : "text-muted-foreground hover:text-foreground hover:bg-accent/40"
+          }`}
+          title="Settings (Ctrl+,)"
+        >
+          <Settings size={13} />
+          <span className="text-[11px]">Settings</span>
+        </button>
+
+        {/* Version */}
+        {version && (
+          <span className="text-[10px] text-muted-foreground tabular-nums">
+            v{version}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Shell/UsagePanel.tsx b/src/components/Shell/UsagePanel.tsx
index 8a02a69..7c0d301 100644
--- a/src/components/Shell/UsagePanel.tsx
+++ b/src/components/Shell/UsagePanel.tsx
@@ -107,7 +107,7 @@ const UsagePanel = React.memo(function UsagePanel() {
               e.stopPropagation();
               handleRefresh();
             }}
-            className="shrink-0 opacity-0 group-hover/usage:opacity-100 transition-opacity text-muted-foreground hover:text-foreground cursor-pointer"
+            className="shrink-0 opacity-30 group-hover/usage:opacity-100 group-focus-within/usage:opacity-100 transition-opacity text-muted-foreground hover:text-foreground cursor-pointer"
           />
         )}
       </div>
diff --git a/src/components/SkillsRules/AgentExtensionCard.tsx b/src/components/SkillsRules/AgentExtensionCard.tsx
index 2363db5..8451519 100644
--- a/src/components/SkillsRules/AgentExtensionCard.tsx
+++ b/src/components/SkillsRules/AgentExtensionCard.tsx
@@ -5,7 +5,6 @@ import {
   Download,
   ExternalLink,
   Globe,
-  RotateCcw,
   Terminal,
   X,
 } from "lucide-react";
@@ -25,8 +24,6 @@ interface AgentExtensionCardProps {
   agent: AgentInfo;
   installing: boolean;
   onInstallAdapter: (name: string, isUpdate: boolean) => void;
-  /** Whether this agent was just updated in the current session. */
-  justUpdated: boolean;
   /** Registry entry for this agent (if fetched). */
   registryEntry?: AcpRegistryEntry;
 }
@@ -35,7 +32,6 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
   agent,
   installing,
   onInstallAdapter,
-  justUpdated,
   registryEntry,
 }: AgentExtensionCardProps) {
   const { isGlass } = useTheme();
@@ -111,38 +107,29 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
               {agent.default_model}
             </span>
           )}
-          {justUpdated && registryEntry ? (
-            <span className="flex items-center gap-1 rounded-md bg-success/15 px-2 py-0.5 font-mono text-[11px] text-success">
-              <Check size={9} strokeWidth={2.5} />
+          {registryEntry?.installed_version && (
+            <span
+              className={`flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-[11px] ${
+                registryEntry.update_available
+                  ? "bg-muted/60 text-muted-foreground line-through decoration-muted-foreground/40"
+                  : "bg-primary/10 text-primary/80"
+              }`}
+            >
+              <Globe size={9} className="opacity-60" />
+              v{registryEntry.installed_version}
+            </span>
+          )}
+          {registryEntry?.update_available && (
+            <span className="flex items-center gap-1 rounded-md bg-warning/15 px-2 py-0.5 font-mono text-[11px] text-warning">
+              <ArrowUpCircle size={9} />
+              v{registryEntry.registry_version}
+            </span>
+          )}
+          {registryEntry && !registryEntry.installed_version && (
+            <span className="flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 font-mono text-[11px] text-primary/80">
+              <Globe size={9} className="opacity-60" />
               v{registryEntry.registry_version}
             </span>
-          ) : (
-            <>
-              {registryEntry?.installed_version && (
-                <span
-                  className={`flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-[11px] ${
-                    registryEntry.update_available
-                      ? "bg-muted/60 text-muted-foreground line-through decoration-muted-foreground/40"
-                      : "bg-primary/10 text-primary/80"
-                  }`}
-                >
-                  <Globe size={9} className="opacity-60" />
-                  v{registryEntry.installed_version}
-                </span>
-              )}
-              {registryEntry?.update_available && (
-                <span className="flex items-center gap-1 rounded-md bg-warning/15 px-2 py-0.5 font-mono text-[11px] text-warning">
-                  <ArrowUpCircle size={9} />
-                  v{registryEntry.registry_version}
-                </span>
-              )}
-              {registryEntry && !registryEntry.installed_version && (
-                <span className="flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 font-mono text-[11px] text-primary/80">
-                  <Globe size={9} className="opacity-60" />
-                  v{registryEntry.registry_version}
-                </span>
-              )}
-            </>
           )}
         </div>
 
@@ -246,32 +233,25 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
             </div>
 
             <div className="flex items-center gap-1.5">
-              {/* Update available / just updated */}
-              {justUpdated ? (
-                <span className="flex items-center gap-1.5 rounded-full bg-success/15 px-2.5 py-1 text-[11px] font-medium text-success">
-                  <RotateCcw size={11} />
-                  Restart app to apply
-                </span>
-              ) : (
-                registryEntry?.update_available && agent.acp_installed && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    hoverEffect="none"
-                    clickEffect="scale"
-                    onClick={() => onInstallAdapter(agent.name, true)}
-                    disabled={installing}
-                    loading={installing}
-                    leftIcon={!installing ? <ArrowUpCircle size={12} /> : undefined}
-                    className="h-7 px-2.5 text-[11px] border-warning/40 text-warning hover:bg-warning/10 hover:text-warning cursor-pointer"
-                  >
-                    Update to v{registryEntry.registry_version}
-                  </Button>
-                )
+              {/* Update available */}
+              {registryEntry?.update_available && agent.acp_installed && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  hoverEffect="none"
+                  clickEffect="scale"
+                  onClick={() => onInstallAdapter(agent.name, true)}
+                  disabled={installing}
+                  loading={installing}
+                  leftIcon={!installing ? <ArrowUpCircle size={12} /> : undefined}
+                  className="h-7 px-2.5 text-[11px] border-warning/40 text-warning hover:bg-warning/10 hover:text-warning cursor-pointer"
+                >
+                  Update to v{registryEntry.registry_version}
+                </Button>
               )}
 
               {/* Install adapter button */}
-              {needsAdapter && !agent.acp_installed && !justUpdated && (
+              {needsAdapter && !agent.acp_installed && (
                 <Button
                   variant="outline"
                   size="sm"
diff --git a/src/components/SkillsRules/AgentsExtensionTab.tsx b/src/components/SkillsRules/AgentsExtensionTab.tsx
index 94c5725..513fd75 100644
--- a/src/components/SkillsRules/AgentsExtensionTab.tsx
+++ b/src/components/SkillsRules/AgentsExtensionTab.tsx
@@ -37,7 +37,6 @@ export default function AgentsExtensionTab({
   );
   const [refreshing, setRefreshing] = useState(false);
   const [installError, setInstallError] = useState<string | null>(null);
-  const [updatedAgents, setUpdatedAgents] = useState<Set<string>>(new Set());
 
   const installedCount = useMemo(
     () => agents.filter((a) => a.installed).length,
@@ -104,20 +103,27 @@ export default function AgentsExtensionTab({
     setInstallingAdapter(agentName);
     setInstallError(null);
     try {
+      // When updating, pin to the exact registry version so npm installs that specific version
+      const targetVersion = isUpdate
+        ? registryByAgent.get(agentName)?.registry_version
+        : undefined;
       const updated = await invoke<AgentInfo[]>("install_acp_adapter", {
         agentName,
+        targetVersion,
       });
       useAppStore.getState().setAgents(updated);
-      if (isUpdate) {
-        setUpdatedAgents((prev) => new Set(prev).add(agentName));
-      }
+      useAppStore.getState().flashSuccess(isUpdate ? `Updated ${agentName} adapter` : `Installed ${agentName} adapter`);
+
+      // Re-fetch registry so update_available is recalculated with the new version
+      // (backend caches were invalidated by install_acp_adapter)
+      await fetchAcpRegistry(true);
     } catch (err) {
       setInstallError(formatError(err));
       setTimeout(() => setInstallError(null), 6000);
     } finally {
       setInstallingAdapter(null);
     }
-  }, []);
+  }, [fetchAcpRegistry, registryByAgent]);
 
   return (
     <div className="flex flex-1 flex-col overflow-y-auto p-4">
@@ -198,7 +204,6 @@ export default function AgentsExtensionTab({
             agent={agent}
             installing={installingAdapter === agent.name}
             onInstallAdapter={handleInstallAdapter}
-            justUpdated={updatedAgents.has(agent.name)}
             registryEntry={registryByAgent.get(agent.name)}
           />
         ))}
diff --git a/src/components/SkillsRules/InstalledSkillsList.tsx b/src/components/SkillsRules/InstalledSkillsList.tsx
index 44d739b..44bab94 100644
--- a/src/components/SkillsRules/InstalledSkillsList.tsx
+++ b/src/components/SkillsRules/InstalledSkillsList.tsx
@@ -10,6 +10,8 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
+import ConfirmDialog from "../Review/ConfirmDialog";
+import { Skeleton } from "../ui/skeleton";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 
 interface SkillInfo {
@@ -38,6 +40,7 @@ export default function InstalledSkillsList({
   const [data, setData] = useState<InstalledSkillsResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [removing, setRemoving] = useState<string | null>(null);
+  const [pendingRemove, setPendingRemove] = useState<SkillInfo | null>(null);
   const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({});
 
   const loadSkills = useCallback(async () => {
@@ -74,8 +77,16 @@ export default function InstalledSkillsList({
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-8">
-        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      <div className="px-3 py-3 space-y-2">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-2.5 px-3 py-2 rounded-md bg-accent/20">
+            <Skeleton className="size-[13px] rounded-sm shrink-0" />
+            <div className="flex-1 space-y-1.5">
+              <Skeleton className="h-3.5 w-1/3" />
+              <Skeleton className="h-3 w-2/3" />
+            </div>
+          </div>
+        ))}
       </div>
     );
   }
@@ -145,7 +156,7 @@ export default function InstalledSkillsList({
                 <Button
                   variant="ghost"
                   size="sm"
-                  onClick={() => handleRemove(skill)}
+                  onClick={() => setPendingRemove(skill)}
                   disabled={removing === skill.name}
                   leftIcon={
                     removing === skill.name ? (
@@ -187,6 +198,21 @@ export default function InstalledSkillsList({
         <Globe size={12} className="text-muted-foreground" />,
         globalSkills
       )}
+
+      {pendingRemove && (
+        <ConfirmDialog
+          variant="danger"
+          title="Remove skill?"
+          message={`This will remove "${pendingRemove.name}" from your ${pendingRemove.is_global ? "global" : "project"} skills.`}
+          confirmLabel="Remove"
+          onConfirm={() => {
+            const skill = pendingRemove;
+            setPendingRemove(null);
+            handleRemove(skill);
+          }}
+          onCancel={() => setPendingRemove(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/SkillsRules/PluginsTab.tsx b/src/components/SkillsRules/PluginsTab.tsx
index a646f01..4eb5546 100644
--- a/src/components/SkillsRules/PluginsTab.tsx
+++ b/src/components/SkillsRules/PluginsTab.tsx
@@ -7,6 +7,7 @@ import {
   Check,
   ChevronDown,
   ChevronRight,
+  ChevronUp,
   Code2,
   Download,
   ExternalLink,
@@ -29,10 +30,12 @@ import {
   X,
 } from "lucide-react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import ConfirmDialog from "../Review/ConfirmDialog";
 
 import { open } from "@tauri-apps/plugin-shell";
 import { Streamdown } from "streamdown";
 import { useTheme } from "../../contexts/ThemeContext";
+import { highlightMatch } from "../../lib/highlightMatch";
 import {
   streamdownControls,
   streamdownPlugins,
@@ -40,6 +43,7 @@ import {
 } from "../../lib/markdown";
 import { useAppStore } from "../../store/appStore";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
+import { CardSkeleton } from "../ui/orecus.io/cards/card/skeleton";
 import { glassStyles } from "../ui/orecus.io/lib/color-utils";
 
 // ── Types matching Rust backend ──
@@ -269,6 +273,7 @@ const PluginCard = React.memo(function PluginCard({
   onInstall,
   onUninstall,
   actionLoading,
+  searchQuery,
 }: {
   plugin: AvailablePlugin | InstalledPlugin;
   isInstalled: boolean;
@@ -278,6 +283,7 @@ const PluginCard = React.memo(function PluginCard({
   onInstall: () => void;
   onUninstall: () => void;
   actionLoading: string | null;
+  searchQuery?: string;
 }) {
   const key = `${plugin.name}@${plugin.marketplace}`;
   const installKey = `install:${key}`;
@@ -316,7 +322,7 @@ const PluginCard = React.memo(function PluginCard({
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
             <span className="text-[13px] font-medium text-foreground truncate">
-              {plugin.name}
+              {searchQuery ? highlightMatch(plugin.name, searchQuery) : plugin.name}
             </span>
             {isInstalled && (
               <Check size={12} className="text-success shrink-0" />
@@ -336,7 +342,7 @@ const PluginCard = React.memo(function PluginCard({
 
         {/* Action button — only show on hover or when loading */}
         <div
-          className={`shrink-0 ${isInstalling || isUninstalling ? "opacity-100" : "opacity-0 group-hover:opacity-100"} transition-opacity`}
+          className={`shrink-0 ${isInstalling || isUninstalling ? "opacity-100" : "opacity-30 group-hover:opacity-100 group-focus-within:opacity-100"} transition-opacity`}
           onClick={(e) => e.stopPropagation()}
         >
           {isInstalled ? (
@@ -378,7 +384,7 @@ const PluginCard = React.memo(function PluginCard({
       {/* Description */}
       {plugin.description && (
         <p className="text-[11px] leading-relaxed text-muted-foreground line-clamp-2">
-          {plugin.description}
+          {searchQuery ? highlightMatch(plugin.description, searchQuery) : plugin.description}
         </p>
       )}
 
@@ -424,6 +430,7 @@ function PluginDetailDrawer({
 }) {
   const [readme, setReadme] = useState<string | null>(null);
   const [readmeLoading, setReadmeLoading] = useState(false);
+  const [showScrollTop, setShowScrollTop] = useState(false);
   const panelRef = useRef<HTMLDivElement>(null);
 
   const isInstalled = selected.kind === "installed";
@@ -594,7 +601,11 @@ function PluginDetailDrawer({
       </div>
 
       {/* README */}
-      <div ref={panelRef} className="flex-1 min-h-0 overflow-y-auto">
+      <div
+        ref={panelRef}
+        className="relative flex-1 min-h-0 overflow-y-auto"
+        onScroll={(e) => setShowScrollTop(e.currentTarget.scrollTop > 200)}
+      >
         {readmeLoading && (
           <div className="flex items-center justify-center py-12">
             <Loader2 className="size-5 animate-spin text-muted-foreground" />
@@ -628,6 +639,16 @@ function PluginDetailDrawer({
             </button>
           </div>
         )}
+
+        {showScrollTop && (
+          <button
+            onClick={() => panelRef.current?.scrollTo({ top: 0, behavior: "smooth" })}
+            className="sticky bottom-3 float-right mr-3 flex items-center gap-1 px-2.5 py-1.5 rounded-full text-[11px] font-medium text-foreground bg-card/90 backdrop-blur ring-1 ring-border/40 shadow-md hover:ring-primary/30 transition-all"
+          >
+            <ChevronUp size={12} />
+            Top
+          </button>
+        )}
       </div>
     </div>
   );
@@ -685,7 +706,7 @@ function MarketplaceSources({
               </div>
               <button
                 onClick={() => onRemove(m.name)}
-                className="opacity-0 group-hover:opacity-60 hover:!opacity-100 text-destructive/60 hover:text-destructive transition-opacity"
+                className="opacity-30 group-hover:opacity-60 group-focus-within:opacity-60 hover:!opacity-100 text-destructive/60 hover:text-destructive transition-opacity"
                 title="Remove"
               >
                 <Unplug size={11} />
@@ -775,6 +796,8 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
   const [actionLoading, setActionLoading] = useState<string | null>(null);
   const [addMktLoading, setAddMktLoading] = useState(false);
   const [refreshMktLoading, setRefreshMktLoading] = useState(false);
+  const [pendingUninstall, setPendingUninstall] = useState<{ name: string; marketplace: string; scope: string } | null>(null);
+  const [pendingRemoveMkt, setPendingRemoveMkt] = useState<string | null>(null);
 
   const searchInputRef = useRef<HTMLInputElement>(null);
 
@@ -936,12 +959,15 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
   // ── Action handlers ──
 
   const withBackground = useCallback(
-    async (label: string, fn: () => Promise<void>) => {
+    async (label: string, fn: () => Promise<void>, successMessage?: string) => {
       const { addBackgroundTask, removeBackgroundTask } = useAppStore.getState();
       addBackgroundTask(label);
       try {
         await fn();
         await loadPlugins();
+        if (successMessage) {
+          useAppStore.getState().flashSuccess(successMessage);
+        }
       } catch (e) {
         console.error(`${label} failed:`, e);
         useAppStore.getState().flashError(`${label} failed: ${formatError(e)}`);
@@ -961,7 +987,7 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
           pluginName: `${name}@${marketplace}`,
           scope: "user",
         });
-      });
+      }, `Installed ${name}`);
       setActionLoading(null);
     },
     [withBackground],
@@ -976,7 +1002,7 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
           pluginName: `${name}@${marketplace}`,
           scope,
         });
-      });
+      }, `Uninstalled ${name}`);
       setActionLoading(null);
     },
     [withBackground],
@@ -991,12 +1017,23 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
           pluginName: `${name}@${marketplace}`,
           scope,
         });
-      });
+      }, `Updated ${name}`);
       setActionLoading(null);
     },
     [withBackground],
   );
 
+  const requestUninstall = useCallback(
+    (name: string, marketplace: string, scope: string) => {
+      setPendingUninstall({ name, marketplace, scope });
+    },
+    [],
+  );
+
+  const requestRemoveMarketplace = useCallback((name: string) => {
+    setPendingRemoveMkt(name);
+  }, []);
+
   const handleAddMarketplace = useCallback(
     async (source: string) => {
       setAddMktLoading(true);
@@ -1029,8 +1066,12 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
 
   if (loading) {
     return (
-      <div className="flex-1 flex items-center justify-center">
-        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      <div className={`flex-1 min-h-0 overflow-hidden rounded-lg ring-1 ring-border/40 p-4 ${glassStyles[isGlass ? "normal" : "solid"]}`}>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <CardSkeleton key={i} type={isGlass ? "normal" : "solid"} hasHeader lines={2} />
+          ))}
+        </div>
       </div>
     );
   }
@@ -1173,13 +1214,14 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
                   }}
                   onInstall={() => handleInstall(plugin.name, plugin.marketplace)}
                   onUninstall={() =>
-                    handleUninstall(
+                    requestUninstall(
                       plugin.name,
                       plugin.marketplace,
                       installedData?.scope ?? "user",
                     )
                   }
                   actionLoading={actionLoading}
+                  searchQuery={searchQuery}
                 />
               ))}
             </div>
@@ -1190,7 +1232,7 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
         <MarketplaceSources
           marketplaces={data?.marketplaces ?? []}
           onAdd={handleAddMarketplace}
-          onRemove={handleRemoveMarketplace}
+          onRemove={requestRemoveMarketplace}
           onRefresh={handleRefreshMarketplaces}
           addLoading={addMktLoading}
           refreshLoading={refreshMktLoading}
@@ -1204,12 +1246,42 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
             selected={selected}
             onClose={() => setSelected(null)}
             onInstall={handleInstall}
-            onUninstall={handleUninstall}
+            onUninstall={requestUninstall}
             onUpdate={handleUpdate}
             actionLoading={actionLoading}
           />
         </div>
       )}
+
+      {pendingUninstall && (
+        <ConfirmDialog
+          variant="danger"
+          title="Uninstall plugin?"
+          message={`This will uninstall "${pendingUninstall.name}" and remove its skills, agents, and hooks from your environment.`}
+          confirmLabel="Uninstall"
+          onConfirm={() => {
+            const { name, marketplace, scope } = pendingUninstall;
+            setPendingUninstall(null);
+            handleUninstall(name, marketplace, scope);
+          }}
+          onCancel={() => setPendingUninstall(null)}
+        />
+      )}
+
+      {pendingRemoveMkt && (
+        <ConfirmDialog
+          variant="danger"
+          title="Remove marketplace?"
+          message={`This will remove the "${pendingRemoveMkt}" marketplace source. Plugins already installed from it will remain, but you won't see new updates.`}
+          confirmLabel="Remove"
+          onConfirm={() => {
+            const name = pendingRemoveMkt;
+            setPendingRemoveMkt(null);
+            handleRemoveMarketplace(name);
+          }}
+          onCancel={() => setPendingRemoveMkt(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/SkillsRules/SkillsTab.tsx b/src/components/SkillsRules/SkillsTab.tsx
index 4f809f7..9f1becd 100644
--- a/src/components/SkillsRules/SkillsTab.tsx
+++ b/src/components/SkillsRules/SkillsTab.tsx
@@ -7,6 +7,7 @@ import {
   Search,
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { highlightMatch } from "../../lib/highlightMatch";
 
 import { open } from "@tauri-apps/plugin-shell";
 
@@ -108,6 +109,7 @@ export default function SkillsTab({ projectId }: Props) {
           global,
         });
         setRefreshKey((k) => k + 1);
+        useAppStore.getState().flashSuccess(`Removed ${skillName}`);
       } catch (e) {
         console.error("Skill remove failed:", e);
         useAppStore.getState().flashError(`Remove failed: ${formatError(e)}`);
@@ -180,7 +182,7 @@ export default function SkillsTab({ projectId }: Props) {
                         className="text-sm font-medium text-foreground hover:text-primary truncate transition-colors inline-flex items-center gap-1"
                         title={`View on skills.sh`}
                       >
-                        {skill.name}
+                        {highlightMatch(skill.name, query)}
                         <ExternalLink
                           size={11}
                           className="opacity-50 shrink-0"
@@ -194,7 +196,7 @@ export default function SkillsTab({ projectId }: Props) {
                     </div>
                     <div className="flex items-center gap-1 mt-0.5">
                       <span className="text-[10px] text-dim-foreground truncate">
-                        {skill.source}
+                        {highlightMatch(skill.source, query)}
                       </span>
                     </div>
                   </div>
diff --git a/src/components/TaskDetail/TaskBody.tsx b/src/components/TaskDetail/TaskBody.tsx
index 24e68f2..d91ae96 100644
--- a/src/components/TaskDetail/TaskBody.tsx
+++ b/src/components/TaskDetail/TaskBody.tsx
@@ -62,7 +62,7 @@ export default function TaskBody({ body, onChange, onSave }: TaskBodyProps) {
       {/* Edit button overlay */}
       <button
         onClick={() => setEditing(true)}
-        className="cursor-pointer absolute right-2 top-1 z-10 flex items-center gap-1.5 rounded-md bg-accent/80 px-2 py-1 text-[11px] text-muted-foreground opacity-0 backdrop-blur-sm transition-all hover:bg-accent hover:text-foreground group-hover/body:opacity-100"
+        className="cursor-pointer absolute right-2 top-1 z-10 flex items-center gap-1.5 rounded-md bg-accent/80 px-2 py-1 text-[11px] text-muted-foreground opacity-30 backdrop-blur-sm transition-all hover:bg-accent hover:text-foreground group-hover/body:opacity-100 group-focus-within/body:opacity-100"
       >
         <Pencil className="size-3" />
         Edit
diff --git a/src/components/TaskDetail/TaskTitle.tsx b/src/components/TaskDetail/TaskTitle.tsx
index ae657fb..6789d16 100644
--- a/src/components/TaskDetail/TaskTitle.tsx
+++ b/src/components/TaskDetail/TaskTitle.tsx
@@ -83,7 +83,7 @@ export default function TaskTitle({ title, onChange, compact }: TaskTitleProps)
       <span className={`flex-1 font-semibold text-foreground ${compact ? "truncate text-[13px] leading-none" : "text-lg leading-snug"}`}>
         {title}
       </span>
-      <Pencil className={`shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/title:opacity-100 ${compact ? "size-3" : "mt-1 size-3.5"}`} />
+      <Pencil className={`shrink-0 text-muted-foreground opacity-30 transition-opacity group-hover/title:opacity-100 group-focus-within/title:opacity-100 ${compact ? "size-3" : "mt-1 size-3.5"}`} />
     </button>
   );
 }
diff --git a/src/components/ai-elements/attachments.tsx b/src/components/ai-elements/attachments.tsx
index baf2855..b6bd9a4 100644
--- a/src/components/ai-elements/attachments.tsx
+++ b/src/components/ai-elements/attachments.tsx
@@ -343,13 +343,13 @@ export const AttachmentRemove = ({
         variant === "grid" && [
           "absolute top-2 right-2 size-6 rounded-full p-0",
           "bg-background/80 backdrop-blur-sm",
-          "opacity-0 transition-opacity group-hover:opacity-100",
+          "opacity-30 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
           "hover:bg-background",
           "[&>svg]:size-3",
         ],
         variant === "inline" && [
           "size-5 rounded p-0",
-          "opacity-0 transition-opacity group-hover:opacity-100",
+          "opacity-30 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
           "[&>svg]:size-2.5",
         ],
         variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
diff --git a/src/lib/highlightMatch.tsx b/src/lib/highlightMatch.tsx
new file mode 100644
index 0000000..1611b7a
--- /dev/null
+++ b/src/lib/highlightMatch.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function highlightMatch(
+  text: string,
+  query: string,
+): React.ReactNode {
+  if (!query.trim()) return text;
+  const regex = new RegExp(`(${escapeRegex(query)})`, "gi");
+  const parts = text.split(regex);
+  return parts.map((part, i) =>
+    regex.test(part) ? (
+      <mark
+        key={i}
+        className="bg-warning/20 text-inherit rounded-sm px-0.5"
+      >
+        {part}
+      </mark>
+    ) : (
+      part
+    ),
+  );
+}
diff --git a/src/store/appStore.ts b/src/store/appStore.ts
index 6b91152..9537d38 100644
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -155,6 +155,7 @@ interface AppState {
 
   backgroundTasks: string[];
   errorFlash: string | null;
+  successFlash: string | null;
   sidebarCollapsed: boolean;
   sidebarWidth: number;
   rightSidebarOpen: boolean;
@@ -240,6 +241,7 @@ interface AppState {
   addBackgroundTask: (label: string) => void;
   removeBackgroundTask: (label: string) => void;
   flashError: (message: string) => void;
+  flashSuccess: (message: string) => void;
 
   // Research → Implementation flow
   /** Session IDs of research sessions that have completed (for showing the "Continue to Implementation" bar). */
@@ -349,6 +351,7 @@ export const useAppStore = create<AppState>()(
     agentSessionListFetchedAt: {},
     backgroundTasks: [],
     errorFlash: null,
+    successFlash: null,
     sidebarCollapsed: false,
     sidebarWidth: 260,
     rightSidebarOpen: false,
@@ -997,6 +1000,11 @@ export const useAppStore = create<AppState>()(
       setTimeout(() => set({ errorFlash: null }), 4000);
     },
 
+    flashSuccess: (message) => {
+      set({ successFlash: message });
+      setTimeout(() => set({ successFlash: null }), 3000);
+    },
+
     // ── Research → Implementation flow ──
 
     researchCompleteSessionIds: [],
@@ -1500,6 +1508,10 @@ export const useAppStore = create<AppState>()(
           e.preventDefault();
           get().toggleRightSidebar();
         }
+        if ((e.ctrlKey || e.metaKey) && e.key === ",") {
+          e.preventDefault();
+          get().setActiveView("settings");
+        }
         if (e.key === "Escape" && get().commandPaletteOpen) {
           get().closeCommandPalette();
         }
diff --git a/src/types.ts b/src/types.ts
index 9498b42..825192e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -14,7 +14,7 @@ export interface PriorityLevel {
 export type SessionMode = "task" | "vibe" | "shell" | "research" | "chat" | "breakdown";
 export type SessionTransport = "pty" | "acp";
 export type SessionStatus = "starting" | "running" | "paused" | "stopped" | "finished" | "error";
-export type ViewId = "dashboard" | "sessions" | "chat" | "task-detail" | "review" | "github" | "skills-rules" | "help";
+export type ViewId = "dashboard" | "sessions" | "chat" | "task-detail" | "review" | "github" | "skills-rules" | "help" | "settings";
 
 export interface Project {
   id: string;

From b1848d59cd84613da9e217304d5faaed81ff42a6 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Thu, 26 Mar 2026 20:05:42 +0100
Subject: [PATCH 04/16] fix: resolve GITHUB_TOKEN from shell env on macOS for
 gh auth

macOS GUI apps don't inherit env vars from shell profiles, so
GITHUB_TOKEN/GH_TOKEN set in .zshrc were invisible to Faber.
Expand fix_path_env() to capture important env vars beyond just PATH.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src-tauri/src/lib.rs | 60 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 0516f2c..5ef7820 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -28,40 +28,74 @@ pub(crate) struct LogDir(pub std::path::PathBuf);
 /// On macOS, GUI apps launched from Finder/Dock inherit a minimal system PATH
 /// (`/usr/bin:/bin:/usr/sbin:/sbin`) that doesn't include directories where
 /// CLI tools are typically installed (Homebrew, npm globals, cargo, etc.).
+/// They also miss environment variables set in shell profiles (e.g. GITHUB_TOKEN).
 ///
 /// This function runs the user's default login shell to resolve their full PATH
-/// and applies it to the current process so that `is_command_in_path()`, PTY
-/// spawns, and any other child processes see the same tools as a terminal.
+/// and important environment variables, then applies them to the current process
+/// so that `is_command_in_path()`, PTY spawns, `gh auth`, and any other child
+/// processes see the same environment as a terminal.
 #[cfg(target_os = "macos")]
 fn fix_path_env() {
     use std::process::Command;
 
     let shell = std::env::var("SHELL").unwrap_or_else(|_| "/bin/zsh".to_string());
 
-    // Run a login+interactive shell that just prints PATH, then exits.
+    // Environment variables to capture from the user's login shell.
+    // PATH is essential for finding CLI tools.
+    // GitHub/GH tokens are needed for `gh` CLI authentication when set as env vars.
+    // EDITOR/VISUAL are used by git and other tools.
+    const VARS_TO_CAPTURE: &[&str] = &[
+        "PATH",
+        "GITHUB_TOKEN",
+        "GH_TOKEN",
+        "GH_HOST",
+        "EDITOR",
+        "VISUAL",
+    ];
+
+    // Build a shell command that prints each var with a unique marker prefix.
+    // Using a marker avoids capturing MOTD or shell greeting output.
+    let print_commands: Vec<String> = VARS_TO_CAPTURE
+        .iter()
+        .map(|var| format!("echo __FABER_{var}__=${{{var}}}"))
+        .collect();
+    let shell_cmd = print_commands.join("; ");
+
+    // Run a login+interactive shell that prints the vars, then exits.
     // `-l` sources profile files (.zprofile, .bash_profile, etc.).
     // `-i` sources rc files (.zshrc, .bashrc) where tools like nvm/volta add
     // themselves. `-c` runs a command and exits.
     let output = Command::new(&shell)
-        .args(["-l", "-i", "-c", "echo __FABER_PATH__=$PATH"])
+        .args(["-l", "-i", "-c", &shell_cmd])
         .stdout(std::process::Stdio::piped())
         .stderr(std::process::Stdio::null())
         .output();
 
     if let Ok(output) = output {
         let stdout = String::from_utf8_lossy(&output.stdout);
-        // Extract the PATH value from the marker line to avoid capturing
-        // any MOTD or shell greeting output.
-        if let Some(line) = stdout.lines().find(|l| l.starts_with("__FABER_PATH__=")) {
-            let path = line.trim_start_matches("__FABER_PATH__=");
-            if !path.is_empty() {
-                tracing::info!(entries = path.matches(':').count() + 1, "macOS: Resolved shell PATH");
-                std::env::set_var("PATH", path);
-                return;
+        let mut resolved_count = 0u32;
+
+        for var in VARS_TO_CAPTURE {
+            let marker = format!("__FABER_{var}__=");
+            if let Some(line) = stdout.lines().find(|l| l.starts_with(&marker)) {
+                let value = line.trim_start_matches(&marker);
+                if !value.is_empty() {
+                    if *var == "PATH" {
+                        tracing::info!(entries = value.matches(':').count() + 1, "macOS: Resolved shell PATH");
+                    } else {
+                        tracing::info!(var, "macOS: Resolved shell env var");
+                    }
+                    std::env::set_var(var, value);
+                    resolved_count += 1;
+                }
             }
         }
+
+        if resolved_count > 0 {
+            return;
+        }
     }
-    tracing::warn!("macOS: Could not resolve shell PATH, using system default");
+    tracing::warn!("macOS: Could not resolve shell environment, using system defaults");
 }
 
 /// Create a `Command` that won't spawn a visible console window on Windows.

From 255bab14f9684d733d5bb0bcfd222722a9022bab Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Fri, 27 Mar 2026 20:32:40 +0100
Subject: [PATCH 05/16] feat: task progress rings, dependency indicators,
 typography standardization, and dashboard UX improvements

Add progress ring visualization on in-progress task cards, per-dependency met/unmet
indicators, epic dependency connectors in Kanban columns, and searchable filter dropdowns
for large label/agent/epic lists. Standardize typography across 100+ components to a
canonical scale (text-micro/text-2xs/text-xs/text-sm/text-base), extract centralized
taskStatusColors module, and update CHANGELOG + docs with accurate settings paths.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  10 +
 CLAUDE.md                                     |   1 +
 docs/github_workflow.md                       |   2 +-
 docs/supported_agents.md                      |   2 +-
 src/components/Chat/ActivityBar.tsx           |  34 +-
 src/components/Chat/AgentPlanView.tsx         |   4 +-
 src/components/Chat/AgentTurnBlock.tsx        |  20 +-
 src/components/Chat/ChatInput.tsx             |   6 +-
 src/components/Chat/ChatView.tsx              |  14 +-
 src/components/Chat/ConfigOptionsPopover.tsx  |   8 +-
 src/components/Chat/ContextCrease.tsx         |  46 +-
 src/components/Chat/ContextUsageIndicator.tsx |   2 +-
 src/components/Chat/CreateWorktreePopover.tsx |  12 +-
 src/components/Chat/GitContextBar.tsx         |   8 +-
 src/components/Chat/ModeSelector.tsx          |   6 +-
 src/components/Chat/ModelSelector.tsx         |   8 +-
 src/components/Chat/PermissionDialog.tsx      |   4 +-
 src/components/Chat/ThoughtLevelSelector.tsx  |   6 +-
 src/components/Chat/ThreadStatusBadge.tsx     |   2 +-
 src/components/Chat/ToolCallCard.tsx          |  38 +-
 src/components/Chat/WaitingCard.tsx           |   2 +-
 .../CommandPalette/CommandPalette.tsx         |  18 +-
 src/components/Dashboard/ArchivedTaskList.tsx |   8 +-
 src/components/Dashboard/DashboardView.tsx    |   2 +-
 src/components/Dashboard/DependencyBadge.tsx  |  43 +-
 src/components/Dashboard/DependencyGraph.tsx  |  49 +-
 src/components/Dashboard/EmptyState.tsx       |   2 +-
 src/components/Dashboard/FilterBar.tsx        | 384 ++++++++----
 src/components/Dashboard/GhostParentCard.tsx  |  39 +-
 src/components/Dashboard/KanbanBoard.tsx      |  10 +-
 src/components/Dashboard/KanbanColumn.tsx     | 112 ++--
 src/components/Dashboard/PriorityBadge.tsx    |   2 +-
 src/components/Dashboard/SummaryHeader.tsx    |  14 +-
 src/components/Dashboard/TaskCard.tsx         | 582 +++++++++---------
 src/components/GitHub/BranchFilter.tsx        |   4 +-
 src/components/GitHub/CommitDetailPanel.tsx   |  18 +-
 src/components/GitHub/CommitRow.tsx           |   8 +-
 src/components/GitHub/GitHubView.tsx          |  45 +-
 src/components/GitHub/IssueDetailPanel.tsx    |  30 +-
 src/components/GitHub/IssuesTab.tsx           |  18 +-
 .../GitHub/PullRequestDetailPanel.tsx         |  38 +-
 src/components/GitHub/PullRequestsTab.tsx     |  24 +-
 src/components/Help/HelpView.tsx              |   2 +-
 src/components/Launchers/AgentCardGrid.tsx    |   2 +-
 .../Launchers/LaunchBreakdownDialog.tsx       |   4 +-
 .../Launchers/LaunchContinuousDialog.tsx      |  20 +-
 .../Launchers/LaunchResearchDialog.tsx        |   4 +-
 .../Launchers/LaunchSessionDialog.tsx         |  10 +-
 src/components/Launchers/LaunchTaskDialog.tsx |  10 +-
 src/components/Review/CreatePRDialog.tsx      |   2 +-
 src/components/Review/DiffToolbar.tsx         |   2 +-
 src/components/Review/DiffView.tsx            |   4 +-
 src/components/Review/FileList.tsx            |  26 +-
 src/components/Review/MergeBranchDialog.tsx   |   4 +-
 src/components/Sessions/QuickActionBar.tsx    |   2 +-
 .../Sessions/ResearchCompleteBar.tsx          |   8 +-
 .../Sessions/SessionDragOverlay.tsx           |   2 +-
 src/components/Sessions/SessionPane.tsx       |  12 +-
 .../Sessions/SessionsEmptyState.tsx           |   2 +-
 src/components/Sessions/SessionsToolbar.tsx   |   7 +-
 src/components/Settings/AcpPermissionsTab.tsx |  42 +-
 src/components/Settings/AgentsTab.tsx         |  20 +-
 src/components/Settings/GeneralTab.tsx        |  18 +-
 src/components/Settings/GitHubTab.tsx         |  32 +-
 src/components/Settings/GitWorktreesTab.tsx   |   8 +-
 .../Settings/ProjectSettingsDialog.tsx        |  50 +-
 src/components/Settings/ProjectTab.tsx        |  36 +-
 src/components/Settings/ProjectsTab.tsx       |  12 +-
 src/components/Settings/PromptsTab.tsx        |  46 +-
 src/components/Settings/SettingsView.tsx      |  10 +-
 .../Settings/TaskFileConflictDialog.tsx       |  18 +-
 src/components/Settings/TerminalTab.tsx       |  22 +-
 src/components/Settings/shared.tsx            |   6 +-
 src/components/Shell/ApplicationBar.tsx       |   2 +-
 src/components/Shell/ContinuousModeBar.tsx    |  22 +-
 src/components/Shell/CreateProjectDialog.tsx  |   6 +-
 .../Shell/FloatingPermissionBanner.tsx        |   2 +-
 src/components/Shell/Sidebar.tsx              |  14 +-
 src/components/Shell/SidebarStatusPanel.tsx   |   2 +-
 src/components/Shell/StatusBar.tsx            |  30 +-
 src/components/Shell/UsagePanel.tsx           |  14 +-
 src/components/Shell/UsageProgressBar.tsx     |   6 +-
 src/components/Shell/ViewLayout.tsx           |   2 +-
 src/components/Shell/WelcomeScreen.tsx        |  16 +-
 .../SkillsRules/AgentExtensionCard.tsx        |  44 +-
 .../SkillsRules/AgentsExtensionTab.tsx        |  14 +-
 .../SkillsRules/CreateRuleDialog.tsx          |   2 +-
 .../SkillsRules/InstalledSkillsList.tsx       |   2 +-
 src/components/SkillsRules/PluginsTab.tsx     |  62 +-
 src/components/SkillsRules/RulesTreePanel.tsx |   8 +-
 .../SkillsRules/SkillsRulesView.tsx           |  19 +-
 src/components/SkillsRules/SkillsTab.tsx      |   4 +-
 .../TaskDetail/AgentActivityTab.tsx           |  12 +-
 .../TaskDetail/CreateTaskDialog.tsx           |   8 +-
 src/components/TaskDetail/EpicChildTasks.tsx  |  18 +-
 src/components/TaskDetail/GitHubTab.tsx       |  38 +-
 .../TaskDetail/SyncToGitHubDialog.tsx         |   4 +-
 src/components/TaskDetail/TaskBody.tsx        |   8 +-
 src/components/TaskDetail/TaskDetailView.tsx  |   4 +-
 .../TaskDetail/TaskMarkdownEditor.tsx         |   2 +-
 .../TaskDetail/TaskMetadataForm.tsx           |  28 +-
 .../TaskDetail/TaskMetadataSidebar.tsx        |  44 +-
 src/components/TaskDetail/TaskTitle.tsx       |   4 +-
 src/components/ai-elements/commit.tsx         |  12 +-
 src/components/ai-elements/package-info.tsx   |   9 +-
 src/components/ai-elements/schema-display.tsx |  19 +-
 src/components/ai-elements/test-results.tsx   |  28 +-
 src/components/ai-elements/tool.tsx           |  10 +-
 src/components/ui/BranchSelect.tsx            |  16 +-
 src/lib/taskStatusColors.ts                   |  40 ++
 src/styles/main.css                           |   6 +
 111 files changed, 1430 insertions(+), 1279 deletions(-)
 create mode 100644 src/lib/taskStatusColors.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4419117..e9eef9e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Status Bar** — New bottom bar showing MCP status and port, GitHub auth status, top agent usage percentage, context-sensitive keyboard shortcuts, and app version
 - **File Search** — File browser now preloads a project file index in the background and supports client-side filtering with highlighted search matches. Re-indexes automatically when files change
 - **File Context Menu** — Right-click any file in the tree for quick actions: copy relative path, copy absolute path, reveal in file explorer, or open in an external editor (auto-detects VS Code, Cursor, Zed, Windsurf, Fleet, Sublime, Vim, Neovim)
+- **Task Progress Ring** — In-progress task cards on the Kanban board now show a circular progress indicator (SVG ring) with percentage text, driven by MCP `report_progress` step data. Research/exploring activities display in amber; regular work in blue
+- **Task Dependency Indicators** — Task cards show per-dependency met/unmet dots (filled green for met, outlined amber for unmet) and a dependents badge showing how many other tasks depend on this one
+- **Epic Dependency Connectors** — Kanban columns now render small vertical connector arrows between epic children that have dependency relationships, making chains visible directly on the board
+- **Searchable Filter Dropdowns** — Unbounded filter lists (Labels, Agents, Epics) in the Dashboard filter bar now use searchable dropdown popovers instead of inline chips, with count badges on the trigger buttons and active filter pills displayed below the bar
+- **Task Status Color Module** — Centralized `taskStatusColors.ts` exports canonical dot colors, CSS colors, and labels for all task statuses, eliminating duplicate definitions across components
 - **Success Toasts** — Green flash notifications (3-second auto-dismiss) for confirming actions like ACP adapter installs and session renames
 - **Editor Detection** — Backend probes PATH for 8 known editors and exposes `detect_editors` / `open_in_editor` IPC commands
 - **Project File Indexing** — New `index_project_files` Rust command recursively indexes project files (skipping hidden dirs, node_modules, target, .git) for fast client-side search
@@ -28,6 +33,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Session Pane** — Removed reorder arrows (drag-and-drop is the primary method); added brief "Saved" indicator after session rename; wider rename input field
 - **Permission Dialog Urgency** — Timeout bar is thicker and the urgent state (last 30 seconds) now pulses with an animation
 - **Command Palette** — Added "Go to Settings" navigation command
+- **Typography Scale** — Standardized all text sizes across 100+ components to a canonical scale (`text-micro` 8px, `text-2xs` 10px, `text-xs` 12px, `text-sm` 14px, `text-base` 16px), replacing ad-hoc `text-[Npx]` values with new custom Tailwind utilities
+- **Filter Bar Architecture** — Status and Priority filters remain as inline toggle chips; Labels, Agents, and Epics now use collapsible searchable dropdowns for better usability in large projects
+- **DnD Visual Feedback** — Dragged Kanban cards now fully hide (opacity-0) during drag instead of showing a faded ghost, for cleaner drag-and-drop
+- **Priority Badge Styling** — Compact inline priority badges with smaller font and renamed helper (`getPriorityBadgeClass`)
+- **Task Card Layout** — Increased padding, improved visual hierarchy, and inline action buttons hidden by default (revealed on hover/focus)
 
 ### Fixed
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 38d913c..c16c9ab 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -148,6 +148,7 @@ error!(session_id = %id, error = %e, "PTY spawn failed");
 - **Custom semantic tokens:** `text-dim-foreground` (between foreground and muted), `text-success` / `bg-success`, `text-warning` / `bg-warning`
 - **Glass/solid switching:** Use `useTheme()` → `isGlass` boolean. For panels: `<Card type={isGlass ? "normal" : "solid"}>` (orecus.io Card). For shell containers (sidebar, status bar, tab bar): `glassStyles[isGlass ? "subtle" : "solid"]` from `color-utils.ts`
 - **Panel borders:** Use `ring-1 ring-border/40` for subtle panel containers, `border-border` for structural dividers (border-b, border-l, etc.)
+- **Typography scale:** Use only these sizes — `text-micro` (8px, reserved), `text-2xs` (10px, badges/counters/metadata), `text-xs` (12px, labels/hints/secondary), `text-sm` (14px, primary UI text), `text-base` (16px, headings). Do **not** introduce arbitrary `text-[Xpx]` values without justification.
 - Tailwind `animate-spin` for spinners; use `<Loader2>` from lucide-react
 - Theme selectors: `[data-theme^="dark"]`, `[data-theme^="light"]`
 - Main CSS file: `src/styles/main.css`
diff --git a/docs/github_workflow.md b/docs/github_workflow.md
index 60be617..c35113e 100644
--- a/docs/github_workflow.md
+++ b/docs/github_workflow.md
@@ -193,7 +193,7 @@ This gives each task its own working directory, so agents can make changes witho
 
 ## GitHub Sync Settings
 
-All sync behavior is controlled per-project in **Settings > Projects > [Your Project] > GitHub Sync**.
+All sync behavior is controlled per-project in **Settings > Project > GitHub Sync** (the Project tab in the Settings view).
 
 The master toggle defaults to **OFF**. Nothing is written to GitHub until you explicitly enable it.
 
diff --git a/docs/supported_agents.md b/docs/supported_agents.md
index 07c3a1b..7be156b 100644
--- a/docs/supported_agents.md
+++ b/docs/supported_agents.md
@@ -167,7 +167,7 @@ Breakdown, Vibe, and Chat sessions have no completion tool — the user drives t
 
 ### Per-Project Defaults
 
-In **Settings > Projects > [Your Project]**, you can set a default agent and model. All new sessions will use this agent unless overridden at launch time.
+In **Settings > Project**, you can set a default agent and model. All new sessions will use this agent unless overridden at launch time.
 
 ### Per-Task Overrides
 
diff --git a/src/components/Chat/ActivityBar.tsx b/src/components/Chat/ActivityBar.tsx
index 2a7ba10..2676f92 100644
--- a/src/components/Chat/ActivityBar.tsx
+++ b/src/components/Chat/ActivityBar.tsx
@@ -203,10 +203,10 @@ export default React.memo(function ActivityBar({
         {promptPending ? (
           <div className="flex items-center gap-1.5">
             <Loader2 size={11} className="animate-spin text-primary" />
-            <span className="text-[11px] text-primary font-medium">Processing…</span>
+            <span className="text-xs text-primary font-medium">Processing…</span>
           </div>
         ) : (
-          <span className="text-[11px] text-muted-foreground/50">
+          <span className="text-xs text-muted-foreground/50">
             Waiting for input
           </span>
         )}
@@ -230,12 +230,12 @@ function PlanSummarySection({
 
   return (
     <Collapsible defaultOpen>
-      <CollapsibleTrigger className="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
+      <CollapsibleTrigger className="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
         <span className="flex items-center gap-1.5">
           <ListChecks size={12} />
           Plan
         </span>
-        <span className="text-[10px] font-normal normal-case tracking-normal text-dim-foreground">
+        <span className="text-2xs font-normal normal-case tracking-normal text-dim-foreground">
           {completedCount}/{totalCount}
         </span>
       </CollapsibleTrigger>
@@ -261,7 +261,7 @@ function PlanSummarySection({
                 <PlanItemIcon status={entry.status} />
               </div>
               <span
-                className={`text-[11px] leading-snug ${
+                className={`text-xs leading-snug ${
                   entry.status === "completed"
                     ? "text-muted-foreground line-through"
                     : entry.status === "in_progress"
@@ -308,12 +308,12 @@ function FileEditSection({ fileEdits }: { fileEdits: FileEditEntry[] }) {
 
   return (
     <Collapsible defaultOpen>
-      <CollapsibleTrigger className="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
+      <CollapsibleTrigger className="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
         <span className="flex items-center gap-1.5">
           <FileEdit size={12} />
           Files
         </span>
-        <span className="text-[10px] font-normal normal-case tracking-normal text-dim-foreground">
+        <span className="text-2xs font-normal normal-case tracking-normal text-dim-foreground">
           {fileEdits.length}
         </span>
       </CollapsibleTrigger>
@@ -321,19 +321,19 @@ function FileEditSection({ fileEdits }: { fileEdits: FileEditEntry[] }) {
         {/* Summary counts */}
         <div className="flex items-center gap-3 px-3 pb-1">
           {createdCount > 0 && (
-            <span className="flex items-center gap-1 text-[10px] text-success">
+            <span className="flex items-center gap-1 text-2xs text-success">
               <FilePlus2 size={10} />
               {createdCount} created
             </span>
           )}
           {modifiedCount > 0 && (
-            <span className="flex items-center gap-1 text-[10px] text-primary">
+            <span className="flex items-center gap-1 text-2xs text-primary">
               <FileEdit size={10} />
               {modifiedCount} modified
             </span>
           )}
           {deletedCount > 0 && (
-            <span className="flex items-center gap-1 text-[10px] text-destructive">
+            <span className="flex items-center gap-1 text-2xs text-destructive">
               <Trash2 size={10} />
               {deletedCount} deleted
             </span>
@@ -343,16 +343,16 @@ function FileEditSection({ fileEdits }: { fileEdits: FileEditEntry[] }) {
         {/* Total diff stats */}
         {(totalStats.added > 0 || totalStats.removed > 0) && (
           <div className="flex items-center gap-2 px-3 pb-1.5">
-            <span className="text-[10px] text-muted-foreground/50">
+            <span className="text-2xs text-muted-foreground/50">
               Total:
             </span>
             {totalStats.added > 0 && (
-              <span className="text-[10px] text-success font-medium">
+              <span className="text-2xs text-success font-medium">
                 +{totalStats.added}
               </span>
             )}
             {totalStats.removed > 0 && (
-              <span className="text-[10px] text-destructive font-medium">
+              <span className="text-2xs text-destructive font-medium">
                 −{totalStats.removed}
               </span>
             )}
@@ -375,7 +375,7 @@ function FileEditRow({ file }: { file: FileEditEntry }) {
 
   return (
     <div
-      className="flex items-center gap-1.5 rounded px-1.5 py-0.5 text-[11px] text-dim-foreground hover:bg-accent/50 transition-colors group/file"
+      className="flex items-center gap-1.5 rounded px-1.5 py-0.5 text-xs text-dim-foreground hover:bg-accent/50 transition-colors group/file"
       title={file.path}
     >
       {/* File type icon with status color overlay */}
@@ -395,17 +395,17 @@ function FileEditRow({ file }: { file: FileEditEntry }) {
       {/* Per-file diff stats */}
       <span className="flex items-center gap-1 shrink-0">
         {file.linesAdded > 0 && (
-          <span className="text-[9px] text-success/70 font-medium">
+          <span className="text-2xs text-success/70 font-medium">
             +{file.linesAdded}
           </span>
         )}
         {file.linesRemoved > 0 && (
-          <span className="text-[9px] text-destructive/70 font-medium">
+          <span className="text-2xs text-destructive/70 font-medium">
             −{file.linesRemoved}
           </span>
         )}
         {file.linesAdded === 0 && file.linesRemoved === 0 && file.edits > 1 && (
-          <span className="text-[9px] text-muted-foreground/50">
+          <span className="text-2xs text-muted-foreground/50">
             ×{file.edits}
           </span>
         )}
diff --git a/src/components/Chat/AgentPlanView.tsx b/src/components/Chat/AgentPlanView.tsx
index 5b31f51..6820d6a 100644
--- a/src/components/Chat/AgentPlanView.tsx
+++ b/src/components/Chat/AgentPlanView.tsx
@@ -19,9 +19,9 @@ import type { AcpPlanEntry } from "../../types";
 function PlanStatusIcon({ status }: { status: string }) {
   switch (status) {
     case "in_progress":
-      return <Loader2 size={14} className="animate-spin text-blue-500 shrink-0" />;
+      return <Loader2 size={14} className="animate-spin text-primary shrink-0" />;
     case "completed":
-      return <CheckCircle2 size={14} className="text-green-600 shrink-0" />;
+      return <CheckCircle2 size={14} className="text-success shrink-0" />;
     default:
       return <Circle size={14} className="text-muted-foreground/50 shrink-0" />;
   }
diff --git a/src/components/Chat/AgentTurnBlock.tsx b/src/components/Chat/AgentTurnBlock.tsx
index 2a01274..718f4ef 100644
--- a/src/components/Chat/AgentTurnBlock.tsx
+++ b/src/components/Chat/AgentTurnBlock.tsx
@@ -361,12 +361,12 @@ function CollapsibleToolStep({ tc, sessionId, hasNext }: {
     <span className="font-mono text-xs leading-relaxed">
       {getStepLabel(tc)}
       {tc.status === "in_progress" && (
-        <Badge variant="secondary" className="ml-1.5 text-[9px] px-1.5 py-0 h-4 gap-1 font-sans text-primary">
+        <Badge variant="secondary" className="ml-1.5 text-2xs px-1.5 py-0 h-4 gap-1 font-sans text-primary">
           <Loader2 className="size-2.5 animate-spin" />
           running
         </Badge>
       )}
-      {tc.status === "failed" && <span className="ml-1.5 text-destructive text-[10px] font-sans">failed</span>}
+      {tc.status === "failed" && <span className="ml-1.5 text-destructive text-2xs font-sans">failed</span>}
     </span>
   );
 
@@ -516,11 +516,11 @@ function ProgressIndicator({ progress }: { progress: ClassifiedTools["progress"]
   return (
     <div className="flex items-center gap-2 text-xs text-muted-foreground px-1 py-1">
       <Loader2 className="size-3 animate-spin text-primary shrink-0" />
-      <span className="shrink-0 font-mono text-[10px]">{progress.currentStep}/{progress.totalSteps}</span>
+      <span className="shrink-0 font-mono text-2xs">{progress.currentStep}/{progress.totalSteps}</span>
       <div className="flex-1 h-1 rounded-full bg-muted overflow-hidden">
         <div className="h-full rounded-full bg-primary transition-all duration-300" style={{ width: `${pct}%` }} />
       </div>
-      {progress.description && <span className="truncate text-[11px]">{progress.description}</span>}
+      {progress.description && <span className="truncate text-xs">{progress.description}</span>}
     </div>
   );
 }
@@ -542,7 +542,7 @@ function FilesChangedIndicator({ files }: { files: ClassifiedTools["filesChanged
         <div className="flex flex-wrap items-center gap-1">
           <span className="text-xs text-muted-foreground mr-1">{files.length} file{files.length !== 1 ? "s" : ""} changed</span>
           {files.map((f, i) => (
-            <Badge key={i} variant="outline" className={cn("text-[10px] px-1.5 py-0 h-5 font-mono", actionColors[f.action] ?? "")}>
+            <Badge key={i} variant="outline" className={cn("text-2xs px-1.5 py-0 h-5 font-mono", actionColors[f.action] ?? "")}>
               {f.path.split("/").pop()} <span className="ml-0.5 opacity-60">{f.action}</span>
             </Badge>
           ))}
@@ -571,7 +571,7 @@ function ErrorIndicator({ errors, hasNext }: { errors: ClassifiedTools["errors"]
             <div className="w-full">
               <div className="rounded-lg bg-destructive/10 border border-destructive/20 px-3 py-2">
                 <p className="text-xs font-medium text-destructive">{err.error}</p>
-                {err.details && <p className="text-[11px] text-destructive/70 mt-1">{err.details}</p>}
+                {err.details && <p className="text-xs text-destructive/70 mt-1">{err.details}</p>}
               </div>
             </div>
           }
@@ -597,7 +597,7 @@ function WaitingIndicator({ waiting, hasNext }: { waiting: ClassifiedTools["wait
           <div className="rounded-lg bg-warning/10 border border-warning/20 px-3 py-2 animate-pulse">
             <div className="flex items-center gap-1.5 mb-1">
               <AlertTriangle className="size-3 text-warning shrink-0" />
-              <span className="text-[10px] font-medium text-warning uppercase tracking-wide">Waiting for input</span>
+              <span className="text-2xs font-medium text-warning uppercase tracking-wide">Waiting for input</span>
             </div>
             <p className="text-xs text-foreground">{waiting.question}</p>
           </div>
@@ -662,7 +662,7 @@ function TaskCreatedIndicator({ tasks, hasNext }: { tasks: ClassifiedTools["task
                       <div className="flex items-center gap-2">
                         <span className="text-muted-foreground w-16 shrink-0">Priority</span>
                         <Badge variant="outline" className={cn(
-                          "text-[10px] px-1.5 py-0 h-5",
+                          "text-2xs px-1.5 py-0 h-5",
                           task.priority === "P0" && "border-destructive/40 text-destructive",
                           task.priority === "P1" && "border-warning/40 text-warning",
                           task.priority === "P2" && "border-muted-foreground/40 text-muted-foreground",
@@ -680,7 +680,7 @@ function TaskCreatedIndicator({ tasks, hasNext }: { tasks: ClassifiedTools["task
                         <span className="text-muted-foreground w-16 shrink-0">Labels</span>
                         <div className="flex flex-wrap gap-1">
                           {task.labels.map((label) => (
-                            <Badge key={label} variant="secondary" className="text-[10px] px-1.5 py-0 h-5">
+                            <Badge key={label} variant="secondary" className="text-2xs px-1.5 py-0 h-5">
                               {label}
                             </Badge>
                           ))}
@@ -747,7 +747,7 @@ function TaskUpdatedIndicator({ updates, hasNext }: { updates: ClassifiedTools["
                     {Object.entries(update.fields).map(([key, value]) => (
                       <div key={key} className="flex items-center gap-2">
                         <span className="text-muted-foreground w-20 shrink-0">{fieldLabels[key] ?? key}</span>
-                        <span className="text-dim-foreground font-mono text-[11px]">
+                        <span className="text-dim-foreground font-mono text-xs">
                           {Array.isArray(value) ? value.join(", ") : String(value)}
                         </span>
                       </div>
diff --git a/src/components/Chat/ChatInput.tsx b/src/components/Chat/ChatInput.tsx
index 2d052a4..c3ec157 100644
--- a/src/components/Chat/ChatInput.tsx
+++ b/src/components/Chat/ChatInput.tsx
@@ -933,11 +933,11 @@ function SuggestionOverlay({
               >
                 {cmd.icon}
                 <span className="text-xs font-medium">{cmd.label}</span>
-                <span className="text-[11px] text-muted-foreground flex-1 truncate">
+                <span className="text-xs text-muted-foreground flex-1 truncate">
                   {cmd.description}
                 </span>
                 {cmd.isAgentCommand && (
-                  <span className="flex items-center gap-0.5 text-[10px] text-primary/60 shrink-0">
+                  <span className="flex items-center gap-0.5 text-2xs text-primary/60 shrink-0">
                     <Sparkles size={10} />
                     agent
                   </span>
@@ -964,7 +964,7 @@ function SuggestionOverlay({
                 )}
                 <span className="text-xs truncate">{file.path}</span>
                 {file.is_dir && (
-                  <span className="text-[10px] text-muted-foreground/50 shrink-0">
+                  <span className="text-2xs text-muted-foreground/50 shrink-0">
                     dir
                   </span>
                 )}
diff --git a/src/components/Chat/ChatView.tsx b/src/components/Chat/ChatView.tsx
index f1a34cd..8f8e7ee 100644
--- a/src/components/Chat/ChatView.tsx
+++ b/src/components/Chat/ChatView.tsx
@@ -573,11 +573,11 @@ const DateGroupHeader = memo(function DateGroupHeader({
           !collapsed && "rotate-90",
         )}
       />
-      <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/50 group-hover/dg:text-muted-foreground transition-colors">
+      <span className="text-2xs font-medium uppercase tracking-wider text-muted-foreground/50 group-hover/dg:text-muted-foreground transition-colors">
         {label}
       </span>
       {collapsed && (
-        <span className="text-[10px] text-muted-foreground/30 tabular-nums">
+        <span className="text-2xs text-muted-foreground/30 tabular-nums">
           {count}
         </span>
       )}
@@ -654,7 +654,7 @@ const SessionHistorySidebar = memo(function SessionHistorySidebar({
           Previous Sessions
         </span>
         {hasData && sessions.length > 0 && (
-          <span className="text-[10px] text-muted-foreground/60 tabular-nums">
+          <span className="text-2xs text-muted-foreground/60 tabular-nums">
             {sessions.length}
           </span>
         )}
@@ -713,7 +713,7 @@ const SessionHistorySidebar = memo(function SessionHistorySidebar({
             </p>
             <button
               onClick={onRetry}
-              className="text-[11px] text-primary hover:underline"
+              className="text-xs text-primary hover:underline"
             >
               Retry
             </button>
@@ -845,7 +845,7 @@ const SessionHistoryItem = memo(function SessionHistoryItem({
         {/* Meta row: time, mode badge, task ID */}
         <div className="flex items-center gap-1.5 mt-0.5">
           {session.updated_at && (
-            <span className="flex items-center gap-1 text-[11px] text-muted-foreground">
+            <span className="flex items-center gap-1 text-xs text-muted-foreground">
               <Clock size={9} className="shrink-0" />
               {formatRelativeTime(session.updated_at)}
             </span>
@@ -853,7 +853,7 @@ const SessionHistoryItem = memo(function SessionHistoryItem({
           {modeConfig && (
             <span
               className={cn(
-                "inline-flex items-center px-1.5 py-px rounded text-[9px] font-medium leading-tight",
+                "inline-flex items-center px-1.5 py-px rounded text-2xs font-medium leading-tight",
                 modeConfig.className,
               )}
             >
@@ -861,7 +861,7 @@ const SessionHistoryItem = memo(function SessionHistoryItem({
             </span>
           )}
           {faberMeta?.taskId && (
-            <span className="inline-flex items-center px-1 py-px rounded bg-accent/60 text-[9px] font-mono text-dim-foreground leading-tight">
+            <span className="inline-flex items-center px-1 py-px rounded bg-accent/60 text-2xs font-mono text-dim-foreground leading-tight">
               {faberMeta.taskId}
             </span>
           )}
diff --git a/src/components/Chat/ConfigOptionsPopover.tsx b/src/components/Chat/ConfigOptionsPopover.tsx
index 71a9456..d750bf6 100644
--- a/src/components/Chat/ConfigOptionsPopover.tsx
+++ b/src/components/Chat/ConfigOptionsPopover.tsx
@@ -124,11 +124,11 @@ function ConfigOptionSection({ option, sessionId, disabled }: ConfigOptionSectio
   return (
     <div>
       {/* Section header */}
-      <div className="px-2 py-1.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+      <div className="px-2 py-1.5 text-2xs font-medium text-muted-foreground uppercase tracking-wider">
         {option.name}
       </div>
       {option.description && (
-        <p className="px-2 pb-1 text-[10px] text-muted-foreground/70 leading-tight">
+        <p className="px-2 pb-1 text-2xs text-muted-foreground/70 leading-tight">
           {option.description}
         </p>
       )}
@@ -137,7 +137,7 @@ function ConfigOptionSection({ option, sessionId, disabled }: ConfigOptionSectio
       {grps.length > 0
         ? grps.map((group) => (
             <div key={group.name}>
-              <div className="px-2 py-1 text-[10px] text-muted-foreground/60">
+              <div className="px-2 py-1 text-2xs text-muted-foreground/60">
                 {group.name}
               </div>
               {group.options.map((o) => (
@@ -188,7 +188,7 @@ function OptionButton({ option, isActive, disabled, onSelect }: OptionButtonProp
       <div className="flex flex-col gap-0 min-w-0 flex-1">
         <span className="text-xs">{option.name}</span>
         {option.description && (
-          <span className="text-[10px] text-muted-foreground truncate">
+          <span className="text-2xs text-muted-foreground truncate">
             {option.description}
           </span>
         )}
diff --git a/src/components/Chat/ContextCrease.tsx b/src/components/Chat/ContextCrease.tsx
index 7d52ed3..85f29ad 100644
--- a/src/components/Chat/ContextCrease.tsx
+++ b/src/components/Chat/ContextCrease.tsx
@@ -104,7 +104,7 @@ function FilePath({ path }: { path: string }) {
     <button
       type="button"
       onClick={handleCopy}
-      className="inline-flex items-center gap-1 text-[12px] font-mono text-dim-foreground hover:text-primary transition-colors truncate text-left group/filepath"
+      className="inline-flex items-center gap-1 text-xs font-mono text-dim-foreground hover:text-primary transition-colors truncate text-left group/filepath"
       title={`${path}\nClick to copy path`}
     >
       <span className="truncate">{fileName}</span>
@@ -152,10 +152,10 @@ function TextCrease({
     <Collapsible defaultOpen={defaultOpen}>
       <CollapsibleTrigger className="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md hover:bg-accent/50 transition-colors cursor-pointer group/crease">
         <FileText size={13} className="text-muted-foreground shrink-0" />
-        <span className="text-[12px] text-dim-foreground truncate flex-1 text-left">
+        <span className="text-xs text-dim-foreground truncate flex-1 text-left">
           {preview}
         </span>
-        <span className="text-[10px] text-muted-foreground/50 shrink-0">
+        <span className="text-2xs text-muted-foreground/50 shrink-0">
           {lineCount} line{lineCount !== 1 ? "s" : ""}
         </span>
         <ChevronDown
@@ -284,21 +284,21 @@ function DiffCrease({
     <div className={`${flat ? "" : "mt-1 "}rounded-md bg-muted/30 border border-border/30 overflow-hidden`}>
       {/* Sticky file header */}
       <div className="flex items-center justify-between px-3 py-1 border-b border-border/20 bg-muted/50 sticky top-0 z-10">
-        <span className="text-[10px] font-mono text-muted-foreground/70 truncate" title={path}>
+        <span className="text-2xs font-mono text-muted-foreground/70 truncate" title={path}>
           {path}
         </span>
         <div className="flex items-center gap-2 shrink-0">
           {stats.added > 0 && (
-            <span className="text-[10px] text-success/80">+{stats.added}</span>
+            <span className="text-2xs text-success/80">+{stats.added}</span>
           )}
           {stats.removed > 0 && (
-            <span className="text-[10px] text-destructive/80">−{stats.removed}</span>
+            <span className="text-2xs text-destructive/80">−{stats.removed}</span>
           )}
           {hasCollapsed && (
             <button
               type="button"
               onClick={toggleShowAll}
-              className="text-[10px] text-muted-foreground/50 hover:text-muted-foreground transition-colors flex items-center gap-0.5"
+              className="text-2xs text-muted-foreground/50 hover:text-muted-foreground transition-colors flex items-center gap-0.5"
               title={showAllContext ? "Collapse context" : "Show all lines"}
             >
               <ChevronsUpDown size={10} />
@@ -310,12 +310,12 @@ function DiffCrease({
 
       {/* Diff lines with line number gutters */}
       <div className="max-h-[500px] overflow-y-auto overflow-x-auto">
-        <pre className="text-[11px] leading-relaxed font-mono">
+        <pre className="text-xs leading-relaxed font-mono">
           {displayLines.map((line, i) =>
             line.collapsed ? (
               <div
                 key={`collapse-${i}`}
-                className="flex items-center gap-2 px-3 py-1 bg-accent/20 border-y border-border/15 text-muted-foreground/40 text-[10px] cursor-pointer hover:bg-accent/30 transition-colors"
+                className="flex items-center gap-2 px-3 py-1 bg-accent/20 border-y border-border/15 text-muted-foreground/40 text-2xs cursor-pointer hover:bg-accent/30 transition-colors"
                 onClick={toggleShowAll}
               >
                 <ChevronsUpDown size={10} />
@@ -329,10 +329,10 @@ function DiffCrease({
                 className={`flex ${DIFF_LINE_STYLES[line.type]}`}
               >
                 {/* Line number gutters */}
-                <span className="select-none text-[10px] text-muted-foreground/25 w-8 text-right pr-1 shrink-0 border-r border-border/10 self-stretch flex items-center justify-end">
+                <span className="select-none text-2xs text-muted-foreground/25 w-8 text-right pr-1 shrink-0 border-r border-border/10 self-stretch flex items-center justify-end">
                   {line.oldLineNo ?? ""}
                 </span>
-                <span className="select-none text-[10px] text-muted-foreground/25 w-8 text-right pr-1 shrink-0 border-r border-border/10 self-stretch flex items-center justify-end">
+                <span className="select-none text-2xs text-muted-foreground/25 w-8 text-right pr-1 shrink-0 border-r border-border/10 self-stretch flex items-center justify-end">
                   {line.newLineNo ?? ""}
                 </span>
                 {/* +/- indicator */}
@@ -373,12 +373,12 @@ function DiffCrease({
         </div>
         <span className="flex items-center gap-1.5 shrink-0">
           {stats.added > 0 && (
-            <span className="text-[10px] text-success font-medium">
+            <span className="text-2xs text-success font-medium">
               +{stats.added}
             </span>
           )}
           {stats.removed > 0 && (
-            <span className="text-[10px] text-destructive font-medium">
+            <span className="text-2xs text-destructive font-medium">
               −{stats.removed}
             </span>
           )}
@@ -482,7 +482,7 @@ function TerminalCrease({
   if (!sessionId) {
     return (
       <div className={`${flat ? "" : "mt-1 "}rounded-md bg-zinc-950/80 border border-border/30 overflow-hidden px-3 py-2`}>
-        <span className="text-[11px] font-mono text-white/30">
+        <span className="text-xs font-mono text-white/30">
           Terminal {terminalId}
         </span>
       </div>
@@ -497,10 +497,10 @@ function TerminalCrease({
       {loading && !hasOutput ? (
         <div className="flex items-center gap-2 rounded-md bg-zinc-950/80 border border-border/30 px-3 py-3">
           <Loader2 size={12} className="animate-spin text-muted-foreground" />
-          <span className="text-[11px] text-muted-foreground">Loading terminal output…</span>
+          <span className="text-xs text-muted-foreground">Loading terminal output…</span>
         </div>
       ) : error && !hasOutput ? (
-        <div className="rounded-md bg-zinc-950/80 border border-border/30 px-3 py-2 text-[11px] font-mono text-destructive/70">
+        <div className="rounded-md bg-zinc-950/80 border border-border/30 px-3 py-2 text-xs font-mono text-destructive/70">
           {error}
         </div>
       ) : (
@@ -508,15 +508,15 @@ function TerminalCrease({
           output={output}
           isStreaming={isStreaming}
           autoScroll
-          className="border-border/30 text-[11px]"
+          className="border-border/30 text-xs"
         >
           <TerminalHeader className="border-zinc-800/60 px-3 py-1.5">
-            <TerminalTitle className="text-[11px] text-zinc-500">
+            <TerminalTitle className="text-xs text-zinc-500">
               {terminalId}
             </TerminalTitle>
             <TerminalActions>
               {isStreaming && (
-                <span className="text-[10px] text-primary/70 flex items-center gap-1 mr-1">
+                <span className="text-2xs text-primary/70 flex items-center gap-1 mr-1">
                   <Loader2 size={10} className="animate-spin" />
                   Running
                 </span>
@@ -524,7 +524,7 @@ function TerminalCrease({
               <TerminalCopyButton className="size-6" />
             </TerminalActions>
           </TerminalHeader>
-          <TerminalContent className="max-h-[300px] p-3 text-[11px] leading-relaxed" />
+          <TerminalContent className="max-h-[300px] p-3 text-xs leading-relaxed" />
         </Terminal>
       )}
     </div>
@@ -539,18 +539,18 @@ function TerminalCrease({
     <Collapsible defaultOpen={defaultOpen}>
       <CollapsibleTrigger className="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md hover:bg-accent/50 transition-colors cursor-pointer group/crease">
         <SquareTerminal size={13} className="text-muted-foreground shrink-0" />
-        <span className="text-[12px] text-dim-foreground flex-1 text-left">
+        <span className="text-xs text-dim-foreground flex-1 text-left">
           Terminal output
         </span>
         {isStreaming && (
           <Loader2 size={10} className="animate-spin text-primary shrink-0" />
         )}
         {!isStreaming && hasOutput && (
-          <span className="text-[10px] text-muted-foreground/50 shrink-0">
+          <span className="text-2xs text-muted-foreground/50 shrink-0">
             {lineCount} line{lineCount !== 1 ? "s" : ""}
           </span>
         )}
-        <span className="text-[10px] font-mono text-muted-foreground/40 shrink-0">
+        <span className="text-2xs font-mono text-muted-foreground/40 shrink-0">
           {terminalId}
         </span>
         <ChevronDown
diff --git a/src/components/Chat/ContextUsageIndicator.tsx b/src/components/Chat/ContextUsageIndicator.tsx
index b09de03..eaa69ac 100644
--- a/src/components/Chat/ContextUsageIndicator.tsx
+++ b/src/components/Chat/ContextUsageIndicator.tsx
@@ -33,7 +33,7 @@ export default React.memo(function ContextUsageIndicator({
 
   return (
     <Context usedTokens={usage.used} maxTokens={usage.size}>
-      <ContextTrigger className="h-7 px-2 gap-1.5 text-[11px] rounded-md cursor-default" />
+      <ContextTrigger className="h-7 px-2 gap-1.5 text-xs rounded-md cursor-default" />
       <ContextContent side="top" align="end" className="w-64">
         <ContextContentHeader />
         {hasCost && (
diff --git a/src/components/Chat/CreateWorktreePopover.tsx b/src/components/Chat/CreateWorktreePopover.tsx
index 7221662..b4bcf7d 100644
--- a/src/components/Chat/CreateWorktreePopover.tsx
+++ b/src/components/Chat/CreateWorktreePopover.tsx
@@ -83,7 +83,7 @@ export default React.memo(function CreateWorktreePopover({
       }}
     >
       <PopoverTrigger
-        className="flex items-center gap-1 h-5 px-1.5 rounded text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer"
+        className="flex items-center gap-1 h-5 px-1.5 rounded text-2xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer"
         title="Create worktree"
       >
         <GitFork size={10} />
@@ -107,7 +107,7 @@ export default React.memo(function CreateWorktreePopover({
         <div className="px-3 py-2.5 space-y-2.5">
           {/* Branch name */}
           <div>
-            <label className="mb-1 block text-[10px] text-muted-foreground uppercase tracking-wider">
+            <label className="mb-1 block text-2xs text-muted-foreground uppercase tracking-wider">
               Branch name
             </label>
             <input
@@ -124,7 +124,7 @@ export default React.memo(function CreateWorktreePopover({
 
           {/* Base branch */}
           <div>
-            <label className="mb-1 block text-[10px] text-muted-foreground uppercase tracking-wider">
+            <label className="mb-1 block text-2xs text-muted-foreground uppercase tracking-wider">
               Base branch
             </label>
             <BranchSelect
@@ -140,7 +140,7 @@ export default React.memo(function CreateWorktreePopover({
 
           {/* Error */}
           {error && (
-            <p className="text-[11px] text-destructive leading-snug">
+            <p className="text-xs text-destructive leading-snug">
               {error}
             </p>
           )}
@@ -151,14 +151,14 @@ export default React.memo(function CreateWorktreePopover({
           <button
             onClick={() => setOpen(false)}
             disabled={creating}
-            className="h-6 px-2.5 rounded text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-50"
+            className="h-6 px-2.5 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-50"
           >
             Cancel
           </button>
           <button
             onClick={handleCreate}
             disabled={creating}
-            className="flex items-center gap-1 h-6 px-2.5 rounded text-[11px] font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
+            className="flex items-center gap-1 h-6 px-2.5 rounded text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
           >
             {creating ? (
               <Loader2 size={10} className="animate-spin" />
diff --git a/src/components/Chat/GitContextBar.tsx b/src/components/Chat/GitContextBar.tsx
index f10984f..2307709 100644
--- a/src/components/Chat/GitContextBar.tsx
+++ b/src/components/Chat/GitContextBar.tsx
@@ -201,7 +201,7 @@ export default React.memo(function GitContextBar({
               currentBranch={currentBranch}
               mode="checkout"
               triggerVariant="badge"
-              triggerClassName="h-5 text-[10px] py-0 px-1.5 border-0 bg-transparent hover:bg-accent/50"
+              triggerClassName="h-5 text-2xs py-0 px-1.5 border-0 bg-transparent hover:bg-accent/50"
               onBranchChanged={refreshWorktrees}
               dropUp
             />
@@ -222,7 +222,7 @@ export default React.memo(function GitContextBar({
           <button
             onClick={handlePush}
             disabled={!worktreePath || pushLoading}
-            className="flex items-center gap-1 h-5 px-1.5 rounded text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+            className="flex items-center gap-1 h-5 px-1.5 rounded text-2xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-30 disabled:pointer-events-none"
             title={worktreePath ? "Push branch" : "Create a worktree first"}
           >
             {pushLoading ? (
@@ -240,7 +240,7 @@ export default React.memo(function GitContextBar({
           <button
             onClick={() => setShowPRDialog(true)}
             disabled={!worktreePath}
-            className="flex items-center gap-1 h-5 px-1.5 rounded text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+            className="flex items-center gap-1 h-5 px-1.5 rounded text-2xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-30 disabled:pointer-events-none"
             title={
               worktreePath ? "Create pull request" : "Create a worktree first"
             }
@@ -254,7 +254,7 @@ export default React.memo(function GitContextBar({
             <button
               onClick={() => setShowMergeDialog(true)}
               disabled={mergeLoading}
-              className="flex items-center gap-1 h-5 px-1.5 rounded text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+              className="flex items-center gap-1 h-5 px-1.5 rounded text-2xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-30 disabled:pointer-events-none"
               title="Merge branch"
             >
               {mergeLoading ? (
diff --git a/src/components/Chat/ModeSelector.tsx b/src/components/Chat/ModeSelector.tsx
index 78b0fc9..c009722 100644
--- a/src/components/Chat/ModeSelector.tsx
+++ b/src/components/Chat/ModeSelector.tsx
@@ -76,7 +76,7 @@ export default React.memo(function ModeSelector({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
-        className="flex items-center gap-1 h-7 px-2 rounded text-[11px] font-medium text-dim-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-50 cursor-pointer"
+        className="flex items-center gap-1 h-7 px-2 rounded text-xs font-medium text-dim-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-50 cursor-pointer"
         disabled={disabled}
         title="Switch agent mode"
       >
@@ -90,7 +90,7 @@ export default React.memo(function ModeSelector({
         className="w-52 p-1 gap-0"
       >
         {modeOption.description && (
-          <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-b border-border/30 mb-1">
+          <div className="px-2 py-1.5 text-2xs text-muted-foreground border-b border-border/30 mb-1">
             {modeOption.description}
           </div>
         )}
@@ -110,7 +110,7 @@ export default React.memo(function ModeSelector({
               <div className="flex flex-col gap-0 min-w-0 flex-1">
                 <span className="text-xs capitalize">{mode.name}</span>
                 {mode.description && (
-                  <span className="text-[10px] text-muted-foreground truncate">
+                  <span className="text-2xs text-muted-foreground truncate">
                     {mode.description}
                   </span>
                 )}
diff --git a/src/components/Chat/ModelSelector.tsx b/src/components/Chat/ModelSelector.tsx
index 3459b58..d074026 100644
--- a/src/components/Chat/ModelSelector.tsx
+++ b/src/components/Chat/ModelSelector.tsx
@@ -133,7 +133,7 @@ export default React.memo(function ModelSelector({
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 gap-1.5 px-2 text-[11px] font-medium text-dim-foreground hover:text-foreground cursor-pointer"
+            className="h-7 gap-1.5 px-2 text-xs font-medium text-dim-foreground hover:text-foreground cursor-pointer"
             disabled={disabled}
           />
         }
@@ -141,7 +141,7 @@ export default React.memo(function ModelSelector({
         {logoSlug && (
           <ModelSelectorLogo provider={logoSlug} className="size-3" />
         )}
-        <ModelSelectorName className="max-w-[140px] text-[11px]">
+        <ModelSelectorName className="max-w-[140px] text-xs">
           {activeModelLabel}
         </ModelSelectorName>
         <ChevronDown size={10} className="text-muted-foreground" />
@@ -178,7 +178,7 @@ export default React.memo(function ModelSelector({
           ) : (
             filteredGroups.map((group) => (
               <div key={group.name}>
-                <div className="px-2 py-1.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+                <div className="px-2 py-1.5 text-2xs font-medium text-muted-foreground uppercase tracking-wider">
                   {group.name}
                 </div>
                 {group.options.map((model) => (
@@ -236,7 +236,7 @@ const ModelItem = React.memo(function ModelItem({
       <div className="flex flex-col gap-0 min-w-0 flex-1">
         <span className="text-xs truncate">{model.name}</span>
         {model.description && (
-          <span className="text-[10px] text-muted-foreground truncate">
+          <span className="text-2xs text-muted-foreground truncate">
             {model.description}
           </span>
         )}
diff --git a/src/components/Chat/PermissionDialog.tsx b/src/components/Chat/PermissionDialog.tsx
index c16b99c..5ac646c 100644
--- a/src/components/Chat/PermissionDialog.tsx
+++ b/src/components/Chat/PermissionDialog.tsx
@@ -176,13 +176,13 @@ const PermissionCard = React.memo(function PermissionCard({
                   Permission Required
                 </span>
               </div>
-              <span className="text-[11px] text-muted-foreground font-medium">
+              <span className="text-xs text-muted-foreground font-medium">
                 {config.label}
               </span>
             </div>
           </div>
           <div
-            className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-mono tabular-nums ${
+            className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-mono tabular-nums ${
               isExpired
                 ? "bg-muted/40 text-muted-foreground"
                 : isUrgent
diff --git a/src/components/Chat/ThoughtLevelSelector.tsx b/src/components/Chat/ThoughtLevelSelector.tsx
index 1fc01f5..d11836e 100644
--- a/src/components/Chat/ThoughtLevelSelector.tsx
+++ b/src/components/Chat/ThoughtLevelSelector.tsx
@@ -69,7 +69,7 @@ export default React.memo(function ThoughtLevelSelector({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
-        className="flex items-center gap-1 h-7 px-2 rounded text-[11px] font-medium text-dim-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-50 cursor-pointer"
+        className="flex items-center gap-1 h-7 px-2 rounded text-xs font-medium text-dim-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-50 cursor-pointer"
         disabled={disabled}
         title="Thinking level"
       >
@@ -84,7 +84,7 @@ export default React.memo(function ThoughtLevelSelector({
         className="w-52 p-1 gap-0"
       >
         {thoughtOption.description && (
-          <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-b border-border/30 mb-1">
+          <div className="px-2 py-1.5 text-2xs text-muted-foreground border-b border-border/30 mb-1">
             {thoughtOption.description}
           </div>
         )}
@@ -104,7 +104,7 @@ export default React.memo(function ThoughtLevelSelector({
               <div className="flex flex-col gap-0 min-w-0 flex-1">
                 <span className="text-xs capitalize">{level.name}</span>
                 {level.description && (
-                  <span className="text-[10px] text-muted-foreground truncate">
+                  <span className="text-2xs text-muted-foreground truncate">
                     {level.description}
                   </span>
                 )}
diff --git a/src/components/Chat/ThreadStatusBadge.tsx b/src/components/Chat/ThreadStatusBadge.tsx
index a187c6c..672ced9 100644
--- a/src/components/Chat/ThreadStatusBadge.tsx
+++ b/src/components/Chat/ThreadStatusBadge.tsx
@@ -104,7 +104,7 @@ export default React.memo(function ThreadStatusBadge({
 
   return (
     <span
-      className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[11px] font-medium ${state.colorClass} ${
+      className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-xs font-medium ${state.colorClass} ${
         state.animate ? "animate-pulse" : ""
       } bg-muted/40`}
     >
diff --git a/src/components/Chat/ToolCallCard.tsx b/src/components/Chat/ToolCallCard.tsx
index 6b8493f..1c98e9d 100644
--- a/src/components/Chat/ToolCallCard.tsx
+++ b/src/components/Chat/ToolCallCard.tsx
@@ -410,7 +410,7 @@ export default React.memo(function ToolCallCard({ toolCall, sessionId }: ToolCal
           ) : (
             <KindIcon className="size-3" />
           )}
-          <span className="text-[11px]">{displayLabel}</span>
+          <span className="text-xs">{displayLabel}</span>
         </div>
       </div>
     );
@@ -484,13 +484,13 @@ function ReadCard({
     <div className="not-prose w-full rounded-md border border-border/40 bg-card/30 mb-1 flex items-center gap-2 px-3 py-1.5">
       <FileText className="size-3.5 text-muted-foreground shrink-0" />
       <span
-        className="text-[12px] font-mono text-dim-foreground truncate flex-1 text-left"
+        className="text-xs font-mono text-dim-foreground truncate flex-1 text-left"
         title={meta.filePath}
       >
         {meta.label}
       </span>
       {lineCount !== null && (
-        <span className="text-[10px] text-muted-foreground/50 shrink-0">
+        <span className="text-2xs text-muted-foreground/50 shrink-0">
           {lineCount} lines
         </span>
       )}
@@ -523,24 +523,24 @@ function EditCard({
           <FileDiff className="size-3.5 text-primary shrink-0" />
         )}
         <span
-          className="text-[12px] font-mono text-dim-foreground truncate flex-1 text-left"
+          className="text-xs font-mono text-dim-foreground truncate flex-1 text-left"
           title={meta.filePath}
         >
           {meta.label}
         </span>
         {/* Diff stats */}
         {(meta.linesAdded !== undefined && meta.linesAdded > 0) && (
-          <span className="text-[10px] font-medium text-success shrink-0">
+          <span className="text-2xs font-medium text-success shrink-0">
             +{meta.linesAdded}
           </span>
         )}
         {(meta.linesRemoved !== undefined && meta.linesRemoved > 0) && (
-          <span className="text-[10px] font-medium text-destructive shrink-0">
+          <span className="text-2xs font-medium text-destructive shrink-0">
             −{meta.linesRemoved}
           </span>
         )}
         {meta.isNewFile && (
-          <Badge variant="outline" className="text-[9px] px-1.5 py-0 h-4 text-success border-success/30 shrink-0">
+          <Badge variant="outline" className="text-2xs px-1.5 py-0 h-4 text-success border-success/30 shrink-0">
             new
           </Badge>
         )}
@@ -586,12 +586,12 @@ function DeleteCard({
       <CollapsibleTrigger className="flex w-full items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-destructive/5 transition-colors">
         <Trash2 className="size-3.5 text-destructive/70 shrink-0" />
         <span
-          className="text-[12px] font-mono text-destructive/80 truncate flex-1 text-left line-through decoration-destructive/30"
+          className="text-xs font-mono text-destructive/80 truncate flex-1 text-left line-through decoration-destructive/30"
           title={meta.filePath}
         >
           {meta.label}
         </span>
-        <Badge variant="destructive" className="text-[9px] px-1.5 py-0 h-4 shrink-0">
+        <Badge variant="destructive" className="text-2xs px-1.5 py-0 h-4 shrink-0">
           deleted
         </Badge>
         <StatusDot status={toolCall.status} />
@@ -648,7 +648,7 @@ function ExecuteCard({
     >
       <CollapsibleTrigger className="flex w-full items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors">
         <SquareTerminal className="size-3.5 text-muted-foreground shrink-0" />
-        <code className="text-[11.5px] font-mono text-dim-foreground truncate flex-1 text-left">
+        <code className="text-xs font-mono text-dim-foreground truncate flex-1 text-left">
           <span className="text-muted-foreground/50 mr-1">$</span>
           {fullCommand.length > 80 ? fullCommand.slice(0, 77) + "…" : fullCommand}
         </code>
@@ -656,7 +656,7 @@ function ExecuteCard({
         {exitCode !== undefined && (
           <Badge
             variant={exitCode === 0 ? "secondary" : "destructive"}
-            className="text-[9px] px-1.5 py-0 h-4 gap-0.5 font-mono shrink-0"
+            className="text-2xs px-1.5 py-0 h-4 gap-0.5 font-mono shrink-0"
           >
             <Hash className="size-2.5" />
             {exitCode}
@@ -671,11 +671,11 @@ function ExecuteCard({
       <CollapsibleContent>
         {/* Snippet command display */}
         <div className="border-t border-border/30 px-3 py-1.5">
-          <Snippet code={fullCommand} className="h-8 text-[11px] bg-zinc-950/50 border-border/30">
+          <Snippet code={fullCommand} className="h-8 text-xs bg-zinc-950/50 border-border/30">
             <SnippetAddon>
               <DollarSign className="size-3 text-muted-foreground/50" />
             </SnippetAddon>
-            <SnippetInput className="text-[11px] text-dim-foreground" />
+            <SnippetInput className="text-xs text-dim-foreground" />
             <SnippetCopyButton />
           </Snippet>
         </div>
@@ -721,11 +721,11 @@ function SearchCard({
     <Collapsible className="group not-prose w-full rounded-md border border-border/40 bg-card/30 mb-1">
       <CollapsibleTrigger className="flex w-full items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors">
         <Search className="size-3.5 text-muted-foreground shrink-0" />
-        <span className="text-[12px] text-dim-foreground truncate flex-1 text-left">
+        <span className="text-xs text-dim-foreground truncate flex-1 text-left">
           <span className="font-mono text-primary/80">{meta.query ?? meta.label}</span>
         </span>
         {meta.resultCount !== undefined && meta.resultCount > 0 && (
-          <span className="text-[10px] text-muted-foreground/60 shrink-0">
+          <span className="text-2xs text-muted-foreground/60 shrink-0">
             {meta.resultCount} result{meta.resultCount !== 1 ? "s" : ""}
           </span>
         )}
@@ -810,7 +810,7 @@ function FetchCard({
       <CollapsibleTrigger className="flex w-full items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors">
         <Globe className="size-3.5 text-muted-foreground shrink-0" />
         <span
-          className="text-[12px] font-mono text-primary/70 truncate flex-1 text-left"
+          className="text-xs font-mono text-primary/70 truncate flex-1 text-left"
           title={meta.url}
         >
           {displayUrl}
@@ -859,10 +859,10 @@ function GenericCard({
       <CollapsibleTrigger className="flex w-full items-center justify-between gap-3 px-3 py-2 cursor-pointer">
         <div className="flex items-center gap-2 min-w-0">
           <Icon className="size-4 text-muted-foreground shrink-0" />
-          <span className="text-[13px] text-dim-foreground truncate">
+          <span className="text-sm text-dim-foreground truncate">
             {label}
           </span>
-          <Badge className="gap-1 rounded-full text-[11px] shrink-0" variant={statusCfg.variant}>
+          <Badge className="gap-1 rounded-full text-xs shrink-0" variant={statusCfg.variant}>
             {statusCfg.icon}
             {statusCfg.label}
           </Badge>
@@ -920,7 +920,7 @@ function FallbackMeta({
   return (
     <div className="rounded-md bg-muted/50 px-3 py-2 font-mono text-xs text-muted-foreground">
       <p className="break-all">{toolCall.title}</p>
-      <p className="mt-1 text-[10px] text-muted-foreground/60">
+      <p className="mt-1 text-2xs text-muted-foreground/60">
         {mcpToolName ?? toolCall.kind} &middot; {toolCall.tool_call_id}
       </p>
     </div>
diff --git a/src/components/Chat/WaitingCard.tsx b/src/components/Chat/WaitingCard.tsx
index 86dfeb6..ba9d8c7 100644
--- a/src/components/Chat/WaitingCard.tsx
+++ b/src/components/Chat/WaitingCard.tsx
@@ -57,7 +57,7 @@ export default React.memo(function WaitingCard({
 
           {/* Question text */}
           <div className="flex-1 min-w-0">
-            <p className="text-[11px] font-medium text-warning/80 uppercase tracking-wider mb-0.5">
+            <p className="text-xs font-medium text-warning/80 uppercase tracking-wider mb-0.5">
               Waiting for input
             </p>
             <p className="text-xs text-foreground leading-relaxed">
diff --git a/src/components/CommandPalette/CommandPalette.tsx b/src/components/CommandPalette/CommandPalette.tsx
index 462460d..3641230 100644
--- a/src/components/CommandPalette/CommandPalette.tsx
+++ b/src/components/CommandPalette/CommandPalette.tsx
@@ -96,7 +96,7 @@ export default function CommandPalette() {
                 placeholder="Type a command or search..."
                 className="h-11 w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
               />
-              <kbd className="hidden shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium sm:inline-block bg-popover text-muted-foreground border border-border">
+              <kbd className="hidden shrink-0 rounded px-1.5 py-0.5 text-2xs font-medium sm:inline-block bg-popover text-muted-foreground border border-border">
                 ESC
               </kbd>
             </div>
@@ -111,7 +111,7 @@ export default function CommandPalette() {
               {recentCommands.length > 0 && (
                 <Command.Group
                   heading="Recent"
-                  className="[&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider text-muted-foreground"
+                  className="[&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-2xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider text-muted-foreground"
                 >
                   {recentCommands.map((cmd) => (
                     <CommandRow
@@ -128,7 +128,7 @@ export default function CommandPalette() {
                 <Command.Group
                   key={group}
                   heading={group}
-                  className="[&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider text-muted-foreground"
+                  className="[&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-2xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider text-muted-foreground"
                 >
                   {items.map((cmd) => (
                     <CommandRow
@@ -142,18 +142,18 @@ export default function CommandPalette() {
             </Command.List>
 
             {/* Footer hint */}
-            <div className="flex items-center gap-3 border-t border-border px-4 py-2 text-[11px] text-muted-foreground">
+            <div className="flex items-center gap-3 border-t border-border px-4 py-2 text-xs text-muted-foreground">
               <span className="flex items-center gap-1">
-                <kbd className="inline-flex h-4 items-center rounded px-1 text-[10px] font-medium bg-popover border border-border">
+                <kbd className="inline-flex h-4 items-center rounded px-1 text-2xs font-medium bg-popover border border-border">
                   ↑
                 </kbd>
-                <kbd className="inline-flex h-4 items-center rounded px-1 text-[10px] font-medium bg-popover border border-border">
+                <kbd className="inline-flex h-4 items-center rounded px-1 text-2xs font-medium bg-popover border border-border">
                   ↓
                 </kbd>
                 navigate
               </span>
               <span className="flex items-center gap-1">
-                <kbd className="inline-flex h-4 items-center rounded px-1 text-[10px] font-medium bg-popover border border-border">
+                <kbd className="inline-flex h-4 items-center rounded px-1 text-2xs font-medium bg-popover border border-border">
                   ↵
                 </kbd>
                 select
@@ -180,7 +180,7 @@ function CommandRow({
     <Command.Item
       value={`${cmd.group} ${cmd.label}`}
       onSelect={() => onSelect(cmd.id)}
-      className="flex cursor-pointer items-center gap-2.5 rounded-[var(--radius-element)] px-2.5 py-2 text-[13px] text-dim-foreground aria-selected:bg-accent"
+      className="flex cursor-pointer items-center gap-2.5 rounded-[var(--radius-element)] px-2.5 py-2 text-sm text-dim-foreground aria-selected:bg-accent"
     >
       {Icon && (
         <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground">
@@ -189,7 +189,7 @@ function CommandRow({
       )}
       <span className="truncate">{cmd.label}</span>
       {cmd.shortcut && (
-        <kbd className="ml-auto shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium bg-popover text-muted-foreground border border-border">
+        <kbd className="ml-auto shrink-0 rounded px-1.5 py-0.5 text-2xs font-medium bg-popover text-muted-foreground border border-border">
           {cmd.shortcut}
         </kbd>
       )}
diff --git a/src/components/Dashboard/ArchivedTaskList.tsx b/src/components/Dashboard/ArchivedTaskList.tsx
index 3bc81f1..72cf4ba 100644
--- a/src/components/Dashboard/ArchivedTaskList.tsx
+++ b/src/components/Dashboard/ArchivedTaskList.tsx
@@ -61,7 +61,7 @@ export default function ArchivedTaskList({
               onClick={() => onTaskClick(task.id)}
             >
               {/* Task ID */}
-              <span className="text-[10px] font-mono text-muted-foreground shrink-0 w-12">
+              <span className="text-2xs font-mono text-muted-foreground shrink-0 w-12">
                 {task.id}
               </span>
 
@@ -79,13 +79,13 @@ export default function ArchivedTaskList({
                   {task.labels.slice(0, 3).map((label) => (
                     <span
                       key={label}
-                      className="inline-block px-1.5 py-px text-[9px] font-medium rounded-full bg-accent text-muted-foreground truncate max-w-[80px]"
+                      className="inline-block px-1.5 py-px text-2xs font-medium rounded-full bg-accent text-muted-foreground truncate max-w-[80px]"
                     >
                       {label}
                     </span>
                   ))}
                   {task.labels.length > 3 && (
-                    <span className="text-[9px] text-muted-foreground">
+                    <span className="text-2xs text-muted-foreground">
                       +{task.labels.length - 3}
                     </span>
                   )}
@@ -93,7 +93,7 @@ export default function ArchivedTaskList({
               )}
 
               {/* Archived date */}
-              <span className="text-[10px] text-muted-foreground shrink-0">
+              <span className="text-2xs text-muted-foreground shrink-0">
                 {formatDate(task.updated_at)}
               </span>
 
diff --git a/src/components/Dashboard/DashboardView.tsx b/src/components/Dashboard/DashboardView.tsx
index 1139e1e..1890b09 100644
--- a/src/components/Dashboard/DashboardView.tsx
+++ b/src/components/Dashboard/DashboardView.tsx
@@ -400,7 +400,7 @@ export default function DashboardView() {
         {toolbar}
       </ViewLayout.Toolbar>
 
-      <div className="flex flex-col flex-1 min-h-0">
+      <div className="flex flex-col flex-1 min-h-0 gap-1.5">
         {activeProjectId && hasContinuousRun && (
           <ContinuousModeBar projectId={activeProjectId} />
         )}
diff --git a/src/components/Dashboard/DependencyBadge.tsx b/src/components/Dashboard/DependencyBadge.tsx
index b8facdf..efa9622 100644
--- a/src/components/Dashboard/DependencyBadge.tsx
+++ b/src/components/Dashboard/DependencyBadge.tsx
@@ -1,25 +1,8 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { Link, Lock, Check, ChevronRight } from "lucide-react";
-import type { Task, TaskStatus } from "../../types";
-
-const STATUS_COLORS: Record<TaskStatus, string> = {
-  backlog: "bg-muted-foreground/60",
-  ready: "bg-blue-500",
-  "in-progress": "bg-amber-500",
-  "in-review": "bg-purple-500",
-  done: "bg-emerald-500",
-  archived: "bg-muted-foreground/30",
-};
-
-const STATUS_LABELS: Record<TaskStatus, string> = {
-  backlog: "Backlog",
-  ready: "Ready",
-  "in-progress": "In Progress",
-  "in-review": "In Review",
-  done: "Done",
-  archived: "Archived",
-};
+import type { Task } from "../../types";
+import { TASK_STATUS_DOT_COLORS, TASK_STATUS_LABELS } from "../../lib/taskStatusColors";
 
 interface DependencyBadgeProps {
   task: Task;
@@ -136,7 +119,7 @@ export default React.memo(function DependencyBadge({
         ref={triggerRef}
         onClick={handleClick}
         onPointerDown={(e) => e.stopPropagation()}
-        className={`flex items-center gap-0.5 px-1 py-px rounded text-[10px] font-medium transition-colors cursor-pointer ${
+        className={`flex items-center gap-0.5 px-1 py-px rounded text-2xs font-medium transition-colors cursor-pointer ${
           isBlocked
             ? "text-warning bg-warning/10 hover:bg-warning/20"
             : "text-muted-foreground hover:bg-accent hover:text-foreground"
@@ -168,7 +151,7 @@ export default React.memo(function DependencyBadge({
             {/* Dependencies section */}
             {totalDeps > 0 && (
               <div>
-                <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider bg-accent/50">
+                <div className="px-2 py-1 text-2xs font-semibold text-muted-foreground uppercase tracking-wider bg-accent/50">
                   Depends on
                 </div>
                 {task.depends_on.map((depId) => {
@@ -183,14 +166,14 @@ export default React.memo(function DependencyBadge({
                       {isDone ? (
                         <Check className="size-3 shrink-0 text-success" />
                       ) : (
-                        <div className={`size-2 shrink-0 rounded-full ${dep ? STATUS_COLORS[dep.status] : "bg-muted-foreground/30"}`} />
+                        <div className={`size-2 shrink-0 rounded-full ${dep ? TASK_STATUS_DOT_COLORS[dep.status] : "bg-muted-foreground/30"}`} />
                       )}
-                      <span className="text-[11px] text-foreground truncate flex-1">
+                      <span className="text-xs text-foreground truncate flex-1">
                         {dep?.title ?? depId}
                       </span>
                       {dep && (
-                        <span className="text-[9px] text-muted-foreground shrink-0">
-                          {STATUS_LABELS[dep.status]}
+                        <span className="text-2xs text-muted-foreground shrink-0">
+                          {TASK_STATUS_LABELS[dep.status]}
                         </span>
                       )}
                       <ChevronRight className="size-3 shrink-0 text-muted-foreground" />
@@ -203,7 +186,7 @@ export default React.memo(function DependencyBadge({
             {/* Dependents section */}
             {totalDependents > 0 && (
               <div>
-                <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider bg-accent/50 border-t border-border/60">
+                <div className="px-2 py-1 text-2xs font-semibold text-muted-foreground uppercase tracking-wider bg-accent/50 border-t border-border/60">
                   Depended by
                 </div>
                 {dependents.map((depId) => {
@@ -214,13 +197,13 @@ export default React.memo(function DependencyBadge({
                       onClick={(e) => handleTaskClick(e, depId)}
                       className="w-full flex items-center gap-1.5 px-2 py-1 text-left hover:bg-accent/60 transition-colors cursor-pointer"
                     >
-                      <div className={`size-2 shrink-0 rounded-full ${dep ? STATUS_COLORS[dep.status] : "bg-muted-foreground/30"}`} />
-                      <span className="text-[11px] text-foreground truncate flex-1">
+                      <div className={`size-2 shrink-0 rounded-full ${dep ? TASK_STATUS_DOT_COLORS[dep.status] : "bg-muted-foreground/30"}`} />
+                      <span className="text-xs text-foreground truncate flex-1">
                         {dep?.title ?? depId}
                       </span>
                       {dep && (
-                        <span className="text-[9px] text-muted-foreground shrink-0">
-                          {STATUS_LABELS[dep.status]}
+                        <span className="text-2xs text-muted-foreground shrink-0">
+                          {TASK_STATUS_LABELS[dep.status]}
                         </span>
                       )}
                       <ChevronRight className="size-3 shrink-0 text-muted-foreground" />
diff --git a/src/components/Dashboard/DependencyGraph.tsx b/src/components/Dashboard/DependencyGraph.tsx
index 322401c..51d5d65 100644
--- a/src/components/Dashboard/DependencyGraph.tsx
+++ b/src/components/Dashboard/DependencyGraph.tsx
@@ -12,32 +12,13 @@ import {
   CirclePause,
   Minus,
 } from "lucide-react";
-import type { Task, Session, TaskStatus } from "../../types";
+import type { Task, Session } from "../../types";
 import { useAppStore } from "../../store/appStore";
 import { isTaskBlocked, buildDependentsMap } from "../../lib/taskSort";
+import { TASK_STATUS_DOT_COLORS, TASK_STATUS_LABELS } from "../../lib/taskStatusColors";
 import PriorityBadge from "./PriorityBadge";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 
-// ── Status display ──
-
-const STATUS_COLORS: Record<TaskStatus, string> = {
-  backlog: "bg-muted-foreground/50",
-  ready: "bg-blue-500",
-  "in-progress": "bg-amber-500",
-  "in-review": "bg-purple-500",
-  done: "bg-emerald-500",
-  archived: "bg-muted-foreground/30",
-};
-
-const STATUS_LABELS: Record<TaskStatus, string> = {
-  backlog: "Backlog",
-  ready: "Ready",
-  "in-progress": "In Progress",
-  "in-review": "In Review",
-  done: "Done",
-  archived: "Archived",
-};
-
 // ── Build tree structure ──
 
 interface TreeNode {
@@ -214,7 +195,7 @@ function TreeRow({
         </button>
 
         {/* Status dot */}
-        <div className={`size-2 rounded-full shrink-0 mr-2 ${STATUS_COLORS[task.status]}`} />
+        <div className={`size-2 rounded-full shrink-0 mr-2 ${TASK_STATUS_DOT_COLORS[task.status]}`} />
 
         {/* Priority */}
         <div className="shrink-0 mr-1.5">
@@ -222,26 +203,26 @@ function TreeRow({
         </div>
 
         {/* Title */}
-        <span className="text-[12px] font-medium text-foreground truncate flex-1 leading-none">
+        <span className="text-xs font-medium text-foreground truncate flex-1 leading-none">
           {task.title}
         </span>
 
         {/* Blocked indicator */}
         {blocked && (
-          <span className="flex items-center gap-0.5 text-[10px] text-warning mr-2 shrink-0">
+          <span className="flex items-center gap-0.5 text-2xs text-warning mr-2 shrink-0">
             <Lock className="size-3" />
             blocked
           </span>
         )}
 
         {/* Status label */}
-        <span className="text-[10px] text-muted-foreground mr-2 shrink-0 w-16 text-right">
-          {STATUS_LABELS[task.status]}
+        <span className="text-2xs text-muted-foreground mr-2 shrink-0 w-16 text-right">
+          {TASK_STATUS_LABELS[task.status]}
         </span>
 
         {/* Agent */}
         {task.agent && (
-          <span className="text-[10px] text-muted-foreground mr-2 shrink-0 w-16 truncate text-right">
+          <span className="text-2xs text-muted-foreground mr-2 shrink-0 w-16 truncate text-right">
             {task.agent}
           </span>
         )}
@@ -259,7 +240,7 @@ function TreeRow({
               ) : (
                 <Loader2 className="size-3 text-primary animate-spin" />
               )}
-              <span className="text-[10px] text-muted-foreground truncate">
+              <span className="text-2xs text-muted-foreground truncate">
                 {mcpData.current_step != null && mcpData.total_steps != null
                   ? `${mcpData.current_step}/${mcpData.total_steps}`
                   : mcpData.message || "Working"}
@@ -268,7 +249,7 @@ function TreeRow({
           ) : isActive ? (
             <>
               <Loader2 className="size-3 text-primary animate-spin" />
-              <span className="text-[10px] text-muted-foreground">Starting</span>
+              <span className="text-2xs text-muted-foreground">Starting</span>
             </>
           ) : null}
         </div>
@@ -417,13 +398,13 @@ export default React.memo(function DependencyGraph({
     <div className="flex flex-col h-full min-h-0">
       {/* Tree toolbar */}
       <div className="flex items-center gap-3 px-2 py-1.5 border-b border-border/40 shrink-0">
-        <span className="text-[11px] text-muted-foreground">
+        <span className="text-xs text-muted-foreground">
           {stats.rootCount} root{stats.rootCount !== 1 ? "s" : ""}
         </span>
         {stats.depCount > 0 && (
           <>
             <span className="text-border">·</span>
-            <span className="text-[11px] text-muted-foreground">
+            <span className="text-xs text-muted-foreground">
               {stats.depCount} with dependencies
             </span>
           </>
@@ -431,7 +412,7 @@ export default React.memo(function DependencyGraph({
         {stats.blockedCount > 0 && (
           <>
             <span className="text-border">·</span>
-            <span className="text-[11px] text-warning">
+            <span className="text-xs text-warning">
               {stats.blockedCount} blocked
             </span>
           </>
@@ -439,13 +420,13 @@ export default React.memo(function DependencyGraph({
         <div className="flex-1" />
         <button
           onClick={handleExpandAll}
-          className="text-[10px] text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+          className="text-2xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
         >
           Expand all
         </button>
         <button
           onClick={handleCollapseAll}
-          className="text-[10px] text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+          className="text-2xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
         >
           Collapse all
         </button>
diff --git a/src/components/Dashboard/EmptyState.tsx b/src/components/Dashboard/EmptyState.tsx
index 296459b..351a857 100644
--- a/src/components/Dashboard/EmptyState.tsx
+++ b/src/components/Dashboard/EmptyState.tsx
@@ -15,7 +15,7 @@ export default function EmptyState({ onNewTask }: EmptyStateProps) {
         <h3 className="m-0 mb-2 text-base font-semibold text-foreground">
           No tasks yet
         </h3>
-        <p className="m-0 mb-4 text-[13px] text-dim-foreground leading-[1.5]">
+        <p className="m-0 mb-4 text-sm text-dim-foreground leading-[1.5]">
           Create a task file in your project's <code className="text-xs">.agents/tasks/</code>{" "}
           directory or create one from the UI.
         </p>
diff --git a/src/components/Dashboard/FilterBar.tsx b/src/components/Dashboard/FilterBar.tsx
index 0afd7fb..10c9d36 100644
--- a/src/components/Dashboard/FilterBar.tsx
+++ b/src/components/Dashboard/FilterBar.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Search, X } from "lucide-react";
+import { Check, ChevronDown, Layers, Search, Tag, Terminal, X } from "lucide-react";
 import type { TaskStatus } from "../../types";
 import type { FilterState, FilterAction } from "../../hooks/useDashboardFilters";
 import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
@@ -8,6 +8,19 @@ import { DEFAULT_PRIORITIES, getPriorityCssVar } from "../../lib/priorities";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 import { gradientHexColors } from "../ui/orecus.io/lib/color-utils";
 import { Separator } from "../ui/separator";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../ui/popover";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "../ui/command";
 
 const STATUSES: { value: TaskStatus; label: string }[] = [
   { value: "backlog", label: "Backlog" },
@@ -41,7 +54,7 @@ function ToggleChip({
   return (
     <button
       onClick={onClick}
-      className={`px-2 py-0.5 text-[11px] font-semibold rounded-[var(--radius-element)] cursor-pointer transition-all duration-100 ${active ? "bg-accent" : "bg-transparent"}`}
+      className={`h-6 px-2 text-xs font-semibold rounded-[var(--radius-element)] cursor-pointer transition-all duration-100 ${active ? "bg-accent" : "bg-transparent"}`}
       style={{
         border: active
           ? `1px solid ${color ?? "var(--primary)"}`
@@ -54,6 +67,111 @@ function ToggleChip({
   );
 }
 
+// ── Searchable multi-select filter dropdown ──
+
+interface FilterDropdownProps {
+  icon: React.ReactNode;
+  label: string;
+  items: { value: string; label: string }[];
+  selected: Set<string>;
+  onToggle: (value: string) => void;
+  placeholder?: string;
+}
+
+function FilterDropdown({
+  icon,
+  label,
+  items,
+  selected,
+  onToggle,
+  placeholder,
+}: FilterDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const count = selected.size;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        className={`inline-flex items-center gap-1.5 h-6 px-2 text-xs font-medium rounded-[var(--radius-element)] cursor-pointer transition-all duration-100 border ${
+          count > 0
+            ? "border-primary/60 bg-accent text-foreground"
+            : "border-border bg-transparent text-muted-foreground hover:text-foreground hover:border-border/80"
+        }`}
+      >
+        {icon}
+        <span>{label}</span>
+        {count > 0 && (
+          <span className="inline-flex items-center justify-center size-4 rounded-full bg-primary text-primary-foreground text-[10px] font-bold leading-none">
+            {count}
+          </span>
+        )}
+        <ChevronDown className={`size-3 opacity-50 transition-transform duration-150 ${open ? "rotate-180" : ""}`} />
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        sideOffset={6}
+        className="w-56 p-0"
+      >
+        <Command>
+          <CommandInput placeholder={placeholder ?? `Search ${label.toLowerCase()}…`} />
+          <CommandList>
+            <CommandEmpty className="py-4 text-center text-xs text-muted-foreground">
+              No {label.toLowerCase()} found
+            </CommandEmpty>
+            <CommandGroup>
+              {items.map((item) => {
+                const isSelected = selected.has(item.value);
+                return (
+                  <CommandItem
+                    key={item.value}
+                    value={item.label}
+                    onSelect={() => onToggle(item.value)}
+                    data-checked={isSelected || undefined}
+                    className="gap-2 text-xs"
+                  >
+                    <div
+                      className={`flex items-center justify-center size-3.5 shrink-0 rounded-sm border transition-colors ${
+                        isSelected
+                          ? "bg-primary border-primary text-primary-foreground"
+                          : "border-muted-foreground/40"
+                      }`}
+                    >
+                      {isSelected && <Check className="size-2.5" />}
+                    </div>
+                    <span className="truncate">{item.label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ── Active filter pills (shown inline, dismissible) ──
+
+function ActiveFilterPill({
+  label,
+  onRemove,
+}: {
+  label: string;
+  onRemove: () => void;
+}) {
+  return (
+    <span className="inline-flex items-center gap-0.5 pl-1.5 pr-0.5 py-px text-2xs font-medium rounded-full bg-primary/10 text-foreground border border-primary/20">
+      <span className="truncate max-w-[100px]">{label}</span>
+      <button
+        onClick={onRemove}
+        className="inline-flex items-center justify-center size-3.5 rounded-full hover:bg-primary/20 cursor-pointer transition-colors"
+      >
+        <X className="size-2.5" />
+      </button>
+    </span>
+  );
+}
+
 export default function FilterBar({
   filters,
   dispatchFilter,
@@ -99,128 +217,160 @@ export default function FilterBar({
     }
   }, [filters.searchQuery]);
 
+  // Build dropdown items
+  const labelItems = allLabels.map((l) => ({ value: l, label: l }));
+  const agentItems = allAgents.map((a) => ({ value: a, label: a }));
+  const epicItems = allEpics.map((e) => ({ value: e.id, label: e.title }));
+
+  // Collect active dropdown filters for pill display
+  const activePills: { key: string; label: string; onRemove: () => void }[] = [];
+  for (const label of filters.labels) {
+    activePills.push({
+      key: `label:${label}`,
+      label,
+      onRemove: () => dispatchFilter({ type: "TOGGLE_LABEL", label }),
+    });
+  }
+  for (const agent of filters.agents) {
+    activePills.push({
+      key: `agent:${agent}`,
+      label: agent,
+      onRemove: () => dispatchFilter({ type: "TOGGLE_AGENT", agent }),
+    });
+  }
+  for (const epicId of filters.epics) {
+    const epic = allEpics.find((e) => e.id === epicId);
+    activePills.push({
+      key: `epic:${epicId}`,
+      label: epic?.title ?? epicId,
+      onRemove: () => dispatchFilter({ type: "TOGGLE_EPIC", epicId }),
+    });
+  }
+
+  const hasDropdownFilters = activePills.length > 0;
+
   return (
-    <div className="flex items-center gap-2 flex-wrap py-1.5">
-      {/* Search input */}
-      <div className="relative flex items-center">
-        <Search className="absolute left-2 size-3.5 text-muted-foreground pointer-events-none" />
-        <input
-          ref={searchInputRef}
-          type="text"
-          value={localSearch}
-          onChange={(e) => handleSearchChange(e.target.value)}
-          placeholder="Search tasks…"
-          className="h-6 w-44 pl-7 pr-6 text-[11px] rounded-[var(--radius-element)] bg-transparent border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary/60 transition-colors"
-        />
-        {localSearch && (
-          <button
-            onClick={clearSearch}
-            className="absolute right-1.5 text-muted-foreground hover:text-foreground cursor-pointer"
-          >
-            <X className="size-3" />
-          </button>
-        )}
-      </div>
+    <div className="flex flex-col gap-1">
+      {/* Main filter row */}
+      <div className="flex items-center gap-2 flex-wrap">
+        {/* Search input */}
+        <div className="relative flex items-center">
+          <Search className="absolute left-2 size-3.5 text-muted-foreground pointer-events-none" />
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={localSearch}
+            onChange={(e) => handleSearchChange(e.target.value)}
+            placeholder="Search tasks…"
+            className="h-6 w-44 pl-7 pr-6 text-xs rounded-[var(--radius-element)] bg-transparent border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary/60 transition-colors"
+          />
+          {localSearch && (
+            <button
+              onClick={clearSearch}
+              className="absolute right-1.5 text-muted-foreground hover:text-foreground cursor-pointer"
+            >
+              <X className="size-3" />
+            </button>
+          )}
+        </div>
 
-      <Separator orientation="vertical" className="mx-0.5 h-4" />
-
-      {/* Priority toggles */}
-      <span className="text-[11px] text-muted-foreground mr-0.5">
-        Priority:
-      </span>
-      {priorities.map((p) => (
-        <ToggleChip
-          key={p.id}
-          label={p.id}
-          active={filters.priorities.has(p.id)}
-          color={getPriorityCssVar(p.id, priorities)}
-          onClick={() => dispatchFilter({ type: "TOGGLE_PRIORITY", priority: p.id })}
-        />
-      ))}
-
-      {/* Status toggles */}
-      <Separator orientation="vertical" className="mx-0.5 h-4" />
-      <span className="text-[11px] text-muted-foreground mr-0.5">
-        Status:
-      </span>
-      {STATUSES.map((s) => (
-        <ToggleChip
-          key={s.value}
-          label={s.label}
-          active={filters.statuses.has(s.value)}
-          color={accentHex}
-          onClick={() => dispatchFilter({ type: "TOGGLE_STATUS", status: s.value })}
-        />
-      ))}
-
-      {/* Label toggles */}
-      {allLabels.length > 0 && (
-        <>
-          <Separator orientation="vertical" className="mx-1 h-4" />
-          <span className="text-[11px] text-muted-foreground mr-0.5">
-            Label:
-          </span>
-          {allLabels.map((label) => (
-            <ToggleChip
-              key={label}
-              label={label}
-              active={filters.labels.has(label)}
-              color={accentHex}
-              onClick={() => dispatchFilter({ type: "TOGGLE_LABEL", label })}
-            />
-          ))}
-        </>
-      )}
+        <Separator orientation="vertical" className="mx-0.5 self-stretch" />
 
-      {/* Agent toggles */}
-      {allAgents.length > 0 && (
-        <>
-          <Separator orientation="vertical" className="mx-1 h-4" />
-          <span className="text-[11px] text-muted-foreground mr-0.5">
-            Agent:
-          </span>
-          {allAgents.map((agent) => (
-            <ToggleChip
-              key={agent}
-              label={agent}
-              active={filters.agents.has(agent)}
-              color={accentHex}
-              onClick={() => dispatchFilter({ type: "TOGGLE_AGENT", agent })}
-            />
-          ))}
-        </>
-      )}
+        {/* Priority toggles — bounded, always inline */}
+        <span className="text-xs text-muted-foreground mr-0.5">
+          Priority:
+        </span>
+        {priorities.map((p) => (
+          <ToggleChip
+            key={p.id}
+            label={p.id}
+            active={filters.priorities.has(p.id)}
+            color={getPriorityCssVar(p.id, priorities)}
+            onClick={() => dispatchFilter({ type: "TOGGLE_PRIORITY", priority: p.id })}
+          />
+        ))}
 
-      {/* Epic toggles */}
-      {allEpics.length > 0 && (
-        <>
-          <Separator orientation="vertical" className="mx-1 h-4" />
-          <span className="text-[11px] text-muted-foreground mr-0.5">
-            Epic:
-          </span>
-          {allEpics.map((epic) => (
-            <ToggleChip
-              key={epic.id}
-              label={`${epic.id} ${epic.title}`}
-              active={filters.epics.has(epic.id)}
-              color={accentHex}
-              onClick={() => dispatchFilter({ type: "TOGGLE_EPIC", epicId: epic.id })}
+        {/* Status toggles — bounded, always inline */}
+        <Separator orientation="vertical" className="mx-0.5 self-stretch" />
+        <span className="text-xs text-muted-foreground mr-0.5">
+          Status:
+        </span>
+        {STATUSES.map((s) => (
+          <ToggleChip
+            key={s.value}
+            label={s.label}
+            active={filters.statuses.has(s.value)}
+            color={accentHex}
+            onClick={() => dispatchFilter({ type: "TOGGLE_STATUS", status: s.value })}
+          />
+        ))}
+
+        {/* Dropdown filters — compact triggers for unbounded lists */}
+        {(allLabels.length > 0 || allAgents.length > 0 || allEpics.length > 0) && (
+          <>
+            <Separator orientation="vertical" className="mx-0.5 self-stretch" />
+
+            {allLabels.length > 0 && (
+              <FilterDropdown
+                icon={<Tag className="size-3" />}
+                label="Labels"
+                items={labelItems}
+                selected={filters.labels}
+                onToggle={(label) => dispatchFilter({ type: "TOGGLE_LABEL", label })}
+                placeholder="Search labels…"
+              />
+            )}
+
+            {allAgents.length > 0 && (
+              <FilterDropdown
+                icon={<Terminal className="size-3" />}
+                label="Agents"
+                items={agentItems}
+                selected={filters.agents}
+                onToggle={(agent) => dispatchFilter({ type: "TOGGLE_AGENT", agent })}
+                placeholder="Search agents…"
+              />
+            )}
+
+            {allEpics.length > 0 && (
+              <FilterDropdown
+                icon={<Layers className="size-3" />}
+                label="Epics"
+                items={epicItems}
+                selected={filters.epics}
+                onToggle={(epicId) => dispatchFilter({ type: "TOGGLE_EPIC", epicId })}
+                placeholder="Search epics…"
+              />
+            )}
+          </>
+        )}
+
+        {/* Clear all */}
+        <Button
+          variant="link"
+          size="xs"
+          hoverEffect="none"
+          clickEffect="none"
+          onClick={() => dispatchFilter({ type: "CLEAR_ALL" })}
+          className={`ml-auto transition-opacity duration-100 ${hasActiveFilters ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        >
+          Clear filters
+        </Button>
+      </div>
+
+      {/* Active dropdown filter pills — shown below main row when any are active */}
+      {hasDropdownFilters && (
+        <div className="flex items-center gap-1.5 flex-wrap pl-0.5">
+          <span className="text-2xs text-muted-foreground">Active:</span>
+          {activePills.map((pill) => (
+            <ActiveFilterPill
+              key={pill.key}
+              label={pill.label}
+              onRemove={pill.onRemove}
             />
           ))}
-        </>
+        </div>
       )}
-
-      {/* Clear all */}
-      <Button
-        variant="link"
-        size="xs"
-        hoverEffect="none"
-        clickEffect="none"
-        onClick={() => dispatchFilter({ type: "CLEAR_ALL" })}
-        className={`ml-auto transition-opacity duration-100 ${hasActiveFilters ? "opacity-100" : "opacity-0 pointer-events-none"}`}
-      >
-        Clear filters
-      </Button>
     </div>
   );
 }
diff --git a/src/components/Dashboard/GhostParentCard.tsx b/src/components/Dashboard/GhostParentCard.tsx
index 0a60e81..a109d85 100644
--- a/src/components/Dashboard/GhostParentCard.tsx
+++ b/src/components/Dashboard/GhostParentCard.tsx
@@ -1,24 +1,7 @@
 import { memo } from "react";
-import { GitBranch } from "lucide-react";
-import type { Task, TaskStatus } from "../../types";
-
-const STATUS_LABELS: Record<TaskStatus, string> = {
-  backlog: "Backlog",
-  ready: "Ready",
-  "in-progress": "In Progress",
-  "in-review": "In Review",
-  done: "Done",
-  archived: "Archived",
-};
-
-const STATUS_COLORS: Record<TaskStatus, string> = {
-  backlog: "bg-muted-foreground/30",
-  ready: "bg-blue-500/60",
-  "in-progress": "bg-amber-500/60",
-  "in-review": "bg-purple-500/60",
-  done: "bg-success/60",
-  archived: "bg-muted-foreground/20",
-};
+import { ExternalLink } from "lucide-react";
+import type { Task } from "../../types";
+import { TASK_STATUS_DOT_COLORS, TASK_STATUS_LABELS } from "../../lib/taskStatusColors";
 
 interface GhostParentCardProps {
   parentTask: Task;
@@ -36,24 +19,26 @@ const GhostParentCard = memo(function GhostParentCard({
 }: GhostParentCardProps) {
   return (
     <div
-      className="flex items-center gap-1.5 px-2 py-1 rounded-[var(--radius-element)] border border-dashed border-border/60 bg-card/30 cursor-pointer hover:bg-card/50 transition-colors"
+      className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border border-dashed border-border/40 bg-card/30 cursor-pointer hover:bg-card/50 transition-colors"
       onClick={(e) => {
         e.stopPropagation();
         onClick?.(parentTask.id);
       }}
-      title={`Depends on ${parentTask.id} (${STATUS_LABELS[parentTask.status]})`}
+      title={`Depends on ${parentTask.id} (${TASK_STATUS_LABELS[parentTask.status]})`}
     >
-      <GitBranch className="size-3 shrink-0 text-muted-foreground/60" />
-      <span className="text-[10px] font-mono text-muted-foreground/70 shrink-0">
+      <div className="size-4 rounded-full flex items-center justify-center opacity-50 bg-accent shrink-0">
+        <ExternalLink className="size-2.5 text-muted-foreground" />
+      </div>
+      <span className="text-[9px] font-mono text-muted-foreground/60 shrink-0">
         {parentTask.id}
       </span>
-      <span className="text-[10px] text-muted-foreground/60 truncate flex-1">
+      <span className="text-2xs text-muted-foreground/60 truncate flex-1">
         {parentTask.title}
       </span>
       <span
-        className={`text-[9px] px-1 rounded-sm text-white/80 shrink-0 ${STATUS_COLORS[parentTask.status]}`}
+        className={`text-[8px] font-semibold px-1.5 py-px rounded-[3px] shrink-0 ${TASK_STATUS_DOT_COLORS[parentTask.status]}/15 text-muted-foreground`}
       >
-        {STATUS_LABELS[parentTask.status]}
+        {TASK_STATUS_LABELS[parentTask.status]}
       </span>
     </div>
   );
diff --git a/src/components/Dashboard/KanbanBoard.tsx b/src/components/Dashboard/KanbanBoard.tsx
index 975709f..b4a9675 100644
--- a/src/components/Dashboard/KanbanBoard.tsx
+++ b/src/components/Dashboard/KanbanBoard.tsx
@@ -169,12 +169,20 @@ export default function KanbanBoard({
 
       <DragOverlay dropAnimation={null}>
         {activeTask && (
-          <div className="w-[200px]">
+          <div className="w-[260px]">
             <TaskCard
               task={activeTask}
               linkedSession={sessionMap.get(activeTask.id) ?? null}
               onClick={() => {}}
               isDragOverlay
+              variant={activeTask.status === "done" ? "compact" : activeTask.status === "in-progress" ? "detailed" : activeTask.status === "backlog" ? "tree-node" : "default"}
+              taskMap={taskMap}
+              allTasks={tasks}
+              dependents={dependentsMap[activeTask.id] ?? []}
+              isBlocked={activeTask.depends_on.some((depId) => {
+                const dep = taskMap.get(depId);
+                return dep != null && dep.status !== "done" && dep.status !== "archived";
+              })}
             />
           </div>
         )}
diff --git a/src/components/Dashboard/KanbanColumn.tsx b/src/components/Dashboard/KanbanColumn.tsx
index 21b3a6f..4094dcb 100644
--- a/src/components/Dashboard/KanbanColumn.tsx
+++ b/src/components/Dashboard/KanbanColumn.tsx
@@ -1,6 +1,6 @@
 import { memo, useMemo, useState, useCallback, useRef, useEffect } from "react";
-import { useDroppable } from "@dnd-kit/core";
-import { ArrowUpDown, PanelLeftClose, PanelLeftOpen, Check } from "lucide-react";
+import { useDroppable, useDndContext } from "@dnd-kit/core";
+import { ArrowUpDown, PanelLeftClose, PanelLeftOpen, Check, ChevronDown } from "lucide-react";
 
 import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
 import TaskCard from "./TaskCard";
@@ -14,6 +14,16 @@ import type { Session, Task, TaskStatus } from "../../types";
 import { useAppStore } from "../../store/appStore";
 import { DEFAULT_PRIORITIES } from "../../lib/priorities";
 
+/** Small vertical connector arrow shown between epic children that depend on each other */
+function EpicDepConnector() {
+  return (
+    <div className="flex items-center justify-center h-2.5 -my-px relative">
+      <div className="w-px h-full bg-primary/25" />
+      <ChevronDown className="size-2 text-primary/40 absolute -bottom-0.5" />
+    </div>
+  );
+}
+
 const COLUMN_LABELS: Record<TaskStatus, string> = {
   backlog: "Backlog",
   ready: "Ready",
@@ -83,6 +93,8 @@ const KanbanColumn = memo(function KanbanColumn({
     activeProjectId ? (s.projectPriorities[activeProjectId] ?? DEFAULT_PRIORITIES) : DEFAULT_PRIORITIES
   );
   const { isOver, setNodeRef } = useDroppable({ id: status });
+  const { active } = useDndContext();
+  const activeDragId = active?.id as string | undefined;
   const [showSortMenu, setShowSortMenu] = useState(false);
   const sortMenuRef = useRef<HTMLDivElement>(null);
 
@@ -160,14 +172,14 @@ const KanbanColumn = memo(function KanbanColumn({
         <div className="py-2">
           <PanelLeftOpen className="size-3.5 text-muted-foreground" />
         </div>
-        <span className={`text-[11px] tabular-nums rounded-full px-1 ${
+        <span className={`text-xs tabular-nums rounded-full px-1 ${
           tasks.length > 0 ? "text-dim-foreground bg-accent" : "text-muted-foreground"
         }`}>
           {tasks.length}
         </span>
         <div className="flex-1 flex items-center justify-center">
           <span
-            className="text-[11px] font-semibold text-dim-foreground uppercase tracking-[0.5px]"
+            className="text-xs font-semibold text-dim-foreground uppercase tracking-[0.5px]"
             style={{ writingMode: "vertical-lr", textOrientation: "mixed" }}
           >
             {COLUMN_LABELS[status]}
@@ -189,11 +201,11 @@ const KanbanColumn = memo(function KanbanColumn({
       {/* Column header */}
       <div className="px-2.5 py-2 flex items-center justify-between border-b border-border/60">
         <div className="flex items-center gap-1.5">
-          <span className="text-[11px] font-semibold text-dim-foreground uppercase tracking-[0.5px]">
+          <span className="text-xs font-semibold text-dim-foreground uppercase tracking-[0.5px]">
             {COLUMN_LABELS[status]}
           </span>
           {blockedCount > 0 && (
-            <span className="text-[9px] text-warning bg-warning/10 px-1 rounded">
+            <span className="text-2xs text-warning bg-warning/10 px-1 rounded">
               {blockedCount} blocked
             </span>
           )}
@@ -216,7 +228,7 @@ const KanbanColumn = memo(function KanbanColumn({
                   <button
                     key={mode}
                     onClick={() => handleSortSelect(mode)}
-                    className="flex items-center gap-2 w-full px-2 py-1 text-[11px] text-left rounded hover:bg-accent/60 transition-colors"
+                    className="flex items-center gap-2 w-full px-2 py-1 text-xs text-left rounded hover:bg-accent/60 transition-colors"
                   >
                     <Check className={`size-3 ${sortMode === mode ? "opacity-100" : "opacity-0"}`} />
                     <span className={sortMode === mode ? "text-foreground font-medium" : "text-muted-foreground"}>
@@ -236,7 +248,7 @@ const KanbanColumn = memo(function KanbanColumn({
             <PanelLeftClose className="size-3" />
           </button>
           {/* Task count */}
-          <span className={`text-[11px] tabular-nums min-w-[1.25rem] text-center rounded-full px-1 ${
+          <span className={`text-xs tabular-nums min-w-[1.25rem] text-center rounded-full px-1 ${
             tasks.length > 0 ? "text-dim-foreground bg-accent" : "text-muted-foreground"
           }`}>
             {tasks.length}
@@ -246,7 +258,7 @@ const KanbanColumn = memo(function KanbanColumn({
 
       {/* Card list */}
       <div className="flex-1 min-h-0 overflow-y-auto p-1.5 flex flex-col gap-1.5">
-        {columnItems.map((item) => {
+        {columnItems.map((item, idx) => {
           if (item.type === "ghost") {
             return (
               <GhostParentCard
@@ -260,40 +272,58 @@ const KanbanColumn = memo(function KanbanColumn({
           const session = sessionMap.get(task.id) ?? null;
           const blocked = isTaskBlocked(task, taskMap);
           const deps = dependentsMap[task.id] ?? [];
+
+          // Check if we should render a dependency connector before this card
+          // (epic children that depend on the previous epic sibling)
+          const prevItem = idx > 0 ? columnItems[idx - 1] : null;
+          const showConnector =
+            depth > 0 &&
+            prevItem?.type === "task" &&
+            prevItem.depth > 0 &&
+            task.depends_on.includes(prevItem.task.id);
+
+          const isBeingDragged = activeDragId === task.id;
+
           return (
-            <TaskCardContextMenu
-              key={task.id}
-              task={task}
-              allLabels={allLabels}
-              onTaskClick={onTaskClick}
-              onStartSession={onStartSession}
-              onResearchSession={onResearchSession}
-              onBreakdownEpic={onBreakdownEpic}
-              onViewSession={onViewSession}
-            >
-              {(menuProps) => (
-                <TaskCard
-                  task={task}
-                  linkedSession={session}
-                  onClick={onTaskClick}
-                  onStartSession={onStartSession}
-                  onResearchSession={onResearchSession}
-                  onBreakdownEpic={onBreakdownEpic}
-                  onViewSession={onViewSession}
-                  onEpicClick={onEpicClick}
-                  variant={variant}
-                  taskMap={taskMap}
-                  allTasks={tasks}
-                  dependents={deps}
-                  isBlocked={blocked}
-                  treeDepth={depth}
-                  onContextMenu={menuProps.onContextMenu}
-                  isEditingTitle={menuProps.isEditingTitle}
-                  onTitleSave={menuProps.onTitleSave}
-                  onTitleEditCancel={menuProps.onTitleEditCancel}
-                />
+            <div key={task.id} className={isBeingDragged ? "opacity-0 pointer-events-none" : ""}>
+              {showConnector && (
+                <div style={{ marginLeft: `${depth * 12}px` }}>
+                  <EpicDepConnector />
+                </div>
               )}
-            </TaskCardContextMenu>
+              <TaskCardContextMenu
+                task={task}
+                allLabels={allLabels}
+                onTaskClick={onTaskClick}
+                onStartSession={onStartSession}
+                onResearchSession={onResearchSession}
+                onBreakdownEpic={onBreakdownEpic}
+                onViewSession={onViewSession}
+              >
+                {(menuProps) => (
+                  <TaskCard
+                    task={task}
+                    linkedSession={session}
+                    onClick={onTaskClick}
+                    onStartSession={onStartSession}
+                    onResearchSession={onResearchSession}
+                    onBreakdownEpic={onBreakdownEpic}
+                    onViewSession={onViewSession}
+                    onEpicClick={onEpicClick}
+                    variant={variant}
+                    taskMap={taskMap}
+                    allTasks={tasks}
+                    dependents={deps}
+                    isBlocked={blocked}
+                    treeDepth={depth}
+                    onContextMenu={menuProps.onContextMenu}
+                    isEditingTitle={menuProps.isEditingTitle}
+                    onTitleSave={menuProps.onTitleSave}
+                    onTitleEditCancel={menuProps.onTitleEditCancel}
+                  />
+                )}
+              </TaskCardContextMenu>
+            </div>
           );
         })}
       </div>
diff --git a/src/components/Dashboard/PriorityBadge.tsx b/src/components/Dashboard/PriorityBadge.tsx
index f670ae9..7d5be22 100644
--- a/src/components/Dashboard/PriorityBadge.tsx
+++ b/src/components/Dashboard/PriorityBadge.tsx
@@ -14,7 +14,7 @@ export default function PriorityBadge({ priority }: { priority: Priority }) {
     <Badge
       variant="secondary"
       title={getPriorityLabel(priority, priorities)}
-      className={`h-auto py-px px-1.5 text-[10px] font-bold tracking-wide rounded-[var(--radius-element)] bg-accent ${getPriorityTextClass(priority, priorities)}`}
+      className={`h-auto py-px px-1.5 text-2xs font-bold tracking-wide rounded-[var(--radius-element)] bg-accent ${getPriorityTextClass(priority, priorities)}`}
     >
       {priority}
     </Badge>
diff --git a/src/components/Dashboard/SummaryHeader.tsx b/src/components/Dashboard/SummaryHeader.tsx
index 4489021..aaaa43f 100644
--- a/src/components/Dashboard/SummaryHeader.tsx
+++ b/src/components/Dashboard/SummaryHeader.tsx
@@ -81,7 +81,7 @@ const SummaryHeader = memo(function SummaryHeader({
   return (
     <>
       {/* Stats */}
-      <span className="text-[13px] font-medium mr-1 text-foreground">
+      <span className="text-sm font-medium mr-1 text-foreground">
         Dashboard
       </span>
 
@@ -126,7 +126,7 @@ const SummaryHeader = memo(function SummaryHeader({
       {archivedCount > 0 && onToggleArchived && (
         <button
           onClick={onToggleArchived}
-          className={`flex items-center gap-1 px-2.5 py-1 text-[11px] font-medium rounded-[var(--radius-element)] border transition-colors cursor-pointer ${
+          className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-[var(--radius-element)] border transition-colors cursor-pointer ${
             showArchived
               ? "bg-accent text-foreground border-border"
               : "text-muted-foreground border-transparent hover:text-foreground hover:bg-accent/50"
@@ -135,7 +135,7 @@ const SummaryHeader = memo(function SummaryHeader({
         >
           <Archive className="size-3" />
           Archive
-          <span className="text-[10px] tabular-nums opacity-70">{archivedCount}</span>
+          <span className="text-2xs tabular-nums opacity-70">{archivedCount}</span>
         </button>
       )}
 
@@ -144,7 +144,7 @@ const SummaryHeader = memo(function SummaryHeader({
         <div className="flex items-center rounded-[var(--radius-element)] border border-border overflow-hidden">
           <button
             onClick={() => onDashboardModeChange("board")}
-            className={`flex items-center gap-1 px-2.5 py-1 text-[11px] font-medium transition-colors cursor-pointer ${
+            className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium transition-colors cursor-pointer ${
               dashboardMode === "board"
                 ? "bg-accent text-foreground"
                 : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
@@ -157,7 +157,7 @@ const SummaryHeader = memo(function SummaryHeader({
           <div className="w-px h-4 bg-border" />
           <button
             onClick={() => onDashboardModeChange("graph")}
-            className={`flex items-center gap-1 px-2.5 py-1 text-[11px] font-medium transition-colors cursor-pointer ${
+            className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium transition-colors cursor-pointer ${
               dashboardMode === "graph"
                 ? "bg-accent text-foreground"
                 : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
@@ -181,7 +181,7 @@ const SummaryHeader = memo(function SummaryHeader({
         >
           <Button
             variant="outline"
-            size="sm"
+            size="xs"
             disabled={!continuousModeEnabled}
             onClick={onContinuousMode}
             leftIcon={<ListChecks className="size-3" />}
@@ -196,7 +196,7 @@ const SummaryHeader = memo(function SummaryHeader({
         <Button
           variant="color"
           color={accentColor}
-          size="sm"
+          size="xs"
           onClick={onNewTask}
           leftIcon={<Plus className="size-3" />}
           hoverEffect="scale-glow"
diff --git a/src/components/Dashboard/TaskCard.tsx b/src/components/Dashboard/TaskCard.tsx
index f720f3a..290cb40 100644
--- a/src/components/Dashboard/TaskCard.tsx
+++ b/src/components/Dashboard/TaskCard.tsx
@@ -1,15 +1,13 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { useDraggable } from "@dnd-kit/core";
-import { Play, Search, CirclePause, CheckCircle2, Loader2, Github, AlertTriangle, Lightbulb, FlaskConical, Bug, Code, ClipboardList, Eye, MoreVertical, Layers, Ungroup } from "lucide-react";
+import { Lock, Github, Layers, ArrowUpRight, MoreVertical } from "lucide-react";
 import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
 import { useAppStore } from "../../store/appStore";
 import type { Task, Session } from "../../types";
-import { DEFAULT_PRIORITIES, getPriorityBgClass } from "../../lib/priorities";
+import { DEFAULT_PRIORITIES, getPriorityBadgeClass } from "../../lib/priorities";
+import { TASK_STATUS_DOT_COLORS, TASK_STATUS_LABELS } from "../../lib/taskStatusColors";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
-import { Separator } from "../ui/separator";
-import { borderAccentColors, ringColors } from "../ui/orecus.io/lib/color-utils";
-import PriorityBadge from "./PriorityBadge";
-import DependencyBadge from "./DependencyBadge";
+import { borderAccentColors } from "../ui/orecus.io/lib/color-utils";
 
 export type TaskCardVariant = "default" | "compact" | "detailed" | "tree-node";
 
@@ -35,7 +33,49 @@ interface TaskCardProps {
   onTitleEditCancel?: () => void;
 }
 
-export default React.memo(function TaskCard({ task, linkedSession, onClick, onStartSession, onResearchSession, onViewSession, onEpicClick, onBreakdownEpic, isDragOverlay, variant = "default", taskMap, allTasks, dependents = [], isBlocked = false, treeDepth = 0, onContextMenu, isEditingTitle = false, onTitleSave, onTitleEditCancel }: TaskCardProps) {
+// ── Progress Ring SVG ──
+function ProgressRing({ percent, isResearch }: { percent: number; isResearch: boolean }) {
+  const r = 18;
+  const stroke = 3;
+  const size = 42;
+  const circumference = 2 * Math.PI * r;
+  const offset = circumference - (Math.min(100, percent) / 100) * circumference;
+  const fillColor = isResearch ? "var(--warning)" : "var(--primary)";
+
+  return (
+    <div className="relative shrink-0 size-[42px]">
+      <svg width={size} height={size} className="-rotate-90">
+        <circle cx={size / 2} cy={size / 2} r={r} fill="none" strokeWidth={stroke} className="stroke-accent" />
+        <circle
+          cx={size / 2} cy={size / 2} r={r}
+          fill="none" strokeWidth={stroke} strokeLinecap="round"
+          style={{ stroke: fillColor, strokeDasharray: circumference, strokeDashoffset: offset, transition: "stroke-dashoffset 0.5s" }}
+        />
+      </svg>
+      <span className="absolute inset-0 flex items-center justify-center text-[9px] font-bold text-dim-foreground">
+        {Math.round(percent)}%
+      </span>
+    </div>
+  );
+}
+
+// ── Activity color helper ──
+function getActivityColor(activity: string | undefined, isResearch: boolean): "primary" | "warning" {
+  if (activity === "researching" || activity === "exploring" || (!activity && isResearch)) return "warning";
+  return "primary";
+}
+
+function getActivityLabel(activity: string | undefined, isResearch: boolean): string {
+  if (activity) return activity.charAt(0).toUpperCase() + activity.slice(1);
+  return isResearch ? "Researching" : "Working";
+}
+
+export default React.memo(function TaskCard({
+  task, linkedSession, onClick,
+  onEpicClick, isDragOverlay, variant = "default", taskMap,
+  allTasks, dependents = [], isBlocked = false, treeDepth = 0, onContextMenu,
+  isEditingTitle = false, onTitleSave, onTitleEditCancel,
+}: TaskCardProps) {
   const accentColor = useProjectAccentColor();
   const activeProjectId = useAppStore((s) => s.activeProjectId);
   const priorities = useAppStore((s) =>
@@ -49,9 +89,22 @@ export default React.memo(function TaskCard({ task, linkedSession, onClick, onSt
     !mcpData?.completed;
 
   const isEpic = task.task_type === "epic";
+  const isCompact = variant === "compact";
+  const isDetailed = variant === "detailed";
+
+  const isResearch = linkedSession?.mode === "research";
+  const activity = mcpData?.activity;
+  const isResearchActivity = activity === "researching" || activity === "exploring" || (!activity && isResearch);
+  const activityColor = getActivityColor(activity, !!isResearch);
 
-  // Compute epic child progress
-  const epicProgress = React.useMemo(() => {
+  // Compute progress percent
+  const progressPercent = useMemo(() => {
+    if (!mcpData?.current_step || !mcpData?.total_steps || mcpData.total_steps === 0) return 0;
+    return Math.min(100, (mcpData.current_step / mcpData.total_steps) * 100);
+  }, [mcpData?.current_step, mcpData?.total_steps]);
+
+  // Epic child progress
+  const epicProgress = useMemo(() => {
     if (!isEpic || !allTasks) return null;
     const children = allTasks.filter((t) => t.epic_id === task.id);
     if (children.length === 0) return null;
@@ -60,28 +113,29 @@ export default React.memo(function TaskCard({ task, linkedSession, onClick, onSt
     return { total: children.length, done, inProgress };
   }, [isEpic, allTasks, task.id]);
 
+  // Dependency analysis
+  const depAnalysis = useMemo(() => {
+    if (!taskMap) return { deps: [], metCount: 0, unmetCount: 0 };
+    const deps = task.depends_on.map((depId) => {
+      const dep = taskMap.get(depId);
+      const isMet = dep?.status === "done" || dep?.status === "archived";
+      return { id: depId, task: dep, isMet };
+    });
+    return {
+      deps,
+      metCount: deps.filter((d) => d.isMet).length,
+      unmetCount: deps.filter((d) => !d.isMet).length,
+    };
+  }, [task.depends_on, taskMap]);
+
   const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
     id: task.id,
     data: { task },
     disabled: isDragOverlay || isSessionActive || isEpic,
   });
 
-  const isCompact = variant === "compact";
-
-  const isResearch = linkedSession?.mode === "research";
-  const activity = mcpData?.activity;
-  // Activity-aware: treat mcpData.activity as primary, fall back to session.mode
-  const isResearchActivity = activity === "researching" || activity === "exploring" || (!activity && isResearch);
-
-  // Ring style: research/explore activity gets amber, regular tasks get accent color
-  const activeRingClass = isSessionActive && !isDragOverlay
-    ? `ring-1 animate-pulse ${isResearchActivity ? "ring-amber-500/70" : ringColors[accentColor]}`
-    : "";
-
-  // Compute indentation style for nested/dependent tasks (all variants)
-  const treeIndentStyle = treeDepth > 0
-    ? { marginLeft: `${treeDepth * 12}px` }
-    : undefined;
+  // Tree indent
+  const treeIndentStyle = treeDepth > 0 ? { marginLeft: `${treeDepth * 12}px` } : undefined;
 
   // ── Inline title editing ──
   const titleInputRef = useRef<HTMLInputElement>(null);
@@ -90,78 +144,92 @@ export default React.memo(function TaskCard({ task, linkedSession, onClick, onSt
   useEffect(() => {
     if (isEditingTitle) {
       setEditValue(task.title);
-      // Focus after render
       requestAnimationFrame(() => titleInputRef.current?.focus());
     }
   }, [isEditingTitle, task.title]);
 
   const handleTitleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      onTitleSave?.(editValue);
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      onTitleEditCancel?.();
-    }
+    if (e.key === "Enter") { e.preventDefault(); onTitleSave?.(editValue); }
+    else if (e.key === "Escape") { e.preventDefault(); onTitleEditCancel?.(); }
   }, [editValue, onTitleSave, onTitleEditCancel]);
 
-  // ── Compact variant (for Done column) ──
+  // ── Active card border class (static glow, no animate-pulse) ──
+  const activeBorderClass = isSessionActive && !isDragOverlay
+    ? isResearchActivity
+      ? "border-warning/35 shadow-[0_0_0_1px_var(--warning)/10,0_4px_16px_rgba(0,0,0,0.2)]"
+      : "border-primary/35 shadow-[0_0_0_1px_var(--primary)/10,0_4px_16px_rgba(0,0,0,0.2)]"
+    : "";
+
+  // ═══════════════════════════════════════════
+  //  COMPACT variant (Done column)
+  // ═══════════════════════════════════════════
   if (isCompact) {
     return (
       <div
         ref={setNodeRef}
-        className={`relative group px-2 py-1.5 shrink-0 bg-card border rounded-[var(--radius-element)] select-none overflow-hidden transition-shadow duration-150 ${
+        className={`relative group py-2 px-2.5 shrink-0 bg-card border rounded-[10px] select-none overflow-hidden transition-all duration-150 opacity-50 ${
           isDragOverlay
-            ? `${borderAccentColors[accentColor]} shadow-[0_8px_24px_rgba(0,0,0,0.3)] cursor-grabbing`
-            : "border-border cursor-grab"
-        } ${isDragging ? "opacity-30" : ""}`}
+            ? `${borderAccentColors[accentColor]} shadow-[0_8px_24px_rgba(0,0,0,0.3)] cursor-grabbing opacity-100`
+            : "border-border cursor-grab hover:opacity-70"
+        } ${isDragging ? "opacity-20" : ""}`}
         style={{
           ...(transform ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)` } : undefined),
           ...treeIndentStyle,
         }}
         {...listeners}
         {...attributes}
-        onClick={(e) => {
-          e.stopPropagation();
-          onClick(task.id);
-        }}
+        onClick={(e) => { e.stopPropagation(); onClick(task.id); }}
         onContextMenu={onContextMenu}
       >
         <div className="flex items-center gap-1.5">
-          <div className={`size-1.5 shrink-0 rounded-full ${getPriorityBgClass(task.priority, priorities)}`} />
-          <span className="text-[11px] text-muted-foreground truncate flex-1">
+          {/* Priority badge + ID */}
+          <span className={`inline-flex items-center px-1 py-px text-[8px] font-bold tracking-wide rounded-[3px] ${getPriorityBadgeClass(task.priority, priorities)}`}>
+            {task.priority}
+          </span>
+          <span className="text-[11px] text-muted-foreground truncate flex-1 line-clamp-1">
             {task.title}
           </span>
-          {taskMap && (task.depends_on.length > 0 || dependents.length > 0) && (
-            <DependencyBadge
-              task={task}
-              taskMap={taskMap}
-              dependents={dependents}
-              isBlocked={false}
-              onTaskNavigate={onClick}
-            />
+          {/* Dep dots (compact) */}
+          {taskMap && task.depends_on.length > 0 && (
+            <div className="flex items-center gap-[3px]" title={`${depAnalysis.metCount} met, ${depAnalysis.unmetCount} unmet`}>
+              {depAnalysis.deps.map((d) => (
+                <span
+                  key={d.id}
+                  className={`size-[5px] rounded-full shrink-0 ${d.isMet ? "bg-success" : "ring-[1.5px] ring-warning bg-transparent"}`}
+                />
+              ))}
+            </div>
+          )}
+          {dependents.length > 0 && (
+            <span className="inline-flex items-center gap-0.5 text-[8px] font-semibold text-muted-foreground bg-accent px-1 py-px rounded-[3px]">
+              <ArrowUpRight className="size-2" />
+              {dependents.length}
+            </span>
           )}
         </div>
       </div>
     );
   }
 
-  // ── Default / Detailed / Tree-node variant ──
-  const isDetailed = variant === "detailed";
-
-  // Show MCP footer only when there's an active session (in-progress work)
-  const showMcpFooter = isSessionActive;
+  // ═══════════════════════════════════════════
+  //  DEFAULT / DETAILED / TREE-NODE variant
+  // ═══════════════════════════════════════════
+  const showActivityStrip = isSessionActive;
 
   return (
     <div
       ref={setNodeRef}
-      className={`relative group px-2.5 py-2 shrink-0 bg-card border rounded-[var(--radius-element)] select-none overflow-hidden transition-shadow duration-150 ${
+      className={`relative group p-3 shrink-0 bg-card border rounded-[10px] select-none overflow-hidden transition-all duration-150 ${
         isEpic ? "border-l-[3px] border-l-primary" : ""
       } ${
         isDragOverlay
           ? `${borderAccentColors[accentColor]} shadow-[0_8px_24px_rgba(0,0,0,0.3)] cursor-grabbing`
-          : isSessionActive ? "border-border cursor-default" : isEpic ? "border-border cursor-pointer" : "border-border cursor-grab"
-      } ${isDragging ? "opacity-30" : ""} ${activeRingClass} ${isBlocked && !isDragOverlay ? "opacity-75" : ""}`}
+          : isSessionActive
+            ? `cursor-default ${activeBorderClass}`
+            : isEpic
+              ? "border-border cursor-pointer hover:-translate-y-px hover:shadow-[0_4px_16px_rgba(0,0,0,0.25)] hover:border-border/80"
+              : "border-border cursor-grab hover:-translate-y-px hover:shadow-[0_4px_16px_rgba(0,0,0,0.25)] hover:border-border/80"
+      } ${isDragging ? "opacity-0" : ""} ${isBlocked && !isDragOverlay ? "opacity-70" : ""}`}
       style={{
         ...(transform ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)` } : undefined),
         ...treeIndentStyle,
@@ -171,251 +239,193 @@ export default React.memo(function TaskCard({ task, linkedSession, onClick, onSt
       onClick={(e) => {
         if (isEditingTitle) return;
         e.stopPropagation();
-        if (isEpic && onEpicClick) {
-          onEpicClick(task.id);
-        } else {
-          onClick(task.id);
-        }
+        if (isEpic && onEpicClick) onEpicClick(task.id);
+        else onClick(task.id);
       }}
       onContextMenu={onContextMenu}
     >
-      {/* Top row: id + priority + deps + actions */}
-      <div className="flex items-center gap-1.5 mb-1">
-        {isEpic && <Layers className="size-3 shrink-0 text-primary" />}
-        <span className="text-[10px] font-mono text-muted-foreground shrink-0">{task.id}</span>
-        <PriorityBadge priority={task.priority} />
-        {task.github_issue && (
-          <Github className="size-3 shrink-0 text-muted-foreground" />
-        )}
-        {taskMap && (task.depends_on.length > 0 || dependents.length > 0) && (
-          <DependencyBadge
-            task={task}
-            taskMap={taskMap}
-            dependents={dependents}
-            isBlocked={isBlocked}
-            onTaskNavigate={onClick}
-          />
-        )}
-        {/* Spacer */}
-        <div className="flex-1" />
-        {/* Action buttons — inline, visible on hover */}
-        {!isDragOverlay && !isSessionActive && (
-          <div className="flex items-center gap-0.5 opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity">
-            {task.status === "in-review" && linkedSession && onViewSession && (
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                hoverEffect="scale"
-                clickEffect="scale"
-                title="View session"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onViewSession(linkedSession.id);
-                }}
-                onPointerDown={(e) => e.stopPropagation()}
-              >
-                <Search className="size-3" />
-              </Button>
-            )}
-            {!isEpic && (task.status === "backlog" || task.status === "ready") && onResearchSession && (
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                hoverEffect="scale"
-                clickEffect="scale"
-                title="Research task"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onResearchSession(task.id);
-                }}
-                onPointerDown={(e) => e.stopPropagation()}
-              >
-                <Lightbulb className="size-3 text-warning" />
-              </Button>
+      {/* Card layout: content left, optional ring right */}
+      <div className={`flex gap-3 ${isSessionActive && progressPercent > 0 ? "items-start" : ""}`}>
+        {/* Left content */}
+        <div className="flex-1 min-w-0">
+          {/* ── Top row: priority + ID + deps + badges ── */}
+          <div className="flex items-center gap-[5px] mb-1">
+            {isEpic && <Layers className="size-3 shrink-0 text-primary" />}
+            <span className={`inline-flex items-center px-[5px] py-px text-[9px] font-bold tracking-[0.3px] rounded-[3px] ${getPriorityBadgeClass(task.priority, priorities)}`}>
+              {task.priority}
+            </span>
+            <span className="text-[9px] font-mono text-muted-foreground shrink-0">{task.id}</span>
+            {task.github_issue && <Github className="size-3 shrink-0 text-muted-foreground" />}
+
+            {/* Spacer */}
+            <div className="flex-1" />
+
+            {/* Dependency dots */}
+            {taskMap && task.depends_on.length > 0 && (
+              <div className="flex items-center gap-[3px]" title={`${depAnalysis.metCount} met, ${depAnalysis.unmetCount} unmet`}>
+                {depAnalysis.deps.map((d) => (
+                  <span
+                    key={d.id}
+                    className={`size-[5px] rounded-full shrink-0 ${d.isMet ? "bg-success" : "ring-[1.5px] ring-warning bg-transparent"}`}
+                  />
+                ))}
+              </div>
             )}
-            {!isEpic && task.status !== "in-review" && task.status !== "done" && onStartSession && (
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                hoverEffect="scale"
-                clickEffect="scale"
-                title="Start task"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onStartSession(task.id);
-                }}
-                onPointerDown={(e) => e.stopPropagation()}
-              >
-                <Play className="size-3" />
-              </Button>
+
+            {/* Blocked badge */}
+            {isBlocked && !isDragOverlay && (
+              <span className="inline-flex items-center gap-[3px] px-1.5 py-px text-[8px] font-semibold text-warning bg-warning/12 rounded-[3px]">
+                <Lock className="size-2" />
+                blocked
+              </span>
             )}
-            {isEpic && (task.status === "backlog" || task.status === "ready") && onBreakdownEpic && (
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                hoverEffect="scale"
-                clickEffect="scale"
-                title="Breakdown epic"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onBreakdownEpic(task.id);
-                }}
-                onPointerDown={(e) => e.stopPropagation()}
-              >
-                <Ungroup className="size-3 text-primary" />
-              </Button>
+
+            {/* Dependents badge */}
+            {dependents.length > 0 && (
+              <span className="inline-flex items-center gap-0.5 text-[8px] font-semibold text-muted-foreground bg-accent px-1 py-px rounded-[3px]">
+                <ArrowUpRight className="size-2" />
+                {dependents.length}
+              </span>
             )}
-            {onContextMenu && (
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                hoverEffect="scale"
-                clickEffect="scale"
-                title="More actions"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onContextMenu(e);
-                }}
-                onPointerDown={(e) => e.stopPropagation()}
-              >
-                <MoreVertical className="size-3" />
-              </Button>
+
+            {/* Context menu button (hover only, replaces old inline action buttons) */}
+            {!isDragOverlay && !isSessionActive && onContextMenu && (
+              <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  hoverEffect="scale"
+                  clickEffect="scale"
+                  title="More actions"
+                  onClick={(e) => { e.stopPropagation(); onContextMenu(e); }}
+                  onPointerDown={(e) => e.stopPropagation()}
+                >
+                  <MoreVertical className="size-3" />
+                </Button>
+              </div>
             )}
           </div>
-        )}
-      </div>
 
-      {/* Title — inline editable */}
-      {isEditingTitle ? (
-        <input
-          ref={titleInputRef}
-          className="w-full text-xs font-medium text-foreground leading-snug bg-accent/60 border border-border rounded px-1 py-0.5 outline-none focus:ring-1 focus:ring-primary/50"
-          value={editValue}
-          onChange={(e) => setEditValue(e.target.value)}
-          onKeyDown={handleTitleKeyDown}
-          onBlur={() => onTitleSave?.(editValue)}
-          onClick={(e) => e.stopPropagation()}
-          onPointerDown={(e) => e.stopPropagation()}
-        />
-      ) : (
-        <div className={`text-xs font-medium text-foreground leading-snug overflow-hidden text-ellipsis ${isDetailed ? "line-clamp-3" : "line-clamp-2"}`}>
-          {task.title}
-        </div>
-      )}
+          {/* ── Title ── */}
+          {isEditingTitle ? (
+            <input
+              ref={titleInputRef}
+              className="w-full text-[13px] font-medium text-foreground leading-[1.4] bg-accent/60 border border-border rounded px-1 py-0.5 outline-none focus:ring-1 focus:ring-primary/50"
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onKeyDown={handleTitleKeyDown}
+              onBlur={() => onTitleSave?.(editValue)}
+              onClick={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+            />
+          ) : (
+            <div className={`text-[13px] font-medium text-foreground leading-[1.4] overflow-hidden text-ellipsis ${isDetailed ? "line-clamp-3" : "line-clamp-2"}`}>
+              {task.title}
+            </div>
+          )}
 
-      {/* Labels */}
-      {task.labels.length > 0 && (
-        <div className="flex items-center gap-1 mt-1 overflow-hidden">
-          {task.labels.slice(0, 3).map((label) => (
-            <span
-              key={label}
-              className="inline-block px-1.5 py-px text-[9px] font-medium rounded-full bg-accent text-muted-foreground truncate max-w-[80px]"
-            >
-              {label}
-            </span>
-          ))}
-          {task.labels.length > 3 && (
-            <span className="text-[9px] text-muted-foreground shrink-0">
-              +{task.labels.length - 3}
-            </span>
+          {/* ── Labels ── */}
+          {task.labels.length > 0 && (
+            <div className="flex items-center gap-1 mt-1.5 overflow-hidden">
+              {task.labels.slice(0, 3).map((label) => (
+                <span
+                  key={label}
+                  className="inline-block px-1.5 py-px text-[9px] font-medium rounded-full bg-accent text-muted-foreground truncate max-w-[80px]"
+                >
+                  {label}
+                </span>
+              ))}
+              {task.labels.length > 3 && (
+                <span className="text-2xs text-muted-foreground shrink-0">+{task.labels.length - 3}</span>
+              )}
+            </div>
+          )}
+
+          {/* ── Epic progress ── */}
+          {isEpic && epicProgress && (
+            <div className="mt-2">
+              <div className="flex items-center justify-between mb-0.5">
+                <span className="text-2xs text-muted-foreground">
+                  {epicProgress.done}/{epicProgress.total} subtasks done
+                </span>
+                <span className="text-2xs font-medium text-dim-foreground">
+                  {Math.round((epicProgress.done / epicProgress.total) * 100)}%
+                </span>
+              </div>
+              <div className="h-1 w-full rounded-full bg-accent overflow-hidden">
+                <div
+                  className="h-full rounded-full bg-primary transition-all duration-300"
+                  style={{ width: `${(epicProgress.done / epicProgress.total) * 100}%` }}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* ── Agent row (only when no active session) ── */}
+          {task.agent && !showActivityStrip && !isEpic && (
+            <div className="mt-1 text-[9px] text-muted-foreground truncate flex items-center gap-1">
+              <span className="size-1 rounded-full bg-muted-foreground shrink-0" />
+              {task.agent}
+            </div>
+          )}
+
+          {/* ── Dependency detail row (for blocked cards) ── */}
+          {isBlocked && !isDragOverlay && depAnalysis.unmetCount > 0 && (
+            <div className="flex flex-col gap-[3px] mt-1.5 pt-1.5 border-t border-dashed border-border/60">
+              {depAnalysis.deps.filter((d) => !d.isMet).map((d) => (
+                <div key={d.id} className="flex items-center gap-[5px] text-[9px] py-px">
+                  <span className="text-[8px] font-semibold uppercase tracking-[0.3px] text-warning shrink-0 w-12">waits on</span>
+                  <span className={`size-[5px] rounded-full shrink-0 ${d.task ? TASK_STATUS_DOT_COLORS[d.task.status] : "bg-muted-foreground/30"}`} />
+                  <span className="text-dim-foreground truncate flex-1 min-w-0">{d.task?.title ?? d.id}</span>
+                  {d.task && (
+                    <span className={`text-[8px] px-1 py-px rounded-[2px] shrink-0 ${TASK_STATUS_DOT_COLORS[d.task.status]}/15 text-muted-foreground`}>
+                      {TASK_STATUS_LABELS[d.task.status]}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
           )}
         </div>
-      )}
 
-      {/* Epic progress */}
-      {isEpic && epicProgress && (
-        <div className="mt-1.5">
-          <div className="flex items-center justify-between mb-0.5">
-            <span className="text-[10px] text-muted-foreground">
-              {epicProgress.done}/{epicProgress.total} subtasks done
-            </span>
-            <span className="text-[10px] font-medium text-dim-foreground">
-              {Math.round((epicProgress.done / epicProgress.total) * 100)}%
+        {/* ── Progress ring (active cards only) ── */}
+        {isSessionActive && progressPercent > 0 && (
+          <ProgressRing percent={progressPercent} isResearch={isResearchActivity} />
+        )}
+      </div>
+
+      {/* ── Activity strip (replaces old MCP footer) ── */}
+      {showActivityStrip && (
+        <div className="flex items-center gap-2 mt-2.5 pt-2 border-t border-border">
+          {/* Pulse dot + activity label */}
+          <div className="flex items-center gap-1 shrink-0">
+            <span className={`size-[5px] rounded-full animate-pulse ${activityColor === "warning" ? "bg-warning" : "bg-primary"}`} />
+            <span className={`text-2xs font-medium whitespace-nowrap ${activityColor === "warning" ? "text-warning" : "text-primary"}`}>
+              {mcpData?.completed
+                ? "Done"
+                : (mcpData?.error || mcpData?.status === "error")
+                  ? "Error"
+                  : (mcpData?.waiting || mcpData?.status === "waiting")
+                    ? "Waiting"
+                    : getActivityLabel(activity, !!isResearch)}
             </span>
           </div>
-          <div className="h-1 w-full rounded-full bg-accent overflow-hidden">
-            <div
-              className="h-full rounded-full bg-primary transition-all duration-300"
-              style={{ width: `${(epicProgress.done / epicProgress.total) * 100}%` }}
-            />
-          </div>
-        </div>
-      )}
 
-      {/* Agent row */}
-      {task.agent && !showMcpFooter && !isEpic && (
-        <div className="mt-1 text-[10px] text-muted-foreground truncate">
-          {task.agent}
-        </div>
-      )}
-
-      {/* Detailed variant: progress bar */}
-      {isDetailed && isSessionActive && mcpData?.current_step != null && mcpData?.total_steps != null && mcpData.total_steps > 0 && (
-        <div className="mt-1.5">
-          <div className="h-1 w-full rounded-full bg-accent overflow-hidden">
+          {/* Progress bar */}
+          <div className="flex-1 h-[3px] rounded-full bg-accent overflow-hidden min-w-[30px]">
             <div
-              className="h-full rounded-full bg-primary transition-all duration-300"
-              style={{ width: `${Math.min(100, (mcpData.current_step / mcpData.total_steps) * 100)}%` }}
+              className={`h-full rounded-full transition-all duration-300 ${activityColor === "warning" ? "bg-warning" : "bg-primary"}`}
+              style={{ width: `${progressPercent}%` }}
             />
           </div>
-        </div>
-      )}
 
-      {/* MCP status footer — only shown when session is active */}
-      {showMcpFooter && (
-        <>
-          <Separator className="mt-1.5" />
-          <div className="flex items-center gap-1.5 pt-[5px] pb-px min-w-0">
-            {mcpData ? (
-              <>
-                {mcpData.completed ? (
-                  <CheckCircle2 className="size-3 shrink-0 text-success" />
-                ) : (mcpData.error || mcpData.status === "error") ? (
-                  <AlertTriangle className="size-3 shrink-0 text-destructive" />
-                ) : (mcpData.waiting || mcpData.status === "waiting") ? (
-                  <CirclePause className="size-3 shrink-0 text-warning" />
-                ) : activity === "researching" || activity === "exploring" ? (
-                  <Lightbulb className="size-3 shrink-0 text-warning animate-pulse" />
-                ) : activity === "planning" ? (
-                  <ClipboardList className="size-3 shrink-0 text-primary animate-pulse" />
-                ) : activity === "testing" ? (
-                  <FlaskConical className="size-3 shrink-0 text-primary animate-spin" />
-                ) : activity === "debugging" ? (
-                  <Bug className="size-3 shrink-0 text-warning animate-spin" />
-                ) : activity === "reviewing" ? (
-                  <Eye className="size-3 shrink-0 text-primary animate-spin" />
-                ) : activity === "coding" ? (
-                  <Code className="size-3 shrink-0 text-primary animate-spin" />
-                ) : isResearch ? (
-                  <Lightbulb className="size-3 shrink-0 text-warning animate-pulse" />
-                ) : (
-                  <Loader2 className="size-3 shrink-0 text-primary animate-spin" />
-                )}
-                <span className={`text-[10px] truncate ${(mcpData.error || mcpData.status === "error") ? "text-destructive" : "text-muted-foreground"}`}>
-                  {(mcpData.error || mcpData.status === "error")
-                    ? mcpData.error_message || mcpData.message || "Error"
-                    : (mcpData.waiting || mcpData.status === "waiting")
-                      ? "Waiting for input"
-                      : mcpData.completed
-                        ? "Done"
-                        : mcpData.current_step != null && mcpData.total_steps != null
-                          ? `Step ${mcpData.current_step}/${mcpData.total_steps}`
-                          : mcpData.message || (activity ? activity.charAt(0).toUpperCase() + activity.slice(1) : isResearch ? "Researching" : "Working")}
-                </span>
-              </>
-            ) : isResearchActivity ? (
-              <>
-                <Lightbulb className="size-3 shrink-0 text-warning animate-pulse" />
-                <span className="text-[10px] truncate text-muted-foreground">Researching</span>
-              </>
-            ) : (
-              <>
-                <Loader2 className="size-3 shrink-0 text-primary animate-spin" />
-                <span className="text-[10px] truncate text-muted-foreground">Starting</span>
-              </>
-            )}
-          </div>
-        </>
+          {/* Step label */}
+          {mcpData?.current_step != null && mcpData?.total_steps != null && mcpData.total_steps > 0 && (
+            <span className="text-[9px] font-semibold text-dim-foreground whitespace-nowrap shrink-0">
+              {mcpData.current_step}/{mcpData.total_steps}
+            </span>
+          )}
+        </div>
       )}
     </div>
   );
diff --git a/src/components/GitHub/BranchFilter.tsx b/src/components/GitHub/BranchFilter.tsx
index 81d55a0..a298a8a 100644
--- a/src/components/GitHub/BranchFilter.tsx
+++ b/src/components/GitHub/BranchFilter.tsx
@@ -32,7 +32,7 @@ export default function BranchFilter({
         <button
           onClick={() => onToggle(true)}
           title="Show all branches"
-          className={`flex items-center gap-1 px-2 py-1 text-[11px] transition-colors ${
+          className={`flex items-center gap-1 px-2 py-1 text-xs transition-colors ${
             allBranches
               ? "bg-accent text-foreground"
               : "text-muted-foreground hover:text-dim-foreground"
@@ -45,7 +45,7 @@ export default function BranchFilter({
         <button
           onClick={() => onToggle(false)}
           title="Show current branch only"
-          className={`flex items-center gap-1 px-2 py-1 text-[11px] transition-colors ${
+          className={`flex items-center gap-1 px-2 py-1 text-xs transition-colors ${
             !allBranches
               ? "bg-accent text-foreground"
               : "text-muted-foreground hover:text-dim-foreground"
diff --git a/src/components/GitHub/CommitDetailPanel.tsx b/src/components/GitHub/CommitDetailPanel.tsx
index 415b95e..ee0bf81 100644
--- a/src/components/GitHub/CommitDetailPanel.tsx
+++ b/src/components/GitHub/CommitDetailPanel.tsx
@@ -126,7 +126,7 @@ export default function CommitDetailPanel({
               className="size-2.5 rounded-full shrink-0"
               style={{ background: railColor }}
             />
-            <code className="text-[11px] font-mono text-dim-foreground truncate flex-1">
+            <code className="text-xs font-mono text-dim-foreground truncate flex-1">
               {detail.hash}
             </code>
             <button
@@ -143,10 +143,10 @@ export default function CommitDetailPanel({
             <div className="text-xs text-foreground">
               {detail.author_name}
             </div>
-            <div className="text-[11px] text-muted-foreground">
+            <div className="text-xs text-muted-foreground">
               {detail.author_email}
             </div>
-            <div className="text-[11px] text-muted-foreground">
+            <div className="text-xs text-muted-foreground">
               {formatTimestamp(detail.timestamp)}
             </div>
           </div>
@@ -157,7 +157,7 @@ export default function CommitDetailPanel({
               {detail.subject}
             </div>
             {detail.body && (
-              <div className="text-[11px] text-dim-foreground whitespace-pre-wrap leading-relaxed">
+              <div className="text-xs text-dim-foreground whitespace-pre-wrap leading-relaxed">
                 {detail.body}
               </div>
             )}
@@ -166,14 +166,14 @@ export default function CommitDetailPanel({
           {/* Parents */}
           {detail.parent_hashes.length > 0 && (
             <div className="space-y-1">
-              <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              <div className="text-2xs uppercase tracking-wider text-muted-foreground">
                 {detail.parent_hashes.length > 1 ? "Parents (merge)" : "Parent"}
               </div>
               <div className="flex flex-wrap gap-1">
                 {detail.parent_hashes.map((ph) => (
                   <code
                     key={ph}
-                    className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-popover text-dim-foreground"
+                    className="text-2xs font-mono px-1.5 py-0.5 rounded bg-popover text-dim-foreground"
                   >
                     {ph.slice(0, 12)}
                   </code>
@@ -185,13 +185,13 @@ export default function CommitDetailPanel({
           {/* Changed files */}
           {detail.files.length > 0 && (
             <div className="space-y-1.5">
-              <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              <div className="text-2xs uppercase tracking-wider text-muted-foreground">
                 Files changed ({detail.files.length})
               </div>
               {Array.from(groupByDirectory(detail.files)).map(
                 ([dir, files]) => (
                   <div key={dir}>
-                    <div className="text-[10px] text-muted-foreground mb-0.5 font-mono">
+                    <div className="text-2xs text-muted-foreground mb-0.5 font-mono">
                       {dir}/
                     </div>
                     {files.map((f) => {
@@ -208,7 +208,7 @@ export default function CommitDetailPanel({
                             className="shrink-0"
                             style={{ color: cfg.color }}
                           />
-                          <span className="text-[11px] text-dim-foreground truncate font-mono">
+                          <span className="text-xs text-dim-foreground truncate font-mono">
                             {fileName}
                           </span>
                         </div>
diff --git a/src/components/GitHub/CommitRow.tsx b/src/components/GitHub/CommitRow.tsx
index 3fc01d3..19e1f18 100644
--- a/src/components/GitHub/CommitRow.tsx
+++ b/src/components/GitHub/CommitRow.tsx
@@ -88,7 +88,7 @@ function CommitRowInner({
         {refs?.branches.map((b) => (
           <span
             key={b}
-            className="shrink-0 inline-flex items-center rounded-[3px] px-1.5 py-px text-[10px] font-medium leading-tight max-w-[120px] truncate bg-[color-mix(in_oklch,var(--primary)_15%,transparent)] text-primary border border-[color-mix(in_oklch,var(--primary)_25%,transparent)]"
+            className="shrink-0 inline-flex items-center rounded-[3px] px-1.5 py-px text-2xs font-medium leading-tight max-w-[120px] truncate bg-primary/15 text-primary border border-primary/25"
           >
             {b}
           </span>
@@ -97,7 +97,7 @@ function CommitRowInner({
         {refs?.tags.map((t) => (
           <span
             key={t}
-            className="shrink-0 inline-flex items-center rounded-[3px] px-1.5 py-px text-[10px] font-medium leading-tight max-w-[90px] truncate bg-[color-mix(in_oklch,var(--warning)_15%,transparent)] text-warning border border-[color-mix(in_oklch,var(--warning)_25%,transparent)]"
+            className="shrink-0 inline-flex items-center rounded-[3px] px-1.5 py-px text-2xs font-medium leading-tight max-w-[90px] truncate bg-warning/15 text-warning border border-warning/25"
           >
             {t}
           </span>
@@ -116,10 +116,10 @@ function CommitRowInner({
             className="text-muted-foreground shrink-0"
           />
         )}
-        <span className="text-[11px] font-mono text-muted-foreground w-[52px] text-right">
+        <span className="text-xs font-mono text-muted-foreground w-[52px] text-right">
           {commit.short_hash}
         </span>
-        <span className="text-[10px] text-muted-foreground w-[28px] text-right tabular-nums">
+        <span className="text-2xs text-muted-foreground w-[28px] text-right tabular-nums">
           {formatRelativeTime(commit.timestamp)}
         </span>
       </div>
diff --git a/src/components/GitHub/GitHubView.tsx b/src/components/GitHub/GitHubView.tsx
index d40651e..995a706 100644
--- a/src/components/GitHub/GitHubView.tsx
+++ b/src/components/GitHub/GitHubView.tsx
@@ -9,7 +9,6 @@ import {
   Github,
   Loader2,
   RefreshCw,
-  Settings,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
@@ -23,8 +22,6 @@ import { Button } from "../ui/orecus.io/components/enhanced-button";
 import { glassStyles } from "../ui/orecus.io/lib/color-utils";
 import { Tabs } from "../ui/orecus.io/navigation/tabs";
 import BranchSelect from "../ui/BranchSelect";
-import { GitHubTab as GitHubSettingsTab } from "../Settings/GitHubTab";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import BranchFilter from "./BranchFilter";
 import ChangesTab from "./ChangesTab";
 import CommitDetailPanel from "./CommitDetailPanel";
@@ -41,10 +38,10 @@ export default function GitHubView() {
   const activeProjectId = useAppStore((s) => s.activeProjectId);
   const projectInfo = useAppStore((s) => s.projectInfo);
   const setProjectInfo = useAppStore((s) => s.setProjectInfo);
+  const setActiveView = useAppStore((s) => s.setActiveView);
   const [activeTab, setActiveTab] = useState<GitHubTab>("changes");
-  const [settingsOpen, setSettingsOpen] = useState(false);
 
-  const handleOpenSettings = useCallback(() => setSettingsOpen(true), []);
+  const handleOpenSettings = useCallback(() => setActiveView("settings"), [setActiveView]);
 
   // Sync status
   const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
@@ -193,7 +190,7 @@ export default function GitHubView() {
     <ViewLayout>
       {/* Header */}
       <ViewLayout.Toolbar>
-        <span className="text-[13px] font-medium text-foreground mr-1">
+        <span className="text-sm font-medium text-foreground mr-1">
           Git
         </span>
 
@@ -209,6 +206,7 @@ export default function GitHubView() {
           barRadius="md"
           tabRadius="md"
           fullWidth={false}
+          className="p-0"
         >
           <Tabs.Tab value="changes" icon={<FileCode size={13} />}>
             Changes
@@ -247,7 +245,7 @@ export default function GitHubView() {
         {/* Pull button */}
         <Button
           variant="outline"
-          size="sm"
+          size="xs"
           onClick={handlePull}
           disabled={pulling || !hasRemote}
           leftIcon={
@@ -263,7 +261,7 @@ export default function GitHubView() {
         >
           Pull
           {hasRemote && syncStatus && syncStatus.behind > 0 && (
-            <span className="ml-1 inline-flex items-center justify-center rounded-full bg-primary/15 px-1.5 py-px text-[10px] font-medium text-primary">
+            <span className="ml-1 inline-flex items-center justify-center rounded-full bg-primary/15 px-1.5 py-px text-2xs font-medium text-primary">
               {syncStatus.behind}
             </span>
           )}
@@ -272,7 +270,7 @@ export default function GitHubView() {
         {/* Push button */}
         <Button
           variant="outline"
-          size="sm"
+          size="xs"
           onClick={handlePush}
           disabled={pushing || !hasRemote}
           leftIcon={
@@ -288,7 +286,7 @@ export default function GitHubView() {
         >
           Push
           {hasRemote && syncStatus && syncStatus.ahead > 0 && (
-            <span className="ml-1 inline-flex items-center justify-center rounded-full bg-success/15 px-1.5 py-px text-[10px] font-medium text-success">
+            <span className="ml-1 inline-flex items-center justify-center rounded-full bg-success/15 px-1.5 py-px text-2xs font-medium text-success">
               {syncStatus.ahead}
             </span>
           )}
@@ -297,7 +295,7 @@ export default function GitHubView() {
         {/* Refresh button */}
         <Button
           variant="outline"
-          size="sm"
+          size="xs"
           onClick={refresh}
           leftIcon={<RefreshCw className="size-3" />}
           hoverEffect="scale"
@@ -307,31 +305,8 @@ export default function GitHubView() {
           Refresh
         </Button>
 
-        {/* GitHub settings */}
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          onClick={handleOpenSettings}
-          title="GitHub settings"
-          hoverEffect="scale"
-          clickEffect="scale"
-        >
-          <Settings className="size-3.5" />
-        </Button>
       </ViewLayout.Toolbar>
 
-      {/* GitHub Settings Dialog */}
-      <Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
-        <DialogContent className="sm:max-w-xl">
-          <DialogHeader>
-            <DialogTitle>GitHub Settings</DialogTitle>
-          </DialogHeader>
-          <div className="max-h-[70vh] overflow-y-auto -mx-6 px-6">
-            <GitHubSettingsTab />
-          </div>
-        </DialogContent>
-      </Dialog>
-
       {/* Content card */}
       <div
         className={`flex-1 min-h-0 overflow-hidden rounded-lg ring-1 ring-border/40 ${glassStyles[isGlass ? "normal" : "solid"]}`}
@@ -353,7 +328,7 @@ export default function GitHubView() {
 
             {/* Error banner */}
             {error && (
-              <div className="px-3 py-1.5 text-xs bg-[color-mix(in_oklch,var(--destructive)_10%,transparent)] text-destructive">
+              <div className="px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
                 {error}
               </div>
             )}
diff --git a/src/components/GitHub/IssueDetailPanel.tsx b/src/components/GitHub/IssueDetailPanel.tsx
index 608a651..e703a0f 100644
--- a/src/components/GitHub/IssueDetailPanel.tsx
+++ b/src/components/GitHub/IssueDetailPanel.tsx
@@ -101,7 +101,7 @@ export default function IssueDetailPanel({
           <div className="space-y-1">
             <div className="flex items-center gap-1.5">
               <span
-                className="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium"
+                className="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-2xs font-medium"
                 style={{
                   backgroundColor: `color-mix(in oklch, ${stateColor(detail.issue.state)} 15%, transparent)`,
                   color: stateColor(detail.issue.state),
@@ -116,7 +116,7 @@ export default function IssueDetailPanel({
               </span>
               {detail.already_imported && detail.existing_task_id && (
                 <span
-                  className="inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[10px] font-medium"
+                  className="inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-2xs font-medium"
                   style={{
                     backgroundColor: `color-mix(in oklch, var(--success) 12%, transparent)`,
                     color: "var(--success)",
@@ -130,14 +130,14 @@ export default function IssueDetailPanel({
             <div className="text-xs font-medium text-foreground">
               {detail.issue.title}
             </div>
-            <div className="text-[11px] text-muted-foreground font-mono">
+            <div className="text-xs text-muted-foreground font-mono">
               #{detail.issue.number}
             </div>
           </div>
 
           {/* Author + date */}
           {detail.issue.assignees.length > 0 && (
-            <div className="flex items-center gap-1.5 text-[11px] text-dim-foreground">
+            <div className="flex items-center gap-1.5 text-xs text-dim-foreground">
               <User size={11} className="shrink-0" />
               <span>
                 {detail.issue.assignees.map((a) => a.login).join(", ")}
@@ -145,7 +145,7 @@ export default function IssueDetailPanel({
             </div>
           )}
 
-          <div className="text-[11px] text-dim-foreground">
+          <div className="text-xs text-dim-foreground">
             Opened {formatRelativeTime(detail.issue.created_at)}
             {detail.issue.updated_at !== detail.issue.created_at && (
               <span className="text-muted-foreground">
@@ -160,7 +160,7 @@ export default function IssueDetailPanel({
               {detail.issue.labels.map((label) => (
                 <span
                   key={label.name}
-                  className="inline-flex items-center rounded-full px-1.5 py-px text-[10px] font-medium border"
+                  className="inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium border"
                   style={{
                     backgroundColor: `#${label.color}20`,
                     borderColor: `#${label.color}40`,
@@ -176,10 +176,10 @@ export default function IssueDetailPanel({
           {/* Body */}
           {detail.issue.body && (
             <div className="space-y-1">
-              <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              <div className="text-2xs uppercase tracking-wider text-muted-foreground">
                 Description
               </div>
-              <div className="text-[11px] text-dim-foreground whitespace-pre-wrap leading-relaxed">
+              <div className="text-xs text-dim-foreground whitespace-pre-wrap leading-relaxed">
                 {detail.issue.body}
               </div>
             </div>
@@ -187,10 +187,10 @@ export default function IssueDetailPanel({
 
           {!detail.issue.body && (
             <div className="space-y-1">
-              <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              <div className="text-2xs uppercase tracking-wider text-muted-foreground">
                 Description
               </div>
-              <div className="text-[11px] text-muted-foreground italic">
+              <div className="text-xs text-muted-foreground italic">
                 No description provided
               </div>
             </div>
@@ -198,13 +198,13 @@ export default function IssueDetailPanel({
 
           {/* Comments */}
           <div className="space-y-2">
-            <div className="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-muted-foreground">
+            <div className="flex items-center gap-1.5 text-2xs uppercase tracking-wider text-muted-foreground">
               <MessageSquare size={11} />
               Comments ({detail.comments.length})
             </div>
 
             {detail.comments.length === 0 && (
-              <div className="text-[11px] text-muted-foreground italic">
+              <div className="text-xs text-muted-foreground italic">
                 No comments yet
               </div>
             )}
@@ -225,15 +225,15 @@ export default function IssueDetailPanel({
                   ) : (
                     <User size={11} className="shrink-0 text-muted-foreground" />
                   )}
-                  <span className="text-[11px] font-medium text-dim-foreground truncate">
+                  <span className="text-xs font-medium text-dim-foreground truncate">
                     {comment.author}
                   </span>
-                  <span className="text-[10px] text-muted-foreground shrink-0 ml-auto">
+                  <span className="text-2xs text-muted-foreground shrink-0 ml-auto">
                     {formatRelativeTime(comment.created_at)}
                   </span>
                 </div>
                 {/* Comment body */}
-                <div className="px-2.5 py-2 text-[11px] text-dim-foreground whitespace-pre-wrap leading-relaxed">
+                <div className="px-2.5 py-2 text-xs text-dim-foreground whitespace-pre-wrap leading-relaxed">
                   {comment.body}
                 </div>
               </div>
diff --git a/src/components/GitHub/IssuesTab.tsx b/src/components/GitHub/IssuesTab.tsx
index e97f8e9..a3f0146 100644
--- a/src/components/GitHub/IssuesTab.tsx
+++ b/src/components/GitHub/IssuesTab.tsx
@@ -134,7 +134,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
                 <button
                   onClick={() => setStateFilter(filter)}
                   title={`Show ${filter} issues`}
-                  className={`flex items-center gap-1 px-2 py-1 text-[11px] transition-colors capitalize ${
+                  className={`flex items-center gap-1 px-2 py-1 text-xs transition-colors capitalize ${
                     stateFilter === filter
                       ? "bg-accent text-foreground"
                       : "text-muted-foreground hover:text-dim-foreground"
@@ -162,7 +162,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
         {importableCount > 0 && (
           <button
             onClick={allSelected ? clearSelection : selectAll}
-            className="text-[11px] text-dim-foreground hover:text-foreground transition-colors"
+            className="text-xs text-dim-foreground hover:text-foreground transition-colors"
             title={allSelected ? "Clear all selections" : "Select all importable issues"}
           >
             {allSelected ? "Clear selection" : "Select all"}
@@ -208,7 +208,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
 
       {/* Error banner */}
       {error && (
-        <div className="px-3 py-1.5 text-xs bg-[color-mix(in_oklch,var(--destructive)_10%,transparent)] text-destructive">
+        <div className="px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
           {error}
         </div>
       )}
@@ -242,7 +242,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
                 onClick={() => handleRowClick(issue.number)}
                 className={`flex items-center gap-2.5 px-3 py-2 border-b border-border/40 hover:bg-accent transition-colors cursor-pointer ${
                   selectedIssue === issue.number
-                    ? "bg-[color-mix(in_oklch,var(--primary)_6%,transparent)]"
+                    ? "bg-primary/6"
                     : ""
                 }`}
               >
@@ -266,7 +266,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
                 </div>
 
                 {/* Issue number */}
-                <span className="shrink-0 text-[11px] font-mono text-dim-foreground w-[48px]">
+                <span className="shrink-0 text-xs font-mono text-dim-foreground w-[48px]">
                   #{issue.number}
                 </span>
 
@@ -287,7 +287,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
 
                 {/* Title + labels */}
                 <div className="flex-1 flex items-center gap-1.5 min-w-0">
-                  <span className="truncate text-[13px] text-foreground">
+                  <span className="truncate text-sm text-foreground">
                     {issue.title}
                   </span>
 
@@ -295,7 +295,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
                   {issue.labels.map((label) => (
                     <span
                       key={label.name}
-                      className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-[10px] font-medium leading-tight max-w-[100px] truncate border"
+                      className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium leading-tight max-w-[100px] truncate border"
                       style={{
                         backgroundColor: `#${label.color}20`,
                         borderColor: `#${label.color}40`,
@@ -309,7 +309,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
 
                 {/* Assignees */}
                 {issue.assignees.length > 0 && (
-                  <div className="shrink-0 flex items-center gap-1 text-[10px] text-dim-foreground">
+                  <div className="shrink-0 flex items-center gap-1 text-2xs text-dim-foreground">
                     <User size={10} />
                     <span>
                       {issue.assignees.map((a) => a.login).join(", ")}
@@ -321,7 +321,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
                 {already_imported && existing_task_id && (
                   <Badge
                     variant="secondary"
-                    className="shrink-0 gap-1 text-[10px] bg-[color-mix(in_oklch,var(--success)_12%,transparent)] text-success border-[color-mix(in_oklch,var(--success)_25%,transparent)]"
+                    className="shrink-0 gap-1 text-2xs bg-success/12 text-success border-success/25"
                   >
                     <Check size={10} />
                     {existing_task_id}
diff --git a/src/components/GitHub/PullRequestDetailPanel.tsx b/src/components/GitHub/PullRequestDetailPanel.tsx
index 0a2d87f..f984e52 100644
--- a/src/components/GitHub/PullRequestDetailPanel.tsx
+++ b/src/components/GitHub/PullRequestDetailPanel.tsx
@@ -163,7 +163,7 @@ export default function PullRequestDetailPanel({
           <div className="space-y-1">
             <div className="flex items-center gap-1.5">
               <span
-                className="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium"
+                className="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-2xs font-medium"
                 style={{
                   backgroundColor: `color-mix(in oklch, ${stateColor(detail.state)} 15%, transparent)`,
                   color: stateColor(detail.state),
@@ -172,7 +172,7 @@ export default function PullRequestDetailPanel({
                 {detail.state.toLowerCase()}
               </span>
               {detail.is_draft && (
-                <span className="inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium bg-muted text-muted-foreground">
+                <span className="inline-flex items-center rounded-full px-1.5 py-0.5 text-2xs font-medium bg-muted text-muted-foreground">
                   Draft
                 </span>
               )}
@@ -180,18 +180,18 @@ export default function PullRequestDetailPanel({
             <div className="text-xs font-medium text-foreground">
               {detail.title}
             </div>
-            <div className="text-[11px] text-muted-foreground font-mono">
+            <div className="text-xs text-muted-foreground font-mono">
               #{detail.number}
             </div>
           </div>
 
           {/* Author + date */}
           <div className="space-y-1">
-            <div className="text-[11px] text-dim-foreground">
+            <div className="text-xs text-dim-foreground">
               {detail.author.login} opened{" "}
               {formatRelativeTime(detail.created_at)}
             </div>
-            <div className="flex items-center gap-1 text-[11px] text-muted-foreground font-mono">
+            <div className="flex items-center gap-1 text-xs text-muted-foreground font-mono">
               <span className="text-primary">{detail.head_ref_name}</span>
               <span>→</span>
               <span>{detail.base_ref_name}</span>
@@ -204,7 +204,7 @@ export default function PullRequestDetailPanel({
             if (!rd) return null;
             return (
               <div
-                className="text-[11px] font-medium"
+                className="text-xs font-medium"
                 style={{ color: rd.color }}
               >
                 {rd.label}
@@ -215,17 +215,17 @@ export default function PullRequestDetailPanel({
           {/* Body */}
           {detail.body && (
             <div className="space-y-1">
-              <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              <div className="text-2xs uppercase tracking-wider text-muted-foreground">
                 Description
               </div>
-              <div className="text-[11px] text-dim-foreground whitespace-pre-wrap leading-relaxed">
+              <div className="text-xs text-dim-foreground whitespace-pre-wrap leading-relaxed">
                 {detail.body}
               </div>
             </div>
           )}
 
           {/* Stats */}
-          <div className="flex items-center gap-3 text-[11px]">
+          <div className="flex items-center gap-3 text-xs">
             <span className="text-success">+{detail.additions}</span>
             <span className="text-destructive">-{detail.deletions}</span>
             <span className="text-muted-foreground">
@@ -237,17 +237,17 @@ export default function PullRequestDetailPanel({
           {/* Reviews */}
           {detail.reviews.length > 0 && (
             <div className="space-y-1">
-              <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              <div className="text-2xs uppercase tracking-wider text-muted-foreground">
                 Reviews
               </div>
               {detail.reviews.map((r, i) => (
                 <div
                   key={`${r.author}-${i}`}
-                  className="flex items-center gap-1.5 text-[11px]"
+                  className="flex items-center gap-1.5 text-xs"
                 >
                   <span className="text-dim-foreground">{r.author}</span>
                   <span
-                    className="text-[10px] font-medium"
+                    className="text-2xs font-medium"
                     style={{
                       color:
                         r.state === "APPROVED"
@@ -270,7 +270,7 @@ export default function PullRequestDetailPanel({
               {detail.labels.map((label) => (
                 <span
                   key={label.name}
-                  className="inline-flex items-center rounded-full px-1.5 py-px text-[10px] font-medium border"
+                  className="inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium border"
                   style={{
                     backgroundColor: `#${label.color}20`,
                     borderColor: `#${label.color}40`,
@@ -286,13 +286,13 @@ export default function PullRequestDetailPanel({
           {/* Files */}
           {detail.files.length > 0 && (
             <div className="space-y-1.5">
-              <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              <div className="text-2xs uppercase tracking-wider text-muted-foreground">
                 Files changed ({detail.files.length})
               </div>
               {Array.from(groupByDirectory(detail.files)).map(
                 ([dir, files]) => (
                   <div key={dir}>
-                    <div className="text-[10px] text-muted-foreground mb-0.5 font-mono">
+                    <div className="text-2xs text-muted-foreground mb-0.5 font-mono">
                       {dir}/
                     </div>
                     {files.map((f) => {
@@ -321,13 +321,13 @@ export default function PullRequestDetailPanel({
                             className="shrink-0"
                             style={{ color: iconColor }}
                           />
-                          <span className="text-[11px] text-dim-foreground truncate font-mono flex-1">
+                          <span className="text-xs text-dim-foreground truncate font-mono flex-1">
                             {fileName}
                           </span>
-                          <span className="text-[10px] text-success shrink-0">
+                          <span className="text-2xs text-success shrink-0">
                             +{f.additions}
                           </span>
-                          <span className="text-[10px] text-destructive shrink-0">
+                          <span className="text-2xs text-destructive shrink-0">
                             -{f.deletions}
                           </span>
                         </div>
@@ -379,7 +379,7 @@ export default function PullRequestDetailPanel({
                         setMergeMethod(m);
                         setShowMergeOptions(false);
                       }}
-                      className={`w-full text-left px-2 py-1 text-[11px] rounded-[var(--radius-element)] transition-colors capitalize ${
+                      className={`w-full text-left px-2 py-1 text-xs rounded-[var(--radius-element)] transition-colors capitalize ${
                         mergeMethod === m
                           ? "bg-accent text-foreground"
                           : "text-dim-foreground hover:text-foreground hover:bg-accent"
diff --git a/src/components/GitHub/PullRequestsTab.tsx b/src/components/GitHub/PullRequestsTab.tsx
index d00b535..f8a8b43 100644
--- a/src/components/GitHub/PullRequestsTab.tsx
+++ b/src/components/GitHub/PullRequestsTab.tsx
@@ -129,7 +129,7 @@ export default function PullRequestsTab({
                 <button
                   onClick={() => setStateFilter(filter)}
                   title={`Show ${filter} pull requests`}
-                  className={`flex items-center gap-1 px-2 py-1 text-[11px] transition-colors capitalize ${
+                  className={`flex items-center gap-1 px-2 py-1 text-xs transition-colors capitalize ${
                     stateFilter === filter
                       ? "bg-accent text-foreground"
                       : "text-muted-foreground hover:text-dim-foreground"
@@ -179,7 +179,7 @@ export default function PullRequestsTab({
 
       {/* Error banner */}
       {error && (
-        <div className="px-3 py-1.5 text-xs bg-[color-mix(in_oklch,var(--destructive)_10%,transparent)] text-destructive">
+        <div className="px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
           {error}
         </div>
       )}
@@ -214,7 +214,7 @@ export default function PullRequestsTab({
                 onClick={() => handleRowClick(pr.number)}
                 className={`flex items-center gap-2.5 px-3 py-2 border-b border-border/40 hover:bg-accent transition-colors cursor-pointer ${
                   selectedPR === pr.number
-                    ? "bg-[color-mix(in_oklch,var(--primary)_6%,transparent)]"
+                    ? "bg-primary/6"
                     : ""
                 }`}
               >
@@ -222,18 +222,18 @@ export default function PullRequestsTab({
                 <div className="shrink-0">{stateIcon(pr.state)}</div>
 
                 {/* PR number */}
-                <span className="shrink-0 text-[11px] font-mono text-dim-foreground w-[48px]">
+                <span className="shrink-0 text-xs font-mono text-dim-foreground w-[48px]">
                   #{pr.number}
                 </span>
 
                 {/* Title + draft badge + labels */}
                 <div className="flex-1 flex items-center gap-1.5 min-w-0">
-                  <span className="truncate text-[13px] text-foreground">
+                  <span className="truncate text-sm text-foreground">
                     {pr.title}
                   </span>
 
                   {pr.is_draft && (
-                    <span className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-[10px] font-medium bg-muted text-muted-foreground">
+                    <span className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium bg-muted text-muted-foreground">
                       Draft
                     </span>
                   )}
@@ -241,7 +241,7 @@ export default function PullRequestsTab({
                   {pr.labels.map((label) => (
                     <span
                       key={label.name}
-                      className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-[10px] font-medium leading-tight max-w-[100px] truncate border"
+                      className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium leading-tight max-w-[100px] truncate border"
                       style={{
                         backgroundColor: `#${label.color}20`,
                         borderColor: `#${label.color}40`,
@@ -254,9 +254,9 @@ export default function PullRequestsTab({
                 </div>
 
                 {/* Branch pill */}
-                <span className="shrink-0 inline-flex items-center gap-1 rounded-full px-1.5 py-px text-[10px] font-mono text-muted-foreground bg-muted max-w-[180px] truncate">
+                <span className="shrink-0 inline-flex items-center gap-1 rounded-full px-1.5 py-px text-2xs font-mono text-muted-foreground bg-muted max-w-[180px] truncate">
                   {pr.head_ref_name}
-                  <span className="text-[9px]">→</span>
+                  <span className="text-2xs">→</span>
                   {pr.base_ref_name}
                 </span>
 
@@ -266,18 +266,18 @@ export default function PullRequestsTab({
                 </div>
 
                 {/* Diff stats */}
-                <div className="shrink-0 flex items-center gap-1.5 text-[10px]">
+                <div className="shrink-0 flex items-center gap-1.5 text-2xs">
                   <span className="text-success">+{pr.additions}</span>
                   <span className="text-destructive">-{pr.deletions}</span>
                 </div>
 
                 {/* Author */}
-                <span className="shrink-0 text-[10px] text-muted-foreground max-w-[80px] truncate">
+                <span className="shrink-0 text-2xs text-muted-foreground max-w-[80px] truncate">
                   {pr.author.login}
                 </span>
 
                 {/* Time */}
-                <span className="shrink-0 text-[10px] text-muted-foreground w-[52px] text-right">
+                <span className="shrink-0 text-2xs text-muted-foreground w-[52px] text-right">
                   {formatRelativeTime(pr.updated_at)}
                 </span>
               </div>
diff --git a/src/components/Help/HelpView.tsx b/src/components/Help/HelpView.tsx
index 699000d..7378261 100644
--- a/src/components/Help/HelpView.tsx
+++ b/src/components/Help/HelpView.tsx
@@ -146,7 +146,7 @@ export default function HelpView() {
                       {doc.title}
                     </div>
                     {doc.description && (
-                      <div className="text-[11px] text-muted-foreground truncate mt-0.5">
+                      <div className="text-xs text-muted-foreground truncate mt-0.5">
                         {doc.description}
                       </div>
                     )}
diff --git a/src/components/Launchers/AgentCardGrid.tsx b/src/components/Launchers/AgentCardGrid.tsx
index 313296b..9bed2a4 100644
--- a/src/components/Launchers/AgentCardGrid.tsx
+++ b/src/components/Launchers/AgentCardGrid.tsx
@@ -212,7 +212,7 @@ interface StatusBadgeProps {
 
 function StatusBadge({ label, installed, loading }: StatusBadgeProps) {
   return (
-    <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+    <span className="flex items-center gap-0.5 text-2xs text-muted-foreground">
       {label}
       {loading ? (
         <Loader2 size={9} className="animate-spin text-muted-foreground/50" />
diff --git a/src/components/Launchers/LaunchBreakdownDialog.tsx b/src/components/Launchers/LaunchBreakdownDialog.tsx
index 5fb6082..134be76 100644
--- a/src/components/Launchers/LaunchBreakdownDialog.tsx
+++ b/src/components/Launchers/LaunchBreakdownDialog.tsx
@@ -214,7 +214,7 @@ export default function LaunchBreakdownDialog({
                 Chat
               </button>
             </div>
-            <p className="mt-1 text-[11px] text-muted-foreground">
+            <p className="mt-1 text-xs text-muted-foreground">
               {selectedTransport === "acp"
                 ? "Structured chat UI with tool calls and permission management"
                 : "Classic terminal session with PTY output"}
@@ -279,7 +279,7 @@ export default function LaunchBreakdownDialog({
             onChange={(e) => setUserPrompt(e.target.value)}
             placeholder="How should this epic be broken down?"
             rows={4}
-            className="text-[13px]"
+            className="text-sm"
           />
         </div>
 
diff --git a/src/components/Launchers/LaunchContinuousDialog.tsx b/src/components/Launchers/LaunchContinuousDialog.tsx
index 15189eb..0c09c82 100644
--- a/src/components/Launchers/LaunchContinuousDialog.tsx
+++ b/src/components/Launchers/LaunchContinuousDialog.tsx
@@ -355,14 +355,14 @@ export default function LaunchContinuousDialog({
                     checked={item.selected}
                     onCheckedChange={() => handleToggleTask(index)}
                   />
-                  <span className="text-[11px] tabular-nums text-muted-foreground w-4 text-center shrink-0">
+                  <span className="text-xs tabular-nums text-muted-foreground w-4 text-center shrink-0">
                     {item.selected ? selectedIndex : "-"}
                   </span>
                   <span className="text-xs text-foreground truncate flex-1">
                     {item.task.title}
                     {item.task.depends_on.length > 0 && (
                       <span
-                        className="ml-1 text-[10px] text-muted-foreground"
+                        className="ml-1 text-2xs text-muted-foreground"
                         title={`Depends on: ${item.task.depends_on.join(", ")}`}
                       >
                         (deps: {item.task.depends_on.filter((d) => orderedTasks.some((t) => t.task.id === d)).length})
@@ -371,14 +371,14 @@ export default function LaunchContinuousDialog({
                   </span>
                   {item.task.agent && item.task.agent !== selectedAgentName && (
                     <span
-                      className="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium bg-primary/15 text-primary"
+                      className="shrink-0 rounded px-1.5 py-0.5 text-2xs font-medium bg-primary/15 text-primary"
                       title={`This task will use ${item.task.agent} instead of ${selectedAgentName}`}
                     >
                       {item.task.agent}
                     </span>
                   )}
                   <span
-                    className={`shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium ${getPriorityBadgeClass(item.task.priority, priorities)}`}
+                    className={`shrink-0 rounded px-1.5 py-0.5 text-2xs font-medium ${getPriorityBadgeClass(item.task.priority, priorities)}`}
                   >
                     {item.task.priority}
                   </span>
@@ -405,7 +405,7 @@ export default function LaunchContinuousDialog({
             })}
           </div>
           {selectedTaskIds.length < 2 && (
-            <p className="mt-1 text-[11px] text-warning">
+            <p className="mt-1 text-xs text-warning">
               Select at least 2 tasks to start continuous mode
             </p>
           )}
@@ -432,7 +432,7 @@ export default function LaunchContinuousDialog({
                 >
                   Independent
                 </span>
-                <div className="text-[11px] leading-snug text-muted-foreground mt-0.5">
+                <div className="text-xs leading-snug text-muted-foreground mt-0.5">
                   All tasks run in parallel, each branching from base
                 </div>
               </div>
@@ -452,14 +452,14 @@ export default function LaunchContinuousDialog({
                 >
                   Chained
                 </span>
-                <div className="text-[11px] leading-snug text-muted-foreground mt-0.5">
+                <div className="text-xs leading-snug text-muted-foreground mt-0.5">
                   Each branches from the previous
                 </div>
               </div>
             </button>
           </div>
           {dependencyAnalysis.hasDeps && (
-            <div className="mt-1.5 flex items-start gap-1.5 text-[11px] text-muted-foreground">
+            <div className="mt-1.5 flex items-start gap-1.5 text-xs text-muted-foreground">
               <Info className="size-3 shrink-0 mt-0.5 text-primary" />
               <span>
                 {dependencyAnalysis.reason}
@@ -516,7 +516,7 @@ export default function LaunchContinuousDialog({
                 Chat
               </button>
             </div>
-            <p className="mt-1 text-[11px] text-muted-foreground">
+            <p className="mt-1 text-xs text-muted-foreground">
               {selectedTransport === "acp"
                 ? "Structured chat UI with tool calls and permission management"
                 : "Classic terminal session with PTY output"}
@@ -534,7 +534,7 @@ export default function LaunchContinuousDialog({
             onSelect={handleAgentSelect}
             accentColor={accentColor}
           />
-          <p className="mt-1.5 text-[11px] text-muted-foreground">
+          <p className="mt-1.5 text-xs text-muted-foreground">
             Tasks with their own agent set will use that agent instead of the one selected here.
           </p>
         </div>
diff --git a/src/components/Launchers/LaunchResearchDialog.tsx b/src/components/Launchers/LaunchResearchDialog.tsx
index 600be6a..52f966d 100644
--- a/src/components/Launchers/LaunchResearchDialog.tsx
+++ b/src/components/Launchers/LaunchResearchDialog.tsx
@@ -214,7 +214,7 @@ export default function LaunchResearchDialog({
                 Chat
               </button>
             </div>
-            <p className="mt-1 text-[11px] text-muted-foreground">
+            <p className="mt-1 text-xs text-muted-foreground">
               {selectedTransport === "acp"
                 ? "Structured chat UI with tool calls and permission management"
                 : "Classic terminal session with PTY output"}
@@ -279,7 +279,7 @@ export default function LaunchResearchDialog({
             onChange={(e) => setUserPrompt(e.target.value)}
             placeholder="What would you like to research about this task?"
             rows={4}
-            className="text-[13px]"
+            className="text-sm"
           />
         </div>
 
diff --git a/src/components/Launchers/LaunchSessionDialog.tsx b/src/components/Launchers/LaunchSessionDialog.tsx
index 1f81513..d942fab 100644
--- a/src/components/Launchers/LaunchSessionDialog.tsx
+++ b/src/components/Launchers/LaunchSessionDialog.tsx
@@ -185,7 +185,7 @@ export default function LaunchSessionDialog({
                 Chat
               </button>
             </div>
-            <p className="mt-1 text-[11px] text-muted-foreground">
+            <p className="mt-1 text-xs text-muted-foreground">
               {selectedTransport === "acp"
                 ? "Structured chat UI with tool calls and permission management"
                 : "Classic terminal session with PTY output"}
@@ -242,14 +242,14 @@ export default function LaunchSessionDialog({
 
         {/* Worktree toggle */}
         <div>
-          <label className="flex cursor-pointer items-center gap-2 text-[13px] text-dim-foreground">
+          <label className="flex cursor-pointer items-center gap-2 text-sm text-dim-foreground">
             <Checkbox
               checked={createWorktree}
               onCheckedChange={(checked) => setCreateWorktree(checked === true)}
             />
             Create worktree
           </label>
-          <p className="mt-1 ml-6 text-[11px] text-muted-foreground">
+          <p className="mt-1 ml-6 text-xs text-muted-foreground">
             Isolates work in a separate git worktree with its own branch
           </p>
         </div>
@@ -268,7 +268,7 @@ export default function LaunchSessionDialog({
               onChange={setSelectedBranch}
               triggerVariant="select"
             />
-            <p className="mt-1 text-[11px] text-muted-foreground">
+            <p className="mt-1 text-xs text-muted-foreground">
               The worktree branch will be created from this branch
             </p>
           </div>
@@ -284,7 +284,7 @@ export default function LaunchSessionDialog({
             onChange={(e) => setUserPrompt(e.target.value)}
             placeholder="What should the agent work on..."
             rows={3}
-            className="text-[13px]"
+            className="text-sm"
           />
         </div>
 
diff --git a/src/components/Launchers/LaunchTaskDialog.tsx b/src/components/Launchers/LaunchTaskDialog.tsx
index 928ebe4..c35a5df 100644
--- a/src/components/Launchers/LaunchTaskDialog.tsx
+++ b/src/components/Launchers/LaunchTaskDialog.tsx
@@ -223,7 +223,7 @@ export default function LaunchTaskDialog({
                 Chat
               </button>
             </div>
-            <p className="mt-1 text-[11px] text-muted-foreground">
+            <p className="mt-1 text-xs text-muted-foreground">
               {selectedTransport === "acp"
                 ? "Structured chat UI with tool calls and permission management"
                 : "Classic terminal session with PTY output"}
@@ -280,14 +280,14 @@ export default function LaunchTaskDialog({
 
         {/* Worktree toggle */}
         <div>
-          <label className="flex cursor-pointer items-center gap-2 text-[13px] text-dim-foreground">
+          <label className="flex cursor-pointer items-center gap-2 text-sm text-dim-foreground">
             <Checkbox
               checked={createWorktree}
               onCheckedChange={(checked) => setCreateWorktree(checked === true)}
             />
             Create worktree
           </label>
-          <p className="mt-1 ml-6 text-[11px] text-muted-foreground">
+          <p className="mt-1 ml-6 text-xs text-muted-foreground">
             Isolates work in a separate git worktree with its own branch
           </p>
         </div>
@@ -306,7 +306,7 @@ export default function LaunchTaskDialog({
               onChange={setBaseBranch}
               triggerVariant="select"
             />
-            <p className="mt-1 text-[11px] text-muted-foreground">
+            <p className="mt-1 text-xs text-muted-foreground">
               The worktree branch will be created from this branch
             </p>
           </div>
@@ -322,7 +322,7 @@ export default function LaunchTaskDialog({
             onChange={(e) => setUserPrompt(e.target.value)}
             placeholder="Instructions for the agent..."
             rows={4}
-            className="text-[13px]"
+            className="text-sm"
           />
         </div>
 
diff --git a/src/components/Review/CreatePRDialog.tsx b/src/components/Review/CreatePRDialog.tsx
index faedd0f..13ba33e 100644
--- a/src/components/Review/CreatePRDialog.tsx
+++ b/src/components/Review/CreatePRDialog.tsx
@@ -163,7 +163,7 @@ export default function CreatePRDialog({
         {stage === "done" && result ? (
           /* Success state */
           <div className="space-y-4">
-            <div className="rounded-md border border-success bg-[color-mix(in_oklch,var(--success)_10%,transparent)] px-4 py-3">
+            <div className="rounded-md border border-success bg-success/10 px-4 py-3">
               <p className="text-sm font-medium text-success">
                 PR #{result.number} created
               </p>
diff --git a/src/components/Review/DiffToolbar.tsx b/src/components/Review/DiffToolbar.tsx
index 05f2c8e..c3ae7cd 100644
--- a/src/components/Review/DiffToolbar.tsx
+++ b/src/components/Review/DiffToolbar.tsx
@@ -228,7 +228,7 @@ export default function DiffToolbar({
             onClick={onDelete}
             hoverEffect="scale"
             clickEffect="scale"
-            className="text-destructive hover:bg-[color-mix(in_oklch,var(--destructive)_10%,transparent)]"
+            className="text-destructive hover:bg-destructive/10"
             leftIcon={<Trash2 className="size-3.5" />}
             title="Delete worktree"
           >
diff --git a/src/components/Review/DiffView.tsx b/src/components/Review/DiffView.tsx
index a1d66eb..5781f17 100644
--- a/src/components/Review/DiffView.tsx
+++ b/src/components/Review/DiffView.tsx
@@ -113,8 +113,8 @@ export default function DiffView({
     <div
       className={`flex items-center justify-between px-3 py-1.5 text-xs shrink-0 ${
         feedback.type === "success"
-          ? "bg-[color-mix(in_oklch,var(--success)_10%,transparent)] text-success"
-          : "bg-[color-mix(in_oklch,var(--destructive)_10%,transparent)] text-destructive"
+          ? "bg-success/10 text-success"
+          : "bg-destructive/10 text-destructive"
       }`}
     >
       <span>{feedback.text}</span>
diff --git a/src/components/Review/FileList.tsx b/src/components/Review/FileList.tsx
index 257afe0..72f2f16 100644
--- a/src/components/Review/FileList.tsx
+++ b/src/components/Review/FileList.tsx
@@ -12,6 +12,7 @@ import {
   Loader2,
 } from "lucide-react";
 import { useCallback, useState } from "react";
+import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
 
 import { useTheme } from "../../contexts/ThemeContext";
 import { Checkbox } from "../ui/checkbox";
@@ -111,9 +112,9 @@ function FileRow({
         onClick={onSelect}
         className="flex min-w-0 flex-1 items-baseline gap-1 truncate text-left"
       >
-        <span className="truncate font-mono text-[12px]">{fileName}</span>
+        <span className="truncate font-mono text-xs">{fileName}</span>
         {dirPath && (
-          <span className="truncate text-[10px] text-muted-foreground">
+          <span className="truncate text-2xs text-muted-foreground">
             {dirPath}
           </span>
         )}
@@ -121,7 +122,7 @@ function FileRow({
 
       {/* Status badge */}
       <span
-        className="shrink-0 rounded px-1 py-px text-[10px] font-bold leading-none"
+        className="shrink-0 rounded px-1 py-px text-2xs font-bold leading-none"
         style={{
           color: config.color,
           background: `color-mix(in oklch, ${config.color} 15%, transparent)`,
@@ -144,6 +145,7 @@ export default function FileList({
   onRefresh,
 }: FileListProps) {
   const { isGlass } = useTheme();
+  const accentColor = useProjectAccentColor();
   const [commitMsg, setCommitMsg] = useState("");
   const [committing, setCommitting] = useState(false);
   const [commitError, setCommitError] = useState<string | null>(null);
@@ -215,10 +217,10 @@ export default function FileList({
                 <ChevronRight className="size-3 shrink-0 text-muted-foreground" />
               )}
               <CheckCircle2 className="size-3 text-success opacity-60" />
-              <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+              <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                 Committed
               </span>
-              <span className="ml-auto text-[11px] text-muted-foreground">
+              <span className="ml-auto text-xs text-muted-foreground">
                 {committedFiles.length}
               </span>
             </div>
@@ -260,10 +262,10 @@ export default function FileList({
               className="size-3.5"
             />
           )}
-          <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
             Changes
           </span>
-          <span className="ml-auto text-[11px] text-muted-foreground">
+          <span className="ml-auto text-xs text-muted-foreground">
             {someStaged && `${stagedFiles.length}/`}
             {changedFiles.length}
           </span>
@@ -271,7 +273,7 @@ export default function FileList({
         {changesExpanded && (
           <div className="py-1">
             {!hasChanges ? (
-              <div className="px-3 py-3 text-center text-[11px] text-muted-foreground">
+              <div className="px-3 py-3 text-center text-xs text-muted-foreground">
                 No uncommitted changes
               </div>
             ) : (
@@ -310,11 +312,11 @@ export default function FileList({
                 : "Stage files to commit"
             }
             disabled={!someStaged || committing}
-            className="min-w-0 flex-1 rounded-[var(--radius-element)] border border-border bg-popover px-2 py-1 text-[11px] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none disabled:opacity-50"
+            className="min-w-0 flex-1 rounded-[var(--radius-element)] border border-border bg-popover px-2 py-1 text-xs text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none disabled:opacity-50"
           />
           <Button
             variant="color"
-            color="green"
+            color={accentColor}
             size="sm"
             disabled={!someStaged || !commitMsg.trim() || committing}
             onClick={handleCommit}
@@ -327,13 +329,13 @@ export default function FileList({
             }
             hoverEffect="scale-glow"
             clickEffect="scale"
-            className="shrink-0 px-2 text-[11px]"
+            className="shrink-0 px-2 text-xs"
           >
             Commit
           </Button>
         </div>
         {commitError && (
-          <p className="mt-1 text-[10px] text-destructive">{commitError}</p>
+          <p className="mt-1 text-2xs text-destructive">{commitError}</p>
         )}
       </div>
     </div>
diff --git a/src/components/Review/MergeBranchDialog.tsx b/src/components/Review/MergeBranchDialog.tsx
index 445cbee..3fd3371 100644
--- a/src/components/Review/MergeBranchDialog.tsx
+++ b/src/components/Review/MergeBranchDialog.tsx
@@ -117,7 +117,7 @@ export default function MergeBranchDialog({
           <div className="flex justify-center">
             <div className="flex flex-col items-center gap-0.5 text-muted-foreground">
               <div className="h-2 w-px bg-border" />
-              <span className="text-[10px] uppercase tracking-wider">
+              <span className="text-2xs uppercase tracking-wider">
                 into
               </span>
               <div className="h-2 w-px bg-border" />
@@ -159,7 +159,7 @@ export default function MergeBranchDialog({
           </div>
 
           {/* Info note */}
-          <p className="text-[11px] leading-relaxed text-muted-foreground">
+          <p className="text-xs leading-relaxed text-muted-foreground">
             This is a local merge operation. The worktree branch will be merged
             into the selected target branch in your main repository.
           </p>
diff --git a/src/components/Sessions/QuickActionBar.tsx b/src/components/Sessions/QuickActionBar.tsx
index 1f393ed..e679713 100644
--- a/src/components/Sessions/QuickActionBar.tsx
+++ b/src/components/Sessions/QuickActionBar.tsx
@@ -81,7 +81,7 @@ export default React.memo(function QuickActionBar({
             className="flex items-center gap-1.5 px-2 py-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors duration-150 cursor-pointer"
           >
             <Icon size={13} />
-            <span className="text-[11px] leading-none whitespace-nowrap">
+            <span className="text-xs leading-none whitespace-nowrap">
               {action.label}
             </span>
           </button>
diff --git a/src/components/Sessions/ResearchCompleteBar.tsx b/src/components/Sessions/ResearchCompleteBar.tsx
index ca173b5..8dc2b10 100644
--- a/src/components/Sessions/ResearchCompleteBar.tsx
+++ b/src/components/Sessions/ResearchCompleteBar.tsx
@@ -122,11 +122,11 @@ export default React.memo(function ResearchCompleteBar({
                   Research complete
                 </span>
                 {mcpSummary ? (
-                  <p className="text-[11px] text-dim-foreground truncate mt-0.5">
+                  <p className="text-xs text-dim-foreground truncate mt-0.5">
                     {mcpSummary}
                   </p>
                 ) : task ? (
-                  <p className="text-[11px] text-muted-foreground truncate mt-0.5">
+                  <p className="text-xs text-muted-foreground truncate mt-0.5">
                     {task.title}
                   </p>
                 ) : null}
@@ -143,7 +143,7 @@ export default React.memo(function ResearchCompleteBar({
                 leftIcon={<ArrowRight className="size-3.5" />}
                 hoverEffect="scale-glow"
                 clickEffect="scale"
-                className="h-7 text-[12px]"
+                className="h-7 text-xs"
               >
                 Continue to Implementation
               </Button>
@@ -152,7 +152,7 @@ export default React.memo(function ResearchCompleteBar({
                 size="sm"
                 onClick={handleCloseSession}
                 leftIcon={<Power className="size-3" />}
-                className="h-7 text-[12px] text-muted-foreground"
+                className="h-7 text-xs text-muted-foreground"
                 title="Close session"
               >
                 Close
diff --git a/src/components/Sessions/SessionDragOverlay.tsx b/src/components/Sessions/SessionDragOverlay.tsx
index 1043cd1..aeb1cdb 100644
--- a/src/components/Sessions/SessionDragOverlay.tsx
+++ b/src/components/Sessions/SessionDragOverlay.tsx
@@ -11,7 +11,7 @@ export default function SessionDragOverlay({ session }: { session: Session }) {
     <div className={`flex items-center gap-2 px-3 py-2 rounded-[var(--radius-panel)] border ${borderAccentColors[accentColor]} bg-popover shadow-lg cursor-grabbing`}>
       <Badge
         variant="secondary"
-        className="h-[18px] w-[18px] p-0 text-[10px] font-semibold rounded-[3px] bg-accent text-dim-foreground"
+        className="h-[18px] w-[18px] p-0 text-2xs font-semibold rounded-[3px] bg-accent text-dim-foreground"
       >
         {MODE_LABEL[session.mode] ?? "?"}
       </Badge>
diff --git a/src/components/Sessions/SessionPane.tsx b/src/components/Sessions/SessionPane.tsx
index a3d9681..85c3f8a 100644
--- a/src/components/Sessions/SessionPane.tsx
+++ b/src/components/Sessions/SessionPane.tsx
@@ -215,7 +215,7 @@ export default React.memo(function SessionPane({
               {displayName}
             </span>
             {showSaved && (
-              <span className="text-[10px] text-success font-medium animate-in fade-in duration-200">
+              <span className="text-2xs text-success font-medium animate-in fade-in duration-200">
                 Saved
               </span>
             )}
@@ -243,14 +243,14 @@ export default React.memo(function SessionPane({
 
         {/* MCP Progress + Status Message */}
         {mcpData?.current_step != null && mcpData.total_steps != null && (
-          <span className="text-[11px] text-dim-foreground overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0">
+          <span className="text-xs text-dim-foreground overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0">
             Step {mcpData.current_step}/{mcpData.total_steps}
             {mcpData.description ? `: ${mcpData.description}` : ""}
             {mcpData.message ? ` — ${mcpData.message}` : ""}
           </span>
         )}
         {mcpData && mcpData.current_step == null && mcpData.message && !isMcpError && !isMcpWaiting && (
-          <span className="text-[11px] overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0 text-muted-foreground">
+          <span className="text-xs overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0 text-muted-foreground">
             {mcpData.message}
           </span>
         )}
@@ -260,7 +260,7 @@ export default React.memo(function SessionPane({
 
         {/* Permission badge (when ACP permission requests are pending) */}
         {showPermissionState && (
-          <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-warning/20 ring-1 ring-warning/30 text-[10px] font-bold text-warning uppercase tracking-wider shrink-0">
+          <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-warning/20 ring-1 ring-warning/30 text-2xs font-bold text-warning uppercase tracking-wider shrink-0">
             Approval needed
           </span>
         )}
@@ -289,12 +289,12 @@ export default React.memo(function SessionPane({
             }}
           />
           {showErrorState && mcpData?.error_message && (
-            <span className="text-[11px] text-destructive font-medium overflow-hidden text-ellipsis whitespace-nowrap" title={mcpData.error_message}>
+            <span className="text-xs text-destructive font-medium overflow-hidden text-ellipsis whitespace-nowrap" title={mcpData.error_message}>
               {mcpData.error_message}
             </span>
           )}
           {showWaitingState && mcpData?.waiting_question && (
-            <span className="text-[11px] text-warning font-medium overflow-hidden text-ellipsis whitespace-nowrap animate-pulse" title={mcpData.waiting_question}>
+            <span className="text-xs text-warning font-medium overflow-hidden text-ellipsis whitespace-nowrap animate-pulse" title={mcpData.waiting_question}>
               {mcpData.waiting_question}
             </span>
           )}
diff --git a/src/components/Sessions/SessionsEmptyState.tsx b/src/components/Sessions/SessionsEmptyState.tsx
index 18150f4..7a428ae 100644
--- a/src/components/Sessions/SessionsEmptyState.tsx
+++ b/src/components/Sessions/SessionsEmptyState.tsx
@@ -41,7 +41,7 @@ export default function SessionsEmptyState({
         <div className="text-base text-foreground mb-1.5">
           No active sessions
         </div>
-        <div className="text-[13px] text-muted-foreground leading-normal mb-4">
+        <div className="text-sm text-muted-foreground leading-normal mb-4">
           Start an agent session or open a plain terminal to get started.
         </div>
         <div className="flex items-center justify-center gap-2">
diff --git a/src/components/Sessions/SessionsToolbar.tsx b/src/components/Sessions/SessionsToolbar.tsx
index 766884a..72a1c9c 100644
--- a/src/components/Sessions/SessionsToolbar.tsx
+++ b/src/components/Sessions/SessionsToolbar.tsx
@@ -64,7 +64,7 @@ const SessionsToolbar = memo(function SessionsToolbar({
 
   return (
     <ViewLayout.Toolbar>
-      <span className="text-[13px] font-medium text-foreground mr-1">
+      <span className="text-sm font-medium text-foreground mr-1">
         Sessions
       </span>
 
@@ -85,6 +85,7 @@ const SessionsToolbar = memo(function SessionsToolbar({
         align="start"
         barRadius="md"
         tabRadius="md"
+        className="p-0"
       >
         {MODES.map((m) => {
           const Icon = m.icon;
@@ -103,7 +104,7 @@ const SessionsToolbar = memo(function SessionsToolbar({
       <Button
         variant="color"
         color={accentColor}
-        size="sm"
+        size="xs"
         disabled={!activeProjectId}
         onClick={onNewSession}
         leftIcon={<Plus className="size-3" />}
@@ -114,7 +115,7 @@ const SessionsToolbar = memo(function SessionsToolbar({
       </Button>
       <Button
         variant="outline"
-        size="sm"
+        size="xs"
         disabled={!activeProjectId}
         onClick={handleStartTerminal}
         leftIcon={<TerminalSquare className="size-3" />}
diff --git a/src/components/Settings/AcpPermissionsTab.tsx b/src/components/Settings/AcpPermissionsTab.tsx
index 1ac3b1f..38d51b8 100644
--- a/src/components/Settings/AcpPermissionsTab.tsx
+++ b/src/components/Settings/AcpPermissionsTab.tsx
@@ -253,7 +253,7 @@ export function AcpPermissionsTab() {
     <div className="space-y-6">
       {/* ── How It Works ── */}
       <div className="rounded-lg bg-muted/20 ring-1 ring-border/30 px-3.5 py-2.5">
-        <p className="text-[11px] text-muted-foreground leading-relaxed">
+        <p className="text-xs text-muted-foreground leading-relaxed">
           When an ACP agent requests file or terminal access, permissions are evaluated in order:{" "}
           <span className="text-dim-foreground font-medium">Trust mode override</span> (autonomous sessions only)
           {" \u2192 "}
@@ -271,15 +271,15 @@ export function AcpPermissionsTab() {
           {rules.length > 0 && (
             <button
               onClick={resetRules}
-              className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-destructive transition-colors"
+              className="flex items-center gap-1 text-xs text-muted-foreground hover:text-destructive transition-colors"
             >
               <RotateCcw size={11} />
               Reset all
             </button>
           )}
         </div>
-        <p className="text-[11px] text-muted-foreground mb-3">
-          Rules with patterns (e.g. <code className="text-[10px] bg-muted/50 px-1 py-0.5 rounded">src/**</code>)
+        <p className="text-xs text-muted-foreground mb-3">
+          Rules with patterns (e.g. <code className="text-2xs bg-muted/50 px-1 py-0.5 rounded">src/**</code>)
           take priority over capability-wide rules. First match wins.
         </p>
 
@@ -299,13 +299,13 @@ export function AcpPermissionsTab() {
                 >
                   <div className="flex items-center gap-2 min-w-0">
                     <CapIcon size={14} className="text-muted-foreground shrink-0" />
-                    <span className="text-[13px] font-medium truncate">
+                    <span className="text-sm font-medium truncate">
                       {capCfg?.label ?? rule.capability}
                     </span>
-                    <code className="text-[11px] text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded truncate max-w-[240px]">
+                    <code className="text-xs text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded truncate max-w-[240px]">
                       {pattern || "*"}
                     </code>
-                    <Badge variant="outline" className={`text-[10px] ${actionCfg.color}`}>
+                    <Badge variant="outline" className={`text-2xs ${actionCfg.color}`}>
                       {actionCfg.label}
                     </Badge>
                   </div>
@@ -320,7 +320,7 @@ export function AcpPermissionsTab() {
             })}
           </div>
         ) : (
-          <p className="text-[11px] text-muted-foreground/60 mb-3">
+          <p className="text-xs text-muted-foreground/60 mb-3">
             No rules configured. The default policy will be used for all requests.
           </p>
         )}
@@ -328,11 +328,11 @@ export function AcpPermissionsTab() {
         {/* Add rule form */}
         <div className="grid grid-cols-[auto_1fr_auto_auto] gap-x-2 gap-y-1">
           {/* Row 1: labels */}
-          <span className="text-[11px] text-muted-foreground">Capability</span>
-          <span className="text-[11px] text-muted-foreground">
+          <span className="text-xs text-muted-foreground">Capability</span>
+          <span className="text-xs text-muted-foreground">
             {patternConfig.label} <span className="text-muted-foreground/40">(optional)</span>
           </span>
-          <span className="text-[11px] text-muted-foreground">Action</span>
+          <span className="text-xs text-muted-foreground">Action</span>
           <span />
 
           {/* Row 2: controls */}
@@ -404,7 +404,7 @@ export function AcpPermissionsTab() {
       {/* ── Default Policy ── */}
       <section>
         <h3 className={sectionHeadingClass}>Default Policy</h3>
-        <p className="text-[11px] text-muted-foreground mb-2">
+        <p className="text-xs text-muted-foreground mb-2">
           Fallback action when no rule matches a permission request.
         </p>
         <Select
@@ -430,7 +430,7 @@ export function AcpPermissionsTab() {
       {/* ── Autonomous Sessions (Trust Mode) ── */}
       <section>
         <h3 className={sectionHeadingClass}>Autonomous Sessions</h3>
-        <p className="text-[11px] text-muted-foreground mb-2">
+        <p className="text-xs text-muted-foreground mb-2">
           Override policy for sessions launched automatically by continuous mode.
           This takes priority over rules and the default policy.
         </p>
@@ -451,7 +451,7 @@ export function AcpPermissionsTab() {
           </SelectContent>
         </Select>
         {/* Description for selected option */}
-        <p className="text-[10px] text-muted-foreground/70 mt-1.5">
+        <p className="text-2xs text-muted-foreground/70 mt-1.5">
           {TRUST_MODE_OPTIONS.find((o) => o.value === trustModePolicy)?.description}
         </p>
       </section>
@@ -459,7 +459,7 @@ export function AcpPermissionsTab() {
       {/* ── Permission Timeout ── */}
       <section>
         <h3 className={sectionHeadingClass}>Prompt Timeout</h3>
-        <p className="text-[11px] text-muted-foreground mb-2">
+        <p className="text-xs text-muted-foreground mb-2">
           When a permission dialog appears, how long to wait for your response before auto-denying.
         </p>
         <div className="flex items-center gap-2">
@@ -472,7 +472,7 @@ export function AcpPermissionsTab() {
             onChange={(e) => updatePermissionTimeout(parseInt(e.target.value, 10) || 120)}
             className={`${inputClass} w-24 h-8`}
           />
-          <span className="text-[11px] text-muted-foreground">seconds</span>
+          <span className="text-xs text-muted-foreground">seconds</span>
         </div>
       </section>
 
@@ -491,20 +491,20 @@ export function AcpPermissionsTab() {
               return (
                 <div
                   key={entry.id}
-                  className="flex items-center gap-2 px-2 py-1 text-[11px] text-muted-foreground rounded-md hover:bg-muted/30 transition-colors"
+                  className="flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground rounded-md hover:bg-muted/30 transition-colors"
                 >
                   <span
                     className={`size-1.5 rounded-full shrink-0 ${
-                      isApproved ? "bg-green-500" : "bg-red-500"
+                      isApproved ? "bg-success" : "bg-destructive"
                     }`}
                   />
                   <span className="font-medium truncate w-[72px] shrink-0">
                     {capCfg?.label ?? entry.capability}
                   </span>
-                  <code className="truncate flex-1 text-[10px] text-muted-foreground/60 font-mono">
+                  <code className="truncate flex-1 text-2xs text-muted-foreground/60 font-mono">
                     {entry.detail || "\u2014"}
                   </code>
-                  <span className={`shrink-0 text-[10px] ${isApproved ? "text-green-500" : "text-red-500"}`}>
+                  <span className={`shrink-0 text-2xs ${isApproved ? "text-green-500" : "text-red-500"}`}>
                     {isAuto ? "auto-" : ""}
                     {isApproved ? "approved" : "denied"}
                   </span>
@@ -513,7 +513,7 @@ export function AcpPermissionsTab() {
             })}
           </div>
         ) : (
-          <p className="text-[11px] text-muted-foreground/60">
+          <p className="text-xs text-muted-foreground/60">
             No permission decisions recorded yet. Decisions will appear here once an ACP session runs.
           </p>
         )}
diff --git a/src/components/Settings/AgentsTab.tsx b/src/components/Settings/AgentsTab.tsx
index c5dece8..9e4112f 100644
--- a/src/components/Settings/AgentsTab.tsx
+++ b/src/components/Settings/AgentsTab.tsx
@@ -175,10 +175,10 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
 
         {/* Name + command */}
         <div className="flex flex-col flex-1 min-w-0">
-          <span className="text-[13px] font-medium text-foreground">
+          <span className="text-sm font-medium text-foreground">
             {agent.display_name}
           </span>
-          <span className="text-[11px] text-muted-foreground font-mono truncate">
+          <span className="text-xs text-muted-foreground font-mono truncate">
             {agent.command}
           </span>
         </div>
@@ -188,7 +188,7 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
           <span
             className={`size-1.5 rounded-full shrink-0 ${agent.installed ? "bg-success" : "bg-destructive"}`}
           />
-          <span className={`text-[11px] ${agent.installed ? "text-success" : "text-destructive"}`}>
+          <span className={`text-xs ${agent.installed ? "text-success" : "text-destructive"}`}>
             {agent.installed ? "Detected" : "Not found"}
           </span>
 
@@ -198,7 +198,7 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
               target="_blank"
               rel="noopener noreferrer"
               onClick={(e) => e.stopPropagation()}
-              className="flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-medium text-primary transition-colors hover:bg-primary/20"
+              className="flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary transition-colors hover:bg-primary/20"
             >
               <Download size={10} />
               Install
@@ -219,7 +219,7 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
         <div className="border-t border-border/30 px-3.5 py-2.5">
           <div className="flex items-center gap-2 rounded-md bg-muted/40 px-2.5 py-1.5">
             <Terminal size={12} className="shrink-0 text-muted-foreground" />
-            <code className="flex-1 select-all text-[11px] text-dim-foreground font-mono">
+            <code className="flex-1 select-all text-xs text-dim-foreground font-mono">
               {agent.cli_install_hint}
             </code>
             {agent.cli_install_url && (
@@ -244,12 +244,12 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
           {permInfo && (
             <div>
               <div className="flex items-center gap-2 mb-1">
-                <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                   Permissions
                 </span>
                 <Badge
                   variant="destructive"
-                  className="text-[9px] uppercase tracking-wide px-1.5 py-0"
+                  className="text-2xs uppercase tracking-wide px-1.5 py-0"
                 >
                   Security
                 </Badge>
@@ -265,7 +265,7 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
 
           {/* Custom flags */}
           <div>
-            <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground block mb-1.5">
+            <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground block mb-1.5">
               Custom Flags
             </span>
             <InputGroup>
@@ -279,7 +279,7 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
                 placeholder={"e.g., --verbose --model opus"}
               />
             </InputGroup>
-            <div className="text-[10px] text-muted-foreground mt-1">
+            <div className="text-2xs text-muted-foreground mt-1">
               Additional flags appended to every {agent.display_name} session.
             </div>
           </div>
@@ -287,7 +287,7 @@ function AgentCard({ agent }: { agent: AgentInfo }) {
           {/* Command preview + reset */}
           <div className="flex items-center gap-2 rounded-md bg-muted/30 px-2.5 py-2">
             <TerminalSquare size={13} className="shrink-0 text-muted-foreground" />
-            <code className="flex-1 text-[11px] font-mono text-dim-foreground truncate select-all">
+            <code className="flex-1 text-xs font-mono text-dim-foreground truncate select-all">
               {commandPreview}
             </code>
             <Button
diff --git a/src/components/Settings/GeneralTab.tsx b/src/components/Settings/GeneralTab.tsx
index 68ff682..0ca6ed7 100644
--- a/src/components/Settings/GeneralTab.tsx
+++ b/src/components/Settings/GeneralTab.tsx
@@ -131,7 +131,7 @@ function AppearancePanel() {
                       className="w-full h-8 rounded-[var(--radius-element)] border border-border"
                       style={{ background: m.gradient }}
                     />
-                    <div className="text-[13px] font-medium text-foreground">
+                    <div className="text-sm font-medium text-foreground">
                       {m.label}
                     </div>
                     {active && (
@@ -298,15 +298,15 @@ function UpdatesPanel() {
       {/* Version + Check button */}
       <div className="flex items-center justify-between p-2.5 rounded-lg bg-muted/20 ring-1 ring-border/30">
         <div>
-          <div className="text-[13px] font-medium text-foreground">
+          <div className="text-sm font-medium text-foreground">
             Current version
           </div>
-          <div className="text-[11px] text-muted-foreground mt-0.5">
+          <div className="text-xs text-muted-foreground mt-0.5">
             {appVersion || "..."}
           </div>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-[10px] text-muted-foreground">
+          <span className="text-2xs text-muted-foreground">
             {formatLastChecked(lastCheckedAt)}
           </span>
           <button
@@ -335,7 +335,7 @@ function UpdatesPanel() {
       {/* Check interval */}
       {autoCheckEnabled && (
         <div className="flex items-center justify-between p-2.5 rounded-lg bg-muted/20 ring-1 ring-border/30">
-          <div className="text-[13px] text-foreground">Check frequency</div>
+          <div className="text-sm text-foreground">Check frequency</div>
           <Select
             value={String(checkIntervalHours)}
             onValueChange={(v) => v && setCheckIntervalHours(Number(v))}
@@ -375,7 +375,7 @@ function UpdatesPanel() {
 
       {advancedOpen && (
         <div className="flex flex-col gap-2 p-2.5 rounded-lg bg-muted/20 ring-1 ring-border/30">
-          <div className="text-[11px] text-muted-foreground">
+          <div className="text-xs text-muted-foreground">
             Custom update endpoint URL
           </div>
           <div className="flex gap-2">
@@ -389,7 +389,7 @@ function UpdatesPanel() {
             />
             <button
               onClick={handleEndpointReset}
-              className="px-2 py-1 text-[11px] rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+              className="px-2 py-1 text-xs rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
             >
               Reset
             </button>
@@ -415,10 +415,10 @@ function SystemPanel() {
     <div className="flex flex-col gap-3">
       <div className="flex items-center justify-between p-2.5 rounded-lg bg-muted/20 ring-1 ring-border/30">
         <div>
-          <div className="text-[13px] font-medium text-foreground">
+          <div className="text-sm font-medium text-foreground">
             Log files
           </div>
-          <div className="text-[11px] text-muted-foreground mt-0.5">
+          <div className="text-xs text-muted-foreground mt-0.5">
             Open the folder containing backend log files for debugging.
           </div>
         </div>
diff --git a/src/components/Settings/GitHubTab.tsx b/src/components/Settings/GitHubTab.tsx
index 0192a7b..6406f2b 100644
--- a/src/components/Settings/GitHubTab.tsx
+++ b/src/components/Settings/GitHubTab.tsx
@@ -48,10 +48,10 @@ function AuthStatusCard({
             <Shield className="size-4 text-muted-foreground" />
           </div>
           <div className="flex-1 min-w-0">
-            <div className="text-[13px] font-medium text-foreground">
+            <div className="text-sm font-medium text-foreground">
               Checking authentication...
             </div>
-            <div className="text-[11px] text-muted-foreground mt-0.5">
+            <div className="text-xs text-muted-foreground mt-0.5">
               Verifying GitHub CLI status
             </div>
           </div>
@@ -70,10 +70,10 @@ function AuthStatusCard({
         <div
           className={`flex items-center justify-center size-9 rounded-lg shrink-0 ${
             isOk
-              ? "bg-[color-mix(in_oklch,var(--success)_12%,transparent)]"
+              ? "bg-success/12"
               : hasWarning
-                ? "bg-[color-mix(in_oklch,var(--warning)_12%,transparent)]"
-                : "bg-[color-mix(in_oklch,var(--destructive)_12%,transparent)]"
+                ? "bg-warning/12"
+                : "bg-destructive/12"
           }`}
         >
           {isOk ? (
@@ -85,7 +85,7 @@ function AuthStatusCard({
           )}
         </div>
         <div className="flex-1 min-w-0">
-          <div className="text-[13px] font-medium text-foreground flex items-center gap-1.5">
+          <div className="text-sm font-medium text-foreground flex items-center gap-1.5">
             {isOk
               ? "Authenticated"
               : hasWarning
@@ -94,7 +94,7 @@ function AuthStatusCard({
                   ? "GitHub CLI not installed"
                   : "Not authenticated"}
           </div>
-          <div className="text-[11px] text-muted-foreground mt-0.5">
+          <div className="text-xs text-muted-foreground mt-0.5">
             {isOk && authStatus.username && (
               <span className="inline-flex items-center gap-1">
                 <User className="size-3" />
@@ -114,7 +114,7 @@ function AuthStatusCard({
             {!authStatus.installed && (
               <span>
                 Install the{" "}
-                <code className="text-[10px] bg-muted px-1 py-0.5 rounded">
+                <code className="text-2xs bg-muted px-1 py-0.5 rounded">
                   gh
                 </code>{" "}
                 CLI to enable GitHub features
@@ -123,7 +123,7 @@ function AuthStatusCard({
             {authStatus.installed && !authStatus.authenticated && (
               <span>
                 Run{" "}
-                <code className="text-[10px] bg-muted px-1 py-0.5 rounded">
+                <code className="text-2xs bg-muted px-1 py-0.5 rounded">
                   gh auth login
                 </code>{" "}
                 to authenticate
@@ -227,7 +227,7 @@ function LabelMappingTable({
           {repoLabels.length > 0 ? "Refresh Labels" : "Fetch Labels"}
         </Button>
         {repoLabels.length > 0 && (
-          <span className="text-[11px] text-muted-foreground">
+          <span className="text-xs text-muted-foreground">
             {repoLabels.length} labels available
           </span>
         )}
@@ -260,7 +260,7 @@ function LabelMappingTable({
 
             return (
               <div key={status} className="flex items-center gap-3">
-                <span className="text-[12px] text-dim-foreground w-24 shrink-0 capitalize">
+                <span className="text-xs text-dim-foreground w-24 shrink-0 capitalize">
                   {status}
                 </span>
                 <div className="flex-1 max-w-64">
@@ -309,7 +309,7 @@ function LabelMappingTable({
       )}
 
       {repoLabels.length === 0 && (
-        <div className="text-[11px] text-muted-foreground py-2">
+        <div className="text-xs text-muted-foreground py-2">
           Click &quot;Fetch Labels&quot; to load available labels from the
           repository, or &quot;Create default labels&quot; to set up a
           standard label set.
@@ -527,10 +527,10 @@ export function GitHubTab() {
     <div className="flex flex-col gap-5">
       {/* Project context */}
       <div className="flex items-center gap-2">
-        <span className="text-[11px] text-muted-foreground">
+        <span className="text-xs text-muted-foreground">
           Settings for
         </span>
-        <span className="text-[13px] font-medium text-foreground">
+        <span className="text-sm font-medium text-foreground">
           {activeProject.name}
         </span>
       </div>
@@ -624,7 +624,7 @@ export function GitHubTab() {
           Manual Sync Defaults
         </div>
 
-        <p className="text-[11px] text-muted-foreground mb-3">
+        <p className="text-xs text-muted-foreground mb-3">
           Pre-checked options when opening the Sync to GitHub dialog.
         </p>
 
@@ -696,7 +696,7 @@ export function GitHubTab() {
         )}
 
         {!syncEnabled && (
-          <div className="text-[11px] text-muted-foreground mt-1">
+          <div className="text-xs text-muted-foreground mt-1">
             Enable GitHub Sync above to configure label mapping.
           </div>
         )}
diff --git a/src/components/Settings/GitWorktreesTab.tsx b/src/components/Settings/GitWorktreesTab.tsx
index f049ad3..aeabf78 100644
--- a/src/components/Settings/GitWorktreesTab.tsx
+++ b/src/components/Settings/GitWorktreesTab.tsx
@@ -122,7 +122,7 @@ export function GitWorktreesTab() {
       <div className={panelClass}>
         <div className={sectionHeadingClass}>Branch Naming</div>
         <div className="flex flex-col gap-1.5">
-          <span className="text-[12px] text-dim-foreground font-medium">
+          <span className="text-xs text-dim-foreground font-medium">
             Branch pattern
           </span>
           <InputGroup>
@@ -137,7 +137,7 @@ export function GitWorktreesTab() {
               placeholder="feat/{{task_id}}-{{task_slug}}"
             />
           </InputGroup>
-          <span className="text-[10px] text-muted-foreground">
+          <span className="text-2xs text-muted-foreground">
             Template for branch names when creating worktrees. Variables:{" "}
             {"{{task_id}}"}, {"{{task_slug}}"}
           </span>
@@ -148,7 +148,7 @@ export function GitWorktreesTab() {
       <div className={panelClass}>
         <div className={sectionHeadingClass}>Session Configuration</div>
         <div className="flex flex-col gap-1.5">
-          <span className="text-[12px] text-dim-foreground font-medium">
+          <span className="text-xs text-dim-foreground font-medium">
             Instruction file
           </span>
           <InputGroup>
@@ -165,7 +165,7 @@ export function GitWorktreesTab() {
               placeholder="CLAUDE.md (auto-detected)"
             />
           </InputGroup>
-          <span className="text-[10px] text-muted-foreground">
+          <span className="text-2xs text-muted-foreground">
             Relative path from project root. Injected into agent session prompts.
           </span>
         </div>
diff --git a/src/components/Settings/ProjectSettingsDialog.tsx b/src/components/Settings/ProjectSettingsDialog.tsx
index 40b207f..4513efd 100644
--- a/src/components/Settings/ProjectSettingsDialog.tsx
+++ b/src/components/Settings/ProjectSettingsDialog.tsx
@@ -120,9 +120,9 @@ function ToggleRow({
       className={`flex items-center justify-between gap-3 py-1.5 ${disabled ? "opacity-40 pointer-events-none" : "cursor-pointer"}`}
     >
       <div className="flex flex-col min-w-0">
-        <span className="text-[13px] text-foreground">{label}</span>
+        <span className="text-sm text-foreground">{label}</span>
         {description && (
-          <span className="text-[11px] text-muted-foreground mt-0.5">
+          <span className="text-xs text-muted-foreground mt-0.5">
             {description}
           </span>
         )}
@@ -148,7 +148,7 @@ function ToggleRow({
 }
 
 const sectionHeadingClass =
-  "text-[11px] font-medium uppercase tracking-wider text-muted-foreground";
+  "text-xs font-medium uppercase tracking-wider text-muted-foreground";
 
 // ── Project Settings Dialog ──
 
@@ -434,7 +434,7 @@ export function ProjectSettingsDialog({
             <div className="grid grid-cols-[1fr_1fr] gap-4">
               {/* Icon */}
               <div className="flex flex-col gap-2">
-                <span className="text-[12px] text-dim-foreground font-medium">
+                <span className="text-xs text-dim-foreground font-medium">
                   Icon
                 </span>
                 <div className="flex items-center gap-2">
@@ -451,7 +451,7 @@ export function ProjectSettingsDialog({
                         size="sm"
                         onClick={handlePickIcon}
                         leftIcon={<Image className="size-3" />}
-                        className="h-6 px-2 text-[11px]"
+                        className="h-6 px-2 text-xs"
                       >
                         Choose SVG
                       </Button>
@@ -461,13 +461,13 @@ export function ProjectSettingsDialog({
                           size="sm"
                           onClick={handleClearIcon}
                           leftIcon={<X className="size-3" />}
-                          className="h-6 px-1.5 text-[11px]"
+                          className="h-6 px-1.5 text-xs"
                         >
                           Reset
                         </Button>
                       )}
                     </div>
-                    <span className="text-[10px] text-muted-foreground truncate max-w-48">
+                    <span className="text-2xs text-muted-foreground truncate max-w-48">
                       {project.icon_path
                         ? project.icon_path.split(/[\\/]/).pop()
                         : "Auto-detected from project"}
@@ -478,7 +478,7 @@ export function ProjectSettingsDialog({
 
               {/* Color */}
               <div className="flex flex-col gap-2">
-                <span className="text-[12px] text-dim-foreground font-medium">
+                <span className="text-xs text-dim-foreground font-medium">
                   Color
                 </span>
                 <div className="flex flex-wrap gap-1.5">
@@ -514,7 +514,7 @@ export function ProjectSettingsDialog({
             {/* Agent + Model row */}
             <div className="grid grid-cols-2 gap-3">
               <div className="flex flex-col gap-1.5">
-                <span className="text-[12px] text-dim-foreground font-medium">
+                <span className="text-xs text-dim-foreground font-medium">
                   Agent
                 </span>
                 <Select
@@ -549,7 +549,7 @@ export function ProjectSettingsDialog({
               </div>
 
               <div className="flex flex-col gap-1.5">
-                <span className="text-[12px] text-dim-foreground font-medium">
+                <span className="text-xs text-dim-foreground font-medium">
                   Model
                 </span>
                 <Select
@@ -581,7 +581,7 @@ export function ProjectSettingsDialog({
 
             {/* Transport */}
             <div className="flex flex-col gap-1.5">
-              <span className="text-[12px] text-dim-foreground font-medium">
+              <span className="text-xs text-dim-foreground font-medium">
                 Transport
               </span>
               <div className="flex rounded-[var(--radius-element)] bg-background/50 p-0.5 ring-1 ring-border/40">
@@ -610,7 +610,7 @@ export function ProjectSettingsDialog({
                   Chat
                 </button>
               </div>
-              <span className="text-[10px] text-muted-foreground">
+              <span className="text-2xs text-muted-foreground">
                 Pre-selects the transport mode when launching new sessions
               </span>
             </div>
@@ -623,7 +623,7 @@ export function ProjectSettingsDialog({
             {/* Branch + Instruction in 2-col */}
             <div className="grid grid-cols-2 gap-3">
               <div className="flex flex-col gap-1.5">
-                <span className="text-[12px] text-dim-foreground font-medium">
+                <span className="text-xs text-dim-foreground font-medium">
                   Branch pattern
                 </span>
                 <InputGroup>
@@ -638,13 +638,13 @@ export function ProjectSettingsDialog({
                     placeholder="feat/{{task_id}}-{{task_slug}}"
                   />
                 </InputGroup>
-                <span className="text-[10px] text-muted-foreground">
+                <span className="text-2xs text-muted-foreground">
                   Variables: {"{{task_id}}"}, {"{{task_slug}}"}
                 </span>
               </div>
 
               <div className="flex flex-col gap-1.5">
-                <span className="text-[12px] text-dim-foreground font-medium">
+                <span className="text-xs text-dim-foreground font-medium">
                   Instruction file
                 </span>
                 <InputGroup>
@@ -661,7 +661,7 @@ export function ProjectSettingsDialog({
                     placeholder="CLAUDE.md (auto-detected)"
                   />
                 </InputGroup>
-                <span className="text-[10px] text-muted-foreground">
+                <span className="text-2xs text-muted-foreground">
                   Relative path from project root
                 </span>
               </div>
@@ -693,7 +693,7 @@ export function ProjectSettingsDialog({
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-6 px-2 text-[11px]"
+                className="h-6 px-2 text-xs"
                 onClick={addPriority}
               >
                 <Plus className="size-3 mr-1" />
@@ -712,7 +712,7 @@ export function ProjectSettingsDialog({
                     {/* Reorder buttons */}
                     <div className="flex flex-col -my-1">
                       <button
-                        className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-[9px]"
+                        className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-2xs"
                         onClick={() => movePriority(i, -1)}
                         disabled={i === 0}
                         title="Move up"
@@ -720,7 +720,7 @@ export function ProjectSettingsDialog({
                         ▲
                       </button>
                       <button
-                        className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-[9px]"
+                        className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-2xs"
                         onClick={() => movePriority(i, 1)}
                         disabled={i === priorities.length - 1}
                         title="Move down"
@@ -737,7 +737,7 @@ export function ProjectSettingsDialog({
 
                     {/* ID */}
                     <Input
-                      className="!h-7 w-14 text-[11px] font-mono px-1.5 py-0"
+                      className="!h-7 w-14 text-xs font-mono px-1.5 py-0"
                       value={p.id}
                       onChange={(e) => updatePriority(i, "id", e.target.value)}
                       placeholder="ID"
@@ -745,7 +745,7 @@ export function ProjectSettingsDialog({
 
                     {/* Label */}
                     <Input
-                      className="!h-7 flex-1 text-[11px] px-1.5 py-0"
+                      className="!h-7 flex-1 text-xs px-1.5 py-0"
                       value={p.label}
                       onChange={(e) => updatePriority(i, "label", e.target.value)}
                       placeholder="Label"
@@ -757,7 +757,7 @@ export function ProjectSettingsDialog({
                       onValueChange={(v) => { if (v) updatePriority(i, "color", v); }}
                       items={PRIORITY_COLORS.map((c) => ({ value: c.value, label: c.label }))}
                     >
-                      <SelectTrigger className="!h-7 w-[100px] text-[11px] px-1.5 py-0">
+                      <SelectTrigger className="!h-7 w-[100px] text-xs px-1.5 py-0">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -792,7 +792,7 @@ export function ProjectSettingsDialog({
               })}
             </div>
 
-            <span className="text-[10px] text-muted-foreground">
+            <span className="text-2xs text-muted-foreground">
               Define priority levels for this project. ID is stored in task files, label is shown in the UI.
             </span>
           </div>
@@ -800,10 +800,10 @@ export function ProjectSettingsDialog({
           {/* ── Danger Zone ── */}
           <div className="rounded-lg ring-1 ring-destructive/20 p-4 flex items-center justify-between gap-4">
             <div className="min-w-0">
-              <div className="text-[12px] font-medium text-destructive">
+              <div className="text-xs font-medium text-destructive">
                 Delete Project
               </div>
-              <div className="text-[11px] text-muted-foreground mt-0.5">
+              <div className="text-xs text-muted-foreground mt-0.5">
                 Remove from Faber. Files on disk are not affected.
               </div>
             </div>
diff --git a/src/components/Settings/ProjectTab.tsx b/src/components/Settings/ProjectTab.tsx
index 655dcc0..d94e100 100644
--- a/src/components/Settings/ProjectTab.tsx
+++ b/src/components/Settings/ProjectTab.tsx
@@ -325,7 +325,7 @@ export function ProjectTab() {
         <div className="grid grid-cols-[1fr_1fr] gap-4">
           {/* Icon */}
           <div className="flex flex-col gap-2">
-            <span className="text-[12px] text-dim-foreground font-medium">
+            <span className="text-xs text-dim-foreground font-medium">
               Icon
             </span>
             <div className="flex items-center gap-2">
@@ -342,7 +342,7 @@ export function ProjectTab() {
                     size="sm"
                     onClick={handlePickIcon}
                     leftIcon={<Image className="size-3" />}
-                    className="h-6 px-2 text-[11px]"
+                    className="h-6 px-2 text-xs"
                   >
                     Choose SVG
                   </Button>
@@ -352,13 +352,13 @@ export function ProjectTab() {
                       size="sm"
                       onClick={handleClearIcon}
                       leftIcon={<X className="size-3" />}
-                      className="h-6 px-1.5 text-[11px]"
+                      className="h-6 px-1.5 text-xs"
                     >
                       Reset
                     </Button>
                   )}
                 </div>
-                <span className="text-[10px] text-muted-foreground truncate max-w-48">
+                <span className="text-2xs text-muted-foreground truncate max-w-48">
                   {project.icon_path
                     ? project.icon_path.split(/[\\/]/).pop()
                     : "Auto-detected from project"}
@@ -369,7 +369,7 @@ export function ProjectTab() {
 
           {/* Color */}
           <div className="flex flex-col gap-2">
-            <span className="text-[12px] text-dim-foreground font-medium">
+            <span className="text-xs text-dim-foreground font-medium">
               Color
             </span>
             <div className="flex flex-wrap gap-1.5">
@@ -405,7 +405,7 @@ export function ProjectTab() {
         {/* Agent + Model row */}
         <div className="grid grid-cols-2 gap-3">
           <div className="flex flex-col gap-1.5">
-            <span className="text-[12px] text-dim-foreground font-medium">
+            <span className="text-xs text-dim-foreground font-medium">
               Agent
             </span>
             <Select
@@ -440,7 +440,7 @@ export function ProjectTab() {
           </div>
 
           <div className="flex flex-col gap-1.5">
-            <span className="text-[12px] text-dim-foreground font-medium">
+            <span className="text-xs text-dim-foreground font-medium">
               Model
             </span>
             <Select
@@ -472,7 +472,7 @@ export function ProjectTab() {
 
         {/* Transport */}
         <div className="flex flex-col gap-1.5">
-          <span className="text-[12px] text-dim-foreground font-medium">
+          <span className="text-xs text-dim-foreground font-medium">
             Transport
           </span>
           <div className="flex rounded-[var(--radius-element)] bg-background/50 p-0.5 ring-1 ring-border/40">
@@ -501,7 +501,7 @@ export function ProjectTab() {
               Chat
             </button>
           </div>
-          <span className="text-[10px] text-muted-foreground">
+          <span className="text-2xs text-muted-foreground">
             Pre-selects the transport mode when launching new sessions
           </span>
         </div>
@@ -528,7 +528,7 @@ export function ProjectTab() {
           <Button
             variant="ghost"
             size="sm"
-            className="h-6 px-2 text-[11px]"
+            className="h-6 px-2 text-xs"
             onClick={addPriority}
           >
             <Plus className="size-3 mr-1" />
@@ -547,7 +547,7 @@ export function ProjectTab() {
                 {/* Reorder buttons */}
                 <div className="flex flex-col -my-1">
                   <button
-                    className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-[9px]"
+                    className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-2xs"
                     onClick={() => movePriority(i, -1)}
                     disabled={i === 0}
                     title="Move up"
@@ -555,7 +555,7 @@ export function ProjectTab() {
                     ▲
                   </button>
                   <button
-                    className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-[9px]"
+                    className="text-muted-foreground hover:text-foreground disabled:opacity-30 p-0 leading-none text-2xs"
                     onClick={() => movePriority(i, 1)}
                     disabled={i === priorities.length - 1}
                     title="Move down"
@@ -572,7 +572,7 @@ export function ProjectTab() {
 
                 {/* ID */}
                 <Input
-                  className="!h-7 w-14 text-[11px] font-mono px-1.5 py-0"
+                  className="!h-7 w-14 text-xs font-mono px-1.5 py-0"
                   value={p.id}
                   onChange={(e) => updatePriority(i, "id", e.target.value)}
                   placeholder="ID"
@@ -580,7 +580,7 @@ export function ProjectTab() {
 
                 {/* Label */}
                 <Input
-                  className="!h-7 flex-1 text-[11px] px-1.5 py-0"
+                  className="!h-7 flex-1 text-xs px-1.5 py-0"
                   value={p.label}
                   onChange={(e) => updatePriority(i, "label", e.target.value)}
                   placeholder="Label"
@@ -592,7 +592,7 @@ export function ProjectTab() {
                   onValueChange={(v) => { if (v) updatePriority(i, "color", v); }}
                   items={PRIORITY_COLORS.map((c) => ({ value: c.value, label: c.label }))}
                 >
-                  <SelectTrigger className="!h-7 w-[100px] text-[11px] px-1.5 py-0">
+                  <SelectTrigger className="!h-7 w-[100px] text-xs px-1.5 py-0">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -627,7 +627,7 @@ export function ProjectTab() {
           })}
         </div>
 
-        <span className="text-[10px] text-muted-foreground">
+        <span className="text-2xs text-muted-foreground">
           Define priority levels for this project. ID is stored in task files, label is shown in the UI.
         </span>
       </div>
@@ -635,10 +635,10 @@ export function ProjectTab() {
       {/* ── Danger Zone ── */}
       <div className="rounded-lg ring-1 ring-destructive/20 p-4 flex items-center justify-between gap-4">
         <div className="min-w-0">
-          <div className="text-[12px] font-medium text-destructive">
+          <div className="text-xs font-medium text-destructive">
             Delete Project
           </div>
-          <div className="text-[11px] text-muted-foreground mt-0.5">
+          <div className="text-xs text-muted-foreground mt-0.5">
             Remove from Faber. Files on disk are not affected.
           </div>
         </div>
diff --git a/src/components/Settings/ProjectsTab.tsx b/src/components/Settings/ProjectsTab.tsx
index b67dead..47abf48 100644
--- a/src/components/Settings/ProjectsTab.tsx
+++ b/src/components/Settings/ProjectsTab.tsx
@@ -80,10 +80,10 @@ function ProjectRow({
 
       {/* Name + path */}
       <div className="flex flex-col min-w-0 flex-1">
-        <span className="text-[13px] font-medium text-foreground truncate">
+        <span className="text-sm font-medium text-foreground truncate">
           {project.name}
         </span>
-        <span className="text-[11px] text-muted-foreground truncate">
+        <span className="text-xs text-muted-foreground truncate">
           {project.path}
         </span>
       </div>
@@ -114,7 +114,7 @@ function ProjectRow({
             <Button
               variant="ghost"
               size="sm"
-              className="h-6 px-2 text-[11px]"
+              className="h-6 px-2 text-xs"
               onClick={() => setConfirmDelete(false)}
             >
               Cancel
@@ -122,7 +122,7 @@ function ProjectRow({
             <Button
               variant="destructive"
               size="sm"
-              className="h-6 px-2 text-[11px]"
+              className="h-6 px-2 text-xs"
               onClick={onDelete}
             >
               Delete
@@ -191,14 +191,14 @@ export function ManageProjectsTab() {
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="text-[13px] text-muted-foreground">
+      <div className="text-sm text-muted-foreground">
         Show or hide projects in the sidebar. Use the{" "}
         <span className="text-dim-foreground font-medium">...</span> menu on
         each project in the sidebar to access its settings.
       </div>
 
       {sorted.length === 0 ? (
-        <div className="text-[13px] text-muted-foreground py-6 text-center">
+        <div className="text-sm text-muted-foreground py-6 text-center">
           No projects added yet. Add a project from the sidebar to get started.
         </div>
       ) : (
diff --git a/src/components/Settings/PromptsTab.tsx b/src/components/Settings/PromptsTab.tsx
index 433d85f..60207ff 100644
--- a/src/components/Settings/PromptsTab.tsx
+++ b/src/components/Settings/PromptsTab.tsx
@@ -127,13 +127,13 @@ function SessionPromptRow({ template, onSave }: { template: PromptTemplate; onSa
         className="w-full flex items-center gap-3 px-3 py-2.5 cursor-pointer hover:bg-accent/40 transition-colors"
       >
         <Icon size={15} className="text-muted-foreground shrink-0" />
-        <span className="text-[13px] font-medium text-foreground">{template.label}</span>
+        <span className="text-sm font-medium text-foreground">{template.label}</span>
         {template.session_mode && (
-          <Badge variant="secondary" className="text-[10px]">
+          <Badge variant="secondary" className="text-2xs">
             {template.session_mode}
           </Badge>
         )}
-        <Badge variant="outline" className="text-[10px] text-muted-foreground ml-auto mr-2">
+        <Badge variant="outline" className="text-2xs text-muted-foreground ml-auto mr-2">
           Protected
         </Badge>
         <ChevronDown
@@ -152,17 +152,17 @@ function SessionPromptRow({ template, onSave }: { template: PromptTemplate; onSa
               setDirty(true);
             }}
             rows={4}
-            className="text-[13px] font-mono"
+            className="text-sm font-mono"
           />
 
           {/* Variable reference */}
           <div className="rounded-md bg-popover/60 ring-1 ring-border/30 px-3 py-2">
-            <div className="text-[11px] font-medium text-muted-foreground mb-1.5">
+            <div className="text-xs font-medium text-muted-foreground mb-1.5">
               Available variables
             </div>
             <div className="flex flex-col gap-0.5">
               {relevantVars.map((v) => (
-                <div key={v.name} className="flex items-baseline gap-2 text-[11px]">
+                <div key={v.name} className="flex items-baseline gap-2 text-xs">
                   <code className="text-primary font-mono">{`{{${v.name}}}`}</code>
                   <span className="text-muted-foreground">{v.description}</span>
                 </div>
@@ -229,15 +229,15 @@ function QuickActionRow({
           className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer"
         >
           <Icon size={15} className="text-muted-foreground shrink-0" />
-          <span className="text-[13px] font-medium text-foreground truncate">
+          <span className="text-sm font-medium text-foreground truncate">
             {template.label}
           </span>
           {template.builtin && (
-            <Badge variant="secondary" className="text-[10px] shrink-0">
+            <Badge variant="secondary" className="text-2xs shrink-0">
               Built-in
             </Badge>
           )}
-          <span className="text-[11px] text-muted-foreground truncate flex-1 text-left">
+          <span className="text-xs text-muted-foreground truncate flex-1 text-left">
             {template.prompt.length > 60
               ? template.prompt.slice(0, 60) + "..."
               : template.prompt}
@@ -245,7 +245,7 @@ function QuickActionRow({
         </button>
 
         <div className="flex items-center gap-2 shrink-0">
-          <label className="flex items-center gap-1.5 text-[11px] text-muted-foreground cursor-pointer" title="Show as quick action button on session panes">
+          <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer" title="Show as quick action button on session panes">
             <Checkbox
               checked={editedQuickAction}
               onCheckedChange={(checked) => {
@@ -281,28 +281,28 @@ function QuickActionRow({
         <div className="border-t border-border px-3 py-3 flex flex-col gap-3">
           {/* Label */}
           <div>
-            <label className="text-[11px] text-muted-foreground mb-1 block">Label</label>
+            <label className="text-xs text-muted-foreground mb-1 block">Label</label>
             <input
               value={editedLabel}
               onChange={(e) => { setEditedLabel(e.target.value); setDirty(true); }}
-              className="w-full px-2.5 py-1.5 text-[13px] bg-transparent border border-border rounded-md text-foreground outline-none transition-[color,box-shadow] focus:ring-2 focus:ring-ring/50 focus:border-ring"
+              className="w-full px-2.5 py-1.5 text-sm bg-transparent border border-border rounded-md text-foreground outline-none transition-[color,box-shadow] focus:ring-2 focus:ring-ring/50 focus:border-ring"
             />
           </div>
 
           {/* Icon */}
           <div>
-            <label className="text-[11px] text-muted-foreground mb-1 block">Icon</label>
+            <label className="text-xs text-muted-foreground mb-1 block">Icon</label>
             <IconPicker value={editedIcon} onChange={(v) => { setEditedIcon(v); setDirty(true); }} />
           </div>
 
           {/* Prompt */}
           <div>
-            <label className="text-[11px] text-muted-foreground mb-1 block">Prompt</label>
+            <label className="text-xs text-muted-foreground mb-1 block">Prompt</label>
             <Textarea
               value={editedPrompt}
               onChange={(e) => { setEditedPrompt(e.target.value); setDirty(true); }}
               rows={3}
-              className="text-[13px]"
+              className="text-sm"
             />
           </div>
 
@@ -369,34 +369,34 @@ function AddActionForm({ onAdd }: { onAdd: (t: Omit<PromptTemplate, "sort_order"
     <div className="rounded-lg bg-muted/20 ring-1 ring-border/30 p-3 flex flex-col gap-3">
       {/* Label */}
       <div>
-        <label className="text-[11px] text-muted-foreground mb-1 block">Label</label>
+        <label className="text-xs text-muted-foreground mb-1 block">Label</label>
         <input
           value={label}
           onChange={(e) => setLabel(e.target.value)}
           placeholder="e.g., Run Tests"
-          className="w-full px-2.5 py-1.5 text-[13px] bg-transparent border border-border rounded-md text-foreground outline-none transition-[color,box-shadow] focus:ring-2 focus:ring-ring/50 focus:border-ring"
+          className="w-full px-2.5 py-1.5 text-sm bg-transparent border border-border rounded-md text-foreground outline-none transition-[color,box-shadow] focus:ring-2 focus:ring-ring/50 focus:border-ring"
         />
       </div>
 
       {/* Icon */}
       <div>
-        <label className="text-[11px] text-muted-foreground mb-1 block">Icon</label>
+        <label className="text-xs text-muted-foreground mb-1 block">Icon</label>
         <IconPicker value={icon} onChange={setIcon} />
       </div>
 
       <div>
-        <label className="text-[11px] text-muted-foreground mb-1 block">Prompt</label>
+        <label className="text-xs text-muted-foreground mb-1 block">Prompt</label>
         <Textarea
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
           placeholder="The prompt text to send to the agent..."
           rows={3}
-          className="text-[13px]"
+          className="text-sm"
         />
       </div>
 
       <div className="flex items-center justify-between">
-        <label className="flex items-center gap-1.5 text-[12px] text-dim-foreground cursor-pointer">
+        <label className="flex items-center gap-1.5 text-xs text-dim-foreground cursor-pointer">
           <Checkbox
             checked={quickAction}
             onCheckedChange={(checked) => setQuickAction(checked === true)}
@@ -469,7 +469,7 @@ export function PromptsTab() {
       {/* Session Prompts */}
       <section>
         <div className={sectionHeadingClass}>Session Prompts</div>
-        <p className="text-[11px] text-muted-foreground mb-3 -mt-1">
+        <p className="text-xs text-muted-foreground mb-3 -mt-1">
           Default prompts used when launching task, research, and continuous mode sessions.
           These cannot be deleted but can be customized.
         </p>
@@ -483,7 +483,7 @@ export function PromptsTab() {
       {/* Quick Actions */}
       <section>
         <div className={sectionHeadingClass}>Quick Actions</div>
-        <p className="text-[11px] text-muted-foreground mb-3 -mt-1">
+        <p className="text-xs text-muted-foreground mb-3 -mt-1">
           Action buttons shown on active session panes. Click to send the prompt to the agent.
         </p>
         <div className="flex flex-col gap-2">
diff --git a/src/components/Settings/SettingsView.tsx b/src/components/Settings/SettingsView.tsx
index c4c269a..d2b8d3e 100644
--- a/src/components/Settings/SettingsView.tsx
+++ b/src/components/Settings/SettingsView.tsx
@@ -70,7 +70,7 @@ function SettingsNav({
   return (
     <nav className="flex flex-col w-[180px] shrink-0 border-r border-border/60 py-3 pr-2 overflow-y-auto">
       {/* App section */}
-      <div className="px-3 pb-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/70">
+      <div className="px-3 pb-1.5 text-2xs font-semibold uppercase tracking-widest text-muted-foreground/70">
         App
       </div>
       {APP_TABS.map((tab) => {
@@ -80,7 +80,7 @@ function SettingsNav({
           <button
             key={tab.id}
             onClick={() => onTabChange(tab.id)}
-            className={`flex items-center gap-2.5 px-3 py-1.5 text-[13px] rounded-r-md transition-colors duration-100 text-left ${
+            className={`flex items-center gap-2.5 px-3 py-1.5 text-sm rounded-r-md transition-colors duration-100 text-left ${
               isActive
                 ? "bg-accent/60 text-foreground font-medium border-l-2 border-primary"
                 : "text-dim-foreground hover:text-foreground hover:bg-accent/30 border-l-2 border-transparent"
@@ -93,7 +93,7 @@ function SettingsNav({
       })}
 
       {/* Project section */}
-      <div className="px-3 pt-4 pb-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/70">
+      <div className="px-3 pt-4 pb-1.5 text-2xs font-semibold uppercase tracking-widest text-muted-foreground/70">
         Project
       </div>
       {PROJECT_TABS.map((tab) => {
@@ -105,7 +105,7 @@ function SettingsNav({
             key={tab.id}
             onClick={() => !isDisabled && onTabChange(tab.id)}
             disabled={isDisabled}
-            className={`flex items-center gap-2.5 px-3 py-1.5 text-[13px] rounded-r-md transition-colors duration-100 text-left ${
+            className={`flex items-center gap-2.5 px-3 py-1.5 text-sm rounded-r-md transition-colors duration-100 text-left ${
               isDisabled
                 ? "text-muted-foreground/40 cursor-not-allowed border-l-2 border-transparent"
                 : isActive
@@ -199,7 +199,7 @@ export default memo(function SettingsView() {
       <div className="flex items-center gap-2 px-5 py-2.5 shrink-0 border-b border-border/40">
         <Palette size={16} className="text-primary" />
         <h1 className="text-sm font-semibold text-foreground">Settings</h1>
-        <kbd className="ml-auto px-1.5 py-0.5 rounded bg-accent/60 font-mono text-[10px] text-muted-foreground">
+        <kbd className="ml-auto px-1.5 py-0.5 rounded bg-accent/60 font-mono text-2xs text-muted-foreground">
           Esc
         </kbd>
       </div>
diff --git a/src/components/Settings/TaskFileConflictDialog.tsx b/src/components/Settings/TaskFileConflictDialog.tsx
index a8509a3..b551e54 100644
--- a/src/components/Settings/TaskFileConflictDialog.tsx
+++ b/src/components/Settings/TaskFileConflictDialog.tsx
@@ -202,7 +202,7 @@ export function TaskFileConflictDialog({
               <AlertTriangle className="size-4 text-warning" />
             </div>
             Resolve Task File Conflicts
-            <span className="text-[11px] font-medium bg-muted/60 text-muted-foreground px-2 py-0.5 rounded-full">
+            <span className="text-xs font-medium bg-muted/60 text-muted-foreground px-2 py-0.5 rounded-full">
               {conflicts.length}
             </span>
           </DialogTitle>
@@ -226,11 +226,11 @@ export function TaskFileConflictDialog({
                 <div className="flex items-center justify-between gap-2">
                   <div className="flex items-center gap-2">
                     <Icon className={`size-3.5 ${meta.colorClass}`} />
-                    <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+                    <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                       {meta.label}
                     </span>
                     <span
-                      className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ring-1 ${meta.badgeClass}`}
+                      className={`text-2xs font-medium px-1.5 py-0.5 rounded-full ring-1 ${meta.badgeClass}`}
                     >
                       {items.length}
                     </span>
@@ -238,13 +238,13 @@ export function TaskFileConflictDialog({
                   <button
                     type="button"
                     onClick={() => setAllForType(type, defaultChoice)}
-                    className="text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+                    className="text-2xs text-muted-foreground hover:text-foreground transition-colors"
                   >
                     Reset all
                   </button>
                 </div>
 
-                <span className="text-[10px] text-muted-foreground -mt-1">
+                <span className="text-2xs text-muted-foreground -mt-1">
                   {meta.description}
                 </span>
 
@@ -318,10 +318,10 @@ function ConflictRow({
     <div className="rounded-md bg-background/50 ring-1 ring-border/20 px-3 py-2 flex flex-col gap-1.5">
       <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-2 min-w-0">
-          <span className="text-[11px] font-mono bg-muted/50 px-1.5 py-0.5 rounded shrink-0">
+          <span className="text-xs font-mono bg-muted/50 px-1.5 py-0.5 rounded shrink-0">
             {conflict.task_id}
           </span>
-          <span className="text-[12px] text-foreground truncate">
+          <span className="text-xs text-foreground truncate">
             {conflict.title}
           </span>
         </div>
@@ -331,7 +331,7 @@ function ConflictRow({
           onValueChange={(val) => onChoiceChange(val as ResolutionChoice)}
           items={options.map((o) => ({ value: o.value, label: o.label }))}
         >
-          <SelectTrigger size="sm" className="w-auto min-w-[160px] h-7 text-[11px] shrink-0">
+          <SelectTrigger size="sm" className="w-auto min-w-[160px] h-7 text-xs shrink-0">
             <ChoiceIcon choice={choice} />
             <SelectValue />
           </SelectTrigger>
@@ -348,7 +348,7 @@ function ConflictRow({
       {/* Show diffs for content_differs */}
       {conflict.conflict_type === "content_differs" &&
         conflict.diffs.length > 0 && (
-          <span className="text-[10px] text-muted-foreground pl-0.5">
+          <span className="text-2xs text-muted-foreground pl-0.5">
             {conflict.diffs.join(", ")}
           </span>
         )}
diff --git a/src/components/Settings/TerminalTab.tsx b/src/components/Settings/TerminalTab.tsx
index d011648..e2bc805 100644
--- a/src/components/Settings/TerminalTab.tsx
+++ b/src/components/Settings/TerminalTab.tsx
@@ -121,7 +121,7 @@ function SettingsSlider({
           style={{ left: `calc(${pct}% - 8px)` }}
         />
       </div>
-      <span className="text-[13px] font-medium text-foreground tabular-nums min-w-[3.5rem] text-right">
+      <span className="text-sm font-medium text-foreground tabular-nums min-w-[3.5rem] text-right">
         {formatValue ? formatValue(value) : value}
       </span>
     </div>
@@ -251,7 +251,7 @@ export function TerminalTab() {
             ))}
           </SelectContent>
         </Select>
-        <div className="text-[11px] text-muted-foreground mt-1.5">
+        <div className="text-xs text-muted-foreground mt-1.5">
           Takes effect on new sessions. Existing sessions keep their current
           shell.
         </div>
@@ -282,7 +282,7 @@ export function TerminalTab() {
               value={fontFilter}
               onChange={(e) => setFontFilter(e.target.value)}
               placeholder="Search fonts..."
-              className="w-full bg-transparent text-[13px] text-foreground placeholder:text-muted-foreground outline-none"
+              className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
             />
           </div>
 
@@ -291,7 +291,7 @@ export function TerminalTab() {
             {Object.entries(groupedFonts).map(([category, fonts]) => (
               <div key={category}>
                 {/* Category header */}
-                <div className="sticky top-0 z-10 px-3 py-1.5 text-[11px] font-medium text-muted-foreground uppercase tracking-wide bg-muted/80 backdrop-blur-sm border-b border-border/50">
+                <div className="sticky top-0 z-10 px-3 py-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wide bg-muted/80 backdrop-blur-sm border-b border-border/50">
                   {CATEGORY_LABELS[category] ?? category}
                 </div>
                 {fonts.map((font) => {
@@ -300,7 +300,7 @@ export function TerminalTab() {
                     <button
                       key={font.name}
                       onClick={() => handleSelectFont(font)}
-                      className={`w-full text-left px-3 py-1.5 text-[13px] cursor-pointer transition-colors duration-100 ${
+                      className={`w-full text-left px-3 py-1.5 text-sm cursor-pointer transition-colors duration-100 ${
                         isActive
                           ? "bg-primary/10 text-primary font-medium"
                           : "text-foreground hover:bg-accent"
@@ -314,7 +314,7 @@ export function TerminalTab() {
               </div>
             ))}
             {filteredFonts.length === 0 && (
-              <div className="px-3 py-4 text-[13px] text-muted-foreground text-center">
+              <div className="px-3 py-4 text-sm text-muted-foreground text-center">
                 No matching fonts
               </div>
             )}
@@ -323,13 +323,13 @@ export function TerminalTab() {
           {/* Preview */}
           <div className="border-t border-border px-4 py-3">
             <div
-              className="text-[15px] text-foreground leading-relaxed"
+              className="text-sm text-foreground leading-relaxed"
               style={{ fontFamily: fontFamily }}
             >
               The quick brown fox jumps over the lazy dog
             </div>
             <div
-              className="text-[13px] text-muted-foreground mt-0.5"
+              className="text-sm text-muted-foreground mt-0.5"
               style={{ fontFamily: fontFamily }}
             >
               0123456789 !@#$%^&*()
@@ -337,7 +337,7 @@ export function TerminalTab() {
             {selectedFont && (
               <Badge
                 variant="outline"
-                className="mt-2 text-[10px] font-normal text-primary border-primary/30"
+                className="mt-2 text-2xs font-normal text-primary border-primary/30"
               >
                 {CATEGORY_LABELS[selectedFont.category]}
               </Badge>
@@ -367,7 +367,7 @@ export function TerminalTab() {
             <button
               key={level}
               onClick={() => setZoom(level)}
-              className={`flex-1 py-1.5 text-[12px] font-medium rounded-[var(--radius-element)] cursor-pointer transition-colors duration-100 ${
+              className={`flex-1 py-1.5 text-xs font-medium rounded-[var(--radius-element)] cursor-pointer transition-colors duration-100 ${
                 zoom === level
                   ? "bg-primary text-primary-foreground"
                   : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
@@ -396,7 +396,7 @@ export function TerminalTab() {
       <button
         onClick={handleResetDefaults}
         disabled={isDefault}
-        className="flex items-center justify-center gap-1.5 text-[12px] text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-colors duration-100 py-2"
+        className="flex items-center justify-center gap-1.5 text-xs text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-colors duration-100 py-2"
       >
         <RefreshCw className="size-3" />
         Reset to Defaults
diff --git a/src/components/Settings/shared.tsx b/src/components/Settings/shared.tsx
index 4ffe818..34ee314 100644
--- a/src/components/Settings/shared.tsx
+++ b/src/components/Settings/shared.tsx
@@ -4,7 +4,7 @@ export const sectionHeadingClass =
   "text-xs font-medium text-muted-foreground uppercase tracking-[0.5px] mb-2.5";
 
 export const inputClass =
-  "px-2.5 py-1.5 text-[13px] bg-transparent border border-border rounded-md text-foreground outline-none transition-[color,box-shadow] focus:ring-2 focus:ring-ring/50 focus:border-ring";
+  "px-2.5 py-1.5 text-sm bg-transparent border border-border rounded-md text-foreground outline-none transition-[color,box-shadow] focus:ring-2 focus:ring-ring/50 focus:border-ring";
 
 // ── Toggle Row ──
 // Shared toggle switch component used across settings tabs.
@@ -27,9 +27,9 @@ export function ToggleRow({
       className={`flex items-center justify-between gap-3 py-1.5 ${disabled ? "opacity-40 pointer-events-none" : "cursor-pointer"}`}
     >
       <div className="flex flex-col min-w-0">
-        <span className="text-[13px] text-foreground">{label}</span>
+        <span className="text-sm text-foreground">{label}</span>
         {description && (
-          <span className="text-[11px] text-muted-foreground mt-0.5">
+          <span className="text-xs text-muted-foreground mt-0.5">
             {description}
           </span>
         )}
diff --git a/src/components/Shell/ApplicationBar.tsx b/src/components/Shell/ApplicationBar.tsx
index 6523d20..6ce0e2b 100644
--- a/src/components/Shell/ApplicationBar.tsx
+++ b/src/components/Shell/ApplicationBar.tsx
@@ -75,7 +75,7 @@ const ApplicationBar = memo(function ApplicationBar() {
             icon={tab.icon}
             badge={
               tab.id === "skills-rules" && acpUpdatesAvailable > 0 ? (
-                <span className="ml-1 flex size-[16px] items-center justify-center rounded-full bg-warning/20 text-[9px] font-bold text-warning">
+                <span className="ml-1 flex size-[16px] items-center justify-center rounded-full bg-warning/20 text-2xs font-bold text-warning">
                   {acpUpdatesAvailable}
                 </span>
               ) : undefined
diff --git a/src/components/Shell/ContinuousModeBar.tsx b/src/components/Shell/ContinuousModeBar.tsx
index 2f14cb9..c6935bb 100644
--- a/src/components/Shell/ContinuousModeBar.tsx
+++ b/src/components/Shell/ContinuousModeBar.tsx
@@ -101,7 +101,7 @@ export default function ContinuousModeBar({ projectId }: ContinuousModeBarProps)
       <div className="flex flex-col flex-1 min-w-0 gap-0.5">
         <div className="flex items-center gap-1.5">
           {isCompleted ? (
-            <span className="text-[11px] font-medium text-success shrink-0">
+            <span className="text-xs font-medium text-success shrink-0">
               All {completedCount}/{totalCount} tasks completed
               {errorCount > 0 && (
                 <span className="text-destructive ml-1">
@@ -111,35 +111,35 @@ export default function ContinuousModeBar({ projectId }: ContinuousModeBarProps)
             </span>
           ) : isIndependent ? (
             <>
-              <span className="text-[11px] font-medium tabular-nums text-foreground shrink-0">
+              <span className="text-xs font-medium tabular-nums text-foreground shrink-0">
                 {completedCount}/{totalCount} done
               </span>
               {runningCount > 0 && (
-                <span className="text-[11px] text-dim-foreground shrink-0">
+                <span className="text-xs text-dim-foreground shrink-0">
                   ({runningCount} running)
                 </span>
               )}
               {errorCount > 0 && (
-                <span className="text-[11px] text-destructive shrink-0">
+                <span className="text-xs text-destructive shrink-0">
                   ({errorCount} failed)
                 </span>
               )}
             </>
           ) : (
             <>
-              <span className="text-[11px] font-medium tabular-nums text-foreground shrink-0">
+              <span className="text-xs font-medium tabular-nums text-foreground shrink-0">
                 Task {completedCount + (isRunning || isPaused ? 1 : 0)}/{totalCount}
               </span>
               {currentTask && (
                 <>
-                  <span className="text-[11px] text-muted-foreground shrink-0">
+                  <span className="text-xs text-muted-foreground shrink-0">
                     —
                   </span>
-                  <span className="text-[11px] text-dim-foreground truncate">
+                  <span className="text-xs text-dim-foreground truncate">
                     {currentTask.title}
                   </span>
                   {currentItem?.agent_name && currentItem.agent_name !== run.agent_name && (
-                    <span className="shrink-0 rounded px-1 py-px text-[10px] font-medium bg-primary/15 text-primary">
+                    <span className="shrink-0 rounded px-1 py-px text-2xs font-medium bg-primary/15 text-primary">
                       {currentItem.agent_name}
                     </span>
                   )}
@@ -147,10 +147,10 @@ export default function ContinuousModeBar({ projectId }: ContinuousModeBarProps)
               )}
               {hasError && currentItem?.error && (
                 <>
-                  <span className="text-[11px] text-muted-foreground shrink-0">
+                  <span className="text-xs text-muted-foreground shrink-0">
                     —
                   </span>
-                  <span className="text-[11px] text-destructive truncate">
+                  <span className="text-xs text-destructive truncate">
                     {currentItem.error}
                   </span>
                 </>
@@ -189,7 +189,7 @@ export default function ContinuousModeBar({ projectId }: ContinuousModeBarProps)
             title="Dismiss and close all related sessions"
           >
             <X className="size-3" />
-            <span className="text-[11px]">Dismiss</span>
+            <span className="text-xs">Dismiss</span>
           </Button>
         ) : (
           <>
diff --git a/src/components/Shell/CreateProjectDialog.tsx b/src/components/Shell/CreateProjectDialog.tsx
index 2fc874a..01a3e01 100644
--- a/src/components/Shell/CreateProjectDialog.tsx
+++ b/src/components/Shell/CreateProjectDialog.tsx
@@ -171,7 +171,7 @@ export default function CreateProjectDialog({
             className={nameError ? "border-destructive" : ""}
           />
           {nameError && (
-            <p className="mt-1 text-[11px] text-destructive">{nameError}</p>
+            <p className="mt-1 text-xs text-destructive">{nameError}</p>
           )}
         </div>
 
@@ -204,14 +204,14 @@ export default function CreateProjectDialog({
         {/* Path preview */}
         {pathPreview && (
           <div className={`rounded-md px-3 py-2 ${pathWarning ? "bg-destructive/10" : "bg-muted/50"}`}>
-            <p className="text-[10px] text-muted-foreground mb-0.5">
+            <p className="text-2xs text-muted-foreground mb-0.5">
               Will be created at
             </p>
             <p className="text-xs text-dim-foreground font-mono truncate">
               {pathPreview}
             </p>
             {pathWarning && (
-              <p className="mt-1 text-[11px] text-destructive">{pathWarning}</p>
+              <p className="mt-1 text-xs text-destructive">{pathWarning}</p>
             )}
           </div>
         )}
diff --git a/src/components/Shell/FloatingPermissionBanner.tsx b/src/components/Shell/FloatingPermissionBanner.tsx
index a5d85fa..1ddbf53 100644
--- a/src/components/Shell/FloatingPermissionBanner.tsx
+++ b/src/components/Shell/FloatingPermissionBanner.tsx
@@ -68,7 +68,7 @@ export default memo(function FloatingPermissionBanner() {
           : `${totalCount} permission requests waiting`}
       </span>
 
-      <span className="text-[10px] font-medium text-warning-foreground/70 whitespace-nowrap">
+      <span className="text-2xs font-medium text-warning-foreground/70 whitespace-nowrap">
         Click to review
       </span>
     </button>
diff --git a/src/components/Shell/Sidebar.tsx b/src/components/Shell/Sidebar.tsx
index b29669d..d9462aa 100644
--- a/src/components/Shell/Sidebar.tsx
+++ b/src/components/Shell/Sidebar.tsx
@@ -218,7 +218,7 @@ const SessionRow = React.memo(function SessionRow({
         {session.name || session.agent}
       </span>
       <span
-        className={`ml-auto shrink-0 flex items-center gap-1 text-[10px] ${isWaiting || isError ? "font-medium" : ""}`}
+        className={`ml-auto shrink-0 flex items-center gap-1 text-2xs ${isWaiting || isError ? "font-medium" : ""}`}
         style={{ color: derived.color }}
       >
         <StatusIcon label={derived.label} />
@@ -252,7 +252,7 @@ const ProjectSessionList = React.memo(function ProjectSessionList({
 
   return (
     <>
-      <div className="px-1 pt-2.5 pb-1.5 text-[11px] uppercase tracking-wide text-muted-foreground">
+      <div className="px-1 pt-2.5 pb-1.5 text-xs uppercase tracking-wide text-muted-foreground">
         Sessions
       </div>
       <div className="text-dim-foreground">
@@ -296,7 +296,7 @@ const ProjectWorktreeList = React.memo(function ProjectWorktreeList({
 
   return (
     <>
-      <div className="px-1 pt-2.5 pb-1.5 text-[11px] uppercase tracking-wide text-muted-foreground">
+      <div className="px-1 pt-2.5 pb-1.5 text-xs uppercase tracking-wide text-muted-foreground">
         Worktrees
       </div>
       <div className="pb-1">
@@ -425,17 +425,17 @@ const ProjectItem = React.memo(function ProjectItem({
           />
         )}
         <span
-          className={`text-[13px] truncate min-w-0 flex-1 ${isActive ? "text-foreground font-medium" : "text-dim-foreground"}`}
+          className={`text-sm truncate min-w-0 flex-1 ${isActive ? "text-foreground font-medium" : "text-dim-foreground"}`}
         >
           {project.name}
           {branch && (
             <>
               <span className="text-muted-foreground/60 mx-1">·</span>
-              <span className="text-[10px] text-muted-foreground font-normal">{branch}</span>
+              <span className="text-2xs text-muted-foreground font-normal">{branch}</span>
             </>
           )}
           {isActive && changeCount != null && changeCount > 0 && (
-            <span className="text-[10px] text-warning font-normal ml-1">{changeCount}∆</span>
+            <span className="text-2xs text-warning font-normal ml-1">{changeCount}∆</span>
           )}
         </span>
         <DropdownMenu>
@@ -545,7 +545,7 @@ export default function Sidebar() {
       <div className="flex items-center px-3 pt-1.5 pb-1 shrink-0">
         <div className="flex items-center gap-1.5 flex-1 min-w-0">
           <FaberLogo className="size-3.5 shrink-0 text-primary" />
-          <span className="text-[11px] font-medium text-foreground">Faber</span>
+          <span className="text-xs font-medium text-foreground">Faber</span>
         </div>
         <Button
           variant="ghost"
diff --git a/src/components/Shell/SidebarStatusPanel.tsx b/src/components/Shell/SidebarStatusPanel.tsx
index b9fd20e..cd290cb 100644
--- a/src/components/Shell/SidebarStatusPanel.tsx
+++ b/src/components/Shell/SidebarStatusPanel.tsx
@@ -30,7 +30,7 @@ function StatusRow({
     <div
       onClick={onClick}
       title={title}
-      className={`group/row flex items-center gap-2 px-3 h-6 text-[11px] text-dim-foreground min-w-0 ${onClick ? "cursor-pointer hover:bg-accent/40" : ""} ${className ?? ""}`}
+      className={`group/row flex items-center gap-2 px-3 h-6 text-xs text-dim-foreground min-w-0 ${onClick ? "cursor-pointer hover:bg-accent/40" : ""} ${className ?? ""}`}
     >
       <span className="inline-flex w-4 justify-center shrink-0">{icon}</span>
       <span className="truncate min-w-0 flex-1">{label}</span>
diff --git a/src/components/Shell/StatusBar.tsx b/src/components/Shell/StatusBar.tsx
index 1038970..7b553af 100644
--- a/src/components/Shell/StatusBar.tsx
+++ b/src/components/Shell/StatusBar.tsx
@@ -65,8 +65,8 @@ const VIEW_KEY_COMMANDS: Record<ViewId, KeyCommand[]> = {
 
 function Kbd({ keys, label }: KeyCommand) {
   return (
-    <span className="inline-flex items-center gap-1 text-[10px] text-muted-foreground select-none">
-      <kbd className="px-1 py-px rounded bg-accent/60 font-mono text-[10px] text-dim-foreground">
+    <span className="inline-flex items-center gap-1 text-2xs text-muted-foreground select-none">
+      <kbd className="px-1 py-px rounded bg-accent/60 font-mono text-2xs text-dim-foreground">
         {keys}
       </kbd>
       <span>{label}</span>
@@ -84,7 +84,7 @@ const AgentUsageSection = React.memo(function AgentUsageSection({
   if (agent.needs_auth) {
     return (
       <div className="px-1 py-1">
-        <div className="flex items-center gap-1.5 text-[11px] text-dim-foreground mb-1">
+        <div className="flex items-center gap-1.5 text-xs text-dim-foreground mb-1">
           <AgentIcon
             agent={agent.agent_name}
             size={13}
@@ -92,9 +92,9 @@ const AgentUsageSection = React.memo(function AgentUsageSection({
           />
           <span className="truncate">{agent.display_name}</span>
         </div>
-        <div className="px-3 text-[10px] text-muted-foreground">
+        <div className="px-3 text-2xs text-muted-foreground">
           Run{" "}
-          <code className="px-1 py-px rounded bg-accent/60 text-[10px]">
+          <code className="px-1 py-px rounded bg-accent/60 text-2xs">
             claude
           </code>{" "}
           to authenticate
@@ -106,7 +106,7 @@ const AgentUsageSection = React.memo(function AgentUsageSection({
   if (agent.error) {
     return (
       <div className="px-1 py-1">
-        <div className="flex items-center gap-1.5 text-[11px] text-dim-foreground mb-1">
+        <div className="flex items-center gap-1.5 text-xs text-dim-foreground mb-1">
           <AgentIcon
             agent={agent.agent_name}
             size={13}
@@ -114,7 +114,7 @@ const AgentUsageSection = React.memo(function AgentUsageSection({
           />
           <span className="truncate">{agent.display_name}</span>
         </div>
-        <div className="flex items-center gap-1 px-3 text-[10px] text-destructive">
+        <div className="flex items-center gap-1 px-3 text-2xs text-destructive">
           <AlertTriangle size={10} className="shrink-0" />
           <span className="truncate">{agent.error}</span>
         </div>
@@ -126,7 +126,7 @@ const AgentUsageSection = React.memo(function AgentUsageSection({
 
   return (
     <div className="py-1">
-      <div className="flex items-center gap-1.5 px-1 text-[11px] text-dim-foreground mb-0.5">
+      <div className="flex items-center gap-1.5 px-1 text-xs text-dim-foreground mb-0.5">
         <AgentIcon
           agent={agent.agent_name}
           size={13}
@@ -183,7 +183,7 @@ const UsageIndicator = React.memo(function UsageIndicator() {
 
   return (
     <Popover>
-      <PopoverTrigger className="inline-flex items-center gap-1.5 px-2 h-full text-[11px] text-dim-foreground cursor-pointer hover:bg-accent/40 rounded-sm transition-colors">
+      <PopoverTrigger className="inline-flex items-center gap-1.5 px-2 h-full text-xs text-dim-foreground cursor-pointer hover:bg-accent/40 rounded-sm transition-colors">
         {agentUsageLoading ? (
           <Loader2 size={12} className="animate-spin text-muted-foreground" />
         ) : (
@@ -198,7 +198,7 @@ const UsageIndicator = React.memo(function UsageIndicator() {
         className="w-64 p-0"
       >
         <div className="flex items-center justify-between px-3 py-2 border-b border-border">
-          <span className="text-[11px] font-medium text-foreground">
+          <span className="text-xs font-medium text-foreground">
             Agent Usage
           </span>
           <button
@@ -253,7 +253,7 @@ const McpStatus = React.memo(function McpStatus() {
     <button
       onClick={handleCopy}
       title={mcpOnline ? "Click to copy MCP sidecar path" : "MCP offline"}
-      className="group/mcp inline-flex items-center gap-1.5 px-2 h-full text-[11px] text-dim-foreground hover:bg-accent/40 rounded-sm transition-colors"
+      className="group/mcp inline-flex items-center gap-1.5 px-2 h-full text-xs text-dim-foreground hover:bg-accent/40 rounded-sm transition-colors"
     >
       <Radio
         size={12}
@@ -302,7 +302,7 @@ const GitHubStatus = React.memo(function GitHubStatus() {
     // All good — show subtle checkmark
     return (
       <span
-        className="inline-flex items-center gap-1.5 px-2 h-full text-[11px] text-dim-foreground"
+        className="inline-flex items-center gap-1.5 px-2 h-full text-xs text-dim-foreground"
         title={`GitHub: ${ghAuthStatus.username ?? "authenticated"}`}
       >
         <Check size={12} className="text-success" />
@@ -330,7 +330,7 @@ const GitHubStatus = React.memo(function GitHubStatus() {
 
   return (
     <span
-      className={`inline-flex items-center gap-1.5 px-2 h-full text-[11px] ${colorClass}`}
+      className={`inline-flex items-center gap-1.5 px-2 h-full text-xs ${colorClass}`}
       title={tooltip}
     >
       <AlertTriangle size={12} />
@@ -398,12 +398,12 @@ export default function StatusBar() {
           title="Settings (Ctrl+,)"
         >
           <Settings size={13} />
-          <span className="text-[11px]">Settings</span>
+          <span className="text-xs">Settings</span>
         </button>
 
         {/* Version */}
         {version && (
-          <span className="text-[10px] text-muted-foreground tabular-nums">
+          <span className="text-2xs text-muted-foreground tabular-nums">
             v{version}
           </span>
         )}
diff --git a/src/components/Shell/UsagePanel.tsx b/src/components/Shell/UsagePanel.tsx
index 7c0d301..a3e9cce 100644
--- a/src/components/Shell/UsagePanel.tsx
+++ b/src/components/Shell/UsagePanel.tsx
@@ -23,12 +23,12 @@ const AgentUsageSection = React.memo(function AgentUsageSection({
   if (agent.needs_auth) {
     return (
       <div className="px-3 py-1">
-        <div className="flex items-center gap-1.5 text-[11px] text-dim-foreground mb-1">
+        <div className="flex items-center gap-1.5 text-xs text-dim-foreground mb-1">
           <AgentIcon agent={agent.agent_name} size={13} className="shrink-0 opacity-80" />
           <span className="truncate">{agent.display_name}</span>
         </div>
-        <div className="px-3 text-[10px] text-muted-foreground">
-          Run <code className="px-1 py-px rounded bg-accent/60 text-[10px]">claude</code> to
+        <div className="px-3 text-2xs text-muted-foreground">
+          Run <code className="px-1 py-px rounded bg-accent/60 text-2xs">claude</code> to
           authenticate
         </div>
       </div>
@@ -38,11 +38,11 @@ const AgentUsageSection = React.memo(function AgentUsageSection({
   if (agent.error) {
     return (
       <div className="px-3 py-1">
-        <div className="flex items-center gap-1.5 text-[11px] text-dim-foreground mb-1">
+        <div className="flex items-center gap-1.5 text-xs text-dim-foreground mb-1">
           <AgentIcon agent={agent.agent_name} size={13} className="shrink-0 opacity-80" />
           <span className="truncate">{agent.display_name}</span>
         </div>
-        <div className="flex items-center gap-1 px-3 text-[10px] text-destructive">
+        <div className="flex items-center gap-1 px-3 text-2xs text-destructive">
           <AlertTriangle size={10} className="shrink-0" />
           <span className="truncate">{agent.error}</span>
         </div>
@@ -54,7 +54,7 @@ const AgentUsageSection = React.memo(function AgentUsageSection({
 
   return (
     <div className="py-1">
-      <div className="flex items-center gap-1.5 px-3 text-[11px] text-dim-foreground mb-0.5">
+      <div className="flex items-center gap-1.5 px-3 text-xs text-dim-foreground mb-0.5">
         <AgentIcon agent={agent.agent_name} size={13} className="shrink-0 opacity-80" />
         <span className="truncate">{agent.display_name}</span>
       </div>
@@ -92,7 +92,7 @@ const UsagePanel = React.memo(function UsagePanel() {
       {/* Header */}
       <div
         onClick={handleToggle}
-        className="group/usage flex items-center gap-2 px-3 h-7 text-[11px] text-dim-foreground cursor-pointer hover:bg-accent/40 select-none"
+        className="group/usage flex items-center gap-2 px-3 h-7 text-xs text-dim-foreground cursor-pointer hover:bg-accent/40 select-none"
       >
         <span className="inline-flex w-4 justify-center shrink-0">
           {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
diff --git a/src/components/Shell/UsageProgressBar.tsx b/src/components/Shell/UsageProgressBar.tsx
index 7fcb731..b3b1221 100644
--- a/src/components/Shell/UsageProgressBar.tsx
+++ b/src/components/Shell/UsageProgressBar.tsx
@@ -65,14 +65,14 @@ const UsageProgressBar = React.memo(function UsageProgressBar({
     <div className="px-3 py-0.5">
       {/* Label row */}
       <div className="flex items-center justify-between gap-2 mb-0.5">
-        <span className="text-[10px] text-dim-foreground truncate">
+        <span className="text-2xs text-dim-foreground truncate">
           {label}
-          <span className={`ml-1 text-[11px] font-medium ${textColorClass(clamped)}`}>
+          <span className={`ml-1 text-xs font-medium ${textColorClass(clamped)}`}>
             {Math.round(clamped)}%
           </span>
         </span>
         {resetLabel && (
-          <span className="text-[10px] text-muted-foreground shrink-0">
+          <span className="text-2xs text-muted-foreground shrink-0">
             {resetLabel}
           </span>
         )}
diff --git a/src/components/Shell/ViewLayout.tsx b/src/components/Shell/ViewLayout.tsx
index 3535acf..3241b6e 100644
--- a/src/components/Shell/ViewLayout.tsx
+++ b/src/components/Shell/ViewLayout.tsx
@@ -29,7 +29,7 @@ function Toolbar({
 }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("flex items-center gap-3 py-1.5 shrink-0", className)}
+      className={cn("flex items-center gap-3 h-10 shrink-0", className)}
       {...props}
     >
       {children}
diff --git a/src/components/Shell/WelcomeScreen.tsx b/src/components/Shell/WelcomeScreen.tsx
index 0580294..e88e930 100644
--- a/src/components/Shell/WelcomeScreen.tsx
+++ b/src/components/Shell/WelcomeScreen.tsx
@@ -169,7 +169,7 @@ export default function WelcomeScreen() {
                         size={12}
                         className="animate-spin text-muted-foreground"
                       />
-                      <span className="text-[11px] text-muted-foreground">
+                      <span className="text-xs text-muted-foreground">
                         {activeLoadingLabel
                           ? `${activeLoadingLabel}…`
                           : "Loading…"}
@@ -246,10 +246,10 @@ export default function WelcomeScreen() {
                           <div className="text-muted-foreground">
                             <Icon size={18} strokeWidth={1.5} />
                           </div>
-                          <div className="text-[12px] font-medium text-dim-foreground">
+                          <div className="text-xs font-medium text-dim-foreground">
                             {cap.label}
                           </div>
-                          <div className="text-[10px] text-muted-foreground leading-snug">
+                          <div className="text-2xs text-muted-foreground leading-snug">
                             {cap.description}
                           </div>
                         </CardContent>
@@ -267,12 +267,12 @@ export default function WelcomeScreen() {
                 className="mt-5 w-full flex flex-col items-center gap-2.5"
               >
                 <div className="flex items-center gap-2">
-                  <span className="text-[11px] text-muted-foreground">
+                  <span className="text-xs text-muted-foreground">
                     Supported agents
                   </span>
                   {agentSummary && (
                     <span
-                      className={`flex items-center gap-1 text-[11px] ${
+                      className={`flex items-center gap-1 text-xs ${
                         agentSummary.allReady
                           ? "text-success"
                           : "text-dim-foreground"
@@ -310,7 +310,7 @@ export default function WelcomeScreen() {
                   style={leftColHeight ? { maxHeight: leftColHeight } : undefined}
                 >
                   <div className="flex items-center gap-2 mb-2.5 px-1 shrink-0">
-                    <span className="text-[11px] font-medium tracking-[0.08em] uppercase text-muted-foreground">
+                    <span className="text-xs font-medium tracking-[0.08em] uppercase text-muted-foreground">
                       Your Projects
                     </span>
                     <div className="flex-1 h-px bg-border" />
@@ -351,10 +351,10 @@ export default function WelcomeScreen() {
                               />
                             </div>
                             <div className="flex flex-col min-w-0 flex-1">
-                              <span className="text-[13px] font-medium text-foreground truncate">
+                              <span className="text-sm font-medium text-foreground truncate">
                                 {project.name}
                               </span>
-                              <span className="text-[11px] text-muted-foreground truncate">
+                              <span className="text-xs text-muted-foreground truncate">
                                 {project.path}
                               </span>
                             </div>
diff --git a/src/components/SkillsRules/AgentExtensionCard.tsx b/src/components/SkillsRules/AgentExtensionCard.tsx
index 8451519..ef3c94a 100644
--- a/src/components/SkillsRules/AgentExtensionCard.tsx
+++ b/src/components/SkillsRules/AgentExtensionCard.tsx
@@ -61,11 +61,11 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
               <AgentIcon agent={agent.name} size={22} />
             </div>
             <div className="flex flex-col gap-0.5">
-              <span className="text-[13px] font-semibold leading-tight text-foreground">
+              <span className="text-sm font-semibold leading-tight text-foreground">
                 {agent.display_name}
               </span>
               {description && (
-                <span className="text-[11px] leading-tight text-muted-foreground">
+                <span className="text-xs leading-tight text-muted-foreground">
                   {description}
                 </span>
               )}
@@ -74,7 +74,7 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
 
           {/* CLI status badge */}
           {agent.installed ? (
-            <span className="flex shrink-0 items-center gap-1 rounded-full bg-success/15 px-2 py-0.5 text-[10px] font-medium text-success">
+            <span className="flex shrink-0 items-center gap-1 rounded-full bg-success/15 px-2 py-0.5 text-2xs font-medium text-success">
               <span className="size-1.5 rounded-full bg-success" />
               Installed
             </span>
@@ -83,13 +83,13 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
               href={agent.cli_install_url}
               target="_blank"
               rel="noopener noreferrer"
-              className="flex shrink-0 items-center gap-1 rounded-full bg-primary/15 px-2 py-0.5 text-[10px] font-medium text-primary transition-colors hover:bg-primary/25"
+              className="flex shrink-0 items-center gap-1 rounded-full bg-primary/15 px-2 py-0.5 text-2xs font-medium text-primary transition-colors hover:bg-primary/25"
             >
               <Download size={10} />
               Install CLI
             </a>
           ) : (
-            <span className="flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+            <span className="flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-2xs font-medium text-muted-foreground">
               <span className="size-1.5 rounded-full bg-muted-foreground/40" />
               Not Installed
             </span>
@@ -98,18 +98,18 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
 
         {/* ── Info chips: CLI command + default model + registry version ── */}
         <div className="flex flex-wrap items-center gap-1.5">
-          <span className="flex items-center gap-1 rounded-md bg-muted/60 px-2 py-0.5 font-mono text-[11px] text-dim-foreground">
+          <span className="flex items-center gap-1 rounded-md bg-muted/60 px-2 py-0.5 font-mono text-xs text-dim-foreground">
             <Terminal size={10} className="text-muted-foreground" />
             {agent.command}
           </span>
           {agent.default_model && (
-            <span className="rounded-md bg-muted/60 px-2 py-0.5 text-[11px] text-muted-foreground">
+            <span className="rounded-md bg-muted/60 px-2 py-0.5 text-xs text-muted-foreground">
               {agent.default_model}
             </span>
           )}
           {registryEntry?.installed_version && (
             <span
-              className={`flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-[11px] ${
+              className={`flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-xs ${
                 registryEntry.update_available
                   ? "bg-muted/60 text-muted-foreground line-through decoration-muted-foreground/40"
                   : "bg-primary/10 text-primary/80"
@@ -120,13 +120,13 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
             </span>
           )}
           {registryEntry?.update_available && (
-            <span className="flex items-center gap-1 rounded-md bg-warning/15 px-2 py-0.5 font-mono text-[11px] text-warning">
+            <span className="flex items-center gap-1 rounded-md bg-warning/15 px-2 py-0.5 font-mono text-xs text-warning">
               <ArrowUpCircle size={9} />
               v{registryEntry.registry_version}
             </span>
           )}
           {registryEntry && !registryEntry.installed_version && (
-            <span className="flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 font-mono text-[11px] text-primary/80">
+            <span className="flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 font-mono text-xs text-primary/80">
               <Globe size={9} className="opacity-60" />
               v{registryEntry.registry_version}
             </span>
@@ -137,7 +137,7 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
         {!agent.installed && agent.cli_install_hint && (
           <div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-2">
             <Terminal size={12} className="shrink-0 text-muted-foreground" />
-            <code className="flex-1 select-all text-[11px] text-dim-foreground">
+            <code className="flex-1 select-all text-xs text-dim-foreground">
               {agent.cli_install_hint}
             </code>
             {agent.cli_install_url && (
@@ -175,7 +175,7 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
                     />
                   )}
                   <span
-                    className={`text-[12px] ${agent.installed ? "text-dim-foreground" : "text-muted-foreground"}`}
+                    className={`text-xs ${agent.installed ? "text-dim-foreground" : "text-muted-foreground"}`}
                   >
                     Built-in ACP
                   </span>
@@ -193,11 +193,11 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
                         strokeWidth={2.5}
                       />
                       <div className="flex flex-col">
-                        <span className="text-[12px] text-dim-foreground">
+                        <span className="text-xs text-dim-foreground">
                           ACP Ready
                         </span>
                         {agent.acp_adapter_package && (
-                          <span className="font-mono text-[10px] text-muted-foreground">
+                          <span className="font-mono text-2xs text-muted-foreground">
                             {agent.acp_adapter_package}
                           </span>
                         )}
@@ -209,7 +209,7 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
                         size={13}
                         className="shrink-0 text-warning"
                       />
-                      <span className="text-[12px] text-muted-foreground">
+                      <span className="text-xs text-muted-foreground">
                         Adapter Not Installed
                       </span>
                     </>
@@ -225,7 +225,7 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
                     className="shrink-0 text-muted-foreground/40"
                     strokeWidth={2.5}
                   />
-                  <span className="text-[12px] text-muted-foreground/60">
+                  <span className="text-xs text-muted-foreground/60">
                     ACP not supported
                   </span>
                 </>
@@ -244,7 +244,7 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
                   disabled={installing}
                   loading={installing}
                   leftIcon={!installing ? <ArrowUpCircle size={12} /> : undefined}
-                  className="h-7 px-2.5 text-[11px] border-warning/40 text-warning hover:bg-warning/10 hover:text-warning cursor-pointer"
+                  className="h-7 px-2.5 text-xs border-warning/40 text-warning hover:bg-warning/10 hover:text-warning cursor-pointer"
                 >
                   Update to v{registryEntry.registry_version}
                 </Button>
@@ -261,7 +261,7 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
                   disabled={installing || !agent.installed}
                   loading={installing}
                   leftIcon={!installing ? <Download size={12} /> : undefined}
-                  className="h-7 px-2.5 text-[11px]"
+                  className="h-7 px-2.5 text-xs"
                 >
                   Install Adapter
                 </Button>
@@ -275,12 +275,12 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               {registryEntry.license && (
-                <span className="rounded-md bg-muted/40 px-1.5 py-px text-[10px] text-muted-foreground">
+                <span className="rounded-md bg-muted/40 px-1.5 py-px text-2xs text-muted-foreground">
                   {registryEntry.license}
                 </span>
               )}
               {registryEntry.authors.length > 0 && (
-                <span className="text-[10px] text-muted-foreground/70">
+                <span className="text-2xs text-muted-foreground/70">
                   by {registryEntry.authors.join(", ")}
                 </span>
               )}
@@ -290,7 +290,7 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
                 href={registryEntry.repository}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1 text-[10px] text-muted-foreground transition-colors hover:text-foreground"
+                className="flex items-center gap-1 text-2xs text-muted-foreground transition-colors hover:text-foreground"
               >
                 <ExternalLink size={9} />
                 Repo
@@ -305,7 +305,7 @@ const AgentExtensionCard = React.memo(function AgentExtensionCard({
             {agent.supported_models.map((model) => (
               <span
                 key={model}
-                className="rounded-md bg-muted/40 px-1.5 py-px text-[10px] text-muted-foreground"
+                className="rounded-md bg-muted/40 px-1.5 py-px text-2xs text-muted-foreground"
               >
                 {model}
               </span>
diff --git a/src/components/SkillsRules/AgentsExtensionTab.tsx b/src/components/SkillsRules/AgentsExtensionTab.tsx
index 513fd75..66e1c21 100644
--- a/src/components/SkillsRules/AgentsExtensionTab.tsx
+++ b/src/components/SkillsRules/AgentsExtensionTab.tsx
@@ -132,14 +132,14 @@ export default function AgentsExtensionTab({
         <div className="flex items-center gap-3">
           <div className="flex items-center gap-2">
             <Bot size={14} className="text-muted-foreground" />
-            <span className="text-[13px] font-medium text-foreground">
+            <span className="text-sm font-medium text-foreground">
               {installedCount} of {agents.length} installed
             </span>
           </div>
           <span className="text-border">·</span>
           <div className="flex items-center gap-1.5">
             <Wifi size={12} className="text-muted-foreground" />
-            <span className="text-[12px] text-muted-foreground">
+            <span className="text-xs text-muted-foreground">
               {acpReadyCount} ACP ready
             </span>
           </div>
@@ -148,7 +148,7 @@ export default function AgentsExtensionTab({
               <span className="text-border">·</span>
               <div className="flex items-center gap-1.5">
                 <Cloud size={12} className="text-primary/60" />
-                <span className="text-[12px] text-muted-foreground">
+                <span className="text-xs text-muted-foreground">
                   {acpRegistry.length} in registry
                 </span>
               </div>
@@ -159,7 +159,7 @@ export default function AgentsExtensionTab({
         <button
           onClick={handleRefresh}
           disabled={refreshing}
-          className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50"
+          className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50"
         >
           {refreshing ? (
             <Loader2 size={13} className="animate-spin" />
@@ -172,12 +172,12 @@ export default function AgentsExtensionTab({
 
       {/* Error toasts */}
       {installError && (
-        <div className="mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-[12px] text-destructive">
+        <div className="mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
           {installError}
         </div>
       )}
       {acpRegistryError && (
-        <div className="mb-3 flex items-center gap-2 rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-[12px] text-warning">
+        <div className="mb-3 flex items-center gap-2 rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning">
           <AlertCircle size={13} className="shrink-0" />
           <span>
             Registry unavailable — showing local data only.{" "}
@@ -190,7 +190,7 @@ export default function AgentsExtensionTab({
 
       {/* Registry loading indicator */}
       {acpRegistryLoading && acpRegistry.length === 0 && (
-        <div className="mb-3 flex items-center gap-2 rounded-lg border border-border/50 bg-muted/30 px-3 py-2 text-[12px] text-muted-foreground">
+        <div className="mb-3 flex items-center gap-2 rounded-lg border border-border/50 bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
           <Loader2 size={13} className="animate-spin" />
           Fetching ACP registry...
         </div>
diff --git a/src/components/SkillsRules/CreateRuleDialog.tsx b/src/components/SkillsRules/CreateRuleDialog.tsx
index 63d13ef..d15b762 100644
--- a/src/components/SkillsRules/CreateRuleDialog.tsx
+++ b/src/components/SkillsRules/CreateRuleDialog.tsx
@@ -210,7 +210,7 @@ export default function CreateRuleDialog({
                 />
               </div>
               {resolvedFilename && (
-                <p className="text-[10px] text-muted-foreground font-mono">
+                <p className="text-2xs text-muted-foreground font-mono">
                   {selectedDir.dir}/{resolvedFilename}
                 </p>
               )}
diff --git a/src/components/SkillsRules/InstalledSkillsList.tsx b/src/components/SkillsRules/InstalledSkillsList.tsx
index 44bab94..50c82a7 100644
--- a/src/components/SkillsRules/InstalledSkillsList.tsx
+++ b/src/components/SkillsRules/InstalledSkillsList.tsx
@@ -131,7 +131,7 @@ export default function InstalledSkillsList({
           <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
             {title}
           </span>
-          <span className="text-[10px] text-muted-foreground/70 bg-accent/40 px-1.5 py-0.5 rounded-full">
+          <span className="text-2xs text-muted-foreground/70 bg-accent/40 px-1.5 py-0.5 rounded-full">
             {skills.length}
           </span>
         </button>
diff --git a/src/components/SkillsRules/PluginsTab.tsx b/src/components/SkillsRules/PluginsTab.tsx
index 4eb5546..973d156 100644
--- a/src/components/SkillsRules/PluginsTab.tsx
+++ b/src/components/SkillsRules/PluginsTab.tsx
@@ -166,7 +166,7 @@ function TypeFilterChip({
   return (
     <button
       onClick={onClick}
-      className={`inline-flex items-center gap-1 text-[11px] px-2 py-1 rounded-md transition-colors whitespace-nowrap ${
+      className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-md transition-colors whitespace-nowrap ${
         active
           ? "bg-primary/15 text-primary ring-1 ring-primary/30"
           : "bg-accent/40 text-muted-foreground hover:bg-accent/70 hover:text-foreground"
@@ -174,7 +174,7 @@ function TypeFilterChip({
     >
       {meta.icon}
       <span>{meta.label}</span>
-      <span className="text-[9px] opacity-60">{count}</span>
+      <span className="text-2xs opacity-60">{count}</span>
     </button>
   );
 }
@@ -216,7 +216,7 @@ function ComponentBadges({ c }: { c: PluginComponents }) {
       {items.map((label) => (
         <span
           key={label}
-          className="text-[10px] leading-tight px-1.5 py-[2px] rounded-[4px] bg-accent/60 text-muted-foreground"
+          className="text-2xs leading-tight px-1.5 py-[2px] rounded-[4px] bg-accent/60 text-muted-foreground"
         >
           {label}
         </span>
@@ -227,7 +227,7 @@ function ComponentBadges({ c }: { c: PluginComponents }) {
 
 function ScopeBadge({ scope }: { scope: string }) {
   return (
-    <span className="inline-flex items-center gap-[3px] text-[10px] px-1.5 py-[2px] rounded-[4px] bg-primary/10 text-primary/80">
+    <span className="inline-flex items-center gap-[3px] text-2xs px-1.5 py-[2px] rounded-[4px] bg-primary/10 text-primary/80">
       {scope === "user" ? <Globe size={9} /> : <Library size={9} />}
       {scope}
     </span>
@@ -249,7 +249,7 @@ function CategoryChip({
   return (
     <button
       onClick={onClick}
-      className={`inline-flex items-center gap-1 text-[11px] px-2 py-1 rounded-md transition-colors whitespace-nowrap ${
+      className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-md transition-colors whitespace-nowrap ${
         active
           ? "bg-primary/15 text-primary ring-1 ring-primary/30"
           : "bg-accent/40 text-muted-foreground hover:bg-accent/70 hover:text-foreground"
@@ -257,7 +257,7 @@ function CategoryChip({
     >
       {meta.icon}
       <span>{meta.label}</span>
-      <span className="text-[9px] opacity-60">{count}</span>
+      <span className="text-2xs opacity-60">{count}</span>
     </button>
   );
 }
@@ -321,20 +321,20 @@ const PluginCard = React.memo(function PluginCard({
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
-            <span className="text-[13px] font-medium text-foreground truncate">
+            <span className="text-sm font-medium text-foreground truncate">
               {searchQuery ? highlightMatch(plugin.name, searchQuery) : plugin.name}
             </span>
             {isInstalled && (
               <Check size={12} className="text-success shrink-0" />
             )}
             {isBlocked && (
-              <span className="text-[9px] px-1 py-[1px] rounded bg-destructive/15 text-destructive font-medium shrink-0">
+              <span className="text-2xs px-1 py-[1px] rounded bg-destructive/15 text-destructive font-medium shrink-0">
                 blocked
               </span>
             )}
           </div>
           {plugin.authorName && (
-            <span className="text-[11px] text-muted-foreground/70">
+            <span className="text-xs text-muted-foreground/70">
               {plugin.authorName}
             </span>
           )}
@@ -383,7 +383,7 @@ const PluginCard = React.memo(function PluginCard({
 
       {/* Description */}
       {plugin.description && (
-        <p className="text-[11px] leading-relaxed text-muted-foreground line-clamp-2">
+        <p className="text-xs leading-relaxed text-muted-foreground line-clamp-2">
           {searchQuery ? highlightMatch(plugin.description, searchQuery) : plugin.description}
         </p>
       )}
@@ -392,7 +392,7 @@ const PluginCard = React.memo(function PluginCard({
       <div className="flex items-center gap-2 flex-wrap mt-auto">
         {(plugin as AvailablePlugin).extensionType &&
           (plugin as AvailablePlugin).extensionType !== "plugin" && (
-          <span className="text-[10px] leading-tight px-1.5 py-[2px] rounded-[4px] bg-primary/8 text-primary/70 font-medium">
+          <span className="text-2xs leading-tight px-1.5 py-[2px] rounded-[4px] bg-primary/8 text-primary/70 font-medium">
             {TYPE_META[(plugin as AvailablePlugin).extensionType]?.label ??
               (plugin as AvailablePlugin).extensionType}
           </span>
@@ -401,7 +401,7 @@ const PluginCard = React.memo(function PluginCard({
         <div className="flex-1" />
         {installedScope && <ScopeBadge scope={installedScope} />}
         {uniqueInstalls > 0 && (
-          <span className="text-[10px] text-muted-foreground/50 flex items-center gap-0.5">
+          <span className="text-2xs text-muted-foreground/50 flex items-center gap-0.5">
             <Download size={9} className="opacity-60" />
             {formatInstalls(uniqueInstalls)}
           </span>
@@ -464,7 +464,7 @@ function PluginDetailDrawer({
           >
             <ArrowLeft size={15} />
           </button>
-          <span className="text-[11px] text-muted-foreground uppercase tracking-wider font-medium">
+          <span className="text-xs text-muted-foreground uppercase tracking-wider font-medium">
             Extension Details
           </span>
         </div>
@@ -490,16 +490,16 @@ function PluginDetailDrawer({
 
             <div className="flex items-center gap-2 mt-2 flex-wrap">
               {p.authorName && (
-                <span className="text-[11px] text-dim-foreground">
+                <span className="text-xs text-dim-foreground">
                   {p.authorName}
                 </span>
               )}
-              <span className="text-[10px] text-muted-foreground/50">
+              <span className="text-2xs text-muted-foreground/50">
                 {p.marketplace}
               </span>
               {isInstalled && <ScopeBadge scope={(p as InstalledPlugin).scope} />}
               {!isInstalled && (p as AvailablePlugin).uniqueInstalls > 0 && (
-                <span className="text-[10px] text-muted-foreground/50 flex items-center gap-0.5">
+                <span className="text-2xs text-muted-foreground/50 flex items-center gap-0.5">
                   <Download size={9} />
                   {formatInstalls((p as AvailablePlugin).uniqueInstalls)}
                 </span>
@@ -513,7 +513,7 @@ function PluginDetailDrawer({
             {p.keywords.length > 0 && (
               <div className="flex flex-wrap gap-1 mt-1.5">
                 {p.keywords.map((kw) => (
-                  <span key={kw} className="text-[9px] px-1.5 py-[1px] rounded-full bg-accent/60 text-muted-foreground/70">
+                  <span key={kw} className="text-2xs px-1.5 py-[1px] rounded-full bg-accent/60 text-muted-foreground/70">
                     {kw}
                   </span>
                 ))}
@@ -566,7 +566,7 @@ function PluginDetailDrawer({
                 Uninstall
               </Button>
               <div className="flex-1" />
-              <span className="text-[10px] text-muted-foreground/50">
+              <span className="text-2xs text-muted-foreground/50">
                 Updated {formatDate((p as InstalledPlugin).lastUpdated)}
               </span>
             </>
@@ -633,7 +633,7 @@ function PluginDetailDrawer({
                   `https://github.com/${p.marketplace === "claude-plugins-official" ? "anthropics/claude-plugins-official" : p.marketplace}`,
                 )
               }
-              className="text-[11px] text-primary/70 hover:text-primary inline-flex items-center gap-1 transition-colors"
+              className="text-xs text-primary/70 hover:text-primary inline-flex items-center gap-1 transition-colors"
             >
               View on GitHub <ExternalLink size={10} />
             </button>
@@ -643,7 +643,7 @@ function PluginDetailDrawer({
         {showScrollTop && (
           <button
             onClick={() => panelRef.current?.scrollTo({ top: 0, behavior: "smooth" })}
-            className="sticky bottom-3 float-right mr-3 flex items-center gap-1 px-2.5 py-1.5 rounded-full text-[11px] font-medium text-foreground bg-card/90 backdrop-blur ring-1 ring-border/40 shadow-md hover:ring-primary/30 transition-all"
+            className="sticky bottom-3 float-right mr-3 flex items-center gap-1 px-2.5 py-1.5 rounded-full text-xs font-medium text-foreground bg-card/90 backdrop-blur ring-1 ring-border/40 shadow-md hover:ring-primary/30 transition-all"
           >
             <ChevronUp size={12} />
             Top
@@ -679,7 +679,7 @@ function MarketplaceSources({
     <div className="border-t border-border/30">
       <button
         type="button"
-        className="w-full px-3 py-2 flex items-center gap-2 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/20 transition-colors"
+        className="w-full px-3 py-2 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/20 transition-colors"
         onClick={() => setExpanded((p) => !p)}
       >
         {expanded ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
@@ -687,7 +687,7 @@ function MarketplaceSources({
         <span className="font-medium uppercase tracking-wider">
           Marketplace Sources
         </span>
-        <span className="text-[9px] opacity-50 bg-accent/40 px-1.5 py-0.5 rounded-full ml-auto">
+        <span className="text-2xs opacity-50 bg-accent/40 px-1.5 py-0.5 rounded-full ml-auto">
           {marketplaces.length}
         </span>
       </button>
@@ -701,8 +701,8 @@ function MarketplaceSources({
             >
               <Globe size={11} className="text-muted-foreground/50 shrink-0" />
               <div className="flex-1 min-w-0">
-                <div className="text-[11px] text-foreground truncate">{m.name}</div>
-                <div className="text-[10px] text-muted-foreground/40 truncate">{m.sourceRepo}</div>
+                <div className="text-xs text-foreground truncate">{m.name}</div>
+                <div className="text-2xs text-muted-foreground/40 truncate">{m.sourceRepo}</div>
               </div>
               <button
                 onClick={() => onRemove(m.name)}
@@ -733,7 +733,7 @@ function MarketplaceSources({
                     }
                   }}
                   placeholder="owner/repo or URL..."
-                  className="flex-1 min-w-0 bg-transparent text-[11px] text-foreground placeholder:text-muted-foreground/40 border border-border/60 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary/40"
+                  className="flex-1 min-w-0 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/40 border border-border/60 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary/40"
                   autoFocus
                 />
                 <button
@@ -760,7 +760,7 @@ function MarketplaceSources({
               <>
                 <button
                   onClick={() => setAddInputOpen(true)}
-                  className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground transition-colors px-2 py-1"
+                  className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1"
                 >
                   <Plus size={11} /> Add source
                 </button>
@@ -768,7 +768,7 @@ function MarketplaceSources({
                 <button
                   onClick={onRefresh}
                   disabled={refreshLoading}
-                  className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground disabled:opacity-40 transition-colors px-2 py-1"
+                  className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground disabled:opacity-40 transition-colors px-2 py-1"
                 >
                   <RefreshCw size={11} className={refreshLoading ? "animate-spin" : ""} />
                   Refresh
@@ -1118,7 +1118,7 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder="Search extensions..."
-                className="flex-1 min-w-0 bg-transparent text-[12px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none"
+                className="flex-1 min-w-0 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 focus:outline-none"
               />
               {searchQuery && (
                 <button
@@ -1143,7 +1143,7 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
               <RefreshCw size={13} />
             </button>
             {installedCount > 0 && (
-              <span className="text-[10px] text-primary/70 bg-primary/10 px-2 py-1 rounded-md whitespace-nowrap">
+              <span className="text-2xs text-primary/70 bg-primary/10 px-2 py-1 rounded-md whitespace-nowrap">
                 {installedCount} installed
               </span>
             )}
@@ -1152,7 +1152,7 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
           {/* Type filter chips */}
           {visibleTypes.length > 2 && (
             <div className="flex items-center gap-1.5 flex-wrap">
-              <span className="text-[10px] text-muted-foreground/50 uppercase tracking-wider mr-0.5">Type</span>
+              <span className="text-2xs text-muted-foreground/50 uppercase tracking-wider mr-0.5">Type</span>
               {visibleTypes.map((id) => (
                 <TypeFilterChip
                   key={id}
@@ -1167,7 +1167,7 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
 
           {/* Category filter chips */}
           <div className="flex items-center gap-1.5 flex-wrap">
-            <span className="text-[10px] text-muted-foreground/50 uppercase tracking-wider mr-0.5">Category</span>
+            <span className="text-2xs text-muted-foreground/50 uppercase tracking-wider mr-0.5">Category</span>
             {visibleCategories.map((id) => (
               <CategoryChip
                 key={id}
diff --git a/src/components/SkillsRules/RulesTreePanel.tsx b/src/components/SkillsRules/RulesTreePanel.tsx
index 6ca8990..30eaca2 100644
--- a/src/components/SkillsRules/RulesTreePanel.tsx
+++ b/src/components/SkillsRules/RulesTreePanel.tsx
@@ -78,7 +78,7 @@ function DirectoryGroup({
 
   return (
     <div className="mt-0.5">
-      <div className="flex items-center gap-1.5 px-2 py-0.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+      <div className="flex items-center gap-1.5 px-2 py-0.5 text-2xs font-medium text-muted-foreground uppercase tracking-wider">
         <FolderOpen size={10} className="opacity-50" />
         {label}
       </div>
@@ -149,7 +149,7 @@ function AgentGroup({
         <span className="text-xs font-medium text-foreground flex-1 truncate">
           {group.displayName}
         </span>
-        <span className="text-[10px] text-muted-foreground tabular-nums">
+        <span className="text-2xs text-muted-foreground tabular-nums">
           {totalRules}
         </span>
       </button>
@@ -189,7 +189,7 @@ function AgentGroup({
           {/* Global section */}
           {(globalPrimary.length > 0 || globalNested.length > 0) && (
             <div className="ml-3 mt-1">
-              <div className="flex items-center gap-1.5 px-2 py-0.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+              <div className="flex items-center gap-1.5 px-2 py-0.5 text-2xs font-medium text-muted-foreground uppercase tracking-wider">
                 <Globe size={10} className="opacity-50" />
                 Global
               </div>
@@ -217,7 +217,7 @@ function AgentGroup({
           {/* Add rule button */}
           <button
             onClick={() => onCreateClick(group.agentName)}
-            className="flex items-center gap-1.5 ml-3 px-2 py-1 mt-0.5 rounded-md text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/40 transition-colors"
+            className="flex items-center gap-1.5 ml-3 px-2 py-1 mt-0.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent/40 transition-colors"
           >
             <Plus size={11} />
             Add rule
diff --git a/src/components/SkillsRules/SkillsRulesView.tsx b/src/components/SkillsRules/SkillsRulesView.tsx
index f7ebc32..45164b8 100644
--- a/src/components/SkillsRules/SkillsRulesView.tsx
+++ b/src/components/SkillsRules/SkillsRulesView.tsx
@@ -44,7 +44,7 @@ export default function SkillsRulesView() {
   return (
     <ViewLayout>
       <ViewLayout.Toolbar>
-        <span className="text-[13px] font-medium text-foreground mr-1">
+        <span className="text-sm font-medium text-foreground mr-1">
           Extensions
         </span>
 
@@ -60,6 +60,7 @@ export default function SkillsRulesView() {
           barRadius="md"
           tabRadius="md"
           fullWidth={false}
+          className="p-0"
         >
           <Tabs.Tab value="rules">Rules</Tabs.Tab>
           <Tabs.Tab value="skills">Skills</Tabs.Tab>
@@ -75,7 +76,7 @@ export default function SkillsRulesView() {
             icon={<Bot size={13} />}
             badge={
               acpUpdatesAvailable > 0 ? (
-                <span className="ml-0.5 flex items-center gap-1 rounded-full bg-warning/20 px-1.5 py-0.5 text-[9px] font-bold text-warning">
+                <span className="ml-0.5 flex items-center gap-1 rounded-full bg-warning/20 px-1.5 py-0.5 text-2xs font-bold text-warning">
                   <ArrowUpCircle size={9} />
                   {acpUpdatesAvailable} {acpUpdatesAvailable === 1 ? "update" : "updates"}
                 </span>
@@ -89,12 +90,14 @@ export default function SkillsRulesView() {
         <div className="flex-1" />
       </ViewLayout.Toolbar>
 
-      {activeTab === "rules" && <RulesTab projectId={activeProjectId} />}
-      {activeTab === "skills" && <SkillsTab projectId={activeProjectId} />}
-      {activeTab === "plugins" && <PluginsTab projectId={activeProjectId} />}
-      {activeTab === "agents" && (
-        <AgentsExtensionTab projectId={activeProjectId} />
-      )}
+      <div className="flex flex-col flex-1 min-h-0">
+        {activeTab === "rules" && <RulesTab projectId={activeProjectId} />}
+        {activeTab === "skills" && <SkillsTab projectId={activeProjectId} />}
+        {activeTab === "plugins" && <PluginsTab projectId={activeProjectId} />}
+        {activeTab === "agents" && (
+          <AgentsExtensionTab projectId={activeProjectId} />
+        )}
+      </div>
     </ViewLayout>
   );
 }
diff --git a/src/components/SkillsRules/SkillsTab.tsx b/src/components/SkillsRules/SkillsTab.tsx
index 9f1becd..c74f661 100644
--- a/src/components/SkillsRules/SkillsTab.tsx
+++ b/src/components/SkillsRules/SkillsTab.tsx
@@ -189,13 +189,13 @@ export default function SkillsTab({ projectId }: Props) {
                         />
                       </button>
                       {skill.installs > 0 && (
-                        <span className="text-[10px] text-muted-foreground bg-accent/60 px-1.5 py-0.5 rounded-full">
+                        <span className="text-2xs text-muted-foreground bg-accent/60 px-1.5 py-0.5 rounded-full">
                           {skill.installs.toLocaleString()} installs
                         </span>
                       )}
                     </div>
                     <div className="flex items-center gap-1 mt-0.5">
-                      <span className="text-[10px] text-dim-foreground truncate">
+                      <span className="text-2xs text-dim-foreground truncate">
                         {highlightMatch(skill.source, query)}
                       </span>
                     </div>
diff --git a/src/components/TaskDetail/AgentActivityTab.tsx b/src/components/TaskDetail/AgentActivityTab.tsx
index 5af3ed5..c35b1b3 100644
--- a/src/components/TaskDetail/AgentActivityTab.tsx
+++ b/src/components/TaskDetail/AgentActivityTab.tsx
@@ -80,7 +80,7 @@ export default function AgentActivityTab({
       <div className="flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground">
         <Activity size={20} className="opacity-40" />
         <p className="text-xs">No agent activity or history yet</p>
-        <p className="text-[10px] opacity-60">
+        <p className="text-2xs opacity-60">
           Launch a session for this task to see agent activity
         </p>
       </div>
@@ -119,7 +119,7 @@ function LiveStatusSection({ mcpStatus }: { mcpStatus: McpSessionState }) {
             {mcpStatus.message || mcpStatus.status || "Working"}
           </p>
           {mcpStatus.activity && (
-            <p className="text-[10px] text-muted-foreground capitalize">
+            <p className="text-2xs text-muted-foreground capitalize">
               {mcpStatus.activity}
             </p>
           )}
@@ -129,7 +129,7 @@ function LiveStatusSection({ mcpStatus }: { mcpStatus: McpSessionState }) {
       {/* Progress bar */}
       {mcpStatus.current_step != null && mcpStatus.total_steps != null && (
         <div className="space-y-1">
-          <div className="flex items-center justify-between text-[10px] text-muted-foreground">
+          <div className="flex items-center justify-between text-2xs text-muted-foreground">
             <span>{mcpStatus.description || "Processing"}</span>
             <span>
               {mcpStatus.current_step}/{mcpStatus.total_steps}
@@ -208,7 +208,7 @@ function HistorySection({
       {hasLiveStatus && (
         <div className="border-t border-border/30 pt-2" />
       )}
-      <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+      <div className="flex items-center gap-1.5 text-2xs text-muted-foreground">
         <History size={10} className="opacity-60" />
         <span className="font-medium uppercase tracking-wider">History</span>
         {loading && <Loader2 size={10} className="animate-spin ml-1" />}
@@ -219,7 +219,7 @@ function HistorySection({
           <div key={group.sessionId ?? gi} className="flex flex-col">
             <div className={`flex items-center gap-1.5 py-1.5 ${gi > 0 ? "mt-1" : ""}`}>
               <div className="flex-1 border-t border-border/20" />
-              <span className="text-[9px] text-muted-foreground/40 shrink-0">
+              <span className="text-2xs text-muted-foreground/40 shrink-0">
                 {formatSessionLabel(group)}
               </span>
               <div className="flex-1 border-t border-border/20" />
@@ -255,7 +255,7 @@ function HistoryEntry({ event }: { event: TaskActivity }) {
       onClick={isExpandable ? () => setExpanded((v) => !v) : undefined}
     >
       <div className="flex items-center gap-1.5">
-        <span className="text-[11px] leading-none tabular-nums text-muted-foreground/60 w-[38px] shrink-0">
+        <span className="text-xs leading-none tabular-nums text-muted-foreground/60 w-[38px] shrink-0">
           {time}
         </span>
         <span className={`shrink-0 flex items-center ${color}`}>
diff --git a/src/components/TaskDetail/CreateTaskDialog.tsx b/src/components/TaskDetail/CreateTaskDialog.tsx
index 6f5070c..12df29d 100644
--- a/src/components/TaskDetail/CreateTaskDialog.tsx
+++ b/src/components/TaskDetail/CreateTaskDialog.tsx
@@ -439,7 +439,7 @@ export default function CreateTaskDialog({
             placeholder="Describe the task..."
             className="min-h-[160px] max-h-[320px] resize-y overflow-y-auto font-mono text-xs leading-relaxed"
           />
-          <p className="mt-1 text-[10px] text-muted-foreground">
+          <p className="mt-1 text-2xs text-muted-foreground">
             Ctrl+Enter to create
           </p>
         </div>
@@ -478,7 +478,7 @@ export default function CreateTaskDialog({
         <button
           type="button"
           onClick={() => setShowAdvanced((v) => !v)}
-          className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground cursor-pointer transition-colors"
+          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground cursor-pointer transition-colors"
         >
           <ChevronDown
             className={`size-3 transition-transform duration-150 ${showAdvanced ? "rotate-0" : "-rotate-90"}`}
@@ -508,7 +508,7 @@ export default function CreateTaskDialog({
                     <Badge
                       key={label}
                       variant="secondary"
-                      className="text-[10px] px-1.5 py-0"
+                      className="text-2xs px-1.5 py-0"
                     >
                       {label}
                     </Badge>
@@ -559,7 +559,7 @@ export default function CreateTaskDialog({
                         <Badge
                           key={depId}
                           variant="outline"
-                          className="text-[10px] px-1.5 py-0 gap-1 cursor-pointer"
+                          className="text-2xs px-1.5 py-0 gap-1 cursor-pointer"
                           onClick={() =>
                             setSelectedDeps((prev) =>
                               prev.filter((d) => d !== depId),
diff --git a/src/components/TaskDetail/EpicChildTasks.tsx b/src/components/TaskDetail/EpicChildTasks.tsx
index 84d5be9..f9ae62b 100644
--- a/src/components/TaskDetail/EpicChildTasks.tsx
+++ b/src/components/TaskDetail/EpicChildTasks.tsx
@@ -3,8 +3,9 @@ import { useCallback, useState } from "react";
 
 import { useTheme } from "../../contexts/ThemeContext";
 import { useAppStore } from "../../store/appStore";
-import type { Task, TaskStatus } from "../../types";
+import type { Task } from "../../types";
 import { DEFAULT_PRIORITIES, getPriorityCssVar } from "../../lib/priorities";
+import { TASK_STATUS_CSS_COLORS } from "../../lib/taskStatusColors";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 import { glassStyles } from "../ui/orecus.io/lib/color-utils";
@@ -16,15 +17,6 @@ interface EpicChildTasksProps {
   onNavigateToTask: (taskId: string) => void;
 }
 
-const STATUS_COLORS: Record<TaskStatus, string> = {
-  backlog: "var(--muted-foreground)",
-  ready: "var(--primary)",
-  "in-progress": "var(--warning)",
-  "in-review": "var(--primary)",
-  done: "var(--success)",
-  archived: "var(--muted-foreground)",
-};
-
 
 export default function EpicChildTasks({
   epicId,
@@ -81,10 +73,10 @@ export default function EpicChildTasks({
               {/* Status dot */}
               <span
                 className="inline-block size-2 rounded-full shrink-0"
-                style={{ background: STATUS_COLORS[task.status] }}
+                style={{ background: TASK_STATUS_CSS_COLORS[task.status] }}
               />
               {/* Task ID */}
-              <span className="font-mono text-[10px] text-muted-foreground shrink-0">
+              <span className="font-mono text-2xs text-muted-foreground shrink-0">
                 {task.id}
               </span>
               {/* Title */}
@@ -94,7 +86,7 @@ export default function EpicChildTasks({
               {/* Priority badge */}
               <Badge
                 variant="outline"
-                className="text-[9px] px-1 py-0 leading-tight shrink-0"
+                className="text-2xs px-1 py-0 leading-tight shrink-0"
                 style={{
                   color: getPriorityCssVar(task.priority, priorities),
                   borderColor: `color-mix(in oklch, ${getPriorityCssVar(task.priority, priorities)} 30%, transparent)`,
diff --git a/src/components/TaskDetail/GitHubTab.tsx b/src/components/TaskDetail/GitHubTab.tsx
index bb101ed..ecbf73d 100644
--- a/src/components/TaskDetail/GitHubTab.tsx
+++ b/src/components/TaskDetail/GitHubTab.tsx
@@ -170,7 +170,7 @@ export default function GitHubTab({
       <div className="flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground">
         <Github size={20} className="opacity-40" />
         <p className="text-xs">No GitHub issue linked</p>
-        <p className="text-[10px] opacity-60">
+        <p className="text-2xs opacity-60">
           Link a GitHub issue to see its details and comments
         </p>
       </div>
@@ -184,12 +184,12 @@ export default function GitHubTab({
         {/* Section header */}
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <span className="text-[10px] font-medium text-muted-foreground tracking-wide uppercase">
+            <span className="text-2xs font-medium text-muted-foreground tracking-wide uppercase">
               Issue
             </span>
             {issue && (
               <span
-                className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium ${
+                className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-2xs font-medium ${
                   issue.state === "open"
                     ? "bg-success/15 text-success"
                     : "bg-destructive/15 text-destructive"
@@ -203,7 +203,7 @@ export default function GitHubTab({
             <button
               onClick={handleRefresh}
               disabled={refreshing}
-              className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent transition-colors disabled:opacity-40"
+              className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors disabled:opacity-40"
               title="Refresh"
             >
               <RefreshCw
@@ -213,7 +213,7 @@ export default function GitHubTab({
             </button>
             <button
               onClick={handleOpenOnGitHub}
-              className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+              className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
               title="Open on GitHub"
             >
               <ExternalLink size={10} />
@@ -234,7 +234,7 @@ export default function GitHubTab({
             <p className="text-xs text-destructive/80">{issueError}</p>
             <button
               onClick={fetchIssue}
-              className="mt-1 flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-primary hover:bg-accent transition-colors"
+              className="mt-1 flex items-center gap-1 rounded-md px-2 py-1 text-2xs text-primary hover:bg-accent transition-colors"
             >
               <RefreshCw size={10} />
               Retry
@@ -247,7 +247,7 @@ export default function GitHubTab({
               <h3 className="text-sm font-medium text-foreground leading-snug">
                 {issue.title}
               </h3>
-              <span className="text-[10px] text-muted-foreground/50 shrink-0">
+              <span className="text-2xs text-muted-foreground/50 shrink-0">
                 #{issue.number}
               </span>
             </div>
@@ -257,7 +257,7 @@ export default function GitHubTab({
                 {issue.labels.map((label) => (
                   <span
                     key={label.name}
-                    className="inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-border/40"
+                    className="inline-flex items-center rounded-full px-1.5 py-0.5 text-2xs font-medium ring-1 ring-border/40"
                     style={
                       label.color
                         ? {
@@ -291,7 +291,7 @@ export default function GitHubTab({
               </p>
             )}
             {/* Meta info */}
-            <div className="flex items-center gap-3 text-[10px] text-muted-foreground/50">
+            <div className="flex items-center gap-3 text-2xs text-muted-foreground/50">
               <span>Created {relativeTime(issue.created_at)}</span>
               {issue.updated_at !== issue.created_at && (
                 <span>Updated {relativeTime(issue.updated_at)}</span>
@@ -314,11 +314,11 @@ export default function GitHubTab({
         {/* Section header */}
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-1.5">
-            <span className="text-[10px] font-medium text-muted-foreground tracking-wide uppercase">
+            <span className="text-2xs font-medium text-muted-foreground tracking-wide uppercase">
               Comments
             </span>
             {comments.length > 0 && (
-              <span className="text-[10px] text-muted-foreground/50">
+              <span className="text-2xs text-muted-foreground/50">
                 ({comments.length})
               </span>
             )}
@@ -337,7 +337,7 @@ export default function GitHubTab({
             <p className="text-xs text-destructive/80">{commentsError}</p>
             <button
               onClick={fetchComments}
-              className="mt-1 flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-primary hover:bg-accent transition-colors"
+              className="mt-1 flex items-center gap-1 rounded-md px-2 py-1 text-2xs text-primary hover:bg-accent transition-colors"
             >
               <RefreshCw size={10} />
               Retry
@@ -347,7 +347,7 @@ export default function GitHubTab({
           <>
             {/* Error banner (non-blocking) */}
             {commentsError && (
-              <div className="flex items-center gap-1.5 rounded-md bg-destructive/10 px-2 py-1.5 text-[10px] text-destructive">
+              <div className="flex items-center gap-1.5 rounded-md bg-destructive/10 px-2 py-1.5 text-2xs text-destructive">
                 <AlertCircle size={10} className="shrink-0" />
                 <span className="flex-1 truncate">{commentsError}</span>
               </div>
@@ -358,7 +358,7 @@ export default function GitHubTab({
               <div className="flex flex-col items-center justify-center gap-1.5 py-6 text-muted-foreground">
                 <MessageCircle size={16} className="opacity-30" />
                 <p className="text-xs">No comments yet</p>
-                <p className="text-[10px] opacity-50">Be the first to comment</p>
+                <p className="text-2xs opacity-50">Be the first to comment</p>
               </div>
             ) : (
               <div className="flex flex-col gap-0 -mx-0.5 px-0.5">
@@ -384,13 +384,13 @@ export default function GitHubTab({
                 className="w-full resize-none rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-primary/50 disabled:opacity-50"
               />
               <div className="flex items-center justify-between">
-                <span className="text-[9px] text-muted-foreground/40">
+                <span className="text-2xs text-muted-foreground/40">
                   {commentBody.trim() ? "\u2318\u21B5 to send" : ""}
                 </span>
                 <button
                   onClick={handlePost}
                   disabled={posting || !commentBody.trim()}
-                  className="flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-[11px] font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-40 disabled:pointer-events-none"
+                  className="flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-40 disabled:pointer-events-none"
                 >
                   {posting ? (
                     <Loader2 size={10} className="animate-spin" />
@@ -427,15 +427,15 @@ const CommentEntry = React.memo(function CommentEntry({
           />
         ) : (
           <div className="size-5 rounded-full bg-accent flex items-center justify-center">
-            <span className="text-[9px] font-medium text-muted-foreground">
+            <span className="text-2xs font-medium text-muted-foreground">
               {comment.author.charAt(0).toUpperCase()}
             </span>
           </div>
         )}
-        <span className="text-[11px] font-medium text-foreground">
+        <span className="text-xs font-medium text-foreground">
           {comment.author}
         </span>
-        <span className="text-[10px] text-muted-foreground/50">
+        <span className="text-2xs text-muted-foreground/50">
           {relativeTime(comment.created_at)}
         </span>
       </div>
diff --git a/src/components/TaskDetail/SyncToGitHubDialog.tsx b/src/components/TaskDetail/SyncToGitHubDialog.tsx
index 00d6af6..c55c092 100644
--- a/src/components/TaskDetail/SyncToGitHubDialog.tsx
+++ b/src/components/TaskDetail/SyncToGitHubDialog.tsx
@@ -65,10 +65,10 @@ function SyncCheckboxRow({
 
       {/* Label + preview */}
       <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-        <span className="text-[13px] font-medium text-foreground">
+        <span className="text-sm font-medium text-foreground">
           {label}
         </span>
-        <span className="truncate text-[11px] text-muted-foreground">
+        <span className="truncate text-xs text-muted-foreground">
           {preview}
         </span>
       </div>
diff --git a/src/components/TaskDetail/TaskBody.tsx b/src/components/TaskDetail/TaskBody.tsx
index d91ae96..2e194ab 100644
--- a/src/components/TaskDetail/TaskBody.tsx
+++ b/src/components/TaskDetail/TaskBody.tsx
@@ -37,16 +37,16 @@ export default function TaskBody({ body, onChange, onSave }: TaskBodyProps) {
       >
         {/* Edit mode toolbar */}
         <div className="flex items-center justify-between pb-2">
-          <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
             Editing
           </span>
           <div className="flex items-center gap-2">
-            <span className="text-[10px] text-muted-foreground">
+            <span className="text-2xs text-muted-foreground">
               Ctrl+Enter to save
             </span>
             <button
               onClick={() => setEditing(false)}
-              className="cursor-pointer rounded-md px-2 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              className="cursor-pointer rounded-md px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
             >
               Done
             </button>
@@ -62,7 +62,7 @@ export default function TaskBody({ body, onChange, onSave }: TaskBodyProps) {
       {/* Edit button overlay */}
       <button
         onClick={() => setEditing(true)}
-        className="cursor-pointer absolute right-2 top-1 z-10 flex items-center gap-1.5 rounded-md bg-accent/80 px-2 py-1 text-[11px] text-muted-foreground opacity-30 backdrop-blur-sm transition-all hover:bg-accent hover:text-foreground group-hover/body:opacity-100 group-focus-within/body:opacity-100"
+        className="cursor-pointer absolute right-2 top-1 z-10 flex items-center gap-1.5 rounded-md bg-accent/80 px-2 py-1 text-xs text-muted-foreground opacity-30 backdrop-blur-sm transition-all hover:bg-accent hover:text-foreground group-hover/body:opacity-100 group-focus-within/body:opacity-100"
       >
         <Pencil className="size-3" />
         Edit
diff --git a/src/components/TaskDetail/TaskDetailView.tsx b/src/components/TaskDetail/TaskDetailView.tsx
index cdba352..58aa3e5 100644
--- a/src/components/TaskDetail/TaskDetailView.tsx
+++ b/src/components/TaskDetail/TaskDetailView.tsx
@@ -206,7 +206,7 @@ export default function TaskDetailView() {
           Back
         </Button>
 
-        <Badge variant="outline" className="font-mono text-[11px]">
+        <Badge variant="outline" className="font-mono text-xs">
           {isEpic && <Layers size={10} className="mr-1 inline" />}
           {activeTaskId}
         </Badge>
@@ -224,7 +224,7 @@ export default function TaskDetailView() {
         {formData.github_issue && (
           <button
             onClick={handleOpenIssue}
-            className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-mono bg-[color-mix(in_oklch,var(--primary)_10%,transparent)] text-primary hover:bg-[color-mix(in_oklch,var(--primary)_18%,transparent)] transition-colors cursor-pointer"
+            className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-mono bg-primary/10 text-primary hover:bg-primary/18 transition-colors cursor-pointer"
             title="Open issue on GitHub"
           >
             <Github size={11} />
diff --git a/src/components/TaskDetail/TaskMarkdownEditor.tsx b/src/components/TaskDetail/TaskMarkdownEditor.tsx
index 1062f26..eac10c9 100644
--- a/src/components/TaskDetail/TaskMarkdownEditor.tsx
+++ b/src/components/TaskDetail/TaskMarkdownEditor.tsx
@@ -26,7 +26,7 @@ export default function TaskMarkdownEditor({ body, onChange }: TaskMarkdownEdito
       value={body}
       onChange={(e) => onChange(e.target.value)}
       placeholder={PLACEHOLDER}
-      className="min-h-0 flex-1 resize-none font-mono text-[13px] leading-relaxed [field-sizing:fixed]"
+      className="min-h-0 flex-1 resize-none font-mono text-sm leading-relaxed [field-sizing:fixed]"
     />
   );
 }
diff --git a/src/components/TaskDetail/TaskMetadataForm.tsx b/src/components/TaskDetail/TaskMetadataForm.tsx
index 08fdcaa..a5dc655 100644
--- a/src/components/TaskDetail/TaskMetadataForm.tsx
+++ b/src/components/TaskDetail/TaskMetadataForm.tsx
@@ -9,24 +9,12 @@ import {
 import type { TaskStatus, AgentInfo } from "../../types";
 import { useAppStore } from "../../store/appStore";
 import { DEFAULT_PRIORITIES, getPriorityLabel, getPriorityCssVar } from "../../lib/priorities";
+import { TASK_STATUS_CSS_COLORS, TASK_STATUS_LABELS } from "../../lib/taskStatusColors";
 
-const STATUS_OPTIONS: { value: TaskStatus; label: string }[] = [
-  { value: "backlog", label: "Backlog" },
-  { value: "ready", label: "Ready" },
-  { value: "in-progress", label: "In Progress" },
-  { value: "in-review", label: "In Review" },
-  { value: "done", label: "Done" },
-  { value: "archived", label: "Archived" },
-];
-
-const STATUS_COLORS: Record<TaskStatus, string> = {
-  "backlog": "var(--muted-foreground)",
-  "ready": "var(--primary)",
-  "in-progress": "var(--warning)",
-  "in-review": "var(--primary)",
-  "done": "var(--success)",
-  "archived": "var(--muted-foreground)",
-};
+const STATUS_OPTIONS: { value: TaskStatus; label: string }[] =
+  (["backlog", "ready", "in-progress", "in-review", "done", "archived"] as TaskStatus[]).map(
+    (v) => ({ value: v, label: TASK_STATUS_LABELS[v] }),
+  );
 
 export interface TaskFormData {
   title: string;
@@ -49,7 +37,7 @@ interface TaskMetadataFormProps {
 
 function FieldLabel({ children }: { children: React.ReactNode }) {
   return (
-    <span className="mb-1 block text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+    <span className="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground">
       {children}
     </span>
   );
@@ -59,7 +47,7 @@ function ReadonlyField({ label, children }: { label: string; children: React.Rea
   return (
     <div>
       <FieldLabel>{label}</FieldLabel>
-      <div className="min-h-[32px] text-[13px] text-foreground">
+      <div className="min-h-[32px] text-sm text-foreground">
         {children}
       </div>
     </div>
@@ -88,7 +76,7 @@ export default function TaskMetadataForm({ data, onChange, editing, agents }: Ta
           <span className="inline-flex items-center gap-1.5">
             <span
               className="inline-block size-2 rounded-full"
-              style={{ background: STATUS_COLORS[data.status] }}
+              style={{ background: TASK_STATUS_CSS_COLORS[data.status] }}
             />
             {statusLabel}
           </span>
diff --git a/src/components/TaskDetail/TaskMetadataSidebar.tsx b/src/components/TaskDetail/TaskMetadataSidebar.tsx
index 0c4449a..c73b03a 100644
--- a/src/components/TaskDetail/TaskMetadataSidebar.tsx
+++ b/src/components/TaskDetail/TaskMetadataSidebar.tsx
@@ -28,24 +28,12 @@ import type { TaskFormData } from "./TaskMetadataForm";
 import { useAppStore } from "../../store/appStore";
 import type { AgentInfo, Task, TaskStatus, TaskType } from "../../types";
 import { DEFAULT_PRIORITIES, getPriorityLabel, getPriorityCssVar } from "../../lib/priorities";
+import { TASK_STATUS_CSS_COLORS, TASK_STATUS_LABELS } from "../../lib/taskStatusColors";
 
-const STATUS_OPTIONS: { value: TaskStatus; label: string }[] = [
-  { value: "backlog", label: "Backlog" },
-  { value: "ready", label: "Ready" },
-  { value: "in-progress", label: "In Progress" },
-  { value: "in-review", label: "In Review" },
-  { value: "done", label: "Done" },
-  { value: "archived", label: "Archived" },
-];
-
-const STATUS_COLORS: Record<TaskStatus, string> = {
-  backlog: "var(--muted-foreground)",
-  ready: "var(--primary)",
-  "in-progress": "var(--warning)",
-  "in-review": "var(--primary)",
-  done: "var(--success)",
-  archived: "var(--muted-foreground)",
-};
+const STATUS_OPTIONS: { value: TaskStatus; label: string }[] =
+  (["backlog", "ready", "in-progress", "in-review", "done", "archived"] as TaskStatus[]).map(
+    (v) => ({ value: v, label: TASK_STATUS_LABELS[v] }),
+  );
 
 interface TaskMetadataSidebarProps {
   data: TaskFormData;
@@ -71,7 +59,7 @@ function SidebarSection({
 }) {
   return (
     <div className="space-y-1">
-      <span className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+      <span className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
         {icon}
         {label}
       </span>
@@ -182,7 +170,7 @@ export default function TaskMetadataSidebar({
             <span className="flex items-center gap-2">
               <span
                 className="inline-block size-2 rounded-full shrink-0"
-                style={{ background: STATUS_COLORS[data.status] }}
+                style={{ background: TASK_STATUS_CSS_COLORS[data.status] }}
               />
               <SelectValue />
             </span>
@@ -193,7 +181,7 @@ export default function TaskMetadataSidebar({
                 <span className="flex items-center gap-2">
                   <span
                     className="inline-block size-2 rounded-full"
-                    style={{ background: STATUS_COLORS[opt.value] }}
+                    style={{ background: TASK_STATUS_CSS_COLORS[opt.value] }}
                   />
                   {opt.label}
                 </span>
@@ -202,7 +190,7 @@ export default function TaskMetadataSidebar({
           </SelectContent>
         </Select>
         {taskType === "epic" && (
-          <p className="text-[10px] text-muted-foreground mt-0.5">
+          <p className="text-2xs text-muted-foreground mt-0.5">
             Auto-derived from children
           </p>
         )}
@@ -273,7 +261,7 @@ export default function TaskMetadataSidebar({
                 <SelectItem key={e.id} value={e.id}>
                   <span className="flex items-center gap-1.5">
                     <Layers size={10} className="shrink-0 text-muted-foreground" />
-                    <span className="font-mono text-[10px] text-muted-foreground">
+                    <span className="font-mono text-2xs text-muted-foreground">
                       {e.id}
                     </span>
                     <span className="truncate">{e.title}</span>
@@ -430,7 +418,7 @@ export default function TaskMetadataSidebar({
               <Badge
                 key={label}
                 variant="secondary"
-                className="text-[10px] px-1.5 py-0"
+                className="text-2xs px-1.5 py-0"
               >
                 {label}
               </Badge>
@@ -460,9 +448,9 @@ export default function TaskMetadataSidebar({
               >
                 <span
                   className="inline-block size-1.5 rounded-full shrink-0 translate-y-[-0.5px]"
-                  style={{ background: STATUS_COLORS[t.status] }}
+                  style={{ background: TASK_STATUS_CSS_COLORS[t.status] }}
                 />
-                <span className="font-mono text-[10px] text-muted-foreground shrink-0">
+                <span className="font-mono text-2xs text-muted-foreground shrink-0">
                   {t.id}
                 </span>
                 <span className="truncate text-foreground/80 group-hover/dep:text-foreground">
@@ -481,7 +469,7 @@ export default function TaskMetadataSidebar({
                 <Badge
                   key={dep}
                   variant="outline"
-                  className="font-mono text-[10px] px-1.5 py-0"
+                  className="font-mono text-2xs px-1.5 py-0"
                 >
                   {dep}
                 </Badge>
@@ -511,9 +499,9 @@ export default function TaskMetadataSidebar({
               >
                 <span
                   className="inline-block size-1.5 rounded-full shrink-0 translate-y-[-0.5px]"
-                  style={{ background: STATUS_COLORS[t.status] }}
+                  style={{ background: TASK_STATUS_CSS_COLORS[t.status] }}
                 />
-                <span className="font-mono text-[10px] text-muted-foreground shrink-0">
+                <span className="font-mono text-2xs text-muted-foreground shrink-0">
                   {t.id}
                 </span>
                 <span className="truncate text-foreground/80 group-hover/sub:text-foreground">
diff --git a/src/components/TaskDetail/TaskTitle.tsx b/src/components/TaskDetail/TaskTitle.tsx
index 6789d16..e061b35 100644
--- a/src/components/TaskDetail/TaskTitle.tsx
+++ b/src/components/TaskDetail/TaskTitle.tsx
@@ -60,7 +60,7 @@ export default function TaskTitle({ title, onChange, compact }: TaskTitleProps)
           onChange={(e) => setDraft(e.target.value)}
           onBlur={commitEdit}
           onKeyDown={handleKeyDown}
-          className={`h-auto border-none bg-transparent px-0 py-0 font-semibold text-foreground shadow-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 ${compact ? "text-[13px] leading-none" : "text-lg"}`}
+          className={`h-auto border-none bg-transparent px-0 py-0 font-semibold text-foreground shadow-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 ${compact ? "text-sm leading-none" : "text-lg"}`}
         />
         <button
           onMouseDown={(e) => {
@@ -80,7 +80,7 @@ export default function TaskTitle({ title, onChange, compact }: TaskTitleProps)
       onClick={() => setEditing(true)}
       className={`group/title flex cursor-pointer items-center gap-1.5 rounded-md text-left transition-colors hover:bg-accent/50 ${compact ? "min-w-0 max-w-[400px] py-0.5 px-1.5" : "w-full -mx-1 px-1 py-0.5"}`}
     >
-      <span className={`flex-1 font-semibold text-foreground ${compact ? "truncate text-[13px] leading-none" : "text-lg leading-snug"}`}>
+      <span className={`flex-1 font-semibold text-foreground ${compact ? "truncate text-sm leading-none" : "text-lg leading-snug"}`}>
         {title}
       </span>
       <Pencil className={`shrink-0 text-muted-foreground opacity-30 transition-opacity group-hover/title:opacity-100 group-focus-within/title:opacity-100 ${compact ? "size-3" : "mt-1 size-3.5"}`} />
diff --git a/src/components/ai-elements/commit.tsx b/src/components/ai-elements/commit.tsx
index fbc82d3..19ce6d5 100644
--- a/src/components/ai-elements/commit.tsx
+++ b/src/components/ai-elements/commit.tsx
@@ -316,10 +316,10 @@ export const CommitFileInfo = ({
 );
 
 const fileStatusStyles = {
-  added: "text-green-600 dark:text-green-400",
-  deleted: "text-red-600 dark:text-red-400",
-  modified: "text-yellow-600 dark:text-yellow-400",
-  renamed: "text-blue-600 dark:text-blue-400",
+  added: "text-success",
+  deleted: "text-destructive",
+  modified: "text-warning",
+  renamed: "text-primary",
 };
 
 const fileStatusLabels = {
@@ -409,7 +409,7 @@ export const CommitFileAdditions = ({
 
   return (
     <span
-      className={cn("text-green-600 dark:text-green-400", className)}
+      className={cn("text-success", className)}
       {...props}
     >
       {children ?? (
@@ -438,7 +438,7 @@ export const CommitFileDeletions = ({
 
   return (
     <span
-      className={cn("text-red-600 dark:text-red-400", className)}
+      className={cn("text-destructive", className)}
       {...props}
     >
       {children ?? (
diff --git a/src/components/ai-elements/package-info.tsx b/src/components/ai-elements/package-info.tsx
index 099c028..0650c5a 100644
--- a/src/components/ai-elements/package-info.tsx
+++ b/src/components/ai-elements/package-info.tsx
@@ -52,11 +52,10 @@ export const PackageInfoName = ({
 };
 
 const changeTypeStyles: Record<ChangeType, string> = {
-  added: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-  major: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
-  minor:
-    "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-  patch: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  added: "bg-primary/10 text-primary",
+  major: "bg-destructive/10 text-destructive",
+  minor: "bg-warning/10 text-warning",
+  patch: "bg-success/10 text-success",
   removed: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
 };
 
diff --git a/src/components/ai-elements/schema-display.tsx b/src/components/ai-elements/schema-display.tsx
index 24f7b92..2ff1754 100644
--- a/src/components/ai-elements/schema-display.tsx
+++ b/src/components/ai-elements/schema-display.tsx
@@ -45,12 +45,11 @@ const SchemaDisplayContext = createContext<SchemaDisplayContextType>({
 });
 
 const methodStyles: Record<HttpMethod, string> = {
-  DELETE: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
-  GET: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-  PATCH:
-    "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-  POST: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-  PUT: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400",
+  DELETE: "bg-destructive/10 text-destructive",
+  GET: "bg-success/10 text-success",
+  PATCH: "bg-warning/10 text-warning",
+  POST: "bg-primary/10 text-primary",
+  PUT: "bg-warning/10 text-warning",
 };
 
 export type SchemaDisplayHeaderProps = HTMLAttributes<HTMLDivElement>;
@@ -100,7 +99,7 @@ export const SchemaDisplayPath = ({
   // Highlight path parameters
   const highlightedPath = path.replaceAll(
     /\{([^}]+)\}/g,
-    '<span class="text-blue-600 dark:text-blue-400">{$1}</span>'
+    '<span class="text-primary">{$1}</span>'
   );
 
   return (
@@ -173,7 +172,7 @@ export const SchemaDisplayParameter = ({
       )}
       {required && (
         <Badge
-          className="bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400"
+          className="bg-destructive/10 text-destructive text-xs"
           variant="secondary"
         >
           required
@@ -252,7 +251,7 @@ export const SchemaDisplayProperty = ({
           </Badge>
           {required && (
             <Badge
-              className="bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400"
+              className="bg-destructive/10 text-destructive text-xs"
               variant="secondary"
             >
               required
@@ -304,7 +303,7 @@ export const SchemaDisplayProperty = ({
         </Badge>
         {required && (
           <Badge
-            className="bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400"
+            className="bg-destructive/10 text-destructive text-xs"
             variant="secondary"
           >
             required
diff --git a/src/components/ai-elements/test-results.tsx b/src/components/ai-elements/test-results.tsx
index 484bd40..80ad4d0 100644
--- a/src/components/ai-elements/test-results.tsx
+++ b/src/components/ai-elements/test-results.tsx
@@ -96,7 +96,7 @@ export const TestResultsSummary = ({
       {children ?? (
         <>
           <Badge
-            className="gap-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+            className="gap-1 bg-success/10 text-success"
             variant="secondary"
           >
             <CheckCircle2Icon className="size-3" />
@@ -104,7 +104,7 @@ export const TestResultsSummary = ({
           </Badge>
           {summary.failed > 0 && (
             <Badge
-              className="gap-1 bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+              className="gap-1 bg-destructive/10 text-destructive"
               variant="secondary"
             >
               <XCircleIcon className="size-3" />
@@ -113,7 +113,7 @@ export const TestResultsSummary = ({
           )}
           {summary.skipped > 0 && (
             <Badge
-              className="gap-1 bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+              className="gap-1 bg-warning/10 text-warning"
               variant="secondary"
             >
               <CircleIcon className="size-3" />
@@ -178,11 +178,11 @@ export const TestResultsProgress = ({
         <>
           <div className="flex h-2 overflow-hidden rounded-full bg-muted">
             <div
-              className="bg-green-500 transition-all"
+              className="bg-success transition-all"
               style={{ width: `${passedPercent}%` }}
             />
             <div
-              className="bg-red-500 transition-all"
+              className="bg-destructive transition-all"
               style={{ width: `${failedPercent}%` }}
             />
           </div>
@@ -221,10 +221,10 @@ const TestSuiteContext = createContext<TestSuiteContextType>({
 });
 
 const statusStyles: Record<TestStatus, string> = {
-  failed: "text-red-600 dark:text-red-400",
-  passed: "text-green-600 dark:text-green-400",
-  running: "text-blue-600 dark:text-blue-400",
-  skipped: "text-yellow-600 dark:text-yellow-400",
+  failed: "text-destructive",
+  passed: "text-success",
+  running: "text-primary",
+  skipped: "text-warning",
 };
 
 const statusIcons: Record<TestStatus, React.ReactNode> = {
@@ -308,17 +308,17 @@ export const TestSuiteStats = ({
     {children ?? (
       <>
         {passed > 0 && (
-          <span className="text-green-600 dark:text-green-400">
+          <span className="text-success">
             {passed} passed
           </span>
         )}
         {failed > 0 && (
-          <span className="text-red-600 dark:text-red-400">
+          <span className="text-destructive">
             {failed} failed
           </span>
         )}
         {skipped > 0 && (
-          <span className="text-yellow-600 dark:text-yellow-400">
+          <span className="text-warning">
             {skipped} skipped
           </span>
         )}
@@ -468,7 +468,7 @@ export const TestErrorMessage = ({
 }: TestErrorMessageProps) => (
   <p
     className={cn(
-      "font-medium text-red-700 text-sm dark:text-red-400",
+      "font-medium text-destructive text-sm",
       className
     )}
     {...props}
@@ -486,7 +486,7 @@ export const TestErrorStack = ({
 }: TestErrorStackProps) => (
   <pre
     className={cn(
-      "mt-2 overflow-auto font-mono text-red-600 text-xs dark:text-red-400",
+      "mt-2 overflow-auto font-mono text-destructive text-xs",
       className
     )}
     {...props}
diff --git a/src/components/ai-elements/tool.tsx b/src/components/ai-elements/tool.tsx
index 18c4bb8..afb2034 100644
--- a/src/components/ai-elements/tool.tsx
+++ b/src/components/ai-elements/tool.tsx
@@ -55,13 +55,13 @@ const statusLabels: Record<ToolPart["state"], string> = {
 };
 
 const statusIcons: Record<ToolPart["state"], ReactNode> = {
-  "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
-  "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
+  "approval-requested": <ClockIcon className="size-4 text-warning" />,
+  "approval-responded": <CheckCircleIcon className="size-4 text-primary" />,
   "input-available": <ClockIcon className="size-4 animate-pulse" />,
   "input-streaming": <CircleIcon className="size-4" />,
-  "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
-  "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
-  "output-error": <XCircleIcon className="size-4 text-red-600" />,
+  "output-available": <CheckCircleIcon className="size-4 text-success" />,
+  "output-denied": <XCircleIcon className="size-4 text-warning" />,
+  "output-error": <XCircleIcon className="size-4 text-destructive" />,
 };
 
 export const getStatusBadge = (status: ToolPart["state"]) => (
diff --git a/src/components/ui/BranchSelect.tsx b/src/components/ui/BranchSelect.tsx
index 9bf9160..85197bc 100644
--- a/src/components/ui/BranchSelect.tsx
+++ b/src/components/ui/BranchSelect.tsx
@@ -244,7 +244,7 @@ export default function BranchSelect({
 
           {/* Error */}
           {error && (
-            <div className="px-2.5 py-1.5 text-[11px] text-destructive bg-[color-mix(in_oklch,var(--destructive)_8%,transparent)] border-b border-border">
+            <div className="px-2.5 py-1.5 text-xs text-destructive bg-destructive/8 border-b border-border">
               {error}
             </div>
           )}
@@ -271,7 +271,7 @@ export default function BranchSelect({
                     }`}
                   >
                     <GitBranch className="size-3 shrink-0 text-muted-foreground" />
-                    <span className="flex-1 truncate text-left text-[11px]">
+                    <span className="flex-1 truncate text-left text-xs">
                       Current HEAD
                     </span>
                     {!activeBranch && (
@@ -285,7 +285,7 @@ export default function BranchSelect({
               {/* Local branches */}
               {filteredLocal.length > 0 && (
                 <>
-                  <div className="px-2.5 py-1 text-[10px] uppercase tracking-wider text-muted-foreground font-medium">
+                  <div className="px-2.5 py-1 text-2xs uppercase tracking-wider text-muted-foreground font-medium">
                     Local
                   </div>
                   {filteredLocal.map((b) => {
@@ -309,7 +309,7 @@ export default function BranchSelect({
                         } ${actionLoading !== null && !isLoading ? "opacity-50" : ""}`}
                       >
                         <GitBranch className="size-3 shrink-0 text-muted-foreground" />
-                        <span className="flex-1 truncate text-left font-mono text-[11px]">
+                        <span className="flex-1 truncate text-left font-mono text-xs">
                           {b}
                         </span>
                         {isLoading && (
@@ -330,7 +330,7 @@ export default function BranchSelect({
                   {filteredLocal.length > 0 && (
                     <div className="mx-2 my-1 h-px bg-border" />
                   )}
-                  <div className="px-2.5 py-1 text-[10px] uppercase tracking-wider text-muted-foreground font-medium">
+                  <div className="px-2.5 py-1 text-2xs uppercase tracking-wider text-muted-foreground font-medium">
                     Remote
                   </div>
                   {filteredRemote.map((b) => {
@@ -348,7 +348,7 @@ export default function BranchSelect({
                         } ${actionLoading !== null && !isLoading ? "opacity-50" : ""}`}
                       >
                         <Cloud className="size-3 shrink-0 text-muted-foreground" />
-                        <span className="flex-1 truncate text-left font-mono text-[11px]">
+                        <span className="flex-1 truncate text-left font-mono text-xs">
                           {b}
                         </span>
                         {isLoading && (
@@ -367,7 +367,7 @@ export default function BranchSelect({
               {filteredLocal.length === 0 &&
                 filteredRemote.length === 0 &&
                 !(mode === "select" && !search) && (
-                  <div className="px-2.5 py-4 text-center text-[11px] text-muted-foreground">
+                  <div className="px-2.5 py-4 text-center text-xs text-muted-foreground">
                     No branches match &quot;{search}&quot;
                   </div>
                 )}
@@ -408,7 +408,7 @@ export default function BranchSelect({
                     disabled={
                       !newBranchName.trim() || actionLoading !== null
                     }
-                    className="flex items-center gap-1 rounded px-2 py-0.5 text-[11px] font-medium bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
+                    className="flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
                   >
                     {actionLoading ? (
                       <Loader2 className="size-3 animate-spin" />
diff --git a/src/lib/taskStatusColors.ts b/src/lib/taskStatusColors.ts
new file mode 100644
index 0000000..b7684b8
--- /dev/null
+++ b/src/lib/taskStatusColors.ts
@@ -0,0 +1,40 @@
+import type { TaskStatus } from "../types";
+
+/**
+ * Canonical task-status → color mappings.
+ *
+ * Two flavours:
+ *  - `TASK_STATUS_DOT_COLORS`  — Tailwind bg classes for small status dots / badges
+ *  - `TASK_STATUS_CSS_COLORS`  — CSS custom-property values for inline `style={{ background }}`
+ *
+ * Both maps cover every TaskStatus value so they can be indexed directly.
+ */
+
+/** Tailwind `bg-*` classes for status indicator dots & small badges. */
+export const TASK_STATUS_DOT_COLORS: Record<TaskStatus, string> = {
+  backlog: "bg-muted-foreground/40",
+  ready: "bg-blue-500",
+  "in-progress": "bg-amber-500",
+  "in-review": "bg-purple-500",
+  done: "bg-emerald-500",
+  archived: "bg-muted-foreground/25",
+};
+
+/** CSS variable values for inline `style={{ background }}` usage. */
+export const TASK_STATUS_CSS_COLORS: Record<TaskStatus, string> = {
+  backlog: "var(--muted-foreground)",
+  ready: "var(--primary)",
+  "in-progress": "var(--warning)",
+  "in-review": "var(--primary)",
+  done: "var(--success)",
+  archived: "var(--muted-foreground)",
+};
+
+export const TASK_STATUS_LABELS: Record<TaskStatus, string> = {
+  backlog: "Backlog",
+  ready: "Ready",
+  "in-progress": "In Progress",
+  "in-review": "In Review",
+  done: "Done",
+  archived: "Archived",
+};
diff --git a/src/styles/main.css b/src/styles/main.css
index de187a7..6b0c473 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -12,6 +12,12 @@
   --spacing-panel-gap: 4px;
   --radius-panel: 8px;
   --radius-element: 4px;
+
+  /* Typography scale */
+  --text-micro: 0.5rem;            /* 8px — reserved */
+  --text-micro--line-height: 1.25rem;
+  --text-2xs: 0.625rem;            /* 10px */
+  --text-2xs--line-height: 1rem;
 }
 
 :root {

From 3d07f39b816116369b53dbb648420a142c944d70 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Fri, 27 Mar 2026 20:52:03 +0100
Subject: [PATCH 06/16] feat: polish GitHub view detail panels, row density,
 and error states

Resizable detail panels (280-600px) via new DetailPanelResizeHandle,
two-line PR/Issue rows with overflow-safe label capping, retry buttons
on all error banners, normalized empty state opacity, and improved
commit graph merge indicator contrast for dark theme.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/GitHub/CommitDetailPanel.tsx   | 11 ++-
 src/components/GitHub/CommitRow.tsx           | 33 ++++---
 .../GitHub/DetailPanelResizeHandle.tsx        | 68 +++++++++++++
 src/components/GitHub/GitHubAuthGate.tsx      |  2 +-
 src/components/GitHub/GitHubView.tsx          | 23 ++++-
 src/components/GitHub/GraphCanvas.tsx         |  6 +-
 src/components/GitHub/IssueDetailPanel.tsx    |  9 +-
 src/components/GitHub/IssuesTab.tsx           | 91 ++++++++++-------
 .../GitHub/PullRequestDetailPanel.tsx         |  9 +-
 src/components/GitHub/PullRequestsTab.tsx     | 97 +++++++++++--------
 10 files changed, 251 insertions(+), 98 deletions(-)
 create mode 100644 src/components/GitHub/DetailPanelResizeHandle.tsx

diff --git a/src/components/GitHub/CommitDetailPanel.tsx b/src/components/GitHub/CommitDetailPanel.tsx
index ee0bf81..aa5415f 100644
--- a/src/components/GitHub/CommitDetailPanel.tsx
+++ b/src/components/GitHub/CommitDetailPanel.tsx
@@ -14,11 +14,14 @@ import type { CommitDetail } from "../../types";
 import { RAIL_COLORS } from "../../lib/graphLayout";
 import type { GraphNode } from "../../lib/graphLayout";
 import { glassStyles } from "../ui/orecus.io/lib/color-utils";
+import DetailPanelResizeHandle from "./DetailPanelResizeHandle";
 
 interface CommitDetailPanelProps {
   detail: CommitDetail | null;
   node: GraphNode | null;
   loading: boolean;
+  panelWidth: number;
+  onResize: (width: number) => void;
   onClose: () => void;
 }
 
@@ -81,6 +84,8 @@ export default function CommitDetailPanel({
   detail,
   node,
   loading,
+  panelWidth,
+  onResize,
   onClose,
 }: CommitDetailPanelProps) {
   const { isGlass } = useTheme();
@@ -97,7 +102,11 @@ export default function CommitDetailPanel({
   const railColor = node?.railColor ?? RAIL_COLORS[0];
 
   return (
-    <div className={`w-[350px] shrink-0 flex flex-col border-l border-border overflow-hidden ${glassStyles[isGlass ? "normal" : "solid"]}`}>
+    <div
+      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden ${glassStyles[isGlass ? "normal" : "solid"]}`}
+      style={{ width: panelWidth }}
+    >
+      <DetailPanelResizeHandle onResize={onResize} />
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border">
         <span className="text-xs font-medium text-foreground">
diff --git a/src/components/GitHub/CommitRow.tsx b/src/components/GitHub/CommitRow.tsx
index 19e1f18..5f68555 100644
--- a/src/components/GitHub/CommitRow.tsx
+++ b/src/components/GitHub/CommitRow.tsx
@@ -52,16 +52,27 @@ function CommitRowInner({
       {/* Graph dot area */}
       <div className="shrink-0 relative" style={{ width: graphWidth }}>
         <svg width={graphWidth} height={ROW_HEIGHT} className="block">
-          {/* Merge inner circle */}
+          {/* Merge inner circle — thicker stroke + slight fill for dark theme contrast */}
           {isMerge && (
-            <circle
-              cx={cx}
-              cy={cy}
-              r={dotRadius}
-              fill="var(--background)"
-              stroke={railColor}
-              strokeWidth={2.5}
-            />
+            <>
+              <circle
+                cx={cx}
+                cy={cy}
+                r={dotRadius + 1}
+                fill="none"
+                stroke={railColor}
+                strokeWidth={2}
+                opacity={0.3}
+              />
+              <circle
+                cx={cx}
+                cy={cy}
+                r={dotRadius}
+                fill="var(--background)"
+                stroke={railColor}
+                strokeWidth={3}
+              />
+            </>
           )}
           {/* Main dot */}
           {!isMerge && (
@@ -76,7 +87,7 @@ function CommitRowInner({
               fill="none"
               stroke="var(--foreground)"
               strokeWidth={1.5}
-              opacity={0.8}
+              opacity={0.9}
             />
           )}
         </svg>
@@ -113,7 +124,7 @@ function CommitRowInner({
         {isMerge && (
           <GitMerge
             size={11}
-            className="text-muted-foreground shrink-0"
+            className="text-dim-foreground shrink-0"
           />
         )}
         <span className="text-xs font-mono text-muted-foreground w-[52px] text-right">
diff --git a/src/components/GitHub/DetailPanelResizeHandle.tsx b/src/components/GitHub/DetailPanelResizeHandle.tsx
new file mode 100644
index 0000000..ec4c54c
--- /dev/null
+++ b/src/components/GitHub/DetailPanelResizeHandle.tsx
@@ -0,0 +1,68 @@
+import { useCallback, useRef } from "react";
+
+const MIN_WIDTH = 280;
+const MAX_WIDTH = 600;
+
+interface DetailPanelResizeHandleProps {
+  onResize: (width: number) => void;
+}
+
+/**
+ * Left-edge resize handle for GitHub detail panels.
+ * Follows the same pattern as SidebarResizeHandle / RightSidebarResizeHandle.
+ */
+export default function DetailPanelResizeHandle({
+  onResize,
+}: DetailPanelResizeHandleProps) {
+  const dragging = useRef(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+
+      // Capture the right edge of the panel at drag start
+      const panel = containerRef.current?.parentElement;
+      if (!panel) return;
+      const panelRect = panel.getBoundingClientRect();
+      const rightEdge = panelRect.right;
+
+      const onMouseMove = (ev: MouseEvent) => {
+        if (!dragging.current) return;
+        const newWidth = rightEdge - ev.clientX;
+        const clamped = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, newWidth));
+        onResize(clamped);
+      };
+
+      const onMouseUp = () => {
+        dragging.current = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [onResize],
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseDown={onMouseDown}
+      className="group absolute top-0 -left-[3px] w-1.5 h-full cursor-col-resize z-10"
+    >
+      {/* Grip dots — appear on hover */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/GitHub/GitHubAuthGate.tsx b/src/components/GitHub/GitHubAuthGate.tsx
index 4e69910..dc4a420 100644
--- a/src/components/GitHub/GitHubAuthGate.tsx
+++ b/src/components/GitHub/GitHubAuthGate.tsx
@@ -66,7 +66,7 @@ export default function GitHubAuthGate({
   if (authBroken) {
     return (
       <div className="flex flex-1 flex-col items-center justify-center text-muted-foreground">
-        <AlertTriangle className="mb-3 size-10 opacity-40 text-warning" />
+        <AlertTriangle className="mb-3 size-10 opacity-30 text-warning" />
         <p className="text-sm font-medium text-foreground">
           GitHub authentication issue
         </p>
diff --git a/src/components/GitHub/GitHubView.tsx b/src/components/GitHub/GitHubView.tsx
index 995a706..c45b90e 100644
--- a/src/components/GitHub/GitHubView.tsx
+++ b/src/components/GitHub/GitHubView.tsx
@@ -9,6 +9,7 @@ import {
   Github,
   Loader2,
   RefreshCw,
+  RotateCw,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
@@ -32,6 +33,8 @@ import { useGitHubData } from "./useGitHubData";
 
 type GitHubTab = "changes" | "commits" | "pull-requests" | "issues";
 
+const DEFAULT_DETAIL_WIDTH = 350;
+
 export default function GitHubView() {
   const { isGlass } = useTheme();
   const accentColor = useProjectAccentColor();
@@ -40,6 +43,7 @@ export default function GitHubView() {
   const setProjectInfo = useAppStore((s) => s.setProjectInfo);
   const setActiveView = useAppStore((s) => s.setActiveView);
   const [activeTab, setActiveTab] = useState<GitHubTab>("changes");
+  const [commitDetailWidth, setCommitDetailWidth] = useState(DEFAULT_DETAIL_WIDTH);
 
   const handleOpenSettings = useCallback(() => setActiveView("settings"), [setActiveView]);
 
@@ -179,7 +183,7 @@ export default function GitHubView() {
       >
         <Github className="mb-3 size-10 opacity-30" />
         <p className="text-sm">Select a project to view git history</p>
-        <p className="mt-1 text-xs opacity-60">
+        <p className="mt-1 text-xs text-muted-foreground">
           Open a project tab to get started
         </p>
       </div>
@@ -217,7 +221,7 @@ export default function GitHubView() {
           <Tabs.Tab value="issues" icon={<CircleDot size={13} />}>
             <span className="flex items-center gap-1">
               Issues
-              <Github size={10} className="opacity-40" />
+              <Github size={10} className="opacity-30" />
             </span>
           </Tabs.Tab>
           <Tabs.Tab
@@ -226,7 +230,7 @@ export default function GitHubView() {
           >
             <span className="flex items-center gap-1">
               Pull Requests
-              <Github size={10} className="opacity-40" />
+              <Github size={10} className="opacity-30" />
             </span>
           </Tabs.Tab>
         </Tabs>
@@ -328,8 +332,15 @@ export default function GitHubView() {
 
             {/* Error banner */}
             {error && (
-              <div className="px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
-                {error}
+              <div className="flex items-center gap-2 px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
+                <span className="flex-1">{error}</span>
+                <button
+                  onClick={refresh}
+                  className="shrink-0 inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-destructive/15 transition-colors"
+                >
+                  <RotateCw size={10} />
+                  Retry
+                </button>
               </div>
             )}
 
@@ -353,6 +364,8 @@ export default function GitHubView() {
                   detail={selectedDetail}
                   node={selectedNode}
                   loading={!selectedDetail}
+                  panelWidth={commitDetailWidth}
+                  onResize={setCommitDetailWidth}
                   onClose={() => selectCommit(null)}
                 />
               )}
diff --git a/src/components/GitHub/GraphCanvas.tsx b/src/components/GitHub/GraphCanvas.tsx
index 4dd0dfd..e3a46a4 100644
--- a/src/components/GitHub/GraphCanvas.tsx
+++ b/src/components/GitHub/GraphCanvas.tsx
@@ -43,7 +43,9 @@ function GraphCanvasInner({
           ? node.railColor
           : RAIL_COLORS[conn.parentColumn % RAIL_COLORS.length];
 
-      if (conn.connectionType === "straight") {
+      const isMerge = conn.connectionType !== "straight";
+
+      if (!isMerge) {
         paths.push(
           <line
             key={`${node.commit.hash}-${conn.parentHash}-s`}
@@ -70,7 +72,7 @@ function GraphCanvasInner({
             d={d}
             fill="none"
             stroke={color}
-            strokeWidth={2}
+            strokeWidth={2.5}
             strokeOpacity={conn.isOffScreen ? 0.5 : 1}
             strokeDasharray={conn.isOffScreen ? "4 2" : undefined}
           />,
diff --git a/src/components/GitHub/IssueDetailPanel.tsx b/src/components/GitHub/IssueDetailPanel.tsx
index e703a0f..6f807f1 100644
--- a/src/components/GitHub/IssueDetailPanel.tsx
+++ b/src/components/GitHub/IssueDetailPanel.tsx
@@ -16,11 +16,14 @@ import { useTheme } from "../../contexts/ThemeContext";
 import type { GitHubIssueDetail } from "../../types";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 import { glassStyles } from "../ui/orecus.io/lib/color-utils";
+import DetailPanelResizeHandle from "./DetailPanelResizeHandle";
 
 interface IssueDetailPanelProps {
   detail: GitHubIssueDetail | null;
   loading: boolean;
   importing: boolean;
+  panelWidth: number;
+  onResize: (width: number) => void;
   onClose: () => void;
   onImport: (issueNumber: number) => void;
 }
@@ -54,6 +57,8 @@ export default function IssueDetailPanel({
   detail,
   loading,
   importing,
+  panelWidth,
+  onResize,
   onClose,
   onImport,
 }: IssueDetailPanelProps) {
@@ -73,8 +78,10 @@ export default function IssueDetailPanel({
 
   return (
     <div
-      className={`w-[350px] shrink-0 flex flex-col border-l border-border overflow-hidden ${glassStyles[isGlass ? "normal" : "solid"]}`}
+      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden ${glassStyles[isGlass ? "normal" : "solid"]}`}
+      style={{ width: panelWidth }}
     >
+      <DetailPanelResizeHandle onResize={onResize} />
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border">
         <span className="text-xs font-medium text-foreground">
diff --git a/src/components/GitHub/IssuesTab.tsx b/src/components/GitHub/IssuesTab.tsx
index a3f0146..c295319 100644
--- a/src/components/GitHub/IssuesTab.tsx
+++ b/src/components/GitHub/IssuesTab.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useState } from "react";
 import {
   CircleDot,
   ListFilter,
@@ -9,6 +9,7 @@ import {
   CircleCheck,
   CircleX,
   User,
+  RotateCw,
 } from "lucide-react";
 import { invoke } from "@tauri-apps/api/core";
 import { Badge } from "../ui/badge";
@@ -19,6 +20,8 @@ import IssueDetailPanel from "./IssueDetailPanel";
 import GitHubAuthGate from "./GitHubAuthGate";
 import type { GitHubIssue, ImportResult, Task } from "../../types";
 
+const DEFAULT_DETAIL_WIDTH = 350;
+
 interface IssuesTabProps {
   projectId: string | null;
   hasRemote: boolean;
@@ -27,6 +30,7 @@ interface IssuesTabProps {
 
 export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: IssuesTabProps) {
   const refreshGhAuth = useAppStore((s) => s.refreshGhAuth);
+  const [detailWidth, setDetailWidth] = useState(DEFAULT_DETAIL_WIDTH);
   const {
     issues,
     loading,
@@ -208,8 +212,15 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
 
       {/* Error banner */}
       {error && (
-        <div className="px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
-          {error}
+        <div className="flex items-center gap-2 px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
+          <span className="flex-1">{error}</span>
+          <button
+            onClick={fetchIssues}
+            className="shrink-0 inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-destructive/15 transition-colors"
+          >
+            <RotateCw size={10} />
+            Retry
+          </button>
         </div>
       )}
 
@@ -240,7 +251,7 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
               <div
                 key={issue.number}
                 onClick={() => handleRowClick(issue.number)}
-                className={`flex items-center gap-2.5 px-3 py-2 border-b border-border/40 hover:bg-accent transition-colors cursor-pointer ${
+                className={`flex items-center gap-2 px-3 py-1.5 border-b border-border/40 hover:bg-accent transition-colors cursor-pointer ${
                   selectedIssue === issue.number
                     ? "bg-primary/6"
                     : ""
@@ -265,11 +276,6 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
                   )}
                 </div>
 
-                {/* Issue number */}
-                <span className="shrink-0 text-xs font-mono text-dim-foreground w-[48px]">
-                  #{issue.number}
-                </span>
-
                 {/* State icon */}
                 <div className="shrink-0">
                   {issue.state === "OPEN" ? (
@@ -285,37 +291,48 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
                   )}
                 </div>
 
-                {/* Title + labels */}
-                <div className="flex-1 flex items-center gap-1.5 min-w-0">
-                  <span className="truncate text-sm text-foreground">
-                    {issue.title}
-                  </span>
+                {/* Issue number */}
+                <span className="shrink-0 text-xs font-mono text-dim-foreground w-[40px]">
+                  #{issue.number}
+                </span>
 
-                  {/* GitHub labels */}
-                  {issue.labels.map((label) => (
-                    <span
-                      key={label.name}
-                      className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium leading-tight max-w-[100px] truncate border"
-                      style={{
-                        backgroundColor: `#${label.color}20`,
-                        borderColor: `#${label.color}40`,
-                        color: `#${label.color}`,
-                      }}
-                    >
-                      {label.name}
+                {/* Title + labels */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-1.5">
+                    <span className="truncate text-sm text-foreground">
+                      {issue.title}
                     </span>
-                  ))}
-                </div>
 
-                {/* Assignees */}
-                {issue.assignees.length > 0 && (
-                  <div className="shrink-0 flex items-center gap-1 text-2xs text-dim-foreground">
-                    <User size={10} />
-                    <span>
-                      {issue.assignees.map((a) => a.login).join(", ")}
-                    </span>
+                    {/* GitHub labels — show max 2 */}
+                    {issue.labels.slice(0, 2).map((label) => (
+                      <span
+                        key={label.name}
+                        className="shrink-0 hidden sm:inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium leading-tight max-w-[100px] truncate border"
+                        style={{
+                          backgroundColor: `#${label.color}20`,
+                          borderColor: `#${label.color}40`,
+                          color: `#${label.color}`,
+                        }}
+                      >
+                        {label.name}
+                      </span>
+                    ))}
+                    {issue.labels.length > 2 && (
+                      <span className="shrink-0 hidden sm:inline-flex text-2xs text-muted-foreground">
+                        +{issue.labels.length - 2}
+                      </span>
+                    )}
                   </div>
-                )}
+                  {/* Secondary line: assignees */}
+                  {issue.assignees.length > 0 && (
+                    <div className="flex items-center gap-1 mt-0.5 text-2xs text-dim-foreground">
+                      <User size={10} />
+                      <span className="truncate">
+                        {issue.assignees.map((a) => a.login).join(", ")}
+                      </span>
+                    </div>
+                  )}
+                </div>
 
                 {/* Import status badge */}
                 {already_imported && existing_task_id && (
@@ -337,6 +354,8 @@ export default function IssuesTab({ projectId, hasRemote, onOpenSettings }: Issu
               detail={issueDetail}
               loading={detailLoading}
               importing={importing}
+              panelWidth={detailWidth}
+              onResize={setDetailWidth}
               onClose={() => selectIssue(null)}
               onImport={handleImportSingle}
             />
diff --git a/src/components/GitHub/PullRequestDetailPanel.tsx b/src/components/GitHub/PullRequestDetailPanel.tsx
index f984e52..d9687ac 100644
--- a/src/components/GitHub/PullRequestDetailPanel.tsx
+++ b/src/components/GitHub/PullRequestDetailPanel.tsx
@@ -16,12 +16,15 @@ import { useTheme } from "../../contexts/ThemeContext";
 import type { GitHubPRDetail } from "../../types";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 import { glassStyles } from "../ui/orecus.io/lib/color-utils";
+import DetailPanelResizeHandle from "./DetailPanelResizeHandle";
 
 interface PullRequestDetailPanelProps {
   detail: GitHubPRDetail | null;
   loading: boolean;
   merging: boolean;
   closing: boolean;
+  panelWidth: number;
+  onResize: (width: number) => void;
   onClose: () => void;
   onMerge: (number: number, method: string) => Promise<void>;
   onClosePR: (number: number) => Promise<void>;
@@ -94,6 +97,8 @@ export default function PullRequestDetailPanel({
   loading,
   merging,
   closing,
+  panelWidth,
+  onResize,
   onClose,
   onMerge,
   onClosePR,
@@ -135,8 +140,10 @@ export default function PullRequestDetailPanel({
 
   return (
     <div
-      className={`w-[350px] shrink-0 flex flex-col border-l border-border overflow-hidden ${glassStyles[isGlass ? "normal" : "solid"]}`}
+      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden ${glassStyles[isGlass ? "normal" : "solid"]}`}
+      style={{ width: panelWidth }}
     >
+      <DetailPanelResizeHandle onResize={onResize} />
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border">
         <span className="text-xs font-medium text-foreground">
diff --git a/src/components/GitHub/PullRequestsTab.tsx b/src/components/GitHub/PullRequestsTab.tsx
index f8a8b43..d221f7a 100644
--- a/src/components/GitHub/PullRequestsTab.tsx
+++ b/src/components/GitHub/PullRequestsTab.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useState } from "react";
 import {
   GitPullRequestArrow,
   GitMerge,
@@ -10,6 +10,7 @@ import {
   Eye,
   FileEdit,
   Check,
+  RotateCw,
 } from "lucide-react";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 import { useAppStore } from "../../store/appStore";
@@ -17,6 +18,8 @@ import { usePullRequests, type PRStateFilter } from "./usePullRequests";
 import PullRequestDetailPanel from "./PullRequestDetailPanel";
 import GitHubAuthGate from "./GitHubAuthGate";
 
+const DEFAULT_DETAIL_WIDTH = 350;
+
 interface PullRequestsTabProps {
   projectId: string | null;
   hasRemote: boolean;
@@ -70,6 +73,7 @@ export default function PullRequestsTab({
   onOpenSettings,
 }: PullRequestsTabProps) {
   const refreshGhAuth = useAppStore((s) => s.refreshGhAuth);
+  const [detailWidth, setDetailWidth] = useState(DEFAULT_DETAIL_WIDTH);
   const {
     prs,
     loading,
@@ -179,8 +183,15 @@ export default function PullRequestsTab({
 
       {/* Error banner */}
       {error && (
-        <div className="px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
-          {error}
+        <div className="flex items-center gap-2 px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
+          <span className="flex-1">{error}</span>
+          <button
+            onClick={fetchPRs}
+            className="shrink-0 inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-destructive/15 transition-colors"
+          >
+            <RotateCw size={10} />
+            Retry
+          </button>
         </div>
       )}
 
@@ -212,7 +223,7 @@ export default function PullRequestsTab({
               <div
                 key={pr.number}
                 onClick={() => handleRowClick(pr.number)}
-                className={`flex items-center gap-2.5 px-3 py-2 border-b border-border/40 hover:bg-accent transition-colors cursor-pointer ${
+                className={`flex items-center gap-2 px-3 py-1.5 border-b border-border/40 hover:bg-accent transition-colors cursor-pointer ${
                   selectedPR === pr.number
                     ? "bg-primary/6"
                     : ""
@@ -222,62 +233,66 @@ export default function PullRequestsTab({
                 <div className="shrink-0">{stateIcon(pr.state)}</div>
 
                 {/* PR number */}
-                <span className="shrink-0 text-xs font-mono text-dim-foreground w-[48px]">
+                <span className="shrink-0 text-xs font-mono text-dim-foreground w-[40px]">
                   #{pr.number}
                 </span>
 
                 {/* Title + draft badge + labels */}
-                <div className="flex-1 flex items-center gap-1.5 min-w-0">
-                  <span className="truncate text-sm text-foreground">
-                    {pr.title}
-                  </span>
-
-                  {pr.is_draft && (
-                    <span className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium bg-muted text-muted-foreground">
-                      Draft
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-1.5">
+                    <span className="truncate text-sm text-foreground">
+                      {pr.title}
                     </span>
-                  )}
 
-                  {pr.labels.map((label) => (
-                    <span
-                      key={label.name}
-                      className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium leading-tight max-w-[100px] truncate border"
-                      style={{
-                        backgroundColor: `#${label.color}20`,
-                        borderColor: `#${label.color}40`,
-                        color: `#${label.color}`,
-                      }}
-                    >
-                      {label.name}
+                    {pr.is_draft && (
+                      <span className="shrink-0 inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium bg-muted text-muted-foreground">
+                        Draft
+                      </span>
+                    )}
+
+                    {pr.labels.slice(0, 2).map((label) => (
+                      <span
+                        key={label.name}
+                        className="shrink-0 hidden sm:inline-flex items-center rounded-full px-1.5 py-px text-2xs font-medium leading-tight max-w-[100px] truncate border"
+                        style={{
+                          backgroundColor: `#${label.color}20`,
+                          borderColor: `#${label.color}40`,
+                          color: `#${label.color}`,
+                        }}
+                      >
+                        {label.name}
+                      </span>
+                    ))}
+                    {pr.labels.length > 2 && (
+                      <span className="shrink-0 hidden sm:inline-flex text-2xs text-muted-foreground">
+                        +{pr.labels.length - 2}
+                      </span>
+                    )}
+                  </div>
+                  {/* Secondary line: branch + diff stats */}
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="inline-flex items-center gap-0.5 text-2xs font-mono text-muted-foreground truncate max-w-[200px]">
+                      {pr.head_ref_name}
+                      <span>→</span>
+                      {pr.base_ref_name}
                     </span>
-                  ))}
+                    <span className="text-2xs text-success">+{pr.additions}</span>
+                    <span className="text-2xs text-destructive">-{pr.deletions}</span>
+                  </div>
                 </div>
 
-                {/* Branch pill */}
-                <span className="shrink-0 inline-flex items-center gap-1 rounded-full px-1.5 py-px text-2xs font-mono text-muted-foreground bg-muted max-w-[180px] truncate">
-                  {pr.head_ref_name}
-                  <span className="text-2xs">→</span>
-                  {pr.base_ref_name}
-                </span>
-
                 {/* Review status */}
                 <div className="shrink-0 flex items-center">
                   {reviewIcon(pr.review_decision)}
                 </div>
 
-                {/* Diff stats */}
-                <div className="shrink-0 flex items-center gap-1.5 text-2xs">
-                  <span className="text-success">+{pr.additions}</span>
-                  <span className="text-destructive">-{pr.deletions}</span>
-                </div>
-
                 {/* Author */}
                 <span className="shrink-0 text-2xs text-muted-foreground max-w-[80px] truncate">
                   {pr.author.login}
                 </span>
 
                 {/* Time */}
-                <span className="shrink-0 text-2xs text-muted-foreground w-[52px] text-right">
+                <span className="shrink-0 text-2xs text-muted-foreground w-[36px] text-right">
                   {formatRelativeTime(pr.updated_at)}
                 </span>
               </div>
@@ -291,6 +306,8 @@ export default function PullRequestsTab({
               loading={detailLoading}
               merging={merging}
               closing={closing}
+              panelWidth={detailWidth}
+              onResize={setDetailWidth}
               onClose={() => selectPR(null)}
               onMerge={mergePR}
               onClosePR={closePR}

From d561fcf68da240397b499a585cdf54a9c3b6bdc5 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Fri, 27 Mar 2026 21:18:21 +0100
Subject: [PATCH 07/16] feat: add skeleton loaders and loading feedback across
 views

Replace bare spinners with skeleton placeholders that match content
layout in CommitGraph (initial + infinite scroll), RulesTab, and
AgentActivityTab history. Add TaskCardSkeleton component for Kanban
columns. Add inline loading spinners on ArchivedTaskList restore/delete
actions with disabled states during async operations.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Dashboard/ArchivedTaskList.tsx | 40 +++++++++++---
 src/components/Dashboard/TaskCard.tsx         | 35 +++++++++++++
 src/components/GitHub/CommitGraph.tsx         | 52 +++++++++++++++----
 src/components/SkillsRules/RulesTab.tsx       | 27 ++++++++--
 .../TaskDetail/AgentActivityTab.tsx           | 14 ++++-
 5 files changed, 148 insertions(+), 20 deletions(-)

diff --git a/src/components/Dashboard/ArchivedTaskList.tsx b/src/components/Dashboard/ArchivedTaskList.tsx
index 72cf4ba..e7ddf20 100644
--- a/src/components/Dashboard/ArchivedTaskList.tsx
+++ b/src/components/Dashboard/ArchivedTaskList.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { Archive, ArchiveRestore, Trash2 } from "lucide-react";
+import { Archive, ArchiveRestore, Loader2, Trash2 } from "lucide-react";
 
 import type { Task } from "../../types";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
@@ -29,14 +29,30 @@ export default function ArchivedTaskList({
   onDelete,
 }: ArchivedTaskListProps) {
   const [deleteTaskId, setDeleteTaskId] = useState<string | null>(null);
+  const [restoringId, setRestoringId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
   const deleteTask = deleteTaskId
     ? tasks.find((t) => t.id === deleteTaskId)
     : null;
 
-  const handleConfirmDelete = useCallback(() => {
+  const handleRestore = useCallback(async (taskId: string) => {
+    setRestoringId(taskId);
+    try {
+      await onRestore(taskId);
+    } finally {
+      setRestoringId(null);
+    }
+  }, [onRestore]);
+
+  const handleConfirmDelete = useCallback(async () => {
     if (deleteTaskId) {
-      onDelete(deleteTaskId);
+      setDeletingId(deleteTaskId);
       setDeleteTaskId(null);
+      try {
+        await onDelete(deleteTaskId);
+      } finally {
+        setDeletingId(null);
+      }
     }
   }, [deleteTaskId, onDelete]);
 
@@ -97,7 +113,7 @@ export default function ArchivedTaskList({
                 {formatDate(task.updated_at)}
               </span>
 
-              {/* Actions — visible on hover */}
+              {/* Actions — visible on hover, with inline loading */}
               <div className="flex items-center gap-0.5 opacity-30 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity shrink-0">
                 <Button
                   variant="ghost"
@@ -105,12 +121,17 @@ export default function ArchivedTaskList({
                   hoverEffect="scale"
                   clickEffect="scale"
                   title="Restore to backlog"
+                  disabled={restoringId === task.id || deletingId === task.id}
                   onClick={(e) => {
                     e.stopPropagation();
-                    onRestore(task.id);
+                    handleRestore(task.id);
                   }}
                 >
-                  <ArchiveRestore className="size-3" />
+                  {restoringId === task.id ? (
+                    <Loader2 className="size-3 animate-spin" />
+                  ) : (
+                    <ArchiveRestore className="size-3" />
+                  )}
                 </Button>
                 <Button
                   variant="ghost"
@@ -118,12 +139,17 @@ export default function ArchivedTaskList({
                   hoverEffect="scale"
                   clickEffect="scale"
                   title="Delete permanently"
+                  disabled={restoringId === task.id || deletingId === task.id}
                   onClick={(e) => {
                     e.stopPropagation();
                     setDeleteTaskId(task.id);
                   }}
                 >
-                  <Trash2 className="size-3 text-destructive" />
+                  {deletingId === task.id ? (
+                    <Loader2 className="size-3 animate-spin" />
+                  ) : (
+                    <Trash2 className="size-3 text-destructive" />
+                  )}
                 </Button>
               </div>
             </div>
diff --git a/src/components/Dashboard/TaskCard.tsx b/src/components/Dashboard/TaskCard.tsx
index 290cb40..f325f3c 100644
--- a/src/components/Dashboard/TaskCard.tsx
+++ b/src/components/Dashboard/TaskCard.tsx
@@ -8,6 +8,7 @@ import { DEFAULT_PRIORITIES, getPriorityBadgeClass } from "../../lib/priorities"
 import { TASK_STATUS_DOT_COLORS, TASK_STATUS_LABELS } from "../../lib/taskStatusColors";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 import { borderAccentColors } from "../ui/orecus.io/lib/color-utils";
+import { Skeleton } from "../ui/skeleton";
 
 export type TaskCardVariant = "default" | "compact" | "detailed" | "tree-node";
 
@@ -430,3 +431,37 @@ export default React.memo(function TaskCard({
     </div>
   );
 });
+
+// ── Skeleton variant for loading states ──
+
+export function TaskCardSkeleton({ variant = "default" }: { variant?: TaskCardVariant }) {
+  if (variant === "compact") {
+    return (
+      <div className="py-2 px-2.5 bg-card border border-border rounded-[10px]">
+        <div className="flex items-center gap-1.5">
+          <Skeleton className="h-3 w-5 rounded-[3px]" />
+          <Skeleton className="h-3 flex-1" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-3 bg-card border border-border rounded-[10px]">
+      {/* Top row: priority + ID */}
+      <div className="flex items-center gap-[5px] mb-1">
+        <Skeleton className="h-3.5 w-6 rounded-[3px]" />
+        <Skeleton className="h-3 w-10" />
+        <div className="flex-1" />
+      </div>
+      {/* Title */}
+      <Skeleton className="h-4 w-3/4 mb-0.5" />
+      <Skeleton className="h-4 w-1/2" />
+      {/* Labels */}
+      <div className="flex items-center gap-1 mt-1.5">
+        <Skeleton className="h-3.5 w-12 rounded-full" />
+        <Skeleton className="h-3.5 w-10 rounded-full" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/GitHub/CommitGraph.tsx b/src/components/GitHub/CommitGraph.tsx
index 20368e9..265e80f 100644
--- a/src/components/GitHub/CommitGraph.tsx
+++ b/src/components/GitHub/CommitGraph.tsx
@@ -9,7 +9,7 @@ import {
 import type { RefInfo } from "../../types";
 import GraphCanvas from "./GraphCanvas";
 import CommitRow from "./CommitRow";
-import { Loader2 } from "lucide-react";
+import { Skeleton } from "../ui/skeleton";
 
 interface CommitGraphProps {
   nodes: GraphNode[];
@@ -83,8 +83,28 @@ export default function CommitGraph({
 
   if (loading && nodes.length === 0) {
     return (
-      <div className="flex-1 flex items-center justify-center">
-        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      <div className="flex-1 overflow-hidden">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <div
+            key={i}
+            className="flex items-center border-b border-transparent"
+            style={{ height: ROW_HEIGHT }}
+          >
+            {/* Graph dot placeholder */}
+            <div className="shrink-0 flex items-center justify-center" style={{ width: clampedGraphWidth }}>
+              <Skeleton className="size-2 rounded-full" />
+            </div>
+            {/* Message placeholder */}
+            <div className="flex-1 min-w-0 pr-2">
+              <Skeleton className="h-3" style={{ width: `${55 + (i % 4) * 10}%` }} />
+            </div>
+            {/* Hash + time placeholder */}
+            <div className="shrink-0 flex items-center gap-2 pr-3">
+              <Skeleton className="h-3 w-[52px]" />
+              <Skeleton className="h-3 w-[28px]" />
+            </div>
+          </div>
+        ))}
       </div>
     );
   }
@@ -118,13 +138,27 @@ export default function CommitGraph({
         ))}
       </div>
 
-      {/* Load more indicator */}
+      {/* Load more indicator — skeleton rows for infinite scroll */}
       {loadingMore && (
-        <div className="flex items-center justify-center py-3">
-          <Loader2 className="size-4 animate-spin text-muted-foreground" />
-          <span className="ml-2 text-xs text-muted-foreground">
-            Loading more commits...
-          </span>
+        <div className="py-1">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div
+              key={i}
+              className="flex items-center border-b border-transparent"
+              style={{ height: ROW_HEIGHT }}
+            >
+              <div className="shrink-0 flex items-center justify-center" style={{ width: clampedGraphWidth }}>
+                <Skeleton className="size-2 rounded-full" />
+              </div>
+              <div className="flex-1 min-w-0 pr-2">
+                <Skeleton className="h-3" style={{ width: `${45 + (i % 3) * 15}%` }} />
+              </div>
+              <div className="shrink-0 flex items-center gap-2 pr-3">
+                <Skeleton className="h-3 w-[52px]" />
+                <Skeleton className="h-3 w-[28px]" />
+              </div>
+            </div>
+          ))}
         </div>
       )}
 
diff --git a/src/components/SkillsRules/RulesTab.tsx b/src/components/SkillsRules/RulesTab.tsx
index a22630e..e63b3c9 100644
--- a/src/components/SkillsRules/RulesTab.tsx
+++ b/src/components/SkillsRules/RulesTab.tsx
@@ -1,10 +1,10 @@
 import { invoke } from "@tauri-apps/api/core";
-import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { useTheme } from "../../contexts/ThemeContext";
 import { useAppStore } from "../../store/appStore";
 import type { AgentRuleGroup, RuleFileInfo } from "../../types";
+import { Skeleton } from "../ui/skeleton";
 import { glassStyles } from "../ui/orecus.io/lib/color-utils";
 import CreateRuleDialog from "./CreateRuleDialog";
 import RuleEditor from "./RuleEditor";
@@ -104,8 +104,29 @@ export default function RulesTab({ projectId }: Props) {
 
   if (loading) {
     return (
-      <div className="flex-1 flex items-center justify-center">
-        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      <div className={`flex-1 min-h-0 overflow-hidden rounded-lg ring-1 ring-border/40 flex ${glassStyles[isGlass ? "normal" : "solid"]}`}>
+        {/* Left tree skeleton */}
+        <div className="w-56 shrink-0 border-r border-border/40 p-3 space-y-3">
+          {Array.from({ length: 3 }).map((_, gi) => (
+            <div key={gi} className="space-y-2">
+              <Skeleton className="h-3.5 w-24" />
+              {Array.from({ length: 2 }).map((_, fi) => (
+                <div key={fi} className="flex items-center gap-2 pl-3">
+                  <Skeleton className="size-3 rounded-sm" />
+                  <Skeleton className="h-3 flex-1" />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+        {/* Right editor skeleton */}
+        <div className="flex-1 p-4 space-y-3">
+          <Skeleton className="h-4 w-48" />
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-5/6" />
+          <Skeleton className="h-3 w-3/4" />
+          <Skeleton className="h-3 w-4/5" />
+        </div>
       </div>
     );
   }
diff --git a/src/components/TaskDetail/AgentActivityTab.tsx b/src/components/TaskDetail/AgentActivityTab.tsx
index c35b1b3..3ed34f1 100644
--- a/src/components/TaskDetail/AgentActivityTab.tsx
+++ b/src/components/TaskDetail/AgentActivityTab.tsx
@@ -13,6 +13,7 @@ import {
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { useAppStore } from "../../store/appStore";
+import { Skeleton } from "../ui/skeleton";
 import type {
   McpSessionState,
   Session,
@@ -211,9 +212,20 @@ function HistorySection({
       <div className="flex items-center gap-1.5 text-2xs text-muted-foreground">
         <History size={10} className="opacity-60" />
         <span className="font-medium uppercase tracking-wider">History</span>
-        {loading && <Loader2 size={10} className="animate-spin ml-1" />}
       </div>
 
+      {loading && history.length === 0 && (
+        <div className="flex flex-col gap-2 py-1">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-1.5">
+              <Skeleton className="h-3 w-[38px] shrink-0" />
+              <Skeleton className="size-2.5 rounded-full shrink-0" />
+              <Skeleton className="h-3 flex-1" style={{ maxWidth: `${50 + (i % 3) * 15}%` }} />
+            </div>
+          ))}
+        </div>
+      )}
+
       <div className="flex flex-col">
         {grouped.map((group, gi) => (
           <div key={group.sessionId ?? gi} className="flex flex-col">

From 1350f1ed2646b2fd1de979b1ba5cefb1b6408279 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Fri, 27 Mar 2026 21:19:02 +0100
Subject: [PATCH 08/16] fix: update Claude Code ACP adapter package from
 @zed-industries to @agentclientprotocol

The claude-agent-acp package moved from @zed-industries/claude-agent-acp to
@agentclientprotocol/claude-agent-acp. Updates install commands, package names,
doc comments, and the session error hint (now uses the adapter's own install
command instead of a hardcoded scope).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src-tauri/src/agent/claude.rs    | 8 ++++----
 src-tauri/src/agent/mod.rs       | 4 ++--
 src-tauri/src/commands/agents.rs | 2 +-
 src-tauri/src/session.rs         | 4 +++-
 src/types.ts                     | 4 ++--
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src-tauri/src/agent/claude.rs b/src-tauri/src/agent/claude.rs
index 4d6b9aa..0d9f949 100644
--- a/src-tauri/src/agent/claude.rs
+++ b/src-tauri/src/agent/claude.rs
@@ -3,8 +3,8 @@ use super::{is_command_in_path, AgentAdapter, AgentLaunchConfig, AgentLaunchSpec
 pub struct ClaudeCodeAdapter;
 
 /// The external ACP adapter binary from Zed.
-/// Install via: `npm install -g @zed-industries/claude-agent-acp`
-/// Or download from: https://github.com/zed-industries/claude-agent-acp/releases
+/// Install via: `npm install -g @agentclientprotocol/claude-agent-acp`
+/// Or download from: https://github.com/agentclientprotocol/claude-agent-acp/releases
 pub const CLAUDE_ACP_ADAPTER_COMMAND: &str = "claude-agent-acp";
 
 impl AgentAdapter for ClaudeCodeAdapter {
@@ -75,11 +75,11 @@ impl AgentAdapter for ClaudeCodeAdapter {
     }
 
     fn acp_install_command(&self) -> Option<&str> {
-        Some("npm install -g @zed-industries/claude-agent-acp")
+        Some("npm install -g @agentclientprotocol/claude-agent-acp")
     }
 
     fn acp_adapter_package(&self) -> Option<&str> {
-        Some("@zed-industries/claude-agent-acp")
+        Some("@agentclientprotocol/claude-agent-acp")
     }
 
     fn cli_install_url(&self) -> Option<&str> {
diff --git a/src-tauri/src/agent/mod.rs b/src-tauri/src/agent/mod.rs
index ed4a2ad..7df0bc0 100644
--- a/src-tauri/src/agent/mod.rs
+++ b/src-tauri/src/agent/mod.rs
@@ -55,10 +55,10 @@ pub struct AgentInfo {
     pub acp_command: Option<String>,
     /// Additional args needed to launch in ACP mode (e.g., ["--acp"]).
     pub acp_args: Vec<String>,
-    /// The shell command to install the ACP adapter (e.g., "npm install -g @zed-industries/claude-agent-acp").
+    /// The shell command to install the ACP adapter (e.g., "npm install -g @agentclientprotocol/claude-agent-acp").
     /// `None` for agents with native ACP support.
     pub acp_install_command: Option<String>,
-    /// The npm package name for the ACP adapter (e.g., "@zed-industries/claude-agent-acp").
+    /// The npm package name for the ACP adapter (e.g., "@agentclientprotocol/claude-agent-acp").
     /// `None` for agents with native ACP support.
     pub acp_adapter_package: Option<String>,
     /// URL to the official install/download page for this agent's CLI tool.
diff --git a/src-tauri/src/commands/agents.rs b/src-tauri/src/commands/agents.rs
index 5838111..3d11502 100644
--- a/src-tauri/src/commands/agents.rs
+++ b/src-tauri/src/commands/agents.rs
@@ -41,7 +41,7 @@ pub async fn install_acp_adapter(
         .to_string();
 
     // When a target version is specified (update), pin the install to that exact version.
-    // e.g. "npm install -g @zed-industries/claude-agent-acp" → "npm install -g @zed-industries/claude-agent-acp@0.24.1"
+    // e.g. "npm install -g @agentclientprotocol/claude-agent-acp" → "npm install -g @agentclientprotocol/claude-agent-acp@0.24.1"
     let install_cmd = if let Some(ref version) = target_version {
         if !package.is_empty() && package != "unknown" {
             base_install_cmd.replace(&package, &format!("{package}@{version}"))
diff --git a/src-tauri/src/session.rs b/src-tauri/src/session.rs
index c3ad546..6b4df11 100644
--- a/src-tauri/src/session.rs
+++ b/src-tauri/src/session.rs
@@ -924,9 +924,11 @@ fn validate_acp_agent(adapter: &dyn agent::AgentAdapter, agent_name: &str) -> Re
         )))?;
 
     if !adapter.detect_acp_adapter() {
+        let install_hint = adapter.acp_install_command()
+            .unwrap_or("npm install -g <adapter-package>");
         return Err(AppError::Validation(format!(
             "Agent '{agent_name}' requires the ACP adapter '{acp_command}' which is not installed. \
-             Install it via: npm install -g @zed-industries/{acp_command}"
+             Install it via: {install_hint}"
         )));
     }
 
diff --git a/src/types.ts b/src/types.ts
index 825192e..66bb38a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -213,9 +213,9 @@ export interface AgentInfo {
   acp_command: string | null;
   /** Additional args needed to launch in ACP mode (e.g., ["--acp"]). */
   acp_args: string[];
-  /** Shell command to install the ACP adapter (e.g., "npm install -g @zed-industries/claude-agent-acp"). Null for native ACP agents. */
+  /** Shell command to install the ACP adapter (e.g., "npm install -g @agentclientprotocol/claude-agent-acp"). Null for native ACP agents. */
   acp_install_command: string | null;
-  /** npm package name for the ACP adapter (e.g., "@zed-industries/claude-agent-acp"). Null for native ACP agents. */
+  /** npm package name for the ACP adapter (e.g., "@agentclientprotocol/claude-agent-acp"). Null for native ACP agents. */
   acp_adapter_package: string | null;
   /** URL to the official install/download page for this agent's CLI tool. */
   cli_install_url: string | null;

From 7b46251b175a39fd6d55c50ab642dcfc5c1a1b0b Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Fri, 27 Mar 2026 21:55:20 +0100
Subject: [PATCH 09/16] fix: prevent stale ACP completion events from clearing
 working indicator

When the user cancels an ACP prompt and immediately resends, a late
completion event from the cancelled turn could clear promptPending for
the new turn, hiding the working indicator.

- Add acpPromptTurnId to track which turn started the pending state
- New clearAcpPromptIfCurrent action: only clears promptPending if
  the turn counter hasn't advanced (stale events are ignored)
- acp-prompt-complete and acp-error handlers use the new guard
- Add 5s timeout to waitForIdle polling to prevent infinite hangs
  if a cancel event is lost

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Chat/ChatInput.tsx |  7 ++--
 src/store/appStore.ts             | 54 ++++++++++++++++++++++++++-----
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/components/Chat/ChatInput.tsx b/src/components/Chat/ChatInput.tsx
index c3ec157..f0257f9 100644
--- a/src/components/Chat/ChatInput.tsx
+++ b/src/components/Chat/ChatInput.tsx
@@ -505,13 +505,14 @@ export default React.memo(function ChatInput({
       console.error("Failed to cancel ACP session:", e);
     }
 
-    // Wait for promptPending to clear (cancel triggers acp-prompt-complete/error event)
-    // Poll briefly — the event usually fires within a few hundred ms
+    // Wait for promptPending to clear (cancel triggers acp-prompt-complete/error event).
+    // Timeout after 5s to avoid polling forever if the cancel event is lost.
     const waitForIdle = () =>
       new Promise<void>((resolve) => {
+        const deadline = Date.now() + 5000;
         const check = () => {
           const pending = useAppStore.getState().acpPromptPending[sessionId] ?? false;
-          if (!pending) {
+          if (!pending || Date.now() >= deadline) {
             resolve();
           } else {
             setTimeout(check, 50);
diff --git a/src/store/appStore.ts b/src/store/appStore.ts
index 9537d38..c015fa6 100644
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -132,6 +132,8 @@ interface AppState {
   acpModes: Record<string, string>;
   acpModels: Record<string, string>;
   acpPromptPending: Record<string, boolean>;
+  /** Turn ID that is currently pending — used to guard against stale completion events. */
+  acpPromptTurnId: Record<string, number>;
   /** Draft text per session (persisted across view switches). */
   acpDraftText: Record<string, string>;
   acpPermissionRequests: Record<string, import("../types").AcpPermissionRequest[]>;
@@ -221,6 +223,7 @@ interface AppState {
   setAcpMode: (sessionId: string, mode: string) => void;
   setAcpModel: (sessionId: string, model: string) => void;
   setAcpPromptPending: (sessionId: string, pending: boolean) => void;
+  clearAcpPromptIfCurrent: (sessionId: string) => void;
   setAcpDraftText: (sessionId: string, text: string) => void;
   addAcpPermissionRequest: (sessionId: string, request: import("../types").AcpPermissionRequest) => void;
   removeAcpPermissionRequest: (sessionId: string, requestId: string) => void;
@@ -339,6 +342,7 @@ export const useAppStore = create<AppState>()(
     acpModes: {},
     acpModels: {},
     acpPromptPending: {},
+    acpPromptTurnId: {},
     acpDraftText: {},
     acpPermissionRequests: {},
     acpAvailableCommands: {},
@@ -813,9 +817,40 @@ export const useAppStore = create<AppState>()(
       })),
 
     setAcpPromptPending: (sessionId, pending) =>
-      set((state) => ({
-        acpPromptPending: { ...state.acpPromptPending, [sessionId]: pending },
-      })),
+      set((state) => {
+        if (pending) {
+          // Snapshot the current turn counter so completion events from stale
+          // (cancelled) turns can be detected and ignored by clearAcpPromptIfCurrent.
+          const turnId = state.acpTurnCounter[sessionId] ?? 0;
+          return {
+            acpPromptPending: { ...state.acpPromptPending, [sessionId]: true },
+            acpPromptTurnId: { ...state.acpPromptTurnId, [sessionId]: turnId },
+          };
+        }
+        return {
+          acpPromptPending: { ...state.acpPromptPending, [sessionId]: false },
+        };
+      }),
+
+    /** Clear promptPending only if no newer prompt has been started.
+     *  setAcpPromptPending(true) snapshots acpTurnCounter into acpPromptTurnId.
+     *  doSend() calls addAcpUserMessage (bumps turn counter) then setAcpPromptPending(true)
+     *  (snapshots the new counter). If a stale completion event from a cancelled turn
+     *  arrives after a new prompt started, the snapshot will be behind the turn counter
+     *  and the clear is skipped. */
+    clearAcpPromptIfCurrent: (sessionId) =>
+      set((state) => {
+        if (!state.acpPromptPending[sessionId]) return state; // already idle
+        const promptTurn = state.acpPromptTurnId[sessionId] ?? 0;
+        const currentTurn = state.acpTurnCounter[sessionId] ?? 0;
+        if (promptTurn < currentTurn) {
+          console.log(`[ACP] ignoring stale completion for turn ${promptTurn}, current turn is ${currentTurn}`);
+          return state;
+        }
+        return {
+          acpPromptPending: { ...state.acpPromptPending, [sessionId]: false },
+        };
+      }),
 
     setAcpDraftText: (sessionId, text) =>
       set((state) => ({
@@ -865,6 +900,7 @@ export const useAppStore = create<AppState>()(
         const { [sessionId]: _d, ...modes } = state.acpModes;
         const { [sessionId]: _md, ...models } = state.acpModels;
         const { [sessionId]: _pp, ...pending } = state.acpPromptPending;
+        const { [sessionId]: _pti, ...promptTurnIds } = state.acpPromptTurnId;
         const { [sessionId]: _dt, ...drafts } = state.acpDraftText;
         const { [sessionId]: _pr, ...permReqs } = state.acpPermissionRequests;
         const { [sessionId]: _ac, ...availCmds } = state.acpAvailableCommands;
@@ -879,6 +915,7 @@ export const useAppStore = create<AppState>()(
           acpModes: modes,
           acpModels: models,
           acpPromptPending: pending,
+          acpPromptTurnId: promptTurnIds,
           acpDraftText: drafts,
           acpPermissionRequests: permReqs,
           acpAvailableCommands: availCmds,
@@ -1974,12 +2011,13 @@ export const useAppStore = create<AppState>()(
       eventCleanups.push(
         listen<AcpPromptComplete>("acp-prompt-complete", (event) => {
           if (disposed) return;
-          console.log("[ACP] prompt-complete", event.payload.session_id, event.payload.stop_reason);
+          const sid = event.payload.session_id;
+          console.log("[ACP] prompt-complete", sid, event.payload.stop_reason);
           // Flush any trailing thinking
-          get().flushAcpThinking(event.payload.session_id);
+          get().flushAcpThinking(sid);
           // Finalize all streaming entries
-          get().finalizeAcpStreaming(event.payload.session_id);
-          get().setAcpPromptPending(event.payload.session_id, false);
+          get().finalizeAcpStreaming(sid);
+          get().clearAcpPromptIfCurrent(sid);
         }),
       );
 
@@ -1988,7 +2026,7 @@ export const useAppStore = create<AppState>()(
           if (disposed) return;
           const { session_id, error } = event.payload;
           console.error("[ACP] error", session_id, error);
-          get().setAcpPromptPending(session_id, false);
+          get().clearAcpPromptIfCurrent(session_id);
           get().finalizeAcpStreaming(session_id);
 
           // Inject error as a visible agent-text entry in the chat timeline

From db23ff348c30bb325a99ea0ec77a9b25bd888fec Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Sat, 28 Mar 2026 08:48:38 +0100
Subject: [PATCH 10/16] fix: responsive layout resilience for 1024px+ window
 widths

Toolbar wraps gracefully with grouped right-side actions, filter bar
sections stay with their separators, GitHub/plugin detail panels clamp
to max 40% width, and Kanban column min-width reduced for tighter fits.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Dashboard/FilterBar.tsx        |  67 +++++------
 src/components/Dashboard/KanbanColumn.tsx     |   2 +-
 src/components/GitHub/CommitDetailPanel.tsx   |   2 +-
 src/components/GitHub/IssueDetailPanel.tsx    |   2 +-
 .../GitHub/PullRequestDetailPanel.tsx         |   2 +-
 src/components/Shell/ViewLayout.tsx           |   2 +-
 src/components/SkillsRules/PluginsTab.tsx     |   2 +-
 src/components/TaskDetail/TaskDetailView.tsx  | 105 +++++++++---------
 src/components/TaskDetail/TaskTitle.tsx       |   2 +-
 9 files changed, 96 insertions(+), 90 deletions(-)

diff --git a/src/components/Dashboard/FilterBar.tsx b/src/components/Dashboard/FilterBar.tsx
index 10c9d36..4d792d5 100644
--- a/src/components/Dashboard/FilterBar.tsx
+++ b/src/components/Dashboard/FilterBar.tsx
@@ -274,40 +274,43 @@ export default function FilterBar({
           )}
         </div>
 
-        <Separator orientation="vertical" className="mx-0.5 self-stretch" />
-
-        {/* Priority toggles — bounded, always inline */}
-        <span className="text-xs text-muted-foreground mr-0.5">
-          Priority:
-        </span>
-        {priorities.map((p) => (
-          <ToggleChip
-            key={p.id}
-            label={p.id}
-            active={filters.priorities.has(p.id)}
-            color={getPriorityCssVar(p.id, priorities)}
-            onClick={() => dispatchFilter({ type: "TOGGLE_PRIORITY", priority: p.id })}
-          />
-        ))}
+        {/* Priority toggles — grouped with separator so they wrap together */}
+        <div className="flex items-center gap-2 shrink-0">
+          <Separator orientation="vertical" className="mx-0.5 self-stretch" />
+          <span className="text-xs text-muted-foreground mr-0.5">
+            Priority:
+          </span>
+          {priorities.map((p) => (
+            <ToggleChip
+              key={p.id}
+              label={p.id}
+              active={filters.priorities.has(p.id)}
+              color={getPriorityCssVar(p.id, priorities)}
+              onClick={() => dispatchFilter({ type: "TOGGLE_PRIORITY", priority: p.id })}
+            />
+          ))}
+        </div>
 
-        {/* Status toggles — bounded, always inline */}
-        <Separator orientation="vertical" className="mx-0.5 self-stretch" />
-        <span className="text-xs text-muted-foreground mr-0.5">
-          Status:
-        </span>
-        {STATUSES.map((s) => (
-          <ToggleChip
-            key={s.value}
-            label={s.label}
-            active={filters.statuses.has(s.value)}
-            color={accentHex}
-            onClick={() => dispatchFilter({ type: "TOGGLE_STATUS", status: s.value })}
-          />
-        ))}
+        {/* Status toggles — grouped with separator */}
+        <div className="flex items-center gap-2 shrink-0">
+          <Separator orientation="vertical" className="mx-0.5 self-stretch" />
+          <span className="text-xs text-muted-foreground mr-0.5">
+            Status:
+          </span>
+          {STATUSES.map((s) => (
+            <ToggleChip
+              key={s.value}
+              label={s.label}
+              active={filters.statuses.has(s.value)}
+              color={accentHex}
+              onClick={() => dispatchFilter({ type: "TOGGLE_STATUS", status: s.value })}
+            />
+          ))}
+        </div>
 
-        {/* Dropdown filters — compact triggers for unbounded lists */}
+        {/* Dropdown filters — grouped with separator */}
         {(allLabels.length > 0 || allAgents.length > 0 || allEpics.length > 0) && (
-          <>
+          <div className="flex items-center gap-2 shrink-0">
             <Separator orientation="vertical" className="mx-0.5 self-stretch" />
 
             {allLabels.length > 0 && (
@@ -342,7 +345,7 @@ export default function FilterBar({
                 placeholder="Search epics…"
               />
             )}
-          </>
+          </div>
         )}
 
         {/* Clear all */}
diff --git a/src/components/Dashboard/KanbanColumn.tsx b/src/components/Dashboard/KanbanColumn.tsx
index 4094dcb..d320a66 100644
--- a/src/components/Dashboard/KanbanColumn.tsx
+++ b/src/components/Dashboard/KanbanColumn.tsx
@@ -192,7 +192,7 @@ const KanbanColumn = memo(function KanbanColumn({
   return (
     <div
       ref={setNodeRef}
-      className={`flex-1 min-w-[180px] min-h-0 flex flex-col rounded-[var(--radius-panel)] overflow-hidden transition-all duration-150 ${
+      className={`flex-1 min-w-40 min-h-0 flex flex-col rounded-[var(--radius-panel)] overflow-hidden transition-all duration-150 ${
         isOver
           ? `ring-1 ${ringColors[accentColor]} bg-accent/50`
           : "ring-1 ring-border/40 bg-card/50"
diff --git a/src/components/GitHub/CommitDetailPanel.tsx b/src/components/GitHub/CommitDetailPanel.tsx
index aa5415f..6fe3670 100644
--- a/src/components/GitHub/CommitDetailPanel.tsx
+++ b/src/components/GitHub/CommitDetailPanel.tsx
@@ -103,7 +103,7 @@ export default function CommitDetailPanel({
 
   return (
     <div
-      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden ${glassStyles[isGlass ? "normal" : "solid"]}`}
+      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden max-w-[40%] ${glassStyles[isGlass ? "normal" : "solid"]}`}
       style={{ width: panelWidth }}
     >
       <DetailPanelResizeHandle onResize={onResize} />
diff --git a/src/components/GitHub/IssueDetailPanel.tsx b/src/components/GitHub/IssueDetailPanel.tsx
index 6f807f1..f40361c 100644
--- a/src/components/GitHub/IssueDetailPanel.tsx
+++ b/src/components/GitHub/IssueDetailPanel.tsx
@@ -78,7 +78,7 @@ export default function IssueDetailPanel({
 
   return (
     <div
-      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden ${glassStyles[isGlass ? "normal" : "solid"]}`}
+      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden max-w-[40%] ${glassStyles[isGlass ? "normal" : "solid"]}`}
       style={{ width: panelWidth }}
     >
       <DetailPanelResizeHandle onResize={onResize} />
diff --git a/src/components/GitHub/PullRequestDetailPanel.tsx b/src/components/GitHub/PullRequestDetailPanel.tsx
index d9687ac..0c1dffa 100644
--- a/src/components/GitHub/PullRequestDetailPanel.tsx
+++ b/src/components/GitHub/PullRequestDetailPanel.tsx
@@ -140,7 +140,7 @@ export default function PullRequestDetailPanel({
 
   return (
     <div
-      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden ${glassStyles[isGlass ? "normal" : "solid"]}`}
+      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden max-w-[40%] ${glassStyles[isGlass ? "normal" : "solid"]}`}
       style={{ width: panelWidth }}
     >
       <DetailPanelResizeHandle onResize={onResize} />
diff --git a/src/components/Shell/ViewLayout.tsx b/src/components/Shell/ViewLayout.tsx
index 3241b6e..9cc098d 100644
--- a/src/components/Shell/ViewLayout.tsx
+++ b/src/components/Shell/ViewLayout.tsx
@@ -29,7 +29,7 @@ function Toolbar({
 }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("flex items-center gap-3 h-10 shrink-0", className)}
+      className={cn("flex items-center gap-3 min-h-10 shrink-0 flex-wrap", className)}
       {...props}
     >
       {children}
diff --git a/src/components/SkillsRules/PluginsTab.tsx b/src/components/SkillsRules/PluginsTab.tsx
index 973d156..f2b5e63 100644
--- a/src/components/SkillsRules/PluginsTab.tsx
+++ b/src/components/SkillsRules/PluginsTab.tsx
@@ -1241,7 +1241,7 @@ export default function PluginsTab({ projectId: _projectId }: Props) {
 
       {/* Detail panel — slides in from right */}
       {selected && (
-        <div className="w-[380px] shrink-0 border-l border-border/40 overflow-hidden">
+        <div className="w-[380px] max-w-[40%] shrink-0 border-l border-border/40 overflow-hidden">
           <PluginDetailDrawer
             selected={selected}
             onClose={() => setSelected(null)}
diff --git a/src/components/TaskDetail/TaskDetailView.tsx b/src/components/TaskDetail/TaskDetailView.tsx
index 58aa3e5..40dce88 100644
--- a/src/components/TaskDetail/TaskDetailView.tsx
+++ b/src/components/TaskDetail/TaskDetailView.tsx
@@ -233,65 +233,68 @@ export default function TaskDetailView() {
           </button>
         )}
 
-        <div className="flex-1" />
+        <div className="flex-1 min-w-4" />
 
-        {/* Task actions (status-aware: start, research, view session, create PR, archive, reopen) — hidden for epics */}
-        {currentTask && activeProjectId && !isEpic && (
-          <TaskDetailActions task={currentTask} projectId={activeProjectId} />
-        )}
+        {/* Right-side actions — grouped so they wrap as a unit */}
+        <div className="flex items-center gap-3 shrink-0">
+          {/* Task actions (status-aware: start, research, view session, create PR, archive, reopen) — hidden for epics */}
+          {currentTask && activeProjectId && !isEpic && (
+            <TaskDetailActions task={currentTask} projectId={activeProjectId} />
+          )}
 
-        {/* Sync to GitHub (when issue is linked) */}
-        {formData.github_issue && (
+          {/* Sync to GitHub (when issue is linked) */}
+          {formData.github_issue && (
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={syncing || isDirty}
+              onClick={() => setSyncDialogOpen(true)}
+              title={isDirty ? "Save changes before syncing to GitHub" : undefined}
+              leftIcon={
+                syncing ? (
+                  <Loader2 className="size-3.5 animate-spin" />
+                ) : syncSuccess ? (
+                  <Check className="size-3.5 text-success" />
+                ) : (
+                  <RefreshCw className="size-3.5" />
+                )
+              }
+              hoverEffect="scale"
+              clickEffect="scale"
+            >
+              {syncSuccess ? "Synced!" : "Sync"}
+            </Button>
+          )}
+
+          {/* Save */}
           <Button
-            variant="outline"
+            variant="color"
+            color={accentColor}
             size="sm"
-            disabled={syncing || isDirty}
-            onClick={() => setSyncDialogOpen(true)}
-            title={isDirty ? "Save changes before syncing to GitHub" : undefined}
-            leftIcon={
-              syncing ? (
-                <Loader2 className="size-3.5 animate-spin" />
-              ) : syncSuccess ? (
-                <Check className="size-3.5 text-success" />
-              ) : (
-                <RefreshCw className="size-3.5" />
-              )
-            }
-            hoverEffect="scale"
+            disabled={!isDirty || saving}
+            loading={saving}
+            onClick={handleSave}
+            leftIcon={<Save className="size-3.5" />}
+            hoverEffect="scale-glow"
             clickEffect="scale"
           >
-            {syncSuccess ? "Synced!" : "Sync"}
+            Save
           </Button>
-        )}
-
-        {/* Save */}
-        <Button
-          variant="color"
-          color={accentColor}
-          size="sm"
-          disabled={!isDirty || saving}
-          loading={saving}
-          onClick={handleSave}
-          leftIcon={<Save className="size-3.5" />}
-          hoverEffect="scale-glow"
-          clickEffect="scale"
-        >
-          Save
-        </Button>
 
-        {/* Delete */}
-        <Button
-          variant={confirmDelete ? "destructive" : "ghost"}
-          size="sm"
-          disabled={deleting}
-          loading={deleting}
-          onClick={handleDeleteClick}
-          leftIcon={<Trash2 className="size-3.5" />}
-          hoverEffect="scale"
-          clickEffect="scale"
-        >
-          {confirmDelete ? "Confirm?" : "Delete"}
-        </Button>
+          {/* Delete */}
+          <Button
+            variant={confirmDelete ? "destructive" : "ghost"}
+            size="sm"
+            disabled={deleting}
+            loading={deleting}
+            onClick={handleDeleteClick}
+            leftIcon={<Trash2 className="size-3.5" />}
+            hoverEffect="scale"
+            clickEffect="scale"
+          >
+            {confirmDelete ? "Confirm?" : "Delete"}
+          </Button>
+        </div>
       </ViewLayout.Toolbar>
 
       {/* ── Error banner ── */}
diff --git a/src/components/TaskDetail/TaskTitle.tsx b/src/components/TaskDetail/TaskTitle.tsx
index e061b35..1d05336 100644
--- a/src/components/TaskDetail/TaskTitle.tsx
+++ b/src/components/TaskDetail/TaskTitle.tsx
@@ -78,7 +78,7 @@ export default function TaskTitle({ title, onChange, compact }: TaskTitleProps)
   return (
     <button
       onClick={() => setEditing(true)}
-      className={`group/title flex cursor-pointer items-center gap-1.5 rounded-md text-left transition-colors hover:bg-accent/50 ${compact ? "min-w-0 max-w-[400px] py-0.5 px-1.5" : "w-full -mx-1 px-1 py-0.5"}`}
+      className={`group/title flex cursor-pointer items-center gap-1.5 rounded-md text-left transition-colors hover:bg-accent/50 ${compact ? "min-w-0 max-w-80 py-0.5 px-1.5" : "w-full -mx-1 px-1 py-0.5"}`}
     >
       <span className={`flex-1 font-semibold text-foreground ${compact ? "truncate text-sm leading-none" : "text-lg leading-snug"}`}>
         {title}

From 26fc76b1465313014646c4a442ad58bf0c3a1ce8 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Sat, 28 Mar 2026 11:44:36 +0100
Subject: [PATCH 11/16] feat: add motion preferences and accessibility
 foundations

Respect prefers-reduced-motion OS preference with global CSS rules and
useReducedMotion hook in Shimmer. Add aria-label to icon-only buttons,
focus-visible indicators to custom buttons, role="alert" to error/warning
banners, and text fallbacks for color-only indicators across 15 components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Chat/WaitingCard.tsx           |  5 +++--
 src/components/Dashboard/FilterBar.tsx        | 10 ++++++----
 src/components/Dashboard/SummaryHeader.tsx    |  6 +++---
 src/components/Dashboard/TaskCard.tsx         |  5 +++--
 src/components/GitHub/CommitDetailPanel.tsx   |  3 ++-
 src/components/GitHub/IssueDetailPanel.tsx    |  3 ++-
 .../GitHub/PullRequestDetailPanel.tsx         |  9 +++++----
 src/components/GitHub/PullRequestsTab.tsx     | 19 +++++++++++--------
 src/components/Review/DiffView.tsx            |  4 +++-
 src/components/Settings/ProjectsTab.tsx       |  2 ++
 src/components/Shell/ErrorBoundary.tsx        |  2 +-
 .../Shell/FloatingPermissionBanner.tsx        |  4 +++-
 src/components/Shell/WindowControls.tsx       |  9 +++++----
 src/components/ai-elements/shimmer.tsx        | 17 +++++++++++++++++
 src/styles/main.css                           | 12 ++++++++++++
 15 files changed, 78 insertions(+), 32 deletions(-)

diff --git a/src/components/Chat/WaitingCard.tsx b/src/components/Chat/WaitingCard.tsx
index ba9d8c7..700ece6 100644
--- a/src/components/Chat/WaitingCard.tsx
+++ b/src/components/Chat/WaitingCard.tsx
@@ -49,7 +49,7 @@ export default React.memo(function WaitingCard({
       }`}
     >
       <div className="mx-3 mt-1 mb-2">
-        <div className="flex items-start gap-2.5 rounded-lg bg-warning/10 ring-1 ring-warning/25 px-3 py-2.5">
+        <div role="alert" className="flex items-start gap-2.5 rounded-lg bg-warning/10 ring-1 ring-warning/25 px-3 py-2.5">
           {/* Icon */}
           <div className="flex items-center justify-center shrink-0 mt-0.5">
             <CircleHelp size={14} className="text-warning" />
@@ -68,7 +68,8 @@ export default React.memo(function WaitingCard({
           {/* Dismiss button */}
           <button
             onClick={handleDismiss}
-            className="shrink-0 p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-warning/10 transition-colors"
+            aria-label="Dismiss waiting notification"
+            className="shrink-0 p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-warning/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             title="Dismiss"
           >
             <X size={12} />
diff --git a/src/components/Dashboard/FilterBar.tsx b/src/components/Dashboard/FilterBar.tsx
index 4d792d5..a898762 100644
--- a/src/components/Dashboard/FilterBar.tsx
+++ b/src/components/Dashboard/FilterBar.tsx
@@ -54,7 +54,7 @@ function ToggleChip({
   return (
     <button
       onClick={onClick}
-      className={`h-6 px-2 text-xs font-semibold rounded-[var(--radius-element)] cursor-pointer transition-all duration-100 ${active ? "bg-accent" : "bg-transparent"}`}
+      className={`h-6 px-2 text-xs font-semibold rounded-[var(--radius-element)] cursor-pointer transition-all duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${active ? "bg-accent" : "bg-transparent"}`}
       style={{
         border: active
           ? `1px solid ${color ?? "var(--primary)"}`
@@ -92,7 +92,7 @@ function FilterDropdown({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
-        className={`inline-flex items-center gap-1.5 h-6 px-2 text-xs font-medium rounded-[var(--radius-element)] cursor-pointer transition-all duration-100 border ${
+        className={`inline-flex items-center gap-1.5 h-6 px-2 text-xs font-medium rounded-[var(--radius-element)] cursor-pointer transition-all duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border ${
           count > 0
             ? "border-primary/60 bg-accent text-foreground"
             : "border-border bg-transparent text-muted-foreground hover:text-foreground hover:border-border/80"
@@ -164,7 +164,8 @@ function ActiveFilterPill({
       <span className="truncate max-w-[100px]">{label}</span>
       <button
         onClick={onRemove}
-        className="inline-flex items-center justify-center size-3.5 rounded-full hover:bg-primary/20 cursor-pointer transition-colors"
+        aria-label={`Remove ${label} filter`}
+        className="inline-flex items-center justify-center size-3.5 rounded-full hover:bg-primary/20 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       >
         <X className="size-2.5" />
       </button>
@@ -267,7 +268,8 @@ export default function FilterBar({
           {localSearch && (
             <button
               onClick={clearSearch}
-              className="absolute right-1.5 text-muted-foreground hover:text-foreground cursor-pointer"
+              aria-label="Clear search"
+              className="absolute right-1.5 text-muted-foreground hover:text-foreground cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
             >
               <X className="size-3" />
             </button>
diff --git a/src/components/Dashboard/SummaryHeader.tsx b/src/components/Dashboard/SummaryHeader.tsx
index aaaa43f..5aa5009 100644
--- a/src/components/Dashboard/SummaryHeader.tsx
+++ b/src/components/Dashboard/SummaryHeader.tsx
@@ -126,7 +126,7 @@ const SummaryHeader = memo(function SummaryHeader({
       {archivedCount > 0 && onToggleArchived && (
         <button
           onClick={onToggleArchived}
-          className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-[var(--radius-element)] border transition-colors cursor-pointer ${
+          className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-[var(--radius-element)] border transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
             showArchived
               ? "bg-accent text-foreground border-border"
               : "text-muted-foreground border-transparent hover:text-foreground hover:bg-accent/50"
@@ -144,7 +144,7 @@ const SummaryHeader = memo(function SummaryHeader({
         <div className="flex items-center rounded-[var(--radius-element)] border border-border overflow-hidden">
           <button
             onClick={() => onDashboardModeChange("board")}
-            className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium transition-colors cursor-pointer ${
+            className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
               dashboardMode === "board"
                 ? "bg-accent text-foreground"
                 : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
@@ -157,7 +157,7 @@ const SummaryHeader = memo(function SummaryHeader({
           <div className="w-px h-4 bg-border" />
           <button
             onClick={() => onDashboardModeChange("graph")}
-            className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium transition-colors cursor-pointer ${
+            className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
               dashboardMode === "graph"
                 ? "bg-accent text-foreground"
                 : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
diff --git a/src/components/Dashboard/TaskCard.tsx b/src/components/Dashboard/TaskCard.tsx
index f325f3c..23b8310 100644
--- a/src/components/Dashboard/TaskCard.tsx
+++ b/src/components/Dashboard/TaskCard.tsx
@@ -192,7 +192,7 @@ export default React.memo(function TaskCard({
           </span>
           {/* Dep dots (compact) */}
           {taskMap && task.depends_on.length > 0 && (
-            <div className="flex items-center gap-[3px]" title={`${depAnalysis.metCount} met, ${depAnalysis.unmetCount} unmet`}>
+            <div className="flex items-center gap-[3px]" role="img" aria-label={`Dependencies: ${depAnalysis.metCount} met, ${depAnalysis.unmetCount} unmet`} title={`${depAnalysis.metCount} met, ${depAnalysis.unmetCount} unmet`}>
               {depAnalysis.deps.map((d) => (
                 <span
                   key={d.id}
@@ -263,7 +263,7 @@ export default React.memo(function TaskCard({
 
             {/* Dependency dots */}
             {taskMap && task.depends_on.length > 0 && (
-              <div className="flex items-center gap-[3px]" title={`${depAnalysis.metCount} met, ${depAnalysis.unmetCount} unmet`}>
+              <div className="flex items-center gap-[3px]" role="img" aria-label={`Dependencies: ${depAnalysis.metCount} met, ${depAnalysis.unmetCount} unmet`} title={`${depAnalysis.metCount} met, ${depAnalysis.unmetCount} unmet`}>
                 {depAnalysis.deps.map((d) => (
                   <span
                     key={d.id}
@@ -297,6 +297,7 @@ export default React.memo(function TaskCard({
                   size="icon-xs"
                   hoverEffect="scale"
                   clickEffect="scale"
+                  aria-label="More actions"
                   title="More actions"
                   onClick={(e) => { e.stopPropagation(); onContextMenu(e); }}
                   onPointerDown={(e) => e.stopPropagation()}
diff --git a/src/components/GitHub/CommitDetailPanel.tsx b/src/components/GitHub/CommitDetailPanel.tsx
index 6fe3670..e880176 100644
--- a/src/components/GitHub/CommitDetailPanel.tsx
+++ b/src/components/GitHub/CommitDetailPanel.tsx
@@ -114,7 +114,8 @@ export default function CommitDetailPanel({
         </span>
         <button
           onClick={onClose}
-          className="rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent"
+          aria-label="Close detail panel"
+          className="rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           title="Close detail panel"
         >
           <X size={14} />
diff --git a/src/components/GitHub/IssueDetailPanel.tsx b/src/components/GitHub/IssueDetailPanel.tsx
index f40361c..def0243 100644
--- a/src/components/GitHub/IssueDetailPanel.tsx
+++ b/src/components/GitHub/IssueDetailPanel.tsx
@@ -89,7 +89,8 @@ export default function IssueDetailPanel({
         </span>
         <button
           onClick={onClose}
-          className="rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent"
+          aria-label="Close detail panel"
+          className="rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           title="Close detail panel"
         >
           <X size={14} />
diff --git a/src/components/GitHub/PullRequestDetailPanel.tsx b/src/components/GitHub/PullRequestDetailPanel.tsx
index 0c1dffa..1b089fc 100644
--- a/src/components/GitHub/PullRequestDetailPanel.tsx
+++ b/src/components/GitHub/PullRequestDetailPanel.tsx
@@ -151,7 +151,8 @@ export default function PullRequestDetailPanel({
         </span>
         <button
           onClick={onClose}
-          className="rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent"
+          aria-label="Close detail panel"
+          className="rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           title="Close detail panel"
         >
           <X size={14} />
@@ -232,9 +233,9 @@ export default function PullRequestDetailPanel({
           )}
 
           {/* Stats */}
-          <div className="flex items-center gap-3 text-xs">
-            <span className="text-success">+{detail.additions}</span>
-            <span className="text-destructive">-{detail.deletions}</span>
+          <div className="flex items-center gap-3 text-xs" aria-label={`${detail.additions} additions, ${detail.deletions} deletions, ${detail.changed_files} file${detail.changed_files !== 1 ? "s" : ""} changed`}>
+            <span className="text-success" aria-hidden="true">+{detail.additions}</span>
+            <span className="text-destructive" aria-hidden="true">-{detail.deletions}</span>
             <span className="text-muted-foreground">
               {detail.changed_files} file
               {detail.changed_files !== 1 ? "s" : ""}
diff --git a/src/components/GitHub/PullRequestsTab.tsx b/src/components/GitHub/PullRequestsTab.tsx
index d221f7a..c495dd2 100644
--- a/src/components/GitHub/PullRequestsTab.tsx
+++ b/src/components/GitHub/PullRequestsTab.tsx
@@ -133,7 +133,7 @@ export default function PullRequestsTab({
                 <button
                   onClick={() => setStateFilter(filter)}
                   title={`Show ${filter} pull requests`}
-                  className={`flex items-center gap-1 px-2 py-1 text-xs transition-colors capitalize ${
+                  className={`flex items-center gap-1 px-2 py-1 text-xs transition-colors capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
                     stateFilter === filter
                       ? "bg-accent text-foreground"
                       : "text-muted-foreground hover:text-dim-foreground"
@@ -183,11 +183,12 @@ export default function PullRequestsTab({
 
       {/* Error banner */}
       {error && (
-        <div className="flex items-center gap-2 px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
+        <div role="alert" className="flex items-center gap-2 px-3 py-1.5 text-xs bg-destructive/10 text-destructive">
           <span className="flex-1">{error}</span>
           <button
             onClick={fetchPRs}
-            className="shrink-0 inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-destructive/15 transition-colors"
+            aria-label="Retry loading pull requests"
+            className="shrink-0 inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-destructive/15 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             <RotateCw size={10} />
             Retry
@@ -276,15 +277,17 @@ export default function PullRequestsTab({
                       <span>→</span>
                       {pr.base_ref_name}
                     </span>
-                    <span className="text-2xs text-success">+{pr.additions}</span>
-                    <span className="text-2xs text-destructive">-{pr.deletions}</span>
+                    <span className="text-2xs text-success" aria-label={`${pr.additions} additions`}>+{pr.additions}</span>
+                    <span className="text-2xs text-destructive" aria-label={`${pr.deletions} deletions`}>-{pr.deletions}</span>
                   </div>
                 </div>
 
                 {/* Review status */}
-                <div className="shrink-0 flex items-center">
-                  {reviewIcon(pr.review_decision)}
-                </div>
+                {pr.review_decision && (
+                  <div className="shrink-0 flex items-center" aria-label={`Review: ${pr.review_decision.toLowerCase().replace(/_/g, " ")}`} title={pr.review_decision.toLowerCase().replace(/_/g, " ")}>
+                    {reviewIcon(pr.review_decision)}
+                  </div>
+                )}
 
                 {/* Author */}
                 <span className="shrink-0 text-2xs text-muted-foreground max-w-[80px] truncate">
diff --git a/src/components/Review/DiffView.tsx b/src/components/Review/DiffView.tsx
index 5781f17..f5bacaa 100644
--- a/src/components/Review/DiffView.tsx
+++ b/src/components/Review/DiffView.tsx
@@ -111,6 +111,7 @@ export default function DiffView({
   // Feedback banner
   const feedbackBanner = feedback && (
     <div
+      role="alert"
       className={`flex items-center justify-between px-3 py-1.5 text-xs shrink-0 ${
         feedback.type === "success"
           ? "bg-success/10 text-success"
@@ -120,7 +121,8 @@ export default function DiffView({
       <span>{feedback.text}</span>
       <button
         onClick={onDismissFeedback}
-        className="ml-2 opacity-60 hover:opacity-100"
+        aria-label="Dismiss feedback"
+        className="ml-2 opacity-60 hover:opacity-100 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       >
         dismiss
       </button>
diff --git a/src/components/Settings/ProjectsTab.tsx b/src/components/Settings/ProjectsTab.tsx
index 47abf48..9d27420 100644
--- a/src/components/Settings/ProjectsTab.tsx
+++ b/src/components/Settings/ProjectsTab.tsx
@@ -94,6 +94,7 @@ function ProjectRow({
           <Button
             variant="ghost"
             size="icon-sm"
+            aria-label="Hide from sidebar"
             title="Hide from sidebar"
             onClick={onHide}
           >
@@ -103,6 +104,7 @@ function ProjectRow({
           <Button
             variant="ghost"
             size="icon-sm"
+            aria-label="Show in sidebar"
             title="Show in sidebar"
             onClick={onShow}
           >
diff --git a/src/components/Shell/ErrorBoundary.tsx b/src/components/Shell/ErrorBoundary.tsx
index 9480a64..d966c72 100644
--- a/src/components/Shell/ErrorBoundary.tsx
+++ b/src/components/Shell/ErrorBoundary.tsx
@@ -77,7 +77,7 @@ export default class ErrorBoundary extends Component<Props, State> {
     return (
       <div className="flex items-center justify-center h-full w-full p-8"
            style={{ gridArea: "content" }}>
-        <div className="flex flex-col items-center gap-6 max-w-md w-full">
+        <div role="alert" className="flex flex-col items-center gap-6 max-w-md w-full">
           {/* Icon */}
           <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-destructive/10 ring-1 ring-destructive/20">
             <AlertTriangle size={22} className="text-destructive" />
diff --git a/src/components/Shell/FloatingPermissionBanner.tsx b/src/components/Shell/FloatingPermissionBanner.tsx
index 1ddbf53..c2c68c4 100644
--- a/src/components/Shell/FloatingPermissionBanner.tsx
+++ b/src/components/Shell/FloatingPermissionBanner.tsx
@@ -52,7 +52,9 @@ export default memo(function FloatingPermissionBanner() {
   return (
     <button
       onClick={handleClick}
-      className="fixed top-14 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2.5 pl-3 pr-4 py-2 rounded-full backdrop-blur-md bg-warning/90 ring-1 ring-warning/60 shadow-lg shadow-warning/20 cursor-pointer hover:bg-warning hover:shadow-xl hover:shadow-warning/30 transition-all duration-200 animate-in slide-in-from-top-4 fade-in"
+      role="alert"
+      aria-label={totalCount === 1 ? `${pendingEntries[0].sessionName} needs permission — click to review` : `${totalCount} permission requests waiting — click to review`}
+      className="fixed top-14 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2.5 pl-3 pr-4 py-2 rounded-full backdrop-blur-md bg-warning/90 ring-1 ring-warning/60 shadow-lg shadow-warning/20 cursor-pointer hover:bg-warning hover:shadow-xl hover:shadow-warning/30 transition-all duration-200 animate-in slide-in-from-top-4 fade-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
     >
       {/* Pulsing dot */}
       <span className="relative flex size-2.5">
diff --git a/src/components/Shell/WindowControls.tsx b/src/components/Shell/WindowControls.tsx
index 0cf783f..8674825 100644
--- a/src/components/Shell/WindowControls.tsx
+++ b/src/components/Shell/WindowControls.tsx
@@ -5,9 +5,9 @@ import { useCallback, useEffect, useState } from "react";
 import { needsCustomWindowControls } from "../../lib/platform";
 
 const BTN =
-  "inline-flex items-center justify-center w-[46px] h-full hover:bg-accent transition-colors";
+  "inline-flex items-center justify-center w-[46px] h-full hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset";
 const CLOSE_BTN =
-  "inline-flex items-center justify-center w-[46px] h-full hover:bg-red-500 transition-colors";
+  "inline-flex items-center justify-center w-[46px] h-full hover:bg-red-500 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset";
 
 export default function WindowControls() {
   const [maximized, setMaximized] = useState(false);
@@ -43,12 +43,13 @@ export default function WindowControls() {
 
   return (
     <div className="flex items-center h-full shrink-0">
-      <button className={BTN} onClick={handleMinimize} title="Minimize">
+      <button className={BTN} onClick={handleMinimize} aria-label="Minimize window" title="Minimize">
         <Minus size={14} strokeWidth={1.5} />
       </button>
       <button
         className={BTN}
         onClick={handleToggleMaximize}
+        aria-label={maximized ? "Restore window" : "Maximize window"}
         title={maximized ? "Restore" : "Maximize"}
       >
         {maximized ? (
@@ -57,7 +58,7 @@ export default function WindowControls() {
           <Square size={12} strokeWidth={1.5} />
         )}
       </button>
-      <button className={CLOSE_BTN} onClick={handleClose} title="Close">
+      <button className={CLOSE_BTN} onClick={handleClose} aria-label="Close window" title="Close">
         <X size={14} strokeWidth={1.5} />
       </button>
     </div>
diff --git a/src/components/ai-elements/shimmer.tsx b/src/components/ai-elements/shimmer.tsx
index 6b635d0..43ef7e7 100644
--- a/src/components/ai-elements/shimmer.tsx
+++ b/src/components/ai-elements/shimmer.tsx
@@ -6,6 +6,8 @@ import { motion } from "motion/react";
 import type { CSSProperties, ElementType, JSX } from "react";
 import { memo, useMemo } from "react";
 
+import { useReducedMotion } from "@/components/ui/orecus.io/lib/use-reduced-motion";
+
 type MotionHTMLProps = MotionProps & Record<string, unknown>;
 
 // Cache motion components at module level to avoid creating during render
@@ -38,6 +40,7 @@ const ShimmerComponent = ({
   duration = 2,
   spread = 2,
 }: TextShimmerProps) => {
+  const prefersReducedMotion = useReducedMotion();
   const MotionComponent = getMotionComponent(
     Component as keyof JSX.IntrinsicElements
   );
@@ -47,6 +50,20 @@ const ShimmerComponent = ({
     [children, spread]
   );
 
+  // When reduced motion is preferred, render static text without animation
+  if (prefersReducedMotion) {
+    return (
+      <MotionComponent
+        className={cn(
+          "relative inline-block text-muted-foreground",
+          className
+        )}
+      >
+        {children}
+      </MotionComponent>
+    );
+  }
+
   return (
     <MotionComponent
       animate={{ backgroundPosition: "0% center" }}
diff --git a/src/styles/main.css b/src/styles/main.css
index 6b0c473..5ff20dc 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -566,6 +566,18 @@
   }
 }
 
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* ── Base styles ── */
 html,
 body {

From a36c96467ed01de4cbfbcf3ac37fb54b70543559 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Sat, 28 Mar 2026 12:35:31 +0100
Subject: [PATCH 12/16] feat: enrich empty states with icons, hints, and CTAs
 across views

Add consistent empty state patterns throughout the app: contextual
hints in Kanban columns, icons for DependencyGraph/CommitGraph/FileList/
TaskDetailView/ReviewPanel, search CTA for InstalledSkillsList, session
mode explanations in SessionsEmptyState, sub-tasks placeholder in
TaskMetadataSidebar, tab icons for Rules/Skills, and normalize all
empty state icon opacity to opacity-30.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Dashboard/ArchivedTaskList.tsx |  2 +-
 src/components/Dashboard/DependencyGraph.tsx  |  7 +++--
 src/components/Dashboard/EmptyState.tsx       |  2 +-
 src/components/Dashboard/KanbanColumn.tsx     | 11 +++++++
 src/components/GitHub/CommitGraph.tsx         | 11 +++++++
 src/components/Review/FileList.tsx            |  5 ++--
 src/components/Review/ReviewPanel.tsx         |  2 +-
 .../Sessions/SessionsEmptyState.tsx           | 29 +++++++++++++++----
 .../SkillsRules/InstalledSkillsList.tsx       | 16 ++++++++++
 .../SkillsRules/SkillsRulesView.tsx           |  6 ++--
 src/components/SkillsRules/SkillsTab.tsx      | 10 ++++++-
 src/components/TaskDetail/TaskDetailView.tsx  |  6 ++--
 .../TaskDetail/TaskMetadataSidebar.tsx        | 18 +++++++-----
 13 files changed, 100 insertions(+), 25 deletions(-)

diff --git a/src/components/Dashboard/ArchivedTaskList.tsx b/src/components/Dashboard/ArchivedTaskList.tsx
index e7ddf20..4ca51f9 100644
--- a/src/components/Dashboard/ArchivedTaskList.tsx
+++ b/src/components/Dashboard/ArchivedTaskList.tsx
@@ -60,7 +60,7 @@ export default function ArchivedTaskList({
   if (tasks.length === 0) {
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-2 text-muted-foreground">
-        <Archive className="size-8 opacity-40" />
+        <Archive className="size-8 opacity-30" />
         <p className="text-sm">No archived tasks</p>
       </div>
     );
diff --git a/src/components/Dashboard/DependencyGraph.tsx b/src/components/Dashboard/DependencyGraph.tsx
index 51d5d65..579039d 100644
--- a/src/components/Dashboard/DependencyGraph.tsx
+++ b/src/components/Dashboard/DependencyGraph.tsx
@@ -11,6 +11,7 @@ import {
   AlertTriangle,
   CirclePause,
   Minus,
+  Network,
 } from "lucide-react";
 import type { Task, Session } from "../../types";
 import { useAppStore } from "../../store/appStore";
@@ -388,8 +389,10 @@ export default React.memo(function DependencyGraph({
 
   if (tasks.length === 0) {
     return (
-      <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
-        No tasks to display
+      <div className="flex flex-col items-center justify-center h-full gap-2">
+        <Network className="size-8 text-muted-foreground opacity-30" />
+        <p className="text-sm text-muted-foreground">No tasks to display</p>
+        <p className="text-xs text-muted-foreground/70">Add dependencies between tasks to see the graph</p>
       </div>
     );
   }
diff --git a/src/components/Dashboard/EmptyState.tsx b/src/components/Dashboard/EmptyState.tsx
index 351a857..1bbc30b 100644
--- a/src/components/Dashboard/EmptyState.tsx
+++ b/src/components/Dashboard/EmptyState.tsx
@@ -9,7 +9,7 @@ export default function EmptyState({ onNewTask }: EmptyStateProps) {
   return (
     <div className="flex items-center justify-center flex-1 min-h-0">
       <div className="text-center max-w-[360px]">
-        <div className="mb-3 text-muted-foreground flex justify-center">
+        <div className="mb-3 text-muted-foreground opacity-30 flex justify-center">
           <ClipboardList size={32} />
         </div>
         <h3 className="m-0 mb-2 text-base font-semibold text-foreground">
diff --git a/src/components/Dashboard/KanbanColumn.tsx b/src/components/Dashboard/KanbanColumn.tsx
index d320a66..9f65e78 100644
--- a/src/components/Dashboard/KanbanColumn.tsx
+++ b/src/components/Dashboard/KanbanColumn.tsx
@@ -258,6 +258,17 @@ const KanbanColumn = memo(function KanbanColumn({
 
       {/* Card list */}
       <div className="flex-1 min-h-0 overflow-y-auto p-1.5 flex flex-col gap-1.5">
+        {columnItems.length === 0 && (
+          <p className="text-2xs text-muted-foreground text-center py-6 select-none">
+            {status === "done"
+              ? "Completed tasks appear here"
+              : status === "in-review"
+                ? "Tasks awaiting review appear here"
+                : status === "in-progress"
+                  ? "Start a session to move tasks here"
+                  : "Drop tasks here"}
+          </p>
+        )}
         {columnItems.map((item, idx) => {
           if (item.type === "ghost") {
             return (
diff --git a/src/components/GitHub/CommitGraph.tsx b/src/components/GitHub/CommitGraph.tsx
index 265e80f..3040166 100644
--- a/src/components/GitHub/CommitGraph.tsx
+++ b/src/components/GitHub/CommitGraph.tsx
@@ -6,6 +6,7 @@ import {
   RAIL_WIDTH,
   maxColumn,
 } from "../../lib/graphLayout";
+import { GitCommitHorizontal } from "lucide-react";
 import type { RefInfo } from "../../types";
 import GraphCanvas from "./GraphCanvas";
 import CommitRow from "./CommitRow";
@@ -81,6 +82,16 @@ export default function CommitGraph({
     handleScroll();
   }, [handleScroll]);
 
+  if (!loading && nodes.length === 0) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-2">
+        <GitCommitHorizontal className="size-8 text-muted-foreground opacity-30" />
+        <p className="text-sm text-muted-foreground">No commits found</p>
+        <p className="text-xs text-muted-foreground/70">Commits will appear here once the repository has history</p>
+      </div>
+    );
+  }
+
   if (loading && nodes.length === 0) {
     return (
       <div className="flex-1 overflow-hidden">
diff --git a/src/components/Review/FileList.tsx b/src/components/Review/FileList.tsx
index 72f2f16..053826d 100644
--- a/src/components/Review/FileList.tsx
+++ b/src/components/Review/FileList.tsx
@@ -273,8 +273,9 @@ export default function FileList({
         {changesExpanded && (
           <div className="py-1">
             {!hasChanges ? (
-              <div className="px-3 py-3 text-center text-xs text-muted-foreground">
-                No uncommitted changes
+              <div className="flex flex-col items-center gap-1.5 px-3 py-4 text-center">
+                <CheckCircle2 className="size-5 text-muted-foreground opacity-30" />
+                <span className="text-xs text-muted-foreground">No uncommitted changes</span>
               </div>
             ) : (
               changedFiles.map((file) => (
diff --git a/src/components/Review/ReviewPanel.tsx b/src/components/Review/ReviewPanel.tsx
index 6418c33..a8a4b60 100644
--- a/src/components/Review/ReviewPanel.tsx
+++ b/src/components/Review/ReviewPanel.tsx
@@ -55,7 +55,7 @@ export default function ReviewPanel({
   if (!rawDiff) {
     return (
       <div className="flex flex-1 flex-col items-center justify-center gap-2">
-        <FileDiff className="size-8 text-muted-foreground opacity-40" />
+        <FileDiff className="size-8 text-muted-foreground opacity-30" />
         <p className="text-sm text-muted-foreground">
           Select a file to view its diff
         </p>
diff --git a/src/components/Sessions/SessionsEmptyState.tsx b/src/components/Sessions/SessionsEmptyState.tsx
index 7a428ae..38a1f81 100644
--- a/src/components/Sessions/SessionsEmptyState.tsx
+++ b/src/components/Sessions/SessionsEmptyState.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { invoke } from "@tauri-apps/api/core";
-import { Sparkles, TerminalSquare } from "lucide-react";
+import { ClipboardList, Lightbulb, Sparkles, TerminalSquare, Wand2 } from "lucide-react";
 
 import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
 import { formatError } from "../../lib/errorMessages";
@@ -34,17 +34,17 @@ export default function SessionsEmptyState({
 
   return (
     <div className="flex items-center justify-center flex-1 min-h-0">
-      <div className="text-center max-w-80">
-        <div className="mb-3 text-muted-foreground flex justify-center">
+      <div className="text-center max-w-96">
+        <div className="mb-3 text-muted-foreground opacity-30 flex justify-center">
           <TerminalSquare size={32} />
         </div>
         <div className="text-base text-foreground mb-1.5">
           No active sessions
         </div>
         <div className="text-sm text-muted-foreground leading-normal mb-4">
-          Start an agent session or open a plain terminal to get started.
+          Start a vibe session or terminal here, or launch task sessions from the dashboard.
         </div>
-        <div className="flex items-center justify-center gap-2">
+        <div className="flex items-center justify-center gap-2 mb-6">
           <Button
             variant="color"
             color={accentColor}
@@ -67,6 +67,25 @@ export default function SessionsEmptyState({
             Start Terminal
           </Button>
         </div>
+
+        {/* Session mode hints */}
+        <div className="grid grid-cols-3 gap-3 text-left">
+          <div className="flex flex-col gap-1">
+            <Wand2 className="size-3.5 text-muted-foreground opacity-60" />
+            <span className="text-xs font-medium text-dim-foreground">Vibe</span>
+            <span className="text-2xs text-muted-foreground leading-relaxed">Freeform coding directly on the current branch</span>
+          </div>
+          <div className="flex flex-col gap-1">
+            <ClipboardList className="size-3.5 text-muted-foreground opacity-60" />
+            <span className="text-xs font-medium text-dim-foreground">Task</span>
+            <span className="text-2xs text-muted-foreground leading-relaxed">Started from a task in the dashboard with its own worktree</span>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Lightbulb className="size-3.5 text-muted-foreground opacity-60" />
+            <span className="text-xs font-medium text-dim-foreground">Research</span>
+            <span className="text-2xs text-muted-foreground leading-relaxed">Started from a task to explore and plan without changes</span>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/SkillsRules/InstalledSkillsList.tsx b/src/components/SkillsRules/InstalledSkillsList.tsx
index 50c82a7..35df039 100644
--- a/src/components/SkillsRules/InstalledSkillsList.tsx
+++ b/src/components/SkillsRules/InstalledSkillsList.tsx
@@ -6,6 +6,7 @@ import {
   Globe,
   Loader2,
   Package,
+  Search,
   Trash2,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
@@ -30,12 +31,14 @@ interface Props {
   projectId: string;
   refreshKey: number;
   onRemove: (skillName: string, global: boolean) => void;
+  onSearchClick?: () => void;
 }
 
 export default function InstalledSkillsList({
   projectId,
   refreshKey,
   onRemove,
+  onSearchClick,
 }: Props) {
   const [data, setData] = useState<InstalledSkillsResponse | null>(null);
   const [loading, setLoading] = useState(true);
@@ -103,6 +106,19 @@ export default function InstalledSkillsList({
         <p className="text-xs opacity-70">
           Search above to find and install skills from skills.sh
         </p>
+        {onSearchClick && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onSearchClick}
+            leftIcon={<Search className="size-3" />}
+            hoverEffect="scale"
+            clickEffect="scale"
+            className="mt-1"
+          >
+            Search Skills
+          </Button>
+        )}
       </div>
     );
   }
diff --git a/src/components/SkillsRules/SkillsRulesView.tsx b/src/components/SkillsRules/SkillsRulesView.tsx
index 45164b8..86274fc 100644
--- a/src/components/SkillsRules/SkillsRulesView.tsx
+++ b/src/components/SkillsRules/SkillsRulesView.tsx
@@ -1,4 +1,4 @@
-import { ArrowUpCircle, Blocks, Bot } from "lucide-react";
+import { ArrowUpCircle, Blocks, Bot, BookOpen, Sparkles } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
@@ -62,8 +62,8 @@ export default function SkillsRulesView() {
           fullWidth={false}
           className="p-0"
         >
-          <Tabs.Tab value="rules">Rules</Tabs.Tab>
-          <Tabs.Tab value="skills">Skills</Tabs.Tab>
+          <Tabs.Tab value="rules" icon={<BookOpen size={13} />}>Rules</Tabs.Tab>
+          <Tabs.Tab value="skills" icon={<Sparkles size={13} />}>Skills</Tabs.Tab>
           <Tabs.Tab
             value="plugins"
             icon={<AgentIcon agent="claude-code" size={13} />}
diff --git a/src/components/SkillsRules/SkillsTab.tsx b/src/components/SkillsRules/SkillsTab.tsx
index c74f661..29f33ef 100644
--- a/src/components/SkillsRules/SkillsTab.tsx
+++ b/src/components/SkillsRules/SkillsTab.tsx
@@ -6,7 +6,7 @@ import {
   Package,
   Search,
 } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { highlightMatch } from "../../lib/highlightMatch";
 
 import { open } from "@tauri-apps/plugin-shell";
@@ -39,6 +39,12 @@ export default function SkillsTab({ projectId }: Props) {
   const [installing, setInstalling] = useState<string | null>(null);
   const [refreshKey, setRefreshKey] = useState(0);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSearchClick = useMemo(
+    () => () => searchInputRef.current?.focus(),
+    [],
+  );
 
   const doSearch = useCallback(async (q: string) => {
     if (!q.trim()) {
@@ -128,6 +134,7 @@ export default function SkillsTab({ projectId }: Props) {
       <div className="flex items-center gap-2 px-3 py-2.5 border-b border-border/50 shrink-0">
         <Search size={14} className="text-muted-foreground shrink-0" />
         <input
+          ref={searchInputRef}
           type="text"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
@@ -228,6 +235,7 @@ export default function SkillsTab({ projectId }: Props) {
           projectId={projectId}
           refreshKey={refreshKey}
           onRemove={handleRemove}
+          onSearchClick={handleSearchClick}
         />
       </div>
     </div>
diff --git a/src/components/TaskDetail/TaskDetailView.tsx b/src/components/TaskDetail/TaskDetailView.tsx
index 40dce88..0824ea0 100644
--- a/src/components/TaskDetail/TaskDetailView.tsx
+++ b/src/components/TaskDetail/TaskDetailView.tsx
@@ -148,10 +148,12 @@ export default function TaskDetailView() {
   if (!activeTaskId) {
     return (
       <div
-        className="flex items-center justify-center text-sm text-muted-foreground"
+        className="flex flex-col items-center justify-center gap-2"
         style={{ gridArea: "content" }}
       >
-        No task selected
+        <FileText className="size-8 text-muted-foreground opacity-30" />
+        <p className="text-sm text-muted-foreground">No task selected</p>
+        <p className="text-xs text-muted-foreground/70">Select a task from the dashboard to view details</p>
       </div>
     );
   }
diff --git a/src/components/TaskDetail/TaskMetadataSidebar.tsx b/src/components/TaskDetail/TaskMetadataSidebar.tsx
index c73b03a..b1570e4 100644
--- a/src/components/TaskDetail/TaskMetadataSidebar.tsx
+++ b/src/components/TaskDetail/TaskMetadataSidebar.tsx
@@ -485,11 +485,11 @@ export default function TaskMetadataSidebar({
       </SidebarSection>
 
       {/* Sub-tasks (children that depend on this task) */}
-      {subTasks.length > 0 && (
-        <SidebarSection
-          label="Sub-tasks"
-          icon={<CornerDownRight size={10} className="opacity-60" />}
-        >
+      <SidebarSection
+        label="Sub-tasks"
+        icon={<CornerDownRight size={10} className="opacity-60" />}
+      >
+        {subTasks.length > 0 ? (
           <div className="flex flex-col gap-0.5">
             {subTasks.map((t) => (
               <button
@@ -510,8 +510,12 @@ export default function TaskMetadataSidebar({
               </button>
             ))}
           </div>
-        </SidebarSection>
-      )}
+        ) : (
+          <p className="text-2xs text-muted-foreground py-0.5">
+            No sub-tasks — add this task as a dependency on others
+          </p>
+        )}
+      </SidebarSection>
     </div>
   );
 }

From 7df55cf28d1454917f8cc460ac7532767c0bc5b4 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Sat, 28 Mar 2026 13:52:34 +0100
Subject: [PATCH 13/16] feat: move session history into right sidebar as global
 tab

Add Files | Session History tab system to the right sidebar, making
session history accessible from any view instead of being duplicated
in ChatView and SessionsView. Active tab persists across restarts.

- Refactor SessionHistorySidebar into embeddable SessionHistoryContent
- Add chatSessionActive prop to disable "Resume in Chat" when active
- Remove per-view sidebar instances from ChatView and SessionsView
- Remove History toggle button from SessionsToolbar
- Update sidebar toggle tooltip and docs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/chat.md                                  |  18 +-
 src/components/Chat/ChatView.tsx              | 695 +-----------------
 src/components/Chat/SessionHistorySidebar.tsx | 479 ++++++++++++
 src/components/Sessions/SessionsToolbar.tsx   |   1 -
 src/components/Sessions/SessionsView.tsx      |  72 +-
 src/components/Shell/ApplicationBar.tsx       |   2 +-
 src/components/Shell/RightSidebar.tsx         | 210 ++++--
 src/hooks/useSessionHistory.ts                | 248 +++++++
 8 files changed, 941 insertions(+), 784 deletions(-)
 create mode 100644 src/components/Chat/SessionHistorySidebar.tsx
 create mode 100644 src/hooks/useSessionHistory.ts

diff --git a/docs/chat.md b/docs/chat.md
index b506e86..c7fe08e 100644
--- a/docs/chat.md
+++ b/docs/chat.md
@@ -11,15 +11,11 @@ Project Chat is a conversational interface for talking to an ACP-capable agent a
 
 ## Starting a Chat
 
-Open the **Chat** tab in the top bar. If no chat session is active, you'll see a two-column layout:
+Open the **Chat** tab in the top bar. If no chat session is active, you'll see a centered launcher:
 
-**Left column — New Chat:**
 1. **Pick an agent** — Only agents with both the CLI and ACP adapter installed are selectable. Each card shows "CLI" and "ACP" status badges.
 2. **Click "New Chat"** — This launches a fresh ACP session scoped to your current project.
 
-**Right column — Session History:**
-If the selected agent supports session listing, a sidebar shows your previous conversations (see [Resuming Sessions](#resuming-sessions) below).
-
 > **Note:** Chat requires an ACP-capable agent (e.g. Claude Code with the ACP adapter). If none are installed, a warning banner explains what's needed.
 
 Only one chat session can be active per project at a time. If you switch away and come back, the existing session is automatically resumed.
@@ -135,16 +131,16 @@ Hover over any of your sent messages to reveal a pencil icon. Click it to copy t
 
 When an agent supports the ACP `session/list` and `session/load` protocol, you can resume past conversations across app restarts.
 
-### Session History Sidebar
+### Session History (Right Sidebar)
 
-The right column of the Chat empty state shows a **Previous Sessions** list fetched from the agent:
+Session history is accessible globally from the **right sidebar**. Click the **Session History** tab (next to the Files tab) to view a **Previous Sessions** list fetched from the agent. The right sidebar can be toggled with **Ctrl+B** and the active tab persists across restarts.
 
 - **Search** — Filter sessions by title using the search bar at the top.
 - **Refresh** — Click the refresh icon to re-fetch the list from the agent.
-- **Resume** — Opens the session in the Chat view, replaying conversation history so you can pick up where you left off.
-- **Session** — Opens the session as a pane in the Sessions view, then navigates you there.
+- **Resume in Chat** — Opens the session in the Chat view, replaying conversation history so you can pick up where you left off. This button is disabled when a chat session is already active.
+- **Open as Session** — Opens the session as a pane in the Sessions view, then navigates you there.
 
-Each row shows the session title (or "Untitled session") and a relative timestamp (e.g. "2h ago", "yesterday").
+Each row shows the session title (or "Untitled session") and a relative timestamp (e.g. "2h ago", "yesterday"). The session list auto-fetches when you switch to the Session History tab.
 
 ### Capability Detection
 
@@ -152,7 +148,7 @@ Not all agents support session persistence. If an agent doesn't support listing:
 - The sidebar shows "This agent doesn't support session history" with a **Retry** button.
 - The "not supported" result is cached so Faber won't re-probe on every visit. Click **Retry** to clear the cache and check again (useful after an agent update).
 
-If the agent supports listing but not loading (resume), sessions appear in the list but the Resume and Session buttons are disabled with a tooltip explanation.
+If the agent supports listing but not loading (resume), sessions appear in the list but the Resume and Open as Session buttons are disabled with a tooltip explanation.
 
 ### Error Handling
 
diff --git a/src/components/Chat/ChatView.tsx b/src/components/Chat/ChatView.tsx
index 8f8e7ee..d0e65d7 100644
--- a/src/components/Chat/ChatView.tsx
+++ b/src/components/Chat/ChatView.tsx
@@ -1,18 +1,12 @@
 import { invoke } from "@tauri-apps/api/core";
 import {
   AlertTriangle,
-  ChevronRight,
-  Clock,
-  ExternalLink,
-  History,
   Loader2,
   MessageCircle,
   Plus,
-  RefreshCw,
-  Search,
   X,
 } from "lucide-react";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 
 import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
 import { formatErrorWithHint } from "../../lib/errorMessages";
@@ -23,56 +17,7 @@ import { Button } from "../ui/orecus.io/components/enhanced-button";
 import ChatPane from "./ChatPane";
 import ThreadStatusBadge from "./ThreadStatusBadge";
 
-import type { AgentSessionInfo, Session, SessionMode } from "../../types";
-import { cn } from "@/lib/utils";
-
-/** Format an ISO timestamp to a relative time string. */
-function formatRelativeTime(isoString: string | null): string {
-  if (!isoString) return "";
-  const date = new Date(isoString);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMin = Math.floor(diffMs / 60000);
-  if (diffMin < 1) return "just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  const diffHr = Math.floor(diffMin / 60);
-  if (diffHr < 24) return `${diffHr}h ago`;
-  const diffDays = Math.floor(diffHr / 24);
-  if (diffDays === 1) return "yesterday";
-  if (diffDays < 7) return `${diffDays}d ago`;
-  return date.toLocaleDateString();
-}
-
-/** Assign a date group label for grouping session items. */
-function getDateGroup(isoString: string | null): string {
-  if (!isoString) return "Older";
-  const date = new Date(isoString);
-  const now = new Date();
-  const startOfToday = new Date(
-    now.getFullYear(),
-    now.getMonth(),
-    now.getDate(),
-  );
-  const startOfYesterday = new Date(startOfToday.getTime() - 86400000);
-  if (date >= startOfToday) return "Today";
-  if (date >= startOfYesterday) return "Yesterday";
-  return "Older";
-}
-
-/** Faber metadata matched from active sessions by acp_session_id. */
-interface FaberSessionMeta {
-  mode: SessionMode;
-  taskId: string | null;
-  isActive: boolean;
-}
-
-const MODE_CONFIG: Record<string, { label: string; className: string }> = {
-  chat: { label: "Chat", className: "bg-primary/15 text-primary" },
-  vibe: { label: "Vibe", className: "bg-violet-500/15 text-violet-400" },
-  task: { label: "Task", className: "bg-success/15 text-success" },
-  research: { label: "Research", className: "bg-warning/15 text-warning" },
-  shell: { label: "Shell", className: "bg-muted text-muted-foreground" },
-};
+import type { Session } from "../../types";
 
 /**
  * ChatView — project-scoped chat view.
@@ -87,41 +32,9 @@ const ChatView = memo(function ChatView() {
   const agents = useAppStore((s) => s.agents);
   const addBackgroundTask = useAppStore((s) => s.addBackgroundTask);
   const removeBackgroundTask = useAppStore((s) => s.removeBackgroundTask);
-  const setActiveView = useAppStore((s) => s.setActiveView);
-  const fetchAgentSessionList = useAppStore((s) => s.fetchAgentSessionList);
-  const retryAgentSessionList = useAppStore((s) => s.retryAgentSessionList);
-  const removeAgentSession = useAppStore((s) => s.removeAgentSession);
-  const agentSessionList = useAppStore((s) => s.agentSessionList);
-  const agentSessionListSupported = useAppStore(
-    (s) => s.agentSessionListSupported,
-  );
-  const agentLoadSessionSupported = useAppStore(
-    (s) => s.agentLoadSessionSupported,
-  );
-  const agentSessionListLoading = useAppStore((s) => s.agentSessionListLoading);
-  const agentSessionListFetchedAt = useAppStore(
-    (s) => s.agentSessionListFetchedAt,
-  );
 
-  const [selectedAgentName, setSelectedAgentName] = useState<string>("");
-  const [launching, setLaunching] = useState(false);
-  const [resuming, setResuming] = useState<string | null>(null);
+  const [selectedAgentName, setSelectedAgentName] = useState("");
   const [error, setError] = useState<string | null>(null);
-  const [showCloseConfirm, setShowCloseConfirm] = useState(false);
-  const [searchFilter, setSearchFilter] = useState("");
-
-  // Find the active chat session for this project
-  const chatSession: Session | undefined = useMemo(
-    () =>
-      sessions.find(
-        (s) =>
-          s.project_id === activeProjectId &&
-          s.mode === "chat" &&
-          s.transport === "acp" &&
-          (s.status === "running" || s.status === "starting"),
-      ),
-    [sessions, activeProjectId],
-  );
 
   // ACP-capable agents only
   const acpAgents = useMemo(
@@ -136,75 +49,25 @@ const ChatView = memo(function ChatView() {
     }
   }, [acpAgents, selectedAgentName]);
 
-  // Session list key and data
-  const sessionListKey =
-    selectedAgentName && activeProjectId
-      ? `${selectedAgentName}:${activeProjectId}`
-      : null;
-  const sessionHistory = sessionListKey
-    ? (agentSessionList[sessionListKey] ?? null)
-    : null;
-  const isListLoading = sessionListKey
-    ? (agentSessionListLoading[sessionListKey] ?? false)
-    : false;
-  const isListSupported = selectedAgentName
-    ? (agentSessionListSupported[selectedAgentName] ?? true)
-    : true;
-  const isLoadSupported = selectedAgentName
-    ? (agentLoadSessionSupported[selectedAgentName] ?? true)
-    : true;
-
-  // Auto-fetch session list when empty state is shown or cache is stale (>60s)
-  const SESSION_LIST_TTL_MS = 60_000;
-  useEffect(() => {
-    if (
-      !chatSession &&
-      selectedAgentName &&
-      activeProjectId &&
-      !isListLoading
-    ) {
-      const fetchedAt = sessionListKey
-        ? (agentSessionListFetchedAt[sessionListKey] ?? 0)
-        : 0;
-      const isStale =
-        sessionHistory === null || Date.now() - fetchedAt > SESSION_LIST_TTL_MS;
-      if (isStale) {
-        fetchAgentSessionList(selectedAgentName, activeProjectId);
-      }
-    }
-  }, [
-    chatSession,
-    selectedAgentName,
-    activeProjectId,
-    sessionHistory,
-    sessionListKey,
-    agentSessionListFetchedAt,
-    isListLoading,
-    fetchAgentSessionList,
-  ]);
+  const [launching, setLaunching] = useState(false);
+  const [showCloseConfirm, setShowCloseConfirm] = useState(false);
 
-  // Re-fetch when agent changes
-  const handleAgentSelect = useCallback(
-    (name: string) => {
-      setSelectedAgentName(name);
-      if (activeProjectId) {
-        fetchAgentSessionList(name, activeProjectId);
-      }
-    },
-    [activeProjectId, fetchAgentSessionList],
+  // Find the active chat session for this project
+  const chatSession: Session | undefined = useMemo(
+    () =>
+      sessions.find(
+        (s) =>
+          s.project_id === activeProjectId &&
+          s.mode === "chat" &&
+          s.transport === "acp" &&
+          (s.status === "running" || s.status === "starting"),
+      ),
+    [sessions, activeProjectId],
   );
 
-  // Filter sessions by search
-  const filteredSessions = useMemo(() => {
-    if (!sessionHistory) return [];
-    if (!searchFilter.trim()) return sessionHistory;
-    const q = searchFilter.toLowerCase();
-    return sessionHistory.filter(
-      (s) =>
-        s.title?.toLowerCase().includes(q) ||
-        s.session_id.toLowerCase().includes(q),
-    );
-  }, [sessionHistory, searchFilter]);
+  const handleAgentSelect = useCallback((name: string) => {
+    setSelectedAgentName(name);
+  }, []);
 
   const handleStartChat = useCallback(async () => {
     if (!activeProjectId || !selectedAgentName || launching) return;
@@ -229,78 +92,9 @@ const ChatView = memo(function ChatView() {
     launching,
     addBackgroundTask,
     removeBackgroundTask,
+    setError,
   ]);
 
-  /** Resume into ChatView (stays on chat tab). */
-  const handleResumeInChat = useCallback(
-    async (agentSessionId: string) => {
-      if (!activeProjectId || !selectedAgentName || resuming) return;
-      setError(null);
-      setResuming(agentSessionId);
-      const taskLabel = "Resuming chat session";
-      addBackgroundTask(taskLabel);
-      try {
-        await invoke("resume_acp_session", {
-          projectId: activeProjectId,
-          agentName: selectedAgentName,
-          agentSessionId,
-        });
-      } catch (err) {
-        setError(formatErrorWithHint(err, "agent-launch"));
-        // Remove the failed session from cache (expired/deleted by agent)
-        removeAgentSession(selectedAgentName, activeProjectId, agentSessionId);
-      } finally {
-        setResuming(null);
-        removeBackgroundTask(taskLabel);
-      }
-    },
-    [
-      activeProjectId,
-      selectedAgentName,
-      resuming,
-      addBackgroundTask,
-      removeBackgroundTask,
-      removeAgentSession,
-    ],
-  );
-
-  /** Resume and open in Sessions view as a session pane. */
-  const handleLaunchAsSession = useCallback(
-    async (agentSessionId: string) => {
-      if (!activeProjectId || !selectedAgentName || resuming) return;
-      setError(null);
-      setResuming(agentSessionId);
-      const taskLabel = "Launching session";
-      addBackgroundTask(taskLabel);
-      try {
-        await invoke("resume_acp_session", {
-          projectId: activeProjectId,
-          agentName: selectedAgentName,
-          agentSessionId,
-          target: "session",
-        });
-        // Navigate to Sessions view so it appears as a session pane
-        setActiveView("sessions");
-      } catch (err) {
-        setError(formatErrorWithHint(err, "agent-launch"));
-        // Remove the failed session from cache (expired/deleted by agent)
-        removeAgentSession(selectedAgentName, activeProjectId, agentSessionId);
-      } finally {
-        setResuming(null);
-        removeBackgroundTask(taskLabel);
-      }
-    },
-    [
-      activeProjectId,
-      selectedAgentName,
-      resuming,
-      addBackgroundTask,
-      removeBackgroundTask,
-      removeAgentSession,
-      setActiveView,
-    ],
-  );
-
   const handleCloseChat = useCallback(async () => {
     if (!chatSession) return;
     try {
@@ -316,40 +110,6 @@ const ChatView = memo(function ChatView() {
     useAppStore.getState().cleanupSessionAcp(chatSession.id);
   }, [chatSession]);
 
-  const handleRefreshList = useCallback(() => {
-    if (selectedAgentName && activeProjectId) {
-      fetchAgentSessionList(selectedAgentName, activeProjectId);
-    }
-  }, [selectedAgentName, activeProjectId, fetchAgentSessionList]);
-
-  /** Retry after "not supported" — clears persisted flag and re-probes. */
-  const handleRetry = useCallback(() => {
-    if (selectedAgentName && activeProjectId) {
-      retryAgentSessionList(selectedAgentName, activeProjectId);
-    }
-  }, [selectedAgentName, activeProjectId, retryAgentSessionList]);
-
-  // Cross-reference: map agent session IDs to Faber session metadata for enrichment.
-  // Only active sessions are in the store (DB deletes on close), so this enriches
-  // currently-running sessions. Historical enrichment requires T-102 (history table).
-  const acpSessionMap = useMemo(() => {
-    const map = new Map<string, FaberSessionMeta>();
-    for (const s of sessions) {
-      if (s.acp_session_id && s.project_id === activeProjectId) {
-        map.set(s.acp_session_id, {
-          mode: s.mode,
-          taskId: s.task_id,
-          isActive: s.status === "running" || s.status === "starting",
-        });
-      }
-    }
-    return map;
-  }, [sessions, activeProjectId]);
-
-  // Whether to show the session history sidebar
-  const showHistory =
-    acpAgents.length > 0 && (sessionHistory !== null || isListLoading);
-
   // Active chat session → render ChatPane
   if (chatSession) {
     return (
@@ -412,20 +172,14 @@ const ChatView = memo(function ChatView() {
     );
   }
 
-  // No active session → two-column layout: new chat (left) + session history (right)
+  // No active session → centered new chat launcher
   return (
     <div
       className="flex min-h-0 overflow-hidden bg-card/80"
       style={{ gridArea: "content" }}
     >
-      {/* Left column — new chat launcher */}
       <div className="flex flex-col items-center justify-center flex-1 min-w-0 px-6">
-        <div
-          className={cn(
-            "flex flex-col items-center gap-5 w-full",
-            showHistory ? "max-w-sm" : "max-w-md",
-          )}
-        >
+        <div className="flex flex-col items-center gap-5 w-full max-w-md">
           {/* Header */}
           <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 ring-1 ring-primary/20">
             <MessageCircle
@@ -506,411 +260,6 @@ const ChatView = memo(function ChatView() {
         </div>
       </div>
 
-      {/* Right column — session history sidebar */}
-      {showHistory && (
-        <SessionHistorySidebar
-          sessions={filteredSessions}
-          acpSessionMap={acpSessionMap}
-          isLoading={isListLoading}
-          isSupported={isListSupported}
-          isLoadSupported={isLoadSupported}
-          searchFilter={searchFilter}
-          onSearchChange={setSearchFilter}
-          onResumeInChat={handleResumeInChat}
-          onLaunchAsSession={handleLaunchAsSession}
-          onRefresh={handleRefreshList}
-          onRetry={handleRetry}
-          resumingId={resuming}
-          hasData={sessionHistory !== null}
-        />
-      )}
-    </div>
-  );
-});
-
-/** Skeleton placeholder row matching SessionHistoryItem shape. */
-const SessionItemSkeleton = memo(function SessionItemSkeleton({
-  widthClass,
-}: {
-  widthClass: string;
-}) {
-  return (
-    <div className="px-3 py-2.5 border-b border-border/10">
-      <div className="flex items-center gap-2 mb-1.5">
-        <div
-          className={cn(
-            "h-3.5 rounded bg-muted-foreground/10 animate-pulse",
-            widthClass,
-          )}
-        />
-      </div>
-      <div className="h-3 w-16 rounded bg-muted-foreground/[0.06] animate-pulse" />
-    </div>
-  );
-});
-
-/** Date group header between session items. */
-const DateGroupHeader = memo(function DateGroupHeader({
-  label,
-  collapsed,
-  onToggle,
-  count,
-}: {
-  label: string;
-  collapsed: boolean;
-  onToggle: () => void;
-  count: number;
-}) {
-  return (
-    <button
-      onClick={onToggle}
-      className="flex items-center gap-2 px-3 pt-3 pb-1.5 w-full cursor-pointer group/dg"
-    >
-      <ChevronRight
-        size={10}
-        className={cn(
-          "text-muted-foreground/40 transition-transform duration-150",
-          !collapsed && "rotate-90",
-        )}
-      />
-      <span className="text-2xs font-medium uppercase tracking-wider text-muted-foreground/50 group-hover/dg:text-muted-foreground transition-colors">
-        {label}
-      </span>
-      {collapsed && (
-        <span className="text-2xs text-muted-foreground/30 tabular-nums">
-          {count}
-        </span>
-      )}
-      <div className="flex-1 h-px bg-border/20" />
-    </button>
-  );
-});
-
-/** Right-side session history panel with search, skeletons, and date-grouped list. */
-const SessionHistorySidebar = memo(function SessionHistorySidebar({
-  sessions,
-  acpSessionMap,
-  isLoading,
-  isSupported,
-  isLoadSupported,
-  searchFilter,
-  onSearchChange,
-  onResumeInChat,
-  onLaunchAsSession,
-  onRefresh,
-  onRetry,
-  resumingId,
-  hasData,
-}: {
-  sessions: AgentSessionInfo[];
-  acpSessionMap: Map<string, FaberSessionMeta>;
-  isLoading: boolean;
-  isSupported: boolean;
-  isLoadSupported: boolean;
-  searchFilter: string;
-  onSearchChange: (value: string) => void;
-  onResumeInChat: (sessionId: string) => void;
-  onLaunchAsSession: (sessionId: string) => void;
-  onRefresh: () => void;
-  onRetry: () => void;
-  resumingId: string | null;
-  hasData: boolean;
-}) {
-  const searchRef = useRef<HTMLInputElement>(null);
-  const [collapsedGroups, setCollapsedGroups] = useState<
-    Record<string, boolean>
-  >({
-    Yesterday: true,
-    Older: true,
-  });
-
-  const toggleGroup = useCallback((label: string) => {
-    setCollapsedGroups((prev) => ({ ...prev, [label]: !prev[label] }));
-  }, []);
-
-  // Group sessions by date (skip grouping when search is active)
-  const groupedSessions = useMemo(() => {
-    if (!sessions.length || searchFilter) return null;
-    const groups: { label: string; items: AgentSessionInfo[] }[] = [];
-    let currentLabel = "";
-    for (const s of sessions) {
-      const label = getDateGroup(s.updated_at);
-      if (label !== currentLabel) {
-        currentLabel = label;
-        groups.push({ label, items: [s] });
-      } else {
-        groups[groups.length - 1].items.push(s);
-      }
-    }
-    return groups;
-  }, [sessions, searchFilter]);
-
-  return (
-    <div className="flex flex-col w-72 shrink-0 border-l border-border/40 bg-card/60 min-h-0">
-      {/* Header */}
-      <div className="flex items-center gap-2 px-3 py-2.5 border-b border-border/30 shrink-0">
-        <History size={13} className="text-muted-foreground" />
-        <span className="text-xs font-medium text-foreground">
-          Previous Sessions
-        </span>
-        {hasData && sessions.length > 0 && (
-          <span className="text-2xs text-muted-foreground/60 tabular-nums">
-            {sessions.length}
-          </span>
-        )}
-        <div className="flex-1" />
-        <button
-          onClick={onRefresh}
-          disabled={isLoading}
-          className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-50"
-          title="Refresh session list"
-        >
-          <RefreshCw size={12} className={cn(isLoading && "animate-spin")} />
-        </button>
-      </div>
-
-      {/* Search bar — always visible when supported (shown during loading for layout stability) */}
-      {(hasData || isLoading) && isSupported && (
-        <div className="flex items-center gap-2 px-3 py-2 border-b border-border/20 shrink-0">
-          <Search size={12} className="text-muted-foreground/50 shrink-0" />
-          <input
-            ref={searchRef}
-            type="text"
-            value={searchFilter}
-            onChange={(e) => onSearchChange(e.target.value)}
-            placeholder="Search sessions..."
-            className="w-full bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 outline-none"
-          />
-          {searchFilter && (
-            <button
-              onClick={() => onSearchChange("")}
-              className="p-0.5 rounded text-muted-foreground/50 hover:text-foreground transition-colors"
-            >
-              <X size={10} />
-            </button>
-          )}
-        </div>
-      )}
-
-      {/* Content area — scrollable */}
-      <div className="flex-1 min-h-0 overflow-y-auto">
-        {/* Skeleton loading state */}
-        {isLoading && !hasData && (
-          <div className="pt-1">
-            <SessionItemSkeleton widthClass="w-3/4" />
-            <SessionItemSkeleton widthClass="w-1/2" />
-            <SessionItemSkeleton widthClass="w-5/6" />
-            <SessionItemSkeleton widthClass="w-2/3" />
-            <SessionItemSkeleton widthClass="w-3/5" />
-          </div>
-        )}
-
-        {/* Not supported */}
-        {!isLoading && !isSupported && (
-          <div className="flex flex-col items-center gap-2 py-10 px-4">
-            <p className="text-xs text-muted-foreground text-center">
-              This agent doesn't support session history.
-            </p>
-            <button
-              onClick={onRetry}
-              className="text-xs text-primary hover:underline"
-            >
-              Retry
-            </button>
-          </div>
-        )}
-
-        {/* Empty list */}
-        {!isLoading &&
-          isSupported &&
-          hasData &&
-          sessions.length === 0 &&
-          !searchFilter && (
-            <div className="flex flex-col items-center gap-2 py-10 px-4">
-              <div className="flex items-center justify-center w-9 h-9 rounded-xl bg-muted/50">
-                <MessageCircle size={16} className="text-muted-foreground/40" />
-              </div>
-              <p className="text-xs text-muted-foreground text-center">
-                No previous sessions yet.
-                <br />
-                <span className="text-muted-foreground/60">
-                  Start a new chat to get going.
-                </span>
-              </p>
-            </div>
-          )}
-
-        {/* No search results */}
-        {hasData && isSupported && searchFilter && sessions.length === 0 && (
-          <div className="flex flex-col items-center gap-1 py-10 px-4">
-            <p className="text-xs text-muted-foreground">
-              No sessions matching
-            </p>
-            <p className="text-xs text-foreground font-medium truncate max-w-full">
-              &ldquo;{searchFilter}&rdquo;
-            </p>
-          </div>
-        )}
-
-        {/* Date-grouped session list */}
-        {hasData && isSupported && sessions.length > 0 && groupedSessions
-          ? groupedSessions.map((group) => (
-              <div key={group.label}>
-                <DateGroupHeader
-                  label={group.label}
-                  collapsed={!!collapsedGroups[group.label]}
-                  onToggle={() => toggleGroup(group.label)}
-                  count={group.items.length}
-                />
-                {!collapsedGroups[group.label] &&
-                  group.items.map((session) => (
-                    <SessionHistoryItem
-                      key={session.session_id}
-                      session={session}
-                      faberMeta={acpSessionMap.get(session.session_id)}
-                      onResumeInChat={onResumeInChat}
-                      onLaunchAsSession={onLaunchAsSession}
-                      isResuming={resumingId === session.session_id}
-                      isDisabled={resumingId !== null}
-                      isLoadSupported={isLoadSupported}
-                    />
-                  ))}
-              </div>
-            ))
-          : hasData &&
-            isSupported &&
-            sessions.length > 0 &&
-            sessions.map((session) => (
-              <SessionHistoryItem
-                key={session.session_id}
-                session={session}
-                faberMeta={acpSessionMap.get(session.session_id)}
-                onResumeInChat={onResumeInChat}
-                onLaunchAsSession={onLaunchAsSession}
-                isResuming={resumingId === session.session_id}
-                isDisabled={resumingId !== null}
-                isLoadSupported={isLoadSupported}
-              />
-            ))}
-      </div>
-    </div>
-  );
-});
-
-/** Individual session row with mode badge, task link, active indicator, and actions. */
-const SessionHistoryItem = memo(function SessionHistoryItem({
-  session,
-  faberMeta,
-  onResumeInChat,
-  onLaunchAsSession,
-  isResuming,
-  isDisabled,
-  isLoadSupported,
-}: {
-  session: AgentSessionInfo;
-  faberMeta: FaberSessionMeta | undefined;
-  onResumeInChat: (sessionId: string) => void;
-  onLaunchAsSession: (sessionId: string) => void;
-  isResuming: boolean;
-  isDisabled: boolean;
-  isLoadSupported: boolean;
-}) {
-  const actionsDisabled = isDisabled || !isLoadSupported;
-  const modeConfig = faberMeta ? MODE_CONFIG[faberMeta.mode] : null;
-
-  return (
-    <div
-      className={cn(
-        "group flex items-start gap-2 px-3 py-2.5 border-b border-border/10 last:border-b-0",
-        "hover:bg-accent/30 transition-colors",
-        isDisabled && !isResuming && "opacity-50 pointer-events-none",
-      )}
-    >
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        {/* Title row with badges */}
-        <div className="flex items-center gap-1.5 min-w-0">
-          {/* Active indicator */}
-          {faberMeta?.isActive && (
-            <span
-              className="shrink-0 w-1.5 h-1.5 rounded-full bg-success"
-              title="Active in Faber"
-            />
-          )}
-          <p className="text-xs font-medium text-foreground truncate">
-            {session.title || "Untitled session"}
-          </p>
-        </div>
-
-        {/* Meta row: time, mode badge, task ID */}
-        <div className="flex items-center gap-1.5 mt-0.5">
-          {session.updated_at && (
-            <span className="flex items-center gap-1 text-xs text-muted-foreground">
-              <Clock size={9} className="shrink-0" />
-              {formatRelativeTime(session.updated_at)}
-            </span>
-          )}
-          {modeConfig && (
-            <span
-              className={cn(
-                "inline-flex items-center px-1.5 py-px rounded text-2xs font-medium leading-tight",
-                modeConfig.className,
-              )}
-            >
-              {modeConfig.label}
-            </span>
-          )}
-          {faberMeta?.taskId && (
-            <span className="inline-flex items-center px-1 py-px rounded bg-accent/60 text-2xs font-mono text-dim-foreground leading-tight">
-              {faberMeta.taskId}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Action buttons — always visible, compact icon buttons */}
-      <div className="flex items-center gap-0.5 shrink-0 pt-0.5">
-        {isResuming ? (
-          <Loader2 size={12} className="animate-spin text-muted-foreground" />
-        ) : (
-          <>
-            <button
-              onClick={() => onResumeInChat(session.session_id)}
-              disabled={actionsDisabled}
-              className={cn(
-                "p-1 rounded transition-colors",
-                isLoadSupported
-                  ? "text-muted-foreground/50 hover:text-primary hover:bg-primary/10"
-                  : "text-muted-foreground/20 cursor-not-allowed",
-              )}
-              title={
-                isLoadSupported
-                  ? "Resume in chat"
-                  : "This agent doesn't support resuming sessions"
-              }
-            >
-              <MessageCircle size={12} />
-            </button>
-            <button
-              onClick={() => onLaunchAsSession(session.session_id)}
-              disabled={actionsDisabled}
-              className={cn(
-                "p-1 rounded transition-colors",
-                isLoadSupported
-                  ? "text-muted-foreground/50 hover:text-foreground hover:bg-accent/50"
-                  : "text-muted-foreground/20 cursor-not-allowed",
-              )}
-              title={
-                isLoadSupported
-                  ? "Open as session pane"
-                  : "This agent doesn't support resuming sessions"
-              }
-            >
-              <ExternalLink size={12} />
-            </button>
-          </>
-        )}
-      </div>
     </div>
   );
 });
diff --git a/src/components/Chat/SessionHistorySidebar.tsx b/src/components/Chat/SessionHistorySidebar.tsx
new file mode 100644
index 0000000..dbe5cbc
--- /dev/null
+++ b/src/components/Chat/SessionHistorySidebar.tsx
@@ -0,0 +1,479 @@
+import {
+  ChevronRight,
+  Clock,
+  ExternalLink,
+  Loader2,
+  MessageCircle,
+  RefreshCw,
+  Search,
+  X,
+} from "lucide-react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+
+import type { FaberSessionMeta } from "../../hooks/useSessionHistory";
+import type { AgentSessionInfo } from "../../types";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/** Format an ISO timestamp to a relative time string. */
+function formatRelativeTime(isoString: string | null): string {
+  if (!isoString) return "";
+  const date = new Date(isoString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 60000);
+  if (diffMin < 1) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDays = Math.floor(diffHr / 24);
+  if (diffDays === 1) return "yesterday";
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+/** Assign a date group label for grouping session items. */
+function getDateGroup(isoString: string | null): string {
+  if (!isoString) return "Older";
+  const date = new Date(isoString);
+  const now = new Date();
+  const startOfToday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  );
+  const startOfYesterday = new Date(startOfToday.getTime() - 86400000);
+  if (date >= startOfToday) return "Today";
+  if (date >= startOfYesterday) return "Yesterday";
+  return "Older";
+}
+
+const MODE_CONFIG: Record<string, { label: string; className: string }> = {
+  chat: { label: "Chat", className: "bg-primary/15 text-primary" },
+  vibe: { label: "Vibe", className: "bg-violet-500/15 text-violet-400" },
+  task: { label: "Task", className: "bg-success/15 text-success" },
+  research: { label: "Research", className: "bg-warning/15 text-warning" },
+  shell: { label: "Shell", className: "bg-muted text-muted-foreground" },
+};
+
+// ============================================================================
+// Sub-components
+// ============================================================================
+
+/** Skeleton placeholder row matching SessionHistoryItem shape. */
+const SessionItemSkeleton = memo(function SessionItemSkeleton({
+  widthClass,
+}: {
+  widthClass: string;
+}) {
+  return (
+    <div className="px-3 py-2.5 border-b border-border/10">
+      <div
+        className={cn(
+          "h-3.5 rounded bg-muted-foreground/10 animate-pulse",
+          widthClass,
+        )}
+      />
+      <div className="mt-1.5 flex items-center gap-1.5">
+        <div className="h-3 w-12 rounded bg-muted-foreground/[0.06] animate-pulse" />
+        <div
+          className={cn(
+            "h-3.5 rounded bg-muted-foreground/10 animate-pulse",
+            widthClass,
+          )}
+        />
+      </div>
+      <div className="h-3 w-16 rounded bg-muted-foreground/[0.06] animate-pulse" />
+    </div>
+  );
+});
+
+/** Date group header between session items. */
+const DateGroupHeader = memo(function DateGroupHeader({
+  label,
+  collapsed,
+  onToggle,
+  count,
+}: {
+  label: string;
+  collapsed: boolean;
+  onToggle: () => void;
+  count: number;
+}) {
+  return (
+    <button
+      onClick={onToggle}
+      className="flex items-center gap-2 px-3 pt-3 pb-1.5 w-full cursor-pointer group/dg"
+    >
+      <ChevronRight
+        size={10}
+        className={cn(
+          "text-muted-foreground/40 transition-transform duration-150",
+          !collapsed && "rotate-90",
+        )}
+      />
+      <span className="text-2xs font-medium uppercase tracking-wider text-muted-foreground/50 group-hover/dg:text-muted-foreground transition-colors">
+        {label}
+      </span>
+      {collapsed && (
+        <span className="text-2xs text-muted-foreground/30 tabular-nums">
+          {count}
+        </span>
+      )}
+      <div className="flex-1 h-px bg-border/20" />
+    </button>
+  );
+});
+
+/** Individual session row with mode badge, task link, active indicator, and actions. */
+const SessionHistoryItem = memo(function SessionHistoryItem({
+  session,
+  faberMeta,
+  onResumeInChat,
+  onLaunchAsSession,
+  isResuming,
+  isDisabled,
+  isLoadSupported,
+  chatSessionActive = false,
+}: {
+  session: AgentSessionInfo;
+  faberMeta: FaberSessionMeta | undefined;
+  onResumeInChat: (sessionId: string) => void;
+  onLaunchAsSession: (sessionId: string) => void;
+  isResuming: boolean;
+  isDisabled: boolean;
+  isLoadSupported: boolean;
+  chatSessionActive?: boolean;
+}) {
+  const actionsDisabled = isDisabled || !isLoadSupported;
+  const resumeInChatDisabled = actionsDisabled || chatSessionActive;
+  const modeConfig = faberMeta ? MODE_CONFIG[faberMeta.mode] : null;
+
+  return (
+    <div
+      className={cn(
+        "group flex items-start gap-2 px-3 py-2.5 border-b border-border/10 last:border-b-0",
+        "hover:bg-accent/30 transition-colors",
+        isDisabled && !isResuming && "opacity-50 pointer-events-none",
+      )}
+    >
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {/* Title row with badges */}
+        <div className="flex items-center gap-1.5 min-w-0">
+          {/* Active indicator */}
+          {faberMeta?.isActive && (
+            <span
+              className="shrink-0 w-1.5 h-1.5 rounded-full bg-success"
+              title="Active in Faber"
+            />
+          )}
+          <p className="text-xs font-medium text-foreground truncate">
+            {session.title || "Untitled session"}
+          </p>
+        </div>
+
+        {/* Meta row: time, mode badge, task ID */}
+        <div className="flex items-center gap-1.5 mt-0.5">
+          {session.updated_at && (
+            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Clock size={9} className="shrink-0" />
+              {formatRelativeTime(session.updated_at)}
+            </span>
+          )}
+          {modeConfig && (
+            <span
+              className={cn(
+                "inline-flex items-center px-1.5 py-px rounded text-2xs font-medium leading-tight",
+                modeConfig.className,
+              )}
+            >
+              {modeConfig.label}
+            </span>
+          )}
+          {faberMeta?.taskId && (
+            <span className="inline-flex items-center px-1 py-px rounded bg-accent/60 text-2xs font-mono text-dim-foreground leading-tight">
+              {faberMeta.taskId}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Action buttons — always visible, compact icon buttons */}
+      <div className="flex items-center gap-0.5 shrink-0 pt-0.5">
+        {isResuming ? (
+          <Loader2 size={12} className="animate-spin text-muted-foreground" />
+        ) : (
+          <>
+            <button
+              onClick={() => onResumeInChat(session.session_id)}
+              disabled={resumeInChatDisabled}
+              className={cn(
+                "p-1 rounded transition-colors",
+                isLoadSupported && !chatSessionActive
+                  ? "text-muted-foreground/50 hover:text-primary hover:bg-primary/10"
+                  : "text-muted-foreground/20 cursor-not-allowed",
+              )}
+              title={
+                chatSessionActive
+                  ? "A chat session is already active"
+                  : isLoadSupported
+                    ? "Resume in chat"
+                    : "This agent doesn't support resuming sessions"
+              }
+            >
+              <MessageCircle size={12} />
+            </button>
+            <button
+              onClick={() => onLaunchAsSession(session.session_id)}
+              disabled={actionsDisabled}
+              className={cn(
+                "p-1 rounded transition-colors",
+                isLoadSupported
+                  ? "text-muted-foreground/50 hover:text-foreground hover:bg-accent/50"
+                  : "text-muted-foreground/20 cursor-not-allowed",
+              )}
+              title={
+                isLoadSupported
+                  ? "Open as session pane"
+                  : "This agent doesn't support resuming sessions"
+              }
+            >
+              <ExternalLink size={12} />
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+});
+
+// ============================================================================
+// SessionHistorySidebar
+// ============================================================================
+
+export interface SessionHistoryContentProps {
+  sessions: AgentSessionInfo[];
+  acpSessionMap: Map<string, FaberSessionMeta>;
+  isLoading: boolean;
+  isSupported: boolean;
+  isLoadSupported: boolean;
+  searchFilter: string;
+  onSearchChange: (value: string) => void;
+  onResumeInChat: (sessionId: string) => void;
+  onLaunchAsSession: (sessionId: string) => void;
+  onRefresh: () => void;
+  onRetry: () => void;
+  resumingId: string | null;
+  hasData: boolean;
+  /** Whether "Resume in Chat" should be disabled (e.g. a chat session is already active) */
+  chatSessionActive?: boolean;
+}
+
+/**
+ * Session history content — renders search, list, skeletons, and empty states.
+ * Designed to be embedded inside any container (right sidebar tab, standalone panel, etc.).
+ * Does NOT render its own panel wrapper — the parent provides the container.
+ */
+export const SessionHistoryContent = memo(function SessionHistoryContent({
+  sessions,
+  acpSessionMap,
+  isLoading,
+  isSupported,
+  isLoadSupported,
+  searchFilter,
+  onSearchChange,
+  onResumeInChat,
+  onLaunchAsSession,
+  onRefresh,
+  onRetry,
+  resumingId,
+  hasData,
+  chatSessionActive = false,
+}: SessionHistoryContentProps) {
+  const searchRef = useRef<HTMLInputElement>(null);
+  const [collapsedGroups, setCollapsedGroups] = useState<
+    Record<string, boolean>
+  >({
+    Yesterday: true,
+    Older: true,
+  });
+
+  const toggleGroup = useCallback((label: string) => {
+    setCollapsedGroups((prev) => ({ ...prev, [label]: !prev[label] }));
+  }, []);
+
+  // Group sessions by date (skip grouping when search is active)
+  const groupedSessions = useMemo(() => {
+    if (!sessions.length || searchFilter) return null;
+    const groups: { label: string; items: AgentSessionInfo[] }[] = [];
+    let currentLabel = "";
+    for (const s of sessions) {
+      const label = getDateGroup(s.updated_at);
+      if (label !== currentLabel) {
+        currentLabel = label;
+        groups.push({ label, items: [s] });
+      } else {
+        groups[groups.length - 1].items.push(s);
+      }
+    }
+    return groups;
+  }, [sessions, searchFilter]);
+
+  return (
+    <>
+      {/* Toolbar: count + refresh */}
+      <div className="flex items-center gap-2 px-3 h-[33px] shrink-0 border-b border-border">
+        <span className="text-xs text-muted-foreground">
+          {hasData && sessions.length > 0
+            ? `${sessions.length} session${sessions.length !== 1 ? "s" : ""}`
+            : "Previous Sessions"}
+        </span>
+        <div className="flex-1" />
+        <button
+          onClick={onRefresh}
+          disabled={isLoading}
+          className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors disabled:opacity-50 cursor-pointer"
+          title="Refresh session list"
+        >
+          <RefreshCw size={12} className={cn(isLoading && "animate-spin")} />
+        </button>
+      </div>
+
+      {/* Search bar — always visible when supported (shown during loading for layout stability) */}
+      {(hasData || isLoading) && isSupported && (
+        <div className="shrink-0 px-2 py-1.5 border-b border-border">
+          <div className="relative flex items-center">
+            <Search
+              size={12}
+              className="absolute left-2 text-muted-foreground pointer-events-none"
+            />
+            <input
+              ref={searchRef}
+              type="text"
+              value={searchFilter}
+              onChange={(e) => onSearchChange(e.target.value)}
+              placeholder="Search sessions..."
+              className="w-full h-6 pl-6 pr-6 rounded bg-muted/50 border border-border text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+            />
+            {searchFilter && (
+              <button
+                onClick={() => onSearchChange("")}
+                className="absolute right-1.5 text-muted-foreground hover:text-foreground cursor-pointer"
+              >
+                <X size={10} />
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Content area — scrollable */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {/* Skeleton loading state */}
+        {isLoading && !hasData && (
+          <div className="pt-1">
+            <SessionItemSkeleton widthClass="w-3/4" />
+            <SessionItemSkeleton widthClass="w-1/2" />
+            <SessionItemSkeleton widthClass="w-5/6" />
+            <SessionItemSkeleton widthClass="w-2/3" />
+            <SessionItemSkeleton widthClass="w-3/5" />
+          </div>
+        )}
+
+        {/* Not supported */}
+        {!isLoading && !isSupported && (
+          <div className="flex flex-col items-center gap-2 py-10 px-4">
+            <p className="text-xs text-muted-foreground text-center">
+              This agent doesn't support session history.
+            </p>
+            <button
+              onClick={onRetry}
+              className="text-xs text-primary hover:underline cursor-pointer"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+
+        {/* Empty list */}
+        {!isLoading &&
+          isSupported &&
+          hasData &&
+          sessions.length === 0 &&
+          !searchFilter && (
+            <div className="flex flex-col items-center gap-2 py-10 px-4">
+              <div className="flex items-center justify-center w-9 h-9 rounded-xl bg-muted/50">
+                <MessageCircle size={16} className="text-muted-foreground/40" />
+              </div>
+              <p className="text-xs text-muted-foreground text-center">
+                No previous sessions yet.
+                <br />
+                <span className="text-muted-foreground/60">
+                  Start a new chat to get going.
+                </span>
+              </p>
+            </div>
+          )}
+
+        {/* No search results */}
+        {hasData && isSupported && searchFilter && sessions.length === 0 && (
+          <div className="flex flex-col items-center gap-1 py-10 px-4">
+            <p className="text-xs text-muted-foreground">
+              No sessions matching
+            </p>
+            <p className="text-xs text-foreground font-medium truncate max-w-full">
+              &ldquo;{searchFilter}&rdquo;
+            </p>
+          </div>
+        )}
+
+        {/* Date-grouped session list */}
+        {hasData && isSupported && sessions.length > 0 && groupedSessions
+          ? groupedSessions.map((group) => (
+              <div key={group.label}>
+                <DateGroupHeader
+                  label={group.label}
+                  collapsed={!!collapsedGroups[group.label]}
+                  onToggle={() => toggleGroup(group.label)}
+                  count={group.items.length}
+                />
+                {!collapsedGroups[group.label] &&
+                  group.items.map((session) => (
+                    <SessionHistoryItem
+                      key={session.session_id}
+                      session={session}
+                      faberMeta={acpSessionMap.get(session.session_id)}
+                      onResumeInChat={onResumeInChat}
+                      onLaunchAsSession={onLaunchAsSession}
+                      isResuming={resumingId === session.session_id}
+                      isDisabled={resumingId !== null}
+                      isLoadSupported={isLoadSupported}
+                      chatSessionActive={chatSessionActive}
+                    />
+                  ))}
+              </div>
+            ))
+          : hasData &&
+            isSupported &&
+            sessions.length > 0 &&
+            sessions.map((session) => (
+              <SessionHistoryItem
+                key={session.session_id}
+                session={session}
+                faberMeta={acpSessionMap.get(session.session_id)}
+                onResumeInChat={onResumeInChat}
+                onLaunchAsSession={onLaunchAsSession}
+                isResuming={resumingId === session.session_id}
+                isDisabled={resumingId !== null}
+                isLoadSupported={isLoadSupported}
+                chatSessionActive={chatSessionActive}
+              />
+            ))}
+      </div>
+    </>
+  );
+});
diff --git a/src/components/Sessions/SessionsToolbar.tsx b/src/components/Sessions/SessionsToolbar.tsx
index 72a1c9c..d379e66 100644
--- a/src/components/Sessions/SessionsToolbar.tsx
+++ b/src/components/Sessions/SessionsToolbar.tsx
@@ -23,7 +23,6 @@ import type { GridLayoutState } from "../../store/appStore";
 interface SessionsToolbarProps {
   layout: GridLayoutState;
   onLayoutChange: (update: Partial<GridLayoutState>) => void;
-
   activeProjectId: string | null;
   onNewSession: () => void;
 }
diff --git a/src/components/Sessions/SessionsView.tsx b/src/components/Sessions/SessionsView.tsx
index 21a4a48..859456c 100644
--- a/src/components/Sessions/SessionsView.tsx
+++ b/src/components/Sessions/SessionsView.tsx
@@ -257,39 +257,45 @@ export default function SessionsView() {
         onNewSession={() => setShowLauncher(true)}
       />
 
-      {activeProjectId && hasContinuousRun && (
-        <ContinuousModeBar projectId={activeProjectId} />
-      )}
-
-      {visibleSessions.length === 0 ? (
-        <SessionsEmptyState activeProjectId={activeProjectId} onNewAgent={() => setShowLauncher(true)} />
-      ) : (
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
-        >
-          <SessionGrid layout={gridLayout} onLayoutChange={handleLayoutChange}>
-            {visibleSessions.map((session) => (
-              <SessionPane
-                key={session.id}
-                session={session}
-                isFocused={gridLayout.focusedPaneId === session.id}
-                onFocus={handleFocus}
-                onMaximizeToggle={handleMaximizeToggle}
-                onDismiss={handleDismiss}
-                onStop={handleStop}
-                onRelaunch={handleRelaunch}
-                dragDisabled={isDragDisabled}
-              />
-            ))}
-          </SessionGrid>
-          <DragOverlay dropAnimation={null}>
-            {draggedSession ? <SessionDragOverlay session={draggedSession} /> : null}
-          </DragOverlay>
-        </DndContext>
-      )}
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        {/* Main content */}
+        <div className="flex flex-col flex-1 min-w-0 min-h-0">
+          {activeProjectId && hasContinuousRun && (
+            <ContinuousModeBar projectId={activeProjectId} />
+          )}
+
+          {visibleSessions.length === 0 ? (
+            <SessionsEmptyState activeProjectId={activeProjectId} onNewAgent={() => setShowLauncher(true)} />
+          ) : (
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+            >
+              <SessionGrid layout={gridLayout} onLayoutChange={handleLayoutChange}>
+                {visibleSessions.map((session) => (
+                  <SessionPane
+                    key={session.id}
+                    session={session}
+                    isFocused={gridLayout.focusedPaneId === session.id}
+                    onFocus={handleFocus}
+                    onMaximizeToggle={handleMaximizeToggle}
+                    onDismiss={handleDismiss}
+                    onStop={handleStop}
+                    onRelaunch={handleRelaunch}
+                    dragDisabled={isDragDisabled}
+                  />
+                ))}
+              </SessionGrid>
+              <DragOverlay dropAnimation={null}>
+                {draggedSession ? <SessionDragOverlay session={draggedSession} /> : null}
+              </DragOverlay>
+            </DndContext>
+          )}
+        </div>
+
+      </div>
 
       {showLauncher && activeProjectId && (
         <LaunchSessionDialog
diff --git a/src/components/Shell/ApplicationBar.tsx b/src/components/Shell/ApplicationBar.tsx
index 6ce0e2b..25fe21a 100644
--- a/src/components/Shell/ApplicationBar.tsx
+++ b/src/components/Shell/ApplicationBar.tsx
@@ -95,7 +95,7 @@ const ApplicationBar = memo(function ApplicationBar() {
         className={`flex items-center justify-center w-8 h-8 rounded-md transition-colors hover:bg-accent ${
           rightSidebarOpen ? "text-primary" : "text-muted-foreground"
         }`}
-        title="Toggle file browser (Ctrl+B)"
+        title="Toggle sidebar (Ctrl+B)"
       >
         <PanelRight size={15} />
       </button>
diff --git a/src/components/Shell/RightSidebar.tsx b/src/components/Shell/RightSidebar.tsx
index cc3a61d..1590e27 100644
--- a/src/components/Shell/RightSidebar.tsx
+++ b/src/components/Shell/RightSidebar.tsx
@@ -1,21 +1,60 @@
 import { invoke } from "@tauri-apps/api/core";
-import { ExternalLink, FolderTree, Search, X } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
+import { ExternalLink, FolderTree, History, Search, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
+import { usePersistedString } from "../../hooks/usePersistedState";
+import { useSessionHistory } from "../../hooks/useSessionHistory";
 import { useAppStore } from "../../store/appStore";
+import { SessionHistoryContent } from "../Chat/SessionHistorySidebar";
 import FileTree from "../Files/FileTree";
 import RightSidebarResizeHandle from "./RightSidebarResizeHandle";
+import { cn } from "@/lib/utils";
+
+type RightSidebarTab = "files" | "history";
+
+const TABS: { id: RightSidebarTab; label: string; icon: typeof FolderTree }[] = [
+  { id: "files", label: "Files", icon: FolderTree },
+  { id: "history", label: "Session History", icon: History },
+];
 
 export default function RightSidebar() {
   const activeProjectId = useAppStore((s) => s.activeProjectId);
   const projects = useAppStore((s) => s.projects);
+  const sessions = useAppStore((s) => s.sessions);
   const [filterText, setFilterText] = useState("");
   const filterInputRef = useRef<HTMLInputElement>(null);
+  const [activeTab, setActiveTab] = usePersistedString(
+    "right_sidebar_tab",
+    "files",
+  );
 
   const activeProject = activeProjectId
     ? projects.find((p) => p.id === activeProjectId)
     : null;
 
+  // Session history hook
+  const history = useSessionHistory();
+
+  // Auto-fetch session list when the History tab becomes active
+  useEffect(() => {
+    if (activeTab === "history") {
+      history.autoFetch();
+    }
+  }, [activeTab, history.autoFetch]);
+
+  // Detect if a chat session is already active (for disabling "Resume in Chat")
+  const chatSessionActive = useMemo(
+    () =>
+      sessions.some(
+        (s) =>
+          s.project_id === activeProjectId &&
+          s.mode === "chat" &&
+          s.transport === "acp" &&
+          (s.status === "running" || s.status === "starting"),
+      ),
+    [sessions, activeProjectId],
+  );
+
   const handleRevealInExplorer = useCallback(() => {
     if (activeProject?.path) {
       invoke("open_file_in_os", { path: activeProject.path });
@@ -32,77 +71,118 @@ export default function RightSidebar() {
       className="relative flex flex-col overflow-hidden select-none border-l border-border bg-card/60"
       style={{ gridArea: "rightsidebar" }}
     >
-      {/* Header — matches ApplicationBar height */}
-      <div className="flex items-center gap-1.5 px-3 h-[33px] shrink-0 border-b border-border">
-        <FolderTree size={13} className="text-muted-foreground" />
-        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-          Files
-        </span>
+      {/* Tab bar — matches ApplicationBar height */}
+      <div className="flex items-center h-[33px] shrink-0 border-b border-border">
+        {TABS.map((tab) => {
+          const Icon = tab.icon;
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              className={cn(
+                "flex items-center gap-1.5 px-3 h-full text-xs font-medium tracking-wide transition-colors cursor-pointer",
+                isActive
+                  ? "text-foreground border-b-2 border-primary"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <Icon size={13} />
+              <span>{tab.label}</span>
+            </button>
+          );
+        })}
       </div>
 
-      {/* Search/filter input */}
-      {activeProject && (
-        <div className="shrink-0 px-2 py-1.5 border-b border-border">
-          <div className="relative flex items-center">
-            <Search
-              size={12}
-              className="absolute left-2 text-muted-foreground pointer-events-none"
-            />
-            <input
-              ref={filterInputRef}
-              type="text"
-              value={filterText}
-              onChange={(e) => setFilterText(e.target.value)}
-              placeholder="Filter files..."
-              className="w-full h-6 pl-6 pr-6 rounded bg-muted/50 border border-border text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
-            />
-            {filterText && (
+      {/* Files tab content */}
+      {activeTab === "files" && (
+        <>
+          {/* Search/filter input */}
+          {activeProject && (
+            <div className="shrink-0 px-2 py-1.5 border-b border-border">
+              <div className="relative flex items-center">
+                <Search
+                  size={12}
+                  className="absolute left-2 text-muted-foreground pointer-events-none"
+                />
+                <input
+                  ref={filterInputRef}
+                  type="text"
+                  value={filterText}
+                  onChange={(e) => setFilterText(e.target.value)}
+                  placeholder="Filter files..."
+                  className="w-full h-6 pl-6 pr-6 rounded bg-muted/50 border border-border text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                />
+                {filterText && (
+                  <button
+                    type="button"
+                    onClick={handleClearFilter}
+                    className="absolute right-1.5 text-muted-foreground hover:text-foreground cursor-pointer"
+                  >
+                    <X size={12} />
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Body */}
+          <div className="flex-1 min-h-0 overflow-y-auto">
+            {activeProject ? (
+              <FileTree
+                projectPath={activeProject.path}
+                projectId={activeProject.id}
+                filterText={filterText}
+              />
+            ) : (
+              <div className="flex flex-col items-center justify-center h-full px-4">
+                <FolderTree className="mb-3 size-10 opacity-30 text-muted-foreground" />
+                <p className="text-sm font-medium text-foreground">
+                  No project open
+                </p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  Open a project to browse its files
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* Footer — Reveal in Explorer button */}
+          {activeProject && (
+            <div className="shrink-0 border-t border-border px-2 py-1.5">
               <button
                 type="button"
-                onClick={handleClearFilter}
-                className="absolute right-1.5 text-muted-foreground hover:text-foreground cursor-pointer"
+                onClick={handleRevealInExplorer}
+                className="flex items-center gap-1.5 w-full px-2 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer"
+                title="Open the project folder in your system file manager"
               >
-                <X size={12} />
+                <ExternalLink size={13} />
+                <span>Reveal in File Manager</span>
               </button>
-            )}
-          </div>
-        </div>
+            </div>
+          )}
+        </>
       )}
 
-      {/* Body */}
-      <div className="flex-1 min-h-0 overflow-y-auto">
-        {activeProject ? (
-          <FileTree
-            projectPath={activeProject.path}
-            projectId={activeProject.id}
-            filterText={filterText}
-          />
-        ) : (
-          <div className="flex flex-col items-center justify-center h-full px-4">
-            <FolderTree className="mb-3 size-10 opacity-30 text-muted-foreground" />
-            <p className="text-sm font-medium text-foreground">
-              No project open
-            </p>
-            <p className="mt-1 text-xs text-muted-foreground">
-              Open a project to browse its files
-            </p>
-          </div>
-        )}
-      </div>
-
-      {/* Footer — Reveal in Explorer button */}
-      {activeProject && (
-        <div className="shrink-0 border-t border-border px-2 py-1.5">
-          <button
-            type="button"
-            onClick={handleRevealInExplorer}
-            className="flex items-center gap-1.5 w-full px-2 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer"
-            title="Open the project folder in your system file manager"
-          >
-            <ExternalLink size={13} />
-            <span>Reveal in File Manager</span>
-          </button>
-        </div>
+      {/* History tab content */}
+      {activeTab === "history" && (
+        <SessionHistoryContent
+          sessions={history.filteredSessions}
+          acpSessionMap={history.acpSessionMap}
+          isLoading={history.isListLoading}
+          isSupported={history.isListSupported}
+          isLoadSupported={history.isLoadSupported}
+          searchFilter={history.searchFilter}
+          onSearchChange={history.setSearchFilter}
+          onResumeInChat={history.handleResumeInChat}
+          onLaunchAsSession={history.handleLaunchAsSession}
+          onRefresh={history.handleRefreshList}
+          onRetry={history.handleRetry}
+          resumingId={history.resuming}
+          hasData={history.sessionHistory !== null}
+          chatSessionActive={chatSessionActive}
+        />
       )}
 
       <RightSidebarResizeHandle />
diff --git a/src/hooks/useSessionHistory.ts b/src/hooks/useSessionHistory.ts
new file mode 100644
index 0000000..b5b4843
--- /dev/null
+++ b/src/hooks/useSessionHistory.ts
@@ -0,0 +1,248 @@
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { formatErrorWithHint } from "../lib/errorMessages";
+import { useAppStore } from "../store/appStore";
+import type { AgentSessionInfo, SessionMode } from "../types";
+
+/** Faber metadata matched from active sessions by acp_session_id. */
+export interface FaberSessionMeta {
+  mode: SessionMode;
+  taskId: string | null;
+  isActive: boolean;
+}
+
+const SESSION_LIST_TTL_MS = 60_000;
+
+/**
+ * Shared hook for session history sidebar data.
+ * Handles agent selection, session list fetching, filtering, and resume actions.
+ */
+export function useSessionHistory() {
+  const activeProjectId = useAppStore((s) => s.activeProjectId);
+  const sessions = useAppStore((s) => s.sessions);
+  const agents = useAppStore((s) => s.agents);
+  const addBackgroundTask = useAppStore((s) => s.addBackgroundTask);
+  const removeBackgroundTask = useAppStore((s) => s.removeBackgroundTask);
+  const setActiveView = useAppStore((s) => s.setActiveView);
+  const fetchAgentSessionList = useAppStore((s) => s.fetchAgentSessionList);
+  const retryAgentSessionList = useAppStore((s) => s.retryAgentSessionList);
+  const removeAgentSession = useAppStore((s) => s.removeAgentSession);
+  const agentSessionList = useAppStore((s) => s.agentSessionList);
+  const agentSessionListSupported = useAppStore(
+    (s) => s.agentSessionListSupported,
+  );
+  const agentLoadSessionSupported = useAppStore(
+    (s) => s.agentLoadSessionSupported,
+  );
+  const agentSessionListLoading = useAppStore((s) => s.agentSessionListLoading);
+  const agentSessionListFetchedAt = useAppStore(
+    (s) => s.agentSessionListFetchedAt,
+  );
+
+  const [selectedAgentName, setSelectedAgentName] = useState("");
+  const [resuming, setResuming] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [searchFilter, setSearchFilter] = useState("");
+
+  // ACP-capable agents only
+  const acpAgents = useMemo(
+    () => agents.filter((a) => a.installed && a.acp_installed),
+    [agents],
+  );
+
+  // Default to first ACP agent
+  useEffect(() => {
+    if (acpAgents.length > 0 && !selectedAgentName) {
+      setSelectedAgentName(acpAgents[0].name);
+    }
+  }, [acpAgents, selectedAgentName]);
+
+  // Session list key and data
+  const sessionListKey =
+    selectedAgentName && activeProjectId
+      ? `${selectedAgentName}:${activeProjectId}`
+      : null;
+  const sessionHistory = sessionListKey
+    ? (agentSessionList[sessionListKey] ?? null)
+    : null;
+  const isListLoading = sessionListKey
+    ? (agentSessionListLoading[sessionListKey] ?? false)
+    : false;
+  const isListSupported = selectedAgentName
+    ? (agentSessionListSupported[selectedAgentName] ?? true)
+    : true;
+  const isLoadSupported = selectedAgentName
+    ? (agentLoadSessionSupported[selectedAgentName] ?? true)
+    : true;
+
+  // Auto-fetch when needed
+  const autoFetch = useCallback(() => {
+    if (selectedAgentName && activeProjectId && !isListLoading) {
+      const fetchedAt = sessionListKey
+        ? (agentSessionListFetchedAt[sessionListKey] ?? 0)
+        : 0;
+      const isStale =
+        sessionHistory === null || Date.now() - fetchedAt > SESSION_LIST_TTL_MS;
+      if (isStale) {
+        fetchAgentSessionList(selectedAgentName, activeProjectId);
+      }
+    }
+  }, [
+    selectedAgentName,
+    activeProjectId,
+    sessionHistory,
+    sessionListKey,
+    agentSessionListFetchedAt,
+    isListLoading,
+    fetchAgentSessionList,
+  ]);
+
+  // Filter sessions by search
+  const filteredSessions = useMemo(() => {
+    if (!sessionHistory) return [];
+    if (!searchFilter.trim()) return sessionHistory;
+    const q = searchFilter.toLowerCase();
+    return sessionHistory.filter(
+      (s: AgentSessionInfo) =>
+        s.title?.toLowerCase().includes(q) ||
+        s.session_id.toLowerCase().includes(q),
+    );
+  }, [sessionHistory, searchFilter]);
+
+  // Agent selection handler
+  const handleAgentSelect = useCallback(
+    (name: string) => {
+      setSelectedAgentName(name);
+      if (activeProjectId) {
+        fetchAgentSessionList(name, activeProjectId);
+      }
+    },
+    [activeProjectId, fetchAgentSessionList],
+  );
+
+  // Refresh list
+  const handleRefreshList = useCallback(() => {
+    if (selectedAgentName && activeProjectId) {
+      fetchAgentSessionList(selectedAgentName, activeProjectId);
+    }
+  }, [selectedAgentName, activeProjectId, fetchAgentSessionList]);
+
+  // Retry after "not supported"
+  const handleRetry = useCallback(() => {
+    if (selectedAgentName && activeProjectId) {
+      retryAgentSessionList(selectedAgentName, activeProjectId);
+    }
+  }, [selectedAgentName, activeProjectId, retryAgentSessionList]);
+
+  // Resume into ChatView
+  const handleResumeInChat = useCallback(
+    async (agentSessionId: string) => {
+      if (!activeProjectId || !selectedAgentName || resuming) return;
+      setError(null);
+      setResuming(agentSessionId);
+      const taskLabel = "Resuming chat session";
+      addBackgroundTask(taskLabel);
+      try {
+        await invoke("resume_acp_session", {
+          projectId: activeProjectId,
+          agentName: selectedAgentName,
+          agentSessionId,
+        });
+      } catch (err) {
+        setError(formatErrorWithHint(err, "agent-launch"));
+        removeAgentSession(selectedAgentName, activeProjectId, agentSessionId);
+      } finally {
+        setResuming(null);
+        removeBackgroundTask(taskLabel);
+      }
+    },
+    [
+      activeProjectId,
+      selectedAgentName,
+      resuming,
+      addBackgroundTask,
+      removeBackgroundTask,
+      removeAgentSession,
+    ],
+  );
+
+  // Resume and open in Sessions view
+  const handleLaunchAsSession = useCallback(
+    async (agentSessionId: string) => {
+      if (!activeProjectId || !selectedAgentName || resuming) return;
+      setError(null);
+      setResuming(agentSessionId);
+      const taskLabel = "Launching session";
+      addBackgroundTask(taskLabel);
+      try {
+        await invoke("resume_acp_session", {
+          projectId: activeProjectId,
+          agentName: selectedAgentName,
+          agentSessionId,
+          target: "session",
+        });
+        setActiveView("sessions");
+      } catch (err) {
+        setError(formatErrorWithHint(err, "agent-launch"));
+        removeAgentSession(selectedAgentName, activeProjectId, agentSessionId);
+      } finally {
+        setResuming(null);
+        removeBackgroundTask(taskLabel);
+      }
+    },
+    [
+      activeProjectId,
+      selectedAgentName,
+      resuming,
+      addBackgroundTask,
+      removeBackgroundTask,
+      removeAgentSession,
+      setActiveView,
+    ],
+  );
+
+  // Cross-reference: map agent session IDs to Faber session metadata
+  const acpSessionMap = useMemo(() => {
+    const map = new Map<string, FaberSessionMeta>();
+    for (const s of sessions) {
+      if (s.acp_session_id && s.project_id === activeProjectId) {
+        map.set(s.acp_session_id, {
+          mode: s.mode,
+          taskId: s.task_id,
+          isActive: s.status === "running" || s.status === "starting",
+        });
+      }
+    }
+    return map;
+  }, [sessions, activeProjectId]);
+
+  // Whether sidebar has data to show
+  const showHistory =
+    acpAgents.length > 0 && (sessionHistory !== null || isListLoading);
+
+  return {
+    // State
+    selectedAgentName,
+    acpAgents,
+    sessionHistory,
+    filteredSessions,
+    acpSessionMap,
+    isListLoading,
+    isListSupported,
+    isLoadSupported,
+    searchFilter,
+    resuming,
+    error,
+    showHistory,
+    // Actions
+    autoFetch,
+    setSearchFilter,
+    handleAgentSelect,
+    handleRefreshList,
+    handleRetry,
+    handleResumeInChat,
+    handleLaunchAsSession,
+    setError,
+  };
+}

From f38b1f413e975a76e2088bc36eba5b09d7b2f2e4 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Sat, 28 Mar 2026 13:53:51 +0100
Subject: [PATCH 14/16] fix: use Switch toggles in launchers and fix context
 menu positioning

Replace Checkbox with reusable ToggleRow (Switch) component for the
"Create worktree" toggle in LaunchTaskDialog and LaunchSessionDialog.
Fix TaskCard context menu always appearing at top-left corner by using
a virtual anchor with cursor coordinates instead of DOM style mutation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../Dashboard/TaskCardContextMenu.tsx         | 18 ++++++++---------
 .../Launchers/LaunchSessionDialog.tsx         | 20 +++++++------------
 src/components/Launchers/LaunchTaskDialog.tsx | 20 +++++++------------
 3 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/src/components/Dashboard/TaskCardContextMenu.tsx b/src/components/Dashboard/TaskCardContextMenu.tsx
index 1e0cb51..4fa7e7c 100644
--- a/src/components/Dashboard/TaskCardContextMenu.tsx
+++ b/src/components/Dashboard/TaskCardContextMenu.tsx
@@ -89,19 +89,19 @@ export default function TaskCardContextMenu({
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [isEditingTitle, setIsEditingTitle] = useState(false);
 
-  // Hidden trigger element — positioned at right-click coordinates
-  const triggerRef = useRef<HTMLButtonElement>(null);
+  // Virtual anchor positioned at right-click coordinates
+  const cursorPos = useRef({ x: 0, y: 0 });
+  const getAnchor = useCallback(() => ({
+    getBoundingClientRect: () => new DOMRect(cursorPos.current.x, cursorPos.current.y, 0, 0),
+  }), []);
 
   // Prevent context menu when editing title
   const handleContextMenu = useCallback((e: React.MouseEvent) => {
     if (isEditingTitle) return;
     e.preventDefault();
     e.stopPropagation();
-    // Position hidden trigger at cursor
-    if (triggerRef.current) {
-      triggerRef.current.style.left = `${e.clientX}px`;
-      triggerRef.current.style.top = `${e.clientY}px`;
-    }
+    // Update cursor position for virtual anchor
+    cursorPos.current = { x: e.clientX, y: e.clientY };
     setMenuOpen(true);
   }, [isEditingTitle]);
 
@@ -288,9 +288,8 @@ export default function TaskCardContextMenu({
 
       {/* Context menu */}
       <MenuPrimitive.Root open={menuOpen} onOpenChange={setMenuOpen}>
-        {/* Hidden trigger — must be a real MenuPrimitive.Trigger for submenu focus tracking */}
+        {/* Hidden trigger — required by Base UI for submenu focus tracking */}
         <MenuPrimitive.Trigger
-          ref={triggerRef}
           render={<span />}
           tabIndex={-1}
           style={{ position: "fixed", left: 0, top: 0, width: 0, height: 0, pointerEvents: "none", opacity: 0 }}
@@ -298,6 +297,7 @@ export default function TaskCardContextMenu({
         <MenuPrimitive.Portal>
           <MenuPrimitive.Positioner
             className="isolate z-50 outline-none"
+            anchor={getAnchor}
             side="bottom"
             align="start"
             sideOffset={4}
diff --git a/src/components/Launchers/LaunchSessionDialog.tsx b/src/components/Launchers/LaunchSessionDialog.tsx
index d942fab..fd27136 100644
--- a/src/components/Launchers/LaunchSessionDialog.tsx
+++ b/src/components/Launchers/LaunchSessionDialog.tsx
@@ -7,7 +7,7 @@ import type { SessionTransport } from "../../types";
 import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
 import { formatErrorWithHint } from "../../lib/errorMessages";
 import { useAppStore } from "../../store/appStore";
-import { Checkbox } from "../ui/checkbox";
+import { ToggleRow } from "../Settings/shared";
 import {
   Dialog,
   DialogClose,
@@ -241,18 +241,12 @@ export default function LaunchSessionDialog({
         )}
 
         {/* Worktree toggle */}
-        <div>
-          <label className="flex cursor-pointer items-center gap-2 text-sm text-dim-foreground">
-            <Checkbox
-              checked={createWorktree}
-              onCheckedChange={(checked) => setCreateWorktree(checked === true)}
-            />
-            Create worktree
-          </label>
-          <p className="mt-1 ml-6 text-xs text-muted-foreground">
-            Isolates work in a separate git worktree with its own branch
-          </p>
-        </div>
+        <ToggleRow
+          label="Create worktree"
+          description="Isolates work in a separate git worktree with its own branch"
+          checked={createWorktree}
+          onChange={setCreateWorktree}
+        />
 
         {/* Base branch (only when worktree enabled) */}
         {createWorktree && (
diff --git a/src/components/Launchers/LaunchTaskDialog.tsx b/src/components/Launchers/LaunchTaskDialog.tsx
index c35a5df..5b9e957 100644
--- a/src/components/Launchers/LaunchTaskDialog.tsx
+++ b/src/components/Launchers/LaunchTaskDialog.tsx
@@ -8,7 +8,7 @@ import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
 
 import { formatErrorWithHint } from "../../lib/errorMessages";
 import { useAppStore } from "../../store/appStore";
-import { Checkbox } from "../ui/checkbox";
+import { ToggleRow } from "../Settings/shared";
 import {
   Dialog,
   DialogClose,
@@ -279,18 +279,12 @@ export default function LaunchTaskDialog({
         )}
 
         {/* Worktree toggle */}
-        <div>
-          <label className="flex cursor-pointer items-center gap-2 text-sm text-dim-foreground">
-            <Checkbox
-              checked={createWorktree}
-              onCheckedChange={(checked) => setCreateWorktree(checked === true)}
-            />
-            Create worktree
-          </label>
-          <p className="mt-1 ml-6 text-xs text-muted-foreground">
-            Isolates work in a separate git worktree with its own branch
-          </p>
-        </div>
+        <ToggleRow
+          label="Create worktree"
+          description="Isolates work in a separate git worktree with its own branch"
+          checked={createWorktree}
+          onChange={setCreateWorktree}
+        />
 
         {/* Base branch (only when worktree enabled) */}
         {createWorktree && (

From 7228b3ab99591b847723549e66e2ac673006370d Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Sat, 28 Mar 2026 13:55:24 +0100
Subject: [PATCH 15/16] refactor: extract reusable SidePanel component and
 adopt across views

Introduce SidePanel with Header, Content, Footer sub-components and
built-in resize support. Migrate GitHub detail panels, HelpView,
FileList, RulesTab, and TaskDetailView to use it, removing the
now-redundant DetailPanelResizeHandle and repeated glass/border boilerplate.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/GitHub/CommitDetailPanel.tsx   |  26 +-
 .../GitHub/DetailPanelResizeHandle.tsx        |  68 -----
 src/components/GitHub/IssueDetailPanel.tsx    |  31 ++-
 .../GitHub/PullRequestDetailPanel.tsx         |  30 +--
 src/components/Help/HelpView.tsx              |  24 +-
 src/components/Review/FileList.tsx            |  18 +-
 src/components/SkillsRules/RulesTab.tsx       |   5 +-
 src/components/TaskDetail/TaskDetailView.tsx  |   9 +-
 src/components/ui/SidePanel.tsx               | 250 ++++++++++++++++++
 9 files changed, 317 insertions(+), 144 deletions(-)
 delete mode 100644 src/components/GitHub/DetailPanelResizeHandle.tsx
 create mode 100644 src/components/ui/SidePanel.tsx

diff --git a/src/components/GitHub/CommitDetailPanel.tsx b/src/components/GitHub/CommitDetailPanel.tsx
index e880176..5f0ea4c 100644
--- a/src/components/GitHub/CommitDetailPanel.tsx
+++ b/src/components/GitHub/CommitDetailPanel.tsx
@@ -9,12 +9,10 @@ import {
   FileSymlink,
   Loader2,
 } from "lucide-react";
-import { useTheme } from "../../contexts/ThemeContext";
 import type { CommitDetail } from "../../types";
 import { RAIL_COLORS } from "../../lib/graphLayout";
 import type { GraphNode } from "../../lib/graphLayout";
-import { glassStyles } from "../ui/orecus.io/lib/color-utils";
-import DetailPanelResizeHandle from "./DetailPanelResizeHandle";
+import SidePanel from "../ui/SidePanel";
 
 interface CommitDetailPanelProps {
   detail: CommitDetail | null;
@@ -88,7 +86,6 @@ export default function CommitDetailPanel({
   onResize,
   onClose,
 }: CommitDetailPanelProps) {
-  const { isGlass } = useTheme();
   const [copied, setCopied] = useState(false);
 
   const copyHash = useCallback(() => {
@@ -102,13 +99,16 @@ export default function CommitDetailPanel({
   const railColor = node?.railColor ?? RAIL_COLORS[0];
 
   return (
-    <div
-      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden max-w-[40%] ${glassStyles[isGlass ? "normal" : "solid"]}`}
-      style={{ width: panelWidth }}
+    <SidePanel
+      side="right"
+      width="wide"
+      resizable
+      resizeWidth={panelWidth}
+      onResize={onResize}
+      maxWidthClass="max-w-[40%]"
     >
-      <DetailPanelResizeHandle onResize={onResize} />
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+      <SidePanel.Header className="justify-between">
         <span className="text-xs font-medium text-foreground">
           Commit Detail
         </span>
@@ -120,7 +120,7 @@ export default function CommitDetailPanel({
         >
           <X size={14} />
         </button>
-      </div>
+      </SidePanel.Header>
 
       {loading && !detail && (
         <div className="flex-1 flex items-center justify-center">
@@ -129,7 +129,7 @@ export default function CommitDetailPanel({
       )}
 
       {detail && (
-        <div className="flex-1 overflow-y-auto px-3 py-2 space-y-3">
+        <SidePanel.Content className="px-3 py-2 space-y-3">
           {/* Hash + dot */}
           <div className="flex items-center gap-2">
             <span
@@ -229,8 +229,8 @@ export default function CommitDetailPanel({
               )}
             </div>
           )}
-        </div>
+        </SidePanel.Content>
       )}
-    </div>
+    </SidePanel>
   );
 }
diff --git a/src/components/GitHub/DetailPanelResizeHandle.tsx b/src/components/GitHub/DetailPanelResizeHandle.tsx
deleted file mode 100644
index ec4c54c..0000000
--- a/src/components/GitHub/DetailPanelResizeHandle.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useCallback, useRef } from "react";
-
-const MIN_WIDTH = 280;
-const MAX_WIDTH = 600;
-
-interface DetailPanelResizeHandleProps {
-  onResize: (width: number) => void;
-}
-
-/**
- * Left-edge resize handle for GitHub detail panels.
- * Follows the same pattern as SidebarResizeHandle / RightSidebarResizeHandle.
- */
-export default function DetailPanelResizeHandle({
-  onResize,
-}: DetailPanelResizeHandleProps) {
-  const dragging = useRef(false);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const onMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      dragging.current = true;
-
-      // Capture the right edge of the panel at drag start
-      const panel = containerRef.current?.parentElement;
-      if (!panel) return;
-      const panelRect = panel.getBoundingClientRect();
-      const rightEdge = panelRect.right;
-
-      const onMouseMove = (ev: MouseEvent) => {
-        if (!dragging.current) return;
-        const newWidth = rightEdge - ev.clientX;
-        const clamped = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, newWidth));
-        onResize(clamped);
-      };
-
-      const onMouseUp = () => {
-        dragging.current = false;
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-      };
-
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
-      document.body.style.cursor = "col-resize";
-      document.body.style.userSelect = "none";
-    },
-    [onResize],
-  );
-
-  return (
-    <div
-      ref={containerRef}
-      onMouseDown={onMouseDown}
-      className="group absolute top-0 -left-[3px] w-1.5 h-full cursor-col-resize z-10"
-    >
-      {/* Grip dots — appear on hover */}
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
-        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
-        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
-        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/GitHub/IssueDetailPanel.tsx b/src/components/GitHub/IssueDetailPanel.tsx
index def0243..d0e1187 100644
--- a/src/components/GitHub/IssueDetailPanel.tsx
+++ b/src/components/GitHub/IssueDetailPanel.tsx
@@ -12,11 +12,9 @@ import {
   Check,
 } from "lucide-react";
 
-import { useTheme } from "../../contexts/ThemeContext";
 import type { GitHubIssueDetail } from "../../types";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
-import { glassStyles } from "../ui/orecus.io/lib/color-utils";
-import DetailPanelResizeHandle from "./DetailPanelResizeHandle";
+import SidePanel from "../ui/SidePanel";
 
 interface IssueDetailPanelProps {
   detail: GitHubIssueDetail | null;
@@ -62,8 +60,6 @@ export default function IssueDetailPanel({
   onClose,
   onImport,
 }: IssueDetailPanelProps) {
-  const { isGlass } = useTheme();
-
   const handleOpenInGitHub = useCallback(() => {
     if (detail?.issue.url) {
       open(detail.issue.url);
@@ -77,13 +73,16 @@ export default function IssueDetailPanel({
   }, [detail, onImport]);
 
   return (
-    <div
-      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden max-w-[40%] ${glassStyles[isGlass ? "normal" : "solid"]}`}
-      style={{ width: panelWidth }}
+    <SidePanel
+      side="right"
+      width="wide"
+      resizable
+      resizeWidth={panelWidth}
+      onResize={onResize}
+      maxWidthClass="max-w-[40%]"
     >
-      <DetailPanelResizeHandle onResize={onResize} />
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+      <SidePanel.Header className="justify-between">
         <span className="text-xs font-medium text-foreground">
           Issue Detail
         </span>
@@ -95,7 +94,7 @@ export default function IssueDetailPanel({
         >
           <X size={14} />
         </button>
-      </div>
+      </SidePanel.Header>
 
       {loading && !detail && (
         <div className="flex-1 flex items-center justify-center">
@@ -104,7 +103,7 @@ export default function IssueDetailPanel({
       )}
 
       {detail && (
-        <div className="flex-1 overflow-y-auto px-3 py-2 space-y-3">
+        <SidePanel.Content className="px-3 py-2 space-y-3">
           {/* State + title + number */}
           <div className="space-y-1">
             <div className="flex items-center gap-1.5">
@@ -247,12 +246,12 @@ export default function IssueDetailPanel({
               </div>
             ))}
           </div>
-        </div>
+        </SidePanel.Content>
       )}
 
       {/* Action buttons */}
       {detail && (
-        <div className="border-t border-border px-3 py-2 space-y-2">
+        <SidePanel.Footer className="space-y-2">
           {/* Import button (if not already imported) */}
           {!detail.already_imported && (
             <Button
@@ -284,8 +283,8 @@ export default function IssueDetailPanel({
           >
             Open in GitHub
           </Button>
-        </div>
+        </SidePanel.Footer>
       )}
-    </div>
+    </SidePanel>
   );
 }
diff --git a/src/components/GitHub/PullRequestDetailPanel.tsx b/src/components/GitHub/PullRequestDetailPanel.tsx
index 1b089fc..dc1e2d3 100644
--- a/src/components/GitHub/PullRequestDetailPanel.tsx
+++ b/src/components/GitHub/PullRequestDetailPanel.tsx
@@ -12,11 +12,9 @@ import {
 } from "lucide-react";
 import { useState, useCallback, useRef, useEffect } from "react";
 
-import { useTheme } from "../../contexts/ThemeContext";
 import type { GitHubPRDetail } from "../../types";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
-import { glassStyles } from "../ui/orecus.io/lib/color-utils";
-import DetailPanelResizeHandle from "./DetailPanelResizeHandle";
+import SidePanel from "../ui/SidePanel";
 
 interface PullRequestDetailPanelProps {
   detail: GitHubPRDetail | null;
@@ -103,7 +101,6 @@ export default function PullRequestDetailPanel({
   onMerge,
   onClosePR,
 }: PullRequestDetailPanelProps) {
-  const { isGlass } = useTheme();
   const [mergeMethod, setMergeMethod] = useState("squash");
   const [showMergeOptions, setShowMergeOptions] = useState(false);
   const [confirmClose, setConfirmClose] = useState(false);
@@ -139,13 +136,16 @@ export default function PullRequestDetailPanel({
   }, [detail]);
 
   return (
-    <div
-      className={`relative shrink-0 flex flex-col border-l border-border overflow-hidden max-w-[40%] ${glassStyles[isGlass ? "normal" : "solid"]}`}
-      style={{ width: panelWidth }}
+    <SidePanel
+      side="right"
+      width="wide"
+      resizable
+      resizeWidth={panelWidth}
+      onResize={onResize}
+      maxWidthClass="max-w-[40%]"
     >
-      <DetailPanelResizeHandle onResize={onResize} />
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+      <SidePanel.Header className="justify-between">
         <span className="text-xs font-medium text-foreground">
           Pull Request Detail
         </span>
@@ -157,7 +157,7 @@ export default function PullRequestDetailPanel({
         >
           <X size={14} />
         </button>
-      </div>
+      </SidePanel.Header>
 
       {loading && !detail && (
         <div className="flex-1 flex items-center justify-center">
@@ -166,7 +166,7 @@ export default function PullRequestDetailPanel({
       )}
 
       {detail && (
-        <div className="flex-1 overflow-y-auto px-3 py-2 space-y-3">
+        <SidePanel.Content className="px-3 py-2 space-y-3">
           {/* Title + number + state */}
           <div className="space-y-1">
             <div className="flex items-center gap-1.5">
@@ -346,12 +346,12 @@ export default function PullRequestDetailPanel({
               )}
             </div>
           )}
-        </div>
+        </SidePanel.Content>
       )}
 
       {/* Action buttons */}
       {detail && detail.state.toUpperCase() === "OPEN" && (
-        <div className="border-t border-border px-3 py-2 space-y-2">
+        <SidePanel.Footer className="space-y-2">
           {/* Merge with method selector */}
           <div className="flex items-center gap-1.5">
             <Button
@@ -429,8 +429,8 @@ export default function PullRequestDetailPanel({
               Open
             </Button>
           </div>
-        </div>
+        </SidePanel.Footer>
       )}
-    </div>
+    </SidePanel>
   );
 }
diff --git a/src/components/Help/HelpView.tsx b/src/components/Help/HelpView.tsx
index 7378261..4919cc1 100644
--- a/src/components/Help/HelpView.tsx
+++ b/src/components/Help/HelpView.tsx
@@ -22,6 +22,8 @@ import {
   streamdownTheme,
 } from "../../lib/markdown";
 import { ViewLayout } from "../Shell/ViewLayout";
+import SidePanel from "../ui/SidePanel";
+import { glassStyles } from "../ui/orecus.io/lib/color-utils";
 
 import type { DocContent, DocEntry } from "../../types";
 import type { LucideIcon } from "lucide-react";
@@ -103,17 +105,13 @@ export default function HelpView() {
 
       <div className="flex flex-1 min-h-0 gap-2">
         {/* Left panel — doc list */}
-        <div
-          className={`w-56 shrink-0 flex flex-col rounded-lg overflow-hidden ring-1 ring-border/40 ${
-            isGlass ? "bg-card/60 backdrop-blur-sm" : "bg-card"
-          }`}
-        >
-          <div className="px-3 py-2 border-b border-border">
+        <SidePanel side="left" width="narrow" className="rounded-lg ring-1 ring-border/40 border-r-0">
+          <SidePanel.Header>
             <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
               Guides
             </span>
-          </div>
-          <div className="flex-1 overflow-y-auto p-1">
+          </SidePanel.Header>
+          <SidePanel.Content className="p-1">
             {loading ? (
               <div className="flex items-center justify-center py-8">
                 <Loader2
@@ -154,15 +152,11 @@ export default function HelpView() {
                 </button>
               ))
             )}
-          </div>
-        </div>
+          </SidePanel.Content>
+        </SidePanel>
 
         {/* Right panel — markdown reader */}
-        <div
-          className={`flex-1 min-w-0 flex flex-col rounded-lg overflow-hidden ring-1 ring-border/40 ${
-            isGlass ? "bg-card/60 backdrop-blur-sm" : "bg-card"
-          }`}
-        >
+        <div className={`flex-1 min-w-0 flex flex-col rounded-lg overflow-hidden ring-1 ring-border/40 ${glassStyles[isGlass ? "normal" : "solid"]}`}>
           {contentLoading ? (
             <div className="flex-1 flex items-center justify-center">
               <Loader2
diff --git a/src/components/Review/FileList.tsx b/src/components/Review/FileList.tsx
index 053826d..d61f544 100644
--- a/src/components/Review/FileList.tsx
+++ b/src/components/Review/FileList.tsx
@@ -14,10 +14,9 @@ import {
 import { useCallback, useState } from "react";
 import { useProjectAccentColor } from "../../hooks/useProjectAccentColor";
 
-import { useTheme } from "../../contexts/ThemeContext";
 import { Checkbox } from "../ui/checkbox";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
-import { glassStyles } from "../ui/orecus.io/lib/color-utils";
+import SidePanel from "../ui/SidePanel";
 
 import type { ChangedFile } from "../../types";
 import type { FileSection } from "./useDiffData";
@@ -144,7 +143,6 @@ export default function FileList({
   onToggleStage,
   onRefresh,
 }: FileListProps) {
-  const { isGlass } = useTheme();
   const accentColor = useProjectAccentColor();
   const [commitMsg, setCommitMsg] = useState("");
   const [committing, setCommitting] = useState(false);
@@ -199,11 +197,9 @@ export default function FileList({
   const hasChanges = changedFiles.length > 0;
 
   return (
-    <div
-      className={`flex h-full w-[250px] shrink-0 flex-col border-r border-border ${glassStyles[isGlass ? "normal" : "solid"]}`}
-    >
+    <SidePanel side="left" width={250} className="h-full">
       {/* Scrollable file sections */}
-      <div className="flex-1 overflow-y-auto">
+      <SidePanel.Content>
         {/* Committed section */}
         {hasCommitted && (
           <>
@@ -294,10 +290,10 @@ export default function FileList({
             )}
           </div>
         )}
-      </div>
+      </SidePanel.Content>
 
       {/* Commit bar */}
-      <div className="border-t border-border p-2">
+      <SidePanel.Footer>
         <div className="flex gap-1.5">
           <input
             type="text"
@@ -338,7 +334,7 @@ export default function FileList({
         {commitError && (
           <p className="mt-1 text-2xs text-destructive">{commitError}</p>
         )}
-      </div>
-    </div>
+      </SidePanel.Footer>
+    </SidePanel>
   );
 }
diff --git a/src/components/SkillsRules/RulesTab.tsx b/src/components/SkillsRules/RulesTab.tsx
index e63b3c9..66d7e7f 100644
--- a/src/components/SkillsRules/RulesTab.tsx
+++ b/src/components/SkillsRules/RulesTab.tsx
@@ -6,6 +6,7 @@ import { useAppStore } from "../../store/appStore";
 import type { AgentRuleGroup, RuleFileInfo } from "../../types";
 import { Skeleton } from "../ui/skeleton";
 import { glassStyles } from "../ui/orecus.io/lib/color-utils";
+import SidePanel from "../ui/SidePanel";
 import CreateRuleDialog from "./CreateRuleDialog";
 import RuleEditor from "./RuleEditor";
 import RulesTreePanel from "./RulesTreePanel";
@@ -137,14 +138,14 @@ export default function RulesTab({ projectId }: Props) {
         className={`flex-1 min-h-0 overflow-hidden rounded-lg ring-1 ring-border/40 flex ${glassStyles[isGlass ? "normal" : "solid"]}`}
       >
         {/* Left: Tree panel */}
-        <div className="w-56 shrink-0 border-r border-border/40 overflow-hidden flex flex-col">
+        <SidePanel side="left" width="narrow" className="bg-transparent backdrop-blur-none">
           <RulesTreePanel
             groups={filteredGroups}
             selectedPath={selectedRelPath}
             onSelect={handleSelect}
             onCreateClick={handleCreateClick}
           />
-        </div>
+        </SidePanel>
 
         {/* Right: Editor panel */}
         <div className="flex-1 min-w-0 flex flex-col">
diff --git a/src/components/TaskDetail/TaskDetailView.tsx b/src/components/TaskDetail/TaskDetailView.tsx
index 0824ea0..1874d5c 100644
--- a/src/components/TaskDetail/TaskDetailView.tsx
+++ b/src/components/TaskDetail/TaskDetailView.tsx
@@ -22,6 +22,7 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/orecus.io/components/enhanced-button";
 import { glassStyles } from "../ui/orecus.io/lib/color-utils";
 import { Tabs } from "../ui/orecus.io/navigation/tabs";
+import SidePanel from "../ui/SidePanel";
 import AgentActivityTab from "./AgentActivityTab";
 import EpicChildTasks from "./EpicChildTasks";
 import EpicProgressBar from "./EpicProgressBar";
@@ -382,8 +383,8 @@ export default function TaskDetailView() {
         </div>
 
         {/* Right — Metadata sidebar */}
-        <div className="w-[260px] shrink-0 overflow-y-auto border-l border-border/40">
-          <div className="px-3 py-1">
+        <SidePanel side="right" width="medium">
+          <SidePanel.Content className="px-3 py-1">
             <TaskMetadataSidebar
               data={formData}
               onChange={setFormData}
@@ -396,8 +397,8 @@ export default function TaskDetailView() {
               onCreateGitHubIssue={ghAuthOk && hasRemote ? handleCreateGitHubIssue : undefined}
               creatingIssue={creatingIssue}
             />
-          </div>
-        </div>
+          </SidePanel.Content>
+        </SidePanel>
       </div>
 
       {/* Sync to GitHub confirmation dialog */}
diff --git a/src/components/ui/SidePanel.tsx b/src/components/ui/SidePanel.tsx
new file mode 100644
index 0000000..50b5076
--- /dev/null
+++ b/src/components/ui/SidePanel.tsx
@@ -0,0 +1,250 @@
+import { useCallback, useRef } from "react";
+
+import { useTheme } from "../../contexts/ThemeContext";
+import { cn } from "../../lib/utils";
+import { glassStyles } from "./orecus.io/lib/color-utils";
+
+// ============================================================================
+// Width tokens — semantic tiers for side panels
+// ============================================================================
+
+/** Narrow (224px) — navigation/tree panels */
+const WIDTH_NARROW = 224;
+/** Medium (260px) — metadata panels */
+const WIDTH_MEDIUM = 260;
+/** Wide (350px) — detail panels, resizable range 280–600 */
+const WIDTH_WIDE = 350;
+
+export const sidePanelWidths = {
+  narrow: WIDTH_NARROW,
+  medium: WIDTH_MEDIUM,
+  wide: WIDTH_WIDE,
+} as const;
+
+export type SidePanelWidth = keyof typeof sidePanelWidths;
+
+// ============================================================================
+// Resize handle (generalized from DetailPanelResizeHandle)
+// ============================================================================
+
+const RESIZE_MIN = 280;
+const RESIZE_MAX = 600;
+
+interface ResizeHandleProps {
+  side: "left" | "right";
+  onResize: (width: number) => void;
+  minWidth?: number;
+  maxWidth?: number;
+}
+
+function ResizeHandle({
+  side,
+  onResize,
+  minWidth = RESIZE_MIN,
+  maxWidth = RESIZE_MAX,
+}: ResizeHandleProps) {
+  const dragging = useRef(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+
+      const panel = containerRef.current?.parentElement;
+      if (!panel) return;
+      const panelRect = panel.getBoundingClientRect();
+
+      // For a right-side panel, we resize from the left edge (drag left = wider)
+      // For a left-side panel, we resize from the right edge (drag right = wider)
+      const fixedEdge =
+        side === "right" ? panelRect.right : panelRect.left;
+
+      const onMouseMove = (ev: MouseEvent) => {
+        if (!dragging.current) return;
+        const newWidth =
+          side === "right"
+            ? fixedEdge - ev.clientX
+            : ev.clientX - fixedEdge;
+        const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));
+        onResize(clamped);
+      };
+
+      const onMouseUp = () => {
+        dragging.current = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [onResize, side, minWidth, maxWidth],
+  );
+
+  const positionClasses =
+    side === "right"
+      ? "left-0 -translate-x-1/2"
+      : "right-0 translate-x-1/2";
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseDown={onMouseDown}
+      className={cn(
+        "group absolute top-0 w-1.5 h-full cursor-col-resize z-10",
+        positionClasses,
+      )}
+    >
+      {/* Grip dots — appear on hover */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+        <div className="w-0.5 h-0.5 rounded-full bg-muted-foreground/60" />
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// SidePanel
+// ============================================================================
+
+interface SidePanelProps {
+  /** Which side the panel sits on — controls border direction */
+  side: "left" | "right";
+  /** Width as a token name or pixel number. Default: "medium" */
+  width?: SidePanelWidth | number;
+  /** Enable drag-to-resize. Requires controlled width via onResize. */
+  resizable?: boolean;
+  /** Current width in pixels (for resizable panels) */
+  resizeWidth?: number;
+  /** Resize callback — receives new width in px */
+  onResize?: (width: number) => void;
+  /** Min width when resizable (default 280) */
+  minWidth?: number;
+  /** Max width when resizable (default 600) */
+  maxWidth?: number;
+  /** Max width as CSS class (e.g. "max-w-[40%]") */
+  maxWidthClass?: string;
+  /** Extra classes on the root element */
+  className?: string;
+  children: React.ReactNode;
+}
+
+export default function SidePanel({
+  side,
+  width = "medium",
+  resizable = false,
+  resizeWidth,
+  onResize,
+  minWidth,
+  maxWidth,
+  maxWidthClass,
+  className,
+  children,
+}: SidePanelProps) {
+  const { isGlass } = useTheme();
+
+  const resolvedWidth =
+    typeof width === "number" ? width : sidePanelWidths[width];
+
+  const borderClass = side === "right" ? "border-l" : "border-r";
+
+  return (
+    <div
+      className={cn(
+        "relative shrink-0 flex flex-col overflow-hidden",
+        borderClass,
+        "border-border/40",
+        glassStyles[isGlass ? "normal" : "solid"],
+        maxWidthClass,
+        className,
+      )}
+      style={{ width: resizable && resizeWidth != null ? resizeWidth : resolvedWidth }}
+    >
+      {resizable && onResize && (
+        <ResizeHandle
+          side={side}
+          onResize={onResize}
+          minWidth={minWidth}
+          maxWidth={maxWidth}
+        />
+      )}
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// SidePanel.Header
+// ============================================================================
+
+interface SidePanelHeaderProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function SidePanelHeader({ className, children }: SidePanelHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 px-3 py-2 border-b border-border/40 shrink-0",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// SidePanel.Content
+// ============================================================================
+
+interface SidePanelContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function SidePanelContent({ className, children }: SidePanelContentProps) {
+  return (
+    <div className={cn("flex-1 overflow-y-auto", className)}>
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// SidePanel.Footer
+// ============================================================================
+
+interface SidePanelFooterProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function SidePanelFooter({ className, children }: SidePanelFooterProps) {
+  return (
+    <div
+      className={cn(
+        "border-t border-border/40 px-3 py-2 shrink-0",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// Compound component exports
+// ============================================================================
+
+SidePanel.Header = SidePanelHeader;
+SidePanel.Content = SidePanelContent;
+SidePanel.Footer = SidePanelFooter;

From b935019aa79c743a2506985f4a893780a0649b58 Mon Sep 17 00:00:00 2001
From: Martin Karlsson <me@orecus.io>
Date: Sat, 28 Mar 2026 14:17:32 +0100
Subject: [PATCH 16/16] docs: update changelog and docs for recent v0.9.2
 commits

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md    | 20 ++++++++++++++------
 docs/general.md |  1 +
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9eef9e..5f6f5a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,17 +17,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Task Dependency Indicators** — Task cards show per-dependency met/unmet dots (filled green for met, outlined amber for unmet) and a dependents badge showing how many other tasks depend on this one
 - **Epic Dependency Connectors** — Kanban columns now render small vertical connector arrows between epic children that have dependency relationships, making chains visible directly on the board
 - **Searchable Filter Dropdowns** — Unbounded filter lists (Labels, Agents, Epics) in the Dashboard filter bar now use searchable dropdown popovers instead of inline chips, with count badges on the trigger buttons and active filter pills displayed below the bar
-- **Task Status Color Module** — Centralized `taskStatusColors.ts` exports canonical dot colors, CSS colors, and labels for all task statuses, eliminating duplicate definitions across components
+- **Session History Sidebar** — Session history is now a global tab in the right sidebar (Files | Session History), accessible from any view instead of being buried inside Chat and Sessions
+- **Skeleton Loaders** — Views now show skeleton placeholders that match content layout while loading (commit graph, rules, agent activity, Kanban cards) instead of bare spinners. Archive actions show inline loading spinners with disabled states
+- **Empty States** — Contextual hints, icons, and call-to-action buttons throughout the app when views have no content — Kanban columns, dependency graph, commit graph, file list, review panel, and more
+- **Motion & Accessibility** — Respects the OS "reduce motion" preference. Icon-only buttons now have screen-reader labels, custom buttons show focus-visible outlines, and error/warning banners are announced to assistive technology
 - **Success Toasts** — Green flash notifications (3-second auto-dismiss) for confirming actions like ACP adapter installs and session renames
-- **Editor Detection** — Backend probes PATH for 8 known editors and exposes `detect_editors` / `open_in_editor` IPC commands
-- **Project File Indexing** — New `index_project_files` Rust command recursively indexes project files (skipping hidden dirs, node_modules, target, .git) for fast client-side search
 
 ### Changed
 
 - **Settings Architecture** — Moved all settings from sidebar dialog modals into the new dedicated Settings view. Sidebar gear icon and Ctrl+, both navigate to the settings page. Git & Worktrees settings (branch naming, instruction files) now have their own tab instead of being buried in the Project tab
-- **ToggleRow Component** — Replaced repetitive inline Checkbox + label patterns across settings tabs with a shared `ToggleRow` component using the Switch primitive
 - **ACP Adapter Updates** — Install command now pins to the exact registry version (e.g., `npm install -g @package@0.24.1`), invalidates npm and registry caches after install, and extracts user-friendly error messages from npm stderr instead of dumping raw output
-- **Agent Registry Logging** — Enhanced diagnostic logging throughout the registry (debug for cache hits, info for version checks) with improved error handling for non-semver formats and npm non-zero exit codes
 - **Focus-Within Accessibility** — Action buttons on task cards, chat messages, dependency graph rows, quick action bar, and task body now appear on focus-within (not just hover) for keyboard accessibility
 - **Session Grid Resize Handles** — Column and row resize handles now show centered dot indicators on hover for better discoverability
 - **Session Pane** — Removed reorder arrows (drag-and-drop is the primary method); added brief "Saved" indicator after session rename; wider rename input field
@@ -36,12 +35,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Typography Scale** — Standardized all text sizes across 100+ components to a canonical scale (`text-micro` 8px, `text-2xs` 10px, `text-xs` 12px, `text-sm` 14px, `text-base` 16px), replacing ad-hoc `text-[Npx]` values with new custom Tailwind utilities
 - **Filter Bar Architecture** — Status and Priority filters remain as inline toggle chips; Labels, Agents, and Epics now use collapsible searchable dropdowns for better usability in large projects
 - **DnD Visual Feedback** — Dragged Kanban cards now fully hide (opacity-0) during drag instead of showing a faded ghost, for cleaner drag-and-drop
-- **Priority Badge Styling** — Compact inline priority badges with smaller font and renamed helper (`getPriorityBadgeClass`)
+- **GitHub View Polish** — Resizable detail panels, two-line PR/Issue rows with overflow-safe label capping, retry buttons on error banners, and improved commit graph merge indicator contrast
+- **Responsive Layout** — Toolbars wrap gracefully on narrower windows (1024px+), filter bar sections stay grouped, and detail panels clamp to a sensible max width
+- **ACP Adapter Package** — Claude Code ACP adapter moved from `@zed-industries/claude-agent-acp` to `@agentclientprotocol/claude-agent-acp` — install commands and error hints updated automatically
+- **Launch Dialog Toggles** — "Create worktree" option in Launch Task and Launch Session dialogs now uses a Switch toggle instead of a checkbox
+- **Project Creation** — Improved validation and welcome screen polish
+- **Priority Badge Styling** — Compact inline priority badges with smaller font
 - **Task Card Layout** — Increased padding, improved visual hierarchy, and inline action buttons hidden by default (revealed on hover/focus)
 
 ### Fixed
 
 - **ACP Adapter Install on Windows** — npm install now hides the console window (CREATE_NO_WINDOW flag) to prevent a flash of a terminal window
+- **GITHUB_TOKEN on macOS** — Faber now picks up GITHUB_TOKEN/GH_TOKEN from shell profiles, fixing GitHub auth failures in GUI-launched apps
+- **Stale ACP Working Indicator** — Cancelling and resending a prompt no longer causes the working indicator to disappear prematurely
+- **Task Card Context Menu Position** — Context menu now appears at the cursor instead of the top-left corner of the card
+- **Branch Display Sync** — Sidebar and chat branch indicators now stay in sync when branches change outside the app (e.g., via terminal)
 
 ## [0.9.1] - 2026-03-xx WIP
 
diff --git a/docs/general.md b/docs/general.md
index 07431c6..bdf17b9 100644
--- a/docs/general.md
+++ b/docs/general.md
@@ -204,6 +204,7 @@ Settings are organized into **App** (global) and **Project** (per-project) secti
 - **Color Mode** — Switch between Dark and Light themes
 - **Glass Effect** — Toggle the translucent glass UI style (not available on macOS)
 - **Show Project Icons** — Show or hide project icons in the sidebar
+- **Reduce Motion** — Respects the OS "prefer reduced motion" setting. When enabled, animations and transitions throughout the app are minimized
 - **Notifications** — Master toggle plus per-event toggles (Session Complete, Session Error, Input Needed). Clicking a notification takes you directly to the relevant session.
 - **Updates** — Check for app updates, enable auto-checking, and set the check frequency (hourly to daily). An advanced option lets you point to a custom update endpoint.