diff --git a/src/components/ChatPane.tsx b/src/components/ChatPane.tsx
index 0879a22..2fed0e1 100644
--- a/src/components/ChatPane.tsx
+++ b/src/components/ChatPane.tsx
@@ -3,412 +3,37 @@ import { createPortal } from "react-dom";
 import { invoke } from "@tauri-apps/api/core";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Plus, ArrowUp, ChevronDown, Search, Bug, GitPullRequest, Sliders, FileText, Folder, GitCommit, GitBranch, Bot, Database, Terminal } from "lucide-react";
+import { Plus, ArrowUp, ChevronDown, Search, Bug, GitPullRequest, Sliders } from "lucide-react";
 import { streamChat } from "../lib/chat";
-import { createChatTools, argsPreview, resultSummary } from "../lib/chatTools";
+import { createChatTools } from "../lib/chatTools";
 import type { CommitInfo, GitStatusEntry } from "../lib/chatTools";
 import { getRuntimeState, setRuntimeState } from "../lib/runtimeState";
+import {
+  CDN,
+  CHAT_PROVIDERS,
+  PROVIDER_MODELS,
+  getContextSize,
+  type ChatProvider,
+  type ChatModel,
+} from "../lib/chatModels";
+import { ToolCallCard } from "./ChatPane/ToolCallCard";
+import { ProposalCard } from "./ChatPane/ProposalCard";
+import {
+  loadChatHistory,
+  saveChatHistory,
+  buildProjectContext,
+  buildSystemPrompt,
+} from "../lib/chatHistory";
 import tempestChat from "../assets/tempest-chat.png";
 import "./ChatPane.css";
 
-const CDN = "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@latest/icons/";
+import type {
+  TextPart,
+  MessagePart,
+  ChatMessage,
+} from "../types/chat";
 
-interface ChatProvider {
-  id: string;
-  label: string;
-  icon: string;
-  invert: boolean;
-}
-
-interface ChatModel {
-  id: string;
-  label: string;
-}
-
-const CHAT_PROVIDERS: ChatProvider[] = [
-  { id: "anthropic",  label: "Anthropic",  icon: "anthropic.svg",      invert: true  },
-  { id: "openai",     label: "OpenAI",     icon: "openai.svg",          invert: true  },
-  { id: "gemini",     label: "Gemini",     icon: "gemini-color.svg",    invert: false },
-  { id: "mistral",    label: "Mistral",    icon: "mistral-color.svg",   invert: false },
-  { id: "deepseek",   label: "DeepSeek",   icon: "deepseek-color.svg",  invert: false },
-  { id: "xai",        label: "xAI",        icon: "xai.svg",             invert: true  },
-  { id: "groq",       label: "Groq",       icon: "groq.svg",            invert: true  },
-  { id: "openrouter", label: "OpenRouter", icon: "openrouter.svg",      invert: true  },
-  { id: "ollama",     label: "Ollama",     icon: "ollama.svg",          invert: true  },
-];
-
-const PROVIDER_MODELS: Record<string, ChatModel[]> = {
-  anthropic: [
-    { id: "claude-fable-5",            label: "Claude Fable 5"    },
-    { id: "claude-opus-4-8",           label: "Claude Opus 4.8"   },
-    { id: "claude-opus-4-7",           label: "Claude Opus 4.7"   },
-    { id: "claude-opus-4-6",           label: "Claude Opus 4.6"   },
-    { id: "claude-opus-4-5",           label: "Claude Opus 4.5"   },
-    { id: "claude-sonnet-5",           label: "Claude Sonnet 5"   },
-    { id: "claude-sonnet-4-6",         label: "Claude Sonnet 4.6" },
-    { id: "claude-sonnet-4-5",         label: "Claude Sonnet 4.5" },
-    { id: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5"  },
-  ],
-  openai: [
-    { id: "gpt-5.5",      label: "GPT-5.5"      },
-    { id: "gpt-5.4",      label: "GPT-5.4"      },
-    { id: "gpt-5.4-mini", label: "GPT-5.4 Mini" },
-    { id: "gpt-5.4-nano", label: "GPT-5.4 Nano" },
-    { id: "gpt-5",        label: "GPT-5"        },
-    { id: "gpt-5-mini",   label: "GPT-5 Mini"   },
-    { id: "gpt-4.1",      label: "GPT-4.1"      },
-    { id: "gpt-4.1-mini", label: "GPT-4.1 Mini" },
-    { id: "gpt-4.1-nano", label: "GPT-4.1 Nano" },
-    { id: "gpt-4o",       label: "GPT-4o"       },
-    { id: "gpt-4o-mini",  label: "GPT-4o Mini"  },
-    { id: "o4-mini",      label: "o4 Mini"      },
-    { id: "o3",           label: "o3"           },
-    { id: "o3-mini",      label: "o3 Mini"      },
-  ],
-  gemini: [
-    { id: "gemini-3.5-flash",              label: "Gemini 3.5 Flash"      },
-    { id: "gemini-3.1-pro-preview",        label: "Gemini 3.1 Pro"        },
-    { id: "gemini-3.1-flash-lite-preview", label: "Gemini 3.1 Flash Lite" },
-    { id: "gemini-3-flash-preview",        label: "Gemini 3 Flash"        },
-    { id: "gemini-2.5-pro",               label: "Gemini 2.5 Pro"        },
-    { id: "gemini-2.5-flash",             label: "Gemini 2.5 Flash"      },
-    { id: "gemini-flash-latest",          label: "Gemini Flash"          },
-    { id: "gemini-flash-lite-latest",     label: "Gemini Flash Lite"     },
-  ],
-  mistral: [
-    { id: "mistral-large-latest",  label: "Mistral Large"    },
-    { id: "mistral-large-2512",    label: "Mistral Large 3"  },
-    { id: "mistral-medium-2508",   label: "Mistral Medium"   },
-    { id: "magistral-medium-2509", label: "Magistral Medium" },
-    { id: "magistral-small-2509",  label: "Magistral Small"  },
-    { id: "mistral-small-latest",  label: "Mistral Small"    },
-    { id: "mistral-small-2603",    label: "Mistral Small 4"  },
-    { id: "devstral-2512",         label: "Devstral"         },
-    { id: "ministral-14b-2512",    label: "Ministral 14B"    },
-    { id: "ministral-8b-2512",     label: "Ministral 8B"     },
-    { id: "ministral-3b-2512",     label: "Ministral 3B"     },
-  ],
-  deepseek: [
-    { id: "deepseek-v4-pro",   label: "DeepSeek V4 Pro"   },
-    { id: "deepseek-v4-flash", label: "DeepSeek V4 Flash" },
-    { id: "deepseek-v3",       label: "DeepSeek V3"       },
-    { id: "deepseek-chat",     label: "DeepSeek Chat"     },
-    { id: "deepseek-reasoner", label: "DeepSeek Reasoner" },
-  ],
-  xai: [
-    { id: "grok-4.20-non-reasoning-latest",  label: "Grok 4.20"               },
-    { id: "grok-4.20-reasoning-latest",      label: "Grok 4.20 Reasoning"     },
-    { id: "grok-4-1-fast-non-reasoning",     label: "Grok 4.1 Fast"           },
-    { id: "grok-4-1-fast-reasoning",         label: "Grok 4.1 Fast Reasoning" },
-    { id: "grok-4-fast-non-reasoning",       label: "Grok 4 Fast"             },
-    { id: "grok-4-fast-reasoning",           label: "Grok 4 Fast Reasoning"   },
-    { id: "grok-4",                          label: "Grok 4"                  },
-    { id: "grok-code-fast-1",               label: "Grok Code Fast"          },
-    { id: "grok-3",                          label: "Grok 3"                  },
-    { id: "grok-3-mini",                     label: "Grok 3 Mini"             },
-  ],
-  groq: [
-    { id: "openai/gpt-oss-120b",              label: "GPT-OSS 120B"  },
-    { id: "openai/gpt-oss-20b",               label: "GPT-OSS 20B"   },
-    { id: "qwen/qwen3-32b",                   label: "Qwen 3 32B"    },
-    { id: "qwen/qwen3.6-27b",                 label: "Qwen 3.6 27B"  },
-    { id: "moonshotai/kimi-k2-instruct-0905", label: "Kimi K2"       },
-    { id: "llama-3.3-70b-versatile",          label: "Llama 3.3 70B" },
-    { id: "llama-3.1-8b-instant",             label: "Llama 3.1 8B"  },
-  ],
-  openrouter: [
-    { id: "openrouter/auto",                   label: "Auto"                   },
-    { id: "deepseek/deepseek-v3.2",            label: "DeepSeek V3.2"          },
-    { id: "deepseek/deepseek-v3.2-thinking",   label: "DeepSeek V3.2 Thinking" },
-    { id: "deepseek/deepseek-v3.1-terminus",   label: "DeepSeek V3.1 Terminus" },
-    { id: "google/gemini-3.1-pro-preview",     label: "Gemini 3.1 Pro"         },
-    { id: "google/gemini-3-flash",             label: "Gemini 3 Flash"         },
-    { id: "google/gemini-2.5-pro",             label: "Gemini 2.5 Pro"         },
-    { id: "moonshotai/kimi-k2.5",              label: "Kimi K2.5"              },
-    { id: "moonshotai/kimi-k2-thinking-turbo", label: "Kimi K2 Thinking Turbo" },
-    { id: "minimax/minimax-m2.5",              label: "MiniMax M2.5"           },
-    { id: "alibaba/qwen3-coder-plus",          label: "Qwen 3 Coder Plus"      },
-    { id: "alibaba/qwen3-max",                 label: "Qwen 3 Max"             },
-    { id: "meta-llama/llama-3.3-70b-instruct", label: "Llama 3.3 70B"          },
-    { id: "mistral/mistral-large-latest",      label: "Mistral Large"          },
-  ],
-  ollama: [
-    { id: "llama3.3",      label: "Llama 3.3 70B"  },
-    { id: "llama3.2",      label: "Llama 3.2"      },
-    { id: "llama3.1",      label: "Llama 3.1"      },
-    { id: "qwen3",         label: "Qwen 3"         },
-    { id: "qwen2.5-coder", label: "Qwen 2.5 Coder" },
-    { id: "deepseek-r1",   label: "DeepSeek R1"    },
-    { id: "deepseek-v3",   label: "DeepSeek V3"    },
-    { id: "codellama",     label: "Code Llama"     },
-    { id: "mistral",       label: "Mistral 7B"     },
-    { id: "neural-chat",   label: "Neural Chat"    },
-  ],
-};
-
-const MODEL_CONTEXT: Record<string, number> = {
-  "claude-fable-5":              2_000_000,
-  "claude-opus-4-8":               200_000,
-  "claude-opus-4-7":               200_000,
-  "claude-opus-4-6":               200_000,
-  "claude-opus-4-5":               200_000,
-  "claude-sonnet-5":               200_000,
-  "claude-sonnet-4-6":             200_000,
-  "claude-sonnet-4-5":             200_000,
-  "claude-haiku-4-5-20251001":     200_000,
-  "gpt-4.1":                     1_047_576,
-  "gpt-4.1-mini":                1_047_576,
-  "gpt-4.1-nano":                1_047_576,
-  "gpt-4o":                        128_000,
-  "gpt-4o-mini":                   128_000,
-  "o3":                            200_000,
-  "o3-mini":                       200_000,
-  "o4-mini":                       200_000,
-  "gemini-2.5-pro":              1_048_576,
-  "gemini-2.5-flash":            1_048_576,
-  "gemini-flash-latest":         1_048_576,
-  "gemini-flash-lite-latest":    1_048_576,
-  "mistral-large-latest":          131_072,
-  "mistral-large-2512":            131_072,
-  "mistral-medium-2508":           131_072,
-  "magistral-medium-2509":         131_072,
-  "magistral-small-2509":          131_072,
-  "mistral-small-latest":          131_072,
-  "mistral-small-2603":            131_072,
-  "deepseek-v3":                   163_840,
-  "deepseek-chat":                 163_840,
-  "deepseek-reasoner":             163_840,
-  "grok-4":                        256_000,
-  "grok-3":                        131_072,
-  "grok-3-mini":                   131_072,
-};
-const DEFAULT_CONTEXT = 128_000;
-function getContextSize(modelId: string): number {
-  return MODEL_CONTEXT[modelId] ?? DEFAULT_CONTEXT;
-}
-
-// ── Message model ─────────────────────────────────────────────────────────────
-
-type TextPart = { type: "text"; content: string };
-
-type ToolCallPart = {
-  type: "tool-call";
-  id: string;
-  toolName: string;
-  args: unknown;
-  result?: unknown;
-  status: "running" | "complete";
-};
-
-type ProposalPart = {
-  type: "proposal";
-  id: string;
-  agent: string;
-  model?: string;
-  task: string;
-  reason: string;
-  launched: boolean;
-  dismissed: boolean;
-};
-
-type MessagePart = TextPart | ToolCallPart | ProposalPart;
-
-interface ChatMessage {
-  id: string;
-  role: "user" | "assistant";
-  parts: MessagePart[];
-}
-
-// Persisted history format — stores full parts array (tool calls, proposals, text)
-interface PersistedMessage {
-  id: string;
-  role: "user" | "assistant";
-  content?: string;       // legacy — plain text (kept for backward compat with old saves)
-  parts?: MessagePart[];  // full parts array
-}
-
-const MAX_CHAT_HISTORY = 100;
-
-function loadChatHistory(projectPath?: string): ChatMessage[] {
-  if (!projectPath) return [];
-  const persisted = (getRuntimeState().chatHistory[projectPath] ?? []) as PersistedMessage[];
-  return persisted.map(m => ({
-    id: m.id,
-    role: m.role,
-    parts: m.parts ?? [{ type: "text" as const, content: m.content ?? "" }],
-  }));
-}
-
-function saveChatHistory(projectPath: string | undefined, msgs: ChatMessage[]): void {
-  if (!projectPath) return;
-  const persisted: PersistedMessage[] = msgs.slice(-MAX_CHAT_HISTORY).map(m => ({
-    id: m.id,
-    role: m.role,
-    parts: m.parts,
-  }));
-  const st = getRuntimeState();
-  setRuntimeState({ chatHistory: { ...st.chatHistory, [projectPath]: persisted } });
-}
-
-// ── System prompt ─────────────────────────────────────────────────────────────
-
-const BASE_SYSTEM =
-  "You are Tempest, an AI engineering companion embedded in the developer's IDE. " +
-  "You help the engineer understand systems, research solutions, plan work, review code, and debug. " +
-  "Be precise, technical, and concise. When the engineer's question relates to their project, ground " +
-  "your answer in the project context provided below rather than guessing. " +
-  "You have tools to read files, list directories, check git status and history, search the codebase, " +
-  "and propose agent tasks for complex multi-step work.";
-
-function buildProjectContext(
-  path: string,
-  branch: string,
-  commits: CommitInfo[],
-  status: GitStatusEntry[],
-  remoteUrl: string,
-): string {
-  const lines: string[] = [];
-  lines.push(`Repository path: ${path}`);
-  if (remoteUrl) lines.push(`Remote (origin): ${remoteUrl}`);
-  if (branch) lines.push(`Current branch: ${branch}`);
-  if (commits.length > 0) {
-    lines.push("Recent commits:");
-    for (const c of commits) {
-      lines.push(`  - ${c.hash} ${c.subject} (${c.author}, ${c.relative_date})`);
-    }
-  }
-  if (status.length > 0) {
-    lines.push("Modified / untracked files:");
-    for (const s of status.slice(0, 30)) {
-      lines.push(`  - [${s.status}] ${s.path}`);
-    }
-    if (status.length > 30) lines.push(`  …and ${status.length - 30} more`);
-  } else {
-    lines.push("Working tree: clean");
-  }
-  return lines.join("\n");
-}
-
-function buildSystemPrompt(custom: string, projectContext: string): string {
-  const parts = [BASE_SYSTEM];
-  if (projectContext) parts.push("## Project context\n" + projectContext);
-  if (custom.trim()) parts.push("## Additional instructions\n" + custom.trim());
-  return parts.join("\n\n");
-}
-
-// ── Sub-components ────────────────────────────────────────────────────────────
-
-type LucideIcon = React.ComponentType<{ size?: number; className?: string }>;
-
-const TOOL_ICON_MAP: Record<string, LucideIcon> = {
-  read_file:          FileText,
-  list_files:         Folder,
-  run_git_log:        GitCommit,
-  run_git_status:     GitBranch,
-  propose_agent_task: Bot,
-};
-
-const TOOL_LABEL_MAP: Record<string, string> = {
-  read_file:          "Read file",
-  list_files:         "List files",
-  run_git_log:        "Git log",
-  run_git_status:     "Git status",
-  propose_agent_task: "Propose agent",
-};
-
-function getToolIcon(toolName: string): LucideIcon {
-  if (toolName.startsWith("atlas_")) return Database;
-  return TOOL_ICON_MAP[toolName] ?? Terminal;
-}
-
-function getToolLabel(toolName: string): string {
-  if (toolName.startsWith("atlas_")) return toolName.slice(6).replace(/_/g, " ");
-  return TOOL_LABEL_MAP[toolName] ?? toolName.replace(/_/g, " ");
-}
-
-function ToolCallCard({ part }: { part: ToolCallPart }) {
-  const [expanded, setExpanded] = useState(false);
-  const preview = argsPreview(part.toolName, part.args);
-  const Icon = getToolIcon(part.toolName);
-  const label = getToolLabel(part.toolName);
-  const canExpand = part.status === "complete" && part.result != null;
-  const dotState = part.status === "running" ? "running" : "complete";
-
-  return (
-    <div className="chat-step">
-      <button
-        className={`chat-step-trigger${canExpand ? " chat-step-trigger--clickable" : ""}`}
-        onClick={() => canExpand && setExpanded(e => !e)}
-        disabled={!canExpand}
-      >
-        <span className={`chat-step-dot chat-step-dot--${dotState}`} />
-        <span className="chat-step-icon">
-          <Icon size={13} />
-        </span>
-        <span className="chat-step-name">{label}</span>
-        {preview && <span className="chat-step-summary">{preview}</span>}
-        {canExpand && (
-          <ChevronDown
-            size={11}
-            className={`chat-step-chevron${expanded ? " chat-step-chevron--open" : ""}`}
-          />
-        )}
-      </button>
-      <div className={`chat-step-detail${expanded ? " chat-step-detail--open" : ""}`}>
-        <div className="chat-step-detail-overflow">
-          <div className="chat-step-detail-inner">
-            <pre>{resultSummary(part.result)}</pre>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ProposalCard({
-  part,
-  onLaunch,
-  onDismiss,
-}: {
-  part: ProposalPart;
-  onLaunch: () => void;
-  onDismiss: () => void;
-}) {
-  if (part.dismissed) return null;
-
-  return (
-    <div className={`chat-proposal-card${part.launched ? " chat-proposal-card--launched" : ""}`}>
-      <div className="chat-proposal-header">Agent proposal</div>
-      <div className="chat-proposal-field">
-        <span className="chat-proposal-label">Agent</span>
-        <span className="chat-proposal-value">
-          {part.agent}{part.model ? <span className="chat-proposal-model"> · {part.model}</span> : null}
-        </span>
-      </div>
-      <div className="chat-proposal-field">
-        <span className="chat-proposal-label">Task</span>
-        <span className="chat-proposal-value">{part.task}</span>
-      </div>
-      <div className="chat-proposal-reason">{part.reason}</div>
-      <div className="chat-proposal-actions">
-        <button
-          className="chat-proposal-btn chat-proposal-btn--launch"
-          onClick={onLaunch}
-          disabled={part.launched}
-        >
-          {part.launched ? "Launched" : "Launch agent"}
-        </button>
-        {!part.launched && (
-          <button className="chat-proposal-btn chat-proposal-btn--dismiss" onClick={onDismiss}>
-            Dismiss
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
 
-// ── Props ─────────────────────────────────────────────────────────────────────
 
 interface Props {
   sessionId: string;
@@ -418,7 +43,7 @@ interface Props {
   onLaunchAgent?: (agentHint: string, prompt: string, model?: string) => void;
 }
 
-// ── Component ─────────────────────────────────────────────────────────────────
+// ── Component ─────────────────────────────────────────────────────────────────
 
 export function ChatPane({ hidden, projectPath, atlasIndexed, onLaunchAgent }: Props) {
   const [messages, setMessages] = useState<ChatMessage[]>(() => loadChatHistory(projectPath));
@@ -913,7 +538,7 @@ export function ChatPane({ hidden, projectPath, atlasIndexed, onLaunchAgent }: P
   const inputBox = (
     <div className="chat-input-wrap">
     <div ref={chatBoxRef} className="chat-box" onClick={focusInput}>
-      {isEmpty && <div className="chat-box-ph">Ask anything…</div>}
+      {isEmpty && <div className="chat-box-ph">Ask anything…</div>}
       <div
         ref={editableRef}
         className="chat-box-edit"
@@ -1035,7 +660,7 @@ export function ChatPane({ hidden, projectPath, atlasIndexed, onLaunchAgent }: P
                       <span>{msg.parts.filter((p): p is TextPart => p.type === "text").map(p => p.content).join("")}</span>
                     ) : isStreaming && msg.parts.length === 0 ? (
                       <div className="chat-thinking-text">
-                        <span className="chat-thinking-shimmer">Thinking…</span>
+                        <span className="chat-thinking-shimmer">Thinking…</span>
                       </div>
                     ) : (
                       msg.parts.map((part, i) => {
@@ -1126,7 +751,7 @@ export function ChatPane({ hidden, projectPath, atlasIndexed, onLaunchAgent }: P
                   <input
                     ref={searchRef}
                     className="chat-picker-search-inp"
-                    placeholder="Search models…"
+                    placeholder="Search models…"
                     value={search}
                     onChange={(e) => setSearch(e.target.value)}
                   />
@@ -1173,7 +798,7 @@ export function ChatPane({ hidden, projectPath, atlasIndexed, onLaunchAgent }: P
             <div className="chat-settings-title">System prompt</div>
             <textarea
               className="chat-settings-textarea"
-              placeholder="Add instructions the assistant should always follow in this conversation…"
+              placeholder="Add instructions the assistant should always follow in this conversation…"
               value={systemPrompt}
               onChange={(e) => updateSystemPrompt(e.target.value)}
               spellCheck={false}
@@ -1182,7 +807,7 @@ export function ChatPane({ hidden, projectPath, atlasIndexed, onLaunchAgent }: P
               Project context (auto-injected)
             </div>
             <pre className="chat-settings-context">
-              {projectContext || "No project context — this chat is not attached to a repository."}
+              {projectContext || "No project context — this chat is not attached to a repository."}
             </pre>
           </div>
         </>,
@@ -1213,7 +838,7 @@ export function ChatPane({ hidden, projectPath, atlasIndexed, onLaunchAgent }: P
               <input
                 ref={atSearchRef}
                 className="chat-picker-search-inp"
-                placeholder="Search files…"
+                placeholder="Search files…"
                 value={atSearch}
                 onChange={(e) => { setAtSearch(e.target.value); setAtIdx(0); }}
                 onKeyDown={(e) => {
diff --git a/src/components/ChatPane/ProposalCard.tsx b/src/components/ChatPane/ProposalCard.tsx
new file mode 100644
index 0000000..af4c641
--- /dev/null
+++ b/src/components/ChatPane/ProposalCard.tsx
@@ -0,0 +1,44 @@
+import type { ProposalPart } from "../../types/chat";
+
+export function ProposalCard({
+  part,
+  onLaunch,
+  onDismiss,
+}: {
+  part: ProposalPart;
+  onLaunch: () => void;
+  onDismiss: () => void;
+}) {
+  if (part.dismissed) return null;
+
+  return (
+    <div className={`chat-proposal-card${part.launched ? " chat-proposal-card--launched" : ""}`}>
+      <div className="chat-proposal-header">Agent proposal</div>
+      <div className="chat-proposal-field">
+        <span className="chat-proposal-label">Agent</span>
+        <span className="chat-proposal-value">
+          {part.agent}{part.model ? <span className="chat-proposal-model"> · {part.model}</span> : null}
+        </span>
+      </div>
+      <div className="chat-proposal-field">
+        <span className="chat-proposal-label">Task</span>
+        <span className="chat-proposal-value">{part.task}</span>
+      </div>
+      <div className="chat-proposal-reason">{part.reason}</div>
+      <div className="chat-proposal-actions">
+        <button
+          className="chat-proposal-btn chat-proposal-btn--launch"
+          onClick={onLaunch}
+          disabled={part.launched}
+        >
+          {part.launched ? "Launched" : "Launch agent"}
+        </button>
+        {!part.launched && (
+          <button className="chat-proposal-btn chat-proposal-btn--dismiss" onClick={onDismiss}>
+            Dismiss
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ChatPane/ToolCallCard.tsx b/src/components/ChatPane/ToolCallCard.tsx
new file mode 100644
index 0000000..880f32c
--- /dev/null
+++ b/src/components/ChatPane/ToolCallCard.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { argsPreview, resultSummary } from "../../lib/chatTools";
+import { getToolIcon, getToolLabel } from "../../lib/chatModels";
+import type { ToolCallPart } from "../../types/chat";
+
+export function ToolCallCard({ part }: { part: ToolCallPart }) {
+  const [expanded, setExpanded] = useState(false);
+  const preview = argsPreview(part.toolName, part.args);
+  const Icon = getToolIcon(part.toolName);
+  const label = getToolLabel(part.toolName);
+  const canExpand = part.status === "complete" && part.result != null;
+  const dotState = part.status === "running" ? "running" : "complete";
+
+  return (
+    <div className="chat-step">
+      <button
+        className={`chat-step-trigger${canExpand ? " chat-step-trigger--clickable" : ""}`}
+        onClick={() => canExpand && setExpanded(e => !e)}
+        disabled={!canExpand}
+      >
+        <span className={`chat-step-dot chat-step-dot--${dotState}`} />
+        <span className="chat-step-icon">
+          <Icon size={13} />
+        </span>
+        <span className="chat-step-name">{label}</span>
+        {preview && <span className="chat-step-summary">{preview}</span>}
+        {canExpand && (
+          <ChevronDown
+            size={11}
+            className={`chat-step-chevron${expanded ? " chat-step-chevron--open" : ""}`}
+          />
+        )}
+      </button>
+      <div className={`chat-step-detail${expanded ? " chat-step-detail--open" : ""}`}>
+        <div className="chat-step-detail-overflow">
+          <div className="chat-step-detail-inner">
+            <pre>{resultSummary(part.result)}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/DiffPane.tsx b/src/components/DiffPane.tsx
index d64b432..bb66e3b 100644
--- a/src/components/DiffPane.tsx
+++ b/src/components/DiffPane.tsx
@@ -2,24 +2,25 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import {
-  RefreshCw, GitBranch, GitPullRequest, Loader, Check,
-  Plus, X, AlertTriangle, ChevronDown, Trash2,
-  RotateCcw, Send, MessageSquare,
+  RefreshCw, GitBranch, Loader,
+  Plus, X, ChevronDown,
 } from "lucide-react";
 import { Tooltip } from "./Tooltip";
-import { useAttribution, setAttribution, COAUTHOR_LINE } from "../store/attribution";
+import { useAttribution, COAUTHOR_LINE } from "../store/attribution";
 import { useComments, addComment, removeComment, clearComments, composeMessage } from "../store/reviewComments";
 import { enqueue } from "../store/messageQueue";
+import { DiscardFileDialog } from "./DiffPane/DiscardFileDialog";
+import { DeleteBranchDialog } from "./DiffPane/DeleteBranchDialog";
+import { CommitBox } from "./DiffPane/CommitBox";
+import { BranchMenu } from "./DiffPane/BranchMenu";
+import { PushControls } from "./DiffPane/PushControls";
+import { CommentBar } from "./DiffPane/CommentBar";
 import "./DiffPane.css";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
-interface DiffLine {
-  kind: "hunk" | "context" | "added" | "removed";
-  line_old: number | null;
-  line_new: number | null;
-  content: string;
-}
+import type { BranchInfo, DiffLine, FileStats } from "../types/git";
+import { buildPrUrl, statusClass, groupHunks } from "../lib/git";
 
 interface FileEntry {
   xy: string;
@@ -27,12 +28,6 @@ interface FileEntry {
   status: string;
 }
 
-interface FileStats {
-  path: string;
-  adds: number;
-  dels: number;
-}
-
 interface FileDiff {
   status: string;
   path: string;
@@ -43,62 +38,6 @@ interface FileDiff {
 
 type FileSection = "staged" | "unstaged";
 
-interface BranchInfo {
-  name: string;
-  is_current: boolean;
-  is_remote: boolean;
-  is_worktree: boolean;
-  worktree_path?: string;
-}
-
-interface Hunk {
-  header: DiffLine;
-  lines: DiffLine[];
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function buildPrUrl(remoteUrl: string, branch: string): string {
-  const normalized = remoteUrl.trim().replace(/\.git$/, "");
-  let host = "", path = "";
-  const ssh = normalized.match(/^git@([^:]+):(.+)$/);
-  if (ssh) { host = ssh[1]; path = ssh[2]; }
-  else {
-    try { const u = new URL(normalized); host = u.host; path = u.pathname.replace(/^\//, ""); }
-    catch { return normalized; }
-  }
-  const eb = encodeURIComponent(branch);
-  if (host === "github.com") return `https://github.com/${path}/compare/${eb}?expand=1`;
-  if (host === "gitlab.com" || host.includes("gitlab"))
-    return `https://gitlab.com/${path}/-/merge_requests/new?merge_request[source_branch]=${eb}`;
-  if (host === "bitbucket.org")
-    return `https://bitbucket.org/${path}/pull-requests/new?source=${eb}`;
-  return `https://${host}/${path}`;
-}
-
-function statusClass(s: string) {
-  if (s === "M") return "status-m";
-  if (s === "A") return "status-a";
-  if (s === "D") return "status-d";
-  if (s === "R") return "status-r";
-  return "status-u";
-}
-
-function groupHunks(lines: DiffLine[]): Hunk[] {
-  const hunks: Hunk[] = [];
-  let cur: Hunk | null = null;
-  for (const line of lines) {
-    if (line.kind === "hunk") {
-      if (cur) hunks.push(cur);
-      cur = { header: line, lines: [] };
-    } else if (cur) {
-      cur.lines.push(line);
-    }
-  }
-  if (cur) hunks.push(cur);
-  return hunks;
-}
-
 // ── Root ──────────────────────────────────────────────────────────────────────
 
 export interface AgentSession {
@@ -515,47 +454,17 @@ export function DiffPane({ cwd, hidden, gitRevision, agentSessions = [] }: Props
             </div>
           </div>
 
-          {/* Commit form */}
-          <div className="dv-commit">
-            <input
-              className="dv-commit-msg"
-              placeholder="Commit message"
-              value={commitTitle}
-              onChange={(e) => setCommitTitle(e.target.value)}
-              onKeyDown={(e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) { e.preventDefault(); commitStaged(); } }}
-              maxLength={72}
-            />
-            <textarea
-              className="dv-commit-desc"
-              placeholder="Description (optional)"
-              value={commitDesc}
-              onChange={(e) => setCommitDesc(e.target.value)}
-              onKeyDown={(e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) { e.preventDefault(); commitStaged(); } }}
-              rows={2}
-            />
-            <div className="dv-coauthor-row">
-              <span className="dv-coauthor-label">Co-authored-by Tempest</span>
-              <input
-                type="checkbox"
-                className="dp-toggle"
-                checked={coauthor}
-                onChange={(e) => setAttribution(e.target.checked)}
-              />
-            </div>
-            <button
-              className={`dv-commit-btn${canCommit ? " ready" : ""}`}
-              disabled={!canCommit || commitState === "committing"}
-              onClick={commitStaged}
-            >
-              {commitState === "committing" && <Loader size={12} className="dp-spin" />}
-              {commitState === "done" && <Check size={12} />}
-              Commit{staged.length > 0 ? ` (${staged.length})` : ""}
-            </button>
-            <button className="dv-amend-btn" onClick={() => {}}>
-              <RotateCcw size={10} />
-              Amend last commit
-            </button>
-          </div>
+          <CommitBox
+            commitTitle={commitTitle}
+            commitDesc={commitDesc}
+            commitState={commitState}
+            coauthor={coauthor}
+            canCommit={canCommit}
+            stagedCount={staged.length}
+            onTitleChange={setCommitTitle}
+            onDescChange={setCommitDesc}
+            onCommit={commitStaged}
+          />
         </div>
 
         {/* ── Right: branch bar + diff viewer ── */}
@@ -575,52 +484,17 @@ export function DiffPane({ cwd, hidden, gitRevision, agentSessions = [] }: Props
             </div>
 
             <div className="dv-branch-push">
-              {!showBranchInput ? (
-                <>
-                  <button
-                    className="dv-push-btn"
-                    disabled={pushState === "pushing"}
-                    onClick={pushToCurrent}
-                    title={`Push to ${currentBranch || "current branch"}`}
-                  >
-                    {pushState === "pushing" ? <Loader size={11} className="dp-spin" /> : pushState === "done" ? <Check size={11} /> : <GitBranch size={11} />}
-                    Push
-                  </button>
-                  <button
-                    className="dv-push-btn dv-push-btn--outline"
-                    onClick={() => setShowBranchInput(true)}
-                    title="Create new branch and push"
-                  >
-                    <GitPullRequest size={11} />
-                    PR
-                  </button>
-                </>
-              ) : (
-                <div className="dv-new-branch-row">
-                  <button className="dv-branch-cancel" onClick={() => { setShowBranchInput(false); setNewBranchName(""); }}>
-                    <X size={11} />
-                  </button>
-                  <input
-                    className="dv-branch-input"
-                    placeholder="branch-name"
-                    value={newBranchName}
-                    onChange={(e) => setNewBranchName(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") pushToNewBranch();
-                      if (e.key === "Escape") { setShowBranchInput(false); setNewBranchName(""); }
-                    }}
-                    autoFocus
-                  />
-                  <button
-                    className="dv-push-btn"
-                    disabled={!newBranchName.trim() || branchPushState === "pushing"}
-                    onClick={pushToNewBranch}
-                  >
-                    {branchPushState === "pushing" ? <Loader size={11} className="dp-spin" /> : <GitPullRequest size={11} />}
-                    Push & PR
-                  </button>
-                </div>
-              )}
+              <PushControls
+                currentBranch={currentBranch}
+                pushState={pushState}
+                branchPushState={branchPushState}
+                showBranchInput={showBranchInput}
+                newBranchName={newBranchName}
+                onSetShowBranchInput={setShowBranchInput}
+                onSetNewBranchName={setNewBranchName}
+                onPushCurrent={pushToCurrent}
+                onPushNewBranch={pushToNewBranch}
+              />
             </div>
 
             <div className="dv-branch-meta">
@@ -635,39 +509,13 @@ export function DiffPane({ cwd, hidden, gitRevision, agentSessions = [] }: Props
           {/* Diff viewer / branch list */}
           <div className="dv-viewer">
             {showBranchMenu ? (
-              <>
-                <div className="dv-branch-view-tabs">
-                  <button className={`dv-bdt${branchTab === "local" ? " active" : ""}`} onClick={() => setBranchTab("local")}>Local</button>
-                  <button className={`dv-bdt${branchTab === "remote" ? " active" : ""}`} onClick={() => setBranchTab("remote")}>Remote</button>
-                </div>
-                <div className="dv-branch-view-list">
-                  {branchList.length === 0 ? (
-                    <div className="dv-branch-empty">No branches</div>
-                  ) : branchList.map((b) => (
-                    <div key={b.name} className={`dv-branch-item-row${b.is_current ? " current" : ""}`}>
-                      <button
-                        className="dv-branch-item"
-                        onClick={() => !b.is_current && switchBranch(b.name)}
-                        disabled={b.is_current}
-                      >
-                        <GitBranch size={11} />
-                        <span>{b.name}</span>
-                        {b.is_current && <Check size={11} className="dv-branch-check" />}
-                      </button>
-                      {!b.is_current && !b.is_remote && (
-                        <Tooltip content="Delete branch" placement="left">
-                          <button
-                            className="dv-branch-del"
-                            onClick={(e) => { e.stopPropagation(); setDeleteTarget(b.name); setShowBranchMenu(false); }}
-                          >
-                            <Trash2 size={11} />
-                          </button>
-                        </Tooltip>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </>
+              <BranchMenu
+                branches={branchList}
+                tab={branchTab}
+                onSetTab={setBranchTab}
+                onSwitch={switchBranch}
+                onDelete={(name) => { setDeleteTarget(name); setShowBranchMenu(false); }}
+              />
             ) : selected && activeFile ? (
               <>
                 <div className="dv-viewer-hdr">
@@ -1044,95 +892,29 @@ export function DiffPane({ cwd, hidden, gitRevision, agentSessions = [] }: Props
 
       </div>
 
-      {/* Review comments bar */}
-      {comments.length > 0 && (
-        <div className="dcb-bar">
-          <div className="dcb-left">
-            <MessageSquare size={13} className="dcb-icon" />
-            <span className="dcb-count">{comments.length} comment{comments.length !== 1 ? "s" : ""}</span>
-            <span className="dcb-hint">pending</span>
-          </div>
-          <div className="dcb-right">
-            {agentSessions.length > 1 && (
-              <select
-                className="dcb-agent-select"
-                value={selectedAgentId}
-                onChange={(e) => setSelectedAgentId(e.target.value)}
-              >
-                {agentSessions.map((a) => (
-                  <option key={a.id} value={a.id}>{a.name}</option>
-                ))}
-              </select>
-            )}
-            {agentSessions.length === 1 && (
-              <span className="dcb-agent-name">{agentSessions[0].name}</span>
-            )}
-            <button
-              className="dcb-clear-btn"
-              onClick={() => clearComments(cwd)}
-              title="Discard all comments"
-            >
-              <X size={11} />
-            </button>
-            <button
-              className={`dcb-send-btn${agentSessions.length === 0 ? " disabled" : ""}`}
-              onClick={sendCommentsToAgent}
-              disabled={agentSessions.length === 0}
-              title={agentSessions.length === 0 ? "No active agent sessions" : "Send comments to agent"}
-            >
-              <Send size={11} />
-              Send to agent
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Discard confirmation */}
-      {discardTarget && (
-        <div className="dp-overlay" onClick={() => setDiscardTarget(null)}>
-          <div className="dp-dialog" onClick={(e) => e.stopPropagation()}>
-            <AlertTriangle size={20} className="dp-dialog-icon" />
-            <p className="dp-dialog-title">Discard changes?</p>
-            <code className="dp-dialog-path">{discardTarget}</code>
-            <p className="dp-dialog-warn">This cannot be undone.</p>
-            <div className="dp-dialog-actions">
-              <button className="dp-dialog-cancel" onClick={() => setDiscardTarget(null)}>Cancel</button>
-              <button className="dp-dialog-confirm" onClick={() => discardFile(discardTarget)}>Discard</button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Branch delete confirmation */}
-      {deleteTarget && (
-        <div className="dp-overlay" onClick={() => { setDeleteTarget(null); setDeleteError(null); }}>
-          <div className="dp-dialog" onClick={(e) => e.stopPropagation()}>
-            <Trash2 size={20} className="dp-dialog-icon dp-dialog-icon--delete" />
-            <p className="dp-dialog-title">Delete branch?</p>
-            <code className="dp-dialog-path">{deleteTarget}</code>
-            {deleteError ? (
-              <>
-                <p className="dp-dialog-warn dp-dialog-warn--error">{deleteError}</p>
-                <div className="dp-dialog-actions">
-                  <button className="dp-dialog-cancel" onClick={() => { setDeleteTarget(null); setDeleteError(null); }}>Cancel</button>
-                  <button className="dp-dialog-confirm" onClick={() => confirmDelete(true)}>Force Delete</button>
-                </div>
-              </>
-            ) : (
-              <>
-                <label className="dp-delete-remote-row">
-                  <input type="checkbox" className="dp-toggle" checked={deleteAlsoRemote} onChange={(e) => setDeleteAlsoRemote(e.target.checked)} />
-                  <span className="dv-coauthor-label">Also delete from remote</span>
-                </label>
-                <div className="dp-dialog-actions">
-                  <button className="dp-dialog-cancel" onClick={() => { setDeleteTarget(null); setDeleteError(null); }}>Cancel</button>
-                  <button className="dp-dialog-confirm" onClick={() => confirmDelete(false)}>Delete</button>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      )}
+      <CommentBar
+        count={comments.length}
+        agentSessions={agentSessions}
+        selectedAgentId={selectedAgentId}
+        onSelectAgent={setSelectedAgentId}
+        onClear={() => clearComments(cwd)}
+        onSend={sendCommentsToAgent}
+      />
+
+      <DiscardFileDialog
+        path={discardTarget}
+        onConfirm={discardFile}
+        onCancel={() => setDiscardTarget(null)}
+      />
+
+      <DeleteBranchDialog
+        branch={deleteTarget}
+        alsoRemote={deleteAlsoRemote}
+        error={deleteError}
+        onSetAlsoRemote={setDeleteAlsoRemote}
+        onCancel={() => { setDeleteTarget(null); setDeleteError(null); }}
+        onDelete={confirmDelete}
+      />
     </div>
   );
 }
diff --git a/src/components/DiffPane/BranchMenu.tsx b/src/components/DiffPane/BranchMenu.tsx
new file mode 100644
index 0000000..0156099
--- /dev/null
+++ b/src/components/DiffPane/BranchMenu.tsx
@@ -0,0 +1,53 @@
+import { GitBranch, Check, Trash2 } from "lucide-react";
+import { Tooltip } from "../Tooltip";
+import type { BranchInfo } from "../../types/git";
+
+export function BranchMenu({
+  branches,
+  tab,
+  onSetTab,
+  onSwitch,
+  onDelete,
+}: {
+  branches: BranchInfo[];
+  tab: "local" | "remote";
+  onSetTab: (t: "local" | "remote") => void;
+  onSwitch: (name: string) => void;
+  onDelete: (name: string) => void;
+}) {
+  return (
+    <>
+      <div className="dv-branch-view-tabs">
+        <button className={`dv-bdt${tab === "local" ? " active" : ""}`} onClick={() => onSetTab("local")}>Local</button>
+        <button className={`dv-bdt${tab === "remote" ? " active" : ""}`} onClick={() => onSetTab("remote")}>Remote</button>
+      </div>
+      <div className="dv-branch-view-list">
+        {branches.length === 0 ? (
+          <div className="dv-branch-empty">No branches</div>
+        ) : branches.map((b) => (
+          <div key={b.name} className={`dv-branch-item-row${b.is_current ? " current" : ""}`}>
+            <button
+              className="dv-branch-item"
+              onClick={() => !b.is_current && onSwitch(b.name)}
+              disabled={b.is_current}
+            >
+              <GitBranch size={11} />
+              <span>{b.name}</span>
+              {b.is_current && <Check size={11} className="dv-branch-check" />}
+            </button>
+            {!b.is_current && !b.is_remote && (
+              <Tooltip content="Delete branch" placement="left">
+                <button
+                  className="dv-branch-del"
+                  onClick={(e) => { e.stopPropagation(); onDelete(b.name); }}
+                >
+                  <Trash2 size={11} />
+                </button>
+              </Tooltip>
+            )}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/DiffPane/CommentBar.tsx b/src/components/DiffPane/CommentBar.tsx
new file mode 100644
index 0000000..e245682
--- /dev/null
+++ b/src/components/DiffPane/CommentBar.tsx
@@ -0,0 +1,57 @@
+import { MessageSquare, X, Send } from "lucide-react";
+import type { AgentSession } from "../DiffPane";
+
+export function CommentBar({
+  count,
+  agentSessions,
+  selectedAgentId,
+  onSelectAgent,
+  onClear,
+  onSend,
+}: {
+  count: number;
+  agentSessions: AgentSession[];
+  selectedAgentId: string;
+  onSelectAgent: (id: string) => void;
+  onClear: () => void;
+  onSend: () => void;
+}) {
+  if (count === 0) return null;
+  return (
+    <div className="dcb-bar">
+      <div className="dcb-left">
+        <MessageSquare size={13} className="dcb-icon" />
+        <span className="dcb-count">{count} comment{count !== 1 ? "s" : ""}</span>
+        <span className="dcb-hint">pending</span>
+      </div>
+      <div className="dcb-right">
+        {agentSessions.length > 1 && (
+          <select
+            className="dcb-agent-select"
+            value={selectedAgentId}
+            onChange={(e) => onSelectAgent(e.target.value)}
+          >
+            {agentSessions.map((a) => (
+              <option key={a.id} value={a.id}>{a.name}</option>
+            ))}
+          </select>
+        )}
+        {agentSessions.length === 1 && (
+          <span className="dcb-agent-name">{agentSessions[0].name}</span>
+        )}
+        <button className="dcb-clear-btn" onClick={onClear} title="Discard all comments">
+          <X size={11} />
+        </button>
+        <button
+          className={`dcb-send-btn${agentSessions.length === 0 ? " disabled" : ""}`}
+          onClick={onSend}
+          disabled={agentSessions.length === 0}
+          title={agentSessions.length === 0 ? "No active agent sessions" : "Send comments to agent"}
+        >
+          <Send size={11} />
+          Send to agent
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/DiffPane/CommitBox.tsx b/src/components/DiffPane/CommitBox.tsx
new file mode 100644
index 0000000..edd7006
--- /dev/null
+++ b/src/components/DiffPane/CommitBox.tsx
@@ -0,0 +1,67 @@
+import { Loader, Check, RotateCcw } from "lucide-react";
+import { setAttribution } from "../../store/attribution";
+
+export function CommitBox({
+  commitTitle,
+  commitDesc,
+  commitState,
+  coauthor,
+  canCommit,
+  stagedCount,
+  onTitleChange,
+  onDescChange,
+  onCommit,
+}: {
+  commitTitle: string;
+  commitDesc: string;
+  commitState: "idle" | "committing" | "done" | "error";
+  coauthor: boolean;
+  canCommit: boolean;
+  stagedCount: number;
+  onTitleChange: (v: string) => void;
+  onDescChange: (v: string) => void;
+  onCommit: () => void;
+}) {
+  return (
+    <div className="dv-commit">
+      <input
+        className="dv-commit-msg"
+        placeholder="Commit message"
+        value={commitTitle}
+        onChange={(e) => onTitleChange(e.target.value)}
+        onKeyDown={(e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) { e.preventDefault(); onCommit(); } }}
+        maxLength={72}
+      />
+      <textarea
+        className="dv-commit-desc"
+        placeholder="Description (optional)"
+        value={commitDesc}
+        onChange={(e) => onDescChange(e.target.value)}
+        onKeyDown={(e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) { e.preventDefault(); onCommit(); } }}
+        rows={2}
+      />
+      <div className="dv-coauthor-row">
+        <span className="dv-coauthor-label">Co-authored-by Tempest</span>
+        <input
+          type="checkbox"
+          className="dp-toggle"
+          checked={coauthor}
+          onChange={(e) => setAttribution(e.target.checked)}
+        />
+      </div>
+      <button
+        className={`dv-commit-btn${canCommit ? " ready" : ""}`}
+        disabled={!canCommit || commitState === "committing"}
+        onClick={onCommit}
+      >
+        {commitState === "committing" && <Loader size={12} className="dp-spin" />}
+        {commitState === "done" && <Check size={12} />}
+        Commit{stagedCount > 0 ? ` (${stagedCount})` : ""}
+      </button>
+      <button className="dv-amend-btn" onClick={() => {}}>
+        <RotateCcw size={10} />
+        Amend last commit
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/DiffPane/DeleteBranchDialog.tsx b/src/components/DiffPane/DeleteBranchDialog.tsx
new file mode 100644
index 0000000..621dcb5
--- /dev/null
+++ b/src/components/DiffPane/DeleteBranchDialog.tsx
@@ -0,0 +1,41 @@
+import { Trash2 } from "lucide-react";
+
+export function DeleteBranchDialog({ branch, alsoRemote, error, onSetAlsoRemote, onCancel, onDelete }: {
+  branch: string | null;
+  alsoRemote: boolean;
+  error: string | null;
+  onSetAlsoRemote: (v: boolean) => void;
+  onCancel: () => void;
+  onDelete: (force: boolean) => void;
+}) {
+  if (!branch) return null;
+  return (
+    <div className="dp-overlay" onClick={onCancel}>
+      <div className="dp-dialog" onClick={(e) => e.stopPropagation()}>
+        <Trash2 size={20} className="dp-dialog-icon dp-dialog-icon--delete" />
+        <p className="dp-dialog-title">Delete branch?</p>
+        <code className="dp-dialog-path">{branch}</code>
+        {error ? (
+          <>
+            <p className="dp-dialog-warn dp-dialog-warn--error">{error}</p>
+            <div className="dp-dialog-actions">
+              <button className="dp-dialog-cancel" onClick={onCancel}>Cancel</button>
+              <button className="dp-dialog-confirm" onClick={() => onDelete(true)}>Force Delete</button>
+            </div>
+          </>
+        ) : (
+          <>
+            <label className="dp-delete-remote-row">
+              <input type="checkbox" className="dp-toggle" checked={alsoRemote} onChange={(e) => onSetAlsoRemote(e.target.checked)} />
+              <span className="dv-coauthor-label">Also delete from remote</span>
+            </label>
+            <div className="dp-dialog-actions">
+              <button className="dp-dialog-cancel" onClick={onCancel}>Cancel</button>
+              <button className="dp-dialog-confirm" onClick={() => onDelete(false)}>Delete</button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/DiffPane/DiscardFileDialog.tsx b/src/components/DiffPane/DiscardFileDialog.tsx
new file mode 100644
index 0000000..e669a30
--- /dev/null
+++ b/src/components/DiffPane/DiscardFileDialog.tsx
@@ -0,0 +1,23 @@
+import { AlertTriangle } from "lucide-react";
+
+export function DiscardFileDialog({ path, onConfirm, onCancel }: {
+  path: string | null;
+  onConfirm: (path: string) => void;
+  onCancel: () => void;
+}) {
+  if (!path) return null;
+  return (
+    <div className="dp-overlay" onClick={onCancel}>
+      <div className="dp-dialog" onClick={(e) => e.stopPropagation()}>
+        <AlertTriangle size={20} className="dp-dialog-icon" />
+        <p className="dp-dialog-title">Discard changes?</p>
+        <code className="dp-dialog-path">{path}</code>
+        <p className="dp-dialog-warn">This cannot be undone.</p>
+        <div className="dp-dialog-actions">
+          <button className="dp-dialog-cancel" onClick={onCancel}>Cancel</button>
+          <button className="dp-dialog-confirm" onClick={() => onConfirm(path)}>Discard</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/DiffPane/PushControls.tsx b/src/components/DiffPane/PushControls.tsx
new file mode 100644
index 0000000..3fc2434
--- /dev/null
+++ b/src/components/DiffPane/PushControls.tsx
@@ -0,0 +1,73 @@
+import { GitBranch, GitPullRequest, Loader, Check, X } from "lucide-react";
+
+export function PushControls({
+  currentBranch,
+  pushState,
+  branchPushState,
+  showBranchInput,
+  newBranchName,
+  onSetShowBranchInput,
+  onSetNewBranchName,
+  onPushCurrent,
+  onPushNewBranch,
+}: {
+  currentBranch: string;
+  pushState: "idle" | "pushing" | "done";
+  branchPushState: "idle" | "pushing" | "done" | "error";
+  showBranchInput: boolean;
+  newBranchName: string;
+  onSetShowBranchInput: (v: boolean) => void;
+  onSetNewBranchName: (v: string) => void;
+  onPushCurrent: () => void;
+  onPushNewBranch: () => void;
+}) {
+  if (!showBranchInput) {
+    return (
+      <>
+        <button
+          className="dv-push-btn"
+          disabled={pushState === "pushing"}
+          onClick={onPushCurrent}
+          title={`Push to ${currentBranch || "current branch"}`}
+        >
+          {pushState === "pushing" ? <Loader size={11} className="dp-spin" /> : pushState === "done" ? <Check size={11} /> : <GitBranch size={11} />}
+          Push
+        </button>
+        <button
+          className="dv-push-btn dv-push-btn--outline"
+          onClick={() => onSetShowBranchInput(true)}
+          title="Create new branch and push"
+        >
+          <GitPullRequest size={11} />
+          PR
+        </button>
+      </>
+    );
+  }
+  return (
+    <div className="dv-new-branch-row">
+      <button className="dv-branch-cancel" onClick={() => { onSetShowBranchInput(false); onSetNewBranchName(""); }}>
+        <X size={11} />
+      </button>
+      <input
+        className="dv-branch-input"
+        placeholder="branch-name"
+        value={newBranchName}
+        onChange={(e) => onSetNewBranchName(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") onPushNewBranch();
+          if (e.key === "Escape") { onSetShowBranchInput(false); onSetNewBranchName(""); }
+        }}
+        autoFocus
+      />
+      <button
+        className="dv-push-btn"
+        disabled={!newBranchName.trim() || branchPushState === "pushing"}
+        onClick={onPushNewBranch}
+      >
+        {branchPushState === "pushing" ? <Loader size={11} className="dp-spin" /> : <GitPullRequest size={11} />}
+        Push & PR
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/KnowledgeBasePage.tsx b/src/components/KnowledgeBasePage.tsx
index 329f96c..9c37d60 100644
--- a/src/components/KnowledgeBasePage.tsx
+++ b/src/components/KnowledgeBasePage.tsx
@@ -1,67 +1,28 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
-import { Loader, ZoomIn, ZoomOut, Maximize2, RotateCcw, ChevronDown } from "lucide-react";
-import { Tooltip } from "./Tooltip";
+import { Loader } from "lucide-react";
 import {
   forceSimulation,
   forceManyBody,
   forceLink as forceLinks,
   forceCenter,
   forceCollide,
-  type SimulationNodeDatum,
-  type SimulationLinkDatum,
   type Simulation,
 } from "d3-force";
 import { getOpenProjects } from "../store/openProjects";
+import type {
+  IndexedProject,
+  GraphData,
+  LoadState,
+  GNode,
+  GLink,
+} from "../types/knowledgeGraph";
+import { resolveKindColors, nodeRadius, MINIMAP_W, MINIMAP_H } from "../lib/knowledgeGraph";
+import { renderGraph, type MinimapTf } from "../lib/knowledgeGraphRender";
+import { NodeDetailPanel } from "./KnowledgeBasePage/NodeDetailPanel";
+import { KbToolbar } from "./KnowledgeBasePage/KbToolbar";
 import "./KnowledgeBasePage.css";
 
-// ── Types ──────────────────────────────────────────────────────────────────
-
-interface IndexedProject { id: string; name: string; path: string }
-
-interface SymbolNodeRaw {
-  id: string; name: string; kind: string; file_path: string;
-  start_line: number; end_line: number; language: string;
-}
-interface SymbolEdgeRaw { source: string; target: string; kind: string }
-interface GraphData { nodes: SymbolNodeRaw[]; edges: SymbolEdgeRaw[] }
-
-type LoadState = "idle" | "loading" | "ready" | "error";
-
-// D3 augments nodes with index; we provide x/y/vx/vy up-front
-interface GNode extends SimulationNodeDatum {
-  id: string; label: string; kind: string; color: string; radius: number;
-  file_path: string; start_line: number; language: string;
-  x: number; y: number; vx: number; vy: number;
-  fx?: number | null; fy?: number | null;
-}
-
-// Links are pre-resolved to GNode objects; d3 uses them directly
-interface GLink extends SimulationLinkDatum<GNode> {
-  source: GNode; target: GNode; kind: string;
-}
-
-// ── Helpers ────────────────────────────────────────────────────────────────
-
-function resolveKindColors(): Record<string, string> {
-  const s = getComputedStyle(document.documentElement);
-  const v = (n: string) => s.getPropertyValue(`--tempest-${n}`).trim();
-  return {
-    function:  v("accent-blue"),   method:    v("accent-blue"),
-    class:     v("accent-yellow"), interface: v("accent-green"),
-    type:      v("accent-purple"),  variable:  v("fg-muted"),
-    constant:  v("fg-muted"),      _default:  v("fg-subtle"),
-  };
-}
-
-function nodeRadius(deg: number): number {
-  return 4 + Math.sqrt(deg) * 1.5;
-}
-
-// Minimap dimensions (CSS px)
-const MINIMAP_W = 180;
-const MINIMAP_H = 120;
-
 // ── Component ──────────────────────────────────────────────────────────────
 
 export function KnowledgeBasePage() {
@@ -78,9 +39,6 @@ export function KnowledgeBasePage() {
   const [logLine,          setLogLine]          = useState("");
   const [progress,         setProgress]         = useState(0);
   const [detailNode,       setDetailNode]       = useState<GNode | null>(null);
-  const [dropOpen,         setDropOpen]         = useState(false);
-
-  const dropRef = useRef<HTMLDivElement>(null);
 
   // Ref mirror of detail node so the render fn can read it without re-rendering
   const detailNodeRef = useRef<GNode | null>(null);
@@ -112,239 +70,27 @@ export function KnowledgeBasePage() {
   const lastPinchDistRef = useRef<number | null>(null);
 
   // Minimap world→minimap transform, updated each frame by renderMinimap()
-  const minimapTfRef = useRef<{ scale: number; ox: number; oy: number } | null>(null);
+  const minimapTfRef = useRef<MinimapTf>(null);
 
   // RAF
   const rafRef    = useRef<number | null>(null);
-  const renderRef = useRef<() => void>(() => {});
-
-  // ── Render fn (set once; reads refs only, never re-created) ───────────────
-
-  useEffect(() => {
-    // Renders the whole graph, plus the current viewport rect, into the
-    // small minimap canvas. Reads refs only; called at the end of the main
-    // render fn so it stays in sync with the primary canvas.
-    const renderMinimap = () => {
-      const mm = minimapCanvasRef.current;
-      if (!mm) return;
-      const ctx = mm.getContext("2d");
-      if (!ctx) return;
-
-      const dpr = window.devicePixelRatio || 1;
-      const W = MINIMAP_W, H = MINIMAP_H;
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-      ctx.clearRect(0, 0, W, H);
-
-      const nodes = nodesRef.current;
-      const links = linksRef.current;
-      if (nodes.length === 0) { minimapTfRef.current = null; return; }
-
-      // Bounding box of all nodes (same logic as fitView)
-      let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
-      for (const n of nodes) {
-        x0 = Math.min(x0, n.x - n.radius); y0 = Math.min(y0, n.y - n.radius);
-        x1 = Math.max(x1, n.x + n.radius); y1 = Math.max(y1, n.y + n.radius);
-      }
-      const pad = 8;
-      const bw = Math.max(1, x1 - x0), bh = Math.max(1, y1 - y0);
-      const scale = Math.min((W - pad * 2) / bw, (H - pad * 2) / bh);
-      const ox = (W - bw * scale) / 2 - x0 * scale;
-      const oy = (H - bh * scale) / 2 - y0 * scale;
-      minimapTfRef.current = { scale, ox, oy };
-      const wx2 = (wx: number) => wx * scale + ox;
-      const wy2 = (wy: number) => wy * scale + oy;
-
-      const mmStyle = getComputedStyle(document.documentElement);
-      const edgeCol = mmStyle.getPropertyValue("--tempest-border-subtle").trim() || "#2a2a2a";
-
-      // Edges — 1px lines at ~15% opacity
-      ctx.strokeStyle = edgeCol;
-      ctx.globalAlpha = 0.15;
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      for (const l of links) {
-        ctx.moveTo(wx2(l.source.x), wy2(l.source.y));
-        ctx.lineTo(wx2(l.target.x), wy2(l.target.y));
-      }
-      ctx.stroke();
-
-      // Nodes — 1.5px filled circles in their kind color
-      ctx.globalAlpha = 1;
-      for (const n of nodes) {
-        ctx.beginPath();
-        ctx.arc(wx2(n.x), wy2(n.y), 1.5, 0, Math.PI * 2);
-        ctx.fillStyle = n.color;
-        ctx.fill();
-      }
 
-      // Viewport rectangle — map the 4 corners of the main viewport to minimap
-      const canvas = canvasRef.current;
-      if (canvas) {
-        const cw = canvas.width / dpr, ch = canvas.height / dpr;
-        const { x: tx, y: ty, zoom } = camRef.current;
-        const vwx0 = -tx / zoom,        vwy0 = -ty / zoom;
-        const vwx1 = (cw - tx) / zoom,  vwy1 = (ch - ty) / zoom;
-        const rx = wx2(vwx0), ry = wy2(vwy0);
-        const rw = (vwx1 - vwx0) * scale, rh = (vwy1 - vwy0) * scale;
-        const cs = getComputedStyle(document.documentElement);
-        ctx.fillStyle   = cs.getPropertyValue("--tempest-minimap-overlay").trim();
-        ctx.strokeStyle = cs.getPropertyValue("--tempest-minimap-border").trim();
-        ctx.lineWidth   = 1;
-        ctx.fillRect(rx, ry, rw, rh);
-        ctx.strokeRect(rx, ry, rw, rh);
-      }
-    };
-
-    renderRef.current = () => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-
-      const dpr  = window.devicePixelRatio || 1;
-      const cw   = canvas.width  / dpr;
-      const ch   = canvas.height / dpr;
-      const { x: tx, y: ty, zoom } = camRef.current;
-      const nodes    = nodesRef.current;
-      const links    = linksRef.current;
-      const hovered  = hoverNodeRef.current;
-      const selected = detailNodeRef.current;
-      const hasHover     = hovered  !== null;
-      const hasSel       = selected !== null;
-      const hasHighlight = hasHover || hasSel;
-      // Hover takes priority for neighborhood; fall back to selection when not hovering
-      const activeNode     = hovered ?? selected;
-      const activeNeibIds  = hasHover ? neighborIdsRef.current  : selNeighborIdsRef.current;
-      const activeConnLnks = hasHover ? connLinksRef.current    : selConnLinksRef.current;
-      const showLabels = zoom > 0.55;
-
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.save();
-      ctx.scale(dpr, dpr);
-
-      // Background
-      const style = getComputedStyle(document.documentElement);
-      ctx.fillStyle = style.getPropertyValue("--tempest-bg-editor").trim() || "#0f0f0f";
-      ctx.fillRect(0, 0, cw, ch);
-
-      ctx.translate(tx, ty);
-      ctx.scale(zoom, zoom);
-
-      const edgeBase = style.getPropertyValue("--tempest-border-subtle").trim() || "#2a2a2a";
-
-      // ── Edges ───────────────────────────────────────────────────────────
-      if (!hasHighlight) {
-        ctx.beginPath();
-        ctx.strokeStyle = edgeBase;
-        ctx.lineWidth   = 0.8 / zoom;
-        ctx.globalAlpha = 0.28;
-        for (const l of links) {
-          ctx.moveTo(l.source.x, l.source.y);
-          ctx.lineTo(l.target.x, l.target.y);
-        }
-        ctx.stroke();
-      } else {
-        // Dim unconnected edges
-        ctx.beginPath();
-        ctx.strokeStyle = edgeBase;
-        ctx.lineWidth   = 0.6 / zoom;
-        ctx.globalAlpha = 0.05;
-        for (const l of links) {
-          if (!activeConnLnks.has(l)) {
-            ctx.moveTo(l.source.x, l.source.y);
-            ctx.lineTo(l.target.x, l.target.y);
-          }
-        }
-        ctx.stroke();
-
-        // Highlight connected edges in the active node's color
-        if (activeNode) {
-          ctx.beginPath();
-          ctx.strokeStyle = activeNode.color;
-          ctx.lineWidth   = 1.2 / zoom;
-          ctx.globalAlpha = 0.7;
-          for (const l of activeConnLnks) {
-            ctx.moveTo(l.source.x, l.source.y);
-            ctx.lineTo(l.target.x, l.target.y);
-          }
-          ctx.stroke();
-        }
-      }
-
-      // ── Nodes ───────────────────────────────────────────────────────────
-      // Viewport bounds for label culling
-      const marg = 60 / zoom;
-      const vx0 = (-tx / zoom) - marg, vx1 = ((cw - tx) / zoom) + marg;
-      const vy0 = (-ty / zoom) - marg, vy1 = ((ch - ty) / zoom) + marg;
-
-      for (const n of nodes) {
-        const isHov  = n === hovered;
-        const isSel  = n === selected;
-        const isNeib = hasHighlight && activeNeibIds.has(n.id);
-        const focus  = isHov || isSel;
-        const alpha  = (hasHighlight && !focus && !isNeib) ? 0.1 : 1;
-        const r      = n.radius;
-
-        ctx.globalAlpha = alpha;
-
-        // Glow for focused / neighbor nodes
-        if (focus || isNeib) {
-          const gr   = r * (focus ? 4 : 2.5);
-          const grad = ctx.createRadialGradient(n.x, n.y, r * 0.2, n.x, n.y, gr);
-          grad.addColorStop(0, n.color + (focus ? "70" : "50"));
-          grad.addColorStop(1, n.color + "00");
-          ctx.fillStyle   = grad;
-          ctx.globalAlpha = alpha;
-          ctx.beginPath();
-          ctx.arc(n.x, n.y, gr, 0, Math.PI * 2);
-          ctx.fill();
-          ctx.globalAlpha = alpha;
-        }
-
-        // Circle fill
-        ctx.beginPath();
-        ctx.arc(n.x, n.y, r, 0, Math.PI * 2);
-        ctx.fillStyle = n.color;
-        ctx.fill();
-
-        // Selection ring
-        if (isSel) {
-          ctx.beginPath();
-          ctx.arc(n.x, n.y, r + 4 / zoom, 0, Math.PI * 2);
-          ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue("--tempest-fg-default").trim();
-          ctx.lineWidth   = 1.5 / zoom;
-          ctx.globalAlpha = 0.9;
-          ctx.stroke();
-        } else if (isHov) {
-          ctx.beginPath();
-          ctx.arc(n.x, n.y, r + 3 / zoom, 0, Math.PI * 2);
-          ctx.strokeStyle = n.color;
-          ctx.lineWidth   = 1.5 / zoom;
-          ctx.globalAlpha = 0.55;
-          ctx.stroke();
-        }
-
-        // Labels — viewport-culled; shown for focus/neighbors or when zoomed in
-        if (showLabels) {
-          const inVP  = n.x > vx0 && n.x < vx1 && n.y > vy0 && n.y < vy1;
-          const show  = inVP && (focus || isNeib || zoom > 1.1);
-          if (show) {
-            const fs = Math.max(8, Math.min(13, 11 / zoom));
-            ctx.font        = `${fs}px "Geist Mono", monospace`;
-            ctx.textAlign   = "center";
-            ctx.fillStyle   = focus ? getComputedStyle(document.documentElement).getPropertyValue("--tempest-fg-default").trim() : getComputedStyle(document.documentElement).getPropertyValue("--tempest-fg-muted").trim();
-            ctx.globalAlpha = focus ? 1 : 0.75 * alpha;
-            ctx.fillText(n.label, n.x, n.y + r + fs * 1.4);
-          }
-        }
-      }
-
-      ctx.globalAlpha = 1;
-      ctx.restore();
-
-      renderMinimap();
-    };
-  }, []); // empty: reads refs only, never needs to update
+  const render = useCallback(() => {
+    renderGraph({
+      canvas: canvasRef.current,
+      minimap: minimapCanvasRef.current,
+      nodes: nodesRef.current,
+      links: linksRef.current,
+      camera: camRef.current,
+      hovered: hoverNodeRef.current,
+      selected: detailNodeRef.current,
+      hoverNeighborIds: neighborIdsRef.current,
+      hoverConnLinks: connLinksRef.current,
+      selNeighborIds: selNeighborIdsRef.current,
+      selConnLinks: selConnLinksRef.current,
+      setMinimapTf: (tf) => { minimapTfRef.current = tf; },
+    });
+  }, []);
 
   // ── Single-frame render request ────────────────────────────────────────────
 
@@ -352,9 +98,9 @@ export function KnowledgeBasePage() {
     if (rafRef.current !== null) return;
     rafRef.current = requestAnimationFrame(() => {
       rafRef.current = null;
-      renderRef.current();
+      render();
     });
-  }, []);
+  }, [render]);
 
   // ── Hit test (world-space distance to each node) ───────────────────────────
 
@@ -679,19 +425,6 @@ export function KnowledgeBasePage() {
     };
   }, [minimapPanTo]);
 
-  // ── Close project dropdown on outside click ────────────────────────────────
-
-  useEffect(() => {
-    if (!dropOpen) return;
-    function onOutside(e: MouseEvent) {
-      if (dropRef.current && !dropRef.current.contains(e.target as Node)) {
-        setDropOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", onOutside);
-    return () => document.removeEventListener("mousedown", onOutside);
-  }, [dropOpen]);
-
   // ── Discover indexed projects on mount ─────────────────────────────────────
 
   useEffect(() => {
@@ -849,7 +582,7 @@ export function KnowledgeBasePage() {
             if (rafRef.current === null) {
               rafRef.current = requestAnimationFrame(() => {
                 rafRef.current = null;
-                renderRef.current();
+                render();
               });
             }
           });
@@ -926,48 +659,16 @@ export function KnowledgeBasePage() {
 
   return (
     <div className="kb-root">
-      <div className="kb-toolbar">
-        <div className="kb-project-drop" ref={dropRef}>
-          <button
-            className={`kb-project-drop-btn${dropOpen ? " kb-project-drop-btn--open" : ""}`}
-            onClick={() => setDropOpen((v) => !v)}
-            disabled={indexedProjects.length === 0}
-          >
-            <span className="kb-project-drop-label">
-              {indexedProjects.find((p) => p.path === selectedPath)?.name ?? "No indexed projects"}
-            </span>
-            <ChevronDown size={12} className="kb-project-drop-chevron" />
-          </button>
-          {dropOpen && indexedProjects.length > 0 && (
-            <div className="kb-project-drop-menu">
-              {indexedProjects.map((p) => (
-                <button
-                  key={p.id}
-                  className={`kb-project-drop-item${p.path === selectedPath ? " kb-project-drop-item--active" : ""}`}
-                  onClick={() => { setSelectedPath(p.path); setDropOpen(false); }}
-                >
-                  {p.name}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-
-        <div className="kb-toolbar-divider" />
-
-        <Tooltip content="Zoom in" placement="top">
-          <button className="kb-tool-btn" onClick={() => zoomBy(1.25)} disabled={!hasGraph}><ZoomIn    size={14} /></button>
-        </Tooltip>
-        <Tooltip content="Zoom out" placement="top">
-          <button className="kb-tool-btn" onClick={() => zoomBy(0.8)}  disabled={!hasGraph}><ZoomOut   size={14} /></button>
-        </Tooltip>
-        <Tooltip content="Fit to screen" placement="top">
-          <button className="kb-tool-btn" onClick={fitView}            disabled={!hasGraph}><Maximize2 size={14} /></button>
-        </Tooltip>
-        <Tooltip content="Reset view" placement="top">
-          <button className="kb-tool-btn" onClick={resetView}           disabled={!hasGraph}><RotateCcw size={14} /></button>
-        </Tooltip>
-      </div>
+      <KbToolbar
+        projects={indexedProjects}
+        selectedPath={selectedPath}
+        hasGraph={hasGraph}
+        onSelectPath={setSelectedPath}
+        onZoomIn={() => zoomBy(1.25)}
+        onZoomOut={() => zoomBy(0.8)}
+        onFit={fitView}
+        onReset={resetView}
+      />
 
       <div className="kb-canvas-wrap" ref={containerRef}>
         {projectsResolved && indexedProjects.length === 0 && (
@@ -1013,39 +714,16 @@ export function KnowledgeBasePage() {
         />
 
         {detailNode && (
-          <div className="kb-detail">
-            <Tooltip content="Close" placement="top">
-              <button
-                className="kb-detail-close"
-                onClick={() => {
-                  detailNodeRef.current     = null;
-                  setDetailNode(null);
-                  selNeighborIdsRef.current = new Set();
-                  selConnLinksRef.current   = new Set();
-                  requestRender();
-                }}
-              >×</button>
-            </Tooltip>
-            <div
-              className="kb-detail-badge"
-              style={{ background: detailNode.color + "22", color: detailNode.color }}
-            >
-              {detailNode.kind}
-            </div>
-            <div className="kb-detail-name">{detailNode.label}</div>
-            <div className="kb-detail-row">
-              <span>File</span>
-              {detailNode.file_path.split(/[/\\]/).slice(-2).join("/")}
-            </div>
-            <div className="kb-detail-row">
-              <span>Line</span>
-              {detailNode.start_line}
-            </div>
-            <div className="kb-detail-row">
-              <span>Language</span>
-              {detailNode.language}
-            </div>
-          </div>
+          <NodeDetailPanel
+            node={detailNode}
+            onClose={() => {
+              detailNodeRef.current     = null;
+              setDetailNode(null);
+              selNeighborIdsRef.current = new Set();
+              selConnLinksRef.current   = new Set();
+              requestRender();
+            }}
+          />
         )}
       </div>
     </div>
diff --git a/src/components/KnowledgeBasePage/KbToolbar.tsx b/src/components/KnowledgeBasePage/KbToolbar.tsx
new file mode 100644
index 0000000..7ab0bc9
--- /dev/null
+++ b/src/components/KnowledgeBasePage/KbToolbar.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from "react";
+import { ZoomIn, ZoomOut, Maximize2, RotateCcw, ChevronDown } from "lucide-react";
+import { Tooltip } from "../Tooltip";
+import type { IndexedProject } from "../../types/knowledgeGraph";
+
+type Props = {
+  projects: IndexedProject[];
+  selectedPath: string | null;
+  hasGraph: boolean;
+  onSelectPath: (path: string) => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onFit: () => void;
+  onReset: () => void;
+};
+
+export function KbToolbar({
+  projects, selectedPath, hasGraph,
+  onSelectPath, onZoomIn, onZoomOut, onFit, onReset,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const dropRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onOutside(e: MouseEvent) {
+      if (dropRef.current && !dropRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, [open]);
+
+  return (
+    <div className="kb-toolbar">
+      <div className="kb-project-drop" ref={dropRef}>
+        <button
+          className={`kb-project-drop-btn${open ? " kb-project-drop-btn--open" : ""}`}
+          onClick={() => setOpen((v) => !v)}
+          disabled={projects.length === 0}
+        >
+          <span className="kb-project-drop-label">
+            {projects.find((p) => p.path === selectedPath)?.name ?? "No indexed projects"}
+          </span>
+          <ChevronDown size={12} className="kb-project-drop-chevron" />
+        </button>
+        {open && projects.length > 0 && (
+          <div className="kb-project-drop-menu">
+            {projects.map((p) => (
+              <button
+                key={p.id}
+                className={`kb-project-drop-item${p.path === selectedPath ? " kb-project-drop-item--active" : ""}`}
+                onClick={() => { onSelectPath(p.path); setOpen(false); }}
+              >
+                {p.name}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="kb-toolbar-divider" />
+
+      <Tooltip content="Zoom in" placement="top">
+        <button className="kb-tool-btn" onClick={onZoomIn} disabled={!hasGraph}><ZoomIn size={14} /></button>
+      </Tooltip>
+      <Tooltip content="Zoom out" placement="top">
+        <button className="kb-tool-btn" onClick={onZoomOut} disabled={!hasGraph}><ZoomOut size={14} /></button>
+      </Tooltip>
+      <Tooltip content="Fit to screen" placement="top">
+        <button className="kb-tool-btn" onClick={onFit} disabled={!hasGraph}><Maximize2 size={14} /></button>
+      </Tooltip>
+      <Tooltip content="Reset view" placement="top">
+        <button className="kb-tool-btn" onClick={onReset} disabled={!hasGraph}><RotateCcw size={14} /></button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/src/components/KnowledgeBasePage/NodeDetailPanel.tsx b/src/components/KnowledgeBasePage/NodeDetailPanel.tsx
new file mode 100644
index 0000000..72b9ad8
--- /dev/null
+++ b/src/components/KnowledgeBasePage/NodeDetailPanel.tsx
@@ -0,0 +1,36 @@
+import { Tooltip } from "../Tooltip";
+import type { GNode } from "../../types/knowledgeGraph";
+
+type Props = {
+  node: GNode;
+  onClose: () => void;
+};
+
+export function NodeDetailPanel({ node, onClose }: Props) {
+  return (
+    <div className="kb-detail">
+      <Tooltip content="Close" placement="top">
+        <button className="kb-detail-close" onClick={onClose}>×</button>
+      </Tooltip>
+      <div
+        className="kb-detail-badge"
+        style={{ background: node.color + "22", color: node.color }}
+      >
+        {node.kind}
+      </div>
+      <div className="kb-detail-name">{node.label}</div>
+      <div className="kb-detail-row">
+        <span>File</span>
+        {node.file_path.split(/[/\\]/).slice(-2).join("/")}
+      </div>
+      <div className="kb-detail-row">
+        <span>Line</span>
+        {node.start_line}
+      </div>
+      <div className="kb-detail-row">
+        <span>Language</span>
+        {node.language}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx
index 3a72448..fc74195 100644
--- a/src/components/RightSidebar.tsx
+++ b/src/components/RightSidebar.tsx
@@ -14,6 +14,7 @@ import {
   SplitSquareHorizontal,
 } from "lucide-react";
 import { Tooltip } from "./Tooltip";
+import type { DiffLine, FileStats } from "../types/git";
 import "./RightSidebar.css";
 
 type RightTab = "files" | "changes";
@@ -34,19 +35,6 @@ interface GitChange {
   dels?: number;
 }
 
-interface FileStats {
-  path: string;
-  adds: number;
-  dels: number;
-}
-
-interface DiffLine {
-  kind: "hunk" | "context" | "added" | "removed";
-  line_old: number | null;
-  line_new: number | null;
-  content: string;
-}
-
 interface Props {
   cwd: string | null;
   rootPath: string | null;
diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
index 444ad70..0583cdb 100644
--- a/src/components/SettingsPanel.tsx
+++ b/src/components/SettingsPanel.tsx
@@ -1,37 +1,22 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { X, Palette, Keyboard, Info, RotateCcw, GitCommitHorizontal, Terminal as TerminalIcon, GitBranch, BookOpen, GripVertical, Pencil, Copy, Trash2, Plus, Cpu, Shield, ChevronDown, KeyRound, Eye, EyeOff, Check } from "lucide-react";
-import { Mark } from "../assets/Mark";
+import { X, Palette, Keyboard, Info, GitCommitHorizontal, Terminal as TerminalIcon, GitBranch, BookOpen, Cpu, Shield, KeyRound } from "lucide-react";
 import { Tooltip } from "./Tooltip";
 import { useTheme } from "../themes/ThemeContext";
-import type { Theme } from "../themes/types";
-import {
-  ACTION_DEFS,
-  DEFAULTS,
-  useKeybindings,
-  setBinding,
-  resetBinding,
-  resetAllBindings,
-  formatShortcut,
-  shortcutFromEvent,
-  type ActionId,
-  type Shortcut,
-} from "../store/keybindings";
-import { useAttribution, setAttribution } from "../store/attribution";
-import { useSettings, updateSetting, FONT_FAMILY_OPTIONS, type AppSettings } from "../store/appSettings";
-import {
-  usePrompts,
-  updatePrompt,
-  deletePrompt,
-  resetPrompt,
-  clonePrompt,
-  addPrompt,
-  reorderPrompts,
-  isBuiltinModified,
-  type PromptEntry,
-} from "../store/prompts";
+import { AppearanceSection } from "./SettingsPanel/AppearanceSection";
+import { TerminalSection } from "./SettingsPanel/TerminalSection";
+import { GitSection } from "./SettingsPanel/GitSection";
+import { SecuritySection } from "./SettingsPanel/SecuritySection";
+import { TokenIntelligenceSection } from "./SettingsPanel/TokenIntelligenceSection";
+import { ApiKeysSection } from "./SettingsPanel/ApiKeysSection";
+import { PromptsSection } from "./SettingsPanel/PromptsSection";
+import { KeyboardSection } from "./SettingsPanel/KeyboardSection";
+import { AttributionSection } from "./SettingsPanel/AttributionSection";
+import { AboutSection } from "./SettingsPanel/AboutSection";
 import "./SettingsPanel.css";
 
+export { AttributionSection } from "./SettingsPanel/AttributionSection";
+
 type Section = "appearance" | "terminal" | "git" | "intelligence" | "security" | "apikeys" | "prompts" | "keyboard" | "attribution" | "about";
 
 interface SettingsPanelProps {
@@ -162,960 +147,3 @@ export function SettingsPanel({ onClose, onAttributionToggle, initialSection }:
     document.body
   );
 }
-
-/* ── Appearance ──────────────────────────────────────────────────────────── */
-
-function AppearanceSection({
-  themes,
-  activeTheme,
-  onThemeChange,
-}: {
-  themes: Theme[];
-  activeTheme: Theme;
-  onThemeChange: (t: Theme) => void;
-}) {
-  const s = useSettings();
-  return (
-    <div className="sp-section">
-      <div className="sp-section-heading">Theme</div>
-      <p className="sp-section-desc">Choose a color theme for the editor and UI.</p>
-      <div className="sp-theme-grid">
-        {themes.map((t) => (
-          <button
-            key={t.name}
-            className={`sp-theme-card${t.name === activeTheme.name ? " sp-theme-card--active" : ""}`}
-            onClick={() => onThemeChange(t)}
-          >
-            <ThemePreview theme={t} />
-            <span className="sp-theme-name">{t.name}</span>
-          </button>
-        ))}
-      </div>
-
-      <div className="sp-section-heading" style={{ marginTop: 24 }}>Interface</div>
-      <p className="sp-section-desc">Adjust sidebar text sizing.</p>
-      <div className="sp-rows">
-        <SettingRow label="Sidebar font size" hint="12 – 18 px">
-          <Stepper value={s.sidebarFontSize} min={12} max={18}
-            onChange={(v) => updateSetting("sidebarFontSize", v)} />
-        </SettingRow>
-      </div>
-    </div>
-  );
-}
-
-function ThemePreview({ theme }: { theme: Theme }) {
-  const bg      = theme.colors["bg.editor"]      ?? "#0a0a0a";
-  const sidebar = theme.colors["bg.sidebar"]     ?? "#000000";
-  const accent  = theme.colors["accent.blue"]    ?? "#62a6ff";
-  const fg      = theme.colors["fg.default"]     ?? "#ededed";
-  const fgMuted = theme.colors["fg.muted"]       ?? "#a1a1a1";
-  const border  = theme.colors["border.default"] ?? "#242424";
-  const green   = theme.colors["accent.green"]   ?? "#58c760";
-
-  return (
-    <div className="sp-theme-preview" style={{ background: bg, borderColor: border }}>
-      <div className="sp-theme-preview-sidebar" style={{ background: sidebar, borderRightColor: border }}>
-        <div className="sp-theme-preview-dot" style={{ background: fgMuted, opacity: 0.55 }} />
-        <div className="sp-theme-preview-dot" style={{ background: fgMuted, opacity: 0.3  }} />
-        <div className="sp-theme-preview-dot" style={{ background: fgMuted, opacity: 0.3  }} />
-      </div>
-      <div className="sp-theme-preview-content">
-        <div className="sp-theme-preview-line" style={{ background: fg,      width: "65%", opacity: 0.55 }} />
-        <div className="sp-theme-preview-line" style={{ background: accent,  width: "42%", opacity: 0.75 }} />
-        <div className="sp-theme-preview-line" style={{ background: green,   width: "50%", opacity: 0.55 }} />
-        <div className="sp-theme-preview-line" style={{ background: fgMuted, width: "35%", opacity: 0.3  }} />
-      </div>
-    </div>
-  );
-}
-
-/* ── Shared controls ─────────────────────────────────────────────────────── */
-
-function SettingRow({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
-  return (
-    <div className="sp-row">
-      <div className="sp-row-text">
-        <span className="sp-row-label">{label}</span>
-        {hint && <span className="sp-row-hint">{hint}</span>}
-      </div>
-      <div className="sp-row-control">{children}</div>
-    </div>
-  );
-}
-
-function Stepper({ value, min, max, onChange }: { value: number; min: number; max: number; onChange: (v: number) => void }) {
-  return (
-    <div className="sp-stepper">
-      <Tooltip content="Decrease" placement="top">
-        <button className="sp-stepper-btn" disabled={value <= min} onClick={() => onChange(value - 1)}>−</button>
-      </Tooltip>
-      <span className="sp-stepper-val">{value}</span>
-      <Tooltip content="Increase" placement="top">
-        <button className="sp-stepper-btn" disabled={value >= max} onClick={() => onChange(value + 1)}>+</button>
-      </Tooltip>
-    </div>
-  );
-}
-
-function Segmented({ options, value, onChange }: {
-  options: { value: string; label: string }[];
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  return (
-    <div className="sp-segmented">
-      {options.map((o) => (
-        <button
-          key={o.value}
-          className={`sp-segmented-btn${value === o.value ? " sp-segmented-btn--active" : ""}`}
-          onClick={() => onChange(o.value)}
-        >
-          {o.label}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function ToggleSwitch({ on, onChange }: { on: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button
-      className={`sp-toggle${on ? " sp-toggle--on" : ""}`}
-      onClick={() => onChange(!on)}
-      role="switch"
-      aria-checked={on}
-    >
-      <span className="sp-toggle-thumb" />
-    </button>
-  );
-}
-
-function SpSelect({ value, options, onChange }: {
-  value: string;
-  options: { value: string; label: string }[];
-  onChange: (v: string) => void;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const label = options.find((o) => o.value === value)?.label ?? value;
-
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-
-  return (
-    <div className="sp-drop" ref={ref}>
-      <button
-        className={`sp-drop-btn${open ? " sp-drop-btn--open" : ""}`}
-        onClick={() => setOpen((v) => !v)}
-        type="button"
-      >
-        <span className="sp-drop-label">{label}</span>
-        <ChevronDown size={11} className="sp-drop-chevron" />
-      </button>
-      {open && (
-        <div className="sp-drop-menu">
-          {options.map((o) => (
-            <button
-              key={o.value}
-              type="button"
-              className={`sp-drop-item${o.value === value ? " sp-drop-item--active" : ""}`}
-              onClick={() => { onChange(o.value); setOpen(false); }}
-            >
-              {o.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── Terminal ────────────────────────────────────────────────────────────── */
-
-function TerminalSection() {
-  const s = useSettings();
-  return (
-    <div className="sp-section">
-      <div className="sp-section-heading">Terminal</div>
-      <p className="sp-section-desc">Customize how the embedded terminal looks and behaves.</p>
-      <div className="sp-rows">
-        <SettingRow label="Font size" hint="10 – 20 px">
-          <Stepper value={s.terminalFontSize} min={10} max={20}
-            onChange={(v) => updateSetting("terminalFontSize", v)} />
-        </SettingRow>
-        <SettingRow label="Font family">
-          <SpSelect
-            value={s.terminalFontFamily}
-            options={FONT_FAMILY_OPTIONS}
-            onChange={(v) => updateSetting("terminalFontFamily", v)}
-          />
-        </SettingRow>
-        <SettingRow label="Cursor style">
-          <Segmented
-            options={[
-              { value: "block", label: "Block" },
-              { value: "bar", label: "Bar" },
-              { value: "underline", label: "Line" },
-            ]}
-            value={s.terminalCursorStyle}
-            onChange={(v) => updateSetting("terminalCursorStyle", v as AppSettings["terminalCursorStyle"])}
-          />
-        </SettingRow>
-        <SettingRow label="Cursor blink">
-          <ToggleSwitch on={s.terminalCursorBlink}
-            onChange={(v) => updateSetting("terminalCursorBlink", v)} />
-        </SettingRow>
-        <SettingRow label="Scrollback" hint="Lines kept in history">
-          <input
-            className="sp-number-input"
-            type="number"
-            min={100} max={50000} step={100}
-            value={s.terminalScrollback}
-            onChange={(e) => {
-              const n = parseInt(e.target.value, 10);
-              if (!isNaN(n) && n >= 100 && n <= 50000) updateSetting("terminalScrollback", n);
-            }}
-          />
-        </SettingRow>
-      </div>
-    </div>
-  );
-}
-
-/* ── Git ─────────────────────────────────────────────────────────────────── */
-
-function GitSection() {
-  const s = useSettings();
-  return (
-    <div className="sp-section">
-      <div className="sp-section-heading">Git</div>
-      <p className="sp-section-desc">Configure how Tempest interacts with your repositories.</p>
-      <div className="sp-rows">
-        <SettingRow label="Branch prefix" hint="Prepended to new worktree branch names">
-          <input
-            className="sp-text-input"
-            type="text"
-            value={s.branchPrefix}
-            placeholder="e.g. feat-"
-            onChange={(e) => updateSetting("branchPrefix", e.target.value)}
-          />
-        </SettingRow>
-        <SettingRow label="Commit message" hint="Used when pushing agent changes">
-          <input
-            className="sp-text-input"
-            type="text"
-            value={s.commitMessageTemplate}
-            placeholder="Agent work"
-            onChange={(e) => updateSetting("commitMessageTemplate", e.target.value)}
-          />
-        </SettingRow>
-      </div>
-    </div>
-  );
-}
-
-/* ── Token Intelligence ──────────────────────────────────────────────────── */
-
-/* ── Security ────────────────────────────────────────────────────────────── */
-
-function SecuritySection() {
-  const s = useSettings();
-  return (
-    <div className="sp-section">
-      <div className="sp-section-heading">Security</div>
-
-      <div className="sp-rows">
-        <div className="sp-toggle-row" onClick={() => updateSetting("autoApprove", !s.autoApprove)}>
-          <div className="sp-toggle-text">
-            <span className="sp-toggle-label">Auto-approve agent tool calls</span>
-            <span className="sp-toggle-desc">
-              Pass each agent's skip-permissions flag at spawn so it never stops to ask
-              for confirmation. Supported agents: Claude Code, Gemini CLI, Codex CLI,
-              Antigravity. Applies to sessions started after this is enabled.
-            </span>
-          </div>
-          <button
-            className={`sp-toggle${s.autoApprove ? " sp-toggle--on" : ""}`}
-            onClick={(e) => { e.stopPropagation(); updateSetting("autoApprove", !s.autoApprove); }}
-            role="switch"
-            aria-checked={s.autoApprove}
-          >
-            <span className="sp-toggle-thumb" />
-          </button>
-        </div>
-
-        <div className="sp-toggle-row" onClick={() => updateSetting("isolateAgents", !s.isolateAgents)}>
-          <div className="sp-toggle-text">
-            <span className="sp-toggle-label">Isolate agent sessions</span>
-            <span className="sp-toggle-desc">
-              Wrap every new agent in a Hephaestus sandbox. On Windows, each agent
-              session runs inside a Job Object so its entire process tree is confined
-              and killed cleanly when the session closes. Network isolation arrives
-              with the Linux and macOS releases. Applies to sessions started after
-              this is enabled.
-            </span>
-          </div>
-          <button
-            className={`sp-toggle${s.isolateAgents ? " sp-toggle--on" : ""}`}
-            onClick={(e) => { e.stopPropagation(); updateSetting("isolateAgents", !s.isolateAgents); }}
-            role="switch"
-            aria-checked={s.isolateAgents}
-          >
-            <span className="sp-toggle-thumb" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── Token Intelligence ───────────────────────────────────────────────────── */
-
-function TokenIntelligenceSection() {
-  const s = useSettings();
-  return (
-    <div className="sp-section">
-      <div className="sp-section-heading">Token Intelligence</div>
-      <p className="sp-section-desc">
-        Atlas indexes your codebase locally and gives AI agents a pre-built semantic
-        code graph — reducing repeated file reads and cutting token usage. No data
-        leaves your machine.
-      </p>
-
-      <div className="sp-rows">
-        <div className="sp-toggle-row" onClick={() => updateSetting("atlasEnabled", !s.atlasEnabled)}>
-          <div className="sp-toggle-text">
-            <span className="sp-toggle-label">Enable Token Intelligence</span>
-            <span className="sp-toggle-desc">Off by default — entirely your choice.</span>
-          </div>
-          <button
-            className={`sp-toggle${s.atlasEnabled ? " sp-toggle--on" : ""}`}
-            onClick={(e) => { e.stopPropagation(); updateSetting("atlasEnabled", !s.atlasEnabled); }}
-            role="switch"
-            aria-checked={s.atlasEnabled}
-          >
-            <span className="sp-toggle-thumb" />
-          </button>
-        </div>
-
-        {s.atlasEnabled && (
-          <div className="sp-toggle-row sp-toggle-row--indent" onClick={() => updateSetting("atlasAutoIndex", !s.atlasAutoIndex)}>
-            <div className="sp-toggle-text">
-              <span className="sp-toggle-label">Auto-index new projects</span>
-              <span className="sp-toggle-desc">Skip the prompt and index every project automatically.</span>
-            </div>
-            <button
-              className={`sp-toggle${s.atlasAutoIndex ? " sp-toggle--on" : ""}`}
-              onClick={(e) => { e.stopPropagation(); updateSetting("atlasAutoIndex", !s.atlasAutoIndex); }}
-              role="switch"
-              aria-checked={s.atlasAutoIndex}
-            >
-              <span className="sp-toggle-thumb" />
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/* ── API Keys ────────────────────────────────────────────────────────────── */
-
-const CDN = "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@latest/icons/";
-
-const API_KEY_PROVIDERS = [
-  { id: "anthropic",  label: "Anthropic",  icon: "anthropic.svg",      invert: true,  local: false },
-  { id: "openai",     label: "OpenAI",     icon: "openai.svg",          invert: true,  local: false },
-  { id: "gemini",     label: "Gemini",     icon: "gemini-color.svg",    invert: false, local: false },
-  { id: "mistral",    label: "Mistral",    icon: "mistral-color.svg",   invert: false, local: false },
-  { id: "deepseek",   label: "DeepSeek",   icon: "deepseek-color.svg",  invert: false, local: false },
-  { id: "xai",        label: "xAI",        icon: "xai.svg",             invert: true,  local: false },
-  { id: "groq",       label: "Groq",       icon: "groq.svg",            invert: true,  local: false },
-  { id: "openrouter", label: "OpenRouter", icon: "openrouter.svg",      invert: true,  local: false },
-  { id: "ollama",     label: "Ollama",     icon: "ollama.svg",          invert: true,  local: true  },
-];
-
-function maskKey(key: string) {
-  if (key.length <= 8) return "••••••••";
-  return key.slice(0, 4) + "••••••••" + key.slice(-4);
-}
-
-function ApiKeysSection() {
-  const [keys, setKeys] = useState<Record<string, string>>(() => {
-    const out: Record<string, string> = {};
-    for (const p of API_KEY_PROVIDERS) {
-      const k = localStorage.getItem(`tempest-byok-key-${p.id}`);
-      if (k) out[p.id] = k;
-    }
-    return out;
-  });
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editValue, setEditValue] = useState("");
-  const [showId, setShowId] = useState<string | null>(null);
-  const [savedId, setSavedId] = useState<string | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (editingId) setTimeout(() => inputRef.current?.focus(), 0);
-  }, [editingId]);
-
-  function startEdit(id: string) {
-    setEditingId(id);
-    setEditValue(keys[id] ?? "");
-  }
-
-  function saveEdit(id: string) {
-    const v = editValue.trim();
-    if (v) {
-      localStorage.setItem(`tempest-byok-key-${id}`, v);
-      setKeys(prev => ({ ...prev, [id]: v }));
-      setSavedId(id);
-      setTimeout(() => setSavedId(null), 1500);
-    }
-    setEditingId(null);
-    setEditValue("");
-  }
-
-  function removeKey(id: string) {
-    localStorage.removeItem(`tempest-byok-key-${id}`);
-    setKeys(prev => { const n = { ...prev }; delete n[id]; return n; });
-  }
-
-  return (
-    <div className="sp-section">
-      <div className="sp-section-heading">API Keys</div>
-      <p className="sp-section-desc">
-        Keys are stored locally in your browser and never leave your device.
-        They power the Chat tab via your own provider accounts.
-      </p>
-
-      <div className="sp-apikeys-list">
-        {API_KEY_PROVIDERS.map((p) => {
-          const key = keys[p.id];
-          const isEditing = editingId === p.id;
-          const isSaved = savedId === p.id;
-          const isVisible = showId === p.id;
-
-          return (
-            <div key={p.id} className={`sp-apikey-row${isEditing ? " sp-apikey-row--editing" : ""}`}>
-              <div className="sp-apikey-provider">
-                <img
-                  src={CDN + p.icon}
-                  alt={p.label}
-                  width={16}
-                  height={16}
-                  className={p.invert ? "sp-apikey-logo-invert" : ""}
-                  style={{ objectFit: "contain", flexShrink: 0 }}
-                  onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none"; }}
-                />
-                <span className="sp-apikey-name">{p.label}</span>
-              </div>
-
-              <div className="sp-apikey-right">
-                {p.local ? (
-                  <span className="sp-apikey-local">Local · no key needed</span>
-                ) : isEditing ? (
-                  <div className="sp-apikey-edit">
-                    <input
-                      ref={inputRef}
-                      className="sp-apikey-input"
-                      type="text"
-                      value={editValue}
-                      placeholder="Paste API key…"
-                      onChange={(e) => setEditValue(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") { e.preventDefault(); saveEdit(p.id); }
-                        if (e.key === "Escape") { setEditingId(null); setEditValue(""); }
-                        e.stopPropagation();
-                      }}
-                    />
-                    <div className="sp-apikey-edit-actions">
-                      <button
-                        className="sp-apikey-btn sp-apikey-btn--primary"
-                        onClick={() => saveEdit(p.id)}
-                        disabled={!editValue.trim()}
-                      >
-                        Save
-                      </button>
-                      <button
-                        className="sp-apikey-btn"
-                        onClick={() => { setEditingId(null); setEditValue(""); }}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </div>
-                ) : key ? (
-                  <div className="sp-apikey-set">
-                    <span className="sp-apikey-mask">
-                      {isVisible ? key : maskKey(key)}
-                    </span>
-                    <Tooltip content={isVisible ? "Hide" : "Show"} placement="top">
-                      <button
-                        className="sp-apikey-icon-btn"
-                        onClick={() => setShowId(isVisible ? null : p.id)}
-                      >
-                        {isVisible ? <EyeOff size={13} /> : <Eye size={13} />}
-                      </button>
-                    </Tooltip>
-                    <Tooltip content={isSaved ? "Saved!" : "Edit"} placement="top">
-                      <button
-                        className={`sp-apikey-icon-btn${isSaved ? " sp-apikey-icon-btn--saved" : ""}`}
-                        onClick={() => startEdit(p.id)}
-                      >
-                        {isSaved ? <Check size={13} /> : <Pencil size={13} />}
-                      </button>
-                    </Tooltip>
-                    <Tooltip content="Remove" placement="top">
-                      <button
-                        className="sp-apikey-icon-btn sp-apikey-icon-btn--danger"
-                        onClick={() => removeKey(p.id)}
-                      >
-                        <Trash2 size={13} />
-                      </button>
-                    </Tooltip>
-                  </div>
-                ) : (
-                  <button className="sp-apikey-add-btn" onClick={() => startEdit(p.id)}>
-                    <Plus size={12} />
-                    Add key
-                  </button>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-/* ── Prompts ─────────────────────────────────────────────────────────────── */
-
-function PromptsSection() {
-  const prompts = usePrompts();
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editTitle, setEditTitle] = useState("");
-  const [editBody, setEditBody] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [newTitle, setNewTitle] = useState("");
-  const [newBody, setNewBody] = useState("");
-
-  const dragIdRef = useRef<string | null>(null);
-  const dropIdRef = useRef<string | null>(null);
-  const dropSideRef = useRef<"before" | "after">("before");
-  const [dropIndicator, setDropIndicator] = useState<{ id: string; side: "before" | "after" } | null>(null);
-
-  function startEdit(p: PromptEntry) {
-    setAdding(false);
-    setEditingId(p.id);
-    setEditTitle(p.title);
-    setEditBody(p.body);
-  }
-
-  function saveEdit() {
-    if (!editingId) return;
-    updatePrompt(editingId, { title: editTitle.trim() || "Untitled", body: editBody });
-    setEditingId(null);
-  }
-
-  function cancelEdit() {
-    setEditingId(null);
-  }
-
-  function submitNew() {
-    const t = newTitle.trim();
-    const b = newBody.trim();
-    if (!t || !b) return;
-    addPrompt(t, b);
-    setNewTitle("");
-    setNewBody("");
-    setAdding(false);
-  }
-
-  function cancelNew() {
-    setNewTitle("");
-    setNewBody("");
-    setAdding(false);
-  }
-
-  return (
-    <div className="sp-section">
-      <div className="sp-prompts-header">
-        <div>
-          <div className="sp-section-heading">Prompt Library</div>
-          <p className="sp-section-desc" style={{ marginBottom: 0 }}>
-            Saved prompts you can insert into the message queue with one click.
-          </p>
-        </div>
-        {!adding && (
-          <button
-            className="sp-prompts-new-btn"
-            onClick={() => { setEditingId(null); setAdding(true); }}
-          >
-            <Plus size={12} />
-            New
-          </button>
-        )}
-      </div>
-
-      {adding && (
-        <div className="sp-prompt-form sp-prompt-form--standalone">
-          <input
-            className="sp-prompt-form-title"
-            type="text"
-            placeholder="Prompt title"
-            value={newTitle}
-            onChange={(e) => setNewTitle(e.target.value)}
-            autoFocus
-          />
-          <textarea
-            className="sp-prompt-form-body"
-            placeholder="Prompt text sent to the agent…"
-            rows={4}
-            value={newBody}
-            onChange={(e) => setNewBody(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && e.ctrlKey) { e.preventDefault(); submitNew(); }
-              if (e.key === "Escape") { e.preventDefault(); cancelNew(); }
-              e.stopPropagation();
-            }}
-          />
-          <div className="sp-prompt-form-actions">
-            <button
-              className="sp-prompt-form-btn sp-prompt-form-btn--primary"
-              onClick={submitNew}
-              disabled={!newTitle.trim() || !newBody.trim()}
-            >
-              Add
-            </button>
-            <button className="sp-prompt-form-btn" onClick={cancelNew}>Cancel</button>
-          </div>
-        </div>
-      )}
-
-      <div className="sp-prompt-list">
-        {prompts.map((p) => {
-          const modified = isBuiltinModified(p);
-          const isEditing = editingId === p.id;
-          const isDragOver = dropIndicator?.id === p.id;
-
-          return (
-            <div
-              key={p.id}
-              className={[
-                "sp-prompt-item",
-                !p.enabled && "sp-prompt-item--disabled",
-                isDragOver && dropIndicator?.side === "before" && "sp-prompt-item--drop-before",
-                isDragOver && dropIndicator?.side === "after"  && "sp-prompt-item--drop-after",
-              ].filter(Boolean).join(" ")}
-              draggable={!isEditing}
-              onDragStart={(e) => {
-                dragIdRef.current = p.id;
-                e.dataTransfer.effectAllowed = "move";
-                e.dataTransfer.setData("text/plain", p.id);
-              }}
-              onDragEnd={() => {
-                dragIdRef.current = null;
-                dropIdRef.current = null;
-                setDropIndicator(null);
-              }}
-              onDragOver={(e) => {
-                e.preventDefault();
-                if (!dragIdRef.current || dragIdRef.current === p.id) return;
-                const rect = e.currentTarget.getBoundingClientRect();
-                const side: "before" | "after" = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
-                dropIdRef.current = p.id;
-                dropSideRef.current = side;
-                setDropIndicator({ id: p.id, side });
-              }}
-              onDrop={(e) => {
-                e.preventDefault();
-                const from = dragIdRef.current;
-                const to = dropIdRef.current;
-                const side = dropSideRef.current;
-                if (from && to && from !== to) reorderPrompts(from, to, side);
-                dragIdRef.current = null;
-                dropIdRef.current = null;
-                setDropIndicator(null);
-              }}
-            >
-              {isEditing ? (
-                <div className="sp-prompt-form">
-                  <input
-                    className="sp-prompt-form-title"
-                    type="text"
-                    value={editTitle}
-                    onChange={(e) => setEditTitle(e.target.value)}
-                    autoFocus
-                  />
-                  <textarea
-                    className="sp-prompt-form-body"
-                    rows={4}
-                    value={editBody}
-                    onChange={(e) => setEditBody(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" && e.ctrlKey) { e.preventDefault(); saveEdit(); }
-                      if (e.key === "Escape") { e.preventDefault(); cancelEdit(); }
-                      e.stopPropagation();
-                    }}
-                  />
-                  <div className="sp-prompt-form-actions">
-                    <button className="sp-prompt-form-btn sp-prompt-form-btn--primary" onClick={saveEdit}>
-                      Save
-                    </button>
-                    <button className="sp-prompt-form-btn" onClick={cancelEdit}>Cancel</button>
-                    {p.isBuiltin && modified && (
-                      <button
-                        className="sp-prompt-form-btn sp-prompt-form-btn--reset"
-                        onClick={() => { resetPrompt(p.id); setEditingId(null); }}
-                      >
-                        <RotateCcw size={11} />
-                        Reset to default
-                      </button>
-                    )}
-                  </div>
-                </div>
-              ) : (
-                <div className="sp-prompt-row">
-                  <span className="sp-prompt-grip" aria-hidden>
-                    <GripVertical size={13} />
-                  </span>
-                  <ToggleSwitch
-                    on={p.enabled}
-                    onChange={(v) => updatePrompt(p.id, { enabled: v })}
-                  />
-                  <div className="sp-prompt-info">
-                    <div className="sp-prompt-title-row">
-                      <span className="sp-prompt-title">{p.title}</span>
-                      {p.isBuiltin && <span className="sp-prompt-badge">built-in</span>}
-                      {modified && <span className="sp-prompt-badge sp-prompt-badge--modified">modified</span>}
-                    </div>
-                    <span className="sp-prompt-preview">
-                      {p.body.length > 72 ? p.body.slice(0, 72) + "…" : p.body}
-                    </span>
-                  </div>
-                  <div className="sp-prompt-actions">
-                    <Tooltip content="Edit" placement="top">
-                      <button className="sp-prompt-action-btn" onClick={() => startEdit(p)}>
-                        <Pencil size={12} />
-                      </button>
-                    </Tooltip>
-                    <Tooltip content="Clone" placement="top">
-                      <button className="sp-prompt-action-btn" onClick={() => clonePrompt(p.id)}>
-                        <Copy size={12} />
-                      </button>
-                    </Tooltip>
-                    {p.isBuiltin && modified && (
-                      <Tooltip content="Reset to default" placement="top">
-                        <button
-                          className="sp-prompt-action-btn"
-                          onClick={() => resetPrompt(p.id)}
-                        >
-                          <RotateCcw size={12} />
-                        </button>
-                      </Tooltip>
-                    )}
-                    {!p.isBuiltin && (
-                      <Tooltip content="Delete" placement="top">
-                        <button
-                          className="sp-prompt-action-btn sp-prompt-action-btn--danger"
-                          onClick={() => deletePrompt(p.id)}
-                        >
-                          <Trash2 size={12} />
-                        </button>
-                      </Tooltip>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-/* ── Keyboard ────────────────────────────────────────────────────────────── */
-
-function KeyboardSection() {
-  const bindings = useKeybindings();
-  const [capturing, setCapturing] = useState<ActionId | null>(null);
-  const overlayRef = useRef<HTMLDivElement>(null);
-
-  // Capture keydown while a row is in capture mode
-  useEffect(() => {
-    if (!capturing) return;
-    const handler = (e: KeyboardEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (e.key === "Escape") { setCapturing(null); return; }
-      const sc = shortcutFromEvent(e);
-      if (sc) { setBinding(capturing, sc); setCapturing(null); }
-    };
-    window.addEventListener("keydown", handler, true);
-    return () => window.removeEventListener("keydown", handler, true);
-  }, [capturing]);
-
-  // Group actions by group field
-  const groups = ACTION_DEFS.reduce<Record<string, typeof ACTION_DEFS>>((acc, def) => {
-    (acc[def.group] ??= []).push(def);
-    return acc;
-  }, {});
-
-  const hasCustom = ACTION_DEFS.some(
-    (d) => JSON.stringify(bindings[d.id]) !== JSON.stringify(DEFAULTS[d.id])
-  );
-
-  return (
-    <div className="sp-section sp-section--kb" ref={overlayRef}>
-      <div className="sp-kb-header-row">
-        <div>
-          <div className="sp-section-heading">Keybindings</div>
-          <p className="sp-section-desc">Click a binding to remap it. Press Escape to cancel.</p>
-        </div>
-        {hasCustom && (
-          <button className="sp-kb-reset-all" onClick={resetAllBindings}>
-            <RotateCcw size={12} />
-            Reset all
-          </button>
-        )}
-      </div>
-
-      {Object.entries(groups).map(([group, defs]) => (
-        <div key={group} className="sp-kb-group">
-          <div className="sp-kb-group-label">{group}</div>
-          {defs.map((def) => {
-            const sc = bindings[def.id];
-            const isDefault = JSON.stringify(sc) === JSON.stringify(DEFAULTS[def.id]);
-            const isCapturing = capturing === def.id;
-            return (
-              <div key={def.id} className="sp-kb-row">
-                <span className="sp-kb-action">{def.label}</span>
-                <div className="sp-kb-right">
-                  <button
-                    className={`sp-kb-binding${isCapturing ? " sp-kb-binding--capturing" : ""}`}
-                    onClick={() => setCapturing(isCapturing ? null : def.id)}
-                  >
-                    {isCapturing
-                      ? <span className="sp-kb-press-hint">Press shortcut…</span>
-                      : <ShortcutChips shortcut={sc} />
-                    }
-                  </button>
-                  {!isDefault && !isCapturing && (
-                    <Tooltip content="Reset to default" placement="top">
-                      <button
-                        className="sp-kb-reset-btn"
-                        onClick={(e) => { e.stopPropagation(); resetBinding(def.id); }}
-                      >
-                        <RotateCcw size={11} />
-                      </button>
-                    </Tooltip>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function ShortcutChips({ shortcut }: { shortcut: Shortcut | null }) {
-  if (!shortcut) return <span className="sp-kb-unset">—</span>;
-  const label = formatShortcut(shortcut);
-  return (
-    <span className="sp-kb-chips">
-      {label.split("+").map((part, i) => (
-        <span key={i} className="sp-kb-chip">{part}</span>
-      ))}
-    </span>
-  );
-}
-
-/* ── Attribution ─────────────────────────────────────────────────────────── */
-
-interface AttributionSectionProps {
-  onToggle?: (enabled: boolean) => void;
-}
-
-export function AttributionSection({ onToggle }: AttributionSectionProps) {
-  const enabled = useAttribution();
-
-  function toggle() {
-    const next = !enabled;
-    setAttribution(next);
-    onToggle?.(next);
-  }
-
-  return (
-    <div className="sp-section">
-      <div className="sp-section-heading">Tempest Co-authorship</div>
-      <p className="sp-section-desc">
-        Tempest is open source. This feature is one small way you can help it grow.
-      </p>
-      <p className="sp-section-desc">
-        When enabled, Tempest adds itself as a co-author on commits made inside your
-        workspaces. On GitHub, that means every commit shows Tempest next to your name —
-        a quiet signal to other developers that this project was built with the help of Tempest.
-        No data is collected and nothing is sent anywhere. It is purely a git trailer
-        line in the commit message, and you can turn it off at any time.
-      </p>
-
-      <div className="sp-toggle-row" onClick={toggle}>
-        <div className="sp-toggle-text">
-          <span className="sp-toggle-label">Add Tempest as co-author</span>
-          <span className="sp-toggle-desc">Off by default — entirely your choice.</span>
-        </div>
-        <button
-          className={`sp-toggle${enabled ? " sp-toggle--on" : ""}`}
-          onClick={(e) => { e.stopPropagation(); toggle(); }}
-          role="switch"
-          aria-checked={enabled}
-        >
-          <span className="sp-toggle-thumb" />
-        </button>
-      </div>
-
-      {enabled && (
-        <p className="sp-attribution-note">
-          Hook written to <code className="sp-code">.git/hooks/prepare-commit-msg</code> in
-          each open project. Disabling removes it automatically.
-        </p>
-      )}
-    </div>
-  );
-}
-
-/* ── About ───────────────────────────────────────────────────────────────── */
-
-function AboutSection() {
-  return (
-    <div className="sp-section">
-      <div className="sp-about-logo">
-        <Mark size={40} />
-      </div>
-      <div className="sp-section-heading">Tempest</div>
-      <p className="sp-section-desc">A focused workspace for agentic development.</p>
-      <div className="sp-about-rows">
-        <div className="sp-about-row">
-          <span className="sp-about-key">Version</span>
-          <span className="sp-about-val">0.1.0</span>
-        </div>
-        <div className="sp-about-row">
-          <span className="sp-about-key">Built with</span>
-          <span className="sp-about-val">Tauri · React · TypeScript</span>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/SettingsPanel/AboutSection.tsx b/src/components/SettingsPanel/AboutSection.tsx
new file mode 100644
index 0000000..62f5acf
--- /dev/null
+++ b/src/components/SettingsPanel/AboutSection.tsx
@@ -0,0 +1,23 @@
+import { Mark } from "../../assets/Mark";
+
+export function AboutSection() {
+  return (
+    <div className="sp-section">
+      <div className="sp-about-logo">
+        <Mark size={40} />
+      </div>
+      <div className="sp-section-heading">Tempest</div>
+      <p className="sp-section-desc">A focused workspace for agentic development.</p>
+      <div className="sp-about-rows">
+        <div className="sp-about-row">
+          <span className="sp-about-key">Version</span>
+          <span className="sp-about-val">0.1.0</span>
+        </div>
+        <div className="sp-about-row">
+          <span className="sp-about-key">Built with</span>
+          <span className="sp-about-val">Tauri · React · TypeScript</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SettingsPanel/ApiKeysSection.tsx b/src/components/SettingsPanel/ApiKeysSection.tsx
new file mode 100644
index 0000000..1d01726
--- /dev/null
+++ b/src/components/SettingsPanel/ApiKeysSection.tsx
@@ -0,0 +1,172 @@
+import { useEffect, useRef, useState } from "react";
+import { Pencil, Trash2, Plus, Eye, EyeOff, Check } from "lucide-react";
+import { Tooltip } from "../Tooltip";
+
+const CDN = "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@latest/icons/";
+
+const API_KEY_PROVIDERS = [
+  { id: "anthropic",  label: "Anthropic",  icon: "anthropic.svg",      invert: true,  local: false },
+  { id: "openai",     label: "OpenAI",     icon: "openai.svg",          invert: true,  local: false },
+  { id: "gemini",     label: "Gemini",     icon: "gemini-color.svg",    invert: false, local: false },
+  { id: "mistral",    label: "Mistral",    icon: "mistral-color.svg",   invert: false, local: false },
+  { id: "deepseek",   label: "DeepSeek",   icon: "deepseek-color.svg",  invert: false, local: false },
+  { id: "xai",        label: "xAI",        icon: "xai.svg",             invert: true,  local: false },
+  { id: "groq",       label: "Groq",       icon: "groq.svg",            invert: true,  local: false },
+  { id: "openrouter", label: "OpenRouter", icon: "openrouter.svg",      invert: true,  local: false },
+  { id: "ollama",     label: "Ollama",     icon: "ollama.svg",          invert: true,  local: true  },
+];
+
+function maskKey(key: string) {
+  if (key.length <= 8) return "••••••••";
+  return key.slice(0, 4) + "••••••••" + key.slice(-4);
+}
+
+export function ApiKeysSection() {
+  const [keys, setKeys] = useState<Record<string, string>>(() => {
+    const out: Record<string, string> = {};
+    for (const p of API_KEY_PROVIDERS) {
+      const k = localStorage.getItem(`tempest-byok-key-${p.id}`);
+      if (k) out[p.id] = k;
+    }
+    return out;
+  });
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState("");
+  const [showId, setShowId] = useState<string | null>(null);
+  const [savedId, setSavedId] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editingId) setTimeout(() => inputRef.current?.focus(), 0);
+  }, [editingId]);
+
+  function startEdit(id: string) {
+    setEditingId(id);
+    setEditValue(keys[id] ?? "");
+  }
+
+  function saveEdit(id: string) {
+    const v = editValue.trim();
+    if (v) {
+      localStorage.setItem(`tempest-byok-key-${id}`, v);
+      setKeys(prev => ({ ...prev, [id]: v }));
+      setSavedId(id);
+      setTimeout(() => setSavedId(null), 1500);
+    }
+    setEditingId(null);
+    setEditValue("");
+  }
+
+  function removeKey(id: string) {
+    localStorage.removeItem(`tempest-byok-key-${id}`);
+    setKeys(prev => { const n = { ...prev }; delete n[id]; return n; });
+  }
+
+  return (
+    <div className="sp-section">
+      <div className="sp-section-heading">API Keys</div>
+      <p className="sp-section-desc">
+        Keys are stored locally in your browser and never leave your device.
+        They power the Chat tab via your own provider accounts.
+      </p>
+
+      <div className="sp-apikeys-list">
+        {API_KEY_PROVIDERS.map((p) => {
+          const key = keys[p.id];
+          const isEditing = editingId === p.id;
+          const isSaved = savedId === p.id;
+          const isVisible = showId === p.id;
+
+          return (
+            <div key={p.id} className={`sp-apikey-row${isEditing ? " sp-apikey-row--editing" : ""}`}>
+              <div className="sp-apikey-provider">
+                <img
+                  src={CDN + p.icon}
+                  alt={p.label}
+                  width={16}
+                  height={16}
+                  className={p.invert ? "sp-apikey-logo-invert" : ""}
+                  style={{ objectFit: "contain", flexShrink: 0 }}
+                  onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none"; }}
+                />
+                <span className="sp-apikey-name">{p.label}</span>
+              </div>
+
+              <div className="sp-apikey-right">
+                {p.local ? (
+                  <span className="sp-apikey-local">Local · no key needed</span>
+                ) : isEditing ? (
+                  <div className="sp-apikey-edit">
+                    <input
+                      ref={inputRef}
+                      className="sp-apikey-input"
+                      type="text"
+                      value={editValue}
+                      placeholder="Paste API key…"
+                      onChange={(e) => setEditValue(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") { e.preventDefault(); saveEdit(p.id); }
+                        if (e.key === "Escape") { setEditingId(null); setEditValue(""); }
+                        e.stopPropagation();
+                      }}
+                    />
+                    <div className="sp-apikey-edit-actions">
+                      <button
+                        className="sp-apikey-btn sp-apikey-btn--primary"
+                        onClick={() => saveEdit(p.id)}
+                        disabled={!editValue.trim()}
+                      >
+                        Save
+                      </button>
+                      <button
+                        className="sp-apikey-btn"
+                        onClick={() => { setEditingId(null); setEditValue(""); }}
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                ) : key ? (
+                  <div className="sp-apikey-set">
+                    <span className="sp-apikey-mask">
+                      {isVisible ? key : maskKey(key)}
+                    </span>
+                    <Tooltip content={isVisible ? "Hide" : "Show"} placement="top">
+                      <button
+                        className="sp-apikey-icon-btn"
+                        onClick={() => setShowId(isVisible ? null : p.id)}
+                      >
+                        {isVisible ? <EyeOff size={13} /> : <Eye size={13} />}
+                      </button>
+                    </Tooltip>
+                    <Tooltip content={isSaved ? "Saved!" : "Edit"} placement="top">
+                      <button
+                        className={`sp-apikey-icon-btn${isSaved ? " sp-apikey-icon-btn--saved" : ""}`}
+                        onClick={() => startEdit(p.id)}
+                      >
+                        {isSaved ? <Check size={13} /> : <Pencil size={13} />}
+                      </button>
+                    </Tooltip>
+                    <Tooltip content="Remove" placement="top">
+                      <button
+                        className="sp-apikey-icon-btn sp-apikey-icon-btn--danger"
+                        onClick={() => removeKey(p.id)}
+                      >
+                        <Trash2 size={13} />
+                      </button>
+                    </Tooltip>
+                  </div>
+                ) : (
+                  <button className="sp-apikey-add-btn" onClick={() => startEdit(p.id)}>
+                    <Plus size={12} />
+                    Add key
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SettingsPanel/AppearanceSection.tsx b/src/components/SettingsPanel/AppearanceSection.tsx
new file mode 100644
index 0000000..9317bca
--- /dev/null
+++ b/src/components/SettingsPanel/AppearanceSection.tsx
@@ -0,0 +1,69 @@
+import { useSettings, updateSetting } from "../../store/appSettings";
+import type { Theme } from "../../themes/types";
+import { SettingRow } from "../ui/SettingRow";
+import { Stepper } from "../ui/Stepper";
+
+export function AppearanceSection({
+  themes,
+  activeTheme,
+  onThemeChange,
+}: {
+  themes: Theme[];
+  activeTheme: Theme;
+  onThemeChange: (t: Theme) => void;
+}) {
+  const s = useSettings();
+  return (
+    <div className="sp-section">
+      <div className="sp-section-heading">Theme</div>
+      <p className="sp-section-desc">Choose a color theme for the editor and UI.</p>
+      <div className="sp-theme-grid">
+        {themes.map((t) => (
+          <button
+            key={t.name}
+            className={`sp-theme-card${t.name === activeTheme.name ? " sp-theme-card--active" : ""}`}
+            onClick={() => onThemeChange(t)}
+          >
+            <ThemePreview theme={t} />
+            <span className="sp-theme-name">{t.name}</span>
+          </button>
+        ))}
+      </div>
+
+      <div className="sp-section-heading" style={{ marginTop: 24 }}>Interface</div>
+      <p className="sp-section-desc">Adjust sidebar text sizing.</p>
+      <div className="sp-rows">
+        <SettingRow label="Sidebar font size" hint="12 – 18 px">
+          <Stepper value={s.sidebarFontSize} min={12} max={18}
+            onChange={(v) => updateSetting("sidebarFontSize", v)} />
+        </SettingRow>
+      </div>
+    </div>
+  );
+}
+
+function ThemePreview({ theme }: { theme: Theme }) {
+  const bg      = theme.colors["bg.editor"]      ?? "#0a0a0a";
+  const sidebar = theme.colors["bg.sidebar"]     ?? "#000000";
+  const accent  = theme.colors["accent.blue"]    ?? "#62a6ff";
+  const fg      = theme.colors["fg.default"]     ?? "#ededed";
+  const fgMuted = theme.colors["fg.muted"]       ?? "#a1a1a1";
+  const border  = theme.colors["border.default"] ?? "#242424";
+  const green   = theme.colors["accent.green"]   ?? "#58c760";
+
+  return (
+    <div className="sp-theme-preview" style={{ background: bg, borderColor: border }}>
+      <div className="sp-theme-preview-sidebar" style={{ background: sidebar, borderRightColor: border }}>
+        <div className="sp-theme-preview-dot" style={{ background: fgMuted, opacity: 0.55 }} />
+        <div className="sp-theme-preview-dot" style={{ background: fgMuted, opacity: 0.3  }} />
+        <div className="sp-theme-preview-dot" style={{ background: fgMuted, opacity: 0.3  }} />
+      </div>
+      <div className="sp-theme-preview-content">
+        <div className="sp-theme-preview-line" style={{ background: fg,      width: "65%", opacity: 0.55 }} />
+        <div className="sp-theme-preview-line" style={{ background: accent,  width: "42%", opacity: 0.75 }} />
+        <div className="sp-theme-preview-line" style={{ background: green,   width: "50%", opacity: 0.55 }} />
+        <div className="sp-theme-preview-line" style={{ background: fgMuted, width: "35%", opacity: 0.3  }} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SettingsPanel/AttributionSection.tsx b/src/components/SettingsPanel/AttributionSection.tsx
new file mode 100644
index 0000000..38e87f1
--- /dev/null
+++ b/src/components/SettingsPanel/AttributionSection.tsx
@@ -0,0 +1,53 @@
+import { useAttribution, setAttribution } from "../../store/attribution";
+
+interface AttributionSectionProps {
+  onToggle?: (enabled: boolean) => void;
+}
+
+export function AttributionSection({ onToggle }: AttributionSectionProps) {
+  const enabled = useAttribution();
+
+  function toggle() {
+    const next = !enabled;
+    setAttribution(next);
+    onToggle?.(next);
+  }
+
+  return (
+    <div className="sp-section">
+      <div className="sp-section-heading">Tempest Co-authorship</div>
+      <p className="sp-section-desc">
+        Tempest is open source. This feature is one small way you can help it grow.
+      </p>
+      <p className="sp-section-desc">
+        When enabled, Tempest adds itself as a co-author on commits made inside your
+        workspaces. On GitHub, that means every commit shows Tempest next to your name —
+        a quiet signal to other developers that this project was built with the help of Tempest.
+        No data is collected and nothing is sent anywhere. It is purely a git trailer
+        line in the commit message, and you can turn it off at any time.
+      </p>
+
+      <div className="sp-toggle-row" onClick={toggle}>
+        <div className="sp-toggle-text">
+          <span className="sp-toggle-label">Add Tempest as co-author</span>
+          <span className="sp-toggle-desc">Off by default — entirely your choice.</span>
+        </div>
+        <button
+          className={`sp-toggle${enabled ? " sp-toggle--on" : ""}`}
+          onClick={(e) => { e.stopPropagation(); toggle(); }}
+          role="switch"
+          aria-checked={enabled}
+        >
+          <span className="sp-toggle-thumb" />
+        </button>
+      </div>
+
+      {enabled && (
+        <p className="sp-attribution-note">
+          Hook written to <code className="sp-code">.git/hooks/prepare-commit-msg</code> in
+          each open project. Disabling removes it automatically.
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/SettingsPanel/GitSection.tsx b/src/components/SettingsPanel/GitSection.tsx
new file mode 100644
index 0000000..4925238
--- /dev/null
+++ b/src/components/SettingsPanel/GitSection.tsx
@@ -0,0 +1,32 @@
+import { useSettings, updateSetting } from "../../store/appSettings";
+import { SettingRow } from "../ui/SettingRow";
+
+export function GitSection() {
+  const s = useSettings();
+  return (
+    <div className="sp-section">
+      <div className="sp-section-heading">Git</div>
+      <p className="sp-section-desc">Configure how Tempest interacts with your repositories.</p>
+      <div className="sp-rows">
+        <SettingRow label="Branch prefix" hint="Prepended to new worktree branch names">
+          <input
+            className="sp-text-input"
+            type="text"
+            value={s.branchPrefix}
+            placeholder="e.g. feat-"
+            onChange={(e) => updateSetting("branchPrefix", e.target.value)}
+          />
+        </SettingRow>
+        <SettingRow label="Commit message" hint="Used when pushing agent changes">
+          <input
+            className="sp-text-input"
+            type="text"
+            value={s.commitMessageTemplate}
+            placeholder="Agent work"
+            onChange={(e) => updateSetting("commitMessageTemplate", e.target.value)}
+          />
+        </SettingRow>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SettingsPanel/KeyboardSection.tsx b/src/components/SettingsPanel/KeyboardSection.tsx
new file mode 100644
index 0000000..7a6a9ee
--- /dev/null
+++ b/src/components/SettingsPanel/KeyboardSection.tsx
@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from "react";
+import { RotateCcw } from "lucide-react";
+import { Tooltip } from "../Tooltip";
+import {
+  ACTION_DEFS,
+  DEFAULTS,
+  useKeybindings,
+  setBinding,
+  resetBinding,
+  resetAllBindings,
+  formatShortcut,
+  shortcutFromEvent,
+  type ActionId,
+  type Shortcut,
+} from "../../store/keybindings";
+
+export function KeyboardSection() {
+  const bindings = useKeybindings();
+  const [capturing, setCapturing] = useState<ActionId | null>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!capturing) return;
+    const handler = (e: KeyboardEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.key === "Escape") { setCapturing(null); return; }
+      const sc = shortcutFromEvent(e);
+      if (sc) { setBinding(capturing, sc); setCapturing(null); }
+    };
+    window.addEventListener("keydown", handler, true);
+    return () => window.removeEventListener("keydown", handler, true);
+  }, [capturing]);
+
+  const groups = ACTION_DEFS.reduce<Record<string, typeof ACTION_DEFS>>((acc, def) => {
+    (acc[def.group] ??= []).push(def);
+    return acc;
+  }, {});
+
+  const hasCustom = ACTION_DEFS.some(
+    (d) => JSON.stringify(bindings[d.id]) !== JSON.stringify(DEFAULTS[d.id])
+  );
+
+  return (
+    <div className="sp-section sp-section--kb" ref={overlayRef}>
+      <div className="sp-kb-header-row">
+        <div>
+          <div className="sp-section-heading">Keybindings</div>
+          <p className="sp-section-desc">Click a binding to remap it. Press Escape to cancel.</p>
+        </div>
+        {hasCustom && (
+          <button className="sp-kb-reset-all" onClick={resetAllBindings}>
+            <RotateCcw size={12} />
+            Reset all
+          </button>
+        )}
+      </div>
+
+      {Object.entries(groups).map(([group, defs]) => (
+        <div key={group} className="sp-kb-group">
+          <div className="sp-kb-group-label">{group}</div>
+          {defs.map((def) => {
+            const sc = bindings[def.id];
+            const isDefault = JSON.stringify(sc) === JSON.stringify(DEFAULTS[def.id]);
+            const isCapturing = capturing === def.id;
+            return (
+              <div key={def.id} className="sp-kb-row">
+                <span className="sp-kb-action">{def.label}</span>
+                <div className="sp-kb-right">
+                  <button
+                    className={`sp-kb-binding${isCapturing ? " sp-kb-binding--capturing" : ""}`}
+                    onClick={() => setCapturing(isCapturing ? null : def.id)}
+                  >
+                    {isCapturing
+                      ? <span className="sp-kb-press-hint">Press shortcut…</span>
+                      : <ShortcutChips shortcut={sc} />
+                    }
+                  </button>
+                  {!isDefault && !isCapturing && (
+                    <Tooltip content="Reset to default" placement="top">
+                      <button
+                        className="sp-kb-reset-btn"
+                        onClick={(e) => { e.stopPropagation(); resetBinding(def.id); }}
+                      >
+                        <RotateCcw size={11} />
+                      </button>
+                    </Tooltip>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ShortcutChips({ shortcut }: { shortcut: Shortcut | null }) {
+  if (!shortcut) return <span className="sp-kb-unset">—</span>;
+  const label = formatShortcut(shortcut);
+  return (
+    <span className="sp-kb-chips">
+      {label.split("+").map((part, i) => (
+        <span key={i} className="sp-kb-chip">{part}</span>
+      ))}
+    </span>
+  );
+}
diff --git a/src/components/SettingsPanel/PromptsSection.tsx b/src/components/SettingsPanel/PromptsSection.tsx
new file mode 100644
index 0000000..0c6d3ec
--- /dev/null
+++ b/src/components/SettingsPanel/PromptsSection.tsx
@@ -0,0 +1,260 @@
+import { useRef, useState } from "react";
+import { RotateCcw, GripVertical, Pencil, Copy, Trash2, Plus } from "lucide-react";
+import { Tooltip } from "../Tooltip";
+import { ToggleSwitch } from "../ui/ToggleSwitch";
+import {
+  usePrompts,
+  updatePrompt,
+  deletePrompt,
+  resetPrompt,
+  clonePrompt,
+  addPrompt,
+  reorderPrompts,
+  isBuiltinModified,
+  type PromptEntry,
+} from "../../store/prompts";
+
+export function PromptsSection() {
+  const prompts = usePrompts();
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editTitle, setEditTitle] = useState("");
+  const [editBody, setEditBody] = useState("");
+  const [adding, setAdding] = useState(false);
+  const [newTitle, setNewTitle] = useState("");
+  const [newBody, setNewBody] = useState("");
+
+  const dragIdRef = useRef<string | null>(null);
+  const dropIdRef = useRef<string | null>(null);
+  const dropSideRef = useRef<"before" | "after">("before");
+  const [dropIndicator, setDropIndicator] = useState<{ id: string; side: "before" | "after" } | null>(null);
+
+  function startEdit(p: PromptEntry) {
+    setAdding(false);
+    setEditingId(p.id);
+    setEditTitle(p.title);
+    setEditBody(p.body);
+  }
+
+  function saveEdit() {
+    if (!editingId) return;
+    updatePrompt(editingId, { title: editTitle.trim() || "Untitled", body: editBody });
+    setEditingId(null);
+  }
+
+  function cancelEdit() {
+    setEditingId(null);
+  }
+
+  function submitNew() {
+    const t = newTitle.trim();
+    const b = newBody.trim();
+    if (!t || !b) return;
+    addPrompt(t, b);
+    setNewTitle("");
+    setNewBody("");
+    setAdding(false);
+  }
+
+  function cancelNew() {
+    setNewTitle("");
+    setNewBody("");
+    setAdding(false);
+  }
+
+  return (
+    <div className="sp-section">
+      <div className="sp-prompts-header">
+        <div>
+          <div className="sp-section-heading">Prompt Library</div>
+          <p className="sp-section-desc" style={{ marginBottom: 0 }}>
+            Saved prompts you can insert into the message queue with one click.
+          </p>
+        </div>
+        {!adding && (
+          <button
+            className="sp-prompts-new-btn"
+            onClick={() => { setEditingId(null); setAdding(true); }}
+          >
+            <Plus size={12} />
+            New
+          </button>
+        )}
+      </div>
+
+      {adding && (
+        <div className="sp-prompt-form sp-prompt-form--standalone">
+          <input
+            className="sp-prompt-form-title"
+            type="text"
+            placeholder="Prompt title"
+            value={newTitle}
+            onChange={(e) => setNewTitle(e.target.value)}
+            autoFocus
+          />
+          <textarea
+            className="sp-prompt-form-body"
+            placeholder="Prompt text sent to the agent…"
+            rows={4}
+            value={newBody}
+            onChange={(e) => setNewBody(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && e.ctrlKey) { e.preventDefault(); submitNew(); }
+              if (e.key === "Escape") { e.preventDefault(); cancelNew(); }
+              e.stopPropagation();
+            }}
+          />
+          <div className="sp-prompt-form-actions">
+            <button
+              className="sp-prompt-form-btn sp-prompt-form-btn--primary"
+              onClick={submitNew}
+              disabled={!newTitle.trim() || !newBody.trim()}
+            >
+              Add
+            </button>
+            <button className="sp-prompt-form-btn" onClick={cancelNew}>Cancel</button>
+          </div>
+        </div>
+      )}
+
+      <div className="sp-prompt-list">
+        {prompts.map((p) => {
+          const modified = isBuiltinModified(p);
+          const isEditing = editingId === p.id;
+          const isDragOver = dropIndicator?.id === p.id;
+
+          return (
+            <div
+              key={p.id}
+              className={[
+                "sp-prompt-item",
+                !p.enabled && "sp-prompt-item--disabled",
+                isDragOver && dropIndicator?.side === "before" && "sp-prompt-item--drop-before",
+                isDragOver && dropIndicator?.side === "after"  && "sp-prompt-item--drop-after",
+              ].filter(Boolean).join(" ")}
+              draggable={!isEditing}
+              onDragStart={(e) => {
+                dragIdRef.current = p.id;
+                e.dataTransfer.effectAllowed = "move";
+                e.dataTransfer.setData("text/plain", p.id);
+              }}
+              onDragEnd={() => {
+                dragIdRef.current = null;
+                dropIdRef.current = null;
+                setDropIndicator(null);
+              }}
+              onDragOver={(e) => {
+                e.preventDefault();
+                if (!dragIdRef.current || dragIdRef.current === p.id) return;
+                const rect = e.currentTarget.getBoundingClientRect();
+                const side: "before" | "after" = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
+                dropIdRef.current = p.id;
+                dropSideRef.current = side;
+                setDropIndicator({ id: p.id, side });
+              }}
+              onDrop={(e) => {
+                e.preventDefault();
+                const from = dragIdRef.current;
+                const to = dropIdRef.current;
+                const side = dropSideRef.current;
+                if (from && to && from !== to) reorderPrompts(from, to, side);
+                dragIdRef.current = null;
+                dropIdRef.current = null;
+                setDropIndicator(null);
+              }}
+            >
+              {isEditing ? (
+                <div className="sp-prompt-form">
+                  <input
+                    className="sp-prompt-form-title"
+                    type="text"
+                    value={editTitle}
+                    onChange={(e) => setEditTitle(e.target.value)}
+                    autoFocus
+                  />
+                  <textarea
+                    className="sp-prompt-form-body"
+                    rows={4}
+                    value={editBody}
+                    onChange={(e) => setEditBody(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && e.ctrlKey) { e.preventDefault(); saveEdit(); }
+                      if (e.key === "Escape") { e.preventDefault(); cancelEdit(); }
+                      e.stopPropagation();
+                    }}
+                  />
+                  <div className="sp-prompt-form-actions">
+                    <button className="sp-prompt-form-btn sp-prompt-form-btn--primary" onClick={saveEdit}>
+                      Save
+                    </button>
+                    <button className="sp-prompt-form-btn" onClick={cancelEdit}>Cancel</button>
+                    {p.isBuiltin && modified && (
+                      <button
+                        className="sp-prompt-form-btn sp-prompt-form-btn--reset"
+                        onClick={() => { resetPrompt(p.id); setEditingId(null); }}
+                      >
+                        <RotateCcw size={11} />
+                        Reset to default
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <div className="sp-prompt-row">
+                  <span className="sp-prompt-grip" aria-hidden>
+                    <GripVertical size={13} />
+                  </span>
+                  <ToggleSwitch
+                    on={p.enabled}
+                    onChange={(v) => updatePrompt(p.id, { enabled: v })}
+                  />
+                  <div className="sp-prompt-info">
+                    <div className="sp-prompt-title-row">
+                      <span className="sp-prompt-title">{p.title}</span>
+                      {p.isBuiltin && <span className="sp-prompt-badge">built-in</span>}
+                      {modified && <span className="sp-prompt-badge sp-prompt-badge--modified">modified</span>}
+                    </div>
+                    <span className="sp-prompt-preview">
+                      {p.body.length > 72 ? p.body.slice(0, 72) + "…" : p.body}
+                    </span>
+                  </div>
+                  <div className="sp-prompt-actions">
+                    <Tooltip content="Edit" placement="top">
+                      <button className="sp-prompt-action-btn" onClick={() => startEdit(p)}>
+                        <Pencil size={12} />
+                      </button>
+                    </Tooltip>
+                    <Tooltip content="Clone" placement="top">
+                      <button className="sp-prompt-action-btn" onClick={() => clonePrompt(p.id)}>
+                        <Copy size={12} />
+                      </button>
+                    </Tooltip>
+                    {p.isBuiltin && modified && (
+                      <Tooltip content="Reset to default" placement="top">
+                        <button
+                          className="sp-prompt-action-btn"
+                          onClick={() => resetPrompt(p.id)}
+                        >
+                          <RotateCcw size={12} />
+                        </button>
+                      </Tooltip>
+                    )}
+                    {!p.isBuiltin && (
+                      <Tooltip content="Delete" placement="top">
+                        <button
+                          className="sp-prompt-action-btn sp-prompt-action-btn--danger"
+                          onClick={() => deletePrompt(p.id)}
+                        >
+                          <Trash2 size={12} />
+                        </button>
+                      </Tooltip>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SettingsPanel/SecuritySection.tsx b/src/components/SettingsPanel/SecuritySection.tsx
new file mode 100644
index 0000000..45646ad
--- /dev/null
+++ b/src/components/SettingsPanel/SecuritySection.tsx
@@ -0,0 +1,52 @@
+import { useSettings, updateSetting } from "../../store/appSettings";
+
+export function SecuritySection() {
+  const s = useSettings();
+  return (
+    <div className="sp-section">
+      <div className="sp-section-heading">Security</div>
+
+      <div className="sp-rows">
+        <div className="sp-toggle-row" onClick={() => updateSetting("autoApprove", !s.autoApprove)}>
+          <div className="sp-toggle-text">
+            <span className="sp-toggle-label">Auto-approve agent tool calls</span>
+            <span className="sp-toggle-desc">
+              Pass each agent's skip-permissions flag at spawn so it never stops to ask
+              for confirmation. Supported agents: Claude Code, Gemini CLI, Codex CLI,
+              Antigravity. Applies to sessions started after this is enabled.
+            </span>
+          </div>
+          <button
+            className={`sp-toggle${s.autoApprove ? " sp-toggle--on" : ""}`}
+            onClick={(e) => { e.stopPropagation(); updateSetting("autoApprove", !s.autoApprove); }}
+            role="switch"
+            aria-checked={s.autoApprove}
+          >
+            <span className="sp-toggle-thumb" />
+          </button>
+        </div>
+
+        <div className="sp-toggle-row" onClick={() => updateSetting("isolateAgents", !s.isolateAgents)}>
+          <div className="sp-toggle-text">
+            <span className="sp-toggle-label">Isolate agent sessions</span>
+            <span className="sp-toggle-desc">
+              Wrap every new agent in a Hephaestus sandbox. On Windows, each agent
+              session runs inside a Job Object so its entire process tree is confined
+              and killed cleanly when the session closes. Network isolation arrives
+              with the Linux and macOS releases. Applies to sessions started after
+              this is enabled.
+            </span>
+          </div>
+          <button
+            className={`sp-toggle${s.isolateAgents ? " sp-toggle--on" : ""}`}
+            onClick={(e) => { e.stopPropagation(); updateSetting("isolateAgents", !s.isolateAgents); }}
+            role="switch"
+            aria-checked={s.isolateAgents}
+          >
+            <span className="sp-toggle-thumb" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SettingsPanel/TerminalSection.tsx b/src/components/SettingsPanel/TerminalSection.tsx
new file mode 100644
index 0000000..d06db21
--- /dev/null
+++ b/src/components/SettingsPanel/TerminalSection.tsx
@@ -0,0 +1,56 @@
+import { useSettings, updateSetting, FONT_FAMILY_OPTIONS, type AppSettings } from "../../store/appSettings";
+import { SettingRow } from "../ui/SettingRow";
+import { Stepper } from "../ui/Stepper";
+import { Segmented } from "../ui/Segmented";
+import { ToggleSwitch } from "../ui/ToggleSwitch";
+import { SpSelect } from "../ui/SpSelect";
+
+export function TerminalSection() {
+  const s = useSettings();
+  return (
+    <div className="sp-section">
+      <div className="sp-section-heading">Terminal</div>
+      <p className="sp-section-desc">Customize how the embedded terminal looks and behaves.</p>
+      <div className="sp-rows">
+        <SettingRow label="Font size" hint="10 – 20 px">
+          <Stepper value={s.terminalFontSize} min={10} max={20}
+            onChange={(v) => updateSetting("terminalFontSize", v)} />
+        </SettingRow>
+        <SettingRow label="Font family">
+          <SpSelect
+            value={s.terminalFontFamily}
+            options={FONT_FAMILY_OPTIONS}
+            onChange={(v) => updateSetting("terminalFontFamily", v)}
+          />
+        </SettingRow>
+        <SettingRow label="Cursor style">
+          <Segmented
+            options={[
+              { value: "block", label: "Block" },
+              { value: "bar", label: "Bar" },
+              { value: "underline", label: "Line" },
+            ]}
+            value={s.terminalCursorStyle}
+            onChange={(v) => updateSetting("terminalCursorStyle", v as AppSettings["terminalCursorStyle"])}
+          />
+        </SettingRow>
+        <SettingRow label="Cursor blink">
+          <ToggleSwitch on={s.terminalCursorBlink}
+            onChange={(v) => updateSetting("terminalCursorBlink", v)} />
+        </SettingRow>
+        <SettingRow label="Scrollback" hint="Lines kept in history">
+          <input
+            className="sp-number-input"
+            type="number"
+            min={100} max={50000} step={100}
+            value={s.terminalScrollback}
+            onChange={(e) => {
+              const n = parseInt(e.target.value, 10);
+              if (!isNaN(n) && n >= 100 && n <= 50000) updateSetting("terminalScrollback", n);
+            }}
+          />
+        </SettingRow>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SettingsPanel/TokenIntelligenceSection.tsx b/src/components/SettingsPanel/TokenIntelligenceSection.tsx
new file mode 100644
index 0000000..4324f49
--- /dev/null
+++ b/src/components/SettingsPanel/TokenIntelligenceSection.tsx
@@ -0,0 +1,49 @@
+import { useSettings, updateSetting } from "../../store/appSettings";
+
+export function TokenIntelligenceSection() {
+  const s = useSettings();
+  return (
+    <div className="sp-section">
+      <div className="sp-section-heading">Token Intelligence</div>
+      <p className="sp-section-desc">
+        Atlas indexes your codebase locally and gives AI agents a pre-built semantic
+        code graph — reducing repeated file reads and cutting token usage. No data
+        leaves your machine.
+      </p>
+
+      <div className="sp-rows">
+        <div className="sp-toggle-row" onClick={() => updateSetting("atlasEnabled", !s.atlasEnabled)}>
+          <div className="sp-toggle-text">
+            <span className="sp-toggle-label">Enable Token Intelligence</span>
+            <span className="sp-toggle-desc">Off by default — entirely your choice.</span>
+          </div>
+          <button
+            className={`sp-toggle${s.atlasEnabled ? " sp-toggle--on" : ""}`}
+            onClick={(e) => { e.stopPropagation(); updateSetting("atlasEnabled", !s.atlasEnabled); }}
+            role="switch"
+            aria-checked={s.atlasEnabled}
+          >
+            <span className="sp-toggle-thumb" />
+          </button>
+        </div>
+
+        {s.atlasEnabled && (
+          <div className="sp-toggle-row sp-toggle-row--indent" onClick={() => updateSetting("atlasAutoIndex", !s.atlasAutoIndex)}>
+            <div className="sp-toggle-text">
+              <span className="sp-toggle-label">Auto-index new projects</span>
+              <span className="sp-toggle-desc">Skip the prompt and index every project automatically.</span>
+            </div>
+            <button
+              className={`sp-toggle${s.atlasAutoIndex ? " sp-toggle--on" : ""}`}
+              onClick={(e) => { e.stopPropagation(); updateSetting("atlasAutoIndex", !s.atlasAutoIndex); }}
+              role="switch"
+              aria-checked={s.atlasAutoIndex}
+            >
+              <span className="sp-toggle-thumb" />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/WorkspaceView.tsx b/src/components/WorkspaceView.tsx
index 50517f1..c33410d 100644
--- a/src/components/WorkspaceView.tsx
+++ b/src/components/WorkspaceView.tsx
@@ -7,8 +7,16 @@ import { openUrl } from "@tauri-apps/plugin-opener";
 import { createWorktree, gitInit, NotAGitRepoError } from "../lib/worktree";
 import { addRecent, getRecents, removeRecent } from "../store/recents";
 import { getOpenProjects, saveOpenProjects } from "../store/openProjects";
-import { getWorktreeSession, saveWorktreeSession, removeWorktreeSession, markWorktreeSessionClosed, markWorktreeSessionOpen, pruneOrphanedSessions, dedupeRootSessions, rootSessionKey, rootSessionIdFromKey, getRootSessionsForProject, subSessionKey, subSessionIdFromKey, getSubSessionsForWorktree, type WorktreeSession } from "../store/sessions";
+import { getWorktreeSession, saveWorktreeSession, removeWorktreeSession, markWorktreeSessionClosed, markWorktreeSessionOpen, pruneOrphanedSessions, dedupeRootSessions, rootSessionKey, rootSessionIdFromKey, getRootSessionsForProject, subSessionKey, subSessionIdFromKey, getSubSessionsForWorktree, termSessionKey, termSessionIdFromKey, getTermSessionsForWorktree, type WorktreeSession } from "../store/sessions";
 import { getRuntimeState, setRuntimeState, type PersistedTab } from "../lib/runtimeState";
+import type { BranchInfo } from "../types/git";
+import type { Session, Worktree, Project, NavSection } from "../types/workspace";
+import { DeleteWorkspaceDialog, type DeleteDialogState } from "./WorkspaceView/DeleteWorkspaceDialog";
+import { DiffPickerModal } from "./WorkspaceView/DiffPickerModal";
+import { PromptPickerPopover } from "./WorkspaceView/PromptPickerPopover";
+import { TerminalNamingModal } from "./WorkspaceView/TerminalNamingModal";
+import { ContextMenu, type CtxMenuState } from "./WorkspaceView/ContextMenu";
+import { TitleBar } from "./WorkspaceView/TitleBar";
 import {
   LayoutGrid,
   Brain,
@@ -24,19 +32,11 @@ import {
   ChevronLeft,
   ChevronRight,
   ChevronDown,
-  Trash2,
-  AlertTriangle,
-  Loader,
-  SquareSlash,
   Globe,
   FileCode,
   BookOpen,
-  Check,
   Cpu,
-  Database,
   MessageSquare,
-  Minus,
-  Square,
   SplitSquareHorizontal,
   Keyboard,
   PanelLeft,
@@ -44,7 +44,6 @@ import {
   SunMoon,
   GitBranch,
 } from "lucide-react";
-import { getCurrentWindow } from "@tauri-apps/api/window";
 import { setWorkState, clearWorkState } from "../store/workState";
 import { useKeybindings, matchesEvent, formatShortcut } from "../store/keybindings";
 import { useAttribution, getAttribution, COAUTHOR_LINE } from "../store/attribution";
@@ -84,115 +83,23 @@ interface Props {
   path?: string;
 }
 
-interface Session {
-  id: string;
-  name: string;
-  cwd: string;
-  projectId: string;
-  kind?: "terminal" | "diff" | "preview" | "editor" | "chat"; // defaults to "terminal" when absent
-  previewUrl?: string; // current URL for preview tabs
-  agent?: string; // CLI command when this is an agent session (e.g. "claude")
-  conversationId?: string; // the Claude conversation UUID
-  instanceId: string; // permanent canonical identity — minted once (= sessionId), never changes across resumes
-  createdAt: string; // ISO timestamp
-  isRootSession?: boolean; // true when session runs in the project root (no worktree)
-  noGit?: boolean; // true when user skipped git init for this root session
-  sandboxed?: boolean; // true when session is running inside a Hephaestus isolation sandbox
-  parentSessionId?: string; // set when this session was spawned via a split from another
-  storeKey?: string; // the sessions.ts key this session was saved under; undefined = not persisted
-  initialDiffPath?: string; // set when opened from Changes tab — skips the project picker
-  metadata: {
-    resumeCount: number;
-    hasBeenResumed: boolean;
-  };
-}
-
-interface Worktree {
-  name: string;
-  path: string;
-}
-
-interface BranchInfo {
-  name: string;
-  is_current: boolean;
-  is_remote: boolean;
-  is_worktree: boolean;
-  worktree_path?: string;
-}
-
-interface Project {
-  id: string;
-  name: string;
-  path: string;
-  expanded: boolean;
-  worktrees: Worktree[];
-}
-
-type NavSection = "overview" | "knowledge-base";
-
-const win = getCurrentWindow();
-
 // Directories under .tempest/ that are internal to Tempest and must never be
 // treated as git worktrees in the sidebar.
 const TEMPEST_INTERNAL_DIRS = new Set(["atlas", "logs"]);
 
-function folderName(p: string): string {
-  return p.replace(/[/\\]+$/, "").split(/[/\\]/).pop() ?? p;
-}
-
-// ─── Split pane layout ────────────────────────────────────────────────────────
-// "v" = vertical divider (panes side by side); "h" = horizontal divider (stacked).
-type SplitDir = "h" | "v";
-interface SplitLeaf   { type: "leaf";  sessionId: string; }
-interface SplitBranch { type: "split"; id: string; dir: SplitDir; ratio: number; first: PaneNode; second: PaneNode; }
-type PaneNode = SplitLeaf | SplitBranch;
-interface PaneRect    { top: number; left: number; width: number; height: number; } // 0–1 fractions
-
-function paneSessionIds(n: PaneNode): string[] {
-  if (n.type === "leaf") return [n.sessionId];
-  return [...paneSessionIds(n.first), ...paneSessionIds(n.second)];
-}
-
-function replaceLeaf(n: PaneNode, id: string, repl: PaneNode): PaneNode | null {
-  if (n.type === "leaf") return n.sessionId === id ? repl : null;
-  const a = replaceLeaf(n.first, id, repl); if (a) return { ...n, first: a } as SplitBranch;
-  const b = replaceLeaf(n.second, id, repl); if (b) return { ...n, second: b } as SplitBranch;
-  return null;
-}
-
-function removeLeaf(n: PaneNode, id: string): PaneNode | null {
-  if (n.type === "leaf") return null;
-  if (n.first.type  === "leaf" && n.first.sessionId  === id) return n.second;
-  if (n.second.type === "leaf" && n.second.sessionId === id) return n.first;
-  const a = removeLeaf(n.first, id);  if (a !== null) return { ...n, first: a }  as SplitBranch;
-  const b = removeLeaf(n.second, id); if (b !== null) return { ...n, second: b } as SplitBranch;
-  return null;
-}
-
-function patchRatio(n: PaneNode, splitId: string, ratio: number): PaneNode {
-  if (n.type === "leaf") return n;
-  const b = n as SplitBranch;
-  if (b.id === splitId) return { ...b, ratio };
-  return { ...b, first: patchRatio(b.first, splitId, ratio), second: patchRatio(b.second, splitId, ratio) };
-}
-
-function computeRects(n: PaneNode, r: PaneRect = { top: 0, left: 0, width: 1, height: 1 }): Map<string, PaneRect> {
-  if (n.type === "leaf") return new Map([[n.sessionId, r]]);
-  const { dir, ratio } = n as SplitBranch;
-  const a: PaneRect = dir === "v" ? { ...r, width: r.width * ratio }                              : { ...r, height: r.height * ratio };
-  const b: PaneRect = dir === "v" ? { ...r, left: r.left + r.width * ratio, width: r.width * (1 - ratio) } : { ...r, top: r.top + r.height * ratio, height: r.height * (1 - ratio) };
-  return new Map([...computeRects(n.first, a), ...computeRects(n.second, b)]);
-}
-
-interface HandleInfo { id: string; dir: SplitDir; ratio: number; parentRect: PaneRect; }
-function collectHandles(n: PaneNode, r: PaneRect = { top: 0, left: 0, width: 1, height: 1 }): HandleInfo[] {
-  if (n.type === "leaf") return [];
-  const { id, dir, ratio } = n as SplitBranch;
-  const a: PaneRect = dir === "v" ? { ...r, width: r.width * ratio }                              : { ...r, height: r.height * ratio };
-  const b: PaneRect = dir === "v" ? { ...r, left: r.left + r.width * ratio, width: r.width * (1 - ratio) } : { ...r, top: r.top + r.height * ratio, height: r.height * (1 - ratio) };
-  return [{ id, dir, ratio, parentRect: r }, ...collectHandles(n.first, a), ...collectHandles(n.second, b)];
-}
-// ─────────────────────────────────────────────────────────────────────────────
+import { folderName, timeAgo } from "../lib/format";
+import { buildAgentArgs } from "../lib/agentArgs";
+import {
+  type SplitDir,
+  type SplitBranch,
+  type PaneNode,
+  paneSessionIds,
+  replaceLeaf,
+  removeLeaf,
+  patchRatio,
+  computeRects,
+  collectHandles,
+} from "../lib/paneLayout";
 
 // WorkStateBadge, QueueBadge, SidebarWorkBadge — imported from ./SessionBadges
 
@@ -306,30 +213,10 @@ export function WorkspaceView({ zen, name, path }: Props) {
   const [chatNonce, setChatNonce] = useState<Record<string, number>>({});
 
   // Sidebar right-click context menu
-  const [ctxMenu, setCtxMenu] = useState<{
-    x: number; y: number;
-    worktree: Worktree | null;
-    projectPath: string;
-    projectId: string;
-    sessionId: string | null;
-    isProjectHeader?: boolean; // true when right-clicking a project row (not a worktree)
-    isRootSession?: boolean;   // true when right-clicking a root session or its ghost
-    rootKey?: string;          // unique store key for a root-session ghost (sessionId is null)
-    isChatGhost?: boolean;     // true when right-clicking the chat ghost row (sessionId is null)
-  } | null>(null);
+  const [ctxMenu, setCtxMenu] = useState<CtxMenuState | null>(null);
 
   // Delete workspace dialog state
-  const [deleteDialog, setDeleteDialog] = useState<{
-    worktree: Worktree;
-    projectPath: string;
-    projectId: string;
-    sessionId: string | null;
-    branchName: string | null;
-    deleteBranch: boolean;
-    step: 1 | 2;
-    loading: boolean;
-    error: string | null;
-  } | null>(null);
+  const [deleteDialog, setDeleteDialog] = useState<DeleteDialogState | null>(null);
 
 
   // Persist projects list to localStorage whenever it changes
@@ -400,6 +287,10 @@ export function WorkspaceView({ zen, name, path }: Props) {
             for (const { key } of getSubSessionsForWorktree(e.path)) {
               validPaths.add(key);
             }
+            // Worktree terminal keys are synthetic too — same treatment.
+            for (const { key } of getTermSessionsForWorktree(e.path)) {
+              validPaths.add(key);
+            }
           });
         } catch {
           // .tempest/ doesn't exist or project path is gone
@@ -465,6 +356,24 @@ export function WorkspaceView({ zen, name, path }: Props) {
             ).catch(() => {}),
           });
 
+          // Persisted worktree terminals — each restores independently under its own termKey
+          for (const { key: termKey, session: termSaved } of getTermSessionsForWorktree(wt.path)) {
+            if (termSaved.closed === true) continue;
+            const termInstanceId = termSaved.instanceId ?? termKey;
+            const termId = termSessionIdFromKey(termKey);
+            items.push({
+              instanceId: termInstanceId,
+              isActive: termInstanceId === savedActiveId,
+              sortIndex: orderMap.get(termInstanceId) ?? Infinity,
+              open: () => openSession(
+                termSaved.name, wt.path, project.id, undefined,
+                undefined, undefined, undefined,
+                undefined, undefined,
+                true, termId
+              ).catch(() => {}),
+            });
+          }
+
           // Collect persisted sub-sessions for Phase 5
           for (const { key: subKey, session: subSaved } of getSubSessionsForWorktree(wt.path)) {
             if (subSaved.closed === true) continue;
@@ -863,52 +772,6 @@ export function WorkspaceView({ zen, name, path }: Props) {
   // come from the per-agent AGENT_CONFIGS entry, with "{UUID}" substituted for the
   // appropriate conversation id. Agents whose config has null session/resume args
   // receive no session flags and simply start fresh.
-  function buildAgentArgs(
-    agent: string,
-    sessionId: string, // the new PTY session UUID, minted as the conversation id on first spawn
-    conversationId?: string, // stored UUID, present only when resuming
-    prompt?: string,
-    model?: string, // specific model to pass as --model <id> to supported CLIs
-  ): string[] {
-    const config = AGENT_CONFIGS.find((a) => a.hint === agent);
-    const args: string[] = [];
-
-    // Prepend --model flag for CLIs that support it
-    if (model && (agent === "claude" || agent === "gemini" || agent === "codex")) {
-      args.push("--model", model);
-    }
-
-    if (config && conversationId && config.resumeArgs) {
-      // Standard ID-based resume (Claude Code, Gemini CLI)
-      for (const arg of config.resumeArgs) {
-        args.push(arg.replace("{UUID}", conversationId));
-      }
-    } else if (config && conversationId && config.captureResumeArgs) {
-      // Captured-ID resume (Opencode — session ID was extracted from PTY output)
-      for (const arg of config.captureResumeArgs) {
-        args.push(arg.replace("{UUID}", conversationId));
-      }
-    } else if (config && !conversationId && config.sessionIdArgs) {
-      // First spawn — mint this session's UUID as the conversation id
-      for (const arg of config.sessionIdArgs) {
-        args.push(arg.replace("{UUID}", sessionId));
-      }
-    }
-    // If all arg arrays are null (e.g. Aider, plain opencode first spawn),
-    // no session flags are added and the agent starts fresh or uses CWD state.
-
-    // Auto-approve: append the agent's skip-permissions flag before the prompt
-    // so it's not parsed as task content by the CLI.
-    if (config?.autoApproveArgs && getSettings().autoApprove) {
-      for (const arg of config.autoApproveArgs) {
-        args.push(arg);
-      }
-    }
-
-    if (prompt) args.push(prompt);
-    return args;
-  }
-
   async function openSession(
     sessionName: string,
     cwd: string,
@@ -941,7 +804,11 @@ export function WorkspaceView({ zen, name, path }: Props) {
       // Main worktree terminal sessions: not persisted (no agent worth resuming).
       const rootKey = isRootSession ? rootSessionKey(cwd, sessionId) : null;
       const subKey = parentSessionId ? subSessionKey(cwd, sessionId) : null;
-      const storeKey = rootKey ?? subKey ?? (agent ? cwd : undefined);
+      // Worktree terminals get a unique per-session termKey so multiple terminals
+      // at the same cwd coexist alongside the (cwd-keyed) agent entry — and each
+      // one persists independently across close/reopen for the sidebar ghost.
+      const termKey = (!rootKey && !subKey && !agent) ? termSessionKey(cwd, sessionId) : null;
+      const storeKey = rootKey ?? subKey ?? termKey ?? (agent ? cwd : undefined);
 
       // Worktree sessions: the store key (path) is the stable identity — reuse it so
       // instanceId never changes across restarts. Root sessions have no path anchor, so
@@ -1285,7 +1152,6 @@ export function WorkspaceView({ zen, name, path }: Props) {
     let branchName: string;
     let existingBranch: string | undefined;
     let directWorktreePath: string | undefined;
-    let parentId: string | undefined;
 
     if (useExistingBranch) {
       if (!existingBranchName.trim()) return;
@@ -1294,20 +1160,6 @@ export function WorkspaceView({ zen, name, path }: Props) {
       if (selectedBranch?.is_worktree && selectedBranch.worktree_path) {
         // Branch is already in a worktree — open a session there without calling createWorktree.
         directWorktreePath = selectedBranch.worktree_path;
-        const liveParent = sessions.find((s) => s.cwd === directWorktreePath && !s.parentSessionId);
-        if (liveParent) {
-          parentId = liveParent.id;
-        } else {
-          // No live parent yet (e.g. user is on the overview tab). If a ghost exists in
-          // localStorage, pre-mint the parent ID and restore the ghost first so the new
-          // sub-session nests under it rather than replacing the worktree row.
-          const ghost = getWorktreeSession(directWorktreePath);
-          if (ghost && ghost.closed !== true) {
-            parentId = crypto.randomUUID();
-          }
-          // If no ghost either, parentId stays undefined and the new session becomes
-          // the main worktree session (correct for a truly fresh worktree).
-        }
       } else {
         existingBranch = existingBranchName.trim();
       }
@@ -1334,25 +1186,12 @@ export function WorkspaceView({ zen, name, path }: Props) {
       if (directWorktreePath) {
         worktreePath = directWorktreePath;
         addWorktreeToState({ name: branchName, path: worktreePath }, workingProjectId);
-        // If we pre-minted a parentId but no live session holds it yet, restore the
-        // ghost parent first with that exact ID so sub-session nesting works immediately.
-        if (parentId && !sessions.some((s) => s.id === parentId)) {
-          const ghost = getWorktreeSession(worktreePath);
-          if (ghost) {
-            await openSession(
-              ghost.name, worktreePath, workingProjectId ?? "",
-              ghost.agent, undefined, undefined,
-              ghost.agent ? ghost.conversationId : undefined,
-              false, ghost.noGit, false, parentId
-            );
-          }
-        }
       } else {
         const result = await createWorktree({ projectPath: activePath, name: branchName, existingBranch });
         worktreePath = result.path;
         addWorktreeToState({ name: branchName, path: worktreePath }, workingProjectId);
       }
-      await openSession(sessionName, worktreePath, workingProjectId ?? "", agent, prompt, undefined, undefined, undefined, undefined, false, undefined, parentId);
+      await openSession(sessionName, worktreePath, workingProjectId ?? "", agent, prompt, undefined, undefined, undefined, undefined, false, undefined, undefined);
       resetTerminalModal();
     } catch (e) {
       if (e instanceof NotAGitRepoError) {
@@ -1639,13 +1478,11 @@ export function WorkspaceView({ zen, name, path }: Props) {
     const existingCount = sessions.filter((s) => s.cwd === worktreePath).length;
     const baseName = agent ? agent.name : "Terminal";
     const sessionName = existingCount > 0 ? `${baseName} #${existingCount + 1}` : baseName;
-    // A live parent session in a worktree lets an additional session nest as a
-    // sub-session. Root sessions are independent (keyed per-session), so they never nest.
-    const liveParent = isRootSession
-      ? undefined
-      : sessions.find((s) => s.cwd === worktreePath && !s.parentSessionId);
-    const parentId = liveParent ? liveParent.id : undefined;
     try {
+      // The branch-level "+" always opens a top-level tab. Nesting as a sub-session
+      // is reserved for splitPane(); if we auto-nested here whenever a live session
+      // already ran at this cwd, the new tab would be filtered out of AgentTabs
+      // (which hides parentSessionId sessions) and appear to vanish.
       await openSession(
         sessionName,
         worktreePath,
@@ -1658,7 +1495,7 @@ export function WorkspaceView({ zen, name, path }: Props) {
         undefined,
         false,
         undefined,
-        parentId
+        undefined
       );
     } catch (e) {
       console.error("[BranchSession] launchInWorktree failed:", e);
@@ -1832,15 +1669,6 @@ export function WorkspaceView({ zen, name, path }: Props) {
     }
   }, [activeSessionId]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  function timeAgo(iso: string): string {
-    const s = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
-    if (s < 60) return "just now";
-    if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-    if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-    if (s < 604800) return `${Math.floor(s / 86400)}d ago`;
-    return `${Math.floor(s / 604800)}w ago`;
-  }
-
   async function openProjectByPath(selected: string) {
     const projName = folderName(selected);
     addRecent({ name: projName, path: selected });
@@ -1893,26 +1721,7 @@ export function WorkspaceView({ zen, name, path }: Props) {
   // Build the workspace list shown in OverviewPage from live session state.
   return (
     <div className="app">
-      <div className="topbar">
-        <div className="topbar-drag" data-tauri-drag-region />
-        <div className="topbar-right">
-          <Tooltip content="Minimize" placement="bottom">
-            <button className="win-btn" onClick={() => win.minimize()}>
-              <Minus size={11} />
-            </button>
-          </Tooltip>
-          <Tooltip content="Maximize" placement="bottom">
-            <button className="win-btn" onClick={() => win.toggleMaximize()}>
-              <Square size={10} />
-            </button>
-          </Tooltip>
-          <Tooltip content="Close" placement="bottom">
-            <button className="win-btn win-btn--close" onClick={() => win.close()}>
-              <X size={12} />
-            </button>
-          </Tooltip>
-        </div>
-      </div>
+      <TitleBar />
 
       <Toolbar
         tabsMode={tabsMode}
@@ -1939,59 +1748,25 @@ export function WorkspaceView({ zen, name, path }: Props) {
                   onClick={() => setPromptPickerOpen((o) => !o)}
                 />
               </Tooltip>
-              {promptPickerOpen && promptPickerPos && createPortal(
-                <div className="sub-bar-prompt-picker" style={{ top: promptPickerPos.top, right: promptPickerPos.right, position: "fixed" }}>
-                  <div className="sub-bar-prompt-picker-header">Prompt Library</div>
-                  <div className="sub-bar-prompt-picker-items">
-                    {promptPickerItems.length > 0 ? (
-                      promptPickerItems.map((p) => {
-                        const sent = promptSentId === p.id;
-                        return (
-                          <div key={p.id} className={`sub-bar-prompt-item${sent ? " sub-bar-prompt-item--sent" : ""}`}>
-                            <div className="sub-bar-prompt-item-text">
-                              <span className="sub-bar-prompt-title">{p.title}</span>
-                              <span className="sub-bar-prompt-preview">
-                                {p.body.length > 60 ? p.body.slice(0, 60) + "…" : p.body}
-                              </span>
-                            </div>
-                            <button
-                              className={`sub-bar-prompt-copy-btn${sent ? " sub-bar-prompt-copy-btn--sent" : ""}`}
-                              onMouseDown={(e) => {
-                                e.preventDefault();
-                                if (sent) return;
-                                navigator.clipboard.writeText(p.body);
-                                setPromptSentId(p.id);
-                                setTimeout(() => {
-                                  setPromptPickerOpen(false);
-                                  setPromptSentId(null);
-                                }, 800);
-                              }}
-                            >
-                              {sent ? <><Check size={11} /> Copied</> : <>Copy</>}
-                            </button>
-                          </div>
-                        );
-                      })
-                    ) : (
-                      <div className="sub-bar-prompt-empty">No prompts yet</div>
-                    )}
-                  </div>
-                  <div className="sub-bar-prompt-picker-footer">
-                    <button
-                      className="sub-bar-prompt-manage-btn"
-                      onMouseDown={(e) => {
-                        e.preventDefault();
-                        setPromptPickerOpen(false);
-                        setSettingsInitialSection("prompts");
-                        setSettingsOpen(true);
-                      }}
-                    >
-                      <Plus size={12} />
-                      <span>Manage Prompts</span>
-                    </button>
-                  </div>
-                </div>,
-                document.body
+              {promptPickerOpen && promptPickerPos && (
+                <PromptPickerPopover
+                  pos={promptPickerPos}
+                  items={promptPickerItems}
+                  sentId={promptSentId}
+                  onCopy={(p) => {
+                    navigator.clipboard.writeText(p.body);
+                    setPromptSentId(p.id);
+                    setTimeout(() => {
+                      setPromptPickerOpen(false);
+                      setPromptSentId(null);
+                    }, 800);
+                  }}
+                  onManage={() => {
+                    setPromptPickerOpen(false);
+                    setSettingsInitialSection("prompts");
+                    setSettingsOpen(true);
+                  }}
+                />
               )}
             </div>
           </>
@@ -2256,8 +2031,18 @@ export function WorkspaceView({ zen, name, path }: Props) {
                             const wtAgents = allAtPath.filter((s) => s.agent);
                             const wtTerminals = allAtPath.filter((s) => !s.agent);
                             const primaryAgent = wtAgents[0] ?? null;
-                            const savedMeta = wtSessions.length === 0 ? getWorktreeSession(wt.path) : null;
-                            const showGhost = savedMeta && savedMeta.closed !== true;
+                            // Every persisted entry at this cwd (single agent under cwd, plus each
+                            // terminal under its own termKey). Anything not matched by a live session's
+                            // storeKey renders as a ghost — so closing one session never affects another.
+                            const liveStoreKeys = new Set(allAtPath.map((s) => s.storeKey).filter((k): k is string => !!k));
+                            const agentMeta = getWorktreeSession(wt.path);
+                            const persistedEntries: { key: string; session: WorktreeSession }[] = [
+                              ...(agentMeta ? [{ key: wt.path, session: agentMeta }] : []),
+                              ...getTermSessionsForWorktree(wt.path),
+                            ];
+                            const ghostEntries = persistedEntries.filter((e) => !liveStoreKeys.has(e.key));
+                            const agentGhosts = ghostEntries.filter((e) => !!e.session.agent);
+                            const termGhosts  = ghostEntries.filter((e) => !e.session.agent);
                             const wtExpanded = expandedWorktrees.has(wt.path);
 
                             return (
@@ -2279,8 +2064,8 @@ export function WorkspaceView({ zen, name, path }: Props) {
                                   </button>
                                 </div>
                                 {wtExpanded && (() => {
-                                  const wtAgentsEmpty = wtAgents.length === 0 && !(showGhost && savedMeta?.agent);
-                                  const wtTerminalsEmpty = wtTerminals.length === 0 && !(showGhost && !savedMeta?.agent);
+                                  const wtAgentsEmpty = wtAgents.length === 0 && agentGhosts.length === 0;
+                                  const wtTerminalsEmpty = wtTerminals.length === 0 && termGhosts.length === 0;
                                   return (
                                     <div className="sb-worktree-dropdown">
                                       {wtAgentsEmpty && wtTerminalsEmpty ? (
@@ -2306,16 +2091,17 @@ export function WorkspaceView({ zen, name, path }: Props) {
                                                 <SidebarWorkBadge sessionId={s.id} />
                                               </button>
                                             ))}
-                                            {showGhost && savedMeta!.agent && (
+                                            {agentGhosts.map(({ key, session: g }) => (
                                               <button
+                                                key={key}
                                                 className="sb-dropdown-item sb-dropdown-item--ghost"
-                                                onClick={() => { openSession(savedMeta!.name, wt.path, project.id, savedMeta!.agent, undefined, undefined, savedMeta!.conversationId).catch(() => {}); markWorktreeSessionOpen(wt.path); }}
+                                                onClick={() => { openSession(g.name, wt.path, project.id, g.agent, undefined, undefined, g.conversationId).catch(() => {}); markWorktreeSessionOpen(key); }}
                                                 onContextMenu={(e) => openCtxMenu(e, wt, project.path, project.id, null)}
                                               >
-                                                <AgentIcon hint={savedMeta!.agent} size={11} />
-                                                <span className="sb-dropdown-item-name">{savedMeta!.name}</span>
+                                                <AgentIcon hint={g.agent} size={11} />
+                                                <span className="sb-dropdown-item-name">{g.name}</span>
                                               </button>
-                                            )}
+                                            ))}
                                             {wtAgentsEmpty && (
                                               <div className="sb-dropdown-empty-box">
                                                 <span className="sb-dropdown-empty-text">No agent sessions</span>
@@ -2335,16 +2121,17 @@ export function WorkspaceView({ zen, name, path }: Props) {
                                                 <span className="sb-dropdown-item-name">{s.name}</span>
                                               </button>
                                             ))}
-                                            {showGhost && !savedMeta!.agent && (
+                                            {termGhosts.map(({ key, session: g }) => (
                                               <button
+                                                key={key}
                                                 className="sb-dropdown-item sb-dropdown-item--ghost"
-                                                onClick={() => { openSession(savedMeta!.name, wt.path, project.id, undefined).catch(() => {}); markWorktreeSessionOpen(wt.path); }}
+                                                onClick={() => { openSession(g.name, wt.path, project.id, undefined, undefined, undefined, undefined, undefined, undefined, false, termSessionIdFromKey(key)).catch(() => {}); markWorktreeSessionOpen(key); }}
                                                 onContextMenu={(e) => openCtxMenu(e, wt, project.path, project.id, null)}
                                               >
                                                 <TerminalSquare size={11} />
-                                                <span className="sb-dropdown-item-name">{savedMeta!.name}</span>
+                                                <span className="sb-dropdown-item-name">{g.name}</span>
                                               </button>
-                                            )}
+                                            ))}
                                             {wtTerminalsEmpty && (
                                               <div className="sb-dropdown-empty-box">
                                                 <span className="sb-dropdown-empty-text">No terminals</span>
@@ -2517,66 +2304,12 @@ export function WorkspaceView({ zen, name, path }: Props) {
               })()}
           <div className="workspace-content">
             {diffPickerOpen && (
-              <div className="diff-screen">
-                <div className="diff-screen-body">
-                  <div className="diff-screen-inner">
-                    <header className="diff-screen-header">
-                      <h1 className="diff-screen-title">Open a diff</h1>
-                      <p className="diff-screen-subtitle">Choose a branch to review its changes</p>
-                    </header>
-
-                    {diffPickerProjects.length === 0 ? (
-                      <div className="diff-screen-empty-state">
-                        <GitBranch size={22} />
-                        <p>No projects open</p>
-                      </div>
-                    ) : diffPickerProjects.map((project) => {
-                      const branches = diffPickerBranches[project.id] ?? [];
-                      return (
-                        <section key={project.id} className="diff-screen-project">
-                          <div className="diff-screen-project-header">
-                            <span className="diff-screen-project-name">{project.name}</span>
-                            {branches.length > 0 && (
-                              <span className="diff-screen-project-count">{branches.length}</span>
-                            )}
-                          </div>
-                          <div className="diff-screen-branches">
-                            {diffPickerLoading && branches.length === 0 ? (
-                              <div className="diff-screen-loading">Loading branches…</div>
-                            ) : branches.length === 0 ? (
-                              <div className="diff-screen-empty">No branches found</div>
-                            ) : branches.map((branch) => {
-                              const canOpen = !!branch.worktree_path || branch.is_current;
-                              const kind = branch.is_current
-                                ? "head"
-                                : branch.worktree_path
-                                  ? "worktree"
-                                  : branch.is_remote
-                                    ? "remote"
-                                    : "local";
-                              return (
-                                <button
-                                  key={`${project.id}:${branch.name}:${branch.is_remote ? "remote" : "local"}`}
-                                  className={`diff-screen-branch diff-screen-branch--${kind}`}
-                                  disabled={!canOpen}
-                                  onMouseDown={(e) => { e.preventDefault(); openDiffForBranch(project, branch); }}
-                                  title={branch.worktree_path ?? (branch.is_current ? project.path : "Open this branch in a worktree to view its diff")}
-                                >
-                                  <GitBranch size={14} className="diff-screen-branch-icon" />
-                                  <span className="diff-screen-branch-name">{branch.name}</span>
-                                  <span className={`diff-screen-branch-meta diff-screen-branch-meta--${kind}`}>
-                                    {kind}
-                                  </span>
-                                </button>
-                              );
-                            })}
-                          </div>
-                        </section>
-                      );
-                    })}
-                  </div>
-                </div>
-              </div>
+              <DiffPickerModal
+                projects={diffPickerProjects}
+                branches={diffPickerBranches}
+                loading={diffPickerLoading}
+                onPick={openDiffForBranch}
+              />
             )}
             <div className="panes-viewport" ref={workspaceContentRef}>
             {sessions.map((s) => {
@@ -2926,421 +2659,64 @@ export function WorkspaceView({ zen, name, path }: Props) {
         onLivePreview={() => { if (pendingProjectId) openPreviewTab(pendingProjectId); }}
       />
 
-      {/* Sidebar context menu */}
-      {ctxMenu && createPortal(
-        <div className="ctx-overlay" onClick={() => setCtxMenu(null)}>
-          <div
-            className="ctx-menu"
-            style={{ top: ctxMenu.y, left: ctxMenu.x }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {(() => {
-              const m = ctxMenu;
-              if (!m) return null;
-              const targetSession = m.sessionId ? sessions.find((s) => s.id === m.sessionId) : null;
-              const atlasOn = getSettings().atlasEnabled;
-              const indexed = (getRuntimeState().atlasProjects ?? {})[m.projectPath] === true;
-              const canClose = !!m.sessionId;
-              const hasChat = getRuntimeState().tabs.some(
-                (t) => t.kind === "chat" && t.projectId === m.projectId
-              );
-              // Diff opens against worktree path when available, project root otherwise
-              const diffPath = m.worktree ? m.worktree.path : m.projectPath;
-
-              const indexProject = () => {
-                const decided = getRuntimeState().atlasProjects ?? {};
-                setRuntimeState({ atlasProjects: { ...decided, [m.projectPath]: true } });
-                invoke("start_atlas_index", { projectPath: m.projectPath })
-                  .then(() => invoke("start_atlas_daemon", { projectPath: m.projectPath }).catch(() => {}))
-                  .catch((e) => console.error("[Atlas] start_atlas_index failed:", e));
-                setAtlasIndexingPaths((prev) => prev.includes(m.projectPath) ? prev : [...prev, m.projectPath]);
-                setCtxMenu(null);
-              };
-              const removeIndex = () => {
-                invoke("remove_atlas_index", { projectPath: m.projectPath })
-                  .catch((e) => console.error("[Atlas] remove_atlas_index failed:", e));
-                const decided = getRuntimeState().atlasProjects ?? {};
-                const updated = { ...decided };
-                delete updated[m.projectPath];
-                setRuntimeState({ atlasProjects: updated });
-                setCtxMenu(null);
-              };
-
-              const hasToolItems = atlasOn || hasChat;
-              const hasDestructiveWorktree = !!m.worktree;
-              const hasDestructiveSession = m.isRootSession;
-
-              return (
-                <>
-                  {/* ── Navigation ── */}
-                  <button className="ctx-item" onClick={() => { openChatTab(m.projectId); setCtxMenu(null); }}>
-                    <MessageSquare size={13} /> Open chat
-                  </button>
-                  <button className="ctx-item" onClick={() => { openDiffTab(diffPath, m.projectId); setCtxMenu(null); }}>
-                    <Eye size={13} /> Open diff
-                  </button>
-                  {canClose && (
-                    <button className="ctx-item" onClick={() => { closeSession(m.sessionId!); setCtxMenu(null); }}>
-                      <X size={13} /> Close
-                    </button>
-                  )}
-
-                  {/* ── Tools (index, chat history) ── */}
-                  {hasToolItems && <div className="ctx-sep" />}
-                  {atlasOn && (
-                    <button className="ctx-item" onClick={indexProject}>
-                      <Database size={13} /> {indexed ? "Re-index project" : "Index project"}
-                    </button>
-                  )}
-                  {hasChat && (
-                    <>
-                      <button className="ctx-item ctx-item--danger" onClick={() => { clearChatHistory(m.projectId, targetSession?.id); setCtxMenu(null); }}>
-                        <Trash2 size={13} /> Clear history
-                      </button>
-                      <button className="ctx-item ctx-item--danger" onClick={() => {
-                        const chatSess = sessions.find((s) => s.kind === "chat" && s.projectId === m.projectId);
-                        if (chatSess) closeSession(chatSess.id);
-                        const st = getRuntimeState();
-                        setRuntimeState({ tabs: st.tabs.filter((t) => !(t.kind === "chat" && t.projectId === m.projectId)) });
-                        clearChatHistory(m.projectId, chatSess?.id);
-                        setCtxMenu(null);
-                      }}>
-                        <X size={13} /> Remove chat
-                      </button>
-                    </>
-                  )}
-
-                  {/* ── Destructive ── */}
-                  <div className="ctx-sep" />
-                  {hasDestructiveWorktree && (
-                    <>
-                      <button className="ctx-item ctx-item--danger" onClick={() => openDeleteDialog(m.worktree!, m.projectPath, m.projectId, m.sessionId)}>
-                        <Trash2 size={13} /> Delete workspace
-                      </button>
-                      <button className="ctx-item ctx-item--danger" onClick={() => openDeleteDialog(m.worktree!, m.projectPath, m.projectId, m.sessionId, true)}>
-                        <Trash2 size={13} /> Delete branch
-                      </button>
-                    </>
-                  )}
-                  {hasDestructiveSession && (
-                    <button
-                      className="ctx-item ctx-item--danger"
-                      onClick={() => {
-                        const keyToRemove = targetSession?.storeKey ?? m.rootKey;
-                        if (m.sessionId) closeSession(m.sessionId);
-                        if (keyToRemove) removeWorktreeSession(keyToRemove);
-                        setCtxMenu(null);
-                      }}
-                    >
-                      <Trash2 size={13} /> Remove session
-                    </button>
-                  )}
-                  {atlasOn && indexed && (
-                    <button className="ctx-item ctx-item--danger" onClick={removeIndex}>
-                      <Database size={13} /> Remove index
-                    </button>
-                  )}
-                  <button className="ctx-item ctx-item--danger" onClick={() => { removeProject(m.projectId); setCtxMenu(null); }}>
-                    <FolderOpen size={13} /> Remove project
-                  </button>
-                </>
-              );
-            })()}
-          </div>
-        </div>,
-        document.body
+      {ctxMenu && (
+        <ContextMenu
+          menu={ctxMenu}
+          sessions={sessions}
+          onClose={() => setCtxMenu(null)}
+          onOpenChat={openChatTab}
+          onOpenDiff={openDiffTab}
+          onCloseSession={closeSession}
+          onClearChatHistory={clearChatHistory}
+          onOpenDeleteDialog={openDeleteDialog}
+          onRemoveProject={removeProject}
+          onAtlasIndexingStart={(path) => setAtlasIndexingPaths((prev) => prev.includes(path) ? prev : [...prev, path])}
+        />
       )}
 
       {/* Delete workspace dialog */}
-      {deleteDialog && createPortal(
-        <div className="naming-modal-overlay" onClick={() => !deleteDialog.loading && setDeleteDialog(null)}>
-          <div className="naming-modal delete-dialog" onClick={(e) => e.stopPropagation()}>
-            {deleteDialog.step === 1 ? (
-              <>
-                <div className="naming-modal-header">
-                  <Trash2 size={15} />
-                  <span>Delete workspace?</span>
-                </div>
-                <p className="naming-modal-desc">
-                  This will permanently remove{" "}
-                  <strong className="delete-dialog-name">{deleteDialog.worktree.name}</strong>{" "}
-                  from disk. Any uncommitted work in this worktree will be lost.
-                </p>
-
-                <label className="delete-dialog-branch-row">
-                  <input
-                    type="checkbox"
-                    checked={deleteDialog.deleteBranch}
-                    onChange={(e) =>
-                      setDeleteDialog((d) => d ? { ...d, deleteBranch: e.target.checked, error: null } : null)
-                    }
-                  />
-                  <span>Also delete branch{deleteDialog.branchName ? ` "${deleteDialog.branchName}"` : ""}</span>
-                </label>
-                {deleteDialog.deleteBranch && (
-                  <div className="delete-dialog-branch-warn">
-                    <AlertTriangle size={13} />
-                    You will be asked to confirm this separately.
-                  </div>
-                )}
-
-                {deleteDialog.error && <p className="naming-modal-error">{deleteDialog.error}</p>}
-
-                <div className="naming-modal-actions">
-                  <button
-                    className="naming-modal-btn naming-modal-btn--cancel"
-                    disabled={deleteDialog.loading}
-                    onClick={() => setDeleteDialog(null)}
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    className="naming-modal-btn naming-modal-btn--delete"
-                    disabled={deleteDialog.loading}
-                    onClick={handleDeleteConfirm}
-                  >
-                    {deleteDialog.loading ? <Loader size={13} className="spin" /> : "Delete workspace"}
-                  </button>
-                </div>
-              </>
-            ) : (
-              <>
-                <div className="naming-modal-header delete-dialog-header--danger">
-                  <AlertTriangle size={15} />
-                  <span>Delete branch permanently?</span>
-                </div>
-                <p className="naming-modal-desc">
-                  Branch{" "}
-                  <code className="delete-dialog-branch-code">{deleteDialog.branchName}</code>{" "}
-                  will be deleted from the repository. This cannot be undone.
-                </p>
-                <div className="delete-dialog-final-warn">
-                  All commits on this branch that are not merged will be permanently lost.
-                </div>
-
-                {deleteDialog.error && <p className="naming-modal-error">{deleteDialog.error}</p>}
-
-                <div className="naming-modal-actions">
-                  <button
-                    className="naming-modal-btn naming-modal-btn--cancel"
-                    disabled={deleteDialog.loading}
-                    onClick={() => setDeleteDialog(null)}
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    className="naming-modal-btn naming-modal-btn--delete"
-                    disabled={deleteDialog.loading}
-                    onClick={handleDeleteConfirm}
-                  >
-                    {deleteDialog.loading ? <Loader size={13} className="spin" /> : "Delete branch & workspace"}
-                  </button>
-                </div>
-              </>
-            )}
-          </div>
-        </div>,
-        document.body
+      {deleteDialog && (
+        <DeleteWorkspaceDialog
+          dialog={deleteDialog}
+          onChange={setDeleteDialog}
+          onCancel={() => setDeleteDialog(null)}
+          onConfirm={handleDeleteConfirm}
+        />
       )}
 
-      {/* Terminal naming modal */}
-      {showTerminalNaming && createPortal(
-        <div className="naming-modal-overlay" onClick={resetTerminalModal}>
-          <div className="naming-modal" onClick={(e) => e.stopPropagation()}>
-            {gitNotFoundRoot ? (
-              <>
-                <div className="naming-modal-header">
-                  {pendingAgent ? <AgentIcon hint={pendingAgent.hint} size={15} /> : <TerminalSquare size={15} />}
-                  <span>No Git Repository Found</span>
-                </div>
-                <p className="naming-modal-desc">
-                  This folder isn't a Git repository. Initialize one to enable version
-                  control and the Changes tab, or continue without Git (the Changes tab
-                  will show a notice instead).
-                </p>
-                <div className="naming-modal-prompt-block">
-                  <label className="naming-modal-prompt-label">
-                    Remote URL
-                    <span className="naming-modal-prompt-hint"> — optional</span>
-                  </label>
-                  <input
-                    className="naming-modal-input"
-                    type="text"
-                    placeholder="https://github.com/user/repo.git"
-                    value={rootRemoteUrl}
-                    onChange={(e) => setRootRemoteUrl(e.target.value)}
-                  />
-                </div>
-                {rootGitError && <p className="naming-modal-error">{rootGitError}</p>}
-                <div className="naming-modal-actions naming-modal-actions--git">
-                  <div className="naming-modal-actions-row">
-                    <button
-                      className="naming-modal-btn naming-modal-btn--cancel"
-                      disabled={rootGitInitializing}
-                      onClick={skipGitForRoot}
-                    >
-                      {rootGitInitializing ? <Loader size={13} className="spin" /> : "Continue without Git"}
-                    </button>
-                    <button
-                      className="naming-modal-btn naming-modal-btn--create"
-                      disabled={rootGitInitializing}
-                      onClick={initGitForRoot}
-                    >
-                      {rootGitInitializing ? <Loader size={13} className="spin" /> : "Initialize Git"}
-                    </button>
-                  </div>
-                  <button
-                    className="naming-modal-btn naming-modal-btn--back"
-                    onClick={() => { setGitNotFoundRoot(false); setRootGitError(null); }}
-                  >
-                    Back
-                  </button>
-                </div>
-              </>
-            ) : gitNotFound ? (
-              <>
-                <div className="naming-modal-header">
-                  {pendingAgent ? <AgentIcon hint={pendingAgent.hint} size={15} /> : <TerminalSquare size={15} />}
-                  <span>No Git Repository Found</span>
-                </div>
-                <p className="naming-modal-desc">
-                  This folder isn't a Git repository. Tempest can initialize one for you, or
-                  you can continue in a basic terminal-only environment with limited functionality.
-                </p>
-                {terminalError && <p className="naming-modal-error">{terminalError}</p>}
-                <div className="naming-modal-actions naming-modal-actions--git">
-                  <div className="naming-modal-actions-row">
-                    <button
-                      className="naming-modal-btn naming-modal-btn--cancel"
-                      disabled={terminalLaunching}
-                      onClick={continueWithoutGit}
-                    >
-                      {terminalLaunching ? <Loader size={13} className="spin" /> : "Continue without Git"}
-                    </button>
-                    <button
-                      className="naming-modal-btn naming-modal-btn--create"
-                      disabled={terminalLaunching}
-                      onClick={initGitAndLaunch}
-                    >
-                      {terminalLaunching ? <Loader size={13} className="spin" /> : "Initialize Git & Launch"}
-                    </button>
-                  </div>
-                  <button
-                    className="naming-modal-btn naming-modal-btn--back"
-                    onClick={() => setGitNotFound(false)}
-                  >
-                    Back
-                  </button>
-                </div>
-              </>
-            ) : (
-              <>
-                <div className="naming-modal-header">
-                  {pendingAgent ? <AgentIcon hint={pendingAgent.hint} size={15} /> : <TerminalSquare size={15} />}
-                  <span>{pendingAgent ? `New ${pendingAgent.name} Session` : "New Workspace"}</span>
-                </div>
-                <p className="naming-modal-desc">Give your workspace a name to get started.</p>
-                {(() => {
-                  const pickableBranches = existingBranches.filter((b) => !b.is_current);
-                  const noOtherBranches = pickableBranches.length === 0;
-                  return (
-                    <>
-                      <div className="naming-modal-branch-toggle">
-                        <button
-                          className={`naming-modal-branch-opt${!useExistingBranch ? " active" : ""}`}
-                          onClick={() => setUseExistingBranch(false)}
-                        >New branch</button>
-                        <button
-                          className={`naming-modal-branch-opt${useExistingBranch ? " active" : ""}${noOtherBranches ? " naming-modal-branch-opt--disabled" : ""}`}
-                          onClick={() => { if (!noOtherBranches) setUseExistingBranch(true); }}
-                          disabled={noOtherBranches}
-                          title={noOtherBranches ? "No other branches exist" : undefined}
-                        >Use existing</button>
-                      </div>
-                      {useExistingBranch ? (
-                        <div className="naming-modal-drop" ref={existingDropRef}>
-                          <button
-                            type="button"
-                            className={`naming-modal-input naming-modal-drop-btn${existingDropOpen ? " naming-modal-drop-btn--open" : ""}`}
-                            onClick={() => setExistingDropOpen((v) => !v)}
-                          >
-                            <span className={existingBranchName ? "" : "naming-modal-drop-placeholder"}>
-                              {existingBranchName || "Select a branch…"}
-                            </span>
-                            <ChevronDown size={12} className={`naming-modal-drop-chevron${existingDropOpen ? " naming-modal-drop-chevron--open" : ""}`} />
-                          </button>
-                          {existingDropOpen && (
-                            <div className="naming-modal-drop-menu">
-                              {pickableBranches.map((b) => (
-                                <button
-                                  key={b.name}
-                                  type="button"
-                                  className={`naming-modal-drop-item${b.name === existingBranchName ? " naming-modal-drop-item--active" : ""}${b.is_worktree ? " naming-modal-drop-item--worktree" : ""}${b.is_remote ? " naming-modal-drop-item--remote" : ""}`}
-                                  onClick={() => { setExistingBranchName(b.name); setExistingDropOpen(false); }}
-                                >
-                                  <span className="naming-modal-drop-item-name">{b.name}</span>
-                                  {b.is_worktree && <span className="naming-modal-drop-badge">open</span>}
-                                  {b.is_remote && <span className="naming-modal-drop-badge">remote</span>}
-                                </button>
-                              ))}
-                            </div>
-                          )}
-                        </div>
-                      ) : (
-                        <input
-                          className="naming-modal-input"
-                          type="text"
-                          placeholder="e.g. my-feature"
-                          value={terminalName}
-                          onChange={(e) => setTerminalName(e.target.value)}
-                          onKeyDown={(e) => { if (e.key === "Enter") launchTerminalWorktree(); }}
-                          autoFocus
-                        />
-                      )}
-                    </>
-                  );
-                })()}
-                {pendingAgent && (
-                  <div className="naming-modal-prompt-block">
-                    <div className="naming-modal-prompt-label">
-                      Custom Prompt
-                      <span className="naming-modal-prompt-hint">Sent to the agent the moment it starts — leave blank to begin manually.</span>
-                    </div>
-                    <textarea
-                      className="naming-modal-prompt"
-                      placeholder="e.g. Refactor the auth module to use JWT tokens"
-                      value={terminalPrompt}
-                      onChange={(e) => setTerminalPrompt(e.target.value)}
-                      rows={3}
-                    />
-                  </div>
-                )}
-                {terminalError && <p className="naming-modal-error">{terminalError}</p>}
-                <div className="naming-modal-actions">
-                  <button className="naming-modal-btn naming-modal-btn--cancel" onClick={resetTerminalModal}>
-                    Cancel
-                  </button>
-                  <button
-                    className="naming-modal-btn naming-modal-btn--root"
-                    disabled={terminalLaunching}
-                    onClick={launchInRoot}
-                    title="Open directly in the project root — no branch created"
-                  >
-                    {terminalLaunching ? <Loader size={13} className="spin" /> : <><SquareSlash size={13} />in Root</>}
-                  </button>
-                  <button
-                    className="naming-modal-btn naming-modal-btn--create"
-                    disabled={(useExistingBranch ? !existingBranchName.trim() : !terminalName.trim()) || terminalLaunching}
-                    onClick={launchTerminalWorktree}
-                  >
-                    {terminalLaunching ? <Loader size={13} className="spin" /> : useExistingBranch ? "Open Branch" : "in Branch"}
-                  </button>
-                </div>
-              </>
-            )}
-          </div>
-        </div>,
-        document.body
+      {showTerminalNaming && (
+        <TerminalNamingModal
+          pendingAgent={pendingAgent}
+          gitNotFoundRoot={gitNotFoundRoot}
+          gitNotFound={gitNotFound}
+          rootRemoteUrl={rootRemoteUrl}
+          setRootRemoteUrl={setRootRemoteUrl}
+          rootGitInitializing={rootGitInitializing}
+          rootGitError={rootGitError}
+          onSkipGitForRoot={skipGitForRoot}
+          onInitGitForRoot={initGitForRoot}
+          onBackFromRoot={() => { setGitNotFoundRoot(false); setRootGitError(null); }}
+          terminalError={terminalError}
+          terminalLaunching={terminalLaunching}
+          onContinueWithoutGit={continueWithoutGit}
+          onInitGitAndLaunch={initGitAndLaunch}
+          onBackFromGitNotFound={() => setGitNotFound(false)}
+          useExistingBranch={useExistingBranch}
+          setUseExistingBranch={setUseExistingBranch}
+          existingBranches={existingBranches}
+          existingBranchName={existingBranchName}
+          setExistingBranchName={setExistingBranchName}
+          existingDropOpen={existingDropOpen}
+          setExistingDropOpen={setExistingDropOpen}
+          existingDropRef={existingDropRef}
+          terminalName={terminalName}
+          setTerminalName={setTerminalName}
+          terminalPrompt={terminalPrompt}
+          setTerminalPrompt={setTerminalPrompt}
+          onCancel={resetTerminalModal}
+          onLaunchInRoot={launchInRoot}
+          onLaunchTerminalWorktree={launchTerminalWorktree}
+        />
       )}
 
 
diff --git a/src/components/WorkspaceView/ContextMenu.tsx b/src/components/WorkspaceView/ContextMenu.tsx
new file mode 100644
index 0000000..f977022
--- /dev/null
+++ b/src/components/WorkspaceView/ContextMenu.tsx
@@ -0,0 +1,157 @@
+import { createPortal } from "react-dom";
+import { MessageSquare, Eye, X, Database, Trash2, FolderOpen } from "lucide-react";
+import { getSettings } from "../../store/appSettings";
+import { getRuntimeState, setRuntimeState } from "../../lib/runtimeState";
+import { removeWorktreeSession } from "../../store/sessions";
+import { invoke } from "@tauri-apps/api/core";
+import type { Session, Worktree } from "../../types/workspace";
+
+export type CtxMenuState = {
+  x: number; y: number;
+  worktree: Worktree | null;
+  projectPath: string;
+  projectId: string;
+  sessionId: string | null;
+  isProjectHeader?: boolean;
+  isRootSession?: boolean;
+  rootKey?: string;
+  isChatGhost?: boolean;
+};
+
+type Props = {
+  menu: CtxMenuState;
+  sessions: Session[];
+  onClose: () => void;
+  onOpenChat: (projectId: string) => void;
+  onOpenDiff: (path: string, projectId: string) => void;
+  onCloseSession: (sessionId: string) => void;
+  onClearChatHistory: (projectId: string, sessionId?: string) => void;
+  onOpenDeleteDialog: (
+    worktree: Worktree,
+    projectPath: string,
+    projectId: string,
+    sessionId: string | null,
+    withBranch?: boolean
+  ) => void;
+  onRemoveProject: (projectId: string) => void;
+  onAtlasIndexingStart: (projectPath: string) => void;
+};
+
+export function ContextMenu({
+  menu, sessions, onClose,
+  onOpenChat, onOpenDiff, onCloseSession, onClearChatHistory,
+  onOpenDeleteDialog, onRemoveProject, onAtlasIndexingStart,
+}: Props) {
+  const m = menu;
+  const targetSession = m.sessionId ? sessions.find((s) => s.id === m.sessionId) : null;
+  const atlasOn = getSettings().atlasEnabled;
+  const indexed = (getRuntimeState().atlasProjects ?? {})[m.projectPath] === true;
+  const canClose = !!m.sessionId;
+  const hasChat = getRuntimeState().tabs.some(
+    (t) => t.kind === "chat" && t.projectId === m.projectId
+  );
+  const diffPath = m.worktree ? m.worktree.path : m.projectPath;
+
+  const indexProject = () => {
+    const decided = getRuntimeState().atlasProjects ?? {};
+    setRuntimeState({ atlasProjects: { ...decided, [m.projectPath]: true } });
+    invoke("start_atlas_index", { projectPath: m.projectPath })
+      .then(() => invoke("start_atlas_daemon", { projectPath: m.projectPath }).catch(() => {}))
+      .catch((e) => console.error("[Atlas] start_atlas_index failed:", e));
+    onAtlasIndexingStart(m.projectPath);
+    onClose();
+  };
+  const removeIndex = () => {
+    invoke("remove_atlas_index", { projectPath: m.projectPath })
+      .catch((e) => console.error("[Atlas] remove_atlas_index failed:", e));
+    const decided = getRuntimeState().atlasProjects ?? {};
+    const updated = { ...decided };
+    delete updated[m.projectPath];
+    setRuntimeState({ atlasProjects: updated });
+    onClose();
+  };
+
+  const hasToolItems = atlasOn || hasChat;
+  const hasDestructiveWorktree = !!m.worktree;
+  const hasDestructiveSession = m.isRootSession;
+
+  return createPortal(
+    <div className="ctx-overlay" onClick={onClose}>
+      <div
+        className="ctx-menu"
+        style={{ top: m.y, left: m.x }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button className="ctx-item" onClick={() => { onOpenChat(m.projectId); onClose(); }}>
+          <MessageSquare size={13} /> Open chat
+        </button>
+        <button className="ctx-item" onClick={() => { onOpenDiff(diffPath, m.projectId); onClose(); }}>
+          <Eye size={13} /> Open diff
+        </button>
+        {canClose && (
+          <button className="ctx-item" onClick={() => { onCloseSession(m.sessionId!); onClose(); }}>
+            <X size={13} /> Close
+          </button>
+        )}
+
+        {hasToolItems && <div className="ctx-sep" />}
+        {atlasOn && (
+          <button className="ctx-item" onClick={indexProject}>
+            <Database size={13} /> {indexed ? "Re-index project" : "Index project"}
+          </button>
+        )}
+        {hasChat && (
+          <>
+            <button className="ctx-item ctx-item--danger" onClick={() => { onClearChatHistory(m.projectId, targetSession?.id); onClose(); }}>
+              <Trash2 size={13} /> Clear history
+            </button>
+            <button className="ctx-item ctx-item--danger" onClick={() => {
+              const chatSess = sessions.find((s) => s.kind === "chat" && s.projectId === m.projectId);
+              if (chatSess) onCloseSession(chatSess.id);
+              const st = getRuntimeState();
+              setRuntimeState({ tabs: st.tabs.filter((t) => !(t.kind === "chat" && t.projectId === m.projectId)) });
+              onClearChatHistory(m.projectId, chatSess?.id);
+              onClose();
+            }}>
+              <X size={13} /> Remove chat
+            </button>
+          </>
+        )}
+
+        <div className="ctx-sep" />
+        {hasDestructiveWorktree && (
+          <>
+            <button className="ctx-item ctx-item--danger" onClick={() => onOpenDeleteDialog(m.worktree!, m.projectPath, m.projectId, m.sessionId)}>
+              <Trash2 size={13} /> Delete workspace
+            </button>
+            <button className="ctx-item ctx-item--danger" onClick={() => onOpenDeleteDialog(m.worktree!, m.projectPath, m.projectId, m.sessionId, true)}>
+              <Trash2 size={13} /> Delete branch
+            </button>
+          </>
+        )}
+        {hasDestructiveSession && (
+          <button
+            className="ctx-item ctx-item--danger"
+            onClick={() => {
+              const keyToRemove = targetSession?.storeKey ?? m.rootKey;
+              if (m.sessionId) onCloseSession(m.sessionId);
+              if (keyToRemove) removeWorktreeSession(keyToRemove);
+              onClose();
+            }}
+          >
+            <Trash2 size={13} /> Remove session
+          </button>
+        )}
+        {atlasOn && indexed && (
+          <button className="ctx-item ctx-item--danger" onClick={removeIndex}>
+            <Database size={13} /> Remove index
+          </button>
+        )}
+        <button className="ctx-item ctx-item--danger" onClick={() => { onRemoveProject(m.projectId); onClose(); }}>
+          <FolderOpen size={13} /> Remove project
+        </button>
+      </div>
+    </div>,
+    document.body
+  );
+}
diff --git a/src/components/WorkspaceView/DeleteWorkspaceDialog.tsx b/src/components/WorkspaceView/DeleteWorkspaceDialog.tsx
new file mode 100644
index 0000000..ace62b0
--- /dev/null
+++ b/src/components/WorkspaceView/DeleteWorkspaceDialog.tsx
@@ -0,0 +1,115 @@
+import { createPortal } from "react-dom";
+import { Trash2, AlertTriangle, Loader } from "lucide-react";
+import type { Worktree } from "../../types/workspace";
+
+export type DeleteDialogState = {
+  worktree: Worktree;
+  projectPath: string;
+  projectId: string;
+  sessionId: string | null;
+  branchName: string | null;
+  deleteBranch: boolean;
+  step: 1 | 2;
+  loading: boolean;
+  error: string | null;
+};
+
+type Props = {
+  dialog: DeleteDialogState;
+  onChange: (updater: (d: DeleteDialogState | null) => DeleteDialogState | null) => void;
+  onCancel: () => void;
+  onConfirm: () => void;
+};
+
+export function DeleteWorkspaceDialog({ dialog, onChange, onCancel, onConfirm }: Props) {
+  return createPortal(
+    <div className="naming-modal-overlay" onClick={() => !dialog.loading && onCancel()}>
+      <div className="naming-modal delete-dialog" onClick={(e) => e.stopPropagation()}>
+        {dialog.step === 1 ? (
+          <>
+            <div className="naming-modal-header">
+              <Trash2 size={15} />
+              <span>Delete workspace?</span>
+            </div>
+            <p className="naming-modal-desc">
+              This will permanently remove{" "}
+              <strong className="delete-dialog-name">{dialog.worktree.name}</strong>{" "}
+              from disk. Any uncommitted work in this worktree will be lost.
+            </p>
+
+            <label className="delete-dialog-branch-row">
+              <input
+                type="checkbox"
+                checked={dialog.deleteBranch}
+                onChange={(e) =>
+                  onChange((d) => d ? { ...d, deleteBranch: e.target.checked, error: null } : null)
+                }
+              />
+              <span>Also delete branch{dialog.branchName ? ` "${dialog.branchName}"` : ""}</span>
+            </label>
+            {dialog.deleteBranch && (
+              <div className="delete-dialog-branch-warn">
+                <AlertTriangle size={13} />
+                You will be asked to confirm this separately.
+              </div>
+            )}
+
+            {dialog.error && <p className="naming-modal-error">{dialog.error}</p>}
+
+            <div className="naming-modal-actions">
+              <button
+                className="naming-modal-btn naming-modal-btn--cancel"
+                disabled={dialog.loading}
+                onClick={onCancel}
+              >
+                Cancel
+              </button>
+              <button
+                className="naming-modal-btn naming-modal-btn--delete"
+                disabled={dialog.loading}
+                onClick={onConfirm}
+              >
+                {dialog.loading ? <Loader size={13} className="spin" /> : "Delete workspace"}
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="naming-modal-header delete-dialog-header--danger">
+              <AlertTriangle size={15} />
+              <span>Delete branch permanently?</span>
+            </div>
+            <p className="naming-modal-desc">
+              Branch{" "}
+              <code className="delete-dialog-branch-code">{dialog.branchName}</code>{" "}
+              will be deleted from the repository. This cannot be undone.
+            </p>
+            <div className="delete-dialog-final-warn">
+              All commits on this branch that are not merged will be permanently lost.
+            </div>
+
+            {dialog.error && <p className="naming-modal-error">{dialog.error}</p>}
+
+            <div className="naming-modal-actions">
+              <button
+                className="naming-modal-btn naming-modal-btn--cancel"
+                disabled={dialog.loading}
+                onClick={onCancel}
+              >
+                Cancel
+              </button>
+              <button
+                className="naming-modal-btn naming-modal-btn--delete"
+                disabled={dialog.loading}
+                onClick={onConfirm}
+              >
+                {dialog.loading ? <Loader size={13} className="spin" /> : "Delete branch & workspace"}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+}
diff --git a/src/components/WorkspaceView/DiffPickerModal.tsx b/src/components/WorkspaceView/DiffPickerModal.tsx
new file mode 100644
index 0000000..3c85dc6
--- /dev/null
+++ b/src/components/WorkspaceView/DiffPickerModal.tsx
@@ -0,0 +1,76 @@
+import { GitBranch } from "lucide-react";
+import type { BranchInfo } from "../../types/git";
+
+type ProjectLite = { id: string; name: string; path: string };
+
+type Props<P extends ProjectLite> = {
+  projects: P[];
+  branches: Record<string, BranchInfo[]>;
+  loading: boolean;
+  onPick: (project: P, branch: BranchInfo) => void;
+};
+
+export function DiffPickerModal<P extends ProjectLite>({ projects, branches, loading, onPick }: Props<P>) {
+  return (
+    <div className="diff-screen">
+      <div className="diff-screen-body">
+        <div className="diff-screen-inner">
+          <header className="diff-screen-header">
+            <h1 className="diff-screen-title">Open a diff</h1>
+            <p className="diff-screen-subtitle">Choose a branch to review its changes</p>
+          </header>
+
+          {projects.length === 0 ? (
+            <div className="diff-screen-empty-state">
+              <GitBranch size={22} />
+              <p>No projects open</p>
+            </div>
+          ) : projects.map((project) => {
+            const list = branches[project.id] ?? [];
+            return (
+              <section key={project.id} className="diff-screen-project">
+                <div className="diff-screen-project-header">
+                  <span className="diff-screen-project-name">{project.name}</span>
+                  {list.length > 0 && (
+                    <span className="diff-screen-project-count">{list.length}</span>
+                  )}
+                </div>
+                <div className="diff-screen-branches">
+                  {loading && list.length === 0 ? (
+                    <div className="diff-screen-loading">Loading branches…</div>
+                  ) : list.length === 0 ? (
+                    <div className="diff-screen-empty">No branches found</div>
+                  ) : list.map((branch) => {
+                    const canOpen = !!branch.worktree_path || branch.is_current;
+                    const kind = branch.is_current
+                      ? "head"
+                      : branch.worktree_path
+                        ? "worktree"
+                        : branch.is_remote
+                          ? "remote"
+                          : "local";
+                    return (
+                      <button
+                        key={`${project.id}:${branch.name}:${branch.is_remote ? "remote" : "local"}`}
+                        className={`diff-screen-branch diff-screen-branch--${kind}`}
+                        disabled={!canOpen}
+                        onMouseDown={(e) => { e.preventDefault(); onPick(project, branch); }}
+                        title={branch.worktree_path ?? (branch.is_current ? project.path : "Open this branch in a worktree to view its diff")}
+                      >
+                        <GitBranch size={14} className="diff-screen-branch-icon" />
+                        <span className="diff-screen-branch-name">{branch.name}</span>
+                        <span className={`diff-screen-branch-meta diff-screen-branch-meta--${kind}`}>
+                          {kind}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/WorkspaceView/PromptPickerPopover.tsx b/src/components/WorkspaceView/PromptPickerPopover.tsx
new file mode 100644
index 0000000..b4426e7
--- /dev/null
+++ b/src/components/WorkspaceView/PromptPickerPopover.tsx
@@ -0,0 +1,58 @@
+import { createPortal } from "react-dom";
+import { Check, Plus } from "lucide-react";
+import type { PromptEntry } from "../../store/prompts";
+
+type Props = {
+  pos: { top: number; right: number };
+  items: PromptEntry[];
+  sentId: string | null;
+  onCopy: (p: PromptEntry) => void;
+  onManage: () => void;
+};
+
+export function PromptPickerPopover({ pos, items, sentId, onCopy, onManage }: Props) {
+  return createPortal(
+    <div className="sub-bar-prompt-picker" style={{ top: pos.top, right: pos.right, position: "fixed" }}>
+      <div className="sub-bar-prompt-picker-header">Prompt Library</div>
+      <div className="sub-bar-prompt-picker-items">
+        {items.length > 0 ? (
+          items.map((p) => {
+            const sent = sentId === p.id;
+            return (
+              <div key={p.id} className={`sub-bar-prompt-item${sent ? " sub-bar-prompt-item--sent" : ""}`}>
+                <div className="sub-bar-prompt-item-text">
+                  <span className="sub-bar-prompt-title">{p.title}</span>
+                  <span className="sub-bar-prompt-preview">
+                    {p.body.length > 60 ? p.body.slice(0, 60) + "…" : p.body}
+                  </span>
+                </div>
+                <button
+                  className={`sub-bar-prompt-copy-btn${sent ? " sub-bar-prompt-copy-btn--sent" : ""}`}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    if (sent) return;
+                    onCopy(p);
+                  }}
+                >
+                  {sent ? <><Check size={11} /> Copied</> : <>Copy</>}
+                </button>
+              </div>
+            );
+          })
+        ) : (
+          <div className="sub-bar-prompt-empty">No prompts yet</div>
+        )}
+      </div>
+      <div className="sub-bar-prompt-picker-footer">
+        <button
+          className="sub-bar-prompt-manage-btn"
+          onMouseDown={(e) => { e.preventDefault(); onManage(); }}
+        >
+          <Plus size={12} />
+          <span>Manage Prompts</span>
+        </button>
+      </div>
+    </div>,
+    document.body
+  );
+}
diff --git a/src/components/WorkspaceView/TerminalNamingModal.tsx b/src/components/WorkspaceView/TerminalNamingModal.tsx
new file mode 100644
index 0000000..f7947f3
--- /dev/null
+++ b/src/components/WorkspaceView/TerminalNamingModal.tsx
@@ -0,0 +1,246 @@
+import { createPortal } from "react-dom";
+import { TerminalSquare, Loader, ChevronDown, SquareSlash } from "lucide-react";
+import { AgentIcon, type AgentConfig } from "../NewSessionMenu";
+import type { BranchInfo } from "../../types/git";
+import type { RefObject } from "react";
+
+type Props = {
+  pendingAgent: AgentConfig | null;
+
+  gitNotFoundRoot: boolean;
+  gitNotFound: boolean;
+
+  // shared root-git branch
+  rootRemoteUrl: string;
+  setRootRemoteUrl: (v: string) => void;
+  rootGitInitializing: boolean;
+  rootGitError: string | null;
+  onSkipGitForRoot: () => void;
+  onInitGitForRoot: () => void;
+  onBackFromRoot: () => void;
+
+  // git-not-found variant
+  terminalError: string | null;
+  terminalLaunching: boolean;
+  onContinueWithoutGit: () => void;
+  onInitGitAndLaunch: () => void;
+  onBackFromGitNotFound: () => void;
+
+  // main naming variant
+  useExistingBranch: boolean;
+  setUseExistingBranch: (v: boolean) => void;
+  existingBranches: BranchInfo[];
+  existingBranchName: string;
+  setExistingBranchName: (v: string) => void;
+  existingDropOpen: boolean;
+  setExistingDropOpen: (updater: (v: boolean) => boolean) => void;
+  existingDropRef: RefObject<HTMLDivElement | null>;
+  terminalName: string;
+  setTerminalName: (v: string) => void;
+  terminalPrompt: string;
+  setTerminalPrompt: (v: string) => void;
+  onCancel: () => void;
+  onLaunchInRoot: () => void;
+  onLaunchTerminalWorktree: () => void;
+};
+
+export function TerminalNamingModal(p: Props) {
+  return createPortal(
+    <div className="naming-modal-overlay" onClick={p.onCancel}>
+      <div className="naming-modal" onClick={(e) => e.stopPropagation()}>
+        {p.gitNotFoundRoot ? (
+          <>
+            <div className="naming-modal-header">
+              {p.pendingAgent ? <AgentIcon hint={p.pendingAgent.hint} size={15} /> : <TerminalSquare size={15} />}
+              <span>No Git Repository Found</span>
+            </div>
+            <p className="naming-modal-desc">
+              This folder isn't a Git repository. Initialize one to enable version
+              control and the Changes tab, or continue without Git (the Changes tab
+              will show a notice instead).
+            </p>
+            <div className="naming-modal-prompt-block">
+              <label className="naming-modal-prompt-label">
+                Remote URL
+                <span className="naming-modal-prompt-hint"> — optional</span>
+              </label>
+              <input
+                className="naming-modal-input"
+                type="text"
+                placeholder="https://github.com/user/repo.git"
+                value={p.rootRemoteUrl}
+                onChange={(e) => p.setRootRemoteUrl(e.target.value)}
+              />
+            </div>
+            {p.rootGitError && <p className="naming-modal-error">{p.rootGitError}</p>}
+            <div className="naming-modal-actions naming-modal-actions--git">
+              <div className="naming-modal-actions-row">
+                <button
+                  className="naming-modal-btn naming-modal-btn--cancel"
+                  disabled={p.rootGitInitializing}
+                  onClick={p.onSkipGitForRoot}
+                >
+                  {p.rootGitInitializing ? <Loader size={13} className="spin" /> : "Continue without Git"}
+                </button>
+                <button
+                  className="naming-modal-btn naming-modal-btn--create"
+                  disabled={p.rootGitInitializing}
+                  onClick={p.onInitGitForRoot}
+                >
+                  {p.rootGitInitializing ? <Loader size={13} className="spin" /> : "Initialize Git"}
+                </button>
+              </div>
+              <button
+                className="naming-modal-btn naming-modal-btn--back"
+                onClick={p.onBackFromRoot}
+              >
+                Back
+              </button>
+            </div>
+          </>
+        ) : p.gitNotFound ? (
+          <>
+            <div className="naming-modal-header">
+              {p.pendingAgent ? <AgentIcon hint={p.pendingAgent.hint} size={15} /> : <TerminalSquare size={15} />}
+              <span>No Git Repository Found</span>
+            </div>
+            <p className="naming-modal-desc">
+              This folder isn't a Git repository. Tempest can initialize one for you, or
+              you can continue in a basic terminal-only environment with limited functionality.
+            </p>
+            {p.terminalError && <p className="naming-modal-error">{p.terminalError}</p>}
+            <div className="naming-modal-actions naming-modal-actions--git">
+              <div className="naming-modal-actions-row">
+                <button
+                  className="naming-modal-btn naming-modal-btn--cancel"
+                  disabled={p.terminalLaunching}
+                  onClick={p.onContinueWithoutGit}
+                >
+                  {p.terminalLaunching ? <Loader size={13} className="spin" /> : "Continue without Git"}
+                </button>
+                <button
+                  className="naming-modal-btn naming-modal-btn--create"
+                  disabled={p.terminalLaunching}
+                  onClick={p.onInitGitAndLaunch}
+                >
+                  {p.terminalLaunching ? <Loader size={13} className="spin" /> : "Initialize Git & Launch"}
+                </button>
+              </div>
+              <button
+                className="naming-modal-btn naming-modal-btn--back"
+                onClick={p.onBackFromGitNotFound}
+              >
+                Back
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="naming-modal-header">
+              {p.pendingAgent ? <AgentIcon hint={p.pendingAgent.hint} size={15} /> : <TerminalSquare size={15} />}
+              <span>{p.pendingAgent ? `New ${p.pendingAgent.name} Session` : "New Workspace"}</span>
+            </div>
+            <p className="naming-modal-desc">Give your workspace a name to get started.</p>
+            {(() => {
+              const pickableBranches = p.existingBranches.filter((b) => !b.is_current);
+              const noOtherBranches = pickableBranches.length === 0;
+              return (
+                <>
+                  <div className="naming-modal-branch-toggle">
+                    <button
+                      className={`naming-modal-branch-opt${!p.useExistingBranch ? " active" : ""}`}
+                      onClick={() => p.setUseExistingBranch(false)}
+                    >New branch</button>
+                    <button
+                      className={`naming-modal-branch-opt${p.useExistingBranch ? " active" : ""}${noOtherBranches ? " naming-modal-branch-opt--disabled" : ""}`}
+                      onClick={() => { if (!noOtherBranches) p.setUseExistingBranch(true); }}
+                      disabled={noOtherBranches}
+                      title={noOtherBranches ? "No other branches exist" : undefined}
+                    >Use existing</button>
+                  </div>
+                  {p.useExistingBranch ? (
+                    <div className="naming-modal-drop" ref={p.existingDropRef}>
+                      <button
+                        type="button"
+                        className={`naming-modal-input naming-modal-drop-btn${p.existingDropOpen ? " naming-modal-drop-btn--open" : ""}`}
+                        onClick={() => p.setExistingDropOpen((v) => !v)}
+                      >
+                        <span className={p.existingBranchName ? "" : "naming-modal-drop-placeholder"}>
+                          {p.existingBranchName || "Select a branch…"}
+                        </span>
+                        <ChevronDown size={12} className={`naming-modal-drop-chevron${p.existingDropOpen ? " naming-modal-drop-chevron--open" : ""}`} />
+                      </button>
+                      {p.existingDropOpen && (
+                        <div className="naming-modal-drop-menu">
+                          {pickableBranches.map((b) => (
+                            <button
+                              key={b.name}
+                              type="button"
+                              className={`naming-modal-drop-item${b.name === p.existingBranchName ? " naming-modal-drop-item--active" : ""}${b.is_worktree ? " naming-modal-drop-item--worktree" : ""}${b.is_remote ? " naming-modal-drop-item--remote" : ""}`}
+                              onClick={() => { p.setExistingBranchName(b.name); p.setExistingDropOpen(() => false); }}
+                            >
+                              <span className="naming-modal-drop-item-name">{b.name}</span>
+                              {b.is_worktree && <span className="naming-modal-drop-badge">open</span>}
+                              {b.is_remote && <span className="naming-modal-drop-badge">remote</span>}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <input
+                      className="naming-modal-input"
+                      type="text"
+                      placeholder="e.g. my-feature"
+                      value={p.terminalName}
+                      onChange={(e) => p.setTerminalName(e.target.value)}
+                      onKeyDown={(e) => { if (e.key === "Enter") p.onLaunchTerminalWorktree(); }}
+                      autoFocus
+                    />
+                  )}
+                </>
+              );
+            })()}
+            {p.pendingAgent && (
+              <div className="naming-modal-prompt-block">
+                <div className="naming-modal-prompt-label">
+                  Custom Prompt
+                  <span className="naming-modal-prompt-hint">Sent to the agent the moment it starts — leave blank to begin manually.</span>
+                </div>
+                <textarea
+                  className="naming-modal-prompt"
+                  placeholder="e.g. Refactor the auth module to use JWT tokens"
+                  value={p.terminalPrompt}
+                  onChange={(e) => p.setTerminalPrompt(e.target.value)}
+                  rows={3}
+                />
+              </div>
+            )}
+            {p.terminalError && <p className="naming-modal-error">{p.terminalError}</p>}
+            <div className="naming-modal-actions">
+              <button className="naming-modal-btn naming-modal-btn--cancel" onClick={p.onCancel}>
+                Cancel
+              </button>
+              <button
+                className="naming-modal-btn naming-modal-btn--root"
+                disabled={p.terminalLaunching}
+                onClick={p.onLaunchInRoot}
+                title="Open directly in the project root — no branch created"
+              >
+                {p.terminalLaunching ? <Loader size={13} className="spin" /> : <><SquareSlash size={13} />in Root</>}
+              </button>
+              <button
+                className="naming-modal-btn naming-modal-btn--create"
+                disabled={(p.useExistingBranch ? !p.existingBranchName.trim() : !p.terminalName.trim()) || p.terminalLaunching}
+                onClick={p.onLaunchTerminalWorktree}
+              >
+                {p.terminalLaunching ? <Loader size={13} className="spin" /> : p.useExistingBranch ? "Open Branch" : "in Branch"}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+}
diff --git a/src/components/WorkspaceView/TitleBar.tsx b/src/components/WorkspaceView/TitleBar.tsx
new file mode 100644
index 0000000..c647900
--- /dev/null
+++ b/src/components/WorkspaceView/TitleBar.tsx
@@ -0,0 +1,30 @@
+import { Minus, Square, X } from "lucide-react";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { Tooltip } from "../Tooltip";
+
+const win = getCurrentWindow();
+
+export function TitleBar() {
+  return (
+    <div className="topbar">
+      <div className="topbar-drag" data-tauri-drag-region />
+      <div className="topbar-right">
+        <Tooltip content="Minimize" placement="bottom">
+          <button className="win-btn" onClick={() => win.minimize()}>
+            <Minus size={11} />
+          </button>
+        </Tooltip>
+        <Tooltip content="Maximize" placement="bottom">
+          <button className="win-btn" onClick={() => win.toggleMaximize()}>
+            <Square size={10} />
+          </button>
+        </Tooltip>
+        <Tooltip content="Close" placement="bottom">
+          <button className="win-btn win-btn--close" onClick={() => win.close()}>
+            <X size={12} />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/Segmented.tsx b/src/components/ui/Segmented.tsx
new file mode 100644
index 0000000..ab569c5
--- /dev/null
+++ b/src/components/ui/Segmented.tsx
@@ -0,0 +1,19 @@
+export function Segmented({ options, value, onChange }: {
+  options: { value: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="sp-segmented">
+      {options.map((o) => (
+        <button
+          key={o.value}
+          className={`sp-segmented-btn${value === o.value ? " sp-segmented-btn--active" : ""}`}
+          onClick={() => onChange(o.value)}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/ui/SettingRow.tsx b/src/components/ui/SettingRow.tsx
new file mode 100644
index 0000000..1c7d506
--- /dev/null
+++ b/src/components/ui/SettingRow.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+export function SettingRow({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <div className="sp-row">
+      <div className="sp-row-text">
+        <span className="sp-row-label">{label}</span>
+        {hint && <span className="sp-row-hint">{hint}</span>}
+      </div>
+      <div className="sp-row-control">{children}</div>
+    </div>
+  );
+}
diff --git a/src/components/ui/SpSelect.tsx b/src/components/ui/SpSelect.tsx
new file mode 100644
index 0000000..9fc8a27
--- /dev/null
+++ b/src/components/ui/SpSelect.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+export function SpSelect({ value, options, onChange }: {
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (v: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const label = options.find((o) => o.value === value)?.label ?? value;
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  return (
+    <div className="sp-drop" ref={ref}>
+      <button
+        className={`sp-drop-btn${open ? " sp-drop-btn--open" : ""}`}
+        onClick={() => setOpen((v) => !v)}
+        type="button"
+      >
+        <span className="sp-drop-label">{label}</span>
+        <ChevronDown size={11} className="sp-drop-chevron" />
+      </button>
+      {open && (
+        <div className="sp-drop-menu">
+          {options.map((o) => (
+            <button
+              key={o.value}
+              type="button"
+              className={`sp-drop-item${o.value === value ? " sp-drop-item--active" : ""}`}
+              onClick={() => { onChange(o.value); setOpen(false); }}
+            >
+              {o.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ui/Stepper.tsx b/src/components/ui/Stepper.tsx
new file mode 100644
index 0000000..fe4dd10
--- /dev/null
+++ b/src/components/ui/Stepper.tsx
@@ -0,0 +1,15 @@
+import { Tooltip } from "../Tooltip";
+
+export function Stepper({ value, min, max, onChange }: { value: number; min: number; max: number; onChange: (v: number) => void }) {
+  return (
+    <div className="sp-stepper">
+      <Tooltip content="Decrease" placement="top">
+        <button className="sp-stepper-btn" disabled={value <= min} onClick={() => onChange(value - 1)}>−</button>
+      </Tooltip>
+      <span className="sp-stepper-val">{value}</span>
+      <Tooltip content="Increase" placement="top">
+        <button className="sp-stepper-btn" disabled={value >= max} onClick={() => onChange(value + 1)}>+</button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/src/components/ui/ToggleSwitch.tsx b/src/components/ui/ToggleSwitch.tsx
new file mode 100644
index 0000000..1748e4c
--- /dev/null
+++ b/src/components/ui/ToggleSwitch.tsx
@@ -0,0 +1,12 @@
+export function ToggleSwitch({ on, onChange }: { on: boolean; onChange: (v: boolean) => void }) {
+  return (
+    <button
+      className={`sp-toggle${on ? " sp-toggle--on" : ""}`}
+      onClick={() => onChange(!on)}
+      role="switch"
+      aria-checked={on}
+    >
+      <span className="sp-toggle-thumb" />
+    </button>
+  );
+}
diff --git a/src/lib/agentArgs.ts b/src/lib/agentArgs.ts
new file mode 100644
index 0000000..796b408
--- /dev/null
+++ b/src/lib/agentArgs.ts
@@ -0,0 +1,40 @@
+import { AGENT_CONFIGS } from "../components/NewSessionMenu";
+import { getSettings } from "../store/appSettings";
+
+export function buildAgentArgs(
+  agent: string,
+  sessionId: string,
+  conversationId?: string,
+  prompt?: string,
+  model?: string,
+): string[] {
+  const config = AGENT_CONFIGS.find((a) => a.hint === agent);
+  const args: string[] = [];
+
+  if (model && (agent === "claude" || agent === "gemini" || agent === "codex")) {
+    args.push("--model", model);
+  }
+
+  if (config && conversationId && config.resumeArgs) {
+    for (const arg of config.resumeArgs) {
+      args.push(arg.replace("{UUID}", conversationId));
+    }
+  } else if (config && conversationId && config.captureResumeArgs) {
+    for (const arg of config.captureResumeArgs) {
+      args.push(arg.replace("{UUID}", conversationId));
+    }
+  } else if (config && !conversationId && config.sessionIdArgs) {
+    for (const arg of config.sessionIdArgs) {
+      args.push(arg.replace("{UUID}", sessionId));
+    }
+  }
+
+  if (config?.autoApproveArgs && getSettings().autoApprove) {
+    for (const arg of config.autoApproveArgs) {
+      args.push(arg);
+    }
+  }
+
+  if (prompt) args.push(prompt);
+  return args;
+}
diff --git a/src/lib/chatHistory.ts b/src/lib/chatHistory.ts
new file mode 100644
index 0000000..e0502a0
--- /dev/null
+++ b/src/lib/chatHistory.ts
@@ -0,0 +1,70 @@
+import { getRuntimeState, setRuntimeState } from "./runtimeState";
+import type { CommitInfo, GitStatusEntry } from "./chatTools";
+import type { ChatMessage, PersistedMessage } from "../types/chat";
+
+export const MAX_CHAT_HISTORY = 100;
+
+export function loadChatHistory(projectPath?: string): ChatMessage[] {
+  if (!projectPath) return [];
+  const persisted = (getRuntimeState().chatHistory[projectPath] ?? []) as PersistedMessage[];
+  return persisted.map(m => ({
+    id: m.id,
+    role: m.role,
+    parts: m.parts ?? [{ type: "text" as const, content: m.content ?? "" }],
+  }));
+}
+
+export function saveChatHistory(projectPath: string | undefined, msgs: ChatMessage[]): void {
+  if (!projectPath) return;
+  const persisted: PersistedMessage[] = msgs.slice(-MAX_CHAT_HISTORY).map(m => ({
+    id: m.id,
+    role: m.role,
+    parts: m.parts,
+  }));
+  const st = getRuntimeState();
+  setRuntimeState({ chatHistory: { ...st.chatHistory, [projectPath]: persisted } });
+}
+
+export const BASE_SYSTEM =
+  "You are Tempest, an AI engineering companion embedded in the developer's IDE. " +
+  "You help the engineer understand systems, research solutions, plan work, review code, and debug. " +
+  "Be precise, technical, and concise. When the engineer's question relates to their project, ground " +
+  "your answer in the project context provided below rather than guessing. " +
+  "You have tools to read files, list directories, check git status and history, search the codebase, " +
+  "and propose agent tasks for complex multi-step work.";
+
+export function buildProjectContext(
+  path: string,
+  branch: string,
+  commits: CommitInfo[],
+  status: GitStatusEntry[],
+  remoteUrl: string,
+): string {
+  const lines: string[] = [];
+  lines.push(`Repository path: ${path}`);
+  if (remoteUrl) lines.push(`Remote (origin): ${remoteUrl}`);
+  if (branch) lines.push(`Current branch: ${branch}`);
+  if (commits.length > 0) {
+    lines.push("Recent commits:");
+    for (const c of commits) {
+      lines.push(`  - ${c.hash} ${c.subject} (${c.author}, ${c.relative_date})`);
+    }
+  }
+  if (status.length > 0) {
+    lines.push("Modified / untracked files:");
+    for (const s of status.slice(0, 30)) {
+      lines.push(`  - [${s.status}] ${s.path}`);
+    }
+    if (status.length > 30) lines.push(`  …and ${status.length - 30} more`);
+  } else {
+    lines.push("Working tree: clean");
+  }
+  return lines.join("\n");
+}
+
+export function buildSystemPrompt(custom: string, projectContext: string): string {
+  const parts = [BASE_SYSTEM];
+  if (projectContext) parts.push("## Project context\n" + projectContext);
+  if (custom.trim()) parts.push("## Additional instructions\n" + custom.trim());
+  return parts.join("\n\n");
+}
diff --git a/src/lib/chatModels.ts b/src/lib/chatModels.ts
new file mode 100644
index 0000000..4bfec54
--- /dev/null
+++ b/src/lib/chatModels.ts
@@ -0,0 +1,208 @@
+import { FileText, Folder, GitCommit, GitBranch, Bot, Database, Terminal } from "lucide-react";
+import type React from "react";
+
+export interface ChatProvider {
+  id: string;
+  label: string;
+  icon: string;
+  invert: boolean;
+}
+
+export interface ChatModel {
+  id: string;
+  label: string;
+}
+
+export const CDN = "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@latest/icons/";
+
+export const CHAT_PROVIDERS: ChatProvider[] = [
+  { id: "anthropic",  label: "Anthropic",  icon: "anthropic.svg",      invert: true  },
+  { id: "openai",     label: "OpenAI",     icon: "openai.svg",          invert: true  },
+  { id: "gemini",     label: "Gemini",     icon: "gemini-color.svg",    invert: false },
+  { id: "mistral",    label: "Mistral",    icon: "mistral-color.svg",   invert: false },
+  { id: "deepseek",   label: "DeepSeek",   icon: "deepseek-color.svg",  invert: false },
+  { id: "xai",        label: "xAI",        icon: "xai.svg",             invert: true  },
+  { id: "groq",       label: "Groq",       icon: "groq.svg",            invert: true  },
+  { id: "openrouter", label: "OpenRouter", icon: "openrouter.svg",      invert: true  },
+  { id: "ollama",     label: "Ollama",     icon: "ollama.svg",          invert: true  },
+];
+
+export const PROVIDER_MODELS: Record<string, ChatModel[]> = {
+  anthropic: [
+    { id: "claude-fable-5",            label: "Claude Fable 5"    },
+    { id: "claude-opus-4-8",           label: "Claude Opus 4.8"   },
+    { id: "claude-opus-4-7",           label: "Claude Opus 4.7"   },
+    { id: "claude-opus-4-6",           label: "Claude Opus 4.6"   },
+    { id: "claude-opus-4-5",           label: "Claude Opus 4.5"   },
+    { id: "claude-sonnet-5",           label: "Claude Sonnet 5"   },
+    { id: "claude-sonnet-4-6",         label: "Claude Sonnet 4.6" },
+    { id: "claude-sonnet-4-5",         label: "Claude Sonnet 4.5" },
+    { id: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5"  },
+  ],
+  openai: [
+    { id: "gpt-5.5",      label: "GPT-5.5"      },
+    { id: "gpt-5.4",      label: "GPT-5.4"      },
+    { id: "gpt-5.4-mini", label: "GPT-5.4 Mini" },
+    { id: "gpt-5.4-nano", label: "GPT-5.4 Nano" },
+    { id: "gpt-5",        label: "GPT-5"        },
+    { id: "gpt-5-mini",   label: "GPT-5 Mini"   },
+    { id: "gpt-4.1",      label: "GPT-4.1"      },
+    { id: "gpt-4.1-mini", label: "GPT-4.1 Mini" },
+    { id: "gpt-4.1-nano", label: "GPT-4.1 Nano" },
+    { id: "gpt-4o",       label: "GPT-4o"       },
+    { id: "gpt-4o-mini",  label: "GPT-4o Mini"  },
+    { id: "o4-mini",      label: "o4 Mini"      },
+    { id: "o3",           label: "o3"           },
+    { id: "o3-mini",      label: "o3 Mini"      },
+  ],
+  gemini: [
+    { id: "gemini-3.5-flash",              label: "Gemini 3.5 Flash"      },
+    { id: "gemini-3.1-pro-preview",        label: "Gemini 3.1 Pro"        },
+    { id: "gemini-3.1-flash-lite-preview", label: "Gemini 3.1 Flash Lite" },
+    { id: "gemini-3-flash-preview",        label: "Gemini 3 Flash"        },
+    { id: "gemini-2.5-pro",               label: "Gemini 2.5 Pro"        },
+    { id: "gemini-2.5-flash",             label: "Gemini 2.5 Flash"      },
+    { id: "gemini-flash-latest",          label: "Gemini Flash"          },
+    { id: "gemini-flash-lite-latest",     label: "Gemini Flash Lite"     },
+  ],
+  mistral: [
+    { id: "mistral-large-latest",  label: "Mistral Large"    },
+    { id: "mistral-large-2512",    label: "Mistral Large 3"  },
+    { id: "mistral-medium-2508",   label: "Mistral Medium"   },
+    { id: "magistral-medium-2509", label: "Magistral Medium" },
+    { id: "magistral-small-2509",  label: "Magistral Small"  },
+    { id: "mistral-small-latest",  label: "Mistral Small"    },
+    { id: "mistral-small-2603",    label: "Mistral Small 4"  },
+    { id: "devstral-2512",         label: "Devstral"         },
+    { id: "ministral-14b-2512",    label: "Ministral 14B"    },
+    { id: "ministral-8b-2512",     label: "Ministral 8B"     },
+    { id: "ministral-3b-2512",     label: "Ministral 3B"     },
+  ],
+  deepseek: [
+    { id: "deepseek-v4-pro",   label: "DeepSeek V4 Pro"   },
+    { id: "deepseek-v4-flash", label: "DeepSeek V4 Flash" },
+    { id: "deepseek-v3",       label: "DeepSeek V3"       },
+    { id: "deepseek-chat",     label: "DeepSeek Chat"     },
+    { id: "deepseek-reasoner", label: "DeepSeek Reasoner" },
+  ],
+  xai: [
+    { id: "grok-4.20-non-reasoning-latest",  label: "Grok 4.20"               },
+    { id: "grok-4.20-reasoning-latest",      label: "Grok 4.20 Reasoning"     },
+    { id: "grok-4-1-fast-non-reasoning",     label: "Grok 4.1 Fast"           },
+    { id: "grok-4-1-fast-reasoning",         label: "Grok 4.1 Fast Reasoning" },
+    { id: "grok-4-fast-non-reasoning",       label: "Grok 4 Fast"             },
+    { id: "grok-4-fast-reasoning",           label: "Grok 4 Fast Reasoning"   },
+    { id: "grok-4",                          label: "Grok 4"                  },
+    { id: "grok-code-fast-1",               label: "Grok Code Fast"          },
+    { id: "grok-3",                          label: "Grok 3"                  },
+    { id: "grok-3-mini",                     label: "Grok 3 Mini"             },
+  ],
+  groq: [
+    { id: "openai/gpt-oss-120b",              label: "GPT-OSS 120B"  },
+    { id: "openai/gpt-oss-20b",               label: "GPT-OSS 20B"   },
+    { id: "qwen/qwen3-32b",                   label: "Qwen 3 32B"    },
+    { id: "qwen/qwen3.6-27b",                 label: "Qwen 3.6 27B"  },
+    { id: "moonshotai/kimi-k2-instruct-0905", label: "Kimi K2"       },
+    { id: "llama-3.3-70b-versatile",          label: "Llama 3.3 70B" },
+    { id: "llama-3.1-8b-instant",             label: "Llama 3.1 8B"  },
+  ],
+  openrouter: [
+    { id: "openrouter/auto",                   label: "Auto"                   },
+    { id: "deepseek/deepseek-v3.2",            label: "DeepSeek V3.2"          },
+    { id: "deepseek/deepseek-v3.2-thinking",   label: "DeepSeek V3.2 Thinking" },
+    { id: "deepseek/deepseek-v3.1-terminus",   label: "DeepSeek V3.1 Terminus" },
+    { id: "google/gemini-3.1-pro-preview",     label: "Gemini 3.1 Pro"         },
+    { id: "google/gemini-3-flash",             label: "Gemini 3 Flash"         },
+    { id: "google/gemini-2.5-pro",             label: "Gemini 2.5 Pro"         },
+    { id: "moonshotai/kimi-k2.5",              label: "Kimi K2.5"              },
+    { id: "moonshotai/kimi-k2-thinking-turbo", label: "Kimi K2 Thinking Turbo" },
+    { id: "minimax/minimax-m2.5",              label: "MiniMax M2.5"           },
+    { id: "alibaba/qwen3-coder-plus",          label: "Qwen 3 Coder Plus"      },
+    { id: "alibaba/qwen3-max",                 label: "Qwen 3 Max"             },
+    { id: "meta-llama/llama-3.3-70b-instruct", label: "Llama 3.3 70B"          },
+    { id: "mistral/mistral-large-latest",      label: "Mistral Large"          },
+  ],
+  ollama: [
+    { id: "llama3.3",      label: "Llama 3.3 70B"  },
+    { id: "llama3.2",      label: "Llama 3.2"      },
+    { id: "llama3.1",      label: "Llama 3.1"      },
+    { id: "qwen3",         label: "Qwen 3"         },
+    { id: "qwen2.5-coder", label: "Qwen 2.5 Coder" },
+    { id: "deepseek-r1",   label: "DeepSeek R1"    },
+    { id: "deepseek-v3",   label: "DeepSeek V3"    },
+    { id: "codellama",     label: "Code Llama"     },
+    { id: "mistral",       label: "Mistral 7B"     },
+    { id: "neural-chat",   label: "Neural Chat"    },
+  ],
+};
+
+export const MODEL_CONTEXT: Record<string, number> = {
+  "claude-fable-5":              2_000_000,
+  "claude-opus-4-8":               200_000,
+  "claude-opus-4-7":               200_000,
+  "claude-opus-4-6":               200_000,
+  "claude-opus-4-5":               200_000,
+  "claude-sonnet-5":               200_000,
+  "claude-sonnet-4-6":             200_000,
+  "claude-sonnet-4-5":             200_000,
+  "claude-haiku-4-5-20251001":     200_000,
+  "gpt-4.1":                     1_047_576,
+  "gpt-4.1-mini":                1_047_576,
+  "gpt-4.1-nano":                1_047_576,
+  "gpt-4o":                        128_000,
+  "gpt-4o-mini":                   128_000,
+  "o3":                            200_000,
+  "o3-mini":                       200_000,
+  "o4-mini":                       200_000,
+  "gemini-2.5-pro":              1_048_576,
+  "gemini-2.5-flash":            1_048_576,
+  "gemini-flash-latest":         1_048_576,
+  "gemini-flash-lite-latest":    1_048_576,
+  "mistral-large-latest":          131_072,
+  "mistral-large-2512":            131_072,
+  "mistral-medium-2508":           131_072,
+  "magistral-medium-2509":         131_072,
+  "magistral-small-2509":          131_072,
+  "mistral-small-latest":          131_072,
+  "mistral-small-2603":            131_072,
+  "deepseek-v3":                   163_840,
+  "deepseek-chat":                 163_840,
+  "deepseek-reasoner":             163_840,
+  "grok-4":                        256_000,
+  "grok-3":                        131_072,
+  "grok-3-mini":                   131_072,
+};
+
+export const DEFAULT_CONTEXT = 128_000;
+
+export function getContextSize(modelId: string): number {
+  return MODEL_CONTEXT[modelId] ?? DEFAULT_CONTEXT;
+}
+
+export type LucideIcon = React.ComponentType<{ size?: number; className?: string }>;
+
+export const TOOL_ICON_MAP: Record<string, LucideIcon> = {
+  read_file:          FileText,
+  list_files:         Folder,
+  run_git_log:        GitCommit,
+  run_git_status:     GitBranch,
+  propose_agent_task: Bot,
+};
+
+export const TOOL_LABEL_MAP: Record<string, string> = {
+  read_file:          "Read file",
+  list_files:         "List files",
+  run_git_log:        "Git log",
+  run_git_status:     "Git status",
+  propose_agent_task: "Propose agent",
+};
+
+export function getToolIcon(toolName: string): LucideIcon {
+  if (toolName.startsWith("atlas_")) return Database;
+  return TOOL_ICON_MAP[toolName] ?? Terminal;
+}
+
+export function getToolLabel(toolName: string): string {
+  if (toolName.startsWith("atlas_")) return toolName.slice(6).replace(/_/g, " ");
+  return TOOL_LABEL_MAP[toolName] ?? toolName.replace(/_/g, " ");
+}
diff --git a/src/lib/format.ts b/src/lib/format.ts
new file mode 100644
index 0000000..d54802a
--- /dev/null
+++ b/src/lib/format.ts
@@ -0,0 +1,12 @@
+export function folderName(p: string): string {
+  return p.replace(/[/\\]+$/, "").split(/[/\\]/).pop() ?? p;
+}
+
+export function timeAgo(iso: string): string {
+  const s = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+  if (s < 60) return "just now";
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  if (s < 604800) return `${Math.floor(s / 86400)}d ago`;
+  return `${Math.floor(s / 604800)}w ago`;
+}
diff --git a/src/lib/git.ts b/src/lib/git.ts
new file mode 100644
index 0000000..0e78ed9
--- /dev/null
+++ b/src/lib/git.ts
@@ -0,0 +1,47 @@
+import type { DiffLine } from "../types/git";
+
+export interface Hunk {
+  header: DiffLine;
+  lines: DiffLine[];
+}
+
+export function buildPrUrl(remoteUrl: string, branch: string): string {
+  const normalized = remoteUrl.trim().replace(/\.git$/, "");
+  let host = "", path = "";
+  const ssh = normalized.match(/^git@([^:]+):(.+)$/);
+  if (ssh) { host = ssh[1]; path = ssh[2]; }
+  else {
+    try { const u = new URL(normalized); host = u.host; path = u.pathname.replace(/^\//, ""); }
+    catch { return normalized; }
+  }
+  const eb = encodeURIComponent(branch);
+  if (host === "github.com") return `https://github.com/${path}/compare/${eb}?expand=1`;
+  if (host === "gitlab.com" || host.includes("gitlab"))
+    return `https://gitlab.com/${path}/-/merge_requests/new?merge_request[source_branch]=${eb}`;
+  if (host === "bitbucket.org")
+    return `https://bitbucket.org/${path}/pull-requests/new?source=${eb}`;
+  return `https://${host}/${path}`;
+}
+
+export function statusClass(s: string) {
+  if (s === "M") return "status-m";
+  if (s === "A") return "status-a";
+  if (s === "D") return "status-d";
+  if (s === "R") return "status-r";
+  return "status-u";
+}
+
+export function groupHunks(lines: DiffLine[]): Hunk[] {
+  const hunks: Hunk[] = [];
+  let cur: Hunk | null = null;
+  for (const line of lines) {
+    if (line.kind === "hunk") {
+      if (cur) hunks.push(cur);
+      cur = { header: line, lines: [] };
+    } else if (cur) {
+      cur.lines.push(line);
+    }
+  }
+  if (cur) hunks.push(cur);
+  return hunks;
+}
diff --git a/src/lib/knowledgeGraph.ts b/src/lib/knowledgeGraph.ts
new file mode 100644
index 0000000..9df7000
--- /dev/null
+++ b/src/lib/knowledgeGraph.ts
@@ -0,0 +1,17 @@
+export function resolveKindColors(): Record<string, string> {
+  const s = getComputedStyle(document.documentElement);
+  const v = (n: string) => s.getPropertyValue(`--tempest-${n}`).trim();
+  return {
+    function:  v("accent-blue"),   method:    v("accent-blue"),
+    class:     v("accent-yellow"), interface: v("accent-green"),
+    type:      v("accent-purple"),  variable:  v("fg-muted"),
+    constant:  v("fg-muted"),      _default:  v("fg-subtle"),
+  };
+}
+
+export function nodeRadius(deg: number): number {
+  return 4 + Math.sqrt(deg) * 1.5;
+}
+
+export const MINIMAP_W = 180;
+export const MINIMAP_H = 120;
diff --git a/src/lib/knowledgeGraphRender.ts b/src/lib/knowledgeGraphRender.ts
new file mode 100644
index 0000000..cd35845
--- /dev/null
+++ b/src/lib/knowledgeGraphRender.ts
@@ -0,0 +1,222 @@
+import type { GNode, GLink } from "../types/knowledgeGraph";
+import { MINIMAP_W, MINIMAP_H } from "./knowledgeGraph";
+
+export type Camera = { x: number; y: number; zoom: number };
+export type MinimapTf = { scale: number; ox: number; oy: number } | null;
+
+export type RenderCtx = {
+  canvas: HTMLCanvasElement | null;
+  minimap: HTMLCanvasElement | null;
+  nodes: GNode[];
+  links: GLink[];
+  camera: Camera;
+  hovered: GNode | null;
+  selected: GNode | null;
+  hoverNeighborIds: Set<string>;
+  hoverConnLinks: Set<GLink>;
+  selNeighborIds: Set<string>;
+  selConnLinks: Set<GLink>;
+  setMinimapTf: (tf: MinimapTf) => void;
+};
+
+function renderMinimap(ctx: RenderCtx) {
+  const mm = ctx.minimap;
+  if (!mm) return;
+  const c = mm.getContext("2d");
+  if (!c) return;
+
+  const dpr = window.devicePixelRatio || 1;
+  const W = MINIMAP_W, H = MINIMAP_H;
+  c.setTransform(dpr, 0, 0, dpr, 0, 0);
+  c.clearRect(0, 0, W, H);
+
+  const { nodes, links } = ctx;
+  if (nodes.length === 0) { ctx.setMinimapTf(null); return; }
+
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const n of nodes) {
+    x0 = Math.min(x0, n.x - n.radius); y0 = Math.min(y0, n.y - n.radius);
+    x1 = Math.max(x1, n.x + n.radius); y1 = Math.max(y1, n.y + n.radius);
+  }
+  const pad = 8;
+  const bw = Math.max(1, x1 - x0), bh = Math.max(1, y1 - y0);
+  const scale = Math.min((W - pad * 2) / bw, (H - pad * 2) / bh);
+  const ox = (W - bw * scale) / 2 - x0 * scale;
+  const oy = (H - bh * scale) / 2 - y0 * scale;
+  ctx.setMinimapTf({ scale, ox, oy });
+  const wx2 = (wx: number) => wx * scale + ox;
+  const wy2 = (wy: number) => wy * scale + oy;
+
+  const mmStyle = getComputedStyle(document.documentElement);
+  const edgeCol = mmStyle.getPropertyValue("--tempest-border-subtle").trim() || "#2a2a2a";
+
+  c.strokeStyle = edgeCol;
+  c.globalAlpha = 0.15;
+  c.lineWidth = 1;
+  c.beginPath();
+  for (const l of links) {
+    c.moveTo(wx2(l.source.x), wy2(l.source.y));
+    c.lineTo(wx2(l.target.x), wy2(l.target.y));
+  }
+  c.stroke();
+
+  c.globalAlpha = 1;
+  for (const n of nodes) {
+    c.beginPath();
+    c.arc(wx2(n.x), wy2(n.y), 1.5, 0, Math.PI * 2);
+    c.fillStyle = n.color;
+    c.fill();
+  }
+
+  const canvas = ctx.canvas;
+  if (canvas) {
+    const cw = canvas.width / dpr, ch = canvas.height / dpr;
+    const { x: tx, y: ty, zoom } = ctx.camera;
+    const vwx0 = -tx / zoom,        vwy0 = -ty / zoom;
+    const vwx1 = (cw - tx) / zoom,  vwy1 = (ch - ty) / zoom;
+    const rx = wx2(vwx0), ry = wy2(vwy0);
+    const rw = (vwx1 - vwx0) * scale, rh = (vwy1 - vwy0) * scale;
+    const cs = getComputedStyle(document.documentElement);
+    c.fillStyle   = cs.getPropertyValue("--tempest-minimap-overlay").trim();
+    c.strokeStyle = cs.getPropertyValue("--tempest-minimap-border").trim();
+    c.lineWidth   = 1;
+    c.fillRect(rx, ry, rw, rh);
+    c.strokeRect(rx, ry, rw, rh);
+  }
+}
+
+export function renderGraph(ctx: RenderCtx) {
+  const canvas = ctx.canvas;
+  if (!canvas) return;
+  const c = canvas.getContext("2d");
+  if (!c) return;
+
+  const dpr  = window.devicePixelRatio || 1;
+  const cw   = canvas.width  / dpr;
+  const ch   = canvas.height / dpr;
+  const { x: tx, y: ty, zoom } = ctx.camera;
+  const { nodes, links, hovered, selected } = ctx;
+  const hasHover     = hovered  !== null;
+  const hasSel       = selected !== null;
+  const hasHighlight = hasHover || hasSel;
+  const activeNode     = hovered ?? selected;
+  const activeNeibIds  = hasHover ? ctx.hoverNeighborIds : ctx.selNeighborIds;
+  const activeConnLnks = hasHover ? ctx.hoverConnLinks   : ctx.selConnLinks;
+  const showLabels = zoom > 0.55;
+
+  c.clearRect(0, 0, canvas.width, canvas.height);
+  c.save();
+  c.scale(dpr, dpr);
+
+  const style = getComputedStyle(document.documentElement);
+  c.fillStyle = style.getPropertyValue("--tempest-bg-editor").trim() || "#0f0f0f";
+  c.fillRect(0, 0, cw, ch);
+
+  c.translate(tx, ty);
+  c.scale(zoom, zoom);
+
+  const edgeBase = style.getPropertyValue("--tempest-border-subtle").trim() || "#2a2a2a";
+
+  if (!hasHighlight) {
+    c.beginPath();
+    c.strokeStyle = edgeBase;
+    c.lineWidth   = 0.8 / zoom;
+    c.globalAlpha = 0.28;
+    for (const l of links) {
+      c.moveTo(l.source.x, l.source.y);
+      c.lineTo(l.target.x, l.target.y);
+    }
+    c.stroke();
+  } else {
+    c.beginPath();
+    c.strokeStyle = edgeBase;
+    c.lineWidth   = 0.6 / zoom;
+    c.globalAlpha = 0.05;
+    for (const l of links) {
+      if (!activeConnLnks.has(l)) {
+        c.moveTo(l.source.x, l.source.y);
+        c.lineTo(l.target.x, l.target.y);
+      }
+    }
+    c.stroke();
+
+    if (activeNode) {
+      c.beginPath();
+      c.strokeStyle = activeNode.color;
+      c.lineWidth   = 1.2 / zoom;
+      c.globalAlpha = 0.7;
+      for (const l of activeConnLnks) {
+        c.moveTo(l.source.x, l.source.y);
+        c.lineTo(l.target.x, l.target.y);
+      }
+      c.stroke();
+    }
+  }
+
+  const marg = 60 / zoom;
+  const vx0 = (-tx / zoom) - marg, vx1 = ((cw - tx) / zoom) + marg;
+  const vy0 = (-ty / zoom) - marg, vy1 = ((ch - ty) / zoom) + marg;
+
+  for (const n of nodes) {
+    const isHov  = n === hovered;
+    const isSel  = n === selected;
+    const isNeib = hasHighlight && activeNeibIds.has(n.id);
+    const focus  = isHov || isSel;
+    const alpha  = (hasHighlight && !focus && !isNeib) ? 0.1 : 1;
+    const r      = n.radius;
+
+    c.globalAlpha = alpha;
+
+    if (focus || isNeib) {
+      const gr   = r * (focus ? 4 : 2.5);
+      const grad = c.createRadialGradient(n.x, n.y, r * 0.2, n.x, n.y, gr);
+      grad.addColorStop(0, n.color + (focus ? "70" : "50"));
+      grad.addColorStop(1, n.color + "00");
+      c.fillStyle   = grad;
+      c.globalAlpha = alpha;
+      c.beginPath();
+      c.arc(n.x, n.y, gr, 0, Math.PI * 2);
+      c.fill();
+      c.globalAlpha = alpha;
+    }
+
+    c.beginPath();
+    c.arc(n.x, n.y, r, 0, Math.PI * 2);
+    c.fillStyle = n.color;
+    c.fill();
+
+    if (isSel) {
+      c.beginPath();
+      c.arc(n.x, n.y, r + 4 / zoom, 0, Math.PI * 2);
+      c.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue("--tempest-fg-default").trim();
+      c.lineWidth   = 1.5 / zoom;
+      c.globalAlpha = 0.9;
+      c.stroke();
+    } else if (isHov) {
+      c.beginPath();
+      c.arc(n.x, n.y, r + 3 / zoom, 0, Math.PI * 2);
+      c.strokeStyle = n.color;
+      c.lineWidth   = 1.5 / zoom;
+      c.globalAlpha = 0.55;
+      c.stroke();
+    }
+
+    if (showLabels) {
+      const inVP  = n.x > vx0 && n.x < vx1 && n.y > vy0 && n.y < vy1;
+      const show  = inVP && (focus || isNeib || zoom > 1.1);
+      if (show) {
+        const fs = Math.max(8, Math.min(13, 11 / zoom));
+        c.font        = `${fs}px "Geist Mono", monospace`;
+        c.textAlign   = "center";
+        c.fillStyle   = focus ? getComputedStyle(document.documentElement).getPropertyValue("--tempest-fg-default").trim() : getComputedStyle(document.documentElement).getPropertyValue("--tempest-fg-muted").trim();
+        c.globalAlpha = focus ? 1 : 0.75 * alpha;
+        c.fillText(n.label, n.x, n.y + r + fs * 1.4);
+      }
+    }
+  }
+
+  c.globalAlpha = 1;
+  c.restore();
+
+  renderMinimap(ctx);
+}
diff --git a/src/lib/paneLayout.ts b/src/lib/paneLayout.ts
new file mode 100644
index 0000000..06fc336
--- /dev/null
+++ b/src/lib/paneLayout.ts
@@ -0,0 +1,50 @@
+export type SplitDir = "h" | "v";
+export interface SplitLeaf   { type: "leaf";  sessionId: string; }
+export interface SplitBranch { type: "split"; id: string; dir: SplitDir; ratio: number; first: PaneNode; second: PaneNode; }
+export type PaneNode = SplitLeaf | SplitBranch;
+export interface PaneRect    { top: number; left: number; width: number; height: number; }
+
+export function paneSessionIds(n: PaneNode): string[] {
+  if (n.type === "leaf") return [n.sessionId];
+  return [...paneSessionIds(n.first), ...paneSessionIds(n.second)];
+}
+
+export function replaceLeaf(n: PaneNode, id: string, repl: PaneNode): PaneNode | null {
+  if (n.type === "leaf") return n.sessionId === id ? repl : null;
+  const a = replaceLeaf(n.first, id, repl); if (a) return { ...n, first: a } as SplitBranch;
+  const b = replaceLeaf(n.second, id, repl); if (b) return { ...n, second: b } as SplitBranch;
+  return null;
+}
+
+export function removeLeaf(n: PaneNode, id: string): PaneNode | null {
+  if (n.type === "leaf") return null;
+  if (n.first.type  === "leaf" && n.first.sessionId  === id) return n.second;
+  if (n.second.type === "leaf" && n.second.sessionId === id) return n.first;
+  const a = removeLeaf(n.first, id);  if (a !== null) return { ...n, first: a }  as SplitBranch;
+  const b = removeLeaf(n.second, id); if (b !== null) return { ...n, second: b } as SplitBranch;
+  return null;
+}
+
+export function patchRatio(n: PaneNode, splitId: string, ratio: number): PaneNode {
+  if (n.type === "leaf") return n;
+  const b = n as SplitBranch;
+  if (b.id === splitId) return { ...b, ratio };
+  return { ...b, first: patchRatio(b.first, splitId, ratio), second: patchRatio(b.second, splitId, ratio) };
+}
+
+export function computeRects(n: PaneNode, r: PaneRect = { top: 0, left: 0, width: 1, height: 1 }): Map<string, PaneRect> {
+  if (n.type === "leaf") return new Map([[n.sessionId, r]]);
+  const { dir, ratio } = n as SplitBranch;
+  const a: PaneRect = dir === "v" ? { ...r, width: r.width * ratio }                              : { ...r, height: r.height * ratio };
+  const b: PaneRect = dir === "v" ? { ...r, left: r.left + r.width * ratio, width: r.width * (1 - ratio) } : { ...r, top: r.top + r.height * ratio, height: r.height * (1 - ratio) };
+  return new Map([...computeRects(n.first, a), ...computeRects(n.second, b)]);
+}
+
+export interface HandleInfo { id: string; dir: SplitDir; ratio: number; parentRect: PaneRect; }
+export function collectHandles(n: PaneNode, r: PaneRect = { top: 0, left: 0, width: 1, height: 1 }): HandleInfo[] {
+  if (n.type === "leaf") return [];
+  const { id, dir, ratio } = n as SplitBranch;
+  const a: PaneRect = dir === "v" ? { ...r, width: r.width * ratio }                              : { ...r, height: r.height * ratio };
+  const b: PaneRect = dir === "v" ? { ...r, left: r.left + r.width * ratio, width: r.width * (1 - ratio) } : { ...r, top: r.top + r.height * ratio, height: r.height * (1 - ratio) };
+  return [{ id, dir, ratio, parentRect: r }, ...collectHandles(n.first, a), ...collectHandles(n.second, b)];
+}
diff --git a/src/store/sessions.ts b/src/store/sessions.ts
index dc94609..dd68c45 100644
--- a/src/store/sessions.ts
+++ b/src/store/sessions.ts
@@ -78,6 +78,30 @@ export function subSessionWorktreePath(key: string): string {
   return idx === -1 ? "" : key.slice(0, idx);
 }
 
+// Worktree terminals: additional PTY sessions in a worktree that aren't agents.
+// Keyed by worktreePath + "::term::" + sessionId so multiple terminals coexist at
+// the same cwd alongside the (single) agent entry keyed by the raw cwd.
+export const TERM_SESSION_PREFIX = "::term::";
+
+export function termSessionKey(worktreePath: string, sessionId: string): string {
+  return `${worktreePath}${TERM_SESSION_PREFIX}${sessionId}`;
+}
+
+export function termSessionIdFromKey(key: string): string {
+  const idx = key.indexOf(TERM_SESSION_PREFIX);
+  return idx === -1 ? "" : key.slice(idx + TERM_SESSION_PREFIX.length);
+}
+
+export function getTermSessionsForWorktree(
+  worktreePath: string
+): { key: string; session: WorktreeSession }[] {
+  const prefix = `${worktreePath}${TERM_SESSION_PREFIX}`;
+  const store = getStore();
+  return Object.entries(store)
+    .filter(([key]) => key.startsWith(prefix))
+    .map(([key, session]) => ({ key, session }));
+}
+
 // Returns all persisted sub-sessions for a given worktree path.
 // Used by the startup restore loop and pruneOrphanedSessions.
 export function getSubSessionsForWorktree(
diff --git a/src/types/chat.ts b/src/types/chat.ts
new file mode 100644
index 0000000..62ddb12
--- /dev/null
+++ b/src/types/chat.ts
@@ -0,0 +1,36 @@
+export type TextPart = { type: "text"; content: string };
+
+export type ToolCallPart = {
+  type: "tool-call";
+  id: string;
+  toolName: string;
+  args: unknown;
+  result?: unknown;
+  status: "running" | "complete";
+};
+
+export type ProposalPart = {
+  type: "proposal";
+  id: string;
+  agent: string;
+  model?: string;
+  task: string;
+  reason: string;
+  launched: boolean;
+  dismissed: boolean;
+};
+
+export type MessagePart = TextPart | ToolCallPart | ProposalPart;
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  parts: MessagePart[];
+}
+
+export interface PersistedMessage {
+  id: string;
+  role: "user" | "assistant";
+  content?: string;
+  parts?: MessagePart[];
+}
diff --git a/src/types/git.ts b/src/types/git.ts
new file mode 100644
index 0000000..65ec88f
--- /dev/null
+++ b/src/types/git.ts
@@ -0,0 +1,20 @@
+export interface BranchInfo {
+  name: string;
+  is_current: boolean;
+  is_remote: boolean;
+  is_worktree: boolean;
+  worktree_path?: string;
+}
+
+export interface DiffLine {
+  kind: "hunk" | "context" | "added" | "removed";
+  line_old: number | null;
+  line_new: number | null;
+  content: string;
+}
+
+export interface FileStats {
+  path: string;
+  adds: number;
+  dels: number;
+}
diff --git a/src/types/knowledgeGraph.ts b/src/types/knowledgeGraph.ts
new file mode 100644
index 0000000..cd9d16c
--- /dev/null
+++ b/src/types/knowledgeGraph.ts
@@ -0,0 +1,25 @@
+import type { SimulationNodeDatum, SimulationLinkDatum } from "d3-force";
+
+export interface IndexedProject { id: string; name: string; path: string }
+
+export interface SymbolNodeRaw {
+  id: string; name: string; kind: string; file_path: string;
+  start_line: number; end_line: number; language: string;
+}
+
+export interface SymbolEdgeRaw { source: string; target: string; kind: string }
+
+export interface GraphData { nodes: SymbolNodeRaw[]; edges: SymbolEdgeRaw[] }
+
+export type LoadState = "idle" | "loading" | "ready" | "error";
+
+export interface GNode extends SimulationNodeDatum {
+  id: string; label: string; kind: string; color: string; radius: number;
+  file_path: string; start_line: number; language: string;
+  x: number; y: number; vx: number; vy: number;
+  fx?: number | null; fy?: number | null;
+}
+
+export interface GLink extends SimulationLinkDatum<GNode> {
+  source: GNode; target: GNode; kind: string;
+}
diff --git a/src/types/workspace.ts b/src/types/workspace.ts
new file mode 100644
index 0000000..24a552b
--- /dev/null
+++ b/src/types/workspace.ts
@@ -0,0 +1,37 @@
+export interface Session {
+  id: string;
+  name: string;
+  cwd: string;
+  projectId: string;
+  kind?: "terminal" | "diff" | "preview" | "editor" | "chat";
+  previewUrl?: string;
+  agent?: string;
+  conversationId?: string;
+  instanceId: string;
+  createdAt: string;
+  isRootSession?: boolean;
+  noGit?: boolean;
+  sandboxed?: boolean;
+  parentSessionId?: string;
+  storeKey?: string;
+  initialDiffPath?: string;
+  metadata: {
+    resumeCount: number;
+    hasBeenResumed: boolean;
+  };
+}
+
+export interface Worktree {
+  name: string;
+  path: string;
+}
+
+export interface Project {
+  id: string;
+  name: string;
+  path: string;
+  expanded: boolean;
+  worktrees: Worktree[];
+}
+
+export type NavSection = "overview" | "knowledge-base";