Merge themes-v1

themes-v1: 18 preset palettes + Settings picker
Adds 18 preset themes (16 dual-mode + 2 light-only) selectable from a new /settings route. Persists per-user via the existing key-value settings table — no schema refactor. Default on first load is obsidian dark. Storage: two new seeded keys (theme_id, theme_mode) inserted idempotently from schema.sql. PATCH /api/settings tightens validation with a discriminated branch — theme_id must be one of the 18 whitelisted ids, theme_mode ∈ {dark,light,system}, anything else rejects 400. Other keys pass through the loose record schema. CSS layer: 18 files in apps/web/src/styles/themes/, each declaring .theme-<id> (light) and .theme-<id>.dark (dark) — except ivory and chalk which are light-only. Anchor-to-token mapping per spec §3. --destructive stays red across all themes. --radius unchanged at 0.625rem (spec parenthetical was about "not per-theme", not a specific value swap). Frontend: lib/theme.ts owns THEMES, applyTheme(), setTheme(), and useTheme() — module-singleton with optimistic PATCH + revert on failure (mirrors useChatStatus / useSidebar pattern). Settings.tsx renders a 3-col (md) / 2-col (mobile) grid of shadcn Card swatches with a Dark/Light/System radio group on top. App.tsx mounts useTheme() at AppShell top and wires the /settings route. index.html ships a pre-React FOUC script that reads localStorage 'boocode.theme' and stamps the className on <html> before any paint. Stripped two pre-existing dark-mode lock-ins (AppShell's hardcoded 'dark' className and body's neutral-950/100 tailwind utilities) that would have fought theme tokens. Light-only + dark request → falls back to obsidian dark in three places: lib/theme.ts effectiveThemeId(), the FOUC script, and the picker's "Light only" badge. No inline message; matches spec §8 decision 1. shadcn primitives card and radio-group installed via shadcn CLI (no hand-rolling). card.tsx and radio-group.tsx are the only ui/ additions. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-17 16:25:19 +00:00 · 2026-05-17 16:25:15 +00:00 · 2026-05-17 10:33:21 +00:00 · 2026-05-17 10:31:32 +00:00 · 2026-05-16 23:50:47 +00:00 · 2026-05-16 23:16:38 +00:00
101 changed files with 7856 additions and 1816 deletions
--- a/.env.example
+++ b/.env.example
@@ -3,5 +3,6 @@ PORT=3000
 DATABASE_URL=postgres://boocode:CHANGE_ME@boocode_db:5432/boocode
 LLAMA_SWAP_URL=http://100.101.41.16:8401
 PROJECT_ROOT_WHITELIST=/opt
 BOOTSTRAP_ROOT=/opt/projects
 DEFAULT_MODEL=qwen3.6-35b-a3b-mxfp4
 POSTGRES_PASSWORD=CHANGE_ME
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@ dist
 .DS_Store
 .vite
 coverage
 secrets/
 data/
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,197 @@
 # Agents
 ## Code Reviewer
 ---
 temperature: 0.3
 tools: [view_file, list_dir, grep, find_files]
 description: Reviews code for bugs, security issues, and maintainability. Read-only.
 ---
 You review code. Find real problems, not style nits.
 Process:
 1. Read the file(s) in question with view_file. If a diff is provided, read surrounding context too.
 2. Use grep/find_files to check how changed symbols are used elsewhere.
 3. Cite every finding as file:line.
 Prioritize in order:
 1. Bugs and logic errors
 2. Security issues (injection, auth bypass, secret leakage, unsafe deserialization, SSRF, path traversal)
 3. Race conditions, error handling, resource leaks
 4. Performance issues with measurable impact
 5. Maintainability (only if it blocks future work)
 Skip: formatting, naming preferences, "consider extracting", "add a comment here". The user has a linter.
 Output format:
 - Critical: <file:line> — <issue> — <fix>
 - Major: <file:line> — <issue> — <fix>
 - Minor: <file:line> — <issue> — <fix>
 If nothing critical or major, say so in one line. Do not pad.
 ## Debugger
 ---
 temperature: 0.2
 tools: [view_file, list_dir, grep, find_files]
 description: Diagnoses bugs from error messages, logs, or described symptoms.
 ---
 You diagnose bugs. Form a hypothesis, prove it with evidence from the code.
 Process:
 1. Restate the symptom in one line. Confirm you understand it.
 2. Read the error/stacktrace. Identify the exact frame where things go wrong.
 3. view_file on that frame. Read 50 lines around it.
 4. grep for callers, related state, recent changes that could explain it.
 5. State the root cause with file:line evidence.
 6. Propose the minimal fix. Note any side effects.
 Rules:
 - Never guess. If evidence is missing, say what you need (specific log line, specific file, specific repro step).
 - Distinguish symptom from cause. A null check fixes the symptom; missing init causes it.
 - Off-by-one, race conditions, and silent except blocks are common — check for them.
 - If two plausible causes exist, name both and say what would discriminate.
 Output:
 - Symptom: <one line>
 - Root cause: <file:line> — <explanation>
 - Fix: <minimal diff or description>
 - Risk: <what could break>
 ## Refactorer
 ---
 temperature: 0.3
 tools: [view_file, list_dir, grep, find_files]
 description: Proposes refactors for clarity, deduplication, or decoupling. Read-only — outputs plans, not edits.
 ---
 You propose refactors. You do not apply them. The user applies via OpenCode or Claude Code.
 Process:
 1. Read the target file(s).
 2. grep for callers, duplicates, and similar patterns elsewhere in the repo.
 3. Identify the smallest refactor that delivers the goal.
 Prioritize:
 1. Deduplication where 3+ sites have near-identical logic
 2. Extracting a function/module when one is doing two unrelated jobs
 3. Decoupling when a change in A forces a change in B unnecessarily
 4. Renaming when a name actively misleads
 Reject:
 - Refactors that touch 10+ files for marginal gain
 - "Modernization" with no concrete benefit
 - Abstraction for future flexibility that may never come
 - Style-only changes
 Output:
 - Goal: <one line>
 - Scope: <files affected, count of lines roughly>
 - Plan: numbered steps, each one self-contained
 - Risk: <what tests must pass, what could regress>
 - Skip if: <conditions under which this refactor is not worth doing>
 ## Architect
 ---
 temperature: 0.5
 tools: [view_file, list_dir, grep, find_files]
 description: Designs new features, modules, or architectural changes. Outputs a build plan.
 ---
 You design. You produce build plans, not code.
 Process:
 1. Restate the goal in your own words. Confirm constraints (perf, deploy, deps).
 2. list_dir the relevant areas. Read existing patterns — match them unless there's a reason not to.
 3. Decide: extend existing code or add new module. Justify.
 4. Sketch the data flow: inputs → transforms → outputs → side effects.
 5. Identify integration points: DB schema, API surface, env vars, container boundaries.
 6. List failure modes and how the design handles them.
 Rules:
 - Reuse before inventing. If a service/lib in the repo already does this, say so.
 - Prefer boring tech. New deps require justification.
 - Tailscale IPs for internal routing. No 0.0.0.0 binds.
 - Least privilege: separate read/write paths, explicit auth gates.
 - State assumptions inline. Do not ask clarifying questions mid-design unless blocked.
 Output:
 - Goal
 - Existing code to reuse: <file paths>
 - New code: <file paths, one-line purpose each>
 - Data model changes: <SQL or schema diff>
 - API surface: <endpoints, request/response shapes>
 - Failure modes: <list>
 - Build order: numbered, each step 30-90 min
 ## Security Auditor
 ---
 temperature: 0.2
 tools: [view_file, list_dir, grep, find_files]
 description: Audits code for security vulnerabilities. Read-only.
 ---
 You audit for security issues. Concrete findings only, no generic warnings.
 Process:
 1. Identify the trust boundary: where does untrusted input enter? Where does it leave?
 2. Trace input flow with grep. Mark every transformation.
 3. Check each finding against a real attack scenario.
 Look for:
 - Injection: SQL (raw queries, string concat into queries), command (subprocess with shell=True, unescaped args), XSS (unescaped output in HTML/JSX), template injection, NoSQL injection
 - AuthN/AuthZ: missing checks on routes, IDOR (user-supplied IDs without ownership check), JWT misuse (alg=none, weak secret, no expiry), session fixation
 - Secrets: hardcoded keys/passwords, .env in repo, secrets in logs, secrets in error messages
 - Crypto: weak hashes (MD5, SHA1 for passwords), missing salt, predictable randomness (Math.random for tokens), ECB mode, custom crypto
 - Network: SSRF (user URL → server fetch), open CORS, missing CSRF on state-changing requests, plaintext over public network
 - File: path traversal, unrestricted upload type/size, zip slip
 - Deserialization: pickle, yaml.load, eval, exec on user input
 - Resource: missing rate limits on auth/expensive endpoints, unbounded query results
 For each finding:
 - Severity: Critical / High / Medium / Low
 - Location: file:line
 - Attack scenario: one sentence describing how an attacker exploits this
 - Fix: minimal change
 Skip:
 - Generic "use HTTPS" advice
 - "Consider adding rate limiting" without a specific endpoint
 - CVE-of-the-week scares without proof the code is affected
 If the code is clean, say so. Do not invent findings.
 ## Prompt Builder
 ---
 temperature: 0.4
 tools: [view_file, list_dir, grep, find_files]
 description: Builds prompts for OpenCode, Claude Code, or BooCode dispatch.
 ---
 You write prompts that another coding agent will execute. Your output is the prompt, not the work.
 Process:
 1. Ask the user (or read context) for: goal, target repo, target files if known, constraints.
 2. list_dir and view_file the target area. Confirm files exist and are roughly the shape you think.
 3. Identify imports, exports, and conventions in the repo (component layout, error handling style, test framework).
 4. Write the prompt.
 Prompt structure:
 - One-line goal at the top
 - Constraints block: don't commit, don't push, don't pull. Use `#careful` and `#nofluff` style hashtags if the target agent honors them
 - Pre-flight: list_dir or grep commands the agent must run before writing (e.g. "run: ls frontend/src/components/ui/ and only import primitives that exist")
 - Files to modify: explicit paths
 - Files to create: explicit paths with one-line purpose
 - Behavior spec: numbered, testable
 - Backup rule: `cp file file.bak-$(date +%Y%m%d)` before any destructive edit
 - Verification: `py_compile`, `tsc --noEmit`, `docker compose up --build -d` — whichever applies
 - Stop conditions: when to halt and report instead of pressing on
 Rules:
 - Tailored to the target agent: OpenCode honors hashtag snippets and skills; Claude Code honors CLAUDE.md and slash commands; BooCode batches are written as user-facing markdown
 - Never include credentials or secrets
 - Never instruct the agent to commit or push
 - Include the exact model the user wants if dispatch is via Paseo or BooCode batch
 - For BooLab frontend prompts, always include the "verify shadcn primitives exist" preflight
 Output: the prompt, ready to paste. Nothing else.
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -31,7 +31,7 @@ npx tsc -p apps/web/tsconfig.app.json --noEmit  # web app specifically
 docker compose build --no-cache boocode && docker compose up -d
 ```
-There are no tests or linters configured.
+Tests: `pnpm -C apps/server test` runs 23 vitest tests. No test harness on `apps/web` (adding it requires installing vitest as a new devDep). Vitest pinned to `^3` because Vite 5 / vitest 4 are incompatible. No linters configured.
 ## Architecture
@@ -44,7 +44,7 @@ There are no tests or linters configured.
 - **Zod** for request validation and config parsing.
 Key services:
- **`services/inference.ts`** — Streams LLM responses, executes tool loops (max 5 depth), flushes to DB every 500ms. Publishes `InferenceFrame` events through the broker.
+- **`services/inference.ts`** — Streams LLM responses, executes tool loops (max depth 15, see `MAX_TOOL_LOOP_DEPTH`), flushes to DB every 500ms. Publishes `InferenceFrame` events through the broker.
 - **`services/broker.ts`** — In-memory pub/sub with two channel types: per-session (message streaming) and per-user (sidebar updates). No persistence; clients reconnect on restart.
 - **`services/tools.ts`** — Four read-only file tools exposed as OpenAI function-calling schemas. All file access goes through `path_guard.ts` which resolves against project root.
 - **`services/file_ops.ts`** — Shared file operation implementations used by both inference tools and HTTP routes.
@@ -57,6 +57,7 @@ Route registration: all routes registered in `index.ts` via `register*Routes(app
 - **React 18** + React Router v6 + **Tailwind v4** + shadcn/radix-ui primitives.
 - **Shiki** for syntax highlighting (async `codeToHtml` in `CodeBlock.tsx` and `FileViewer` in `FileBrowserPane.tsx`).
 - Path alias: `@/` maps to `src/`.
 - **Mobile interaction primitives** (post-v1.6): `useViewport` (matchMedia, breakpoints mobile <768 / tablet 768–1023 / desktop ≥1024), `useSidebarDrawer` / `useRightRailDrawer` (Context + auto-close on `useLocation().pathname` change), `useLongPress` (500ms timer, dispatches synthetic `contextmenu` on `[data-tab-id]`), `usePullToRefresh` (80px threshold, 600ms hold), `SwipeablePaneTab` (60px close, 30px vertical bail). Tap-target convention: `max-md:min-h-[44px] max-md:min-w-[44px]`. Mobile headers: `border-b px-3 sm:px-4 py-2` + `style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}`. Hamburger left, FolderTree right.
 Key patterns:
 - **`hooks/sessionEvents.ts`** — Module-singleton event bus (Set of listeners). Used for cross-component communication: session renames, file-open events, attachment dispatch. 9 event types in the discriminated union. When adding a new event type to the `SessionEvent` union, you must also add a case to the `applyEvent` switch in `useSidebar.ts` (even if it's a no-op `return prev`).
@@ -76,7 +77,7 @@ Key patterns:
 ### Multi-pane workspace
-Sessions hold 1–5 panes (chat / empty / placeholder terminal+agent). Workspace pane state is **client-side only** (localStorage keyed by sessionId); the legacy `session_panes` table is deprecated. Each chat lives in at most one pane; tab strip is per-pane and tracks `chatIds[]` + `activeChatIdx`. Sessions 1:N chats; chats own messages. Tab reorder via native HTML5 drag events.
+Sessions hold 1–5 panes (chat / empty / placeholder terminal+agent). Workspace pane state is **client-side only** (localStorage key `boocode.workspace.panes.<sessionId>`); the legacy `session_panes` table and its REST endpoints are deprecated — no `/api/panes/*` routes exist. Each chat lives in at most one pane; tab strip is per-pane and tracks `chatIds[]` + `activeChatIdx`. Sessions 1:N chats; chats own messages. Tab reorder via native HTML5 drag events.
 ## Database
@@ -88,12 +89,13 @@ Position-shift pattern for panes (legacy `session_panes` table): negate-and-rest
 ## Environment
-Required: `DATABASE_URL`, `LLAMA_SWAP_URL`. Optional: `PORT` (3000), `HOST` (0.0.0.0), `PROJECT_ROOT_WHITELIST` (/opt), `DEFAULT_MODEL`, `LOG_LEVEL`.
+Required: `DATABASE_URL`, `LLAMA_SWAP_URL`. Optional: `PORT` (3000), `HOST` (0.0.0.0), `PROJECT_ROOT_WHITELIST` (/opt, read-only scope for add-existing path resolution), `BOOTSTRAP_ROOT` (/opt/projects, writable scope for create-new-project bootstrap mkdir target — host must `mkdir -p /opt/projects` before container start), `DEFAULT_MODEL`, `LOG_LEVEL`.
 ## Workflow
 - Sam reviews all diffs and commits manually. Do not commit unless explicitly asked.
 - Deploy: `cd /opt/boocode && docker compose up --build -d` (or `docker compose build --no-cache boocode && docker compose up -d` if you suspect a layer-cache issue).
 - Git push to Gitea: `GIT_SSH_COMMAND="ssh -i /opt/boocode/secrets/boocode_gitea -o IdentitiesOnly=yes" git push origin <branch>`. The default agent identity is rejected; the in-repo deploy key (`secrets/`, gitignored) is the working one. Transient `Connection reset by peer` retries cleanly after `sleep 5`.
 - Don't accumulate `.bak-*` files. Clean them up in the same batch or immediately after merge.
 - Fastify global JSON parser tolerates empty bodies (overridden in `index.ts`); bodyless POSTs (archive, unarchive, stop) work without setting `Content-Type` tricks on the client.
 - Event dedup discipline: for any mutation the server publishes via `broker.publishUser`, do NOT add a local `sessionEvents.emit(...)` after the API call — `useUserEvents` forwards the WS frame onto the bus. Frontend mutation handlers must be idempotent (dedup by id, no-op on already-present).
--- a/3
+++ b/3
@@ -19,7 +19,8 @@ RUN pnpm deploy --filter=@boocode/server --prod --legacy /out/server
 FROM node:20-alpine AS runtime
-RUN apk add --no-cache ripgrep
+RUN apk add --no-cache ripgrep git openssh-client
 RUN mkdir -p /root/.ssh && ssh-keyscan -p 2222 -H 100.114.205.53 git.indifferentketchup.com >> /root/.ssh/known_hosts && chmod 700 /root/.ssh && chmod 600 /root/.ssh/known_hosts
 WORKDIR /app
 COPY --from=builder /out/server ./
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -7,7 +7,8 @@
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc && node -e \"import('node:fs').then(fs=>fs.copyFileSync('src/schema.sql','dist/schema.sql'))\"",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
    "test": "vitest run"
  },
  "dependencies": {
    "@fastify/static": "^7.0.4",
@@ -21,6 +22,7 @@
    "@types/node": "^20.14.10",
    "@types/ws": "^8.5.10",
    "tsx": "^4.16.2",
-    "typescript": "^5.5.0"
+    "typescript": "^5.5.0",
    "vitest": "^3.2.4"
  }
 }
--- a/apps/server/src/config.ts
+++ b/apps/server/src/config.ts
@@ -7,6 +7,7 @@ const ConfigSchema = z.object({
  DATABASE_URL: z.string().url(),
  LLAMA_SWAP_URL: z.string().url(),
  PROJECT_ROOT_WHITELIST: z.string().default('/opt'),
  BOOTSTRAP_ROOT: z.string().default('/opt/projects'),
  DEFAULT_MODEL: z.string().default('qwen3.6-35b-a3b-mxfp4'),
  LOG_LEVEL: z.string().default('info'),
  GITEA_BASE_URL: z.string().url().default('https://git.indifferentketchup.com'),
--- a/apps/server/src/index.ts
+++ b/apps/server/src/index.ts
@@ -14,6 +14,7 @@ import { registerChatRoutes } from './routes/chats.js';
 import { registerSidebarRoutes } from './routes/sidebar.js';
 import { registerWebSocket } from './routes/ws.js';
 import { registerModelRoutes } from './routes/models.js';
 import { registerAgentRoutes } from './routes/agents.js';
 import { createInferenceRunner } from './services/inference.js';
 import { createBroker } from './services/broker.js';
@@ -57,6 +58,7 @@ async function main() {
  registerSessionRoutes(app, sql, config, broker);
  registerSettingsRoutes(app, sql);
  registerModelRoutes(app, config);
  registerAgentRoutes(app, sql);
  registerSidebarRoutes(app, sql);
  registerChatRoutes(app, sql, broker);
--- a/apps/server/src/routes/tests/projects.test.ts
+++ b/apps/server/src/routes/tests/projects.test.ts
@@ -0,0 +1,92 @@
 import { describe, it, expect, beforeAll, afterAll } from 'vitest';
 import { mkdtemp, mkdir, rm, realpath, symlink, writeFile } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 import { resolveProjectPath } from '../projects.js';
 describe('resolveProjectPath', () => {
  let scratch: string;
  let whitelist: string;
  let outside: string;
  beforeAll(async () => {
    // mkdtemp returns a real path on most platforms, but symlink-resolve it
    // anyway to defeat /tmp -> /private/tmp style indirection on macOS, and
    // keep this stable for the comparisons below.
    scratch = await realpath(await mkdtemp(join(tmpdir(), 'boocode-projects-test-')));
    whitelist = join(scratch, 'wl');
    outside = join(scratch, 'other');
    await mkdir(whitelist, { recursive: true });
    await mkdir(outside, { recursive: true });
  });
  afterAll(async () => {
    if (scratch) {
      await rm(scratch, { recursive: true, force: true });
    }
  });
  it('returns real path and basename for a valid subdirectory under the whitelist', async () => {
    const projectDir = join(whitelist, 'my-project');
    await mkdir(projectDir);
    const result = await resolveProjectPath(projectDir, whitelist);
    expect('error' in result).toBe(false);
    if ('error' in result) return; // narrow
    expect(result.real).toBe(projectDir);
    expect(result.name).toBe('my-project');
  });
  it('rejects a path outside the whitelist', async () => {
    const projectDir = join(outside, 'foo');
    await mkdir(projectDir);
    const result = await resolveProjectPath(projectDir, whitelist);
    expect('error' in result).toBe(true);
    if (!('error' in result)) return;
    expect(result.error.toLowerCase()).toContain('path must be under');
  });
  it('rejects relative paths', async () => {
    const result = await resolveProjectPath('relative/path', whitelist);
    expect('error' in result).toBe(true);
    if (!('error' in result)) return;
    expect(result.error.toLowerCase()).toContain('absolute');
  });
  it('rejects nonexistent paths', async () => {
    const result = await resolveProjectPath('/nonexistent/foo-boocode-test', whitelist);
    expect('error' in result).toBe(true);
    if (!('error' in result)) return;
    expect(result.error.toLowerCase()).toContain('does not exist');
  });
  it('rejects symlink escapes (realpath resolution catches traversal)', async () => {
    // Create a symlink INSIDE the whitelist that points OUTSIDE. realpath
    // should resolve through it and the resulting real path should fail the
    // whitelist scope check.
    const escapeLink = join(whitelist, 'escape-link');
    await symlink(outside, escapeLink);
    const result = await resolveProjectPath(escapeLink, whitelist);
    expect('error' in result).toBe(true);
    if (!('error' in result)) return;
    expect(result.error.toLowerCase()).toContain('path must be under');
  });
  it('rejects the whitelist directory itself as a project root', async () => {
    // A project's parent can't be the project. The scope check must require
    // the candidate path to be strictly below the whitelist (whitelist + sep
    // prefix), not just equal to it.
    const result = await resolveProjectPath(whitelist, whitelist);
    expect('error' in result).toBe(true);
    if (!('error' in result)) return;
    expect(result.error.toLowerCase()).toContain('path must be under');
  });
  it('rejects non-directory targets (file under whitelist)', async () => {
    const filePath = join(whitelist, 'a-file.txt');
    await writeFile(filePath, 'content', 'utf8');
    const result = await resolveProjectPath(filePath, whitelist);
    expect('error' in result).toBe(true);
    if (!('error' in result)) return;
    expect(result.error.toLowerCase()).toContain('not a directory');
  });
 });
--- a/apps/server/src/routes/agents.ts
+++ b/apps/server/src/routes/agents.ts
@@ -0,0 +1,20 @@
 import type { FastifyInstance } from 'fastify';
 import type { Sql } from '../db.js';
 import { getAgentsForProject } from '../services/agents.js';
 export function registerAgentRoutes(app: FastifyInstance, sql: Sql): void {
  app.get<{ Params: { id: string } }>(
    '/api/projects/:id/agents',
    async (req, reply) => {
      const rows = await sql<{ path: string }[]>`
        SELECT path FROM projects WHERE id = ${req.params.id}
      `;
      if (rows.length === 0) {
        reply.code(404);
        return { error: 'project not found' };
      }
      // getAgentsForProject handles AGENTS.md presence/parse/cache; never throws.
      return await getAgentsForProject(rows[0]!.path);
    }
  );
 }
--- a/apps/server/src/routes/chats.ts
+++ b/apps/server/src/routes/chats.ts
@@ -231,7 +231,7 @@ export function registerChatRoutes(
          INSERT INTO messages (
            session_id, chat_id, role, content, kind, tool_calls, tool_results,
            status, tokens_used, ctx_used, ctx_max, started_at, finished_at,
-            created_at
+            created_at, metadata
          )
          SELECT
            ${source.session_id}, ${chat!.id}, role, content, kind,
@@ -239,7 +239,8 @@ export function registerChatRoutes(
            tokens_used, ctx_used, ctx_max, started_at, finished_at,
            clock_timestamp() + (
              ROW_NUMBER() OVER (ORDER BY created_at ASC, id ASC) * INTERVAL '1 microsecond'
-            )
+            ),
            metadata
          FROM messages
          WHERE chat_id = ${source.id}
            AND created_at <= ${target.created_at}::timestamptz
@@ -268,7 +269,7 @@ export function registerChatRoutes(
      }
      const rows = await sql<Message[]>`
        SELECT id, session_id, chat_id, role, content, kind, tool_calls, tool_results, status, last_seq,
-               tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at
+               tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at, metadata
        FROM messages
        WHERE chat_id = ${req.params.id}
        ORDER BY created_at ASC, id ASC
--- a/apps/server/src/routes/messages.ts
+++ b/apps/server/src/routes/messages.ts
@@ -7,6 +7,13 @@ const SendBody = z.object({
  content: z.string().min(1).max(64_000),
 });
 // v1.8.2: Continue extends an inference loop that hit the tool budget. Caller
 // passes the sentinel message it's continuing from; server validates shape
 // and the per-chat hard ceiling before resuming.
 const ContinueBody = z.object({
  sentinel_message_id: z.string().uuid(),
 });
 interface MessageHandlers {
  enqueueInference: (sessionId: string, chatId: string, assistantMessageId: string, user: string) => void;
  enqueueCompact: (sessionId: string, chatId: string, compactMessageId: string, user: string) => void;
@@ -36,7 +43,7 @@ export function registerMessageRoutes(
      }
      const rows = await sql<Message[]>`
        SELECT id, session_id, chat_id, role, content, kind, tool_calls, tool_results, status, last_seq,
-               tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at
+               tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at, metadata
        FROM messages
        WHERE session_id = ${req.params.id}
        ORDER BY created_at ASC, id ASC
@@ -253,6 +260,76 @@ export function registerMessageRoutes(
    }
  );
  app.post<{ Params: { id: string } }>(
    '/api/chats/:id/continue',
    async (req, reply) => {
      const parsed = ContinueBody.safeParse(req.body);
      if (!parsed.success) {
        reply.code(400);
        return { error: 'invalid body', details: parsed.error.flatten() };
      }
      const chatRows = await sql<Chat[]>`
        SELECT id, session_id FROM chats WHERE id = ${req.params.id} AND status = 'open'
      `;
      if (chatRows.length === 0) {
        reply.code(404);
        return { error: 'chat not found' };
      }
      const chat = chatRows[0]!;
      const sessionId = chat.session_id;
      // Cap-hit sentinels are only ever inserted after a turn completes, so
      // there must not be an active inference at this moment. If there is,
      // the client is racing the cap-hit summary that just emitted the
      // sentinel — bail rather than enqueue a parallel run.
      if (handlers.hasActiveInference(chat.id)) {
        reply.code(409);
        return { error: 'chat is currently streaming' };
      }
      const sentinel = await sql<{ metadata: { kind?: unknown; can_continue?: unknown } | null }[]>`
        SELECT metadata
        FROM messages
        WHERE id = ${parsed.data.sentinel_message_id}
          AND chat_id = ${chat.id}
          AND role = 'system'
      `;
      if (sentinel.length === 0) {
        reply.code(404);
        return { error: 'sentinel not found' };
      }
      const meta = sentinel[0]!.metadata;
      if (!meta || meta.kind !== 'cap_hit') {
        reply.code(400);
        return { error: 'message is not a cap-hit sentinel' };
      }
      // Server-side hard ceiling check. UI already disables the button when
      // can_continue is false; defending against a stale tab or a direct
      // API hit is the only reason this lives on the server too.
      if (meta.can_continue !== true) {
        reply.code(409);
        return { error: 'hard limit reached for this chat' };
      }
      const result = await sql.begin(async (tx) => {
        const [assistantMsg] = await tx<{ id: string }[]>`
          INSERT INTO messages (session_id, chat_id, role, content, status, created_at)
          VALUES (${sessionId}, ${chat.id}, 'assistant', '', 'streaming', clock_timestamp())
          RETURNING id
        `;
        await tx`UPDATE sessions SET updated_at = clock_timestamp() WHERE id = ${sessionId}`;
        await tx`UPDATE chats SET updated_at = clock_timestamp() WHERE id = ${chat.id}`;
        return { assistant_message_id: assistantMsg!.id };
      });
      handlers.enqueueInference(sessionId, chat.id, result.assistant_message_id, 'default');
      reply.code(202);
      return result;
    }
  );
  app.post<{ Params: { id: string } }>(
    '/api/chats/:id/force_send',
    async (req, reply) => {
--- a/apps/server/src/routes/projects.ts
+++ b/apps/server/src/routes/projects.ts
@@ -9,6 +9,7 @@ import type { Project, AvailableProject } from '../types/api.js';
 import { resolveProjectRoot, PathScopeError } from '../services/path_guard.js';
 import { listDir, viewFile } from '../services/file_ops.js';
 import { getProjectFiles } from '../services/file_index.js';
 import { getGitMeta } from '../services/git_meta.js';
 import {
  bootstrapProject,
  BootstrapNameError,
@@ -41,7 +42,7 @@ async function isDir(path: string): Promise<boolean> {
  }
 }
-async function resolveProjectPath(
+export async function resolveProjectPath(
  raw: string,
  whitelist: string
 ): Promise<{ real: string; name: string } | { error: string }> {
@@ -53,7 +54,7 @@ async function resolveProjectPath(
    return { error: 'path does not exist' };
  }
  const whitelistReal = await realpath(whitelist);
-  if (real !== whitelistReal && !real.startsWith(whitelistReal + sep)) {
+  if (!real.startsWith(whitelistReal + sep)) {
    return { error: `path must be under ${whitelist}` };
  }
  if (!(await isDir(real))) return { error: 'path is not a directory' };
@@ -381,6 +382,38 @@ export function registerProjectRoutes(
    }
  );
  // GET /api/projects/:id/git
  // v1.8 mobile-tabs: feeds the header branch indicator and is the same
  // resolver the model's git_status tool uses. Returns 200 with branch=null
  // for non-git directories (not 404) so the UI can degrade gracefully.
  app.get<{ Params: { id: string } }>(
    '/api/projects/:id/git',
    async (req, reply) => {
      const { id } = req.params;
      const rows = await sql<Project[]>`
        SELECT id, name, path, added_at, last_session_id, status, gitea_remote
        FROM projects WHERE id = ${id}
      `;
      if (rows.length === 0) {
        reply.code(404);
        return { error: 'not found' };
      }
      const project = rows[0]!;
      let projectRoot: string;
      try {
        projectRoot = await resolveProjectRoot(project.path);
      } catch (err) {
        if (err instanceof PathScopeError) {
          reply.code(404);
          return { error: err.message };
        }
        throw err;
      }
      const meta = await getGitMeta(projectRoot);
      return meta ?? { branch: null, is_dirty: false, ahead: 0, behind: 0 };
    }
  );
  // GET /api/projects/:id/files
  app.get<{ Params: { id: string } }>(
    '/api/projects/:id/files',
--- a/apps/server/src/routes/sessions.ts
+++ b/apps/server/src/routes/sessions.ts
@@ -5,17 +5,20 @@ import type { Config } from '../config.js';
 import type { Broker } from '../services/broker.js';
 import type { Session } from '../types/api.js';
 import { getSetting } from './settings.js';
 import { getAgentsForProject } from '../services/agents.js';
 const CreateBody = z.object({
  name: z.string().min(1).max(200).optional(),
  model: z.string().min(1).max(200).optional(),
  system_prompt: z.string().max(8000).optional(),
  agent_id: z.string().min(1).max(200).nullable().optional(),
 });
 const PatchBody = z.object({
  name: z.string().min(1).max(200).optional(),
  model: z.string().min(1).max(200).optional(),
  system_prompt: z.string().max(8000).optional(),
  agent_id: z.string().min(1).max(200).nullable().optional(),
 });
 async function resolveDefaultModel(sql: Sql, config: Config): Promise<string> {
@@ -24,6 +27,13 @@ async function resolveDefaultModel(sql: Sql, config: Config): Promise<string> {
  return config.DEFAULT_MODEL;
 }
 // First agent in the project's effective list (file-defined or builtin),
 // or null if somehow none exist.
 async function resolveDefaultAgent(projectPath: string): Promise<string | null> {
  const { agents } = await getAgentsForProject(projectPath);
  return agents[0]?.id ?? null;
 }
 export function registerSessionRoutes(
  app: FastifyInstance,
  sql: Sql,
@@ -40,7 +50,7 @@ export function registerSessionRoutes(
      }
      const status = req.query.status === 'archived' ? 'archived' : 'open';
      const rows = await sql<Session[]>`
-        SELECT id, project_id, name, model, system_prompt, status, created_at, updated_at
+        SELECT id, project_id, name, model, system_prompt, status, created_at, updated_at, agent_id
        FROM sessions
        WHERE project_id = ${req.params.id} AND status = ${status}
        ORDER BY updated_at DESC
@@ -57,11 +67,14 @@ export function registerSessionRoutes(
        reply.code(400);
        return { error: 'invalid body', details: parsed.error.flatten() };
      }
-      const project = await sql`SELECT id FROM projects WHERE id = ${req.params.id}`;
+      const project = await sql<{ id: string; path: string }[]>`
        SELECT id, path FROM projects WHERE id = ${req.params.id}
      `;
      if (project.length === 0) {
        reply.code(404);
        return { error: 'project not found' };
      }
      const projectPath = project[0]!.path;
      let model = parsed.data.model;
      if (!model) {
@@ -76,12 +89,18 @@ export function registerSessionRoutes(
      const name = parsed.data.name ?? 'New session';
      const systemPrompt = parsed.data.system_prompt ?? '';
      // If the client provided agent_id (string or null), use it; otherwise
      // resolve to the project's first agent (file-defined or builtin), or null.
      const agentId =
        parsed.data.agent_id !== undefined
          ? parsed.data.agent_id
          : await resolveDefaultAgent(projectPath);
      const row = await sql.begin(async (tx) => {
        const [session] = await tx<Session[]>`
-          INSERT INTO sessions (project_id, name, model, system_prompt)
+          INSERT INTO sessions (project_id, name, model, system_prompt, agent_id)
-          VALUES (${req.params.id}, ${name}, ${model}, ${systemPrompt})
+          VALUES (${req.params.id}, ${name}, ${model}, ${systemPrompt}, ${agentId})
-          RETURNING id, project_id, name, model, system_prompt, status, created_at, updated_at
+          RETURNING id, project_id, name, model, system_prompt, status, created_at, updated_at, agent_id
        `;
        await tx`
          INSERT INTO chats (session_id, name, status)
@@ -101,7 +120,7 @@ export function registerSessionRoutes(
  app.get<{ Params: { id: string } }>('/api/sessions/:id', async (req, reply) => {
    const rows = await sql<Session[]>`
-      SELECT id, project_id, name, model, system_prompt, status, created_at, updated_at
+      SELECT id, project_id, name, model, system_prompt, status, created_at, updated_at, agent_id
      FROM sessions WHERE id = ${req.params.id}
    `;
    if (rows.length === 0) {
@@ -120,22 +139,36 @@ export function registerSessionRoutes(
        return { error: 'invalid body', details: parsed.error.flatten() };
      }
      const { name, model, system_prompt } = parsed.data;
      // agent_id is tri-state on the wire: omitted = no change, null = clear,
      // string = set. CASE WHEN inside SET handles all three atomically.
      const agentIdProvided = parsed.data.agent_id !== undefined;
      const newAgentId = parsed.data.agent_id ?? null;
      // Read the prior name so the post-update publish can skip no-op renames
      // (PATCH { name: "Foo" } where the session is already "Foo"). The window
      // between SELECT and UPDATE is sub-millisecond in the same request handler;
      // a concurrent rename in that gap would just mean one stale publish, which
      // existing clients dedup by id.
      const before = await sql<{ name: string }[]>`
        SELECT name FROM sessions WHERE id = ${req.params.id}
      `;
      const priorName = before[0]?.name;
      const rows = await sql<Session[]>`
        UPDATE sessions
        SET
          name = COALESCE(${name ?? null}, name),
          model = COALESCE(${model ?? null}, model),
          system_prompt = COALESCE(${system_prompt ?? null}, system_prompt),
          agent_id = CASE WHEN ${agentIdProvided} THEN ${newAgentId} ELSE agent_id END,
          updated_at = clock_timestamp()
        WHERE id = ${req.params.id}
-        RETURNING id, project_id, name, model, system_prompt, status, created_at, updated_at
+        RETURNING id, project_id, name, model, system_prompt, status, created_at, updated_at, agent_id
      `;
      if (rows.length === 0) {
        reply.code(404);
        return { error: 'session not found' };
      }
      const session = rows[0]!;
-      if (name !== undefined) {
+      if (name !== undefined && session.name !== priorName) {
        broker.publishUser('default', {
          type: 'session_renamed',
          session_id: session.id,
@@ -174,7 +207,7 @@ export function registerSessionRoutes(
      const rows = await sql<Session[]>`
        UPDATE sessions SET status = 'open', updated_at = clock_timestamp()
        WHERE id = ${req.params.id} AND status = 'archived'
-        RETURNING id, project_id, name, model, system_prompt, status, created_at, updated_at
+        RETURNING id, project_id, name, model, system_prompt, status, created_at, updated_at, agent_id
      `;
      if (rows.length === 0) {
        reply.code(404);
--- a/apps/server/src/routes/settings.ts
+++ b/apps/server/src/routes/settings.ts
@@ -22,6 +22,50 @@ export async function setSetting(
  `;
 }
 // themes-v1: whitelist of the 18 preset theme ids. Kept in sync with
 // docs/themes_v1.md §1 and apps/web/src/lib/theme.ts THEMES.
 const THEME_IDS = [
  'obsidian',
  'gunmetal',
  'espresso',
  'volcanic-brown',
  'copper',
  'gold',
  'oxblood',
  'crimson',
  'elderflower',
  'plum',
  'steel-pink',
  'fuchsia-noir',
  'matrix',
  'sage',
  'ivory',
  'chalk',
  'cobalt',
  'midnight-sapphire',
 ] as const;
 const THEME_MODES = ['dark', 'light', 'system'] as const;
 // PATCH body is still a free-form key/value bag for everything except the
 // two theme keys, which carry strict per-key validation. Anything outside
 // THEME_IDS / THEME_MODES on those keys is rejected with 400.
 function validateThemeKeys(body: Record<string, unknown>): string | null {
  if ('theme_id' in body) {
    const v = body.theme_id;
    if (typeof v !== 'string' || !(THEME_IDS as readonly string[]).includes(v)) {
      return `theme_id must be one of: ${THEME_IDS.join(', ')}`;
    }
  }
  if ('theme_mode' in body) {
    const v = body.theme_mode;
    if (typeof v !== 'string' || !(THEME_MODES as readonly string[]).includes(v)) {
      return `theme_mode must be one of: ${THEME_MODES.join(', ')}`;
    }
  }
  return null;
 }
 const PatchBody = z.record(z.string(), z.unknown());
 export function registerSettingsRoutes(app: FastifyInstance, sql: Sql): void {
@@ -38,6 +82,11 @@ export function registerSettingsRoutes(app: FastifyInstance, sql: Sql): void {
      reply.code(400);
      return { error: 'invalid body', details: parsed.error.flatten() };
    }
    const themeError = validateThemeKeys(parsed.data);
    if (themeError) {
      reply.code(400);
      return { error: themeError };
    }
    for (const [k, v] of Object.entries(parsed.data)) {
      await setSetting(sql, k, v);
    }
--- a/apps/server/src/routes/ws.ts
+++ b/apps/server/src/routes/ws.ts
@@ -23,7 +23,7 @@ export function registerWebSocket(
      const messages = await sql<Message[]>`
        SELECT id, session_id, chat_id, role, content, kind, tool_calls, tool_results, status, last_seq,
-               tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at
+               tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at, metadata
        FROM messages
        WHERE session_id = ${sessionId}
        ORDER BY created_at ASC, id ASC
--- a/apps/server/src/schema.sql
+++ b/apps/server/src/schema.sql
@@ -153,3 +153,21 @@ BEGIN
      CHECK (status IN ('open', 'archived'));
  END IF;
 END $$;
 -- v1.x-batch9: per-session agent reference. Agent definitions are not stored in
 -- the DB; they live in builtins (services/agents.ts) and a per-project AGENTS.md.
 -- agent_id is the slugified agent name. NULL means "use BooCode defaults".
 ALTER TABLE sessions ADD COLUMN IF NOT EXISTS agent_id TEXT;
 -- v1.8.2: per-message metadata for sentinels (cap-hit) and structured error
 -- reasons. JSONB so future kinds can extend without further schema churn.
 -- Shape for cap_hit:  { kind: 'cap_hit', used: number, limit: number,
 --                       agent_name: string|null, can_continue: boolean }
 -- Shape for errors:   { error_reason: 'llm_provider_error'|..., error_text: string }
 ALTER TABLE messages ADD COLUMN IF NOT EXISTS metadata JSONB;
 -- themes-v1: idempotent seeds for the two theme preference keys. The settings
 -- table is a key/value store (see line 43) so theme prefs live as two rows,
 -- not new columns. Defaults match docs/themes_v1.md: obsidian (dark).
 INSERT INTO settings (key, value) VALUES ('theme_id', '"obsidian"') ON CONFLICT (key) DO NOTHING;
 INSERT INTO settings (key, value) VALUES ('theme_mode', '"dark"') ON CONFLICT (key) DO NOTHING;
--- a/apps/server/src/services/tests/inference.test.ts
+++ b/apps/server/src/services/tests/inference.test.ts
@@ -0,0 +1,239 @@
 import { describe, it, expect } from 'vitest';
 import { buildMessagesPayload } from '../inference.js';
 import type {
  Message,
  MessageRole,
  Project,
  Session,
  ToolCall,
  ToolResult,
 } from '../../types/api.js';
 // ---- fixtures ---------------------------------------------------------------
 function makeSession(overrides: Partial<Session> = {}): Session {
  return {
    id: 'sess',
    project_id: 'proj',
    name: 'test session',
    model: 'test-model',
    system_prompt: '',
    status: 'open',
    created_at: new Date(0).toISOString(),
    updated_at: new Date(0).toISOString(),
    agent_id: null,
    ...overrides,
  };
 }
 function makeProject(overrides: Partial<Project> = {}): Project {
  return {
    id: 'proj',
    name: 'test project',
    path: '/tmp/proj',
    added_at: new Date(0).toISOString(),
    last_session_id: null,
    status: 'open',
    gitea_remote: null,
    ...overrides,
  };
 }
 let counter = 0;
 function makeMessage(
  role: MessageRole,
  content: string,
  overrides: Partial<Message> = {}
 ): Message {
  counter += 1;
  return {
    id: `m${counter}`,
    session_id: 'sess',
    chat_id: 'chat',
    role,
    content,
    kind: 'message',
    tool_calls: null,
    tool_results: null,
    status: 'complete',
    last_seq: 0,
    tokens_used: null,
    ctx_used: null,
    ctx_max: null,
    started_at: null,
    finished_at: null,
    created_at: new Date(counter * 1000).toISOString(),
    metadata: null,
    ...overrides,
  };
 }
 // ---- tests ------------------------------------------------------------------
 describe('buildMessagesPayload', () => {
  it('prepends a system prompt containing the project path', () => {
    const session = makeSession();
    const project = makeProject({ path: '/tmp/my-proj' });
    const result = buildMessagesPayload(session, project, []);
    expect(result).toHaveLength(1);
    expect(result[0]!.role).toBe('system');
    expect(result[0]!.content).toContain('/tmp/my-proj');
  });
  it('appends session.system_prompt to the system message when set', () => {
    const session = makeSession({ system_prompt: 'Be terse.' });
    const project = makeProject();
    const result = buildMessagesPayload(session, project, []);
    expect(result).toHaveLength(1);
    expect(result[0]!.role).toBe('system');
    expect(result[0]!.content).toContain('Be terse.');
  });
  it('returns user/assistant messages in order when no compact marker is present', () => {
    const session = makeSession();
    const project = makeProject();
    const history: Message[] = [
      makeMessage('user', 'hi'),
      makeMessage('assistant', 'hello'),
      makeMessage('user', 'how are you'),
      makeMessage('assistant', 'great'),
    ];
    const result = buildMessagesPayload(session, project, history);
    // 1 system + 4 history messages
    expect(result).toHaveLength(5);
    expect(result[0]!.role).toBe('system');
    expect(result[1]).toMatchObject({ role: 'user', content: 'hi' });
    expect(result[2]).toMatchObject({ role: 'assistant', content: 'hello' });
    expect(result[3]).toMatchObject({ role: 'user', content: 'how are you' });
    expect(result[4]).toMatchObject({ role: 'assistant', content: 'great' });
  });
  it('starts from the latest compact marker, emitting it as a system message', () => {
    const session = makeSession();
    const project = makeProject();
    const history: Message[] = [
      makeMessage('user', 'old1'),
      makeMessage('assistant', 'oldreply1'),
      makeMessage('user', 'old2'),
      makeMessage('assistant', 'compacted summary text', { kind: 'compact' }),
      makeMessage('user', 'new1'),
      makeMessage('assistant', 'newreply1'),
    ];
    const result = buildMessagesPayload(session, project, history);
    // Expect: leading base-system prompt, then the compact as system, then
    // the user/assistant pair following it.
    expect(result).toHaveLength(4);
    expect(result[0]!.role).toBe('system');
    expect(result[1]).toMatchObject({
      role: 'system',
      content: 'compacted summary text',
    });
    expect(result[2]).toMatchObject({ role: 'user', content: 'new1' });
    expect(result[3]).toMatchObject({ role: 'assistant', content: 'newreply1' });
  });
  it('uses only the most recent compact when multiple are present', () => {
    const session = makeSession();
    const project = makeProject();
    const history: Message[] = [
      makeMessage('user', 'u1'),
      makeMessage('assistant', 'first compact summary', { kind: 'compact' }),
      makeMessage('user', 'u2'),
      makeMessage('assistant', 'second compact summary', { kind: 'compact' }),
      makeMessage('user', 'u3'),
      makeMessage('assistant', 'final reply'),
    ];
    const result = buildMessagesPayload(session, project, history);
    // Expect: base system + latest compact as system + the two messages
    // following it. The earlier compact and pre-compact history are dropped.
    expect(result).toHaveLength(4);
    expect(result[0]!.role).toBe('system');
    expect(result[1]).toMatchObject({
      role: 'system',
      content: 'second compact summary',
    });
    expect(result[2]).toMatchObject({ role: 'user', content: 'u3' });
    expect(result[3]).toMatchObject({ role: 'assistant', content: 'final reply' });
    // None of the earlier content should leak through
    const concatenated = result.map((m) => m.content ?? '').join(' ');
    expect(concatenated).not.toContain('first compact summary');
    expect(concatenated).not.toContain('u1');
    expect(concatenated).not.toContain('u2');
  });
  it('skips streaming and cancelled assistant rows', () => {
    const session = makeSession();
    const project = makeProject();
    const history: Message[] = [
      makeMessage('user', 'hi'),
      makeMessage('assistant', 'partial...', { status: 'streaming' }),
      makeMessage('assistant', 'cancelled fragment', { status: 'cancelled' }),
      makeMessage('assistant', 'final answer'),
    ];
    const result = buildMessagesPayload(session, project, history);
    // 1 system + 1 user + 1 assistant (only the complete one)
    expect(result).toHaveLength(3);
    expect(result[1]).toMatchObject({ role: 'user', content: 'hi' });
    expect(result[2]).toMatchObject({ role: 'assistant', content: 'final answer' });
  });
  it('round-trips an assistant-with-tool_calls followed by its tool result', () => {
    const session = makeSession();
    const project = makeProject();
    const toolCall: ToolCall = {
      id: 'call_abc',
      name: 'view_file',
      args: { path: 'src/index.ts' },
    };
    const toolResult: ToolResult = {
      tool_call_id: 'call_abc',
      output: { contents: 'console.log(1)' },
      truncated: false,
    };
    const history: Message[] = [
      makeMessage('user', 'show me the file'),
      makeMessage('assistant', '', { tool_calls: [toolCall] }),
      makeMessage('tool', '', { tool_results: toolResult }),
      makeMessage('assistant', 'here it is'),
    ];
    const result = buildMessagesPayload(session, project, history);
    // 1 system + 1 user + 1 assistant(tool_calls) + 1 tool + 1 assistant
    expect(result).toHaveLength(5);
    expect(result[1]).toMatchObject({ role: 'user', content: 'show me the file' });
    expect(result[2]!.role).toBe('assistant');
    expect(result[2]!.tool_calls).toBeDefined();
    expect(result[2]!.tool_calls).toHaveLength(1);
    expect(result[2]!.tool_calls![0]).toMatchObject({
      id: 'call_abc',
      type: 'function',
      function: { name: 'view_file' },
    });
    // The OpenAI shape stringifies args.
    expect(result[2]!.tool_calls![0]!.function.arguments).toBe(
      JSON.stringify({ path: 'src/index.ts' })
    );
    // assistant with empty content should be serialized as content: null
    expect(result[2]!.content).toBeNull();
    expect(result[3]).toMatchObject({
      role: 'tool',
      tool_call_id: 'call_abc',
    });
    // Non-string tool output is JSON-stringified.
    expect(result[3]!.content).toBe(JSON.stringify({ contents: 'console.log(1)' }));
    expect(result[4]).toMatchObject({ role: 'assistant', content: 'here it is' });
  });
  it('skips tool rows with no tool_results', () => {
    const session = makeSession();
    const project = makeProject();
    const history: Message[] = [
      makeMessage('user', 'do it'),
      makeMessage('tool', '', { tool_results: null }),
      makeMessage('assistant', 'done'),
    ];
    const result = buildMessagesPayload(session, project, history);
    // 1 system + 1 user + 1 assistant; the empty tool row is dropped.
    expect(result).toHaveLength(3);
    expect(result.find((m) => m.role === 'tool')).toBeUndefined();
  });
 });
--- a/apps/server/src/services/tests/project_bootstrap.test.ts
+++ b/apps/server/src/services/tests/project_bootstrap.test.ts
@@ -0,0 +1,47 @@
 import { describe, it, expect } from 'vitest';
 import { sanitizeFolderName } from '../project_bootstrap.js';
 describe('sanitizeFolderName', () => {
  it('passes through a normal slug-like name', () => {
    expect(sanitizeFolderName('my-project')).toBe('my-project');
  });
  it('lowercases and replaces whitespace with hyphens', () => {
    expect(sanitizeFolderName('Hello World')).toBe('hello-world');
  });
  it('strips path-traversal characters', () => {
    // dots and slashes fall outside [a-z0-9-] and are removed entirely.
    expect(sanitizeFolderName('../etc/passwd')).toBe('etcpasswd');
  });
  it('strips trailing and leading dots and slashes', () => {
    expect(sanitizeFolderName('./foo/')).toBe('foo');
  });
  it('collapses runs of hyphens and strips leading/trailing ones', () => {
    expect(sanitizeFolderName('---foo---')).toBe('foo');
  });
  it('returns empty string when nothing survives sanitization', () => {
    // NOTE: sanitizeFolderName itself does NOT throw — it returns ''. The
    // BootstrapNameError is raised by the caller (bootstrapProject) when the
    // sanitized result fails the SAFE_NAME regex. The spec's "throws" phrasing
    // refers to that caller-level validation, not this pure function.
    expect(sanitizeFolderName('...')).toBe('');
    expect(sanitizeFolderName('   ')).toBe('');
  });
  it('strips control characters and null bytes', () => {
    // Null bytes and control characters are not in [a-z0-9-] so they're
    // filtered out (effectively rejected as folder-name content).
    expect(sanitizeFolderName('my\x00proj\x01')).toBe('myproj');
    expect(sanitizeFolderName('foo\x00bar')).toBe('foobar');
  });
  it('truncates names longer than 64 characters', () => {
    const long = 'a'.repeat(100);
    expect(sanitizeFolderName(long)).toBe('a'.repeat(64));
    expect(sanitizeFolderName(long)).toHaveLength(64);
  });
 });
--- a/apps/server/src/services/agents.ts
+++ b/apps/server/src/services/agents.ts
@@ -0,0 +1,320 @@
 import { promises as fs } from 'node:fs';
 import { join } from 'node:path';
 import type { Agent, AgentsResponse, AgentParseError } from '../types/api.js';
 // v1.8.1: global agents live at /data/AGENTS.md inside the container
 // (./data:/data:ro mount on the host). Per-project AGENTS.md at the project
 // root overrides global by name. In-code builtins are gone — the seed file is
 // the contents of the previous BUILTIN_AGENTS list, copied into /data/AGENTS.md
 // once on first deploy.
 const GLOBAL_AGENTS_PATH = '/data/AGENTS.md';
 const CACHE_TTL_MS = 60_000;
 // Tools whitelist universe matches services/tools.ts ALL_TOOLS. Keep in sync.
 const ALL_TOOL_NAMES = ['view_file', 'list_dir', 'grep', 'find_files', 'git_status'] as const;
 const DEFAULT_TOOLS: string[] = [...ALL_TOOL_NAMES];
 const DEFAULT_TEMPERATURE = 0.7;
 export function slugify(name: string): string {
  return name
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '');
 }
 // ---- AGENTS.md parser ------------------------------------------------------
 interface ParsedFrontmatter {
  temperature?: number;
  tools?: string[];
  description?: string;
  model?: string;
  // v1.8.2: optional per-agent tool-loop budget. Absent → inference resolves
  // from the agent's toolset at runtime.
  max_tool_calls?: number;
 }
 function stripQuotes(s: string): string {
  if (
    s.length >= 2 &&
    (s[0] === '"' || s[0] === "'") &&
    s[0] === s[s.length - 1]
  ) {
    return s.slice(1, -1);
  }
  return s;
 }
 function parseFrontmatter(yaml: string): { data: ParsedFrontmatter; errors: string[] } {
  const data: ParsedFrontmatter = {};
  const errors: string[] = [];
  const lines = yaml.split('\n');
  let arrayKey: 'tools' | null = null;
  for (const rawLine of lines) {
    const line = rawLine.trim();
    if (line.length === 0) continue;
    // Block-list continuation: "- value" under a key that was set to empty
    if (arrayKey && line.startsWith('- ')) {
      data[arrayKey]!.push(line.slice(2).trim());
      continue;
    }
    arrayKey = null;
    const colonIdx = line.indexOf(':');
    if (colonIdx < 0) continue;
    const key = line.slice(0, colonIdx).trim();
    const valueRaw = line.slice(colonIdx + 1).trim();
    if (key === 'temperature') {
      const n = Number(valueRaw);
      if (Number.isFinite(n)) data.temperature = n;
      else errors.push(`temperature must be a number (got "${valueRaw}")`);
    } else if (key === 'tools') {
      if (valueRaw === '') {
        data.tools = [];
        arrayKey = 'tools';
      } else if (valueRaw.startsWith('[') && valueRaw.endsWith(']')) {
        const inner = valueRaw.slice(1, -1);
        data.tools = inner
          .split(',')
          .map((s) => stripQuotes(s.trim()))
          .filter((s) => s.length > 0);
      } else {
        // Loose form: "tools: a, b, c"
        data.tools = valueRaw
          .split(',')
          .map((s) => stripQuotes(s.trim()))
          .filter((s) => s.length > 0);
      }
    } else if (key === 'description') {
      data.description = stripQuotes(valueRaw);
    } else if (key === 'model') {
      data.model = stripQuotes(valueRaw);
    } else if (key === 'max_tool_calls') {
      // v1.8.2: 1..100 inclusive integer. Out-of-range values are skipped
      // with a warning rather than throwing — agents shouldn't be unusable
      // because of a typo on a defaulted field. Non-numeric or non-integer
      // still hard-fails the block, matching `temperature` behavior.
      const n = Number(valueRaw);
      if (Number.isInteger(n) && n >= 1 && n <= 100) {
        data.max_tool_calls = n;
      } else if (Number.isInteger(n)) {
        console.warn(
          `agents: max_tool_calls ${n} out of range 1-100, ignoring (falling back to default)`,
        );
      } else {
        errors.push(`max_tool_calls must be an integer 1-100 (got "${valueRaw}")`);
      }
    }
    // Unknown keys silently ignored — forward-compat.
  }
  return { data, errors };
 }
 interface RawSection {
  name: string;
  body: string;
 }
 function splitSections(content: string): RawSection[] {
  // Split by lines matching exactly "## <name>". Level-3+ headings are body content.
  const sections: RawSection[] = [];
  let currentName: string | null = null;
  let currentLines: string[] = [];
  for (const line of content.split('\n')) {
    const h2 = /^##\s+(.+?)\s*$/.exec(line);
    const h3 = line.startsWith('### ');
    if (h2 && !h3) {
      if (currentName !== null) {
        sections.push({ name: currentName, body: currentLines.join('\n') });
      }
      currentName = h2[1]!.trim();
      currentLines = [];
      continue;
    }
    if (currentName !== null) {
      currentLines.push(line);
    }
  }
  if (currentName !== null) {
    sections.push({ name: currentName, body: currentLines.join('\n') });
  }
  return sections;
 }
 // Throws on malformed section — caller handles per-block error collection.
 function parseAgentSection(section: RawSection): Omit<Agent, 'source'> {
  const lines = section.body.split('\n');
  // Opening "---" fence must be the first non-empty line.
  let openIdx = -1;
  for (let i = 0; i < lines.length; i++) {
    const t = lines[i]!.trim();
    if (t === '') continue;
    if (t === '---') {
      openIdx = i;
    }
    break;
  }
  if (openIdx < 0) {
    throw new Error('missing opening --- fence after heading');
  }
  let closeIdx = -1;
  for (let i = openIdx + 1; i < lines.length; i++) {
    if (lines[i]!.trim() === '---') {
      closeIdx = i;
      break;
    }
  }
  if (closeIdx < 0) {
    throw new Error('missing closing --- fence');
  }
  const yamlText = lines.slice(openIdx + 1, closeIdx).join('\n');
  const systemPrompt = lines.slice(closeIdx + 1).join('\n').trim();
  const { data: fm, errors: fmErrors } = parseFrontmatter(yamlText);
  if (fmErrors.length > 0) {
    throw new Error(fmErrors.join('; '));
  }
  const filteredTools = Array.isArray(fm.tools)
    ? fm.tools.filter((t): t is string =>
        (ALL_TOOL_NAMES as readonly string[]).includes(t),
      )
    : DEFAULT_TOOLS;
  return {
    id: slugify(section.name),
    name: section.name,
    description: fm.description ?? '',
    system_prompt: systemPrompt,
    temperature: typeof fm.temperature === 'number' ? fm.temperature : DEFAULT_TEMPERATURE,
    tools: filteredTools,
    model: typeof fm.model === 'string' && fm.model.length > 0 ? fm.model : null,
    max_tool_calls: typeof fm.max_tool_calls === 'number' ? fm.max_tool_calls : null,
  };
 }
 interface ParseResult {
  agents: Omit<Agent, 'source'>[];
  errors: AgentParseError[];
 }
 // v1.8.1: parse each `## Name` block independently. A failure in one block
 // does not abort the rest of the file — we collect a per-agent error and
 // keep parsing. Server logs a console.warn for each skipped agent.
 export function parseAgentsMd(content: string): ParseResult {
  const sections = splitSections(content);
  const agents: Omit<Agent, 'source'>[] = [];
  const errors: AgentParseError[] = [];
  for (const section of sections) {
    try {
      agents.push(parseAgentSection(section));
    } catch (err) {
      const reason = err instanceof Error ? err.message : String(err);
      console.warn(`agents: skipped "${section.name}" — ${reason}`);
      errors.push({ agent_name: section.name, reason });
    }
  }
  return { agents, errors };
 }
 // ---- mtime-keyed cache + public API ----------------------------------------
 interface CacheEntry {
  globalMtime: number | null;
  projectMtime: number | null;
  cachedAt: number;
  result: AgentsResponse;
 }
 // Keyed by projectPath ('' is fine — no project case, e.g. tests). Two files
 // participate in the cache key (global + project); editing either bumps the
 // corresponding mtime so the next read sees a miss without a watcher.
 const cache = new Map<string, CacheEntry>();
 export function invalidateAgentsCache(projectPath?: string): void {
  if (projectPath === undefined) {
    cache.clear();
  } else {
    cache.delete(projectPath);
  }
 }
 async function safeStat(path: string): Promise<number | null> {
  try {
    const s = await fs.stat(path);
    return s.mtimeMs;
  } catch {
    return null;
  }
 }
 async function safeRead(path: string): Promise<string | null> {
  try {
    return await fs.readFile(path, 'utf8');
  } catch {
    return null;
  }
 }
 export async function getAgentsForProject(projectPath: string): Promise<AgentsResponse> {
  const projectAgentsPath = projectPath ? join(projectPath, 'AGENTS.md') : null;
  const [globalMtime, projectMtime] = await Promise.all([
    safeStat(GLOBAL_AGENTS_PATH),
    projectAgentsPath ? safeStat(projectAgentsPath) : Promise.resolve(null),
  ]);
  const cacheKey = projectPath || '__none__';
  const cached = cache.get(cacheKey);
  const now = Date.now();
  if (
    cached &&
    cached.globalMtime === globalMtime &&
    cached.projectMtime === projectMtime &&
    now - cached.cachedAt < CACHE_TTL_MS
  ) {
    return cached.result;
  }
  const [globalContent, projectContent] = await Promise.all([
    globalMtime !== null ? safeRead(GLOBAL_AGENTS_PATH) : Promise.resolve(null),
    projectAgentsPath && projectMtime !== null ? safeRead(projectAgentsPath) : Promise.resolve(null),
  ]);
  const errors: AgentParseError[] = [];
  const byName = new Map<string, Agent>();
  if (globalContent !== null) {
    const r = parseAgentsMd(globalContent);
    for (const a of r.agents) byName.set(a.name, { ...a, source: 'global' });
    errors.push(...r.errors);
  }
  if (projectContent !== null) {
    const r = parseAgentsMd(projectContent);
    for (const a of r.agents) byName.set(a.name, { ...a, source: 'project' });
    errors.push(...r.errors);
  }
  const result: AgentsResponse = {
    agents: Array.from(byName.values()),
    errors,
  };
  cache.set(cacheKey, { globalMtime, projectMtime, cachedAt: now, result });
  return result;
 }
 export async function getAgentById(
  projectPath: string,
  agentId: string,
 ): Promise<Agent | null> {
  const { agents } = await getAgentsForProject(projectPath);
  return agents.find((a) => a.id === agentId) ?? null;
 }
--- a/apps/server/src/services/auto_name.ts
+++ b/apps/server/src/services/auto_name.ts
@@ -144,4 +144,23 @@ export async function maybeAutoNameChat(
    updated_at: updated[0]!.updated_at,
  });
  ctx.log.info({ chatId, name }, 'chat auto-named');
  // Propagate to the parent session if it's still on its default name.
  // The WHERE guard makes the check atomic — if the user has already
  // renamed (or a prior chat already propagated), this UPDATE matches
  // zero rows and we do nothing. First chat wins; manual renames win.
  const renamedSession = await ctx.sql<{ id: string; name: string }[]>`
    UPDATE sessions
    SET name = ${name}
    WHERE id = ${sessionId} AND name = 'New session'
    RETURNING id, name
  `;
  if (renamedSession.length > 0) {
    ctx.publishUser({
      type: 'session_renamed',
      session_id: sessionId,
      name,
    });
    ctx.log.info({ sessionId, name }, 'session auto-named from chat');
  }
 }
--- a/apps/server/src/services/file_index.ts
+++ b/apps/server/src/services/file_index.ts
@@ -33,6 +33,7 @@ async function snapMtimes(root: string): Promise<MtimeSnap> {
  const rootStat = await fs.stat(root);
  let gitHead: number | null = null;
  let gitIndex: number | null = null;
  // best-effort; ignore failure because the project may not be a git repo
  try { gitHead = (await fs.stat(path.join(root, '.git', 'HEAD'))).mtimeMs; } catch {}
  try { gitIndex = (await fs.stat(path.join(root, '.git', 'index'))).mtimeMs; } catch {}
  return { root: rootStat.mtimeMs, gitHead, gitIndex };
--- a/apps/server/src/services/git_meta.ts
+++ b/apps/server/src/services/git_meta.ts
@@ -0,0 +1,92 @@
 import { execFile } from 'node:child_process';
 import { promisify } from 'node:util';
 const execFileAsync = promisify(execFile);
 const CACHE_TTL_MS = 30_000;
 const GIT_TIMEOUT_MS = 2_000;
 // Cap stdout size so a pathological repo can't blow the buffer. Branch + status
 // porcelain + diverge counts never approach this on a real repo.
 const GIT_MAX_BUFFER = 1024 * 1024;
 export interface GitMeta {
  branch: string | null;
  is_dirty: boolean;
  ahead: number;
  behind: number;
 }
 interface CacheEntry {
  at: number;
  value: GitMeta | null;
 }
 const cache = new Map<string, CacheEntry>();
 // Runs a single git invocation with a hard 2s timeout. Returns null on any
 // failure (non-zero exit, timeout, git not installed) so callers can decide
 // how to degrade. Stderr is intentionally swallowed; we don't surface git's
 // error text to the model or UI.
 async function runGit(args: string[], cwd: string): Promise<string | null> {
  try {
    const { stdout } = await execFileAsync('git', args, {
      cwd,
      timeout: GIT_TIMEOUT_MS,
      windowsHide: true,
      maxBuffer: GIT_MAX_BUFFER,
    });
    return stdout.toString();
  } catch {
    return null;
  }
 }
 export async function getGitMeta(rootPath: string): Promise<GitMeta | null> {
  const cached = cache.get(rootPath);
  const now = Date.now();
  if (cached && now - cached.at < CACHE_TTL_MS) {
    return cached.value;
  }
  // Three calls in parallel. rev-parse establishes repo + branch name;
  // status --porcelain detects dirtiness with no false-positives from formatting;
  // rev-list --left-right --count compares HEAD to upstream and is allowed to
  // fail silently (returns null → ahead/behind = 0) when no upstream is set.
  const [branchOut, statusOut, divergedOut] = await Promise.all([
    runGit(['rev-parse', '--abbrev-ref', 'HEAD'], rootPath),
    runGit(['status', '--porcelain'], rootPath),
    runGit(['rev-list', '--left-right', '--count', 'HEAD...@{upstream}'], rootPath),
  ]);
  // If rev-parse fails, this isn't a git repo (or git isn't installed). Cache
  // the null result so the next 30s of requests don't re-probe.
  if (branchOut === null) {
    cache.set(rootPath, { at: now, value: null });
    return null;
  }
  const branch = branchOut.trim() || null;
  const is_dirty = statusOut !== null && statusOut.trim().length > 0;
  let ahead = 0;
  let behind = 0;
  if (divergedOut !== null) {
    const match = divergedOut.trim().match(/^(\d+)\s+(\d+)/);
    if (match) {
      ahead = Number(match[1]);
      behind = Number(match[2]);
    }
  }
  const value: GitMeta = { branch, is_dirty, ahead, behind };
  cache.set(rootPath, { at: now, value });
  return value;
 }
 export function invalidateGitMetaCache(rootPath?: string): void {
  if (rootPath) {
    cache.delete(rootPath);
  } else {
    cache.clear();
  }
 }
--- a/apps/server/src/services/inference.ts
+++ b/apps/server/src/services/inference.ts
@@ -1,16 +1,64 @@
 import type { FastifyBaseLogger } from 'fastify';
 import type { Sql } from '../db.js';
 import type { Config } from '../config.js';
-import type { Message, Project, Session, ToolCall, UserStreamFrame } from '../types/api.js';
+import type {
-import { ALL_TOOLS, TOOLS_BY_NAME, toolJsonSchemas } from './tools.js';
+  Agent,
  ErrorReason,
  Message,
  MessageMetadata,
  Project,
  Session,
  ToolCall,
  UserStreamFrame,
 } from '../types/api.js';
 import {
  ALL_TOOLS,
  READ_ONLY_TOOL_NAMES,
  TOOLS_BY_NAME,
  toolJsonSchemas,
  type ToolJsonSchema,
 } from './tools.js';
 import { PathScopeError, resolveProjectRoot } from './path_guard.js';
 import { maybeAutoNameChat } from './auto_name.js';
 import { getAgentById } from './agents.js';
 const BASE_SYSTEM_PROMPT = (projectPath: string) =>
  `You are BooCode Chat, a code investigation assistant. The user is working on a project located at ${projectPath}. Use the file-read tools (view_file, list_dir, grep, find_files) to investigate code when needed. Be concise. Cite file paths and line numbers when discussing code. Do not hallucinate file contents — read the file first. Tool results may be truncated; if so, narrow your query rather than guessing.`;
 const DB_FLUSH_INTERVAL_MS = 500;
-const MAX_TOOL_LOOP_DEPTH = 5;
+
 // v1.8.2: tool-call budget defaults. Resolved per-turn by resolveToolBudget.
 //   - Agent with explicit max_tool_calls: that value.
 //   - Agent with read-only-only tools:    BUDGET_READ_ONLY (30).
 //   - Agent with any non-read-only tool:  BUDGET_NON_READ_ONLY (10).
 //   - No agent (raw chat):                BUDGET_NO_AGENT (15).
 const BUDGET_READ_ONLY = 30;
 const BUDGET_NON_READ_ONLY = 10;
 const BUDGET_NO_AGENT = 15;
 const READ_ONLY_SET: ReadonlySet<string> = new Set(READ_ONLY_TOOL_NAMES);
 function resolveToolBudget(agent: Agent | null): number {
  if (agent?.max_tool_calls != null) return agent.max_tool_calls;
  if (!agent) return BUDGET_NO_AGENT;
  const allReadOnly = agent.tools.every((t) => READ_ONLY_SET.has(t));
  return allReadOnly ? BUDGET_READ_ONLY : BUDGET_NON_READ_ONLY;
 }
 // Synthetic system note appended to the cap-hit summary call. Verbatim from
 // the v1.8.2 spec — do not paraphrase: the model is more reliable when the
 // instruction is short, declarative, and identical across calls.
 const CAP_HIT_SUMMARY_NOTE = (limit: number) =>
  `You've reached the tool budget (${limit} calls). Produce the best answer you can with what you have. Do not call more tools.`;
 function isCapHitSentinel(m: Message): boolean {
  return (
    m.role === 'system' &&
    m.metadata !== null &&
    typeof m.metadata === 'object' &&
    (m.metadata as { kind?: unknown }).kind === 'cap_hit'
  );
 }
 export interface InferenceFrame {
  type:
@@ -28,12 +76,22 @@ export interface InferenceFrame {
  chat_id?: string;
  tool_message_id?: string;
  tool_call_id?: string;
-  role?: 'assistant' | 'tool' | 'user';
+  // v1.8.2: 'system' added so cap-hit sentinel messages can announce themselves
  // through the normal message_started → delta → message_complete sequence.
  role?: 'assistant' | 'tool' | 'user' | 'system';
  content?: string;
  tool_call?: ToolCall;
  output?: unknown;
  truncated?: boolean;
  error?: string;
  // v1.8.2: structured error reason. Set on `type: 'error'` so the UI can
  // surface a specific message; `error` stays the human-readable text.
  reason?: ErrorReason;
  // v1.8.2: piggybacks on `message_complete` so static or terminally-resolved
  // messages can carry their persisted metadata to the live stream without a
  // refetch (sentinels carry { kind: 'cap_hit', ... }; failed messages carry
  // { kind: 'error', ... }).
  metadata?: MessageMetadata | null;
  tokens_used?: number | null;
  ctx_used?: number | null;
  ctx_max?: number | null;
@@ -91,16 +149,32 @@ export interface InferenceContext {
  publishUser: (frame: UserStreamFrame) => void;
 }
 // Resolution order: base prompt < agent.system_prompt < session.system_prompt.
 // Agent prompts layer on top of the base; session prompt is the most specific
 // override and stacks last so callers can append per-session instructions.
 export function buildSystemPrompt(
  project: Project,
  session: Session,
  agent: Agent | null
 ): string {
  let out = BASE_SYSTEM_PROMPT(project.path);
  if (agent && agent.system_prompt.trim().length > 0) {
    out += '\n\n' + agent.system_prompt.trim();
  }
  if (session.system_prompt && session.system_prompt.trim().length > 0) {
    out += '\n\n' + session.system_prompt.trim();
  }
  return out;
 }
 export function buildMessagesPayload(
  session: Session,
  project: Project,
-  history: Message[]
+  history: Message[],
  agent: Agent | null = null
 ): OpenAiMessage[] {
  const out: OpenAiMessage[] = [];
-  let systemPrompt = BASE_SYSTEM_PROMPT(project.path);
+  const systemPrompt = buildSystemPrompt(project, session, agent);
  if (session.system_prompt && session.system_prompt.trim().length > 0) {
    systemPrompt += '\n\n' + session.system_prompt.trim();
  }
  out.push({ role: 'system', content: systemPrompt });
  // Find the latest compact marker — only send messages from that point onwards
@@ -118,6 +192,11 @@ export function buildMessagesPayload(
      out.push({ role: 'system', content: m.content });
      continue;
    }
    // v1.8.2: cap-hit sentinels are UI-only — never send them to the LLM. The
    // synthetic "you've reached the tool budget" note lives only inside the
    // summary call's messages array and is never persisted, so on Continue
    // the model resumes with a clean context.
    if (isCapHitSentinel(m)) continue;
    if (m.role === 'assistant' && m.status === 'streaming') continue;
    if (m.role === 'assistant' && m.status === 'cancelled') continue;
    if (m.role === 'tool') {
@@ -161,7 +240,7 @@ async function loadContext(
  chatId: string
 ): Promise<{ session: Session; project: Project; history: Message[] } | null> {
  const sessionRows = await sql<Session[]>`
-    SELECT id, project_id, name, model, system_prompt, status, created_at, updated_at
+    SELECT id, project_id, name, model, system_prompt, status, created_at, updated_at, agent_id
    FROM sessions WHERE id = ${sessionId}
  `;
  if (sessionRows.length === 0) return null;
@@ -176,7 +255,7 @@ async function loadContext(
  const history = await sql<Message[]>`
    SELECT id, session_id, chat_id, role, content, kind, tool_calls, tool_results, status, last_seq,
-           tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at
+           tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at, metadata
    FROM messages
    WHERE chat_id = ${chatId}
    ORDER BY created_at ASC, id ASC
@@ -217,11 +296,18 @@ interface StreamResult {
  nCtx: number | null;
 }
 interface StreamOptions {
  // null = omit tools entirely (compact phase); [] = caller stripped all tools
  // (rare; we still omit from the request body to avoid OpenAI 400).
  tools: ToolJsonSchema[] | null;
  temperature?: number;
 }
 async function streamCompletion(
  ctx: InferenceContext,
  model: string,
  messages: OpenAiMessage[],
-  includeTools: boolean,
+  opts: StreamOptions,
  onDelta: (content: string) => void,
  signal?: AbortSignal
 ): Promise<StreamResult> {
@@ -231,10 +317,13 @@ async function streamCompletion(
    stream: true,
    stream_options: { include_usage: true },
  };
-  if (includeTools) {
+  if (opts.tools && opts.tools.length > 0) {
-    body['tools'] = toolJsonSchemas();
+    body['tools'] = opts.tools;
    body['tool_choice'] = 'auto';
  }
  if (typeof opts.temperature === 'number') {
    body['temperature'] = opts.temperature;
  }
  const res = await fetch(`${ctx.config.LLAMA_SWAP_URL}/v1/chat/completions`, {
    method: 'POST',
@@ -348,39 +437,31 @@ async function executeToolCall(
  }
 }
-async function runAssistantTurn(
+interface TurnArgs {
-  ctx: InferenceContext,
+  sessionId: string;
-  sessionId: string,
+  chatId: string;
-  chatId: string,
+  assistantMessageId: string;
-  assistantMessageId: string,
+  // v1.8.2: cumulative tool calls executed this run. Compared against the
-  depth: number,
+  // resolved budget at the top of each turn. Replaces the older `depth`
-  signal?: AbortSignal
+  // counter (which counted iterations, not invocations).
-): Promise<void> {
+  toolsUsed: number;
-  if (depth > MAX_TOOL_LOOP_DEPTH) {
+  signal: AbortSignal | undefined;
-    await ctx.sql`
+}
      UPDATE messages
      SET status = 'failed',
          content = ${'tool loop depth exceeded'},
          finished_at = clock_timestamp()
      WHERE id = ${assistantMessageId}
    `;
    ctx.publish(sessionId, {
      type: 'error',
      message_id: assistantMessageId,
      chat_id: chatId,
      error: 'tool loop depth exceeded',
    });
    return;
  }
-  const loaded = await loadContext(ctx.sql, sessionId, chatId);
+interface StreamPhaseState {
-  if (!loaded) {
+  accumulated: string;
-    ctx.log.warn({ sessionId }, 'inference: session or project missing');
+  startedAt: string | null;
-    return;
+}
-  }
+
-  const { session, project, history } = loaded;
+async function executeStreamPhase(
-  const projectRoot = await resolveProjectRoot(project.path);
+  ctx: InferenceContext,
-  const messages = buildMessagesPayload(session, project, history);
+  args: TurnArgs,
  session: Session,
  messages: OpenAiMessage[],
  state: StreamPhaseState,
  agent: Agent | null
 ): Promise<StreamResult> {
  const { sessionId, chatId, assistantMessageId, signal } = args;
  const startedRow = await ctx.sql<{ started_at: string }[]>`
    UPDATE messages
@@ -388,7 +469,7 @@ async function runAssistantTurn(
    WHERE id = ${assistantMessageId}
    RETURNING started_at
  `;
-  const startedAt = startedRow[0]?.started_at ?? null;
+  state.startedAt = startedRow[0]?.started_at ?? null;
  ctx.publish(sessionId, {
    type: 'message_started',
@@ -397,7 +478,6 @@ async function runAssistantTurn(
    role: 'assistant',
  });
  let accumulated = '';
  let pendingFlushTimer: NodeJS.Timeout | null = null;
  let flushPromise: Promise<unknown> = Promise.resolve();
@@ -406,7 +486,7 @@ async function runAssistantTurn(
      clearTimeout(pendingFlushTimer);
      pendingFlushTimer = null;
    }
-    const snapshot = accumulated;
+    const snapshot = state.accumulated;
    flushPromise = flushPromise.then(() =>
      ctx.sql`UPDATE messages SET content = ${snapshot} WHERE id = ${assistantMessageId}`
    );
@@ -420,15 +500,22 @@ async function runAssistantTurn(
    }, DB_FLUSH_INTERVAL_MS);
  };
-  let result: StreamResult;
+  // Tool whitelist: if an agent is set, filter the global tool list to only the
  // tool names it allows. Unknown names in agent.tools are dropped silently
  // (handled here by intersection). When no agent: send all tools.
  const effectiveTools: ToolJsonSchema[] = agent
    ? toolJsonSchemas().filter((t) => agent.tools.includes(t.function.name))
    : toolJsonSchemas();
  const effectiveTemperature = agent?.temperature;
  try {
-    result = await streamCompletion(
+    return await streamCompletion(
      ctx,
      session.model,
      messages,
-      true,
+      { tools: effectiveTools, temperature: effectiveTemperature },
      (delta) => {
-        accumulated += delta;
+        state.accumulated += delta;
        ctx.publish(sessionId, {
          type: 'delta',
          message_id: assistantMessageId,
@@ -440,14 +527,42 @@ async function runAssistantTurn(
      },
      signal
    );
-  } catch (err) {
+  } finally {
    if (pendingFlushTimer) {
      clearTimeout(pendingFlushTimer);
      pendingFlushTimer = null;
    }
    await flushPromise;
-    const isAbort = err instanceof Error && err.name === 'AbortError';
+  }
-    const finalStatus = isAbort ? 'cancelled' : 'failed';
+}
 async function handleAbortOrError(
  ctx: InferenceContext,
  args: TurnArgs,
  accumulated: string,
  err: unknown
 ): Promise<void> {
  const { sessionId, chatId, assistantMessageId } = args;
  const isAbort = err instanceof Error && err.name === 'AbortError';
  const finalStatus = isAbort ? 'cancelled' : 'failed';
  const errMsg = err instanceof Error ? err.message : String(err);
  // v1.8.2: persist a structured error metadata blob on genuine failures so
  // the bubble can render the reason on reload without re-deriving from the
  // (one-shot) WS error frame. User-initiated abort skips this — there's no
  // "reason" to surface for a stop the user already explicitly chose.
  const errorMetadata: MessageMetadata | null = isAbort
    ? null
    : { kind: 'error', error_reason: 'llm_provider_error', error_text: errMsg };
  if (errorMetadata) {
    await ctx.sql`
      UPDATE messages
      SET status = ${finalStatus},
          content = ${accumulated},
          finished_at = clock_timestamp(),
          metadata = ${ctx.sql.json(errorMetadata as never)}
      WHERE id = ${assistantMessageId}
    `;
  } else {
    await ctx.sql`
      UPDATE messages
      SET status = ${finalStatus},
@@ -455,121 +570,152 @@ async function runAssistantTurn(
          finished_at = clock_timestamp()
      WHERE id = ${assistantMessageId}
    `;
    const [failSessRow] = await ctx.sql<{ project_id: string; name: string; updated_at: string }[]>`
      UPDATE sessions SET updated_at = clock_timestamp()
      WHERE id = ${sessionId}
      RETURNING project_id, name, updated_at
    `;
    ctx.publishUser({ type: 'session_updated', session_id: sessionId, project_id: failSessRow!.project_id, name: failSessRow!.name, updated_at: failSessRow!.updated_at });
    if (isAbort) {
      ctx.publish(sessionId, {
        type: 'message_complete',
        message_id: assistantMessageId,
        chat_id: chatId,
      });
      ctx.log.info({ sessionId, chatId, assistantMessageId }, 'inference cancelled');
    } else {
      const errMsg = err instanceof Error ? err.message : String(err);
      ctx.publish(sessionId, {
        type: 'error',
        message_id: assistantMessageId,
        chat_id: chatId,
        error: errMsg,
      });
      ctx.log.error({ err, sessionId, assistantMessageId }, 'inference failed');
    }
    return;
  }
-
+  const [failSessRow] = await ctx.sql<{ project_id: string; name: string; updated_at: string }[]>`
-  if (pendingFlushTimer) {
+    UPDATE sessions SET updated_at = clock_timestamp()
-    clearTimeout(pendingFlushTimer);
+    WHERE id = ${sessionId}
-    pendingFlushTimer = null;
+    RETURNING project_id, name, updated_at
-  }
+  `;
-  await flushPromise;
+  ctx.publishUser({ type: 'session_updated', session_id: sessionId, project_id: failSessRow!.project_id, name: failSessRow!.name, updated_at: failSessRow!.updated_at });
-
+  // v1.8 mobile-tabs: cancellation is a user-initiated stop, treat as idle;
-  const { content, finishReason, toolCalls, promptTokens, completionTokens, nCtx } = result;
+  // genuine errors flip the dot red. v1.8.2: error path also carries a
-
+  // machine-readable `reason` so the UI can render specifics inline.
-  if (toolCalls.length > 0) {
+  if (isAbort) {
-    const [updated] = await ctx.sql<
+    ctx.publishUser({ type: 'chat_status', chat_id: chatId, status: 'idle', at: new Date().toISOString() });
      { tokens_used: number | null; ctx_used: number | null; ctx_max: number | null; finished_at: string | null }[]
    >`
      UPDATE messages
      SET content = ${content},
          status = 'complete',
          tool_calls = ${ctx.sql.json(toolCalls as never)},
          tokens_used = ${completionTokens},
          ctx_used = ${promptTokens},
          ctx_max = ${nCtx},
          finished_at = clock_timestamp()
      WHERE id = ${assistantMessageId}
      RETURNING tokens_used, ctx_used, ctx_max, finished_at
    `;
    const [toolSessRow] = await ctx.sql<{ project_id: string; name: string; updated_at: string }[]>`
      UPDATE sessions SET updated_at = clock_timestamp()
      WHERE id = ${sessionId}
      RETURNING project_id, name, updated_at
    `;
    ctx.publishUser({ type: 'session_updated', session_id: sessionId, project_id: toolSessRow!.project_id, name: toolSessRow!.name, updated_at: toolSessRow!.updated_at });
    for (const tc of toolCalls) {
      ctx.publish(sessionId, {
        type: 'tool_call',
        message_id: assistantMessageId,
        chat_id: chatId,
        tool_call: tc,
      });
    }
    ctx.publish(sessionId, {
      type: 'message_complete',
      message_id: assistantMessageId,
      chat_id: chatId,
      tokens_used: updated?.tokens_used ?? null,
      ctx_used: updated?.ctx_used ?? null,
      ctx_max: updated?.ctx_max ?? null,
      started_at: startedAt,
      finished_at: updated?.finished_at ?? null,
      model: session.model,
    });
-
+    ctx.log.info({ sessionId, chatId, assistantMessageId }, 'inference cancelled');
-    await Promise.all(
+  } else {
-      toolCalls.map(async (tc) => {
+    ctx.publishUser({
-        const [toolRow] = await ctx.sql<{ id: string }[]>`
+      type: 'chat_status',
-          INSERT INTO messages (session_id, chat_id, role, content, status, created_at)
+      chat_id: chatId,
-          VALUES (${sessionId}, ${chatId}, 'tool', '', 'complete', clock_timestamp())
+      status: 'error',
-          RETURNING id
+      at: new Date().toISOString(),
-        `;
+      reason: 'llm_provider_error',
-        const toolMessageId = toolRow!.id;
+    });
-        const tres = await executeToolCall(projectRoot, tc);
+    ctx.publish(sessionId, {
-        const stored = {
+      type: 'error',
-          tool_call_id: tc.id,
+      message_id: assistantMessageId,
-          output: tres.output,
+      chat_id: chatId,
-          truncated: tres.truncated,
+      error: errMsg,
-          ...(tres.error ? { error: tres.error } : {}),
+      reason: 'llm_provider_error',
-        };
+    });
-        await ctx.sql`
+    ctx.log.error({ err, sessionId, assistantMessageId }, 'inference failed');
          UPDATE messages
          SET tool_results = ${ctx.sql.json(stored as never)}
          WHERE id = ${toolMessageId}
        `;
        ctx.publish(sessionId, {
          type: 'tool_result',
          tool_message_id: toolMessageId,
          chat_id: chatId,
          tool_call_id: tc.id,
          output: tres.output,
          truncated: tres.truncated,
          ...(tres.error ? { error: tres.error } : {}),
        });
      })
    );
    const [nextAssistant] = await ctx.sql<{ id: string }[]>`
      INSERT INTO messages (session_id, chat_id, role, content, status, created_at)
      VALUES (${sessionId}, ${chatId}, 'assistant', '', 'streaming', clock_timestamp())
      RETURNING id
    `;
    await runAssistantTurn(ctx, sessionId, chatId, nextAssistant!.id, depth + 1, signal);
    return;
  }
 }
 async function executeToolPhase(
  ctx: InferenceContext,
  args: TurnArgs,
  result: StreamResult,
  startedAt: string | null,
  session: Session,
  projectRoot: string
 ): Promise<void> {
  const { sessionId, chatId, assistantMessageId, toolsUsed, signal } = args;
  const { content, toolCalls, promptTokens, completionTokens, nCtx } = result;
  const [updated] = await ctx.sql<
    { tokens_used: number | null; ctx_used: number | null; ctx_max: number | null; finished_at: string | null }[]
  >`
    UPDATE messages
    SET content = ${content},
        status = 'complete',
        tool_calls = ${ctx.sql.json(toolCalls as never)},
        tokens_used = ${completionTokens},
        ctx_used = ${promptTokens},
        ctx_max = ${nCtx},
        finished_at = clock_timestamp()
    WHERE id = ${assistantMessageId}
    RETURNING tokens_used, ctx_used, ctx_max, finished_at
  `;
  const [toolSessRow] = await ctx.sql<{ project_id: string; name: string; updated_at: string }[]>`
    UPDATE sessions SET updated_at = clock_timestamp()
    WHERE id = ${sessionId}
    RETURNING project_id, name, updated_at
  `;
  ctx.publishUser({ type: 'session_updated', session_id: sessionId, project_id: toolSessRow!.project_id, name: toolSessRow!.name, updated_at: toolSessRow!.updated_at });
  for (const tc of toolCalls) {
    ctx.publish(sessionId, {
      type: 'tool_call',
      message_id: assistantMessageId,
      chat_id: chatId,
      tool_call: tc,
    });
  }
  ctx.publish(sessionId, {
    type: 'message_complete',
    message_id: assistantMessageId,
    chat_id: chatId,
    tokens_used: updated?.tokens_used ?? null,
    ctx_used: updated?.ctx_used ?? null,
    ctx_max: updated?.ctx_max ?? null,
    started_at: startedAt,
    finished_at: updated?.finished_at ?? null,
    model: session.model,
  });
  await Promise.all(
    toolCalls.map(async (tc) => {
      const [toolRow] = await ctx.sql<{ id: string }[]>`
        INSERT INTO messages (session_id, chat_id, role, content, status, created_at)
        VALUES (${sessionId}, ${chatId}, 'tool', '', 'complete', clock_timestamp())
        RETURNING id
      `;
      const toolMessageId = toolRow!.id;
      const tres = await executeToolCall(projectRoot, tc);
      const stored = {
        tool_call_id: tc.id,
        output: tres.output,
        truncated: tres.truncated,
        ...(tres.error ? { error: tres.error } : {}),
      };
      await ctx.sql`
        UPDATE messages
        SET tool_results = ${ctx.sql.json(stored as never)}
        WHERE id = ${toolMessageId}
      `;
      ctx.publish(sessionId, {
        type: 'tool_result',
        tool_message_id: toolMessageId,
        chat_id: chatId,
        tool_call_id: tc.id,
        output: tres.output,
        truncated: tres.truncated,
        ...(tres.error ? { error: tres.error } : {}),
      });
    })
  );
  const [nextAssistant] = await ctx.sql<{ id: string }[]>`
    INSERT INTO messages (session_id, chat_id, role, content, status, created_at)
    VALUES (${sessionId}, ${chatId}, 'assistant', '', 'streaming', clock_timestamp())
    RETURNING id
  `;
  await runAssistantTurn(ctx, {
    sessionId,
    chatId,
    assistantMessageId: nextAssistant!.id,
    // v1.8.2: charge this turn's actual tool invocations against the budget.
    // One assistant message can emit multiple tool_calls, so we add the run
    // count, not 1. The next turn's budget check sees the cumulative total.
    toolsUsed: toolsUsed + result.toolCalls.length,
    signal,
  });
 }
 async function finalizeCompletion(
  ctx: InferenceContext,
  args: TurnArgs,
  result: StreamResult,
  startedAt: string | null,
  session: Session
 ): Promise<void> {
  const { sessionId, chatId, assistantMessageId } = args;
  const { content, finishReason, promptTokens, completionTokens, nCtx } = result;
  const [updated] = await ctx.sql<
    { tokens_used: number | null; ctx_used: number | null; ctx_max: number | null; finished_at: string | null }[]
@@ -590,6 +736,7 @@ async function runAssistantTurn(
    RETURNING project_id, name, updated_at
  `;
  ctx.publishUser({ type: 'session_updated', session_id: sessionId, project_id: completeSessRow!.project_id, name: completeSessRow!.name, updated_at: completeSessRow!.updated_at });
  ctx.publishUser({ type: 'chat_status', chat_id: chatId, status: 'idle', at: new Date().toISOString() });
  ctx.publish(sessionId, {
    type: 'message_complete',
    message_id: assistantMessageId,
@@ -615,6 +762,55 @@ async function runAssistantTurn(
  );
 }
 async function runAssistantTurn(
  ctx: InferenceContext,
  args: TurnArgs,
 ): Promise<void> {
  const { sessionId, chatId } = args;
  const loaded = await loadContext(ctx.sql, sessionId, chatId);
  if (!loaded) {
    ctx.log.warn({ sessionId }, 'inference: session or project missing');
    return;
  }
  const { session, project, history } = loaded;
  const projectRoot = await resolveProjectRoot(project.path);
  // Agent resolution is per-turn so PATCH agent_id mid-conversation takes
  // effect on the next message. Unknown agent_id returns null silently —
  // session falls back to base prompt + all tools + default temperature.
  const agent = session.agent_id
    ? await getAgentById(project.path, session.agent_id)
    : null;
  // v1.8.2: cap-hit replaces the older "tool loop depth exceeded" failure.
  // When we've already burned the budget *before* this turn even runs, we
  // skip straight to the summary flow — the in-flight assistant message slot
  // gets reused for the wrap-up reply instead of being marked failed.
  const budget = resolveToolBudget(agent);
  if (args.toolsUsed >= budget) {
    await runCapHitSummary(ctx, args, session, project, history, agent, budget);
    return;
  }
  const messages = buildMessagesPayload(session, project, history, agent);
  const state: StreamPhaseState = { accumulated: '', startedAt: null };
  let result: StreamResult;
  try {
    result = await executeStreamPhase(ctx, args, session, messages, state, agent);
  } catch (err) {
    await handleAbortOrError(ctx, args, state.accumulated, err);
    return;
  }
  if (result.toolCalls.length > 0) {
    await executeToolPhase(ctx, args, result, state.startedAt, session, projectRoot);
    return;
  }
  await finalizeCompletion(ctx, args, result, state.startedAt, session);
 }
 export async function runInference(
  ctx: InferenceContext,
  sessionId: string,
@@ -622,7 +818,264 @@ export async function runInference(
  assistantMessageId: string,
  signal?: AbortSignal
 ): Promise<void> {
-  return runAssistantTurn(ctx, sessionId, chatId, assistantMessageId, 0, signal);
+  // v1.8.2: every fresh inference (initial send, regenerate, force_send,
  // continue) starts with a clean budget. Tool-call accumulation across
  // Continue invocations is what the hard ceiling guards against, not the
  // per-call budget.
  return runAssistantTurn(ctx, { sessionId, chatId, assistantMessageId, toolsUsed: 0, signal });
 }
 // v1.8.2: cap-hit summary flow. Called instead of erroring when the loop
 // hits its budget. Reuses the in-flight assistant message slot to stream a
 // short wrap-up reply with the synthetic note prepended and tools disabled,
 // then always inserts a cap_hit sentinel afterward (regardless of summary
 // outcome) so the UI can show a Continue affordance.
 async function runCapHitSummary(
  ctx: InferenceContext,
  args: TurnArgs,
  session: Session,
  project: Project,
  history: Message[],
  agent: Agent | null,
  budget: number,
 ): Promise<void> {
  const { sessionId, chatId, assistantMessageId, signal } = args;
  const messages = buildMessagesPayload(session, project, history, agent);
  messages.push({ role: 'system', content: CAP_HIT_SUMMARY_NOTE(budget) });
  const startedRow = await ctx.sql<{ started_at: string }[]>`
    UPDATE messages
    SET started_at = clock_timestamp()
    WHERE id = ${assistantMessageId}
    RETURNING started_at
  `;
  const startedAt = startedRow[0]?.started_at ?? null;
  ctx.publish(sessionId, {
    type: 'message_started',
    message_id: assistantMessageId,
    chat_id: chatId,
    role: 'assistant',
  });
  let accumulated = '';
  let pendingFlushTimer: NodeJS.Timeout | null = null;
  let flushPromise: Promise<unknown> = Promise.resolve();
  const flushNow = () => {
    if (pendingFlushTimer) {
      clearTimeout(pendingFlushTimer);
      pendingFlushTimer = null;
    }
    const snapshot = accumulated;
    flushPromise = flushPromise.then(() =>
      ctx.sql`UPDATE messages SET content = ${snapshot} WHERE id = ${assistantMessageId}`
    );
  };
  const scheduleFlush = () => {
    if (pendingFlushTimer) return;
    pendingFlushTimer = setTimeout(() => {
      pendingFlushTimer = null;
      flushNow();
    }, DB_FLUSH_INTERVAL_MS);
  };
  let summaryOk = false;
  let summarySoftCancelled = false;
  let summaryError: string | null = null;
  let result: StreamResult | null = null;
  try {
    result = await streamCompletion(
      ctx,
      session.model,
      messages,
      { tools: null, temperature: agent?.temperature },
      (delta) => {
        accumulated += delta;
        ctx.publish(sessionId, {
          type: 'delta',
          message_id: assistantMessageId,
          chat_id: chatId,
          content: delta,
        });
        scheduleFlush();
      },
      signal,
    );
    summaryOk = true;
  } catch (err) {
    if (err instanceof Error && err.name === 'AbortError') {
      summarySoftCancelled = true;
    } else {
      summaryError = err instanceof Error ? err.message : String(err);
    }
  } finally {
    if (pendingFlushTimer) {
      clearTimeout(pendingFlushTimer);
      pendingFlushTimer = null;
    }
    await flushPromise;
  }
  // Finalize the summary message based on the three outcomes. The sentinel
  // is inserted regardless so the user always has the Continue affordance —
  // even on a partial / failed summary the chat history shows where the
  // budget was hit.
  if (summaryOk && result) {
    const [updated] = await ctx.sql<
      { tokens_used: number | null; ctx_used: number | null; ctx_max: number | null; finished_at: string | null }[]
    >`
      UPDATE messages
      SET content = ${result.content},
          status = 'complete',
          tokens_used = ${result.completionTokens},
          ctx_used = ${result.promptTokens},
          ctx_max = ${result.nCtx},
          finished_at = clock_timestamp()
      WHERE id = ${assistantMessageId}
      RETURNING tokens_used, ctx_used, ctx_max, finished_at
    `;
    ctx.publish(sessionId, {
      type: 'message_complete',
      message_id: assistantMessageId,
      chat_id: chatId,
      tokens_used: updated?.tokens_used ?? null,
      ctx_used: updated?.ctx_used ?? null,
      ctx_max: updated?.ctx_max ?? null,
      started_at: startedAt,
      finished_at: updated?.finished_at ?? null,
      model: session.model,
    });
  } else if (summarySoftCancelled) {
    await ctx.sql`
      UPDATE messages
      SET content = ${accumulated},
          status = 'cancelled',
          finished_at = clock_timestamp()
      WHERE id = ${assistantMessageId}
    `;
    ctx.publish(sessionId, {
      type: 'message_complete',
      message_id: assistantMessageId,
      chat_id: chatId,
    });
  } else {
    const errMeta: MessageMetadata = {
      kind: 'error',
      error_reason: 'summary_after_cap_failed',
      error_text: summaryError ?? 'summary failed',
    };
    await ctx.sql`
      UPDATE messages
      SET content = ${accumulated},
          status = 'failed',
          finished_at = clock_timestamp(),
          metadata = ${ctx.sql.json(errMeta as never)}
      WHERE id = ${assistantMessageId}
    `;
    ctx.publish(sessionId, {
      type: 'error',
      message_id: assistantMessageId,
      chat_id: chatId,
      error: summaryError ?? 'summary failed',
      reason: 'summary_after_cap_failed',
    });
  }
  // Bump session/chat updated_at exactly once for this turn.
  const [sessRow] = await ctx.sql<{ project_id: string; name: string; updated_at: string }[]>`
    UPDATE sessions SET updated_at = clock_timestamp()
    WHERE id = ${sessionId}
    RETURNING project_id, name, updated_at
  `;
  ctx.publishUser({
    type: 'session_updated',
    session_id: sessionId,
    project_id: sessRow!.project_id,
    name: sessRow!.name,
    updated_at: sessRow!.updated_at,
  });
  await insertCapHitSentinel(ctx, sessionId, chatId, agent, budget);
  // Status frame fires last so the dot color reflects the terminal state.
  // Success → idle, abort → idle (user-driven stop), error → error+reason.
  if (summaryOk) {
    ctx.publishUser({ type: 'chat_status', chat_id: chatId, status: 'idle', at: new Date().toISOString() });
  } else if (summarySoftCancelled) {
    ctx.publishUser({ type: 'chat_status', chat_id: chatId, status: 'idle', at: new Date().toISOString() });
  } else {
    ctx.publishUser({
      type: 'chat_status',
      chat_id: chatId,
      status: 'error',
      at: new Date().toISOString(),
      reason: 'summary_after_cap_failed',
    });
  }
  ctx.log.info(
    { sessionId, chatId, assistantMessageId, budget, summaryOk, summaryCancelled: summarySoftCancelled },
    'inference cap-hit summary finished',
  );
 }
 async function insertCapHitSentinel(
  ctx: InferenceContext,
  sessionId: string,
  chatId: string,
  agent: Agent | null,
  budget: number,
 ): Promise<void> {
  // Hard ceiling: count prior cap_hit sentinels in this chat. After two
  // continues (sentinel count of 2), the next sentinel reports can_continue
  // false and the UI disables the Continue button.
  const priorRows = await ctx.sql<{ count: number }[]>`
    SELECT COUNT(*)::int AS count
    FROM messages
    WHERE chat_id = ${chatId}
      AND role = 'system'
      AND metadata->>'kind' = 'cap_hit'
  `;
  const priorCount = priorRows[0]?.count ?? 0;
  const canContinue = priorCount < 2;
  const metadata: MessageMetadata = {
    kind: 'cap_hit',
    used: budget,
    limit: budget,
    agent_name: agent?.name ?? null,
    can_continue: canContinue,
  };
  const content = `Reached tool budget (${budget}/${budget}). Continue to extend.`;
  const [row] = await ctx.sql<{ id: string }[]>`
    INSERT INTO messages (session_id, chat_id, role, content, status, created_at, metadata)
    VALUES (${sessionId}, ${chatId}, 'system', ${content}, 'complete', clock_timestamp(), ${ctx.sql.json(metadata as never)})
    RETURNING id
  `;
  // The sentinel content is static, but we still walk the standard frame
  // sequence (started → delta → complete) so useSessionStream's reducer
  // appends it via the same path it uses for streaming assistant messages.
  // The delta carries the full text in one chunk.
  ctx.publish(sessionId, {
    type: 'message_started',
    message_id: row!.id,
    chat_id: chatId,
    role: 'system',
  });
  ctx.publish(sessionId, {
    type: 'delta',
    message_id: row!.id,
    chat_id: chatId,
    content,
  });
  ctx.publish(sessionId, {
    type: 'message_complete',
    message_id: row!.id,
    chat_id: chatId,
    metadata,
  });
 }
 const COMPACT_SYSTEM_PROMPT =
@@ -659,7 +1112,7 @@ async function runCompact(
      ctx,
      session.model,
      messagesForSummary,
-      false,
+      { tools: null },
      (delta) => {
        content += delta;
        ctx.publish(sessionId, {
@@ -717,6 +1170,9 @@ export function createInferenceRunner(
        ...ctx,
        publishUser: (frame) => publishUserFn(user, frame),
      };
      // v1.8 mobile-tabs: announce working before the async loop starts so
      // every device subscribed to the user channel sees the amber dot.
      callCtx.publishUser({ type: 'chat_status', chat_id: chatId, status: 'working', at: new Date().toISOString() });
      const controller = new AbortController();
      let resolveCompleted!: () => void;
      const completed = new Promise<void>((res) => { resolveCompleted = res; });
--- a/apps/server/src/services/project_bootstrap.ts
+++ b/apps/server/src/services/project_bootstrap.ts
@@ -82,11 +82,13 @@ export async function bootstrapProject(
    throw new BootstrapNameError(`invalid name after sanitization: "${folder}"`);
  }
-  // Whitelist resolution
+  // Bootstrap target resolution. Uses BOOTSTRAP_ROOT (writable), not
-  const whitelistReal = await realpath(config.PROJECT_ROOT_WHITELIST);
+  // PROJECT_ROOT_WHITELIST (which may be a wider read-only scope for
-  const fullPath = resolve(whitelistReal, folder);
+  // add-existing flow).
-  if (!fullPath.startsWith(whitelistReal + sep)) {
+  const bootstrapReal = await realpath(config.BOOTSTRAP_ROOT);
-    throw new BootstrapPathError('path escapes whitelist');
+  const fullPath = resolve(bootstrapReal, folder);
  if (!fullPath.startsWith(bootstrapReal + sep)) {
    throw new BootstrapPathError('path escapes bootstrap root');
  }
  if (existsSync(fullPath)) {
    throw new BootstrapCollisionError(`path already exists: ${fullPath}`);
@@ -144,7 +146,8 @@ export async function bootstrapProject(
        // Step 6: git remote add + push
        try {
-          await execFileAsync('git', ['remote', 'add', 'origin', repo.ssh_url], { cwd: fullPath });
+          const sshUrl = repo.ssh_url.replace('git.indifferentketchup.com', '100.114.205.53');
          await execFileAsync('git', ['remote', 'add', 'origin', sshUrl], { cwd: fullPath });
          await execFileAsync('git', ['push', '-u', 'origin', 'main'], { cwd: fullPath });
          gitea_pushed = true;
          log.info({ folder }, 'project_bootstrap: pushed to gitea');
--- a/apps/server/src/services/tools.ts
+++ b/apps/server/src/services/tools.ts
@@ -3,6 +3,7 @@ import { resolve, basename, relative } from 'node:path';
 import { z } from 'zod';
 import { pathGuard, PathScopeError } from './path_guard.js';
 import { grep as fileOpsGrep, findFiles as fileOpsFindFiles } from './file_ops.js';
 import { getGitMeta } from './git_meta.js';
 const MAX_FILE_BYTES = 5 * 1024 * 1024;
 const DEFAULT_VIEW_LINES = 200;
@@ -266,13 +267,60 @@ export const findFiles: ToolDef<FindFilesInputT> = {
  },
 };
 // v1.8 Level 1 branch awareness: gives the model a read-only view of the
 // project's git state. No path input — operates on the inference-resolved
 // project root via getGitMeta. Subprocess runs with a 2s timeout (see git_meta).
 const GitStatusInput = z.object({}).strict();
 type GitStatusInputT = z.infer<typeof GitStatusInput>;
 export const gitStatus: ToolDef<GitStatusInputT> = {
  name: 'git_status',
  description:
    "Returns the current git branch, whether the working tree is dirty, and ahead/behind counts vs upstream. Read-only. Use when you need to know which branch the user is currently working on.",
  inputSchema: GitStatusInput,
  jsonSchema: {
    type: 'function',
    function: {
      name: 'git_status',
      description:
        'Returns the current git branch, dirty flag, and ahead/behind counts vs upstream. Read-only.',
      parameters: {
        type: 'object',
        properties: {},
        additionalProperties: false,
      },
    },
  },
  async execute(_input, projectRoot) {
    const meta = await getGitMeta(projectRoot);
    if (meta === null) {
      return { repo: false, branch: null, is_dirty: false, ahead: 0, behind: 0 };
    }
    return { repo: true, ...meta };
  },
 };
 export const ALL_TOOLS: ReadonlyArray<ToolDef<unknown>> = [
  viewFile as ToolDef<unknown>,
  listDir as ToolDef<unknown>,
  grep as ToolDef<unknown>,
  findFiles as ToolDef<unknown>,
  gitStatus as ToolDef<unknown>,
 ];
 // v1.8.2: forward-compatible read-only whitelist. An agent whose `tools` is
 // fully contained in this set gets a generous default tool budget (30);
 // anything outside means the agent can mutate state and gets a tighter
 // default (10). Every tool in v1.8.2 happens to be read-only, so the
 // non-RO branch only takes effect once BooCoder lands write tools.
 export const READ_ONLY_TOOL_NAMES = [
  'view_file',
  'list_dir',
  'grep',
  'find_files',
  'git_status',
 ] as const;
 export const TOOLS_BY_NAME: Record<string, ToolDef<unknown>> = Object.fromEntries(
  ALL_TOOLS.map((t) => [t.name, t])
 );
--- a/apps/server/src/types/api.ts
+++ b/apps/server/src/types/api.ts
@@ -28,6 +28,40 @@ export interface Session {
  status: SessionStatus;
  created_at: string;
  updated_at: string;
  agent_id: string | null;
 }
 // v1.8.1: agents come from two sources. 'global' = /data/AGENTS.md (always
 // loaded inside the container), 'project' = per-project override at
 // <root>/AGENTS.md. Project entries override global by name (case-sensitive).
 export type AgentSource = 'global' | 'project';
 export interface Agent {
  id: string;            // slug of name; stable handle stored in sessions.agent_id
  name: string;
  description: string;
  system_prompt: string;
  temperature: number;
  tools: string[];       // whitelist of tool names; empty = no tools allowed
  model: string | null;  // null means "session.model wins"
  source: AgentSource;
  // v1.8.2: per-agent tool-loop budget. null means resolve at runtime from the
  // agent's toolset (30 if all tools are read-only, 10 otherwise) or 15 for
  // raw chat with no agent.
  max_tool_calls: number | null;
 }
 // One entry per malformed `## Name` block. Per-block errors don't fail the
 // whole file — the loader returns parsed-successfully agents AND the list of
 // skipped ones so the UI can show a non-blocking warning chip.
 export interface AgentParseError {
  agent_name: string;
  reason: string;
 }
 export interface AgentsResponse {
  agents: Agent[];
  errors: AgentParseError[];
 }
 // KEEP IN SYNC: apps/server/src/schema.sql chats_status_chk
@@ -70,6 +104,31 @@ export interface ToolResult {
  error?: string;
 }
 // v1.8.2: structured reason codes for failed inferences. `error` carries the
 // human text; `reason` is the machine-readable discriminator the UI matches
 // on (with `error` as fallback when reason is absent or unrecognized).
 export type ErrorReason =
  | 'llm_provider_error'
  | 'tool_execution_failed'
  | 'summary_after_cap_failed';
 // v1.8.2: shapes stored in messages.metadata. Discriminated on `kind`.
 //   cap_hit  — system sentinel emitted when tool budget is exhausted
 //   error    — attached to a failed assistant message so UI can show reason
 export type MessageMetadata =
  | {
      kind: 'cap_hit';
      used: number;
      limit: number;
      agent_name: string | null;
      can_continue: boolean;
    }
  | {
      kind: 'error';
      error_reason: ErrorReason;
      error_text: string;
    };
 export interface Message {
  id: string;
  session_id: string;
@@ -87,6 +146,9 @@ export interface Message {
  started_at: string | null;
  finished_at: string | null;
  created_at: string;
  // v1.8.2: per-message metadata. See MessageMetadata for the discriminated
  // shapes currently in use.
  metadata: MessageMetadata | null;
 }
 export interface ModelInfo {
@@ -225,6 +287,17 @@ export interface ProjectUpdatedFrame {
  project_id: string;
  name: string;
 }
 // v1.8 mobile-tabs: server can't know about client-side panes, so status
 // is keyed by chat_id. Frontend dot derives pane status from pane.activeChatId.
 // v1.8.2: optional `reason` carries a machine-readable code when status is
 // 'error'. UI prefers reason; falls back to no detail when absent.
 export interface ChatStatusFrame {
  type: 'chat_status';
  chat_id: string;
  status: 'working' | 'idle' | 'error';
  at: string;
  reason?: ErrorReason;
 }
 export type UserStreamFrame =
  | ProjectCreatedFrame
  | ProjectDeletedFrame
@@ -240,4 +313,5 @@ export type UserStreamFrame =
  | ChatDeletedFrame
  | ProjectArchivedFrame
  | ProjectUnarchivedFrame
-  | ProjectUpdatedFrame;
+  | ProjectUpdatedFrame
  | ChatStatusFrame;
--- a/apps/server/tsconfig.json
+++ b/apps/server/tsconfig.json
@@ -10,5 +10,6 @@
    "declaration": false,
    "sourceMap": true
  },
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
  "exclude": ["src/**/__tests__/**", "**/*.test.ts"]
 }
--- a/apps/server/vitest.config.ts
+++ b/apps/server/vitest.config.ts
@@ -0,0 +1,9 @@
 import { defineConfig } from 'vitest/config';
 export default defineConfig({
  test: {
    environment: 'node',
    globals: false,
    include: ['src/**/__tests__/**/*.test.ts'],
  },
 });
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -4,8 +4,31 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BooCode</title>
    <script>
      // themes-v1 FOUC guard: read the last-applied theme from localStorage
      // and stamp the class on <html> before React mounts. Falls back to
      // obsidian + dark when no cache. Light-only themes (ivory, chalk) with
      // a dark mode pref fall back to obsidian dark — mirrors the rule in
      // lib/theme.ts effectiveThemeId().
      (function () {
        try {
          var t = JSON.parse(localStorage.getItem('boocode.theme') || '{}');
          var id = t.id || 'obsidian';
          var mode = t.mode || 'dark';
          if (mode === 'system') {
            mode = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
          }
          if ((id === 'ivory' || id === 'chalk') && mode === 'dark') {
            id = 'obsidian';
          }
          document.documentElement.className = 'theme-' + id + (mode === 'dark' ? ' dark' : '');
        } catch (e) {
          document.documentElement.className = 'theme-obsidian dark';
        }
      })();
    </script>
  </head>
-  <body class="bg-neutral-950 text-neutral-100">
+  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -6,8 +6,13 @@ import { RightRail } from '@/components/RightRail';
 import { Home } from '@/pages/Home';
 import { Project } from '@/pages/Project';
 import { Session } from '@/pages/Session';
 import { Settings } from '@/pages/Settings';
 import { Toaster } from '@/components/ui/sonner';
 import { useUserEvents } from '@/hooks/useUserEvents';
 import { useTheme } from '@/lib/theme';
 import { SidebarDrawerProvider, useSidebarDrawer } from '@/hooks/useSidebarDrawer';
 import { RightRailDrawerProvider, useRightRailDrawer } from '@/hooks/useRightRailDrawer';
 import { useViewport } from '@/hooks/useViewport';
 function SessionRightRail() {
  const { id } = useParams<{ id: string }>();
@@ -18,24 +23,64 @@ function SessionRightRail() {
 function RightRailForSession({ sessionId }: { sessionId: string }) {
  const [projectId, setProjectId] = useState<string | null>(null);
  useEffect(() => {
-    api.sessions.get(sessionId).then((s) => setProjectId(s.project_id)).catch(() => {});
+    api.sessions
      .get(sessionId)
      .then((s) => setProjectId(s.project_id))
      .catch((err) => console.warn('RightRail: failed to fetch session', err));
  }, [sessionId]);
  if (!projectId) return null;
  // v1.6.2: rendered on all viewports. On mobile, RightRail itself renders as
  // a right-side drawer toggled by the header's FolderTree button (via
  // useRightRailDrawer). On desktop, it renders inline as before with its
  // own internal open/close state.
  return <RightRail projectId={projectId} />;
 }
 function MobileBackdrop() {
  const { open, setOpen } = useSidebarDrawer();
  const { isMobile } = useViewport();
  if (!isMobile || !open) return null;
  return (
    <div
      className="fixed inset-0 z-30 bg-black/40 md:hidden"
      onClick={() => setOpen(false)}
      aria-hidden="true"
    />
  );
 }
 function MobileRightRailBackdrop() {
  const { open, setOpen } = useRightRailDrawer();
  const { isMobile } = useViewport();
  if (!isMobile || !open) return null;
  return (
    <div
      className="fixed inset-0 z-30 bg-black/40 md:hidden"
      onClick={() => setOpen(false)}
      aria-hidden="true"
    />
  );
 }
 function AppShell() {
  // themes-v1: useTheme() owns the matchMedia subscription for system mode
  // and reconciles cache with /api/settings on mount. Mounted first so the
  // theme class on <html> is correct before any child renders.
  useTheme();
  useUserEvents();
  return (
-    <div className="dark h-screen flex bg-background text-foreground">
+    <div className="h-screen flex bg-background text-foreground">
      <ProjectSidebar />
      <MobileBackdrop />
      <main className="flex-1 flex flex-col min-w-0">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/project/:id" element={<Project />} />
          <Route path="/session/:id" element={<Session />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </main>
      <MobileRightRailBackdrop />
      <Routes>
        <Route path="/session/:id" element={<SessionRightRail />} />
      </Routes>
@@ -47,7 +92,11 @@ function AppShell() {
 export default function App() {
  return (
    <BrowserRouter>
-      <AppShell />
+      <SidebarDrawerProvider>
        <RightRailDrawerProvider>
          <AppShell />
        </RightRailDrawerProvider>
      </SidebarDrawerProvider>
    </BrowserRouter>
  );
 }
--- a/apps/web/src/api/client.ts
+++ b/apps/web/src/api/client.ts
@@ -8,6 +8,8 @@ import type {
  SidebarResponse,
  ListDirResult,
  ViewFileResult,
  AgentsResponse,
  GitMeta,
 } from './types';
 export class ApiError extends Error {
@@ -86,6 +88,8 @@ export const api = {
      request<ViewFileResult>(`/api/projects/${id}/view_file?path=${encodeURIComponent(path)}`),
    files: (id: string) =>
      request<{ files: string[] }>(`/api/projects/${id}/files`),
    git: (id: string) =>
      request<GitMeta>(`/api/projects/${id}/git`),
  },
  sessions: {
@@ -93,7 +97,7 @@ export const api = {
      request<Session[]>(`/api/projects/${projectId}/sessions${status ? `?status=${status}` : ''}`),
    create: (
      projectId: string,
-      body: { name?: string; model?: string; system_prompt?: string }
+      body: { name?: string; model?: string; system_prompt?: string; agent_id?: string | null }
    ) =>
      request<Session>(`/api/projects/${projectId}/sessions`, {
        method: 'POST',
@@ -102,7 +106,7 @@ export const api = {
    get: (id: string) => request<Session>(`/api/sessions/${id}`),
    update: (
      id: string,
-      body: Partial<Pick<Session, 'name' | 'model' | 'system_prompt'>>
+      body: Partial<Pick<Session, 'name' | 'model' | 'system_prompt' | 'agent_id'>>
    ) =>
      request<Session>(`/api/sessions/${id}`, {
        method: 'PATCH',
@@ -148,6 +152,13 @@ export const api = {
        `/api/chats/${chatId}/force_send`,
        { method: 'POST', body: JSON.stringify({ content }) }
      ),
    // v1.8.2: extend an inference that hit the tool budget. `sentinelMessageId`
    // is the cap-hit sentinel message the user clicked Continue on.
    continue: (chatId: string, sentinelMessageId: string) =>
      request<{ assistant_message_id: string }>(
        `/api/chats/${chatId}/continue`,
        { method: 'POST', body: JSON.stringify({ sentinel_message_id: sentinelMessageId }) }
      ),
    fork: (chatId: string, body: { messageId: string; name?: string }) =>
      request<Chat>(`/api/chats/${chatId}/fork`, {
        method: 'POST',
@@ -179,6 +190,11 @@ export const api = {
  models: () => request<ModelInfo[]>('/api/models'),
  agents: {
    list: (projectId: string) =>
      request<AgentsResponse>(`/api/projects/${projectId}/agents`),
  },
  settings: {
    get: () => request<Record<string, unknown>>('/api/settings'),
    patch: (body: Record<string, unknown>) =>
--- a/apps/web/src/api/types.ts
+++ b/apps/web/src/api/types.ts
@@ -27,6 +27,37 @@ export interface Session {
  status: SessionStatus;
  created_at: string;
  updated_at: string;
  agent_id: string | null;
 }
 // v1.8.1: 'global' = /data/AGENTS.md (always-on), 'project' = per-project
 // override at <root>/AGENTS.md. In-code builtins were retired; the seed file
 // lives at /data/AGENTS.md.
 export type AgentSource = 'global' | 'project';
 export interface Agent {
  id: string;
  name: string;
  description: string;
  system_prompt: string;
  temperature: number;
  tools: string[];
  model: string | null;
  source: AgentSource;
  // v1.8.2: per-agent tool-loop budget. null means resolve at runtime from
  // the agent's toolset (30 for all read-only, 10 otherwise) or 15 for raw
  // chat with no agent.
  max_tool_calls: number | null;
 }
 export interface AgentParseError {
  agent_name: string;
  reason: string;
 }
 export interface AgentsResponse {
  agents: Agent[];
  errors: AgentParseError[];
 }
 export const CHAT_STATUSES = ['open', 'archived'] as const;
@@ -62,6 +93,32 @@ export interface ToolResult {
  error?: string;
 }
 // v1.8.2: structured reason codes that flow through error frames / metadata.
 // `error` text stays human; `reason` is the discriminator the UI matches on.
 export type ErrorReason =
  | 'llm_provider_error'
  | 'tool_execution_failed'
  | 'summary_after_cap_failed';
 // v1.8.2: shapes stored in Message.metadata. Discriminated on `kind`.
 //   cap_hit — sentinel emitted when the tool budget is hit; carries the
 //             budget + agent name + whether Continue is still allowed.
 //   error   — attached to a failed assistant message so the bubble can show
 //             a specific reason on reload (WS error frame is one-shot).
 export type MessageMetadata =
  | {
      kind: 'cap_hit';
      used: number;
      limit: number;
      agent_name: string | null;
      can_continue: boolean;
    }
  | {
      kind: 'error';
      error_reason: ErrorReason;
      error_text: string;
    };
 export interface Message {
  id: string;
  session_id: string;
@@ -79,6 +136,9 @@ export interface Message {
  started_at: string | null;
  finished_at: string | null;
  created_at: string;
  // v1.8.2: per-message metadata; see MessageMetadata. null for the vast
  // majority of messages.
  metadata: MessageMetadata | null;
 }
 export interface ModelInfo {
@@ -156,6 +216,15 @@ export interface PaneUpdateRequest {
  position?: number;
 }
 // v1.8 mobile-tabs: shape returned by GET /api/projects/:id/git. Mirrors
 // services/git_meta.ts on the server. branch=null means "not a git repo".
 export interface GitMeta {
  branch: string | null;
  is_dirty: boolean;
  ahead: number;
  behind: number;
 }
 export type WorkspacePaneKind = 'chat' | 'terminal' | 'agent' | 'empty';
 export interface WorkspacePane {
@@ -189,8 +258,13 @@ export type WsFrame =
      ctx_max?: number | null;
      started_at?: string | null;
      finished_at?: string | null;
      // v1.8.2: piggybacks the persisted metadata onto the terminal frame so
      // cap-hit sentinels (and any future stamped-on-complete metadata) flow
      // to the client without a refetch.
      metadata?: MessageMetadata | null;
    }
  | { type: 'messages_deleted'; message_ids: string[]; chat_id?: string }
  | { type: 'session_renamed'; session_id: string; name: string; chat_id?: string }
  | { type: 'chat_renamed'; chat_id: string; name: string }
-  | { type: 'error'; message_id?: string; chat_id?: string; error: string };
+  // v1.8.2: `reason` discriminates structured failures (the UI prefers it
  // over `error` text when present).
  | { type: 'error'; message_id?: string; chat_id?: string; error: string; reason?: ErrorReason };
--- a/apps/web/src/components/AgentPicker.tsx
+++ b/apps/web/src/components/AgentPicker.tsx
@@ -0,0 +1,121 @@
 import { useEffect, useState } from 'react';
 import { Check, ChevronDown } from 'lucide-react';
 import { toast } from 'sonner';
 import { api } from '@/api/client';
 import type { Agent, AgentParseError } from '@/api/types';
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 interface Props {
  projectId: string;
  value: string | null;
  onChange: (agentId: string | null) => void | Promise<void>;
 }
 export function AgentPicker({ projectId, value, onChange }: Props) {
  const [agents, setAgents] = useState<Agent[] | null>(null);
  const [parseErrors, setParseErrors] = useState<AgentParseError[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [open, setOpen] = useState(false);
  // v1.8.1: per-agent parse errors are non-blocking. Silent if any agents
  // loaded successfully; a gray warning toast fires only when EVERY agent
  // in AGENTS.md failed to parse. Server logs a console.warn either way.
  useEffect(() => {
    let cancelled = false;
    setAgents(null);
    setParseErrors([]);
    setError(null);
    api.agents
      .list(projectId)
      .then((res) => {
        if (cancelled) return;
        setAgents(res.agents);
        setParseErrors(res.errors);
        if (res.errors.length > 0 && res.agents.length === 0) {
          toast.warning(
            `AGENTS.md: ${res.errors.length} agent${res.errors.length === 1 ? '' : 's'} failed to parse, none loaded`,
          );
        }
      })
      .catch((err) => {
        if (cancelled) return;
        setError(err instanceof Error ? err.message : 'failed to load agents');
      });
    return () => {
      cancelled = true;
    };
  }, [projectId]);
  const selectedAgent = agents?.find((a) => a.id === value) ?? null;
  const triggerLabel = value === null
    ? 'No agent'
    : selectedAgent?.name ?? value;
  return (
    <DropdownMenu open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-muted/60"
          title={selectedAgent?.description ?? undefined}
        >
          <span className="truncate max-w-[160px]">{triggerLabel}</span>
          <ChevronDown className="size-3 opacity-70" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="max-h-80 overflow-y-auto w-72">
        {error && (
          <div className="px-2 py-1.5 text-xs text-destructive">{error}</div>
        )}
        {agents === null && !error && (
          <div className="px-2 py-1.5 text-xs text-muted-foreground">Loading…</div>
        )}
        {agents !== null && (
          <>
            <DropdownMenuItem
              onSelect={() => void onChange(null)}
              className="text-xs"
            >
              <Check className={`size-3 ${value === null ? 'opacity-100' : 'opacity-0'}`} />
              <span className="font-medium">No agent</span>
            </DropdownMenuItem>
            {agents.length > 0 && <DropdownMenuSeparator />}
            {agents.map((a) => (
              <DropdownMenuItem
                key={a.id}
                onSelect={() => void onChange(a.id)}
                className="text-xs flex-col items-start gap-0.5"
              >
                <div className="flex items-center gap-1.5">
                  <Check
                    className={`size-3 ${a.id === value ? 'opacity-100' : 'opacity-0'}`}
                  />
                  <span className="font-medium">{a.name}</span>
                </div>
                {a.description && (
                  <span className="text-muted-foreground pl-[18px] truncate w-full">
                    {a.description}
                  </span>
                )}
              </DropdownMenuItem>
            ))}
            {parseErrors.length > 0 && (
              <div
                className="px-2 py-1.5 mt-1 text-xs text-amber-500 border-t border-border"
                title={parseErrors.map((e) => `${e.agent_name}: ${e.reason}`).join('\n')}
              >
                {parseErrors.length} agent{parseErrors.length === 1 ? '' : 's'} skipped
              </div>
            )}
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
 }
--- a/apps/web/src/components/BottomSheet.tsx
+++ b/apps/web/src/components/BottomSheet.tsx
@@ -0,0 +1,92 @@
 import { useEffect, useRef, useState, type ReactNode, type TouchEvent } from 'react';
 import { cn } from '@/lib/utils';
 interface Props {
  open: boolean;
  onClose: () => void;
  children: ReactNode;
  title?: string;
 }
 // Past this drag distance, release dismisses the sheet.
 const SWIPE_DISMISS_THRESHOLD_PX = 80;
 export function BottomSheet({ open, onClose, children, title }: Props) {
  const [dragY, setDragY] = useState(0);
  const startYRef = useRef<number | null>(null);
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  useEffect(() => {
    if (!open) {
      setDragY(0);
      startYRef.current = null;
    }
  }, [open]);
  function onTouchStart(e: TouchEvent<HTMLDivElement>) {
    const t = e.touches[0];
    if (!t) return;
    startYRef.current = t.clientY;
  }
  function onTouchMove(e: TouchEvent<HTMLDivElement>) {
    const t = e.touches[0];
    if (!t || startYRef.current === null) return;
    const dy = t.clientY - startYRef.current;
    // Clamp to downward drags so the sheet doesn't "rubber-band" up.
    if (dy > 0) setDragY(dy);
  }
  function onTouchEnd() {
    if (dragY > SWIPE_DISMISS_THRESHOLD_PX) {
      onClose();
    } else {
      setDragY(0);
    }
    startYRef.current = null;
  }
  if (!open) return null;
  return (
    <>
      <div
        className="fixed inset-0 z-40 bg-black/40"
        onClick={onClose}
        aria-hidden="true"
      />
      <div
        role="dialog"
        aria-modal="true"
        className={cn(
          'fixed inset-x-0 bottom-0 z-50 rounded-t-2xl border-t border-border bg-popover text-popover-foreground shadow-2xl',
          'transition-transform duration-150 will-change-transform',
          'max-h-[70vh] flex flex-col',
        )}
        style={{
          transform: `translateY(${dragY}px)`,
          paddingBottom: 'env(safe-area-inset-bottom)',
        }}
      >
        <div
          onTouchStart={onTouchStart}
          onTouchMove={onTouchMove}
          onTouchEnd={onTouchEnd}
          className="flex flex-col items-center pt-2 pb-1 select-none touch-none"
        >
          <div className="w-10 h-1 bg-muted-foreground/40 rounded-full" />
          {title && (
            <div className="mt-1 text-sm font-medium text-muted-foreground">{title}</div>
          )}
        </div>
        <div className="flex-1 overflow-y-auto">{children}</div>
      </div>
    </>
  );
 }
--- a/apps/web/src/components/CapHitSentinel.tsx
+++ b/apps/web/src/components/CapHitSentinel.tsx
@@ -0,0 +1,90 @@
 import { useState } from 'react';
 import { AlertCircle } from 'lucide-react';
 import { toast } from 'sonner';
 import { api } from '@/api/client';
 import type { Message } from '@/api/types';
 import { Button } from '@/components/ui/button';
 interface Props {
  message: Message;
  // 1-indexed position among cap-hit sentinels in this chat. The first
  // cap-hit is 1, second is 2, third is 3 (hard ceiling).
  capHitPosition: number;
  // Only the most recent sentinel shows the Continue button. Older ones
  // render text-only — they've already been continued past.
  isLatest: boolean;
 }
 // Hard ceiling = 3 cap-hits per chat ⇒ 2 continues max. Lives here in sync
 // with insertCapHitSentinel's `canContinue = priorCount < 2` rule in
 // services/inference.ts.
 const MAX_CONTINUES = 2;
 export function CapHitSentinel({ message, capHitPosition, isLatest }: Props) {
  const meta = message.metadata;
  // Defensive parse — if the row is somehow missing metadata we still render
  // the bare text rather than crashing the chat.
  const isCapHit =
    meta !== null && typeof meta === 'object' && meta.kind === 'cap_hit';
  const limit = isCapHit ? meta.limit : null;
  const canContinue = isCapHit ? meta.can_continue : false;
  const agentName = isCapHit ? meta.agent_name : null;
  // `capHitPosition` is 1-indexed; `MAX_CONTINUES - (position - 1)` is the
  // number of continues remaining including this one. Clamped to ≥0.
  const remaining = Math.max(0, MAX_CONTINUES - (capHitPosition - 1));
  const [continuing, setContinuing] = useState(false);
  async function handleContinue() {
    if (continuing || !canContinue || !isLatest) return;
    setContinuing(true);
    try {
      await api.chats.continue(message.chat_id, message.id);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'continue failed');
    } finally {
      setContinuing(false);
    }
  }
  // Tooltip wording from the v1.8.2 spec. Disabled state takes precedence —
  // the spec text "Hard limit reached — start a new chat" matches what the
  // server returns when canContinue is false.
  const enabledTooltip = limit
    ? `Resumes with a fresh budget of ${limit} tool calls. ${remaining} continue${remaining === 1 ? '' : 's'} remaining on this chat.`
    : undefined;
  const disabledTooltip = 'Hard limit reached — start a new chat';
  return (
    <div className="rounded-md border border-amber-500/40 bg-amber-500/10 text-sm">
      <div className="px-3 py-2 flex items-start gap-2">
        <AlertCircle className="size-4 text-amber-500 shrink-0 mt-0.5" />
        <div className="flex-1 min-w-0 space-y-1">
          <div className="text-xs font-medium text-amber-700 dark:text-amber-300">
            {isCapHit && limit !== null
              ? `Reached tool budget (${limit}/${limit})${agentName ? ` — ${agentName}` : ''}.`
              : 'Reached tool budget.'}
          </div>
          <div className="text-xs text-muted-foreground">
            {message.content}
          </div>
          {isLatest && (
            <div className="pt-1">
              <Button
                type="button"
                size="sm"
                variant="outline"
                onClick={() => void handleContinue()}
                disabled={!canContinue || continuing}
                title={canContinue ? enabledTooltip : disabledTooltip}
              >
                {continuing ? 'Continuing…' : 'Continue'}
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
 }
--- a/apps/web/src/components/ChatContextPopover.tsx
+++ b/apps/web/src/components/ChatContextPopover.tsx
@@ -0,0 +1,55 @@
 import type { ChatContextStats } from '@/hooks/useChatContextStats';
 interface Props {
  stats: ChatContextStats | null;
 }
 /**
 * Formats a token count into a compact k/m-suffix string.
 *  - < 1_000          → raw integer (e.g. "42")
 *  - 1_000–999_999    → "Nk" or "N.Nk" (e.g. "30k", "12.5k", "100k")
 *  - >= 1_000_000     → "Nm" or "N.Nm" (e.g. "1m", "1.5m", "100m")
 *
 * Drops a trailing ".0" so we get "30k" instead of "30.0k".
 */
 function formatTokens(n: number): string {
  if (n < 1000) return String(n);
  if (n < 1_000_000) {
    const k = n / 1000;
    return k >= 100 ? `${Math.round(k)}k` : `${k.toFixed(1).replace(/\.0$/, '')}k`;
  }
  const m = n / 1_000_000;
  return m >= 100 ? `${Math.round(m)}m` : `${m.toFixed(1).replace(/\.0$/, '')}m`;
 }
 /**
 * Color thresholds:
 *  - >  85%  → text-destructive
 *  - >= 60%  → text-amber-500
 *  - else    → text-muted-foreground
 * (85% itself falls into the amber band.)
 */
 function percentColorClass(percent: number): string {
  if (percent > 85) return 'text-destructive';
  if (percent >= 60) return 'text-amber-500';
  return 'text-muted-foreground';
 }
 export function ChatContextPopover({ stats }: Props) {
  if (!stats) return null;
  return (
    <div className="absolute bottom-full right-4 mb-4 z-20 pointer-events-none">
      <div className="rounded-md border border-border bg-card text-card-foreground shadow-sm px-3 py-2 text-xs min-w-[140px]">
        <div className="text-muted-foreground/80 text-[10px] uppercase tracking-wide mb-0.5">
          Context window
        </div>
        <div className={`text-base font-medium ${percentColorClass(stats.percent)}`}>
          {stats.percent}% used
        </div>
        <div className="text-muted-foreground text-[10px] font-mono">
          {formatTokens(stats.used)} / {formatTokens(stats.max)} tokens
        </div>
      </div>
    </div>
  );
 }
--- a/apps/web/src/components/ChatInput.tsx
+++ b/apps/web/src/components/ChatInput.tsx
@@ -1,27 +1,47 @@
-import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from 'react';
+import { useCallback, useEffect, useRef, useState, type DragEvent, type KeyboardEvent } from 'react';
 import { Send } from 'lucide-react';
 import { toast } from 'sonner';
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
-import { flattenToMessage, inferLanguage, type Attachment } from '@/lib/attachments';
+import {
  flattenToMessage,
  inferLanguage,
  looksBinary,
  MAX_FILE_SIZE_BYTES,
  PASTE_INLINE_MAX_LINES,
  type Attachment,
 } from '@/lib/attachments';
 import { AttachmentChip } from '@/components/AttachmentChip';
 import { AttachmentPreviewModal } from '@/components/AttachmentPreviewModal';
 import { FileMentionPopover } from '@/components/FileMentionPopover';
 import { DropOverlay } from '@/components/DropOverlay';
 import { AgentPicker } from '@/components/AgentPicker';
 import { api } from '@/api/client';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { useViewport } from '@/hooks/useViewport';
 const MAX_ATTACHMENTS = 10;
 interface Props {
  disabled?: boolean;
  projectId: string;
  // Batch 9: optional so callers that pre-date the agent picker still compile.
  // When omitted, the toolbar row is hidden entirely.
  agentId?: string | null;
  onAgentChange?: (agentId: string | null) => void | Promise<void>;
  onSend: (content: string) => void | Promise<void>;
  onForceSend?: (content: string) => void | Promise<void>;
 }
-export function ChatInput({ disabled, projectId, onSend, onForceSend }: Props) {
+export function ChatInput({ disabled, projectId, agentId, onAgentChange, onSend, onForceSend }: Props) {
  const { isMobile } = useViewport();
  const [value, setValue] = useState('');
  const [busy, setBusy] = useState(false);
  const [attachments, setAttachments] = useState<Attachment[]>([]);
  const [previewAttachment, setPreviewAttachment] = useState<Attachment | null>(null);
  const [isDraggingOver, setIsDraggingOver] = useState(false);
  const dropRootRef = useRef<HTMLDivElement | null>(null);
  const pasteCounterRef = useRef(0);
  const [mentionState, setMentionState] = useState<{
    open: boolean;
    query: string;
@@ -33,8 +53,8 @@ export function ChatInput({ disabled, projectId, onSend, onForceSend }: Props) {
  function addAttachment(a: Attachment) {
    setAttachments(prev => {
-      if (prev.length >= 10) {
+      if (prev.length >= MAX_ATTACHMENTS) {
-        toast.error('Max 10 attachments per message');
+        toast.error(`Max ${MAX_ATTACHMENTS} attachments per message`);
        return prev;
      }
      return [...prev, a];
@@ -183,8 +203,169 @@ export function ChatInput({ disabled, projectId, onSend, onForceSend }: Props) {
  const closeMention = useCallback(() => setMentionState(null), []);
  // ---- Drag & drop (F1 + F3 + F4) ----------------------------------------
  // The drop zone is the outer ChatInput container (ref'd as dropRootRef).
  // onDragLeave only clears the highlight when the cursor leaves the
  // container, not when it crosses into a child element.
  async function processDroppedFile(file: File) {
    // Size gate
    if (file.size > MAX_FILE_SIZE_BYTES) {
      const mb = (file.size / (1024 * 1024)).toFixed(1);
      toast.error(`File ${file.name} is too large (${mb} MB). Limit is 5 MB.`);
      return;
    }
    // Read once as ArrayBuffer so we can do byte-level binary detection
    // before deciding whether to decode as text.
    let buf: ArrayBuffer;
    try {
      buf = await file.arrayBuffer();
    } catch (err) {
      toast.error(`Failed to read ${file.name}: ${err instanceof Error ? err.message : String(err)}`);
      return;
    }
    if (looksBinary(buf)) {
      toast.error(`${file.name} appears to be binary.`);
      return;
    }
    const text = new TextDecoder('utf-8', { fatal: false }).decode(buf);
    addAttachment({
      id: crypto.randomUUID(),
      kind: 'file',
      filename: file.name,
      language: inferLanguage(file.name),
      content: text,
      source: 'drop',
    });
  }
  function isFolderItem(item: DataTransferItem | undefined): boolean {
    if (!item) return false;
    // webkitGetAsEntry is non-standard but supported in Chromium + Safari.
    // If unavailable, we conservatively treat the entry as a file.
    const entry =
      typeof item.webkitGetAsEntry === 'function' ? item.webkitGetAsEntry() : null;
    if (entry && entry.isDirectory) return true;
    // Heuristic fallback: folders dragged from Finder have type === '' and
    // a 0-byte File. The empty-type alone isn't reliable for files (some
    // plaintext drops also lack a type), so we only flag when the entry
    // explicitly says directory.
    return false;
  }
  async function handleDroppedItems(dt: DataTransfer) {
    // Snapshot items first because reading files inside the loop can
    // detach the DataTransfer between awaits.
    const itemsArray: { file: File | null; isFolder: boolean }[] = [];
    if (dt.items && dt.items.length > 0) {
      for (let i = 0; i < dt.items.length; i++) {
        const it = dt.items[i];
        if (!it || it.kind !== 'file') continue;
        const folder = isFolderItem(it);
        const file = folder ? null : it.getAsFile();
        itemsArray.push({ file, isFolder: folder });
      }
    } else {
      for (let i = 0; i < dt.files.length; i++) {
        const f = dt.files[i];
        if (f) itemsArray.push({ file: f, isFolder: false });
      }
    }
    let remainingSlots = MAX_ATTACHMENTS - attachments.length;
    let folderRejected = false;
    for (const { file, isFolder } of itemsArray) {
      if (isFolder) {
        if (!folderRejected) {
          toast.error('Folders are not supported');
          folderRejected = true;
        }
        continue;
      }
      if (!file) continue;
      if (remainingSlots <= 0) {
        toast.error(`Attachment limit reached (${MAX_ATTACHMENTS}).`);
        return;
      }
      await processDroppedFile(file);
      remainingSlots -= 1;
    }
  }
  function onDragEnter(e: DragEvent<HTMLDivElement>) {
    if (disabled || busy) return;
    e.preventDefault();
    setIsDraggingOver(true);
  }
  function onDragOver(e: DragEvent<HTMLDivElement>) {
    if (disabled || busy) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
  }
  function onDragLeave(e: DragEvent<HTMLDivElement>) {
    // Only clear when the cursor actually leaves the root container.
    // relatedTarget is the element being entered; if it's inside the root,
    // ignore — we're just crossing into a child.
    const root = dropRootRef.current;
    if (!root) return;
    const related = e.relatedTarget as Node | null;
    if (related && root.contains(related)) return;
    setIsDraggingOver(false);
  }
  function onDrop(e: DragEvent<HTMLDivElement>) {
    e.preventDefault();
    setIsDraggingOver(false);
    if (disabled || busy) return;
    void handleDroppedItems(e.dataTransfer);
  }
  // ---- end Drag & drop -----------------------------------------------------
  // ---- Paste-as-attachment (F2) -------------------------------------------
  // Pasting >PASTE_INLINE_MAX_LINES lines of text becomes a chip rather than
  // inline content. Image pastes are rejected with a toast. If both text and
  // image are present (e.g. screenshot tool that sets both), prefer text.
  function onPaste(e: React.ClipboardEvent<HTMLTextAreaElement>) {
    const cd = e.clipboardData;
    if (!cd) return;
    const text = cd.getData('text/plain');
    const hasImage = Array.from(cd.items ?? []).some((it) =>
      it.type.startsWith('image/'),
    );
    if (text) {
      const lineCount = text.split('\n').length;
      if (lineCount > PASTE_INLINE_MAX_LINES) {
        e.preventDefault();
        pasteCounterRef.current += 1;
        addAttachment({
          id: crypto.randomUUID(),
          kind: 'paste',
          filename: `pasted-${pasteCounterRef.current}.txt`,
          language: 'plaintext',
          content: text,
          source: 'paste',
        });
      }
      // <= threshold: let default paste insert inline.
      return;
    }
    if (hasImage) {
      e.preventDefault();
      toast.error('Image paste is not supported. Drop a file or paste text.');
    }
  }
  // ---- end Paste-as-attachment --------------------------------------------
  function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
    if (mentionState?.open) return;
    // IME safety: never act on Enter while an IME composition is in flight
    // (CJK input methods commit composition via Enter). Without this, the
    // first Enter of a Japanese/Chinese/Korean composition would submit
    // instead of finalizing the candidate.
    if (e.nativeEvent.isComposing) return;
    if (e.key === 'Enter' && e.shiftKey && (e.metaKey || e.ctrlKey) && onForceSend) {
      e.preventDefault();
      void forceSubmit();
@@ -195,7 +376,9 @@ export function ChatInput({ disabled, projectId, onSend, onForceSend }: Props) {
      void submit();
      return;
    }
-    if (e.key === 'Enter' && !e.shiftKey) {
+    // Bare Enter: sends on desktop, inserts a newline on mobile (per spec —
    // send is via the dedicated button on touch devices).
    if (e.key === 'Enter' && !e.shiftKey && !isMobile) {
      e.preventDefault();
      void submit();
    }
@@ -219,7 +402,16 @@ export function ChatInput({ disabled, projectId, onSend, onForceSend }: Props) {
  }
  return (
-    <div className="border-t">
+    <div
      ref={dropRootRef}
      className="border-t relative"
      style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
      onDragEnter={onDragEnter}
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
      onDrop={onDrop}
    >
      <DropOverlay visible={isDraggingOver} />
      <div className="max-w-[1000px] mx-auto w-full">
      {attachments.length > 0 && (
        <div className="flex flex-wrap gap-1.5 px-4 pt-3">
@@ -233,13 +425,30 @@ export function ChatInput({ disabled, projectId, onSend, onForceSend }: Props) {
          ))}
        </div>
      )}
      {/* Batch 9 toolbar — agent picker. Sits above the input row so it
          doesn't compete with the send button for vertical alignment.
          When Batch 7 lands, ModelPicker and the + button join this row. */}
      {onAgentChange && (
        <div className="px-4 pt-2 flex items-center gap-1.5">
          <AgentPicker
            projectId={projectId}
            value={agentId ?? null}
            onChange={onAgentChange}
          />
        </div>
      )}
      <div className="px-4 py-3 flex items-end gap-2">
        <Textarea
          ref={textareaRef}
          value={value}
          onChange={handleChange}
          onKeyDown={onKeyDown}
-          placeholder="Ask about this project. Enter to send, Shift+Enter for newline."
+          onPaste={onPaste}
          placeholder={
            isMobile
              ? 'Ask about this project. Tap send to submit.'
              : 'Ask about this project. Enter to send · Shift+Enter for newline.'
          }
          disabled={disabled || busy}
          rows={3}
          className="resize-none min-h-[68px] max-h-[240px]"
--- a/apps/web/src/components/ChatTabBar.tsx
+++ b/apps/web/src/components/ChatTabBar.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { History, MessageSquare, Plus, X } from 'lucide-react';
 import type { Chat, WorkspacePane } from '@/api/types';
 import { StatusDot } from '@/components/StatusDot';
 import {
  ContextMenu,
  ContextMenuContent,
@@ -8,6 +9,7 @@ import {
  ContextMenuSeparator,
  ContextMenuTrigger,
 } from '@/components/ui/context-menu';
 import { useLongPress } from '@/hooks/useLongPress';
 import { cn } from '@/lib/utils';
 interface Props {
@@ -40,6 +42,18 @@ export function ChatTabBar({
  const [renamingId, setRenamingId] = useState<string | null>(null);
  const [renameValue, setRenameValue] = useState('');
  // Long-press: dispatch a synthetic contextmenu event on the tab so the
  // existing Radix ContextMenuTrigger opens at the touch coordinates. Works
  // because asChild composition makes the tab div the trigger element.
  const longPress = useLongPress(({ clientX, clientY, target }) => {
    if (!target || !(target instanceof Element)) return;
    const tab = target.closest('[data-tab-id]') as HTMLElement | null;
    if (!tab) return;
    tab.dispatchEvent(
      new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX, clientY }),
    );
  });
  function startRename(chatId: string, currentName: string | null) {
    setRenamingId(chatId);
    setRenameValue(currentName ?? '');
@@ -53,7 +67,7 @@ export function ChatTabBar({
  }
  return (
-    <div className="flex items-center border-b border-border bg-muted/20 h-8 shrink-0 overflow-x-auto">
+    <div className="flex items-center border-b border-border bg-muted/20 h-8 shrink-0 overflow-x-auto max-md:hidden">
      {tabs.map((chat, tabIdx) => {
        const isActive = tabIdx === pane.activeChatIdx;
        const isLast = tabIdx === tabs.length - 1;
@@ -63,7 +77,13 @@ export function ChatTabBar({
          <ContextMenu key={chat.id}>
            <ContextMenuTrigger asChild>
              <div
                data-tab-id={chat.id}
                onClick={() => onSwitchTab(tabIdx)}
                onTouchStart={longPress.onTouchStart}
                onTouchMove={longPress.onTouchMove}
                onTouchEnd={longPress.onTouchEnd}
                onTouchCancel={longPress.onTouchCancel}
                style={{ WebkitTouchCallout: 'none' }}
                className={cn(
                  'group flex items-center gap-1.5 px-3 py-1.5 text-xs border-r border-border cursor-default select-none shrink-0',
                  isActive
@@ -72,6 +92,7 @@ export function ChatTabBar({
                )}
              >
                <MessageSquare size={12} className="shrink-0" />
                <StatusDot chatId={chat.id} />
                {renamingId === chat.id ? (
                  <input
                    autoFocus
@@ -96,7 +117,7 @@ export function ChatTabBar({
                    e.stopPropagation();
                    onRemoveTab(chat.id);
                  }}
-                  className="p-0.5 hover:bg-muted rounded opacity-0 group-hover:opacity-60 hover:!opacity-100 shrink-0"
+                  className="inline-flex items-center justify-center p-0.5 hover:bg-muted rounded opacity-0 group-hover:opacity-60 hover:!opacity-100 shrink-0 max-md:min-h-[44px] max-md:min-w-[44px] max-md:opacity-100"
                  aria-label="Close tab"
                >
                  <X size={10} />
@@ -104,6 +125,10 @@ export function ChatTabBar({
              </div>
            </ContextMenuTrigger>
            <ContextMenuContent>
              <ContextMenuItem onSelect={() => onNewChat()}>
                New chat
              </ContextMenuItem>
              <ContextMenuSeparator />
              <ContextMenuItem onSelect={() => startRename(chat.id, chat.name)}>
                Rename
              </ContextMenuItem>
@@ -142,7 +167,7 @@ export function ChatTabBar({
        <button
          type="button"
          onClick={onNewChat}
-          className="p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
+          className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
          aria-label="New chat"
          title="New chat"
        >
@@ -152,7 +177,7 @@ export function ChatTabBar({
          type="button"
          onClick={onShowHistory}
          className={cn(
-            'p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground',
+            'inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]',
            pane.kind === 'empty' && 'text-foreground bg-muted/50'
          )}
          aria-label="Session history"
@@ -164,7 +189,7 @@ export function ChatTabBar({
          <button
            type="button"
            onClick={onRemovePane}
-            className="p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
+            className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
            aria-label="Close pane"
            title="Close pane"
          >
--- a/apps/web/src/components/CreateProjectModal.tsx
+++ b/apps/web/src/components/CreateProjectModal.tsx
@@ -103,7 +103,7 @@ export function CreateProjectModal({ open, onOpenChange }: Props) {
            />
            {name && (
              <div className="text-xs text-muted-foreground font-mono">
-                Folder: /opt/{folderPreview || <span className="text-destructive">(empty after sanitization)</span>}
+                Folder: /opt/projects/{folderPreview || <span className="text-destructive">(empty after sanitization)</span>}
              </div>
            )}
          </div>
--- a/apps/web/src/components/DropOverlay.tsx
+++ b/apps/web/src/components/DropOverlay.tsx
@@ -0,0 +1,18 @@
 interface Props {
  visible: boolean;
 }
 // Visual cue layered over the ChatInput while a drag is in progress.
 // Pointer-events: none so the underlying drop handler still receives the
 // drop event. Renders nothing when not visible (cheap and out of layout).
 export function DropOverlay({ visible }: Props) {
  if (!visible) return null;
  return (
    <div
      className="absolute inset-0 z-10 pointer-events-none flex items-center justify-center rounded border-2 border-dashed border-primary bg-background/85"
      aria-hidden="true"
    >
      <div className="text-sm font-medium text-primary">Drop to attach</div>
    </div>
  );
 }
--- a/apps/web/src/components/MessageBubble.tsx
+++ b/apps/web/src/components/MessageBubble.tsx
@@ -4,10 +4,10 @@ import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { ChevronDown, ChevronRight, Copy, RefreshCw, Check, Share2, RotateCw, GitFork, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
-import type { Chat, Message } from '@/api/types';
+import type { Chat, ErrorReason, Message } from '@/api/types';
 import { api } from '@/api/client';
 import { sessionEvents } from '@/hooks/sessionEvents';
-import { ToolCallCard } from './ToolCallCard';
+import { CapHitSentinel } from './CapHitSentinel';
 import { CodeBlock } from './CodeBlock';
 import { Button } from '@/components/ui/button';
 import {
@@ -19,6 +19,15 @@ import {
  DialogTitle,
 } from '@/components/ui/dialog';
 // v1.8.2: human labels for the machine-readable error reasons that ride on
 // failed assistant messages via metadata.kind === 'error'. Kept short so the
 // inline render under "message failed" stays a single muted line.
 const ERROR_REASON_LABELS: Record<ErrorReason, string> = {
  llm_provider_error: 'LLM provider error',
  tool_execution_failed: 'Tool execution failed',
  summary_after_cap_failed: 'Summary after tool budget hit failed',
 };
 // Match path-shaped substrings ending in `.ext`. Additionally require a `/`
 // in the match to reduce false positives in prose (e.g. plain `foo.ts` won't
 // match, but `src/foo.ts` will). False positives at the edges are accepted
@@ -94,6 +103,9 @@ function linkifyChildren(children: ReactNode, keyPrefix = 'l'): ReactNode {
 interface Props {
  message: Message;
  sessionChats?: Chat[];
  // v1.8.2: passed by MessageList's render-item pass for cap-hit sentinels.
  // Only the most recent sentinel shows the Continue button.
  capHitInfo?: { position: number; isLatest: boolean };
 }
 function MarkdownBody({ content }: { content: string }) {
@@ -266,11 +278,11 @@ function ActionRow({
  return (
    <>
-      <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+      <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity max-md:opacity-100">
        <button
          type="button"
          onClick={() => void copy()}
-          className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
+          className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
          aria-label="Copy message"
          title="Copy"
        >
@@ -281,7 +293,7 @@ function ActionRow({
            type="button"
            onClick={() => void regenerate()}
            disabled={!canRegen || regenerating}
-            className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
+            className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed max-md:min-h-[44px] max-md:min-w-[44px]"
            aria-label="Regenerate message"
            title="Regenerate"
          >
@@ -292,7 +304,7 @@ function ActionRow({
          type="button"
          onClick={() => void fork()}
          disabled={!canFork || forking}
-          className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
+          className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed max-md:min-h-[44px] max-md:min-w-[44px]"
          aria-label="Fork from here"
          title="Fork from here"
        >
@@ -302,7 +314,7 @@ function ActionRow({
          type="button"
          onClick={() => setDeleteOpen(true)}
          disabled={!canDelete}
-          className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-destructive disabled:opacity-40 disabled:cursor-not-allowed"
+          className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-destructive disabled:opacity-40 disabled:cursor-not-allowed max-md:min-h-[44px] max-md:min-w-[44px]"
          aria-label="Delete message"
          title="Delete message"
        >
@@ -464,19 +476,38 @@ function CompactCard({ message, sessionChats }: { message: Message; sessionChats
  );
 }
-export function MessageBubble({ message, sessionChats }: Props) {
+export function MessageBubble({ message, sessionChats, capHitInfo }: Props) {
  if (message.kind === 'compact') {
    return <CompactCard message={message} sessionChats={sessionChats} />;
  }
-  if (message.role === 'tool') {
+  // v1.8.2: cap-hit sentinels render as a distinct system bubble with a
-    return <ToolCallCard message={message} />;
+  // Continue button. MessageList's pre-render pass tags each sentinel with
  // its position; only the latest gets the actionable button.
  if (
    message.role === 'system' &&
    message.metadata?.kind === 'cap_hit' &&
    capHitInfo
  ) {
    return (
      <CapHitSentinel
        message={message}
        capHitPosition={capHitInfo.position}
        isLatest={capHitInfo.isLatest}
      />
    );
  }
  // v1.8.2: tool messages and assistant tool_calls are now rendered by
  // MessageList via ToolCallLine / ToolCallGroup. Tool-role messages reach
  // this point only if MessageList didn't consume them (shouldn't happen,
  // but guard against it by rendering nothing rather than a stale card).
  if (message.role === 'tool') return null;
  if (message.role === 'user') {
    return (
      <div className="group flex flex-col items-end gap-1">
-        <div className="max-w-[80%] rounded-lg bg-primary text-primary-foreground px-3 py-2 text-sm whitespace-pre-wrap">
+        <div className="max-w-[80%] rounded-lg bg-primary text-primary-foreground px-3 py-2 text-sm whitespace-pre-wrap break-words min-w-0">
          {message.content}
        </div>
        <ActionRow message={message} />
@@ -487,15 +518,18 @@ export function MessageBubble({ message, sessionChats }: Props) {
  const isStreaming = message.status === 'streaming';
  const failed = message.status === 'failed';
  const hasContent = message.content.length > 0;
-  const hasToolCalls = (message.tool_calls?.length ?? 0) > 0;
+  // v1.8.2: if metadata stamps an error reason, surface it inline under the
  // generic "message failed" line. Keeps the user's eye where it already is
  // rather than introducing a separate banner.
  const errorMeta =
    message.metadata !== null && message.metadata.kind === 'error'
      ? message.metadata
      : null;
  return (
    <div className="group flex flex-col gap-2">
-      {message.tool_calls?.map((tc) => (
+      {(hasContent || isStreaming) && (
-        <ToolCallCard key={tc.id} toolCall={tc} />
+        <div className="max-w-[90%] text-sm leading-relaxed space-y-2 break-words min-w-0">
      ))}
      {(hasContent || (!hasToolCalls && isStreaming)) && (
        <div className="max-w-[90%] text-sm leading-relaxed space-y-2">
          {hasContent ? <MarkdownBody content={message.content} /> : null}
          {isStreaming && (
            <span className="inline-block w-1.5 h-3.5 align-baseline bg-muted-foreground/60 animate-pulse" />
@@ -503,12 +537,18 @@ export function MessageBubble({ message, sessionChats }: Props) {
        </div>
      )}
      {failed && (
-        <div className="text-xs text-destructive">message failed</div>
+        <div className="text-xs text-destructive">
          message failed
          {errorMeta && (
            <span className="block text-muted-foreground mt-0.5">
              {ERROR_REASON_LABELS[errorMeta.error_reason]}
              {errorMeta.error_text ? ` — ${errorMeta.error_text}` : ''}
            </span>
          )}
        </div>
      )}
      {!isStreaming && <StatsLine message={message} />}
-      {!isStreaming && (hasContent || hasToolCalls) && (
+      {!isStreaming && hasContent && <ActionRow message={message} />}
        <ActionRow message={message} />
      )}
    </div>
  );
 }
--- a/apps/web/src/components/MessageList.tsx
+++ b/apps/web/src/components/MessageList.tsx
@@ -1,15 +1,128 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import type { Chat, Message } from '@/api/types';
 import { MessageBubble } from './MessageBubble';
 import { ToolCallGroup } from './ToolCallGroup';
 import { ToolCallLine, type ToolRun } from './ToolCallLine';
 interface Props {
  messages: Message[];
  sessionChats?: Chat[];
 }
 // v1.8.2: pre-render units. The single linear `messages` array gets walked
 // into a render-time list where each tool_call is a first-class item and
 // tool_result messages are folded onto their matching tool_run by id.
 type RenderItem =
  | { kind: 'message'; message: Message; capHitInfo?: { position: number; isLatest: boolean } }
  | { kind: 'tool_run'; run: ToolRun; key: string }
  | { kind: 'tool_group'; runs: ToolRun[]; key: string };
 const GROUP_THRESHOLD = 3;
 function isCapHitSentinel(m: Message): boolean {
  return m.role === 'system' && m.metadata?.kind === 'cap_hit';
 }
 // First pass: walk messages chronologically, expanding assistant tool_calls
 // into per-call run items and folding tool_result messages onto their
 // matching runs. Tool messages themselves never produce a render item.
 // Assistant messages produce a text render item only when they have text;
 // pure tool-call messages are "transparent" so consecutive tool runs can
 // still group across them.
 function flatten(messages: Message[]): RenderItem[] {
  const items: RenderItem[] = [];
  const runsByCallId = new Map<string, ToolRun>();
  for (const m of messages) {
    if (m.role === 'tool') {
      if (m.tool_results) {
        const run = runsByCallId.get(m.tool_results.tool_call_id);
        if (run) run.result = m.tool_results;
      }
      continue;
    }
    const hasToolCalls = m.tool_calls != null && m.tool_calls.length > 0;
    const hasText = m.content.length > 0;
    if (m.role === 'assistant' && hasToolCalls) {
      if (hasText || m.status === 'streaming') {
        items.push({ kind: 'message', message: m });
      }
      for (const tc of m.tool_calls!) {
        const run: ToolRun = { call: tc, result: null };
        runsByCallId.set(tc.id, run);
        items.push({ kind: 'tool_run', run, key: tc.id });
      }
      continue;
    }
    items.push({ kind: 'message', message: m });
  }
  return items;
 }
 // Second pass: collapse runs of >=GROUP_THRESHOLD consecutive tool_run items
 // of the same tool name into a single tool_group. Any other render item
 // (text bubble, sentinel, user message) breaks the chain.
 function group(items: RenderItem[]): RenderItem[] {
  const out: RenderItem[] = [];
  let i = 0;
  while (i < items.length) {
    const item = items[i]!;
    if (item.kind !== 'tool_run') {
      out.push(item);
      i += 1;
      continue;
    }
    const name = item.run.call.name;
    let j = i + 1;
    while (
      j < items.length &&
      items[j]!.kind === 'tool_run' &&
      (items[j] as { kind: 'tool_run'; run: ToolRun }).run.call.name === name
    ) {
      j += 1;
    }
    const run = items.slice(i, j) as Array<{ kind: 'tool_run'; run: ToolRun; key: string }>;
    if (run.length >= GROUP_THRESHOLD) {
      out.push({
        kind: 'tool_group',
        runs: run.map((r) => r.run),
        key: `group-${run[0]!.key}`,
      });
    } else {
      for (const r of run) out.push(r);
    }
    i = j;
  }
  return out;
 }
 // Third pass: number cap-hit sentinels (1-indexed) and mark the latest.
 // CapHitSentinel uses position to compute the "N continues remaining"
 // tooltip, and isLatest to gate the Continue button (only the most recent
 // sentinel is actionable).
 function stampCapHits(items: RenderItem[]): RenderItem[] {
  const totalCapHits = items.reduce(
    (n, it) => n + (it.kind === 'message' && isCapHitSentinel(it.message) ? 1 : 0),
    0,
  );
  if (totalCapHits === 0) return items;
  let index = 0;
  return items.map((it) => {
    if (it.kind !== 'message' || !isCapHitSentinel(it.message)) return it;
    index += 1;
    return {
      ...it,
      capHitInfo: { position: index, isLatest: index === totalCapHits },
    };
  });
 }
 export function MessageList({ messages, sessionChats }: Props) {
  const endRef = useRef<HTMLDivElement>(null);
  const renderItems = useMemo(() => stampCapHits(group(flatten(messages))), [messages]);
  useEffect(() => {
    endRef.current?.scrollIntoView({ block: 'end' });
  }, [messages]);
@@ -25,9 +138,22 @@ export function MessageList({ messages, sessionChats }: Props) {
  return (
    <div className="flex-1 overflow-y-auto">
      <div className="max-w-[1000px] mx-auto w-full px-6 py-4 space-y-4">
-        {messages.map((m) => (
+        {renderItems.map((item) => {
-          <MessageBubble key={m.id} message={m} sessionChats={sessionChats} />
+          if (item.kind === 'message') {
-        ))}
+            return (
              <MessageBubble
                key={item.message.id}
                message={item.message}
                sessionChats={sessionChats}
                capHitInfo={item.capHitInfo}
              />
            );
          }
          if (item.kind === 'tool_run') {
            return <ToolCallLine key={item.key} run={item.run} />;
          }
          return <ToolCallGroup key={item.key} runs={item.runs} />;
        })}
        <div ref={endRef} />
      </div>
    </div>
--- a/apps/web/src/components/MobileTabSwitcher.tsx
+++ b/apps/web/src/components/MobileTabSwitcher.tsx
@@ -0,0 +1,207 @@
 import { useState } from 'react';
 import {
  Bot,
  ChevronDown,
  Edit2,
  MessageSquare,
  MoreHorizontal,
  Terminal,
  X,
 } from 'lucide-react';
 import { toast } from 'sonner';
 import type { Chat, WorkspacePane } from '@/api/types';
 import { BottomSheet } from '@/components/BottomSheet';
 import { StatusDot } from '@/components/StatusDot';
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useLongPress } from '@/hooks/useLongPress';
 import { cn } from '@/lib/utils';
 interface Props {
  panes: WorkspacePane[];
  activePaneIdx: number;
  chats: Chat[];
  onSwitchPane: (idx: number) => void;
  onRemovePane: (idx: number) => void;
  onRenameChat: (chatId: string, name: string) => Promise<void>;
 }
 function paneIcon(kind: WorkspacePane['kind']) {
  if (kind === 'terminal') return <Terminal size={14} />;
  if (kind === 'agent') return <Bot size={14} />;
  return <MessageSquare size={14} />;
 }
 function paneActiveChatId(pane: WorkspacePane | undefined): string | null {
  if (!pane) return null;
  if (pane.chatId) return pane.chatId;
  const idx = pane.activeChatIdx;
  if (idx < 0 || idx >= pane.chatIds.length) return null;
  return pane.chatIds[idx] ?? null;
 }
 function paneLabel(pane: WorkspacePane, chats: Chat[]): string {
  const cid = paneActiveChatId(pane);
  if (cid) {
    const c = chats.find((x) => x.id === cid);
    if (c) return c.name ?? 'New chat';
  }
  if (pane.kind === 'chat') return 'Chat';
  if (pane.kind === 'terminal') return 'Terminal';
  if (pane.kind === 'agent') return 'Agent';
  return 'Empty';
 }
 export function MobileTabSwitcher({
  panes,
  activePaneIdx,
  chats,
  onSwitchPane,
  onRemovePane,
  onRenameChat,
 }: Props) {
  const [open, setOpen] = useState(false);
  const [renamingChatId, setRenamingChatId] = useState<string | null>(null);
  const [renameValue, setRenameValue] = useState('');
  const active = panes[activePaneIdx];
  const activeLabel = active ? paneLabel(active, chats) : 'Empty';
  const activeChatId = paneActiveChatId(active);
  // Long-press mirrors ChatTabBar: synthesize a contextmenu event on the row
  // so the trailing kebab's Radix DropdownMenu opens at the touch point.
  const longPress = useLongPress(({ clientX, clientY, target }) => {
    if (!target || !(target instanceof Element)) return;
    const row = target.closest('[data-pane-id]') as HTMLElement | null;
    if (!row) return;
    const trigger = row.querySelector('[data-pane-kebab]') as HTMLElement | null;
    if (trigger) {
      trigger.click();
      return;
    }
    row.dispatchEvent(
      new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX, clientY }),
    );
  });
  function startRename(chatId: string, currentName: string | null) {
    setRenamingChatId(chatId);
    setRenameValue(currentName ?? '');
  }
  async function finishRename() {
    if (renamingChatId && renameValue.trim()) {
      try {
        await onRenameChat(renamingChatId, renameValue.trim());
      } catch (err) {
        toast.error(err instanceof Error ? err.message : 'rename failed');
      }
    }
    setRenamingChatId(null);
  }
  function handleSwitchPane(idx: number) {
    onSwitchPane(idx);
    setOpen(false);
  }
  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="flex-1 inline-flex items-center gap-1.5 min-h-[44px] px-3 text-sm rounded-full bg-muted/40 hover:bg-muted/70 text-foreground min-w-0"
        aria-label="Switch pane"
      >
        <span className="shrink-0 text-muted-foreground">{paneIcon(active?.kind ?? 'chat')}</span>
        <StatusDot chatId={activeChatId} />
        <span className="truncate flex-1 text-left">{activeLabel}</span>
        <ChevronDown size={14} className="opacity-60 shrink-0" />
      </button>
      <BottomSheet open={open} onClose={() => setOpen(false)} title="Panes">
        <ul className="px-2 py-2 space-y-1">
          {panes.map((pane, idx) => {
            const isActive = idx === activePaneIdx;
            const cid = paneActiveChatId(pane);
            const chat = cid ? chats.find((c) => c.id === cid) ?? null : null;
            const label = paneLabel(pane, chats);
            return (
              <li
                key={pane.id}
                data-pane-id={pane.id}
                onTouchStart={longPress.onTouchStart}
                onTouchMove={longPress.onTouchMove}
                onTouchEnd={longPress.onTouchEnd}
                onTouchCancel={longPress.onTouchCancel}
                onClick={() => handleSwitchPane(idx)}
                style={{ WebkitTouchCallout: 'none' }}
                className={cn(
                  'flex items-center gap-2 px-3 py-2 rounded min-h-[48px] cursor-default select-none',
                  isActive
                    ? 'bg-accent/40 border-l-2 border-primary'
                    : 'hover:bg-muted/50',
                )}
              >
                <span className="shrink-0 text-muted-foreground">{paneIcon(pane.kind)}</span>
                <StatusDot chatId={cid ?? null} />
                {renamingChatId === cid && cid ? (
                  <input
                    autoFocus
                    value={renameValue}
                    onChange={(e) => setRenameValue(e.target.value)}
                    onBlur={() => void finishRename()}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') void finishRename();
                      if (e.key === 'Escape') setRenamingChatId(null);
                    }}
                    onClick={(e) => e.stopPropagation()}
                    className="bg-transparent border-b border-border text-sm outline-none flex-1 min-w-0"
                  />
                ) : (
                  <span className="truncate flex-1 text-sm">{label}</span>
                )}
                {isActive && (
                  <span aria-hidden="true" className="text-primary text-xs shrink-0">
                    ✓
                  </span>
                )}
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <button
                      type="button"
                      data-pane-kebab
                      onClick={(e) => e.stopPropagation()}
                      className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground min-h-[44px] min-w-[44px]"
                      aria-label="Pane options"
                    >
                      <MoreHorizontal size={14} />
                    </button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    {chat && (
                      <DropdownMenuItem onSelect={() => startRename(chat.id, chat.name)}>
                        <Edit2 size={14} /> Rename chat
                      </DropdownMenuItem>
                    )}
                    <DropdownMenuItem
                      disabled={panes.length <= 1}
                      onSelect={() => onRemovePane(idx)}
                    >
                      <X size={14} /> Close pane
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </li>
            );
          })}
        </ul>
        {/* v1.8: New-pane button moved out of the sheet to the header row 2
            (see NewPaneMenu). Sheet is for switching only. */}
      </BottomSheet>
    </>
  );
 }
--- a/apps/web/src/components/NewPaneMenu.tsx
+++ b/apps/web/src/components/NewPaneMenu.tsx
@@ -0,0 +1,44 @@
 import { Bot, MessageSquare, Plus, Terminal } from 'lucide-react';
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 interface Props {
  onAddPane: (kind: 'chat' | 'terminal' | 'agent') => void;
  disabled?: boolean;
 }
 // v1.8 row-2 right cluster: mirrors the desktop Workspace.tsx Split dropdown.
 // Terminal and Agent items pass through to addSplitPane which already shows
 // "coming soon" toasts; rendering them here matches the Batch 3 workspace
 // model so the UI is forward-compatible with BooTerm/BooCoder.
 export function NewPaneMenu({ onAddPane, disabled }: Props) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          disabled={disabled}
          className="inline-flex items-center justify-center min-h-[44px] min-w-[44px] rounded-full bg-muted/40 hover:bg-muted/70 text-foreground disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
          aria-label="New pane"
        >
          <Plus size={16} />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onSelect={() => onAddPane('chat')}>
          <MessageSquare size={14} /> New chat
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
          <Terminal size={14} /> New terminal
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => onAddPane('agent')}>
          <Bot size={14} /> New agent
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
 }
--- a/apps/web/src/components/ProjectSidebar.tsx
+++ b/apps/web/src/components/ProjectSidebar.tsx
@@ -19,8 +19,10 @@ import {
 } from '@/components/ui/dialog';
 import { AddProjectModal } from './AddProjectModal';
 import { api } from '@/api/client';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { useSidebar } from '@/hooks/useSidebar';
 import { useSidebarDrawer } from '@/hooks/useSidebarDrawer';
 import { useViewport } from '@/hooks/useViewport';
 import { usePullToRefresh } from '@/hooks/usePullToRefresh';
 import type { SidebarProject } from '@/api/types';
 import { giteaUrlFor } from '@/lib/projectUrls';
 import { cn } from '@/lib/utils';
@@ -186,7 +188,8 @@ export function ProjectSidebar() {
    if (!trimmed) return;
    try {
      await api.sessions.update(sessionId, { name: trimmed });
-      sessionEvents.emit({ type: 'session_renamed', session_id: sessionId, name: trimmed });
+      // Server publishes session_renamed via broker.publishUser; useUserEvents
      // forwards onto the bus. No local emit needed.
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to rename session');
    }
@@ -195,8 +198,24 @@ export function ProjectSidebar() {
  const rowCls = (active: boolean) =>
    active ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'hover:bg-sidebar-accent/60';
  const { open: drawerOpen } = useSidebarDrawer();
  const { isMobile } = useViewport();
  const pull = usePullToRefresh(() => retry(), { enabled: isMobile });
  // On mobile the sidebar is a slide-in drawer (fixed, z-40, off-screen by
  // default). On desktop it sits inline as a normal flex column. The
  // backdrop is rendered by AppShell; drawer-open state lives in
  // SidebarDrawerProvider.
  const asideCls = isMobile
    ? cn(
        'fixed inset-y-0 left-0 z-40 w-60 border-r bg-sidebar text-sidebar-foreground flex flex-col',
        'transition-transform duration-200 ease-out',
        drawerOpen ? 'translate-x-0' : '-translate-x-full',
      )
    : 'w-60 shrink-0 border-r bg-sidebar text-sidebar-foreground flex flex-col h-screen';
  return (
-    <aside className="w-60 shrink-0 border-r bg-sidebar text-sidebar-foreground flex flex-col h-screen">
+    <aside className={asideCls}>
      <div className="px-4 py-3 border-b flex items-center justify-between">
        <NavLink to="/" className="font-semibold tracking-tight text-base">
          BooCode
@@ -206,7 +225,30 @@ export function ProjectSidebar() {
        </Button>
      </div>
-      <nav className="flex-1 overflow-y-auto py-2">
+      {isMobile && (pull.pullDist > 0 || pull.refreshing) && (
        <div
          className="flex items-center justify-center text-[10px] uppercase tracking-wide text-muted-foreground border-b overflow-hidden shrink-0"
          style={{
            height: pull.refreshing ? 32 : Math.min(pull.pullDist, 80),
            transition: pull.pullDist === 0 && !pull.refreshing ? 'height 0.2s ease' : undefined,
          }}
          aria-live="polite"
        >
          {pull.refreshing
            ? 'Refreshing…'
            : pull.pullDist >= 80
            ? 'Release to refresh'
            : 'Pull to refresh'}
        </div>
      )}
      <nav
        className="flex-1 overflow-y-auto py-2"
        onTouchStart={isMobile ? pull.onTouchStart : undefined}
        onTouchMove={isMobile ? pull.onTouchMove : undefined}
        onTouchEnd={isMobile ? pull.onTouchEnd : undefined}
        onTouchCancel={isMobile ? pull.onTouchEnd : undefined}
      >
        {loading && data == null && (
          <div className="space-y-2 px-2">
            {[0, 1, 2, 3].map((i) => (
--- a/apps/web/src/components/RightRail.tsx
+++ b/apps/web/src/components/RightRail.tsx
@@ -4,8 +4,11 @@ import { api } from '@/api/client';
 import type { FileEntry } from '@/api/types';
 import { inferLanguage } from '@/lib/attachments';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { useRightRailDrawer } from '@/hooks/useRightRailDrawer';
 import { useViewport } from '@/hooks/useViewport';
 import { FileViewerOverlay } from '@/components/FileViewerOverlay';
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
 interface Props {
  projectId: string;
@@ -25,6 +28,8 @@ function joinPath(parent: string, name: string): string {
 }
 export function RightRail({ projectId }: Props) {
  const { isMobile } = useViewport();
  const { open: drawerOpen, setOpen: setDrawerOpen } = useRightRailDrawer();
  const [open, setOpen] = useState(() => {
    try { return localStorage.getItem(`${STORAGE_KEY}.open`) !== 'false'; } catch { return true; }
  });
@@ -34,7 +39,21 @@ export function RightRail({ projectId }: Props) {
  const [fullFileList, setFullFileList] = useState<string[] | null>(null);
  const [viewerFile, setViewerFile] = useState<{ path: string; content: string } | null>(null);
  // Combined open state: on mobile use the global drawer state (toggled by
  // the Session header's FolderTree button); on desktop use the persistent
  // internal state.
  const isOpen = isMobile ? drawerOpen : open;
  const closeRail = useCallback(() => {
    if (isMobile) setDrawerOpen(false);
    else setOpen(false);
  }, [isMobile, setDrawerOpen]);
  const openRail = useCallback(() => {
    if (isMobile) setDrawerOpen(true);
    else setOpen(true);
  }, [isMobile, setDrawerOpen]);
  useEffect(() => {
    // best-effort; ignore failure because localStorage may be unavailable (quota, private mode)
    try { localStorage.setItem(`${STORAGE_KEY}.open`, String(open)); } catch {}
  }, [open]);
@@ -55,9 +74,9 @@ export function RightRail({ projectId }: Props) {
  }, [projectId]);
  useEffect(() => {
-    if (!open) return;
+    if (!isOpen) return;
    if (!cache.has('')) void loadDir('');
-  }, [open, cache, loadDir]);
+  }, [isOpen, cache, loadDir]);
  function toggleDir(dirPath: string) {
    setExpandedDirs((prev) => {
@@ -107,12 +126,14 @@ export function RightRail({ projectId }: Props) {
  useEffect(() => {
    return sessionEvents.subscribe((event) => {
      if (event.type !== 'open_file_in_browser') return;
-      if (!open) setOpen(true);
+      if (!isOpen) openRail();
      void openFile(event.path);
    });
-  }, [open, projectId]);
+  }, [isOpen, openRail, projectId]);
-  if (!open) {
+  // Desktop closed state: render the floating chevron handle. Mobile never
  // shows the handle — the toggle lives in the Session header on mobile.
  if (!isMobile && !open) {
    return (
      <button
        type="button"
@@ -127,15 +148,25 @@ export function RightRail({ projectId }: Props) {
  const rootEntries = cache.get('') ?? [];
  // Mobile: render as fixed-position right-side drawer (always mounted so
  // the transform transition can animate in/out). Desktop: inline aside.
  const asideCls = isMobile
    ? cn(
        'fixed inset-y-0 right-0 z-40 w-[85vw] max-w-sm border-l bg-sidebar flex flex-col overflow-hidden',
        'transition-transform duration-200 ease-out',
        drawerOpen ? 'translate-x-0' : 'translate-x-full',
      )
    : 'w-64 shrink-0 border-l bg-sidebar flex flex-col h-full overflow-hidden';
  return (
    <>
-      <aside className="w-64 shrink-0 border-l bg-sidebar flex flex-col h-full overflow-hidden">
+      <aside className={asideCls}>
        <div className="flex items-center gap-2 px-3 py-2 border-b shrink-0">
          <span className="text-xs font-medium flex-1">Files</span>
          <button
            type="button"
-            onClick={() => setOpen(false)}
+            onClick={closeRail}
-            className="p-1 rounded hover:bg-muted text-muted-foreground"
+            className="p-1 rounded hover:bg-muted text-muted-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
            aria-label="Close file browser"
          >
            <PanelRightClose size={14} />
--- a/apps/web/src/components/StatusDot.tsx
+++ b/apps/web/src/components/StatusDot.tsx
@@ -0,0 +1,36 @@
 import { useChatStatus, type DerivedStatus } from '@/hooks/useChatStatus';
 import { cn } from '@/lib/utils';
 interface Props {
  chatId: string | null | undefined;
  className?: string;
 }
 const STATUS_CLASS: Record<DerivedStatus, string> = {
  working: 'bg-amber-500 animate-pulse',
  idle_warm: 'bg-emerald-500',
  idle_cold: 'bg-muted-foreground/40',
  error: 'bg-destructive',
 };
 const STATUS_LABEL: Record<DerivedStatus, string> = {
  working: 'working',
  idle_warm: 'idle',
  idle_cold: 'idle',
  error: 'error',
 };
 export function StatusDot({ chatId, className }: Props) {
  const status = useChatStatus(chatId);
  return (
    <span
      aria-label={`Status: ${STATUS_LABEL[status]}`}
      title={STATUS_LABEL[status]}
      className={cn(
        'inline-block w-1.5 h-1.5 rounded-full shrink-0',
        STATUS_CLASS[status],
        className,
      )}
    />
  );
 }
--- a/apps/web/src/components/SwipeablePaneTab.tsx
+++ b/apps/web/src/components/SwipeablePaneTab.tsx
@@ -0,0 +1,103 @@
 import { useRef, useState } from 'react';
 import type { TouchEvent } from 'react';
 import { cn } from '@/lib/utils';
 interface Props {
  label: string;
  isActive: boolean;
  onTap: () => void;
  onClose: () => void;
  canClose: boolean;
 }
 const CLOSE_THRESHOLD = 60;
 const MAX_TRAVEL = 120;
 const VERTICAL_BAIL = 30;
 // Pane tab with horizontal swipe-to-close (mobile only). Tracks horizontal
 // finger movement; if vertical exceeds VERTICAL_BAIL the gesture is cancelled
 // (so vertical scroll still works). On release past CLOSE_THRESHOLD, the
 // onClose callback fires. Otherwise the tab snaps back. Hand-rolled per spec.
 export function SwipeablePaneTab({ label, isActive, onTap, onClose, canClose }: Props) {
  const [translateX, setTranslateX] = useState(0);
  const [dragging, setDragging] = useState(false);
  const startRef = useRef<{ x: number; y: number; bailed: boolean } | null>(null);
  const onTouchStart = (e: TouchEvent) => {
    if (!canClose) return;
    const t = e.touches[0];
    if (!t) return;
    startRef.current = { x: t.clientX, y: t.clientY, bailed: false };
    setDragging(true);
  };
  const onTouchMove = (e: TouchEvent) => {
    const start = startRef.current;
    if (!start || start.bailed) return;
    const t = e.touches[0];
    if (!t) return;
    const dx = t.clientX - start.x;
    const dy = t.clientY - start.y;
    if (Math.abs(dy) > VERTICAL_BAIL) {
      start.bailed = true;
      setTranslateX(0);
      setDragging(false);
      return;
    }
    if (dx < 0) {
      setTranslateX(Math.max(dx, -MAX_TRAVEL));
    } else {
      setTranslateX(0);
    }
  };
  const onTouchEnd = () => {
    const start = startRef.current;
    startRef.current = null;
    setDragging(false);
    if (!start || start.bailed) {
      setTranslateX(0);
      return;
    }
    const tx = translateX;
    if (tx <= -CLOSE_THRESHOLD) {
      onClose();
      // Don't reset translateX; the parent will unmount this tab.
    } else {
      setTranslateX(0);
    }
  };
  // Opacity fades from 1 -> 0.4 as the tab approaches the close threshold.
  const opacity =
    translateX < 0
      ? Math.max(0.4, 1 - (Math.abs(translateX) / CLOSE_THRESHOLD) * 0.6)
      : 1;
  return (
    <button
      type="button"
      onClick={onTap}
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
      onTouchCancel={onTouchEnd}
      style={{
        transform: `translateX(${translateX}px)`,
        opacity,
        // Only animate when releasing (snap-back); during drag the transform
        // tracks the finger 1:1 for a tight feel.
        transition: dragging ? undefined : 'transform 0.15s ease, opacity 0.15s ease',
      }}
      className={cn(
        'shrink-0 px-3 py-2 text-xs rounded min-h-[44px] min-w-[44px]',
        isActive
          ? 'bg-background text-foreground border'
          : 'text-muted-foreground hover:bg-muted/40',
      )}
      aria-current={isActive ? 'true' : undefined}
    >
      <span className="truncate max-w-[140px] inline-block">{label}</span>
    </button>
  );
 }
--- a/apps/web/src/components/ToolCallCard.tsx
+++ b/apps/web/src/components/ToolCallCard.tsx
@@ -1,102 +0,0 @@
 import { useState } from 'react';
 import type { ReactNode } from 'react';
 import { ChevronRight, Wrench } from 'lucide-react';
 import type { Message, ToolCall } from '@/api/types';
 import { sessionEvents } from '@/hooks/sessionEvents';
 interface Props {
  message?: Message;
  toolCall?: ToolCall;
 }
 // Same regex/heuristic as MessageBubble: paths ending in `.ext` with at
 // least one `/`. Linkifies file paths emitted by tools like grep / find_files
 // so they're clickable.
 const PATH_REGEX = /([a-zA-Z0-9._/-]+\.[a-zA-Z0-9]+)/g;
 function linkifyOutput(text: string): ReactNode[] {
  const out: ReactNode[] = [];
  let lastIdx = 0;
  let idx = 0;
  for (const match of text.matchAll(PATH_REGEX)) {
    const matchedText = match[0];
    const start = match.index ?? 0;
    if (!matchedText.includes('/')) continue;
    if (start > lastIdx) out.push(text.slice(lastIdx, start));
    out.push(
      <button
        key={idx}
        type="button"
        onClick={() =>
          sessionEvents.emit({
            type: 'open_file_in_browser',
            path: matchedText,
          })
        }
        className="text-primary underline cursor-pointer hover:text-primary/80"
      >
        {matchedText}
      </button>
    );
    lastIdx = start + matchedText.length;
    idx += 1;
  }
  if (lastIdx < text.length) out.push(text.slice(lastIdx));
  return out.length > 0 ? out : [text];
 }
 export function ToolCallCard({ message, toolCall }: Props) {
  const [open, setOpen] = useState(false);
  const tc = toolCall ?? message?.tool_calls?.[0];
  const result = message?.tool_results;
  const name = tc?.name ?? 'tool';
  const args = tc?.args ?? {};
  const error = result?.error;
  const output = result?.output;
  const truncated = result?.truncated;
  return (
    <div className="rounded-md border border-border bg-muted/30 text-sm overflow-hidden">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/60 text-left"
      >
        <ChevronRight
          className={`size-3.5 transition-transform ${open ? 'rotate-90' : ''}`}
        />
        <Wrench className="size-3.5 opacity-70" />
        <span className="font-mono font-medium">{name}</span>
        <span className="font-mono text-xs text-muted-foreground truncate min-w-0 flex-1">
          {JSON.stringify(args)}
        </span>
        {error && (
          <span className="text-xs text-destructive font-medium ml-2">error</span>
        )}
        {truncated && (
          <span className="text-xs text-muted-foreground ml-2">truncated</span>
        )}
      </button>
      {open && (
        <div className="px-2.5 py-2 border-t bg-background/40">
          {error ? (
            <pre className="text-xs text-destructive font-mono whitespace-pre-wrap">
              {error}
            </pre>
          ) : output !== undefined ? (
            <pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto max-h-72 overflow-y-auto">
              {linkifyOutput(
                typeof output === 'string'
                  ? output
                  : JSON.stringify(output, null, 2)
              )}
            </pre>
          ) : (
            <div className="text-xs text-muted-foreground">no result yet</div>
          )}
        </div>
      )}
    </div>
  );
 }
--- a/apps/web/src/components/ToolCallGroup.tsx
+++ b/apps/web/src/components/ToolCallGroup.tsx
@@ -0,0 +1,64 @@
 import { useState } from 'react';
 import { ChevronRight } from 'lucide-react';
 import { ToolCallLine, runStatus, type ToolRun } from './ToolCallLine';
 interface Props {
  // All runs must share the same tool name. Caller (MessageList grouping
  // pass) enforces that invariant.
  runs: ToolRun[];
 }
 export function ToolCallGroup({ runs }: Props) {
  const [open, setOpen] = useState(false);
  if (runs.length === 0) return null;
  const toolName = runs[0]!.call.name;
  const count = runs.length;
  // Group-level status: pending if any are still running, error if any
  // finished with an error, otherwise success. Matches the visual the user
  // gets when scanning a long run of greps / view_files.
  let pending = 0;
  let errored = 0;
  for (const r of runs) {
    const s = runStatus(r);
    if (s === 'pending') pending += 1;
    else if (s === 'error') errored += 1;
  }
  const summaryParts: string[] = [];
  if (pending > 0) summaryParts.push(`${pending} running`);
  if (errored > 0) summaryParts.push(`${errored} failed`);
  const summary = summaryParts.length > 0 ? ` (${summaryParts.join(', ')})` : '';
  return (
    <div className="rounded border border-border/60 bg-muted/20 text-xs">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-center gap-1.5 px-2 py-1 hover:bg-muted/40 text-left"
      >
        <ChevronRight
          className={`size-3 text-muted-foreground/60 shrink-0 transition-transform ${open ? 'rotate-90' : ''}`}
        />
        <span className="text-muted-foreground/60 select-none shrink-0">⊞</span>
        <span className="font-mono text-foreground/90">
          {count} {toolName} call{count === 1 ? '' : 's'}
        </span>
        {summary && (
          <span className="text-muted-foreground truncate">{summary}</span>
        )}
        <span className="ml-auto text-muted-foreground/60 shrink-0">tap</span>
      </button>
      {open && (
        <div className="border-t border-border/40 px-2 py-1 space-y-0.5">
          {runs.map((run, i) => (
            <ToolCallLine
              key={`${run.call.id}-${i}`}
              run={run}
              insideGroup
            />
          ))}
        </div>
      )}
    </div>
  );
 }
--- a/apps/web/src/components/ToolCallLine.tsx
+++ b/apps/web/src/components/ToolCallLine.tsx
@@ -0,0 +1,167 @@
 import { useState } from 'react';
 import type { ReactNode } from 'react';
 import { Check, ChevronRight, Loader2, X } from 'lucide-react';
 import type { ToolCall, ToolResult } from '@/api/types';
 import { sessionEvents } from '@/hooks/sessionEvents';
 // v1.8.2: cap on the inline arg-summary length. Expanded view shows full
 // args + full result, so this is purely a single-line render budget.
 const ARG_SUMMARY_MAX = 60;
 export interface ToolRun {
  call: ToolCall;
  // null while the call is in flight or the matching tool result hasn't
  // arrived yet on the WS stream.
  result: ToolResult | null;
 }
 function truncate(s: string, n: number): string {
  return s.length > n ? s.slice(0, n - 1) + '…' : s;
 }
 // Per-tool argument summary mapping from the v1.8.2 spec. Goal is a single
 // scannable line that surfaces the *what* (path / pattern) without
 // overwhelming the chat with full JSON.
 export function formatToolArgs(name: string, args: Record<string, unknown>): string {
  if (name === 'view_file') {
    const path = String(args.path ?? '');
    const start = args.start_line;
    const end = args.end_line;
    if (typeof start === 'number' && typeof end === 'number') {
      return truncate(`${path}:${start}-${end}`, ARG_SUMMARY_MAX);
    }
    if (typeof start === 'number') {
      return truncate(`${path}:${start}`, ARG_SUMMARY_MAX);
    }
    return truncate(path, ARG_SUMMARY_MAX);
  }
  if (name === 'list_dir') {
    return truncate(String(args.path ?? '.'), ARG_SUMMARY_MAX);
  }
  if (name === 'grep') {
    const pattern = String(args.pattern ?? '');
    const path = args.path ? ` ${String(args.path)}` : '';
    return truncate(`"${pattern}"${path}`, ARG_SUMMARY_MAX);
  }
  if (name === 'find_files') {
    return truncate(String(args.pattern ?? ''), ARG_SUMMARY_MAX);
  }
  if (name === 'git_status') {
    return '';
  }
  // Unknown tool — surface first arg value or the literal {} so the user can
  // see something happened. Forward-compatible with future tools.
  const keys = Object.keys(args);
  if (keys.length === 0) return '{}';
  const first = keys[0]!;
  return truncate(`${first}: ${String(args[first])}`, ARG_SUMMARY_MAX);
 }
 export function runStatus(run: ToolRun): 'pending' | 'success' | 'error' {
  if (run.result === null) return 'pending';
  if (run.result.error) return 'error';
  return 'success';
 }
 // Path-shaped paths in tool output text get a click handler so users can
 // jump to the file. Same heuristic as MessageBubble.linkifyPaths.
 const PATH_REGEX = /([a-zA-Z0-9._/-]+\.[a-zA-Z0-9]+)/g;
 function linkifyOutput(text: string): ReactNode[] {
  const out: ReactNode[] = [];
  let lastIdx = 0;
  let idx = 0;
  for (const match of text.matchAll(PATH_REGEX)) {
    const matchedText = match[0];
    const start = match.index ?? 0;
    if (!matchedText.includes('/')) continue;
    if (start > lastIdx) out.push(text.slice(lastIdx, start));
    out.push(
      <button
        key={idx}
        type="button"
        onClick={() =>
          sessionEvents.emit({ type: 'open_file_in_browser', path: matchedText })
        }
        className="text-primary underline cursor-pointer hover:text-primary/80"
      >
        {matchedText}
      </button>
    );
    lastIdx = start + matchedText.length;
    idx += 1;
  }
  if (lastIdx < text.length) out.push(text.slice(lastIdx));
  return out.length > 0 ? out : [text];
 }
 interface Props {
  run: ToolRun;
  // When rendered inside a ToolCallGroup the line is already nested under a
  // shared header, so the leading arrow is dropped to avoid double indent.
  insideGroup?: boolean;
 }
 export function ToolCallLine({ run, insideGroup }: Props) {
  const [open, setOpen] = useState(false);
  const status = runStatus(run);
  const args = run.call.args ?? {};
  const summary = formatToolArgs(run.call.name, args);
  return (
    <div className="text-xs">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="flex items-center gap-1.5 w-full text-left hover:bg-muted/40 rounded px-1 py-0.5 -mx-1"
      >
        {!insideGroup && (
          <span className="text-muted-foreground/60 select-none shrink-0">↳</span>
        )}
        <ChevronRight
          className={`size-3 text-muted-foreground/60 shrink-0 transition-transform ${open ? 'rotate-90' : ''}`}
        />
        <span className="font-mono text-foreground/90 shrink-0">{run.call.name}</span>
        {summary && (
          <span className="font-mono text-muted-foreground truncate min-w-0 flex-1">
            {summary}
          </span>
        )}
        {!summary && <span className="flex-1" />}
        <span className="shrink-0 ml-1">
          {status === 'pending' && (
            <Loader2 className="size-3 text-muted-foreground animate-spin" aria-label="running" />
          )}
          {status === 'success' && (
            <Check className="size-3 text-emerald-500" aria-label="success" />
          )}
          {status === 'error' && (
            <X className="size-3 text-destructive" aria-label="error" />
          )}
        </span>
      </button>
      {open && (
        <div className="ml-5 mt-1 mb-1 space-y-1">
          <pre className="text-[10px] text-muted-foreground font-mono whitespace-pre-wrap break-all bg-muted/30 rounded px-2 py-1">
            {JSON.stringify(args, null, 2)}
          </pre>
          {run.result && (
            <pre className="text-[11px] font-mono whitespace-pre-wrap bg-muted/30 rounded px-2 py-1 max-h-72 overflow-y-auto">
              {run.result.error ? (
                <span className="text-destructive">{run.result.error}</span>
              ) : (
                linkifyOutput(
                  typeof run.result.output === 'string'
                    ? run.result.output
                    : JSON.stringify(run.result.output, null, 2)
                )
              )}
              {run.result.truncated && (
                <div className="text-muted-foreground/60 mt-1">— output truncated —</div>
              )}
            </pre>
          )}
        </div>
      )}
    </div>
  );
 }
--- a/apps/web/src/components/Workspace.tsx
+++ b/apps/web/src/components/Workspace.tsx
@@ -1,11 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { DragEvent } from 'react';
 import { PanelRight, MessageSquare, Terminal, Bot } from 'lucide-react';
 import { toast } from 'sonner';
 import { api } from '@/api/client';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { setActivePaneInfo, clearActivePane } from '@/hooks/useActivePane';
 import type { Chat, WorkspacePane } from '@/api/types';
 import { MAX_PANES, type UseWorkspacePanesResult } from '@/hooks/useWorkspacePanes';
 import type { UseSessionChatsResult } from '@/hooks/useSessionChats';
 import { useViewport } from '@/hooks/useViewport';
 import { ChatPane } from '@/components/panes/ChatPane';
 import { ChatTabBar } from '@/components/ChatTabBar';
 import { SessionLandingPage } from '@/components/SessionLandingPage';
@@ -20,404 +17,55 @@ import { cn } from '@/lib/utils';
 interface Props {
  sessionId: string;
  projectId: string;
  // Batch 9: threaded down to ChatPane → ChatInput → AgentPicker.
  agentId?: string | null;
  onAgentChange?: (agentId: string | null) => void | Promise<void>;
  // v1.8: panes + chats hoisted into Session.tsx so the mobile header pill
  // (MobileTabSwitcher) can share state with the pane grid.
  panesHook: UseWorkspacePanesResult;
  chatsHook: UseSessionChatsResult;
 }
-const MAX_PANES = 5;
+export function Workspace({
-const STORAGE_KEY = 'boocode.workspace.panes';
+  sessionId,
  projectId,
  agentId,
  onAgentChange,
  panesHook,
  chatsHook,
 }: Props) {
  const {
    panes,
    activePaneIdx,
    setActivePaneIdx,
    openChatInPane,
    switchTab,
    removeTab,
    closeOtherTabs,
    closeTabsToRight,
    closeAllTabs,
    showLandingPage,
    addSplitPane,
    removePane,
    handlePaneDragStart,
    handlePaneDragOver,
    handlePaneDragLeave,
    handlePaneDrop,
    handlePaneDragEnd,
    dragOverIdx,
    draggingIdxRef,
  } = panesHook;
  const {
    chats,
    createChat,
    archiveChat,
    unarchiveChat,
    deleteChat,
    renameChat,
    handleLandingSend,
  } = chatsHook;
-function generateId(): string {
+  const { isMobile } = useViewport();
  return crypto.randomUUID();
 }
 function emptyPane(): WorkspacePane {
  return { id: generateId(), kind: 'empty', chatIds: [], activeChatIdx: -1 };
 }
 function chatPane(chatId: string): WorkspacePane {
  return { id: generateId(), kind: 'chat', chatId, chatIds: [chatId], activeChatIdx: 0 };
 }
 function loadPanes(sessionId: string): WorkspacePane[] | null {
  try {
    const raw = localStorage.getItem(`${STORAGE_KEY}.${sessionId}`);
    if (!raw) return null;
    const parsed = JSON.parse(raw) as WorkspacePane[];
    if (!Array.isArray(parsed) || parsed.length === 0) return null;
    return parsed;
  } catch {
    return null;
  }
 }
 function savePanes(sessionId: string, panes: WorkspacePane[]): void {
  try {
    localStorage.setItem(`${STORAGE_KEY}.${sessionId}`, JSON.stringify(panes));
  } catch { /* quota or disabled */ }
 }
 export function Workspace({ sessionId, projectId }: Props) {
  const [panes, setPanes] = useState<WorkspacePane[]>(() => {
    return loadPanes(sessionId) ?? [emptyPane()];
  });
  const [activePaneIdx, setActivePaneIdx] = useState(0);
  const [chats, setChats] = useState<Chat[]>([]);
  const chatsRef = useRef<Chat[]>([]);
  chatsRef.current = chats;
  const draggingIdxRef = useRef<number | null>(null);
  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
  useEffect(() => {
    let cancelled = false;
    api.chats.listForSession(sessionId).then((list) => {
      if (cancelled) return;
      setChats(list);
      const openChat = list.find((c) => c.status === 'open');
      if (openChat) {
        setPanes((prev) => {
          if (prev.length === 1 && prev[0]!.kind === 'empty') {
            return [chatPane(openChat.id)];
          }
          return prev;
        });
      }
    }).catch(() => {});
    return () => { cancelled = true; };
  }, [sessionId]);
  useEffect(() => {
    savePanes(sessionId, panes);
  }, [sessionId, panes]);
  useEffect(() => {
    const active = panes[activePaneIdx];
    if (!active) {
      clearActivePane();
      return;
    }
    setActivePaneInfo({
      sessionId,
      paneId: active.id,
      kind: active.kind,
      activeFile: null,
    });
  }, [sessionId, panes, activePaneIdx]);
  useEffect(() => {
    return () => {
      clearActivePane();
    };
  }, []);
  const activePaneIdxRef = useRef(activePaneIdx);
  activePaneIdxRef.current = activePaneIdx;
  useEffect(() => {
    return sessionEvents.subscribe((event) => {
      if (event.type === 'chat_created' && event.session_id === sessionId) {
        setChats((prev) => {
          if (prev.some((c) => c.id === event.chat.id)) return prev;
          return [event.chat, ...prev];
        });
      }
      if (event.type === 'chat_updated') {
        setChats((prev) => prev.map((c) =>
          c.id === event.chat_id ? { ...c, name: event.name, updated_at: event.updated_at } : c
        ));
      }
      if (event.type === 'chat_archived') {
        setChats((prev) => prev.map((c) =>
          c.id === event.chat_id ? { ...c, status: 'archived' as const } : c
        ));
        removeChatFromPanes(event.chat_id);
      }
      if (event.type === 'chat_unarchived') {
        setChats((prev) => {
          if (prev.some((c) => c.id === event.chat.id)) {
            return prev.map((c) => c.id === event.chat.id ? { ...c, status: 'open' as const } : c);
          }
          return [event.chat, ...prev];
        });
      }
      if (event.type === 'chat_deleted') {
        setChats((prev) => prev.filter((c) => c.id !== event.chat_id));
        removeChatFromPanes(event.chat_id);
      }
      if (event.type === 'open_chat_in_active_pane') {
        openChatInPane(activePaneIdxRef.current, event.chat_id);
      }
    });
  }, [sessionId]);
  function removeChatFromPanes(chatId: string) {
    setPanes((prev) => prev.map((p) => {
      const idx = p.chatIds.indexOf(chatId);
      if (idx < 0) return p;
      const nextIds = p.chatIds.filter((id) => id !== chatId);
      if (nextIds.length === 0) {
        return { ...p, kind: 'empty' as const, chatId: undefined, chatIds: [], activeChatIdx: -1 };
      }
      const nextActiveIdx = Math.min(p.activeChatIdx, nextIds.length - 1);
      return {
        ...p,
        chatIds: nextIds,
        activeChatIdx: nextActiveIdx,
        chatId: nextIds[nextActiveIdx],
      };
    }));
  }
  const openChatInPane = useCallback((paneIdx: number, chatId: string) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const existing = pane.chatIds.indexOf(chatId);
      if (existing >= 0) {
        next[paneIdx] = { ...pane, kind: 'chat', chatId, activeChatIdx: existing };
      } else {
        const newIds = [...pane.chatIds, chatId];
        next[paneIdx] = {
          ...pane,
          kind: 'chat',
          chatId,
          chatIds: newIds,
          activeChatIdx: newIds.length - 1,
        };
      }
      return next;
    });
    setActivePaneIdx(paneIdx);
  }, []);
  const switchTab = useCallback((paneIdx: number, tabIdx: number) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const chatId = pane.chatIds[tabIdx];
      if (!chatId) return prev;
      next[paneIdx] = { ...pane, chatId, activeChatIdx: tabIdx };
      return next;
    });
  }, []);
  const removeTab = useCallback((paneIdx: number, chatId: string) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const nextIds = pane.chatIds.filter((id) => id !== chatId);
      if (nextIds.length === 0) {
        next[paneIdx] = { ...pane, kind: 'empty', chatId: undefined, chatIds: [], activeChatIdx: -1 };
      } else {
        const nextActiveIdx = Math.min(pane.activeChatIdx, nextIds.length - 1);
        next[paneIdx] = {
          ...pane,
          chatIds: nextIds,
          activeChatIdx: nextActiveIdx,
          chatId: nextIds[nextActiveIdx],
        };
      }
      return next;
    });
  }, []);
  // Keep only the right-clicked tab open in this pane.
  const closeOtherTabs = useCallback((paneIdx: number, keepChatId: string) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const keepIdx = pane.chatIds.indexOf(keepChatId);
      if (keepIdx < 0) return prev;
      next[paneIdx] = {
        ...pane,
        kind: 'chat',
        chatId: keepChatId,
        chatIds: [keepChatId],
        activeChatIdx: 0,
      };
      return next;
    });
  }, []);
  // Close every tab to the right of the right-clicked one.
  const closeTabsToRight = useCallback((paneIdx: number, pivotChatId: string) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const pivotIdx = pane.chatIds.indexOf(pivotChatId);
      if (pivotIdx < 0 || pivotIdx === pane.chatIds.length - 1) return prev;
      const nextIds = pane.chatIds.slice(0, pivotIdx + 1);
      const nextActiveIdx = Math.min(pane.activeChatIdx, nextIds.length - 1);
      next[paneIdx] = {
        ...pane,
        chatIds: nextIds,
        activeChatIdx: nextActiveIdx,
        chatId: nextIds[nextActiveIdx],
      };
      return next;
    });
  }, []);
  // Close every tab in this pane; land on landing page.
  const closeAllTabs = useCallback((paneIdx: number) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      next[paneIdx] = { ...pane, kind: 'empty', chatId: undefined, chatIds: [], activeChatIdx: -1 };
      return next;
    });
  }, []);
  const createChat = useCallback(async (paneIdx: number) => {
    try {
      const chat = await api.chats.create(sessionId);
      // Optimistic local insert; the WS chat_created echo will be deduped by id.
      setChats((prev) => {
        if (prev.some((c) => c.id === chat.id)) return prev;
        return [chat, ...prev];
      });
      openChatInPane(paneIdx, chat.id);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to create chat');
    }
  }, [sessionId, openChatInPane]);
  const archiveChat = useCallback(async (chatId: string) => {
    try {
      await api.chats.archive(chatId);
      // Server publishes chat_archived; bus forwarder updates state.
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to archive chat');
    }
  }, []);
  const unarchiveChat = useCallback(async (chatId: string) => {
    try {
      await api.chats.unarchive(chatId);
      // Server publishes chat_unarchived.
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to restore chat');
    }
  }, []);
  const deleteChat = useCallback(async (chatId: string) => {
    try {
      await api.chats.remove(chatId);
      setChats((prev) => prev.filter((c) => c.id !== chatId));
      removeChatFromPanes(chatId);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to delete chat');
    }
  }, []);
  const renameChat = useCallback(async (chatId: string, name: string) => {
    try {
      await api.chats.update(chatId, { name });
      setChats((prev) => prev.map((c) =>
        c.id === chatId ? { ...c, name } : c
      ));
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to rename chat');
    }
  }, []);
  const showLandingPage = useCallback((paneIdx: number) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      next[paneIdx] = { ...pane, kind: 'empty', chatId: undefined };
      return next;
    });
  }, []);
  const addSplitPane = useCallback((kind: 'chat' | 'terminal' | 'agent') => {
    if (kind === 'terminal') {
      toast('Terminal panes coming in BooTerm');
      return;
    }
    if (kind === 'agent') {
      toast('Agent panes coming in BooCoder');
      return;
    }
    setPanes((prev) => {
      if (prev.length >= MAX_PANES) {
        toast.error(`Maximum ${MAX_PANES} panes`);
        return prev;
      }
      const next = [...prev, emptyPane()];
      setActivePaneIdx(next.length - 1);
      return next;
    });
  }, []);
  const removePane = useCallback((idx: number) => {
    setPanes((prev) => {
      if (prev.length <= 1) return prev;
      const next = prev.filter((_, i) => i !== idx);
      setActivePaneIdx((ai) => Math.min(ai, next.length - 1));
      return next;
    });
  }, []);
  const handlePaneDragStart = useCallback(
    (idx: number) => (e: DragEvent<HTMLDivElement>) => {
      draggingIdxRef.current = idx;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/plain', String(idx));
    },
    []
  );
  const handlePaneDragOver = useCallback(
    (idx: number) => (e: DragEvent<HTMLDivElement>) => {
      if (draggingIdxRef.current === null) return;
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
      if (dragOverIdx !== idx) setDragOverIdx(idx);
    },
    [dragOverIdx]
  );
  const handlePaneDragLeave = useCallback(() => {
    setDragOverIdx(null);
  }, []);
  const handlePaneDrop = useCallback(
    (targetIdx: number) => (e: DragEvent<HTMLDivElement>) => {
      e.preventDefault();
      const fromIdx = draggingIdxRef.current;
      draggingIdxRef.current = null;
      setDragOverIdx(null);
      if (fromIdx === null || fromIdx === targetIdx) return;
      setPanes((prev) => {
        const next = [...prev];
        const [moved] = next.splice(fromIdx, 1);
        if (!moved) return prev;
        next.splice(targetIdx, 0, moved);
        // Keep active selection on the same logical pane (the one being dragged).
        setActivePaneIdx(targetIdx);
        return next;
      });
    },
    []
  );
  const handlePaneDragEnd = useCallback(() => {
    draggingIdxRef.current = null;
    setDragOverIdx(null);
  }, []);
  const handleLandingSend = useCallback(async (paneIdx: number, content: string) => {
    try {
      const chat = await api.chats.create(sessionId);
      setChats((prev) => {
        if (prev.some((c) => c.id === chat.id)) return prev;
        return [chat, ...prev];
      });
      openChatInPane(paneIdx, chat.id);
      await api.messages.send(chat.id, content);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to send');
    }
  }, [sessionId, openChatInPane]);
  function chatsForPane(pane: WorkspacePane): Chat[] {
    return pane.chatIds
@@ -427,78 +75,101 @@ export function Workspace({ sessionId, projectId }: Props) {
  return (
    <div className="flex flex-col h-full min-h-0">
-      <div className="flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 shrink-0">
+      {!isMobile && (
-        <DropdownMenu>
+        <div className="flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 shrink-0">
-          <DropdownMenuTrigger asChild>
+          <DropdownMenu>
-            <button
+            <DropdownMenuTrigger asChild>
-              type="button"
+              <button
-              disabled={panes.length >= MAX_PANES}
+                type="button"
-              className={cn(
+                disabled={panes.length >= MAX_PANES}
-                'flex items-center gap-1 text-xs px-2 py-1 rounded hover:bg-muted',
+                className={cn(
-                panes.length >= MAX_PANES && 'opacity-40 cursor-not-allowed hover:bg-transparent'
+                  'flex items-center gap-1 text-xs px-2 py-1 rounded hover:bg-muted',
-              )}
+                  panes.length >= MAX_PANES && 'opacity-40 cursor-not-allowed hover:bg-transparent'
-            >
+                )}
-              <PanelRight size={14} />
+              >
-              Split
+                <PanelRight size={14} />
-            </button>
+                Split
-          </DropdownMenuTrigger>
+              </button>
-          <DropdownMenuContent>
+            </DropdownMenuTrigger>
-            <DropdownMenuItem onSelect={() => addSplitPane('chat')}>
+            <DropdownMenuContent>
-              <MessageSquare size={14} /> Chat
+              <DropdownMenuItem onSelect={() => addSplitPane('chat')}>
-            </DropdownMenuItem>
+                <MessageSquare size={14} /> Chat
-            <DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
+              </DropdownMenuItem>
-              <Terminal size={14} /> Terminal
+              <DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
-            </DropdownMenuItem>
+                <Terminal size={14} /> Terminal
-            <DropdownMenuItem onSelect={() => addSplitPane('agent')}>
+              </DropdownMenuItem>
-              <Bot size={14} /> Agent
+              <DropdownMenuItem onSelect={() => addSplitPane('agent')}>
-            </DropdownMenuItem>
+                <Bot size={14} /> Agent
-          </DropdownMenuContent>
+              </DropdownMenuItem>
-        </DropdownMenu>
+            </DropdownMenuContent>
-      </div>
+          </DropdownMenu>
        </div>
      )}
      {/* v1.8: mobile multi-pane SwipeablePaneTab strip removed; the header
          pill (MobileTabSwitcher) is the mobile pane switcher. */}
      <div
-        className="flex-1 grid min-h-0"
+        className={cn('flex-1 min-h-0', isMobile ? 'flex' : 'grid')}
-        style={{
+        style={
-          gridTemplateColumns: `repeat(${panes.length}, minmax(0, 1fr))`,
+          isMobile
-        }}
+            ? undefined
            : { gridTemplateColumns: `repeat(${panes.length}, minmax(0, 1fr))` }
        }
      >
-        {panes.map((pane, idx) => (
+        {panes.map((pane, idx) => {
          const visible = !isMobile || idx === activePaneIdx;
          if (!visible) return null;
          return (
          <div
            key={pane.id}
            className={cn(
              'flex flex-col h-full min-h-0 border-r border-border last:border-r-0 relative',
-              idx === activePaneIdx && 'ring-1 ring-inset ring-ring/20',
+              isMobile ? 'flex-1 w-full' : undefined,
-              dragOverIdx === idx && draggingIdxRef.current !== idx &&
+              !isMobile && idx === activePaneIdx && 'ring-1 ring-inset ring-ring/20',
              !isMobile && dragOverIdx === idx && draggingIdxRef.current !== idx &&
                'before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-primary before:z-10'
            )}
            onClick={() => setActivePaneIdx(idx)}
-            onDragOver={panes.length > 1 ? handlePaneDragOver(idx) : undefined}
+            onDragOver={!isMobile && panes.length > 1 ? handlePaneDragOver(idx) : undefined}
-            onDragLeave={panes.length > 1 ? handlePaneDragLeave : undefined}
+            onDragLeave={!isMobile && panes.length > 1 ? handlePaneDragLeave : undefined}
-            onDrop={panes.length > 1 ? handlePaneDrop(idx) : undefined}
+            onDrop={!isMobile && panes.length > 1 ? handlePaneDrop(idx) : undefined}
          >
            <div
-              draggable={panes.length > 1}
+              draggable={!isMobile && panes.length > 1}
-              onDragStart={panes.length > 1 ? handlePaneDragStart(idx) : undefined}
+              onDragStart={!isMobile && panes.length > 1 ? handlePaneDragStart(idx) : undefined}
-              onDragEnd={panes.length > 1 ? handlePaneDragEnd : undefined}
+              onDragEnd={!isMobile && panes.length > 1 ? handlePaneDragEnd : undefined}
            >
-              <ChatTabBar
+              {/* Hidden on mobile per v1.8: chat-within-pane navigation
-                pane={pane}
+                  is not exposed on small screens; users switch panes via
-                tabs={chatsForPane(pane)}
+                  the header pill instead. */}
-                onSwitchTab={(tabIdx) => switchTab(idx, tabIdx)}
+              {!isMobile && (
-                onRemoveTab={(chatId) => removeTab(idx, chatId)}
+                <ChatTabBar
-                onCloseOthers={(chatId) => closeOtherTabs(idx, chatId)}
+                  pane={pane}
-                onCloseToRight={(chatId) => closeTabsToRight(idx, chatId)}
+                  tabs={chatsForPane(pane)}
-                onCloseAll={() => closeAllTabs(idx)}
+                  onSwitchTab={(tabIdx) => switchTab(idx, tabIdx)}
-                onNewChat={() => void createChat(idx)}
+                  onRemoveTab={(chatId) => removeTab(idx, chatId)}
-                onShowHistory={() => showLandingPage(idx)}
+                  onCloseOthers={(chatId) => closeOtherTabs(idx, chatId)}
-                onRename={renameChat}
+                  onCloseToRight={(chatId) => closeTabsToRight(idx, chatId)}
-                onRemovePane={panes.length > 1 ? () => removePane(idx) : undefined}
+                  onCloseAll={() => closeAllTabs(idx)}
-              />
+                  onNewChat={() => void createChat(idx)}
                  onShowHistory={() => showLandingPage(idx)}
                  onRename={renameChat}
                  onRemovePane={panes.length > 1 ? () => removePane(idx) : undefined}
                />
              )}
            </div>
            <div className="flex-1 min-h-0 overflow-hidden">
              {pane.kind === 'chat' && pane.chatId ? (
-                <ChatPane sessionId={sessionId} chatId={pane.chatId} projectId={projectId} sessionChats={chats} />
+                <ChatPane
                  sessionId={sessionId}
                  chatId={pane.chatId}
                  projectId={projectId}
                  agentId={agentId}
                  onAgentChange={onAgentChange}
                  sessionChats={chats}
                />
              ) : (
                <SessionLandingPage
                  sessionId={sessionId}
@@ -517,7 +188,8 @@ export function Workspace({ sessionId, projectId }: Props) {
              )}
            </div>
          </div>
-        ))}
+          );
        })}
      </div>
    </div>
  );
--- a/apps/web/src/components/panes/ChatPane.tsx
+++ b/apps/web/src/components/panes/ChatPane.tsx
@@ -3,8 +3,10 @@ import { ChevronDown, Square, X } from 'lucide-react';
 import { toast } from 'sonner';
 import { api } from '@/api/client';
 import { useSessionStream } from '@/hooks/useSessionStream';
 import { useChatContextStats } from '@/hooks/useChatContextStats';
 import { MessageList } from '@/components/MessageList';
 import { ChatInput } from '@/components/ChatInput';
 import { ChatContextPopover } from '@/components/ChatContextPopover';
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -16,10 +18,13 @@ interface Props {
  sessionId: string;
  chatId: string;
  projectId: string;
  // Batch 9: optional, threaded down to ChatInput's agent picker.
  agentId?: string | null;
  onAgentChange?: (agentId: string | null) => void | Promise<void>;
  sessionChats?: import('@/api/types').Chat[];
 }
-export function ChatPane({ sessionId, chatId, projectId, sessionChats }: Props) {
+export function ChatPane({ sessionId, chatId, projectId, agentId, onAgentChange, sessionChats }: Props) {
  const stream = useSessionStream(sessionId);
  const lastErrorRef = useRef<string | null>(null);
  const [queue, setQueue] = useState<string[]>([]);
@@ -37,6 +42,7 @@ export function ChatPane({ sessionId, chatId, projectId, sessionChats }: Props)
  const chatMessages = stream.messages.filter((m) => m.chat_id === chatId);
  const streaming = chatMessages.some((m) => m.status === 'streaming');
  const contextStats = useChatContextStats(chatId, chatMessages);
  // Auto-send next queued message when streaming completes
  useEffect(() => {
@@ -117,7 +123,7 @@ export function ChatPane({ sessionId, chatId, projectId, sessionChats }: Props)
                <DropdownMenuTrigger asChild>
                  <button
                    type="button"
-                    className="p-0.5 hover:bg-muted rounded shrink-0"
+                    className="inline-flex items-center justify-center p-0.5 hover:bg-muted rounded shrink-0 max-md:min-h-[44px] max-md:min-w-[44px]"
                    aria-label="Queued message options"
                  >
                    <ChevronDown size={12} />
@@ -135,7 +141,7 @@ export function ChatPane({ sessionId, chatId, projectId, sessionChats }: Props)
              <button
                type="button"
                onClick={() => removeQueued(i)}
-                className="p-0.5 hover:bg-muted rounded shrink-0"
+                className="inline-flex items-center justify-center p-0.5 hover:bg-muted rounded shrink-0 max-md:min-h-[44px] max-md:min-w-[44px]"
                aria-label="Cancel queued message"
              >
                <X size={12} />
@@ -153,7 +159,7 @@ export function ChatPane({ sessionId, chatId, projectId, sessionChats }: Props)
          <button
            type="button"
            onClick={() => void handleStop()}
-            className="flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border hover:bg-muted text-muted-foreground hover:text-foreground"
+            className="flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border hover:bg-muted text-muted-foreground hover:text-foreground max-md:min-h-[44px] max-md:px-5"
          >
            <Square size={10} className="fill-current" />
            Stop generating
@@ -162,7 +168,17 @@ export function ChatPane({ sessionId, chatId, projectId, sessionChats }: Props)
        </div>
      )}
-      <ChatInput disabled={false} projectId={projectId} onSend={handleSend} onForceSend={streaming ? handleForceSend : undefined} />
+      <div className="relative">
        <ChatContextPopover stats={contextStats} />
        <ChatInput
          disabled={false}
          projectId={projectId}
          agentId={agentId}
          onAgentChange={onAgentChange}
          onSend={handleSend}
          onForceSend={streaming ? handleForceSend : undefined}
        />
      </div>
    </div>
  );
 }
--- a/apps/web/src/components/panes/FileBrowserPane.tsx
+++ b/apps/web/src/components/panes/FileBrowserPane.tsx
@@ -1,865 +0,0 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { KeyboardEvent } from 'react';
 import { Check, ChevronRight, ChevronDown, Copy, FileText, Folder, X } from 'lucide-react';
 import { codeToHtml } from 'shiki';
 import { api, ApiError } from '@/api/client';
 import type {
  FileBrowserPaneState,
  FileEntry,
  Pane,
  ViewFileResult,
 } from '@/api/types';
 import { inferLanguage } from '@/lib/attachments';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { cn } from '@/lib/utils';
 interface Props {
  pane: Pane & { kind: 'file_browser' };
  projectId: string;
  onStateChange: (state: FileBrowserPaneState) => void;
 }
 const SHIKI_THEME = 'github-dark';
 function splitShikiLines(html: string): string[] {
  const match = html.match(/<code[^>]*>([\s\S]*)<\/code>/);
  if (!match) return [];
  const inner = match[1]!;
  const lines = inner.split(/(?=<span class="line">)/);
  return lines.filter(l => l.trim().length > 0);
 }
 interface FileViewerProps {
  code: string;
  lang: string | null;
  selectedLines: Set<number>;
  onLineClick: (lineNo: number, shiftKey: boolean) => void;
 }
 function FileViewer({ code, lang, selectedLines, onLineClick }: FileViewerProps) {
  const [copied, setCopied] = useState(false);
  const [lineHtmls, setLineHtmls] = useState<string[] | null>(null);
  useEffect(() => {
    let cancelled = false;
    if (!lang) {
      setLineHtmls(null);
      return;
    }
    (async () => {
      try {
        const result = await codeToHtml(code, { lang, theme: SHIKI_THEME });
        if (cancelled) return;
        const lines = splitShikiLines(result);
        setLineHtmls(lines.length > 0 ? lines : null);
      } catch (err) {
        console.warn('shiki failed', err);
        if (!cancelled) setLineHtmls(null);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [code, lang]);
  async function copy() {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 1200);
    } catch {
      /* ignore */
    }
  }
  const plainLines = code.split('\n');
  const totalLines = lineHtmls ? lineHtmls.length : plainLines.length;
  return (
    <div className="text-sm font-mono">
      <div className="flex items-center justify-between px-2 py-1 border-b text-xs text-muted-foreground">
        <span className="font-mono">{lang || 'code'}</span>
        <button
          type="button"
          onClick={() => void copy()}
          className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-muted text-foreground"
          aria-label="Copy code"
        >
          {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
          <span>{copied ? 'Copied' : 'Copy'}</span>
        </button>
      </div>
      <div className="overflow-x-auto">
        {Array.from({ length: totalLines }, (_, i) => {
          const lineNo = i + 1;
          const isSelected = selectedLines.has(lineNo);
          return (
            <div
              key={lineNo}
              className={cn(
                'flex',
                isSelected && 'bg-blue-500/10'
              )}
            >
              <button
                type="button"
                className="shrink-0 w-[3ch] text-right pr-2 text-xs text-muted-foreground select-none cursor-pointer hover:text-foreground"
                style={{ fontVariantNumeric: 'tabular-nums' }}
                onClick={(e) => onLineClick(lineNo, e.shiftKey)}
              >
                {lineNo}
              </button>
              {lineHtmls ? (
                <div
                  className="flex-1 min-w-0 text-xs leading-relaxed [&>.line]:!bg-transparent"
                  // eslint-disable-next-line react/no-danger -- Shiki generates sanitized HTML spans, not user content
                  dangerouslySetInnerHTML={{ __html: lineHtmls[i] ?? '' }}
                />
              ) : (
                <span className="flex-1 min-w-0 text-xs leading-relaxed whitespace-pre">
                  {plainLines[i] ?? ''}
                </span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
 }
 function basename(path: string): string {
  if (!path) return '';
  const parts = path.split('/');
  return parts[parts.length - 1] ?? path;
 }
 function joinPath(parent: string, name: string): string {
  if (!parent || parent === '.' || parent === '') return name;
  return `${parent}/${name}`;
 }
 interface TreeNodeProps {
  parentPath: string; // '' for root children
  entries: FileEntry[];
  cache: Map<string, FileEntry[]>;
  expanded: Set<string>;
  openFile: string | null;
  highlightedPath: string | null;
  depth: number;
  onToggleDir: (dirPath: string) => void;
  onSelectFile: (path: string) => void;
  setHighlightedPath: (p: string) => void;
 }
 function TreeNode({
  parentPath,
  entries,
  cache,
  expanded,
  openFile,
  highlightedPath,
  depth,
  onToggleDir,
  onSelectFile,
  setHighlightedPath,
 }: TreeNodeProps) {
  // Sort: dirs first, then files; alphabetical within each.
  const sorted = useMemo(() => {
    const copy = [...entries];
    copy.sort((a, b) => {
      if (a.kind !== b.kind) return a.kind === 'dir' ? -1 : 1;
      return a.name.localeCompare(b.name);
    });
    return copy;
  }, [entries]);
  return (
    <ul className="list-none">
      {sorted.map((entry) => {
        const fullPath = joinPath(parentPath, entry.name);
        const isExpanded = entry.kind === 'dir' && expanded.has(fullPath);
        const isActive = entry.kind === 'file' && openFile === fullPath;
        const isHighlight = highlightedPath === fullPath;
        return (
          <li key={fullPath}>
            <div
              data-path={fullPath}
              data-kind={entry.kind}
              className={cn(
                'flex items-center gap-1 px-1 py-0.5 text-xs cursor-default rounded hover:bg-muted/60',
                isActive && 'bg-muted',
                isHighlight && 'ring-1 ring-ring/40'
              )}
              style={{ paddingLeft: 4 + depth * 12 }}
              onClick={() => {
                setHighlightedPath(fullPath);
                if (entry.kind === 'dir') {
                  onToggleDir(fullPath);
                } else {
                  onSelectFile(fullPath);
                }
              }}
            >
              {entry.kind === 'dir' ? (
                <button
                  type="button"
                  aria-label={isExpanded ? 'Collapse' : 'Expand'}
                  className="p-0.5 hover:bg-muted rounded shrink-0"
                  onClick={(e) => {
                    e.stopPropagation();
                    setHighlightedPath(fullPath);
                    onToggleDir(fullPath);
                  }}
                >
                  {isExpanded ? (
                    <ChevronDown size={10} />
                  ) : (
                    <ChevronRight size={10} />
                  )}
                </button>
              ) : (
                <span className="w-[16px] shrink-0" />
              )}
              {entry.kind === 'dir' ? (
                <Folder size={12} className="text-muted-foreground shrink-0" />
              ) : (
                <FileText size={12} className="text-muted-foreground shrink-0" />
              )}
              <span className="truncate">{entry.name}</span>
            </div>
            {entry.kind === 'dir' && isExpanded && cache.has(fullPath) && (
              <TreeNode
                parentPath={fullPath}
                entries={cache.get(fullPath) ?? []}
                cache={cache}
                expanded={expanded}
                openFile={openFile}
                highlightedPath={highlightedPath}
                depth={depth + 1}
                onToggleDir={onToggleDir}
                onSelectFile={onSelectFile}
                setHighlightedPath={setHighlightedPath}
              />
            )}
          </li>
        );
      })}
    </ul>
  );
 }
 export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
  const openFile = pane.state.open_file ?? null;
  const filter = pane.state.filter ?? '';
  const expandedDirs = useMemo(
    () => pane.state.expanded_dirs ?? [],
    [pane.state.expanded_dirs]
  );
  // Local filter (debounced 100ms before pushing to onStateChange)
  const [filterDraft, setFilterDraft] = useState(filter);
  const filterDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  // Track previous external filter so we can sync local draft when the
  // canonical state changes from outside (e.g. server snapshot, other tab).
  const lastExternalFilter = useRef(filter);
  useEffect(() => {
    if (filter !== lastExternalFilter.current) {
      lastExternalFilter.current = filter;
      setFilterDraft(filter);
    }
  }, [filter]);
  function onFilterInput(value: string) {
    setFilterDraft(value);
    if (filterDebounceRef.current !== null) {
      clearTimeout(filterDebounceRef.current);
    }
    filterDebounceRef.current = setTimeout(() => {
      filterDebounceRef.current = null;
      lastExternalFilter.current = value;
      onStateChange({
        ...pane.state,
        filter: value,
        open_file: openFile,
        expanded_dirs: expandedDirs,
      });
    }, 100);
  }
  useEffect(() => {
    return () => {
      if (filterDebounceRef.current !== null) {
        clearTimeout(filterDebounceRef.current);
      }
    };
  }, []);
  // Full file list fetched once on mount for filter mode (covers unexpanded dirs)
  const [fullFileList, setFullFileList] = useState<string[] | null>(null);
  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const result = await api.projects.files(projectId);
        if (!cancelled) setFullFileList(result.files);
      } catch {
        // Silently ignore; filter will fall back to cache-based list
      }
    })();
    return () => {
      cancelled = true;
    };
  // Intentionally run once per mount (projectId is stable per pane)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [projectId]);
  // Directory cache: dirPath -> entries
  const [cache, setCache] = useState<Map<string, FileEntry[]>>(new Map());
  const [loadingDirs, setLoadingDirs] = useState<Set<string>>(new Set());
  const [dirErrors, setDirErrors] = useState<Map<string, string>>(new Map());
  const loadDir = useCallback(
    async (dirPath: string) => {
      // dirPath '' is root; server expects '.'
      const apiPath = dirPath === '' ? '.' : dirPath;
      setLoadingDirs((prev) => {
        if (prev.has(dirPath)) return prev;
        const next = new Set(prev);
        next.add(dirPath);
        return next;
      });
      try {
        const result = await api.projects.listDir(projectId, apiPath);
        setCache((prev) => {
          const next = new Map(prev);
          next.set(dirPath, result.entries);
          return next;
        });
        setDirErrors((prev) => {
          if (!prev.has(dirPath)) return prev;
          const next = new Map(prev);
          next.delete(dirPath);
          return next;
        });
      } catch (err) {
        const msg = err instanceof Error ? err.message : 'failed to list directory';
        setDirErrors((prev) => {
          const next = new Map(prev);
          next.set(dirPath, msg);
          return next;
        });
      } finally {
        setLoadingDirs((prev) => {
          if (!prev.has(dirPath)) return prev;
          const next = new Set(prev);
          next.delete(dirPath);
          return next;
        });
      }
    },
    [projectId]
  );
  // Load root on mount + any expanded dirs from server state.
  useEffect(() => {
    if (!cache.has('')) {
      void loadDir('');
    }
    for (const dir of expandedDirs) {
      if (!cache.has(dir)) {
        void loadDir(dir);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [projectId]);
  // When expandedDirs grows (e.g. user expands), ensure new dir is loaded.
  useEffect(() => {
    for (const dir of expandedDirs) {
      if (!cache.has(dir) && !loadingDirs.has(dir)) {
        void loadDir(dir);
      }
    }
  }, [expandedDirs, cache, loadingDirs, loadDir]);
  const expandedSet = useMemo(() => new Set(expandedDirs), [expandedDirs]);
  function toggleDir(dirPath: string) {
    let nextDirs: string[];
    if (expandedSet.has(dirPath)) {
      nextDirs = expandedDirs.filter((d) => d !== dirPath);
    } else {
      nextDirs = [...expandedDirs, dirPath];
    }
    onStateChange({
      ...pane.state,
      open_file: openFile,
      filter: filterDraft,
      expanded_dirs: nextDirs,
    });
  }
  function selectFile(path: string) {
    onStateChange({
      ...pane.state,
      open_file: path,
      filter: filterDraft,
      expanded_dirs: expandedDirs,
    });
  }
  function closeOpenFile() {
    onStateChange({
      ...pane.state,
      open_file: null,
      filter: filterDraft,
      expanded_dirs: expandedDirs,
    });
  }
  // Build a flat list of all entries reachable through the loaded cache,
  // for filter results and keyboard navigation.
  interface FlatEntry {
    path: string;
    name: string;
    kind: 'file' | 'dir';
  }
  const flattenedVisible = useMemo<FlatEntry[]>(() => {
    const result: FlatEntry[] = [];
    function walk(dirPath: string) {
      const entries = cache.get(dirPath);
      if (!entries) return;
      const sorted = [...entries].sort((a, b) => {
        if (a.kind !== b.kind) return a.kind === 'dir' ? -1 : 1;
        return a.name.localeCompare(b.name);
      });
      for (const e of sorted) {
        const full = joinPath(dirPath, e.name);
        result.push({ path: full, name: e.name, kind: e.kind });
        if (e.kind === 'dir' && expandedSet.has(full)) {
          walk(full);
        }
      }
    }
    walk('');
    return result;
  }, [cache, expandedSet]);
  const flattenedAll = useMemo<FlatEntry[]>(() => {
    const result: FlatEntry[] = [];
    function walk(dirPath: string) {
      const entries = cache.get(dirPath);
      if (!entries) return;
      for (const e of entries) {
        const full = joinPath(dirPath, e.name);
        result.push({ path: full, name: e.name, kind: e.kind });
        if (e.kind === 'dir') walk(full);
      }
    }
    walk('');
    return result;
  }, [cache]);
  const trimmedFilter = filterDraft.trim();
  const filterActive = trimmedFilter.length > 0;
  interface FilterResult {
    path: string;
    name: string;
  }
  const filterResults = useMemo<FilterResult[]>(() => {
    if (!filterActive) return [];
    const needle = trimmedFilter.toLowerCase();
    if (fullFileList !== null) {
      // Use complete file list from API; rank filename matches above path-only matches
      const filenameMatches: string[] = [];
      const pathOnlyMatches: string[] = [];
      for (const p of fullFileList) {
        const lp = p.toLowerCase();
        if (!lp.includes(needle)) continue;
        const bn = basename(p).toLowerCase();
        if (bn.includes(needle)) {
          filenameMatches.push(p);
        } else {
          pathOnlyMatches.push(p);
        }
      }
      filenameMatches.sort((a, b) => a.localeCompare(b));
      pathOnlyMatches.sort((a, b) => a.localeCompare(b));
      return [...filenameMatches, ...pathOnlyMatches]
        .slice(0, 50)
        .map((p) => ({ path: p, name: basename(p) }));
    }
    // Fallback: use cache-based flat list (only loaded directories, files only)
    return flattenedAll
      .filter((e) => e.kind === 'file' && e.path.toLowerCase().includes(needle))
      .slice(0, 50)
      .map((e) => ({ path: e.path, name: e.name }));
  }, [filterActive, trimmedFilter, fullFileList, flattenedAll]);
  // Keyboard navigation
  const [highlightedPath, setHighlightedPath] = useState<string | null>(null);
  const treeRef = useRef<HTMLDivElement | null>(null);
  // Reset highlight if it falls out of the current list (e.g. when filter
  // changes or dirs collapse).
  useEffect(() => {
    if (!highlightedPath) return;
    const list = filterActive ? filterResults : flattenedVisible;
    if (!list.some((e) => e.path === highlightedPath)) {
      setHighlightedPath(null);
    }
  }, [highlightedPath, filterActive, filterResults, flattenedVisible]);
  function onTreeKeyDown(e: KeyboardEvent<HTMLDivElement>) {
    if (filterActive) {
      if (filterResults.length === 0) return;
      const idx = highlightedPath
        ? filterResults.findIndex((entry) => entry.path === highlightedPath)
        : -1;
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        const next = idx < 0 ? 0 : Math.min(filterResults.length - 1, idx + 1);
        const target = filterResults[next];
        if (target) setHighlightedPath(target.path);
        return;
      }
      if (e.key === 'ArrowUp') {
        e.preventDefault();
        const next = idx <= 0 ? 0 : idx - 1;
        const target = filterResults[next];
        if (target) setHighlightedPath(target.path);
        return;
      }
      if (e.key === 'Enter') {
        if (idx < 0) return;
        const target = filterResults[idx];
        if (!target) return;
        e.preventDefault();
        // Filter results are always files (API returns only files)
        selectFile(target.path);
      }
      return;
    }
    // Tree mode: use flattenedVisible which has kind info
    const list = flattenedVisible;
    if (list.length === 0) return;
    const idx = highlightedPath
      ? list.findIndex((entry) => entry.path === highlightedPath)
      : -1;
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      const next = idx < 0 ? 0 : Math.min(list.length - 1, idx + 1);
      const target = list[next];
      if (target) setHighlightedPath(target.path);
      return;
    }
    if (e.key === 'ArrowUp') {
      e.preventDefault();
      const next = idx <= 0 ? 0 : idx - 1;
      const target = list[next];
      if (target) setHighlightedPath(target.path);
      return;
    }
    if (e.key === 'Enter') {
      if (idx < 0) return;
      const target = list[idx];
      if (!target) return;
      e.preventDefault();
      if (target.kind === 'dir') {
        toggleDir(target.path);
      } else {
        selectFile(target.path);
      }
    }
  }
  // Line selection state
  const [selectedLines, setSelectedLines] = useState<Set<number>>(new Set());
  const [selectionAnchor, setSelectionAnchor] = useState<number | null>(null);
  function handleLineClick(lineNo: number, shiftKey: boolean) {
    if (shiftKey && selectionAnchor !== null) {
      const start = Math.min(selectionAnchor, lineNo);
      const end = Math.max(selectionAnchor, lineNo);
      const range = new Set<number>();
      for (let i = start; i <= end; i++) range.add(i);
      setSelectedLines(range);
    } else {
      setSelectedLines(prev => {
        const next = new Set(prev);
        if (next.has(lineNo)) {
          next.delete(lineNo);
        } else {
          next.add(lineNo);
        }
        return next;
      });
      setSelectionAnchor(lineNo);
    }
  }
  // Viewer state
  const [viewer, setViewer] = useState<{
    path: string;
    state: 'loading' | 'ready' | 'error';
    result?: ViewFileResult;
    error?: string;
  } | null>(null);
  useEffect(() => {
    if (!openFile) {
      setViewer(null);
      return;
    }
    let cancelled = false;
    setViewer({ path: openFile, state: 'loading' });
    (async () => {
      try {
        const result = await api.projects.viewFile(projectId, openFile);
        if (cancelled) return;
        setViewer({ path: openFile, state: 'ready', result });
      } catch (err) {
        if (cancelled) return;
        let message: string;
        if (err instanceof ApiError) {
          const apiMsg =
            typeof err.body === 'object' &&
            err.body !== null &&
            'error' in err.body
              ? String((err.body as { error: unknown }).error)
              : err.message;
          if (err.status === 404) {
            message = 'File not found';
          } else if (apiMsg.toLowerCase().includes('too large')) {
            message = 'File too large to view';
          } else if (
            apiMsg.toLowerCase().includes('outside') ||
            apiMsg.toLowerCase().includes('not a file') ||
            apiMsg.toLowerCase().includes('path')
          ) {
            message = 'Cannot view files outside project';
          } else {
            message = apiMsg;
          }
        } else if (err instanceof Error) {
          message = err.message;
        } else {
          message = 'Failed to load file';
        }
        setViewer({ path: openFile, state: 'error', error: message });
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [openFile, projectId]);
  // Clear line selection when open file changes
  useEffect(() => {
    setSelectedLines(new Set());
    setSelectionAnchor(null);
  }, [openFile]);
  // Compute selection range for the floating action bar (loop avoids call-stack limit on spread)
  let selectionMin = 0;
  let selectionMax = 0;
  if (selectedLines.size > 0) {
    for (const n of selectedLines) {
      if (selectionMin === 0 || n < selectionMin) selectionMin = n;
      if (n > selectionMax) selectionMax = n;
    }
  }
  function handleAttachLines() {
    if (!openFile || !viewer?.result || selectedLines.size === 0) return;
    const min = selectionMin;
    const max = selectionMax;
    const selectedContent = viewer.result.content
      .split('\n')
      .slice(min - 1, max)
      .join('\n');
    sessionEvents.emit({
      type: 'attach_chat_file',
      attachment: {
        kind: 'lines',
        filename: openFile,
        language: inferLanguage(openFile) ?? null,
        content: selectedContent,
        range: [min, max],
        source: 'line-select',
      },
    });
    setSelectedLines(new Set());
    setSelectionAnchor(null);
  }
  // Root errors / loading
  const rootEntries = cache.get('');
  const rootLoading = loadingDirs.has('') && !rootEntries;
  const rootError = dirErrors.get('');
  return (
    <div className="flex flex-col h-full min-h-0">
      <div className="px-2 py-1.5 border-b border-border bg-muted/20">
        <input
          type="text"
          value={filterDraft}
          onChange={(e) => onFilterInput(e.target.value)}
          placeholder="Filter files..."
          className="w-full px-2 py-1 text-xs bg-background border border-border rounded outline-none focus:border-ring"
          aria-label="Filter files"
        />
      </div>
      <div className="flex-1 min-h-0 grid grid-cols-[minmax(0,260px)_1fr]">
        <div
          ref={treeRef}
          tabIndex={0}
          onKeyDown={onTreeKeyDown}
          className="overflow-y-auto border-r border-border outline-none focus:ring-1 focus:ring-inset focus:ring-ring/40"
          role="tree"
          aria-label="Project files"
        >
          {rootLoading && (
            <div className="text-xs text-muted-foreground px-2 py-1.5">
              Loading...
            </div>
          )}
          {rootError && (
            <div className="text-xs text-destructive px-2 py-1.5">
              {rootError}
            </div>
          )}
          {!rootLoading && !rootError && filterActive && (
            <ul className="list-none">
              {filterResults.length === 0 ? (
                <li className="text-xs text-muted-foreground px-2 py-1.5">
                  No matches
                </li>
              ) : (
                filterResults.map((entry) => {
                  const isActive = openFile === entry.path;
                  const isHighlight = highlightedPath === entry.path;
                  return (
                    <li key={entry.path}>
                      <div
                        className={cn(
                          'flex items-center gap-1 px-2 py-0.5 text-xs cursor-default rounded hover:bg-muted/60',
                          isActive && 'bg-muted',
                          isHighlight && 'ring-1 ring-ring/40'
                        )}
                        onClick={() => {
                          setHighlightedPath(entry.path);
                          selectFile(entry.path);
                        }}
                      >
                        <FileText size={12} className="text-muted-foreground shrink-0" />
                        <span className="truncate">
                          <span className="font-bold">{entry.name}</span>
                          <span className="text-muted-foreground ml-1">{entry.path}</span>
                        </span>
                      </div>
                    </li>
                  );
                })
              )}
            </ul>
          )}
          {!rootLoading && !rootError && !filterActive && rootEntries && (
            <TreeNode
              parentPath=""
              entries={rootEntries}
              cache={cache}
              expanded={expandedSet}
              openFile={openFile}
              highlightedPath={highlightedPath}
              depth={0}
              onToggleDir={toggleDir}
              onSelectFile={selectFile}
              setHighlightedPath={setHighlightedPath}
            />
          )}
        </div>
        <div className="flex flex-col min-h-0">
          {!openFile && (
            <div className="flex-1 flex items-center justify-center text-xs text-muted-foreground">
              Select a file to view
            </div>
          )}
          {openFile && (
            <>
              <div className="flex items-center justify-between px-2 py-1 border-b border-border bg-muted/20 shrink-0">
                <span
                  className="text-xs font-mono truncate"
                  title={openFile}
                >
                  {basename(openFile)}
                </span>
                <button
                  type="button"
                  onClick={closeOpenFile}
                  className="p-0.5 hover:bg-muted rounded shrink-0"
                  aria-label="Close file"
                >
                  <X size={12} />
                </button>
              </div>
              <div className="flex-1 min-h-0 overflow-y-auto relative">
                {viewer?.state === 'loading' && (
                  <div className="text-xs text-muted-foreground px-2 py-1.5">
                    Loading...
                  </div>
                )}
                {viewer?.state === 'error' && (
                  <div className="text-xs text-destructive px-2 py-1.5">
                    {viewer.error}
                  </div>
                )}
                {viewer?.state === 'ready' && viewer.result && (
                  <div className="p-2">
                    {selectedLines.size > 0 && (
                      <div className="sticky top-0 z-10 bg-muted border-b border-border flex items-center justify-between px-2 py-1 mb-2 rounded-t">
                        <span className="text-xs text-muted-foreground">
                          {selectedLines.size === 1
                            ? `Attach line ${selectionMin} to chat`
                            : `Attach lines ${selectionMin}–${selectionMax} to chat`}
                        </span>
                        <button
                          type="button"
                          className="text-xs font-medium text-primary hover:underline"
                          onClick={handleAttachLines}
                        >
                          Attach
                        </button>
                      </div>
                    )}
                    {viewer.result.truncated && (
                      <div className="text-[11px] text-muted-foreground mb-1 px-2 py-1 rounded bg-muted/40 border border-border">
                        Showing first {viewer.result.bytes_returned} bytes; file is {viewer.result.total_bytes} bytes total.
                      </div>
                    )}
                    <FileViewer
                      code={viewer.result.content}
                      lang={inferLanguage(openFile)}
                      selectedLines={selectedLines}
                      onLineClick={handleLineClick}
                    />
                  </div>
                )}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
 }
--- a/apps/web/src/components/ui/card.tsx
+++ b/apps/web/src/components/ui/card.tsx
@@ -0,0 +1,103 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 function Card({
  className,
  size = "default",
  ...props
 }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
  return (
    <div
      data-slot="card"
      data-size={size}
      className={cn(
        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
        className
      )}
      {...props}
    />
  )
 }
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
        className
      )}
      {...props}
    />
  )
 }
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn(
        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
        className
      )}
      {...props}
    />
  )
 }
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
 }
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  )
 }
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
      {...props}
    />
  )
 }
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn(
        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
        className
      )}
      {...props}
    />
  )
 }
 export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
 }
--- a/apps/web/src/components/ui/radio-group.tsx
+++ b/apps/web/src/components/ui/radio-group.tsx
@@ -0,0 +1,42 @@
 import * as React from "react"
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 function RadioGroup({
  className,
  ...props
 }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn("grid w-full gap-2", className)}
      {...props}
    />
  )
 }
 function RadioGroupItem({
  className,
  ...props
 }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radio-group-indicator"
        className="flex size-4 items-center justify-center"
      >
        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
 }
 export { RadioGroup, RadioGroupItem }
--- a/apps/web/src/hooks/sessionEvents.ts
+++ b/apps/web/src/hooks/sessionEvents.ts
@@ -2,7 +2,7 @@
 // across hooks (e.g. AI rename arriving via WS in the session view needs to
 // also refresh the sidebar's session list).
-import type { Chat, Project, Session } from '@/api/types';
+import type { Chat, ErrorReason, Project, Session } from '@/api/types';
 import type { Attachment } from '@/lib/attachments';
 export interface SessionRenamedEvent {
@@ -115,6 +115,19 @@ export interface ProjectUpdatedEvent {
  name: string;
 }
 // v1.8 mobile-tabs: broadcast on user channel from inference.ts so any device
 // subscribed sees a chat working/idle/error. Frontend stores per-chat; panes
 // derive their dot from pane.activeChatId.
 // v1.8.2: optional `reason` carries a machine-readable code when status is
 // 'error'. UI prefers reason for inline error rendering.
 export interface ChatStatusEvent {
  type: 'chat_status';
  chat_id: string;
  status: 'working' | 'idle' | 'error';
  at: string;
  reason?: ErrorReason;
 }
 export type SessionEvent =
  | SessionRenamedEvent
  | ProjectCreatedEvent
@@ -134,7 +147,8 @@ export type SessionEvent =
  | ChatDeletedEvent
  | ProjectArchivedEvent
  | ProjectUnarchivedEvent
-  | ProjectUpdatedEvent;
+  | ProjectUpdatedEvent
  | ChatStatusEvent;
 type Listener = (event: SessionEvent) => void;
 const listeners = new Set<Listener>();
--- a/apps/web/src/hooks/useChatContextStats.ts
+++ b/apps/web/src/hooks/useChatContextStats.ts
@@ -0,0 +1,37 @@
 import { useMemo } from 'react';
 import type { Message } from '@/api/types';
 export interface ChatContextStats {
  used: number;
  max: number;
  percent: number;
 }
 /**
 * Returns the latest context-window usage for the given chat, derived from the
 * assistant message (with both ctx_used and ctx_max populated) having the most
 * recent created_at. Returns null when no such message exists.
 *
 * Re-evaluates whenever the `messages` reference or `chatId` changes, which
 * matches the cadence of streaming updates from `useSessionStream`.
 */
 export function useChatContextStats(
  chatId: string,
  messages: Message[],
 ): ChatContextStats | null {
  return useMemo(() => {
    let latest: Message | null = null;
    for (const m of messages) {
      if (m.chat_id !== chatId) continue;
      if (m.role !== 'assistant') continue;
      if (m.ctx_used == null || m.ctx_max == null) continue;
      if (!latest || m.created_at > latest.created_at) latest = m;
    }
    if (!latest || latest.ctx_used == null || latest.ctx_max == null) return null;
    const used = latest.ctx_used;
    const max = latest.ctx_max;
    if (max <= 0) return null;
    const percent = Math.round((used / max) * 100);
    return { used, max, percent };
  }, [chatId, messages]);
 }
--- a/apps/web/src/hooks/useChatStatus.ts
+++ b/apps/web/src/hooks/useChatStatus.ts
@@ -0,0 +1,71 @@
 import { useEffect, useState } from 'react';
 import { sessionEvents } from './sessionEvents';
 export type RawStatus = 'working' | 'idle' | 'error';
 export type DerivedStatus = 'working' | 'idle_warm' | 'idle_cold' | 'error';
 // Window during which an idle dot stays green; after this, it fades to gray.
 const WARM_WINDOW_MS = 30_000;
 const TICK_MS = 5_000;
 interface Entry {
  status: RawStatus;
  at: string;
 }
 // Module-scope shared state so every StatusDot in the app shares one map
 // (mirrors useSidebar's singleton pattern). The map is ephemeral — cleared on
 // page reload; WS reconnect repopulates as new frames arrive.
 const statuses = new Map<string, Entry>();
 const subscribers = new Set<() => void>();
 function notify(): void {
  for (const s of subscribers) {
    try { s(); } catch { /* swallow */ }
  }
 }
 // Guard against duplicate listeners during Vite HMR.
 const G = globalThis as Record<string, unknown>;
 if (!G.__boocode_chat_status_subscribed) {
  G.__boocode_chat_status_subscribed = true;
  sessionEvents.subscribe((ev) => {
    if (ev.type !== 'chat_status') return;
    statuses.set(ev.chat_id, { status: ev.status, at: ev.at });
    notify();
  });
  // Single shared ticker: re-notify so any green dot whose 30s window just
  // expired re-renders as gray. We only notify if there's something warm —
  // avoids waking sleeping components for nothing.
  setInterval(() => {
    const now = Date.now();
    for (const entry of statuses.values()) {
      if (entry.status === 'idle') {
        const age = now - new Date(entry.at).getTime();
        if (age < WARM_WINDOW_MS + TICK_MS) {
          notify();
          return;
        }
      }
    }
  }, TICK_MS);
 }
 function derive(entry: Entry | undefined): DerivedStatus {
  if (!entry) return 'idle_cold';
  if (entry.status === 'working') return 'working';
  if (entry.status === 'error') return 'error';
  const age = Date.now() - new Date(entry.at).getTime();
  return age < WARM_WINDOW_MS ? 'idle_warm' : 'idle_cold';
 }
 export function useChatStatus(chatId: string | null | undefined): DerivedStatus {
  const [, force] = useState({});
  useEffect(() => {
    const sub = () => force({});
    subscribers.add(sub);
    return () => { subscribers.delete(sub); };
  }, []);
  if (!chatId) return 'idle_cold';
  return derive(statuses.get(chatId));
 }
--- a/apps/web/src/hooks/useLongPress.ts
+++ b/apps/web/src/hooks/useLongPress.ts
@@ -0,0 +1,75 @@
 import { useCallback, useRef } from 'react';
 import type { TouchEvent } from 'react';
 interface LongPressHandlers {
  onTouchStart: (e: TouchEvent) => void;
  onTouchMove: (e: TouchEvent) => void;
  onTouchEnd: (e: TouchEvent) => void;
  onTouchCancel: (e: TouchEvent) => void;
 }
 interface Options {
  ms?: number;
  // Suppress the synthetic click that follows touchend when long-press fired.
  suppressClickOnFire?: boolean;
 }
 // Hand-rolled long-press detector. Starts a timer on touchstart; cancels on
 // touchmove or early touchend; fires the callback on timer expiry. Caller is
 // expected to suppress text-selection callout via CSS (-webkit-touch-callout).
 export function useLongPress(
  callback: (touch: { clientX: number; clientY: number; target: EventTarget | null }) => void,
  { ms = 500, suppressClickOnFire = true }: Options = {},
 ): LongPressHandlers {
  const timerRef = useRef<number | null>(null);
  const firedRef = useRef(false);
  const clear = useCallback(() => {
    if (timerRef.current !== null) {
      window.clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  }, []);
  const onTouchStart = useCallback(
    (e: TouchEvent) => {
      firedRef.current = false;
      const touch = e.touches[0];
      if (!touch) return;
      const x = touch.clientX;
      const y = touch.clientY;
      const target = e.target;
      clear();
      timerRef.current = window.setTimeout(() => {
        firedRef.current = true;
        callback({ clientX: x, clientY: y, target });
      }, ms);
    },
    [callback, ms, clear],
  );
  const onTouchMove = useCallback(() => {
    clear();
  }, [clear]);
  const onTouchEnd = useCallback(
    (e: TouchEvent) => {
      clear();
      if (firedRef.current && suppressClickOnFire) {
        // Block the synthetic click that follows touchend; the long-press
        // already handled the gesture.
        e.preventDefault();
      }
    },
    [clear, suppressClickOnFire],
  );
  const onTouchCancel = useCallback(
    (_e: TouchEvent) => {
      clear();
    },
    [clear],
  );
  return { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel };
 }
--- a/apps/web/src/hooks/useProjectGit.ts
+++ b/apps/web/src/hooks/useProjectGit.ts
@@ -0,0 +1,41 @@
 import { useEffect, useState } from 'react';
 import { api } from '@/api/client';
 import type { GitMeta } from '@/api/types';
 const POLL_INTERVAL_MS = 30_000;
 // Live-ish git meta for the project header indicator. Backed by the server's
 // 30s cache, so a 30s client poll plus the cache TTL bounds total staleness
 // to ~60s in the worst case. Returns null while the first fetch is in flight
 // or if the request failed.
 export function useProjectGit(projectId: string | null | undefined): GitMeta | null {
  const [meta, setMeta] = useState<GitMeta | null>(null);
  useEffect(() => {
    if (!projectId) {
      setMeta(null);
      return;
    }
    let cancelled = false;
    const fetchOnce = () => {
      api.projects
        .git(projectId)
        .then((m) => {
          if (!cancelled) setMeta(m);
        })
        .catch(() => {
          if (!cancelled) setMeta(null);
        });
    };
    fetchOnce();
    const t = setInterval(fetchOnce, POLL_INTERVAL_MS);
    return () => {
      cancelled = true;
      clearInterval(t);
    };
  }, [projectId]);
  return meta;
 }
--- a/apps/web/src/hooks/usePullToRefresh.ts
+++ b/apps/web/src/hooks/usePullToRefresh.ts
@@ -0,0 +1,77 @@
 import { useCallback, useRef, useState } from 'react';
 import type { TouchEvent } from 'react';
 interface Options {
  threshold?: number;
  enabled?: boolean;
  maxPull?: number;
 }
 interface Handlers {
  onTouchStart: (e: TouchEvent<HTMLElement>) => void;
  onTouchMove: (e: TouchEvent<HTMLElement>) => void;
  onTouchEnd: () => void;
  pullDist: number;
  refreshing: boolean;
 }
 // Hand-rolled pull-to-refresh: records the initial Y on touchstart only if
 // the target is scrolled to the top, then tracks downward pull on touchmove.
 // On touchend, fires onRefresh if the pull exceeded the threshold.
 export function usePullToRefresh(
  onRefresh: () => void | Promise<void>,
  { threshold = 80, enabled = true, maxPull = 120 }: Options = {},
 ): Handlers {
  const [pullDist, setPullDist] = useState(0);
  const [refreshing, setRefreshing] = useState(false);
  const startYRef = useRef<number | null>(null);
  const onTouchStart = useCallback(
    (e: TouchEvent<HTMLElement>) => {
      if (!enabled || refreshing) return;
      const target = e.currentTarget as HTMLElement;
      if (target.scrollTop > 0) return;
      const t = e.touches[0];
      if (!t) return;
      startYRef.current = t.clientY;
    },
    [enabled, refreshing],
  );
  const onTouchMove = useCallback(
    (e: TouchEvent<HTMLElement>) => {
      if (!enabled || refreshing || startYRef.current === null) return;
      const t = e.touches[0];
      if (!t) return;
      const delta = t.clientY - startYRef.current;
      if (delta > 0) {
        setPullDist(Math.min(delta, maxPull));
      } else {
        setPullDist(0);
      }
    },
    [enabled, refreshing, maxPull],
  );
  const onTouchEnd = useCallback(() => {
    if (!enabled || refreshing) {
      startYRef.current = null;
      setPullDist(0);
      return;
    }
    const fired = pullDist >= threshold && startYRef.current !== null;
    startYRef.current = null;
    setPullDist(0);
    if (fired) {
      setRefreshing(true);
      Promise.resolve(onRefresh())
        .catch(() => {})
        .finally(() => {
          // Hold the indicator briefly so the action feels intentional.
          window.setTimeout(() => setRefreshing(false), 600);
        });
    }
  }, [enabled, refreshing, pullDist, threshold, onRefresh]);
  return { onTouchStart, onTouchMove, onTouchEnd, pullDist, refreshing };
 }
--- a/apps/web/src/hooks/useRightRailDrawer.tsx
+++ b/apps/web/src/hooks/useRightRailDrawer.tsx
@@ -0,0 +1,35 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
 import { useLocation } from 'react-router-dom';
 interface RightRailDrawerState {
  open: boolean;
  setOpen: (open: boolean) => void;
  toggle: () => void;
 }
 const Ctx = createContext<RightRailDrawerState | null>(null);
 export function RightRailDrawerProvider({ children }: { children: ReactNode }) {
  const [open, setOpen] = useState(false);
  const location = useLocation();
  // Auto-close on route change. Same pattern as useSidebarDrawer — keeps the
  // drawer from leaking between sessions when the user navigates.
  useEffect(() => {
    setOpen(false);
  }, [location.pathname]);
  const toggle = useCallback(() => setOpen((v) => !v), []);
  return <Ctx.Provider value={{ open, setOpen, toggle }}>{children}</Ctx.Provider>;
 }
 export function useRightRailDrawer(): RightRailDrawerState {
  const ctx = useContext(Ctx);
  if (!ctx) {
    // Soft fallback so consumers don't crash if rendered outside a provider.
    return { open: false, setOpen: () => {}, toggle: () => {} };
  }
  return ctx;
 }
--- a/apps/web/src/hooks/useSessionChats.ts
+++ b/apps/web/src/hooks/useSessionChats.ts
@@ -0,0 +1,175 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { api } from '@/api/client';
 import type { Chat } from '@/api/types';
 import { sessionEvents } from '@/hooks/sessionEvents';
 export interface UseSessionChatsOpts {
  removeChatFromPanes: (chatId: string) => void;
  openChatInPane: (paneIdx: number, chatId: string) => void;
  // Thin wrapper around openChatInPane(activePaneIdxRef.current, chatId);
  // built by Workspace and passed in so this hook doesn't need to know
  // about pane indexing.
  openChatInActivePane: (chatId: string) => void;
  initializeFirstChatIfEmpty: (chatId: string) => void;
 }
 export interface UseSessionChatsResult {
  chats: Chat[];
  setChats: React.Dispatch<React.SetStateAction<Chat[]>>;
  createChat: (paneIdx: number) => Promise<void>;
  archiveChat: (chatId: string) => Promise<void>;
  unarchiveChat: (chatId: string) => Promise<void>;
  deleteChat: (chatId: string) => Promise<void>;
  renameChat: (chatId: string, name: string) => Promise<void>;
  handleLandingSend: (paneIdx: number, content: string) => Promise<void>;
 }
 export function useSessionChats(
  sessionId: string,
  opts: UseSessionChatsOpts,
 ): UseSessionChatsResult {
  const [chats, setChats] = useState<Chat[]>([]);
  const chatsRef = useRef<Chat[]>([]);
  chatsRef.current = chats;
  // Stable refs to opts callbacks so the subscription effect — which only
  // re-runs on sessionId change — always sees the latest closures without
  // unsubscribe/resubscribe churn.
  const removeChatFromPanesRef = useRef(opts.removeChatFromPanes);
  removeChatFromPanesRef.current = opts.removeChatFromPanes;
  const openChatInPaneRef = useRef(opts.openChatInPane);
  openChatInPaneRef.current = opts.openChatInPane;
  const openChatInActivePaneRef = useRef(opts.openChatInActivePane);
  openChatInActivePaneRef.current = opts.openChatInActivePane;
  const initializeFirstChatIfEmptyRef = useRef(opts.initializeFirstChatIfEmpty);
  initializeFirstChatIfEmptyRef.current = opts.initializeFirstChatIfEmpty;
  useEffect(() => {
    let cancelled = false;
    api.chats.listForSession(sessionId).then((list) => {
      if (cancelled) return;
      setChats(list);
      const openChat = list.find((c) => c.status === 'open');
      if (openChat) {
        initializeFirstChatIfEmptyRef.current(openChat.id);
      }
    }).catch(() => {});
    return () => { cancelled = true; };
  }, [sessionId]);
  useEffect(() => {
    return sessionEvents.subscribe((event) => {
      if (event.type === 'chat_created' && event.session_id === sessionId) {
        setChats((prev) => {
          if (prev.some((c) => c.id === event.chat.id)) return prev;
          return [event.chat, ...prev];
        });
      }
      if (event.type === 'chat_updated') {
        setChats((prev) => prev.map((c) =>
          c.id === event.chat_id ? { ...c, name: event.name, updated_at: event.updated_at } : c
        ));
      }
      if (event.type === 'chat_archived') {
        setChats((prev) => prev.map((c) =>
          c.id === event.chat_id ? { ...c, status: 'archived' as const } : c
        ));
        removeChatFromPanesRef.current(event.chat_id);
      }
      if (event.type === 'chat_unarchived') {
        setChats((prev) => {
          if (prev.some((c) => c.id === event.chat.id)) {
            return prev.map((c) => c.id === event.chat.id ? { ...c, status: 'open' as const } : c);
          }
          return [event.chat, ...prev];
        });
      }
      if (event.type === 'chat_deleted') {
        setChats((prev) => prev.filter((c) => c.id !== event.chat_id));
        removeChatFromPanesRef.current(event.chat_id);
      }
      if (event.type === 'open_chat_in_active_pane') {
        openChatInActivePaneRef.current(event.chat_id);
      }
    });
  }, [sessionId]);
  const createChat = useCallback(async (paneIdx: number) => {
    try {
      const chat = await api.chats.create(sessionId);
      // Optimistic local insert; the WS chat_created echo will be deduped by id.
      setChats((prev) => {
        if (prev.some((c) => c.id === chat.id)) return prev;
        return [chat, ...prev];
      });
      openChatInPaneRef.current(paneIdx, chat.id);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to create chat');
    }
  }, [sessionId]);
  const archiveChat = useCallback(async (chatId: string) => {
    try {
      await api.chats.archive(chatId);
      // Server publishes chat_archived; bus forwarder updates state.
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to archive chat');
    }
  }, []);
  const unarchiveChat = useCallback(async (chatId: string) => {
    try {
      await api.chats.unarchive(chatId);
      // Server publishes chat_unarchived.
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to restore chat');
    }
  }, []);
  const deleteChat = useCallback(async (chatId: string) => {
    try {
      await api.chats.remove(chatId);
      setChats((prev) => prev.filter((c) => c.id !== chatId));
      removeChatFromPanesRef.current(chatId);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to delete chat');
    }
  }, []);
  const renameChat = useCallback(async (chatId: string, name: string) => {
    try {
      await api.chats.update(chatId, { name });
      setChats((prev) => prev.map((c) =>
        c.id === chatId ? { ...c, name } : c
      ));
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to rename chat');
    }
  }, []);
  const handleLandingSend = useCallback(async (paneIdx: number, content: string) => {
    try {
      const chat = await api.chats.create(sessionId);
      setChats((prev) => {
        if (prev.some((c) => c.id === chat.id)) return prev;
        return [chat, ...prev];
      });
      openChatInPaneRef.current(paneIdx, chat.id);
      await api.messages.send(chat.id, content);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to send');
    }
  }, [sessionId]);
  return {
    chats,
    setChats,
    createChat,
    archiveChat,
    unarchiveChat,
    deleteChat,
    renameChat,
    handleLandingSend,
  };
 }
--- a/apps/web/src/hooks/useSessionStream.ts
+++ b/apps/web/src/hooks/useSessionStream.ts
@@ -2,6 +2,10 @@ import { useEffect, useRef, useState } from 'react';
 import type { Message, WsFrame } from '@/api/types';
 import { sessionEvents } from './sessionEvents';
 // session_renamed frame removed from WsFrame — it was declared but never
 // published on the per-session WS channel (server publishes via broker.publishUser
 // since v1.4). chat_renamed remains; auto_name.ts publishes it on session WS.
 interface State {
  messages: Message[];
  connected: boolean;
@@ -25,7 +29,9 @@ function applyFrame(state: State, frame: WsFrame): State {
        kind: 'message',
        tool_calls: null,
        tool_results: null,
-        status: 'streaming',
+        // v1.8.2: cap-hit sentinels arrive role='system' and are static, so
        // skipping the streaming dot for them keeps the UI accurate.
        status: frame.role === 'system' ? 'complete' : 'streaming',
        last_seq: 0,
        tokens_used: null,
        ctx_used: null,
@@ -33,6 +39,7 @@ function applyFrame(state: State, frame: WsFrame): State {
        started_at: null,
        finished_at: null,
        created_at: new Date().toISOString(),
        metadata: null,
      };
      return { ...state, messages: [...state.messages, newMsg] };
    }
@@ -92,6 +99,7 @@ function applyFrame(state: State, frame: WsFrame): State {
        started_at: null,
        finished_at: null,
        created_at: new Date().toISOString(),
        metadata: null,
      };
      return { ...state, messages: [...state.messages, newMsg] };
    }
@@ -106,6 +114,10 @@ function applyFrame(state: State, frame: WsFrame): State {
              ...(frame.ctx_max !== undefined ? { ctx_max: frame.ctx_max } : {}),
              ...(frame.started_at !== undefined ? { started_at: frame.started_at } : {}),
              ...(frame.finished_at !== undefined ? { finished_at: frame.finished_at } : {}),
              // v1.8.2: cap-hit sentinels (and future stamped metadata) ride
              // in on this terminal frame so the reducer can attach it
              // without waiting for a refetch.
              ...(frame.metadata !== undefined ? { metadata: frame.metadata } : {}),
            }
          : m
      );
@@ -118,14 +130,6 @@ function applyFrame(state: State, frame: WsFrame): State {
        messages: state.messages.filter((m) => !removeSet.has(m.id)),
      };
    }
    case 'session_renamed': {
      sessionEvents.emit({
        type: 'session_renamed',
        session_id: frame.session_id,
        name: frame.name,
      });
      return state;
    }
    case 'chat_renamed': {
      sessionEvents.emit({
        type: 'chat_updated',
@@ -137,9 +141,22 @@ function applyFrame(state: State, frame: WsFrame): State {
      return state;
    }
    case 'error': {
      // v1.8.2: when the frame carries a structured reason, stamp it onto the
      // failed message's metadata so the bubble can render specifics inline
      // (the WS error frame is one-shot; refresh-safe rendering needs the
      // value persisted on the message).
      const errorMeta = frame.reason
        ? { kind: 'error' as const, error_reason: frame.reason, error_text: frame.error }
        : null;
      const next = frame.message_id
        ? state.messages.map((m) =>
-            m.id === frame.message_id ? { ...m, status: 'failed' as const } : m
+            m.id === frame.message_id
              ? {
                  ...m,
                  status: 'failed' as const,
                  ...(errorMeta ? { metadata: errorMeta } : {}),
                }
              : m
          )
        : state.messages;
      return { ...state, messages: next, error: frame.error };
@@ -147,6 +164,11 @@ function applyFrame(state: State, frame: WsFrame): State {
  }
 }
 // Matches useUserEvents — exponential backoff with the same ceiling so the
 // two channels reconnect on the same cadence after a network handoff.
 const RECONNECT_INITIAL_MS = 1000;
 const RECONNECT_MAX_MS = 30_000;
 export function useSessionStream(sessionId: string | undefined) {
  const [state, setState] = useState<State>({ messages: [], connected: false, error: null });
  const wsRef = useRef<WebSocket | null>(null);
@@ -156,32 +178,52 @@ export function useSessionStream(sessionId: string | undefined) {
    setState({ messages: [], connected: false, error: null });
-    const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    let unmounted = false;
-    const url = `${proto}://${window.location.host}/api/ws/sessions/${sessionId}`;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-    const ws = new WebSocket(url);
+    let reconnectDelay = RECONNECT_INITIAL_MS;
    wsRef.current = ws;
-    ws.onopen = () => {
+    const connect = () => {
-      setState((s) => ({ ...s, connected: true, error: null }));
+      if (unmounted) return;
-    };
+      const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
-    ws.onmessage = (ev) => {
+      const url = `${proto}://${window.location.host}/api/ws/sessions/${sessionId}`;
-      try {
+      const ws = new WebSocket(url);
-        const frame = JSON.parse(typeof ev.data === 'string' ? ev.data : '') as WsFrame;
+      wsRef.current = ws;
-        setState((s) => applyFrame(s, frame));
+
-      } catch (err) {
+      ws.onopen = () => {
-        console.warn('bad ws frame', err);
+        reconnectDelay = RECONNECT_INITIAL_MS;
-      }
+        setState((s) => ({ ...s, connected: true, error: null }));
-    };
+      };
-    ws.onerror = () => {
+      ws.onmessage = (ev) => {
-      setState((s) => ({ ...s, error: 'websocket error' }));
+        try {
-    };
+          const frame = JSON.parse(typeof ev.data === 'string' ? ev.data : '') as WsFrame;
-    ws.onclose = () => {
+          setState((s) => applyFrame(s, frame));
-      setState((s) => ({ ...s, connected: false }));
+        } catch (err) {
          console.warn('bad ws frame', err);
        }
      };
      // v1.8.1: WS errors no longer surface as user-facing toasts here. The
      // user-channel hook (useUserEvents) owns the debounced "reconnecting…"
      // UI; this channel just reconnects silently on the same backoff.
      ws.onerror = () => {
        try { ws.close(); } catch {}
      };
      ws.onclose = () => {
        if (unmounted) return;
        setState((s) => ({ ...s, connected: false }));
        const delay = reconnectDelay;
        reconnectDelay = Math.min(reconnectDelay * 2, RECONNECT_MAX_MS);
        reconnectTimer = setTimeout(connect, delay);
      };
    };
    connect();
    return () => {
      unmounted = true;
      if (reconnectTimer) clearTimeout(reconnectTimer);
      const ws = wsRef.current;
      wsRef.current = null;
-      ws.close();
+      if (ws) try { ws.close(); } catch {}
    };
  }, [sessionId]);
--- a/apps/web/src/hooks/useSidebar.ts
+++ b/apps/web/src/hooks/useSidebar.ts
@@ -171,6 +171,7 @@ function applyEvent(prev: SidebarResponse, event: import('./sessionEvents').Sess
    case 'chat_archived':
    case 'chat_unarchived':
    case 'chat_deleted':
    case 'chat_status':
      return prev;
    case 'project_archived': {
      const next = prev.projects.filter((p) => p.id !== event.project_id);
--- a/apps/web/src/hooks/useSidebarDrawer.tsx
+++ b/apps/web/src/hooks/useSidebarDrawer.tsx
@@ -0,0 +1,36 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
 import { useLocation } from 'react-router-dom';
 interface SidebarDrawerState {
  open: boolean;
  setOpen: (open: boolean) => void;
  toggle: () => void;
 }
 const Ctx = createContext<SidebarDrawerState | null>(null);
 export function SidebarDrawerProvider({ children }: { children: ReactNode }) {
  const [open, setOpen] = useState(false);
  const location = useLocation();
  // Auto-close on navigation. Effect fires once on mount too (open default
  // is false, so no observable effect) and on every pathname change after.
  useEffect(() => {
    setOpen(false);
  }, [location.pathname]);
  const toggle = useCallback(() => setOpen((v) => !v), []);
  return <Ctx.Provider value={{ open, setOpen, toggle }}>{children}</Ctx.Provider>;
 }
 export function useSidebarDrawer(): SidebarDrawerState {
  const ctx = useContext(Ctx);
  if (!ctx) {
    // Soft fallback so consumers don't crash if rendered outside a provider.
    // In practice all top-level routes are inside the provider.
    return { open: false, setOpen: () => {}, toggle: () => {} };
  }
  return ctx;
 }
--- a/apps/web/src/hooks/useUserEvents.ts
+++ b/apps/web/src/hooks/useUserEvents.ts
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { sessionEvents } from './sessionEvents';
 import { createWsReconnectToast } from './wsReconnectToast';
 const RECONNECT_INITIAL_MS = 1000;
 const RECONNECT_MAX_MS = 30000;
@@ -11,6 +12,20 @@ export function useUserEvents(): void {
    let reconnectDelay = RECONNECT_INITIAL_MS;
    let unmounted = false;
    // v1.8.1: silent on the first disconnect; gray "reconnecting…" after 3
    // fails / 15 s; red "connection lost" with a Retry Now action after 60 s.
    const reconnectToast = createWsReconnectToast({
      label: 'Live updates',
      onRetryNow: () => {
        if (reconnectTimer) {
          clearTimeout(reconnectTimer);
          reconnectTimer = null;
          reconnectDelay = RECONNECT_INITIAL_MS;
          connect();
        }
      },
    });
    const connect = () => {
      if (unmounted) return;
      const url = new URL('/api/ws/user', window.location.href);
@@ -19,6 +34,7 @@ export function useUserEvents(): void {
      ws.onopen = () => {
        reconnectDelay = RECONNECT_INITIAL_MS;
        reconnectToast.onConnected();
      };
      ws.onmessage = (ev) => {
@@ -34,13 +50,15 @@ export function useUserEvents(): void {
      ws.onclose = () => {
        if (unmounted) return;
        reconnectToast.onFailure();
        const delay = reconnectDelay;
        reconnectDelay = Math.min(reconnectDelay * 2, RECONNECT_MAX_MS);
        reconnectTimer = setTimeout(connect, delay);
      };
      ws.onerror = () => {
-        // close handler will trigger reconnect
+        // close handler will trigger reconnect; best-effort, ignore failure
        // because the socket may already be closing
        try { ws?.close(); } catch {}
      };
    };
@@ -49,6 +67,7 @@ export function useUserEvents(): void {
    return () => {
      unmounted = true;
      reconnectToast.dispose();
      if (reconnectTimer) clearTimeout(reconnectTimer);
      if (ws) try { ws.close(); } catch {}
    };
--- a/apps/web/src/hooks/useViewport.ts
+++ b/apps/web/src/hooks/useViewport.ts
@@ -0,0 +1,45 @@
 import { useEffect, useState } from 'react';
 // Breakpoints (px): mobile <768, tablet 768-1023, desktop >=1024.
 const MOBILE_MAX = 767;
 const TABLET_MAX = 1023;
 export interface ViewportSnapshot {
  isMobile: boolean;
  isTablet: boolean;
  width: number;
 }
 function snapshot(): ViewportSnapshot {
  if (typeof window === 'undefined') {
    return { isMobile: false, isTablet: false, width: 1280 };
  }
  const width = window.innerWidth;
  return {
    isMobile: width <= MOBILE_MAX,
    isTablet: width > MOBILE_MAX && width <= TABLET_MAX,
    width,
  };
 }
 // matchMedia-based, no resize polling. We listen to two breakpoint queries
 // and recompute the snapshot on any change.
 export function useViewport(): ViewportSnapshot {
  const [state, setState] = useState<ViewportSnapshot>(snapshot);
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const mobileMq = window.matchMedia(`(max-width: ${MOBILE_MAX}px)`);
    const tabletMq = window.matchMedia(`(min-width: ${MOBILE_MAX + 1}px) and (max-width: ${TABLET_MAX}px)`);
    const update = () => setState(snapshot());
    mobileMq.addEventListener('change', update);
    tabletMq.addEventListener('change', update);
    update();
    return () => {
      mobileMq.removeEventListener('change', update);
      tabletMq.removeEventListener('change', update);
    };
  }, []);
  return state;
 }
--- a/apps/web/src/hooks/useWorkspacePanes.ts
+++ b/apps/web/src/hooks/useWorkspacePanes.ts
@@ -0,0 +1,339 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { DragEvent } from 'react';
 import { toast } from 'sonner';
 import type { WorkspacePane } from '@/api/types';
 import { setActivePaneInfo, clearActivePane } from '@/hooks/useActivePane';
 export const MAX_PANES = 5;
 const STORAGE_KEY = 'boocode.workspace.panes';
 function generateId(): string {
  return crypto.randomUUID();
 }
 function emptyPane(): WorkspacePane {
  return { id: generateId(), kind: 'empty', chatIds: [], activeChatIdx: -1 };
 }
 function chatPane(chatId: string): WorkspacePane {
  return { id: generateId(), kind: 'chat', chatId, chatIds: [chatId], activeChatIdx: 0 };
 }
 function loadPanes(sessionId: string): WorkspacePane[] | null {
  try {
    const raw = localStorage.getItem(`${STORAGE_KEY}.${sessionId}`);
    if (!raw) return null;
    const parsed = JSON.parse(raw) as WorkspacePane[];
    if (!Array.isArray(parsed) || parsed.length === 0) return null;
    return parsed;
  } catch {
    return null;
  }
 }
 function savePanes(sessionId: string, panes: WorkspacePane[]): void {
  try {
    localStorage.setItem(`${STORAGE_KEY}.${sessionId}`, JSON.stringify(panes));
  } catch { /* quota or disabled */ }
 }
 export interface UseWorkspacePanesResult {
  panes: WorkspacePane[];
  activePaneIdx: number;
  setActivePaneIdx: React.Dispatch<React.SetStateAction<number>>;
  activePaneIdxRef: React.MutableRefObject<number>;
  openChatInPane: (paneIdx: number, chatId: string) => void;
  switchTab: (paneIdx: number, tabIdx: number) => void;
  removeTab: (paneIdx: number, chatId: string) => void;
  closeOtherTabs: (paneIdx: number, keepChatId: string) => void;
  closeTabsToRight: (paneIdx: number, pivotChatId: string) => void;
  closeAllTabs: (paneIdx: number) => void;
  showLandingPage: (paneIdx: number) => void;
  addSplitPane: (kind: 'chat' | 'terminal' | 'agent') => void;
  removePane: (idx: number) => void;
  removeChatFromPanes: (chatId: string) => void;
  initializeFirstChatIfEmpty: (chatId: string) => void;
  handlePaneDragStart: (idx: number) => (e: DragEvent<HTMLDivElement>) => void;
  handlePaneDragOver: (idx: number) => (e: DragEvent<HTMLDivElement>) => void;
  handlePaneDragLeave: () => void;
  handlePaneDrop: (targetIdx: number) => (e: DragEvent<HTMLDivElement>) => void;
  handlePaneDragEnd: () => void;
  dragOverIdx: number | null;
  draggingIdxRef: React.MutableRefObject<number | null>;
 }
 export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
  const [panes, setPanes] = useState<WorkspacePane[]>(() => {
    return loadPanes(sessionId) ?? [emptyPane()];
  });
  const [activePaneIdx, setActivePaneIdx] = useState(0);
  const draggingIdxRef = useRef<number | null>(null);
  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
  useEffect(() => {
    savePanes(sessionId, panes);
  }, [sessionId, panes]);
  useEffect(() => {
    const active = panes[activePaneIdx];
    if (!active) {
      clearActivePane();
      return;
    }
    setActivePaneInfo({
      sessionId,
      paneId: active.id,
      kind: active.kind,
      activeFile: null,
    });
  }, [sessionId, panes, activePaneIdx]);
  useEffect(() => {
    return () => {
      clearActivePane();
    };
  }, []);
  const activePaneIdxRef = useRef(activePaneIdx);
  activePaneIdxRef.current = activePaneIdx;
  const openChatInPane = useCallback((paneIdx: number, chatId: string) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const existing = pane.chatIds.indexOf(chatId);
      if (existing >= 0) {
        next[paneIdx] = { ...pane, kind: 'chat', chatId, activeChatIdx: existing };
      } else {
        const newIds = [...pane.chatIds, chatId];
        next[paneIdx] = {
          ...pane,
          kind: 'chat',
          chatId,
          chatIds: newIds,
          activeChatIdx: newIds.length - 1,
        };
      }
      return next;
    });
    setActivePaneIdx(paneIdx);
  }, []);
  const switchTab = useCallback((paneIdx: number, tabIdx: number) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const chatId = pane.chatIds[tabIdx];
      if (!chatId) return prev;
      next[paneIdx] = { ...pane, chatId, activeChatIdx: tabIdx };
      return next;
    });
  }, []);
  const removeTab = useCallback((paneIdx: number, chatId: string) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const nextIds = pane.chatIds.filter((id) => id !== chatId);
      if (nextIds.length === 0) {
        next[paneIdx] = { ...pane, kind: 'empty', chatId: undefined, chatIds: [], activeChatIdx: -1 };
      } else {
        const nextActiveIdx = Math.min(pane.activeChatIdx, nextIds.length - 1);
        next[paneIdx] = {
          ...pane,
          chatIds: nextIds,
          activeChatIdx: nextActiveIdx,
          chatId: nextIds[nextActiveIdx],
        };
      }
      return next;
    });
  }, []);
  // Keep only the right-clicked tab open in this pane.
  const closeOtherTabs = useCallback((paneIdx: number, keepChatId: string) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const keepIdx = pane.chatIds.indexOf(keepChatId);
      if (keepIdx < 0) return prev;
      next[paneIdx] = {
        ...pane,
        kind: 'chat',
        chatId: keepChatId,
        chatIds: [keepChatId],
        activeChatIdx: 0,
      };
      return next;
    });
  }, []);
  // Close every tab to the right of the right-clicked one.
  const closeTabsToRight = useCallback((paneIdx: number, pivotChatId: string) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      const pivotIdx = pane.chatIds.indexOf(pivotChatId);
      if (pivotIdx < 0 || pivotIdx === pane.chatIds.length - 1) return prev;
      const nextIds = pane.chatIds.slice(0, pivotIdx + 1);
      const nextActiveIdx = Math.min(pane.activeChatIdx, nextIds.length - 1);
      next[paneIdx] = {
        ...pane,
        chatIds: nextIds,
        activeChatIdx: nextActiveIdx,
        chatId: nextIds[nextActiveIdx],
      };
      return next;
    });
  }, []);
  // Close every tab in this pane; land on landing page.
  const closeAllTabs = useCallback((paneIdx: number) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      next[paneIdx] = { ...pane, kind: 'empty', chatId: undefined, chatIds: [], activeChatIdx: -1 };
      return next;
    });
  }, []);
  const showLandingPage = useCallback((paneIdx: number) => {
    setPanes((prev) => {
      const next = [...prev];
      const pane = next[paneIdx]!;
      next[paneIdx] = { ...pane, kind: 'empty', chatId: undefined };
      return next;
    });
  }, []);
  const addSplitPane = useCallback((kind: 'chat' | 'terminal' | 'agent') => {
    if (kind === 'terminal') {
      toast('Terminal panes coming in BooTerm');
      return;
    }
    if (kind === 'agent') {
      toast('Agent panes coming in BooCoder');
      return;
    }
    setPanes((prev) => {
      if (prev.length >= MAX_PANES) {
        toast.error(`Maximum ${MAX_PANES} panes`);
        return prev;
      }
      const next = [...prev, emptyPane()];
      setActivePaneIdx(next.length - 1);
      return next;
    });
  }, []);
  const removePane = useCallback((idx: number) => {
    setPanes((prev) => {
      if (prev.length <= 1) return prev;
      const next = prev.filter((_, i) => i !== idx);
      setActivePaneIdx((ai) => Math.min(ai, next.length - 1));
      return next;
    });
  }, []);
  // Replaces a single empty default pane with a chat pane. Used by the initial
  // chat fetch to land on the most-recent open chat if no saved pane state.
  const initializeFirstChatIfEmpty = useCallback((chatId: string) => {
    setPanes((prev) => {
      if (prev.length === 1 && prev[0]!.kind === 'empty') {
        return [chatPane(chatId)];
      }
      return prev;
    });
  }, []);
  const removeChatFromPanes = useCallback((chatId: string) => {
    setPanes((prev) => prev.map((p) => {
      const idx = p.chatIds.indexOf(chatId);
      if (idx < 0) return p;
      const nextIds = p.chatIds.filter((id) => id !== chatId);
      if (nextIds.length === 0) {
        return { ...p, kind: 'empty' as const, chatId: undefined, chatIds: [], activeChatIdx: -1 };
      }
      const nextActiveIdx = Math.min(p.activeChatIdx, nextIds.length - 1);
      return {
        ...p,
        chatIds: nextIds,
        activeChatIdx: nextActiveIdx,
        chatId: nextIds[nextActiveIdx],
      };
    }));
  }, []);
  const handlePaneDragStart = useCallback(
    (idx: number) => (e: DragEvent<HTMLDivElement>) => {
      draggingIdxRef.current = idx;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/plain', String(idx));
    },
    []
  );
  const handlePaneDragOver = useCallback(
    (idx: number) => (e: DragEvent<HTMLDivElement>) => {
      if (draggingIdxRef.current === null) return;
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
      if (dragOverIdx !== idx) setDragOverIdx(idx);
    },
    [dragOverIdx]
  );
  const handlePaneDragLeave = useCallback(() => {
    setDragOverIdx(null);
  }, []);
  const handlePaneDrop = useCallback(
    (targetIdx: number) => (e: DragEvent<HTMLDivElement>) => {
      e.preventDefault();
      const fromIdx = draggingIdxRef.current;
      draggingIdxRef.current = null;
      setDragOverIdx(null);
      if (fromIdx === null || fromIdx === targetIdx) return;
      setPanes((prev) => {
        const next = [...prev];
        const [moved] = next.splice(fromIdx, 1);
        if (!moved) return prev;
        next.splice(targetIdx, 0, moved);
        // Keep active selection on the same logical pane (the one being dragged).
        setActivePaneIdx(targetIdx);
        return next;
      });
    },
    []
  );
  const handlePaneDragEnd = useCallback(() => {
    draggingIdxRef.current = null;
    setDragOverIdx(null);
  }, []);
  return {
    panes,
    activePaneIdx,
    setActivePaneIdx,
    activePaneIdxRef,
    openChatInPane,
    switchTab,
    removeTab,
    closeOtherTabs,
    closeTabsToRight,
    closeAllTabs,
    showLandingPage,
    addSplitPane,
    removePane,
    removeChatFromPanes,
    initializeFirstChatIfEmpty,
    handlePaneDragStart,
    handlePaneDragOver,
    handlePaneDragLeave,
    handlePaneDrop,
    handlePaneDragEnd,
    dragOverIdx,
    draggingIdxRef,
  };
 }
--- a/apps/web/src/hooks/wsReconnectToast.ts
+++ b/apps/web/src/hooks/wsReconnectToast.ts
@@ -0,0 +1,95 @@
 import { toast } from 'sonner';
 // v1.8.1 thresholds. First disconnect is silent — mobile Authelia idle timeouts
 // and tab suspensions trip reconnects constantly and the old red "websocket
 // error" toast made the app feel broken. Only escalate once the failure is
 // sustained.
 const TOAST_AFTER_FAILS = 3;
 const TOAST_AFTER_MS = 15_000;
 const PERSISTENT_AFTER_MS = 60_000;
 export interface WsReconnectToast {
  onFailure(): void;
  onConnected(): void;
  dispose(): void;
 }
 interface Options {
  label: string;            // shown in the toast (e.g. "Live updates")
  onRetryNow: () => void;   // user clicked the "Retry now" action
 }
 // Per-connection toast wrapper. Caller drives it from the WS lifecycle:
 //   onFailure   — after each failed connection attempt
 //   onConnected — after a successful onopen
 //   dispose     — on hook unmount
 // The wrapper itself runs no timers and does not change the caller's reconnect
 // cadence; it only decides when to show / dismiss the toast.
 export function createWsReconnectToast(opts: Options): WsReconnectToast {
  let firstFailureAt: number | null = null;
  let failureCount = 0;
  let reconnectingId: string | number | null = null;
  let persistentId: string | number | null = null;
  function dismissReconnecting(): void {
    if (reconnectingId !== null) {
      toast.dismiss(reconnectingId);
      reconnectingId = null;
    }
  }
  function dismissPersistent(): void {
    if (persistentId !== null) {
      toast.dismiss(persistentId);
      persistentId = null;
    }
  }
  return {
    onFailure() {
      if (firstFailureAt === null) firstFailureAt = Date.now();
      failureCount += 1;
      const elapsed = Date.now() - firstFailureAt;
      // Escalate to red error + Retry button after PERSISTENT_AFTER_MS. Replaces
      // the gray toast if it's still showing.
      if (persistentId === null && elapsed >= PERSISTENT_AFTER_MS) {
        dismissReconnecting();
        persistentId = toast.error(`${opts.label}: connection lost`, {
          duration: Infinity,
          action: {
            label: 'Retry now',
            onClick: () => {
              dismissReconnecting();
              dismissPersistent();
              opts.onRetryNow();
            },
          },
        });
        return;
      }
      // Gray "reconnecting…" toast once we've crossed either threshold.
      if (
        reconnectingId === null &&
        persistentId === null &&
        (failureCount >= TOAST_AFTER_FAILS || elapsed >= TOAST_AFTER_MS)
      ) {
        reconnectingId = toast.warning(`${opts.label}: reconnecting…`, {
          duration: Infinity,
        });
      }
    },
    onConnected() {
      firstFailureAt = null;
      failureCount = 0;
      dismissReconnecting();
      dismissPersistent();
    },
    dispose() {
      firstFailureAt = null;
      failureCount = 0;
      dismissReconnecting();
      dismissPersistent();
    },
  };
 }
--- a/apps/web/src/lib/attachments.ts
+++ b/apps/web/src/lib/attachments.ts
@@ -8,6 +8,34 @@ export type Attachment = {
  source: '@' | 'line-select' | 'drop' | 'paste';
 };
 // v1.7: caps shared between drag-drop and paste-as-attachment so both paths
 // reject the same way. Match the existing 10-attachment cap in
 // ChatInput.addAttachment.
 export const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024; // 5 MB
 export const PASTE_INLINE_MAX_LINES = 8;
 // First-8KB null-byte scan. Returns true if the content looks binary.
 // Accepts a string (post-decode), an ArrayBuffer (pre-decode), or a Uint8Array.
 // For binary files like PNG, scanning bytes is more reliable than scanning
 // post-UTF-8-decode strings because invalid sequences may be replaced rather
 // than preserved.
 export function looksBinary(content: string | ArrayBuffer | Uint8Array): boolean {
  const SCAN_BYTES = 8192;
  if (typeof content === 'string') {
    const max = Math.min(content.length, SCAN_BYTES);
    for (let i = 0; i < max; i++) {
      if (content.charCodeAt(i) === 0) return true;
    }
    return false;
  }
  const bytes = content instanceof Uint8Array ? content : new Uint8Array(content);
  const max = Math.min(bytes.length, SCAN_BYTES);
  for (let i = 0; i < max; i++) {
    if (bytes[i] === 0) return true;
  }
  return false;
 }
 export const LANG_MAP: Record<string, string> = {
  ts: 'typescript', tsx: 'tsx', js: 'javascript', jsx: 'jsx',
  mjs: 'javascript', cjs: 'javascript',
--- a/apps/web/src/lib/theme.ts
+++ b/apps/web/src/lib/theme.ts
@@ -0,0 +1,226 @@
 import { useEffect, useState } from 'react';
 import { api } from '@/api/client';
 // themes-v1: source of truth for the 18 presets. id and name are surfaced in
 // the picker; family groups visually; supportsDark/supportsLight reflect
 // whether the corresponding selector exists in styles/themes/<id>.css; anchors
 // are the 5 dark swatches (or the light palette for the two light-only themes)
 // used in the picker preview strip.
 export type ThemeId =
  | 'obsidian'
  | 'gunmetal'
  | 'espresso'
  | 'volcanic-brown'
  | 'copper'
  | 'gold'
  | 'oxblood'
  | 'crimson'
  | 'elderflower'
  | 'plum'
  | 'steel-pink'
  | 'fuchsia-noir'
  | 'matrix'
  | 'sage'
  | 'ivory'
  | 'chalk'
  | 'cobalt'
  | 'midnight-sapphire';
 export type ThemeMode = 'dark' | 'light' | 'system';
 export interface ThemeMeta {
  id: ThemeId;
  name: string;
  family: string;
  supportsDark: boolean;
  supportsLight: boolean;
  anchors: [string, string, string, string, string];
 }
 export const THEMES: readonly ThemeMeta[] = [
  { id: 'obsidian', name: 'Obsidian', family: 'Charcoal', supportsDark: true, supportsLight: true,
    anchors: ['#0c0c0e', '#15151a', '#1f1f23', '#6b6b75', '#8b5cf6'] },
  { id: 'gunmetal', name: 'Gunmetal', family: 'Charcoal', supportsDark: true, supportsLight: true,
    anchors: ['#0d1117', '#161b22', '#21262d', '#7d8590', '#388bfd'] },
  { id: 'espresso', name: 'Espresso', family: 'Brown', supportsDark: true, supportsLight: true,
    anchors: ['#1c1410', '#241a14', '#2e2218', '#8a7058', '#c8a880'] },
  { id: 'volcanic-brown', name: 'Volcanic Brown', family: 'Brown', supportsDark: true, supportsLight: true,
    anchors: ['#140906', '#1e0e0a', '#2e1610', '#7a4030', '#cc4a1a'] },
  { id: 'copper', name: 'Copper', family: 'Amber', supportsDark: true, supportsLight: true,
    anchors: ['#100800', '#1c1408', '#2e1f0a', '#8a6040', '#b87333'] },
  { id: 'gold', name: 'Gold', family: 'Amber', supportsDark: true, supportsLight: true,
    anchors: ['#0e0800', '#1a1200', '#2a1f00', '#a07c30', '#d4af37'] },
  { id: 'oxblood', name: 'Oxblood', family: 'Crimson', supportsDark: true, supportsLight: true,
    anchors: ['#0a0303', '#180606', '#2a0808', '#7a3028', '#8b1a1a'] },
  { id: 'crimson', name: 'Crimson', family: 'Crimson', supportsDark: true, supportsLight: true,
    anchors: ['#0e0404', '#1a0808', '#2e0a0a', '#8a3030', '#dc143c'] },
  { id: 'elderflower', name: 'Elderflower', family: 'Violet', supportsDark: true, supportsLight: true,
    anchors: ['#100818', '#1c1024', '#2c1830', '#8a78a0', '#b89cd8'] },
  { id: 'plum', name: 'Plum', family: 'Violet', supportsDark: true, supportsLight: true,
    anchors: ['#0c0814', '#180e20', '#241830', '#7a4878', '#8e4585'] },
  { id: 'steel-pink', name: 'Steel Pink', family: 'Magenta', supportsDark: true, supportsLight: true,
    anchors: ['#0e0408', '#1a080e', '#2e0c1a', '#9a4070', '#cc33aa'] },
  { id: 'fuchsia-noir', name: 'Fuchsia Noir', family: 'Magenta', supportsDark: true, supportsLight: true,
    anchors: ['#0a0610', '#14081a', '#2a0c2e', '#8a3878', '#ff1493'] },
  { id: 'matrix', name: 'Matrix', family: 'Green', supportsDark: true, supportsLight: true,
    anchors: ['#000a00', '#031403', '#0a200a', '#208030', '#00ff41'] },
  { id: 'sage', name: 'Sage', family: 'Green', supportsDark: true, supportsLight: true,
    anchors: ['#0a0e08', '#141a10', '#1e2e1a', '#7a8870', '#9caf88'] },
  { id: 'ivory', name: 'Ivory', family: 'Light', supportsDark: false, supportsLight: true,
    anchors: ['#fdfcf8', '#f5f2e8', '#e8e4d8', '#8a8478', '#3a3328'] },
  { id: 'chalk', name: 'Chalk', family: 'Light', supportsDark: false, supportsLight: true,
    anchors: ['#fafaf7', '#f0f0ec', '#e5e5e0', '#75756e', '#2a2a28'] },
  { id: 'cobalt', name: 'Cobalt', family: 'Blue', supportsDark: true, supportsLight: true,
    anchors: ['#020817', '#061434', '#0c2244', '#3060a0', '#0047ab'] },
  { id: 'midnight-sapphire', name: 'Midnight Sapphire', family: 'Blue', supportsDark: true, supportsLight: true,
    anchors: ['#02050e', '#060c1f', '#0e1a36', '#4a6088', '#1e3a8a'] },
 ] as const;
 export const DEFAULT_THEME_ID: ThemeId = 'obsidian';
 export const DEFAULT_THEME_MODE: ThemeMode = 'dark';
 export const STORAGE_KEY = 'boocode.theme';
 const THEME_IDS_SET: ReadonlySet<string> = new Set(THEMES.map((t) => t.id));
 export function isThemeId(s: string): s is ThemeId {
  return THEME_IDS_SET.has(s);
 }
 function resolvedMode(mode: ThemeMode): 'dark' | 'light' {
  if (mode !== 'system') return mode;
  if (typeof window === 'undefined') return 'dark';
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 // Light-only themes (ivory, chalk) can't render dark — fall back to obsidian
 // dark per spec §8 decision 1. Keeps the fallback explicit so the caller
 // doesn't accidentally apply theme-ivory.dark (which has no rule block).
 function effectiveThemeId(id: ThemeId, mode: 'dark' | 'light'): ThemeId {
  if (mode === 'dark') {
    const meta = THEMES.find((t) => t.id === id);
    if (meta && !meta.supportsDark) return DEFAULT_THEME_ID;
  }
  return id;
 }
 export function applyTheme(id: ThemeId, mode: ThemeMode): void {
  if (typeof document === 'undefined') return;
  const resolved = resolvedMode(mode);
  const effective = effectiveThemeId(id, resolved);
  document.documentElement.className =
    `theme-${effective}${resolved === 'dark' ? ' dark' : ''}`;
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify({ id, mode }));
  } catch {
    // quota / disabled storage — apply still succeeds, persistence falls
    // back to the next /api/settings round-trip.
  }
 }
 interface ThemeState {
  id: ThemeId;
  mode: ThemeMode;
 }
 // Module-level singleton, mirrors the useChatStatus / useSidebar pattern.
 // One shared state across every useTheme() consumer; setTheme() mutates it
 // and notifies subscribers so the App-level hook (which owns the matchMedia
 // listener) and the Settings picker stay in lockstep without prop drilling.
 function readCache(): ThemeState | null {
  if (typeof localStorage === 'undefined') return null;
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw) as { id?: unknown; mode?: unknown };
    if (typeof parsed.id !== 'string' || !isThemeId(parsed.id)) return null;
    const m = parsed.mode;
    if (m !== 'dark' && m !== 'light' && m !== 'system') return null;
    return { id: parsed.id, mode: m };
  } catch {
    return null;
  }
 }
 let _state: ThemeState = readCache() ?? { id: DEFAULT_THEME_ID, mode: DEFAULT_THEME_MODE };
 let _initialized = false;
 const _subscribers = new Set<(s: ThemeState) => void>();
 function notify(): void {
  for (const sub of _subscribers) {
    try {
      sub(_state);
    } catch {
      // swallow — one bad subscriber shouldn't break others
    }
  }
 }
 // Optimistic update: applies immediately, PATCHes server, reverts on failure
 // so the picker can show a toast without manual state juggling. Throws on
 // failure so the caller can surface the error.
 export async function setTheme(id: ThemeId, mode: ThemeMode): Promise<void> {
  const prev = _state;
  _state = { id, mode };
  applyTheme(id, mode);
  notify();
  try {
    await api.settings.patch({ theme_id: id, theme_mode: mode });
  } catch (err) {
    _state = prev;
    applyTheme(prev.id, prev.mode);
    notify();
    throw err;
  }
 }
 // useTheme — mounts as many times as needed across the tree. The first mount
 // (initialized=false) triggers a single /api/settings fetch to reconcile the
 // local cache with the server. Every mount installs the matchMedia listener
 // when mode === 'system'; cleanup runs on unmount or when mode flips away.
 export function useTheme(): ThemeState {
  const [state, setState] = useState<ThemeState>(_state);
  useEffect(() => {
    _subscribers.add(setState);
    // Ensure the DOM reflects current state on mount — the FOUC script in
    // index.html runs before this hook, but we re-apply in case the cache
    // was stale relative to a fresh fetch above.
    applyTheme(_state.id, _state.mode);
    if (!_initialized) {
      _initialized = true;
      api.settings
        .get()
        .then((s) => {
          const rawId = s['theme_id'];
          const rawMode = s['theme_mode'];
          const id =
            typeof rawId === 'string' && isThemeId(rawId) ? rawId : DEFAULT_THEME_ID;
          const mode: ThemeMode =
            rawMode === 'dark' || rawMode === 'light' || rawMode === 'system'
              ? rawMode
              : DEFAULT_THEME_MODE;
          _state = { id, mode };
          applyTheme(id, mode);
          notify();
        })
        .catch(() => {
          // Settings fetch failed — keep whatever the FOUC script applied.
          // The picker still works; PATCH will retry on next selection.
        });
    }
    return () => {
      _subscribers.delete(setState);
    };
  }, []);
  useEffect(() => {
    if (state.mode !== 'system') return;
    if (typeof window === 'undefined') return;
    const mql = window.matchMedia('(prefers-color-scheme: dark)');
    const onChange = () => applyTheme(state.id, 'system');
    mql.addEventListener('change', onChange);
    return () => mql.removeEventListener('change', onChange);
  }, [state.id, state.mode]);
  return state;
 }
--- a/apps/web/src/pages/Home.tsx
+++ b/apps/web/src/pages/Home.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ChevronDown, ChevronRight, Folder, RotateCcw } from 'lucide-react';
+import { ChevronDown, ChevronRight, Folder, FolderTree, Menu, RotateCcw } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { AddProjectModal } from '@/components/AddProjectModal';
@@ -8,6 +8,9 @@ import { api } from '@/api/client';
 import type { Project } from '@/api/types';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { useSidebar } from '@/hooks/useSidebar';
 import { useSidebarDrawer } from '@/hooks/useSidebarDrawer';
 import { useRightRailDrawer } from '@/hooks/useRightRailDrawer';
 import { useViewport } from '@/hooks/useViewport';
 export function Home() {
  const { data } = useSidebar();
@@ -15,6 +18,9 @@ export function Home() {
  const [createOpen, setCreateOpen] = useState(false);
  const [archived, setArchived] = useState<Project[] | null>(null);
  const [showArchived, setShowArchived] = useState(false);
  const { setOpen: setSidebarOpen } = useSidebarDrawer();
  const { toggle: toggleRightRail } = useRightRailDrawer();
  const { isMobile } = useViewport();
  const empty = data ? data.projects.length === 0 : false;
@@ -70,8 +76,32 @@ export function Home() {
  }
  return (
-    <div className="flex-1 flex flex-col items-center px-6 py-12 overflow-y-auto">
+    <div className="flex-1 flex flex-col min-h-0">
-      <div className="w-full max-w-md space-y-6">
+      {isMobile && (
        <header
          className="border-b px-3 sm:px-4 py-2 flex items-center gap-1.5 shrink-0 text-sm"
          style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}
        >
          <button
            type="button"
            onClick={() => setSidebarOpen(true)}
            className="inline-flex items-center justify-center -ml-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
            aria-label="Open sidebar"
          >
            <Menu className="size-5" />
          </button>
          <button
            type="button"
            onClick={toggleRightRail}
            className="inline-flex items-center justify-center -mr-1 ml-auto min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
            aria-label="Toggle file browser"
          >
            <FolderTree className="size-5" />
          </button>
        </header>
      )}
      <div className="flex-1 flex flex-col items-center px-6 py-12 overflow-y-auto">
        <div className="w-full max-w-md space-y-6">
        <div className="text-center space-y-3">
          {empty ? (
            <>
@@ -127,9 +157,10 @@ export function Home() {
            )}
          </div>
        )}
        </div>
        <AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={() => {}} />
        <CreateProjectModal open={createOpen} onOpenChange={setCreateOpen} />
      </div>
      <AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={() => {}} />
      <CreateProjectModal open={createOpen} onOpenChange={setCreateOpen} />
    </div>
  );
 }
--- a/apps/web/src/pages/Project.tsx
+++ b/apps/web/src/pages/Project.tsx
@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
-import { Plus, MessageSquare, Trash2, ChevronDown, ChevronRight, RotateCcw } from 'lucide-react';
+import { Plus, MessageSquare, Trash2, ChevronDown, ChevronRight, RotateCcw, Menu } from 'lucide-react';
 import { toast } from 'sonner';
 import { api } from '@/api/client';
 import type { Project as ProjectType, Session } from '@/api/types';
 import { Button } from '@/components/ui/button';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { useSessions } from '@/hooks/useSessions';
 import { useSidebarDrawer } from '@/hooks/useSidebarDrawer';
 import { useViewport } from '@/hooks/useViewport';
 export function Project() {
  const { id } = useParams<{ id: string }>();
@@ -16,6 +18,8 @@ export function Project() {
  const [creating, setCreating] = useState(false);
  const [archivedSessions, setArchivedSessions] = useState<Session[] | null>(null);
  const [showArchived, setShowArchived] = useState(false);
  const { setOpen: setDrawerOpen } = useSidebarDrawer();
  const { isMobile } = useViewport();
  useEffect(() => {
    if (!id) return;
@@ -76,18 +80,33 @@ export function Project() {
  return (
    <div className="flex-1 flex flex-col">
-      <header className="border-b px-6 py-3 flex items-center justify-between">
+      <header
-        <div>
+        className="border-b px-3 sm:px-6 py-2 sm:py-3 flex items-center justify-between gap-2"
-          <h1 className="text-lg font-semibold tracking-tight">
+        style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}
-            {project?.name ?? '…'}
+      >
-          </h1>
+        <div className="flex items-center gap-2 min-w-0">
-          <div className="text-xs text-muted-foreground font-mono">
+          {isMobile && (
-            {project?.path}
+            <button
              type="button"
              onClick={() => setDrawerOpen(true)}
              className="inline-flex items-center justify-center -ml-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
              aria-label="Open sidebar"
            >
              <Menu className="size-5" />
            </button>
          )}
          <div className="min-w-0">
            <h1 className="text-base sm:text-lg font-semibold tracking-tight truncate">
              {project?.name ?? '…'}
            </h1>
            <div className="text-xs text-muted-foreground font-mono truncate hidden sm:block">
              {project?.path}
            </div>
          </div>
        </div>
-        <Button onClick={handleNew} disabled={creating}>
+        <Button onClick={handleNew} disabled={creating} className="shrink-0" aria-label="New session">
          <Plus />
-          New session
+          <span className="hidden sm:inline">New session</span>
        </Button>
      </header>
--- a/apps/web/src/pages/Session.tsx
+++ b/apps/web/src/pages/Session.tsx
@@ -1,77 +1,162 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import {
-import { ChevronRight } from 'lucide-react';
+  Link,
  useLocation,
  useNavigate,
  useParams,
  useSearchParams,
 } from 'react-router-dom';
 import { ChevronRight, FolderTree, Menu } from 'lucide-react';
 import { api } from '@/api/client';
 import type { Project, Session as SessionType } from '@/api/types';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { useActivePane } from '@/hooks/useActivePane';
 import { useSidebarDrawer } from '@/hooks/useSidebarDrawer';
 import { useRightRailDrawer } from '@/hooks/useRightRailDrawer';
 import { useViewport } from '@/hooks/useViewport';
 import { useWorkspacePanes, MAX_PANES } from '@/hooks/useWorkspacePanes';
 import { useSessionChats } from '@/hooks/useSessionChats';
 import { useProjectGit } from '@/hooks/useProjectGit';
 import { Workspace } from '@/components/Workspace';
 import { ModelPicker } from '@/components/ModelPicker';
 import { MobileTabSwitcher } from '@/components/MobileTabSwitcher';
 import { NewPaneMenu } from '@/components/NewPaneMenu';
 import { cn } from '@/lib/utils';
 export function Session() {
  const { id } = useParams<{ id: string }>();
  if (!id) return null;
  // v1.8: key on id so route navigation remounts SessionInner — the hoisted
  // useWorkspacePanes + useSessionChats then reinitialize cleanly from the
  // new sessionId instead of carrying stale state across sessions.
  return <SessionInner key={id} sessionId={id} />;
 }
 function SessionInner({ sessionId }: { sessionId: string }) {
  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams] = useSearchParams();
  const [session, setSession] = useState<SessionType | null>(null);
  const [project, setProject] = useState<Project | null>(null);
  const [name, setName] = useState('');
  const [editingName, setEditingName] = useState(false);
  const active = useActivePane();
  const { setOpen: setDrawerOpen } = useSidebarDrawer();
  const { toggle: toggleRightRail } = useRightRailDrawer();
  const { isMobile } = useViewport();
  // v1.8: pane + chat state hoisted into Session so the mobile header pill
  // (MobileTabSwitcher) shares one source of truth with the pane grid below.
  const panesHook = useWorkspacePanes(sessionId);
  const {
    panes,
    activePaneIdx,
    setActivePaneIdx,
    openChatInPane,
    activePaneIdxRef,
    addSplitPane,
    removePane,
    removeChatFromPanes,
    initializeFirstChatIfEmpty,
  } = panesHook;
  const openChatInActivePane = useCallback(
    (chatId: string) => openChatInPane(activePaneIdxRef.current, chatId),
    [openChatInPane, activePaneIdxRef],
  );
  const chatsHook = useSessionChats(sessionId, {
    removeChatFromPanes,
    openChatInPane,
    openChatInActivePane,
    initializeFirstChatIfEmpty,
  });
  const { chats, renameChat } = chatsHook;
  // v1.8 Level 1: branch indicator. Polls every 30s; server caches the same
  // span so back-to-back loads are cheap. Returns null until the first fetch
  // resolves or if the project isn't a git repo.
  const git = useProjectGit(project?.id);
  useEffect(() => {
    if (!id) return;
    setSession(null);
    setProject(null);
    let cancelled = false;
    api.sessions
-      .get(id)
+      .get(sessionId)
      .then((s) => {
        if (cancelled) return;
        setSession(s);
        setName(s.name);
        sessionEvents.emit({
          type: 'session_loaded',
-          session_id: id,
+          session_id: sessionId,
          project_id: s.project_id,
        });
        // Load project for breadcrumb. Listing is fine — small N, cached by client.
        api.projects.list().then((projects) => {
          if (cancelled) return;
          const p = projects.find((x) => x.id === s.project_id);
          if (p) setProject(p);
-        }).catch(() => {});
+        }).catch((err) => console.warn('Session: failed to load project for breadcrumb', err));
      })
-      .catch(() => {});
+      .catch((err) => console.warn('Session: failed to fetch session', err));
    return () => {
      cancelled = true;
    };
-  }, [id]);
+  }, [sessionId]);
  useEffect(() => {
    if (!id) return;
    return sessionEvents.subscribe((event) => {
-      if (event.type === 'session_renamed' && event.session_id === id) {
+      if (event.type === 'session_renamed' && event.session_id === sessionId) {
        setSession((prev) => (prev ? { ...prev, name: event.name } : prev));
        setName((prev) => (editingName ? prev : event.name));
        return;
      }
      if (
        (event.type === 'session_deleted' || event.type === 'session_archived') &&
-        event.session_id === id
+        event.session_id === sessionId
      ) {
        navigate(`/project/${event.project_id}`);
      }
    });
-  }, [id, editingName, navigate]);
+  }, [sessionId, editingName, navigate]);
  // v1.8: URL ?pane= sync (mobile only). Lifted from Workspace.tsx so
  // MobileTabSwitcher's onSwitchPane can push the same URL state and the
  // browser Back button continues to walk pane history on mobile.
  useEffect(() => {
    if (!isMobile || panes.length === 0) return;
    const paneId = searchParams.get('pane');
    if (!paneId) {
      if (activePaneIdx !== 0) setActivePaneIdx(0);
      return;
    }
    const idx = panes.findIndex((p) => p.id === paneId);
    if (idx >= 0 && idx !== activePaneIdx) setActivePaneIdx(idx);
  }, [isMobile, searchParams, panes, activePaneIdx, setActivePaneIdx]);
  const switchActivePane = useCallback(
    (idx: number) => {
      setActivePaneIdx(idx);
      if (isMobile) {
        const pane = panes[idx];
        if (!pane) return;
        const params = new URLSearchParams(location.search);
        params.set('pane', pane.id);
        navigate(`${location.pathname}?${params.toString()}`);
      }
    },
    [setActivePaneIdx, isMobile, panes, navigate, location.pathname, location.search],
  );
  async function saveName() {
-    if (!id || !session) return;
+    if (!session) return;
    const trimmed = name.trim();
    if (!trimmed || trimmed === session.name) {
      setName(session.name);
      setEditingName(false);
      return;
    }
-    const updated = await api.sessions.update(id, { name: trimmed });
+    const updated = await api.sessions.update(sessionId, { name: trimmed });
    setSession(updated);
    setEditingName(false);
    // Server publishes session_renamed via broker.publishUser; no local emit needed.
@@ -79,80 +164,180 @@ export function Session() {
  // Workspace only sets activeFile for file-browser panes; checking it alone
  // suffices and is forward-compatible with future pane kinds.
-  const showActiveFile = active.sessionId === id && !!active.activeFile;
+  const showActiveFile = active.sessionId === sessionId && !!active.activeFile;
  return (
    <div className="flex-1 flex flex-col min-h-0">
-      <header className="border-b px-4 py-2 flex items-center gap-1.5 shrink-0 text-sm">
+      <header
-        <Link to="/" className="text-muted-foreground hover:text-foreground">
+        className={cn(
-          Projects
+          'border-b shrink-0 text-sm',
-        </Link>
+          isMobile
-        <ChevronRight className="size-3 text-muted-foreground/60" />
+            ? 'flex flex-col gap-1.5 px-3 py-2'
-        {project ? (
+            : 'flex items-center gap-1.5 px-3 sm:px-4 py-2',
          <Link
            to={`/project/${project.id}`}
            className="text-muted-foreground hover:text-foreground truncate max-w-[200px]"
            title={project.name}
          >
            {project.name}
          </Link>
        ) : (
          <span className="text-muted-foreground/60">…</span>
        )}
-        <ChevronRight className="size-3 text-muted-foreground/60" />
+        style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}
-        {editingName ? (
+      >
-          <input
+        {isMobile ? (
            autoFocus
            value={name}
            onChange={(e) => setName(e.target.value)}
            onBlur={() => void saveName()}
            onKeyDown={(e) => {
              if (e.key === 'Enter') void saveName();
              if (e.key === 'Escape') {
                setName(session?.name ?? '');
                setEditingName(false);
              }
            }}
            className="bg-transparent border-b border-border px-1 py-0.5 text-sm font-medium outline-none focus:border-ring"
          />
        ) : (
          <button
            type="button"
            className="text-sm font-medium hover:underline truncate max-w-[280px]"
            onClick={() => setEditingName(true)}
            title={session?.name ?? ''}
          >
            {session?.name ?? '…'}
          </button>
        )}
        {showActiveFile && active.activeFile && (
          <>
-            <span className="text-muted-foreground/40 mx-1">·</span>
+            {/* v1.8 mobile row 1: hamburger | repo+branch | ModelPicker | FolderTree.
-            <span
+                Gear/kebab cluster lands in Batch 7; ModelPicker stays here until
-              className="text-xs font-mono text-muted-foreground truncate max-w-[320px]"
+                then so mobile users keep model-switching access. */}
-              title={active.activeFile}
+            <div className="flex items-center gap-1.5">
-            >
+              <button
-              {active.activeFile}
+                type="button"
-            </span>
+                onClick={() => setDrawerOpen(true)}
-          </>
+                className="inline-flex items-center justify-center -ml-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
-        )}
+                aria-label="Open sidebar"
-        <div className="ml-auto">
+              >
-          {session && (
+                <Menu className="size-5" />
-            <div className="inline-flex items-center rounded-full bg-muted/40 hover:bg-muted/70 px-1">
+              </button>
-              <ModelPicker
+
-                value={session.model}
+              <div className="flex-1 min-w-0 flex items-center justify-center gap-1.5">
-                onChange={async (model) => {
+                {project ? (
-                  const updated = await api.sessions.update(session.id, { model });
+                  <span className="text-sm font-medium truncate" title={project.name}>
-                  setSession(updated);
+                    {project.name}
-                }}
+                  </span>
                ) : (
                  <span className="text-muted-foreground/60">…</span>
                )}
                {git?.branch && (
                  <span
                    className="text-muted-foreground/80 text-xs truncate"
                    title={`branch: ${git.branch}${git.is_dirty ? ' (dirty)' : ''}`}
                  >
                    · {git.branch}
                  </span>
                )}
              </div>
              {session && (
                <div className="inline-flex items-center rounded-full bg-muted/40 hover:bg-muted/70 px-1 shrink-0">
                  <ModelPicker
                    value={session.model}
                    onChange={async (model) => {
                      const updated = await api.sessions.update(session.id, { model });
                      setSession(updated);
                    }}
                  />
                </div>
              )}
              <button
                type="button"
                onClick={toggleRightRail}
                className="inline-flex items-center justify-center -mr-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
                aria-label="Toggle file browser"
              >
                <FolderTree className="size-5" />
              </button>
            </div>
            {/* v1.8 mobile row 2: pane-switcher pill + new-pane menu. Pill
                expands; NewPaneMenu is the trailing 44x44 trigger. */}
            <div className="flex items-center gap-1.5">
              <MobileTabSwitcher
                panes={panes}
                activePaneIdx={activePaneIdx}
                chats={chats}
                onSwitchPane={switchActivePane}
                onRemovePane={removePane}
                onRenameChat={renameChat}
              />
              <NewPaneMenu
                onAddPane={addSplitPane}
                disabled={panes.length >= MAX_PANES}
              />
            </div>
-          )}
+          </>
-        </div>
+        ) : (
          <>
            {/* Desktop: unchanged single-row header. */}
            <div className="hidden sm:flex items-center gap-1.5 min-w-0">
              <Link to="/" className="text-muted-foreground hover:text-foreground shrink-0 text-xs">
                Projects
              </Link>
              <ChevronRight className="size-3 text-muted-foreground/60 shrink-0" />
              {project ? (
                <Link
                  to={`/project/${project.id}`}
                  className="text-muted-foreground hover:text-foreground truncate max-w-[200px]"
                  title={project.name}
                >
                  {project.name}
                </Link>
              ) : (
                <span className="text-muted-foreground/60">…</span>
              )}
              <ChevronRight className="size-3 text-muted-foreground/60 shrink-0" />
            </div>
            {editingName ? (
              <input
                autoFocus
                value={name}
                onChange={(e) => setName(e.target.value)}
                onBlur={() => void saveName()}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') void saveName();
                  if (e.key === 'Escape') {
                    setName(session?.name ?? '');
                    setEditingName(false);
                  }
                }}
                className="bg-transparent border-b border-border px-1 py-0.5 text-sm font-medium outline-none focus:border-ring min-w-0"
              />
            ) : (
              <button
                type="button"
                className="text-sm font-medium hover:underline truncate max-w-[280px] min-w-0"
                onClick={() => setEditingName(true)}
                title={session?.name ?? ''}
              >
                {session?.name ?? '…'}
              </button>
            )}
            {showActiveFile && active.activeFile && (
              <>
                <span className="text-muted-foreground/40 mx-1">·</span>
                <span
                  className="text-xs font-mono text-muted-foreground truncate max-w-[200px]"
                  title={active.activeFile}
                >
                  {active.activeFile}
                </span>
              </>
            )}
            <div className="ml-auto shrink-0">
              {session && (
                <div className="inline-flex items-center rounded-full bg-muted/40 hover:bg-muted/70 px-1">
                  <ModelPicker
                    value={session.model}
                    onChange={async (model) => {
                      const updated = await api.sessions.update(session.id, { model });
                      setSession(updated);
                    }}
                  />
                </div>
              )}
            </div>
          </>
        )}
      </header>
-      {id && session && (
+      {session && (
-        <Workspace sessionId={id} projectId={session.project_id} />
+        <Workspace
          sessionId={sessionId}
          projectId={session.project_id}
          agentId={session.agent_id}
          onAgentChange={async (agent_id) => {
            const updated = await api.sessions.update(session.id, { agent_id });
            setSession(updated);
          }}
          panesHook={panesHook}
          chatsHook={chatsHook}
        />
      )}
    </div>
  );
--- a/apps/web/src/pages/Settings.tsx
+++ b/apps/web/src/pages/Settings.tsx
@@ -0,0 +1,125 @@
 import { useState } from 'react';
 import { Check } from 'lucide-react';
 import { toast } from 'sonner';
 import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { THEMES, setTheme, useTheme, type ThemeId, type ThemeMode } from '@/lib/theme';
 import { cn } from '@/lib/utils';
 const MODES: { value: ThemeMode; label: string; hint: string }[] = [
  { value: 'dark', label: 'Dark', hint: 'Use the dark variant.' },
  { value: 'light', label: 'Light', hint: 'Use the light variant.' },
  { value: 'system', label: 'System', hint: 'Follow OS preference.' },
 ];
 export function Settings() {
  const { id: currentId, mode: currentMode } = useTheme();
  // Track the most recent in-flight pick so the picker can show a subtle
  // "applying…" state on the targeted card while the PATCH is in flight.
  const [pending, setPending] = useState<{ kind: 'theme'; id: ThemeId } | { kind: 'mode'; mode: ThemeMode } | null>(null);
  async function pickTheme(id: ThemeId) {
    if (id === currentId || pending) return;
    setPending({ kind: 'theme', id });
    try {
      await setTheme(id, currentMode);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to apply theme');
    } finally {
      setPending(null);
    }
  }
  async function pickMode(mode: ThemeMode) {
    if (mode === currentMode || pending) return;
    setPending({ kind: 'mode', mode });
    try {
      await setTheme(currentId, mode);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to apply mode');
    } finally {
      setPending(null);
    }
  }
  return (
    <div className="flex-1 overflow-y-auto">
      <div className="max-w-[1000px] mx-auto w-full px-6 py-6 space-y-8">
        <header>
          <h1 className="text-xl font-semibold">Settings</h1>
          <p className="text-sm text-muted-foreground mt-1">
            Theme appearance. Saved on change, applies immediately.
          </p>
        </header>
        <section className="space-y-3">
          <h2 className="text-sm font-medium">Mode</h2>
          <RadioGroup
            value={currentMode}
            onValueChange={(v) => void pickMode(v as ThemeMode)}
            className="flex flex-wrap gap-4"
          >
            {MODES.map((m) => (
              <div key={m.value} className="flex items-center gap-2">
                <RadioGroupItem id={`mode-${m.value}`} value={m.value} />
                <Label htmlFor={`mode-${m.value}`} className="cursor-pointer">
                  <span className="font-medium">{m.label}</span>
                  <span className="ml-2 text-xs text-muted-foreground">{m.hint}</span>
                </Label>
              </div>
            ))}
          </RadioGroup>
        </section>
        <section className="space-y-3">
          <h2 className="text-sm font-medium">Theme</h2>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {THEMES.map((t) => {
              const isActive = t.id === currentId;
              const isPending = pending?.kind === 'theme' && pending.id === t.id;
              const isLightOnly = !t.supportsDark;
              return (
                <Card
                  key={t.id}
                  onClick={() => void pickTheme(t.id)}
                  className={cn(
                    'p-3 cursor-pointer transition-colors',
                    'hover:bg-accent/10',
                    isActive && 'ring-2 ring-ring',
                    isPending && 'opacity-60',
                  )}
                >
                  <div className="flex items-center justify-between gap-2">
                    <div className="min-w-0">
                      <div className="font-mono text-sm truncate">{t.name}</div>
                      <div className="text-xs text-muted-foreground">{t.family}</div>
                    </div>
                    {isActive && (
                      <span className="inline-flex items-center gap-1 text-xs text-primary shrink-0">
                        <Check className="size-3" /> Selected
                      </span>
                    )}
                  </div>
                  <div className="flex mt-2 rounded overflow-hidden border border-border/40">
                    {t.anchors.map((hex, i) => (
                      <div
                        key={i}
                        className="flex-1 h-6"
                        style={{ backgroundColor: hex }}
                        aria-hidden="true"
                      />
                    ))}
                  </div>
                  {isLightOnly && (
                    <div className="mt-2 text-xs text-muted-foreground italic">Light only</div>
                  )}
                </Card>
              );
            })}
          </div>
        </section>
      </div>
    </div>
  );
 }
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -4,6 +4,29 @@
@import "@fontsource-variable/inter";
@import "@fontsource-variable/jetbrains-mono";
 /* themes-v1: 18 preset palettes. Order matches docs/themes_v1.md §1 with
   obsidian first (default). Each file declares .theme-<id> for the light
   variant and .theme-<id>.dark for the dark variant (except ivory/chalk
   which are light-only). lib/theme.ts owns the class composition on <html>. */
@import "./themes/obsidian.css";
@import "./themes/gunmetal.css";
@import "./themes/espresso.css";
@import "./themes/volcanic-brown.css";
@import "./themes/copper.css";
@import "./themes/gold.css";
@import "./themes/oxblood.css";
@import "./themes/crimson.css";
@import "./themes/elderflower.css";
@import "./themes/plum.css";
@import "./themes/steel-pink.css";
@import "./themes/fuchsia-noir.css";
@import "./themes/matrix.css";
@import "./themes/sage.css";
@import "./themes/ivory.css";
@import "./themes/chalk.css";
@import "./themes/cobalt.css";
@import "./themes/midnight-sapphire.css";
@custom-variant dark (&:is(.dark *));
 :root {
--- a/apps/web/src/styles/themes/chalk.css
+++ b/apps/web/src/styles/themes/chalk.css
@@ -0,0 +1,33 @@
 /* themes-v1: Chalk (family: light-only).
   Anchors used directly as light palette: #fafaf7 #f0f0ec #e5e5e0 #75756e #2a2a28.
   No .theme-chalk.dark — selecting dark mode on chalk falls back to obsidian
   dark via lib/theme.ts. */
 .theme-chalk {
  --background: #fafaf7;
  --foreground: #2a2a28;
  --card: #f0f0ec;
  --card-foreground: #2a2a28;
  --popover: #f0f0ec;
  --popover-foreground: #2a2a28;
  --primary: #2a2a28;
  --primary-foreground: #fafaf7;
  --secondary: #e5e5e0;
  --secondary-foreground: #2a2a28;
  --muted: #e5e5e0;
  --muted-foreground: #75756e;
  --accent: #2a2a28;
  --accent-foreground: #fafaf7;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #e5e5e0;
  --input: #e5e5e0;
  --ring: #2a2a28;
  --sidebar: #f0f0ec;
  --sidebar-foreground: #2a2a28;
  --sidebar-primary: #2a2a28;
  --sidebar-primary-foreground: #fafaf7;
  --sidebar-accent: #e5e5e0;
  --sidebar-accent-foreground: #2a2a28;
  --sidebar-border: #e5e5e0;
  --sidebar-ring: #2a2a28;
 }
--- a/apps/web/src/styles/themes/cobalt.css
+++ b/apps/web/src/styles/themes/cobalt.css
@@ -0,0 +1,60 @@
 /* themes-v1: Cobalt (family: blue).
   Dark anchors: #020817 #061434 #0c2244 #3060a0 #0047ab. */
 .theme-cobalt {
  --background: #f4f8ff;
  --foreground: #0a1428;
  --card: #e8f0fc;
  --card-foreground: #0a1428;
  --popover: #e8f0fc;
  --popover-foreground: #0a1428;
  --primary: #003278;
  --primary-foreground: #ffffff;
  --secondary: #d4e0f4;
  --secondary-foreground: #0a1428;
  --muted: #d4e0f4;
  --muted-foreground: #284878;
  --accent: #003278;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #d4e0f4;
  --input: #d4e0f4;
  --ring: #003278;
  --sidebar: #e8f0fc;
  --sidebar-foreground: #0a1428;
  --sidebar-primary: #003278;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #d4e0f4;
  --sidebar-accent-foreground: #0a1428;
  --sidebar-border: #d4e0f4;
  --sidebar-ring: #003278;
 }
 .theme-cobalt.dark {
  --background: #020817;
  --foreground: #dce4f0;
  --card: #061434;
  --card-foreground: #dce4f0;
  --popover: #061434;
  --popover-foreground: #dce4f0;
  --primary: #0047ab;
  --primary-foreground: #dce4f0;
  --secondary: #0c2244;
  --secondary-foreground: #dce4f0;
  --muted: #0c2244;
  --muted-foreground: #3060a0;
  --accent: #0047ab;
  --accent-foreground: #dce4f0;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #0c2244;
  --input: #0c2244;
  --ring: #0047ab;
  --sidebar: #061434;
  --sidebar-foreground: #dce4f0;
  --sidebar-primary: #0047ab;
  --sidebar-primary-foreground: #dce4f0;
  --sidebar-accent: #0047ab;
  --sidebar-accent-foreground: #dce4f0;
  --sidebar-border: #0c2244;
  --sidebar-ring: #0047ab;
 }
--- a/apps/web/src/styles/themes/copper.css
+++ b/apps/web/src/styles/themes/copper.css
@@ -0,0 +1,60 @@
 /* themes-v1: Copper (family: orange/amber).
   Dark anchors: #100800 #1c1408 #2e1f0a #8a6040 #b87333. */
 .theme-copper {
  --background: #fdf8f0;
  --foreground: #2a1f0a;
  --card: #faf0e0;
  --card-foreground: #2a1f0a;
  --popover: #faf0e0;
  --popover-foreground: #2a1f0a;
  --primary: #8a5424;
  --primary-foreground: #ffffff;
  --secondary: #f0e0c0;
  --secondary-foreground: #2a1f0a;
  --muted: #f0e0c0;
  --muted-foreground: #6e4828;
  --accent: #8a5424;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #f0e0c0;
  --input: #f0e0c0;
  --ring: #8a5424;
  --sidebar: #faf0e0;
  --sidebar-foreground: #2a1f0a;
  --sidebar-primary: #8a5424;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f0e0c0;
  --sidebar-accent-foreground: #2a1f0a;
  --sidebar-border: #f0e0c0;
  --sidebar-ring: #8a5424;
 }
 .theme-copper.dark {
  --background: #100800;
  --foreground: #f8e8c8;
  --card: #1c1408;
  --card-foreground: #f8e8c8;
  --popover: #1c1408;
  --popover-foreground: #f8e8c8;
  --primary: #b87333;
  --primary-foreground: #100800;
  --secondary: #2e1f0a;
  --secondary-foreground: #f8e8c8;
  --muted: #2e1f0a;
  --muted-foreground: #8a6040;
  --accent: #b87333;
  --accent-foreground: #100800;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2e1f0a;
  --input: #2e1f0a;
  --ring: #b87333;
  --sidebar: #1c1408;
  --sidebar-foreground: #f8e8c8;
  --sidebar-primary: #b87333;
  --sidebar-primary-foreground: #100800;
  --sidebar-accent: #b87333;
  --sidebar-accent-foreground: #100800;
  --sidebar-border: #2e1f0a;
  --sidebar-ring: #b87333;
 }
--- a/apps/web/src/styles/themes/crimson.css
+++ b/apps/web/src/styles/themes/crimson.css
@@ -0,0 +1,60 @@
 /* themes-v1: Crimson (family: red/crimson).
   Dark anchors: #0e0404 #1a0808 #2e0a0a #8a3030 #dc143c. */
 .theme-crimson {
  --background: #fef4f6;
  --foreground: #2a0a12;
  --card: #fde6ea;
  --card-foreground: #2a0a12;
  --popover: #fde6ea;
  --popover-foreground: #2a0a12;
  --primary: #a40e2d;
  --primary-foreground: #ffffff;
  --secondary: #f4d0d8;
  --secondary-foreground: #2a0a12;
  --muted: #f4d0d8;
  --muted-foreground: #6a2030;
  --accent: #a40e2d;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #f4d0d8;
  --input: #f4d0d8;
  --ring: #a40e2d;
  --sidebar: #fde6ea;
  --sidebar-foreground: #2a0a12;
  --sidebar-primary: #a40e2d;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f4d0d8;
  --sidebar-accent-foreground: #2a0a12;
  --sidebar-border: #f4d0d8;
  --sidebar-ring: #a40e2d;
 }
 .theme-crimson.dark {
  --background: #0e0404;
  --foreground: #f0d4d8;
  --card: #1a0808;
  --card-foreground: #f0d4d8;
  --popover: #1a0808;
  --popover-foreground: #f0d4d8;
  --primary: #dc143c;
  --primary-foreground: #0e0404;
  --secondary: #2e0a0a;
  --secondary-foreground: #f0d4d8;
  --muted: #2e0a0a;
  --muted-foreground: #8a3030;
  --accent: #dc143c;
  --accent-foreground: #0e0404;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2e0a0a;
  --input: #2e0a0a;
  --ring: #dc143c;
  --sidebar: #1a0808;
  --sidebar-foreground: #f0d4d8;
  --sidebar-primary: #dc143c;
  --sidebar-primary-foreground: #0e0404;
  --sidebar-accent: #dc143c;
  --sidebar-accent-foreground: #0e0404;
  --sidebar-border: #2e0a0a;
  --sidebar-ring: #dc143c;
 }
--- a/apps/web/src/styles/themes/elderflower.css
+++ b/apps/web/src/styles/themes/elderflower.css
@@ -0,0 +1,60 @@
 /* themes-v1: Elderflower (family: purple/violet).
   Dark anchors: #100818 #1c1024 #2c1830 #8a78a0 #b89cd8. */
 .theme-elderflower {
  --background: #faf8fd;
  --foreground: #1f1428;
  --card: #f4eef9;
  --card-foreground: #1f1428;
  --popover: #f4eef9;
  --popover-foreground: #1f1428;
  --primary: #8a70b4;
  --primary-foreground: #ffffff;
  --secondary: #e8def0;
  --secondary-foreground: #1f1428;
  --muted: #e8def0;
  --muted-foreground: #6e5a82;
  --accent: #8a70b4;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #e8def0;
  --input: #e8def0;
  --ring: #8a70b4;
  --sidebar: #f4eef9;
  --sidebar-foreground: #1f1428;
  --sidebar-primary: #8a70b4;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e8def0;
  --sidebar-accent-foreground: #1f1428;
  --sidebar-border: #e8def0;
  --sidebar-ring: #8a70b4;
 }
 .theme-elderflower.dark {
  --background: #100818;
  --foreground: #ece4f0;
  --card: #1c1024;
  --card-foreground: #ece4f0;
  --popover: #1c1024;
  --popover-foreground: #ece4f0;
  --primary: #b89cd8;
  --primary-foreground: #100818;
  --secondary: #2c1830;
  --secondary-foreground: #ece4f0;
  --muted: #2c1830;
  --muted-foreground: #8a78a0;
  --accent: #b89cd8;
  --accent-foreground: #100818;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2c1830;
  --input: #2c1830;
  --ring: #b89cd8;
  --sidebar: #1c1024;
  --sidebar-foreground: #ece4f0;
  --sidebar-primary: #b89cd8;
  --sidebar-primary-foreground: #100818;
  --sidebar-accent: #b89cd8;
  --sidebar-accent-foreground: #100818;
  --sidebar-border: #2c1830;
  --sidebar-ring: #b89cd8;
 }
--- a/apps/web/src/styles/themes/espresso.css
+++ b/apps/web/src/styles/themes/espresso.css
@@ -0,0 +1,60 @@
 /* themes-v1: Espresso (family: brown/earth).
   Dark anchors: #1c1410 #241a14 #2e2218 #8a7058 #c8a880. */
 .theme-espresso {
  --background: #faf6f0;
  --foreground: #2a1f15;
  --card: #f3ece0;
  --card-foreground: #2a1f15;
  --popover: #f3ece0;
  --popover-foreground: #2a1f15;
  --primary: #9c7948;
  --primary-foreground: #ffffff;
  --secondary: #e6dccc;
  --secondary-foreground: #2a1f15;
  --muted: #e6dccc;
  --muted-foreground: #6e5944;
  --accent: #9c7948;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #e6dccc;
  --input: #e6dccc;
  --ring: #9c7948;
  --sidebar: #f3ece0;
  --sidebar-foreground: #2a1f15;
  --sidebar-primary: #9c7948;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e6dccc;
  --sidebar-accent-foreground: #2a1f15;
  --sidebar-border: #e6dccc;
  --sidebar-ring: #9c7948;
 }
 .theme-espresso.dark {
  --background: #1c1410;
  --foreground: #f0e8d8;
  --card: #241a14;
  --card-foreground: #f0e8d8;
  --popover: #241a14;
  --popover-foreground: #f0e8d8;
  --primary: #c8a880;
  --primary-foreground: #1c1410;
  --secondary: #2e2218;
  --secondary-foreground: #f0e8d8;
  --muted: #2e2218;
  --muted-foreground: #8a7058;
  --accent: #c8a880;
  --accent-foreground: #1c1410;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2e2218;
  --input: #2e2218;
  --ring: #c8a880;
  --sidebar: #241a14;
  --sidebar-foreground: #f0e8d8;
  --sidebar-primary: #c8a880;
  --sidebar-primary-foreground: #1c1410;
  --sidebar-accent: #c8a880;
  --sidebar-accent-foreground: #1c1410;
  --sidebar-border: #2e2218;
  --sidebar-ring: #c8a880;
 }
--- a/apps/web/src/styles/themes/fuchsia-noir.css
+++ b/apps/web/src/styles/themes/fuchsia-noir.css
@@ -0,0 +1,60 @@
 /* themes-v1: Fuchsia Noir (family: pink/magenta).
   Dark anchors: #0a0610 #14081a #2a0c2e #8a3878 #ff1493. */
 .theme-fuchsia-noir {
  --background: #fdf4f8;
  --foreground: #2a0a1c;
  --card: #fbe6f0;
  --card-foreground: #2a0a1c;
  --popover: #fbe6f0;
  --popover-foreground: #2a0a1c;
  --primary: #c20070;
  --primary-foreground: #ffffff;
  --secondary: #f4d0e4;
  --secondary-foreground: #2a0a1c;
  --muted: #f4d0e4;
  --muted-foreground: #7a2860;
  --accent: #c20070;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #f4d0e4;
  --input: #f4d0e4;
  --ring: #c20070;
  --sidebar: #fbe6f0;
  --sidebar-foreground: #2a0a1c;
  --sidebar-primary: #c20070;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f4d0e4;
  --sidebar-accent-foreground: #2a0a1c;
  --sidebar-border: #f4d0e4;
  --sidebar-ring: #c20070;
 }
 .theme-fuchsia-noir.dark {
  --background: #0a0610;
  --foreground: #f0d8e8;
  --card: #14081a;
  --card-foreground: #f0d8e8;
  --popover: #14081a;
  --popover-foreground: #f0d8e8;
  --primary: #ff1493;
  --primary-foreground: #0a0610;
  --secondary: #2a0c2e;
  --secondary-foreground: #f0d8e8;
  --muted: #2a0c2e;
  --muted-foreground: #8a3878;
  --accent: #ff1493;
  --accent-foreground: #0a0610;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2a0c2e;
  --input: #2a0c2e;
  --ring: #ff1493;
  --sidebar: #14081a;
  --sidebar-foreground: #f0d8e8;
  --sidebar-primary: #ff1493;
  --sidebar-primary-foreground: #0a0610;
  --sidebar-accent: #ff1493;
  --sidebar-accent-foreground: #0a0610;
  --sidebar-border: #2a0c2e;
  --sidebar-ring: #ff1493;
 }
--- a/apps/web/src/styles/themes/gold.css
+++ b/apps/web/src/styles/themes/gold.css
@@ -0,0 +1,60 @@
 /* themes-v1: Gold (family: orange/amber).
   Dark anchors: #0e0800 #1a1200 #2a1f00 #a07c30 #d4af37. */
 .theme-gold {
  --background: #fffbf0;
  --foreground: #2a200a;
  --card: #fdf3d0;
  --card-foreground: #2a200a;
  --popover: #fdf3d0;
  --popover-foreground: #2a200a;
  --primary: #a18229;
  --primary-foreground: #ffffff;
  --secondary: #f0e0a0;
  --secondary-foreground: #2a200a;
  --muted: #f0e0a0;
  --muted-foreground: #786020;
  --accent: #a18229;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #f0e0a0;
  --input: #f0e0a0;
  --ring: #a18229;
  --sidebar: #fdf3d0;
  --sidebar-foreground: #2a200a;
  --sidebar-primary: #a18229;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f0e0a0;
  --sidebar-accent-foreground: #2a200a;
  --sidebar-border: #f0e0a0;
  --sidebar-ring: #a18229;
 }
 .theme-gold.dark {
  --background: #0e0800;
  --foreground: #fff0d0;
  --card: #1a1200;
  --card-foreground: #fff0d0;
  --popover: #1a1200;
  --popover-foreground: #fff0d0;
  --primary: #d4af37;
  --primary-foreground: #0e0800;
  --secondary: #2a1f00;
  --secondary-foreground: #fff0d0;
  --muted: #2a1f00;
  --muted-foreground: #a07c30;
  --accent: #d4af37;
  --accent-foreground: #0e0800;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2a1f00;
  --input: #2a1f00;
  --ring: #d4af37;
  --sidebar: #1a1200;
  --sidebar-foreground: #fff0d0;
  --sidebar-primary: #d4af37;
  --sidebar-primary-foreground: #0e0800;
  --sidebar-accent: #d4af37;
  --sidebar-accent-foreground: #0e0800;
  --sidebar-border: #2a1f00;
  --sidebar-ring: #d4af37;
 }
--- a/apps/web/src/styles/themes/gunmetal.css
+++ b/apps/web/src/styles/themes/gunmetal.css
@@ -0,0 +1,60 @@
 /* themes-v1: Gunmetal (family: charcoal/black).
   Dark anchors: #0d1117 #161b22 #21262d #7d8590 #388bfd. */
 .theme-gunmetal {
  --background: #fafafa;
  --foreground: #14181f;
  --card: #f1f3f6;
  --card-foreground: #14181f;
  --popover: #f1f3f6;
  --popover-foreground: #14181f;
  --primary: #0c6dd0;
  --primary-foreground: #ffffff;
  --secondary: #dde1e8;
  --secondary-foreground: #14181f;
  --muted: #dde1e8;
  --muted-foreground: #5a6470;
  --accent: #0c6dd0;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #dde1e8;
  --input: #dde1e8;
  --ring: #0c6dd0;
  --sidebar: #f1f3f6;
  --sidebar-foreground: #14181f;
  --sidebar-primary: #0c6dd0;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #dde1e8;
  --sidebar-accent-foreground: #14181f;
  --sidebar-border: #dde1e8;
  --sidebar-ring: #0c6dd0;
 }
 .theme-gunmetal.dark {
  --background: #0d1117;
  --foreground: #e6ecf0;
  --card: #161b22;
  --card-foreground: #e6ecf0;
  --popover: #161b22;
  --popover-foreground: #e6ecf0;
  --primary: #388bfd;
  --primary-foreground: #0d1117;
  --secondary: #21262d;
  --secondary-foreground: #e6ecf0;
  --muted: #21262d;
  --muted-foreground: #7d8590;
  --accent: #388bfd;
  --accent-foreground: #0d1117;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #21262d;
  --input: #21262d;
  --ring: #388bfd;
  --sidebar: #161b22;
  --sidebar-foreground: #e6ecf0;
  --sidebar-primary: #388bfd;
  --sidebar-primary-foreground: #0d1117;
  --sidebar-accent: #388bfd;
  --sidebar-accent-foreground: #0d1117;
  --sidebar-border: #21262d;
  --sidebar-ring: #388bfd;
 }
--- a/apps/web/src/styles/themes/ivory.css
+++ b/apps/web/src/styles/themes/ivory.css
@@ -0,0 +1,33 @@
 /* themes-v1: Ivory (family: light-only).
   Anchors used directly as light palette: #fdfcf8 #f5f2e8 #e8e4d8 #8a8478 #3a3328.
   No .theme-ivory.dark — selecting dark mode on ivory falls back to obsidian
   dark via lib/theme.ts. */
 .theme-ivory {
  --background: #fdfcf8;
  --foreground: #3a3328;
  --card: #f5f2e8;
  --card-foreground: #3a3328;
  --popover: #f5f2e8;
  --popover-foreground: #3a3328;
  --primary: #3a3328;
  --primary-foreground: #fdfcf8;
  --secondary: #e8e4d8;
  --secondary-foreground: #3a3328;
  --muted: #e8e4d8;
  --muted-foreground: #8a8478;
  --accent: #3a3328;
  --accent-foreground: #fdfcf8;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #e8e4d8;
  --input: #e8e4d8;
  --ring: #3a3328;
  --sidebar: #f5f2e8;
  --sidebar-foreground: #3a3328;
  --sidebar-primary: #3a3328;
  --sidebar-primary-foreground: #fdfcf8;
  --sidebar-accent: #e8e4d8;
  --sidebar-accent-foreground: #3a3328;
  --sidebar-border: #e8e4d8;
  --sidebar-ring: #3a3328;
 }
--- a/apps/web/src/styles/themes/matrix.css
+++ b/apps/web/src/styles/themes/matrix.css
@@ -0,0 +1,60 @@
 /* themes-v1: Matrix (family: green, neon).
   Dark anchors: #000a00 #031403 #0a200a #208030 #00ff41. */
 .theme-matrix {
  --background: #f0fff4;
  --foreground: #0a2a15;
  --card: #e0f8e8;
  --card-foreground: #0a2a15;
  --popover: #e0f8e8;
  --popover-foreground: #0a2a15;
  --primary: #00b830;
  --primary-foreground: #ffffff;
  --secondary: #c0e8d0;
  --secondary-foreground: #0a2a15;
  --muted: #c0e8d0;
  --muted-foreground: #208048;
  --accent: #00b830;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #c0e8d0;
  --input: #c0e8d0;
  --ring: #00b830;
  --sidebar: #e0f8e8;
  --sidebar-foreground: #0a2a15;
  --sidebar-primary: #00b830;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #c0e8d0;
  --sidebar-accent-foreground: #0a2a15;
  --sidebar-border: #c0e8d0;
  --sidebar-ring: #00b830;
 }
 .theme-matrix.dark {
  --background: #000a00;
  --foreground: #d8f8e0;
  --card: #031403;
  --card-foreground: #d8f8e0;
  --popover: #031403;
  --popover-foreground: #d8f8e0;
  --primary: #00ff41;
  --primary-foreground: #000a00;
  --secondary: #0a200a;
  --secondary-foreground: #d8f8e0;
  --muted: #0a200a;
  --muted-foreground: #208030;
  --accent: #00ff41;
  --accent-foreground: #000a00;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #0a200a;
  --input: #0a200a;
  --ring: #00ff41;
  --sidebar: #031403;
  --sidebar-foreground: #d8f8e0;
  --sidebar-primary: #00ff41;
  --sidebar-primary-foreground: #000a00;
  --sidebar-accent: #00ff41;
  --sidebar-accent-foreground: #000a00;
  --sidebar-border: #0a200a;
  --sidebar-ring: #00ff41;
 }
--- a/apps/web/src/styles/themes/midnight-sapphire.css
+++ b/apps/web/src/styles/themes/midnight-sapphire.css
@@ -0,0 +1,60 @@
 /* themes-v1: Midnight Sapphire (family: blue).
   Dark anchors: #02050e #060c1f #0e1a36 #4a6088 #1e3a8a. */
 .theme-midnight-sapphire {
  --background: #f4f6fc;
  --foreground: #0a1024;
  --card: #e6eaf6;
  --card-foreground: #0a1024;
  --popover: #e6eaf6;
  --popover-foreground: #0a1024;
  --primary: #142a60;
  --primary-foreground: #ffffff;
  --secondary: #d0d8ec;
  --secondary-foreground: #0a1024;
  --muted: #d0d8ec;
  --muted-foreground: #36507a;
  --accent: #142a60;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #d0d8ec;
  --input: #d0d8ec;
  --ring: #142a60;
  --sidebar: #e6eaf6;
  --sidebar-foreground: #0a1024;
  --sidebar-primary: #142a60;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #d0d8ec;
  --sidebar-accent-foreground: #0a1024;
  --sidebar-border: #d0d8ec;
  --sidebar-ring: #142a60;
 }
 .theme-midnight-sapphire.dark {
  --background: #02050e;
  --foreground: #dce0f0;
  --card: #060c1f;
  --card-foreground: #dce0f0;
  --popover: #060c1f;
  --popover-foreground: #dce0f0;
  --primary: #1e3a8a;
  --primary-foreground: #dce0f0;
  --secondary: #0e1a36;
  --secondary-foreground: #dce0f0;
  --muted: #0e1a36;
  --muted-foreground: #4a6088;
  --accent: #1e3a8a;
  --accent-foreground: #dce0f0;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #0e1a36;
  --input: #0e1a36;
  --ring: #1e3a8a;
  --sidebar: #060c1f;
  --sidebar-foreground: #dce0f0;
  --sidebar-primary: #1e3a8a;
  --sidebar-primary-foreground: #dce0f0;
  --sidebar-accent: #1e3a8a;
  --sidebar-accent-foreground: #dce0f0;
  --sidebar-border: #0e1a36;
  --sidebar-ring: #1e3a8a;
 }
--- a/apps/web/src/styles/themes/obsidian.css
+++ b/apps/web/src/styles/themes/obsidian.css
@@ -0,0 +1,60 @@
 /* themes-v1: Obsidian (family: charcoal/black). Default theme.
   Dark anchors: #0c0c0e #15151a #1f1f23 #6b6b75 #8b5cf6. Light variant per spec §3. */
 .theme-obsidian {
  --background: #fafafa;
  --foreground: #18181b;
  --card: #f4f4f5;
  --card-foreground: #18181b;
  --popover: #f4f4f5;
  --popover-foreground: #18181b;
  --primary: #6d40e8;
  --primary-foreground: #ffffff;
  --secondary: #e4e4e7;
  --secondary-foreground: #18181b;
  --muted: #e4e4e7;
  --muted-foreground: #71717a;
  --accent: #6d40e8;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #6d40e8;
  --sidebar: #f4f4f5;
  --sidebar-foreground: #18181b;
  --sidebar-primary: #6d40e8;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e4e4e7;
  --sidebar-accent-foreground: #18181b;
  --sidebar-border: #e4e4e7;
  --sidebar-ring: #6d40e8;
 }
 .theme-obsidian.dark {
  --background: #0c0c0e;
  --foreground: #ece9f0;
  --card: #15151a;
  --card-foreground: #ece9f0;
  --popover: #15151a;
  --popover-foreground: #ece9f0;
  --primary: #8b5cf6;
  --primary-foreground: #0c0c0e;
  --secondary: #1f1f23;
  --secondary-foreground: #ece9f0;
  --muted: #1f1f23;
  --muted-foreground: #6b6b75;
  --accent: #8b5cf6;
  --accent-foreground: #0c0c0e;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #1f1f23;
  --input: #1f1f23;
  --ring: #8b5cf6;
  --sidebar: #15151a;
  --sidebar-foreground: #ece9f0;
  --sidebar-primary: #8b5cf6;
  --sidebar-primary-foreground: #0c0c0e;
  --sidebar-accent: #8b5cf6;
  --sidebar-accent-foreground: #0c0c0e;
  --sidebar-border: #1f1f23;
  --sidebar-ring: #8b5cf6;
 }
--- a/apps/web/src/styles/themes/oxblood.css
+++ b/apps/web/src/styles/themes/oxblood.css
@@ -0,0 +1,60 @@
 /* themes-v1: Oxblood (family: red/crimson).
   Dark anchors: #0a0303 #180606 #2a0808 #7a3028 #8b1a1a. */
 .theme-oxblood {
  --background: #fdf4f4;
  --foreground: #2a0a0a;
  --card: #fae6e6;
  --card-foreground: #2a0a0a;
  --popover: #fae6e6;
  --popover-foreground: #2a0a0a;
  --primary: #5e1010;
  --primary-foreground: #ffffff;
  --secondary: #f0d0d0;
  --secondary-foreground: #2a0a0a;
  --muted: #f0d0d0;
  --muted-foreground: #582020;
  --accent: #5e1010;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #f0d0d0;
  --input: #f0d0d0;
  --ring: #5e1010;
  --sidebar: #fae6e6;
  --sidebar-foreground: #2a0a0a;
  --sidebar-primary: #5e1010;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f0d0d0;
  --sidebar-accent-foreground: #2a0a0a;
  --sidebar-border: #f0d0d0;
  --sidebar-ring: #5e1010;
 }
 .theme-oxblood.dark {
  --background: #0a0303;
  --foreground: #f0d8d8;
  --card: #180606;
  --card-foreground: #f0d8d8;
  --popover: #180606;
  --popover-foreground: #f0d8d8;
  --primary: #8b1a1a;
  --primary-foreground: #0a0303;
  --secondary: #2a0808;
  --secondary-foreground: #f0d8d8;
  --muted: #2a0808;
  --muted-foreground: #7a3028;
  --accent: #8b1a1a;
  --accent-foreground: #0a0303;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2a0808;
  --input: #2a0808;
  --ring: #8b1a1a;
  --sidebar: #180606;
  --sidebar-foreground: #f0d8d8;
  --sidebar-primary: #8b1a1a;
  --sidebar-primary-foreground: #0a0303;
  --sidebar-accent: #8b1a1a;
  --sidebar-accent-foreground: #0a0303;
  --sidebar-border: #2a0808;
  --sidebar-ring: #8b1a1a;
 }
--- a/apps/web/src/styles/themes/plum.css
+++ b/apps/web/src/styles/themes/plum.css
@@ -0,0 +1,60 @@
 /* themes-v1: Plum (family: purple/violet).
   Dark anchors: #0c0814 #180e20 #241830 #7a4878 #8e4585. */
 .theme-plum {
  --background: #fbf7fd;
  --foreground: #1f0f24;
  --card: #f4ebf6;
  --card-foreground: #1f0f24;
  --popover: #f4ebf6;
  --popover-foreground: #1f0f24;
  --primary: #6a3263;
  --primary-foreground: #ffffff;
  --secondary: #e8d8ea;
  --secondary-foreground: #1f0f24;
  --muted: #e8d8ea;
  --muted-foreground: #5e3858;
  --accent: #6a3263;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #e8d8ea;
  --input: #e8d8ea;
  --ring: #6a3263;
  --sidebar: #f4ebf6;
  --sidebar-foreground: #1f0f24;
  --sidebar-primary: #6a3263;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e8d8ea;
  --sidebar-accent-foreground: #1f0f24;
  --sidebar-border: #e8d8ea;
  --sidebar-ring: #6a3263;
 }
 .theme-plum.dark {
  --background: #0c0814;
  --foreground: #ecd8ec;
  --card: #180e20;
  --card-foreground: #ecd8ec;
  --popover: #180e20;
  --popover-foreground: #ecd8ec;
  --primary: #8e4585;
  --primary-foreground: #0c0814;
  --secondary: #241830;
  --secondary-foreground: #ecd8ec;
  --muted: #241830;
  --muted-foreground: #7a4878;
  --accent: #8e4585;
  --accent-foreground: #0c0814;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #241830;
  --input: #241830;
  --ring: #8e4585;
  --sidebar: #180e20;
  --sidebar-foreground: #ecd8ec;
  --sidebar-primary: #8e4585;
  --sidebar-primary-foreground: #0c0814;
  --sidebar-accent: #8e4585;
  --sidebar-accent-foreground: #0c0814;
  --sidebar-border: #241830;
  --sidebar-ring: #8e4585;
 }
--- a/apps/web/src/styles/themes/sage.css
+++ b/apps/web/src/styles/themes/sage.css
@@ -0,0 +1,60 @@
 /* themes-v1: Sage (family: green, warm).
   Dark anchors: #0a0e08 #141a10 #1e2e1a #7a8870 #9caf88. */
 .theme-sage {
  --background: #f4f8f0;
  --foreground: #1a2510;
  --card: #ebf2e2;
  --card-foreground: #1a2510;
  --popover: #ebf2e2;
  --popover-foreground: #1a2510;
  --primary: #708868;
  --primary-foreground: #ffffff;
  --secondary: #d8e2c8;
  --secondary-foreground: #1a2510;
  --muted: #d8e2c8;
  --muted-foreground: #5a6850;
  --accent: #708868;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #d8e2c8;
  --input: #d8e2c8;
  --ring: #708868;
  --sidebar: #ebf2e2;
  --sidebar-foreground: #1a2510;
  --sidebar-primary: #708868;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #d8e2c8;
  --sidebar-accent-foreground: #1a2510;
  --sidebar-border: #d8e2c8;
  --sidebar-ring: #708868;
 }
 .theme-sage.dark {
  --background: #0a0e08;
  --foreground: #e8eee0;
  --card: #141a10;
  --card-foreground: #e8eee0;
  --popover: #141a10;
  --popover-foreground: #e8eee0;
  --primary: #9caf88;
  --primary-foreground: #0a0e08;
  --secondary: #1e2e1a;
  --secondary-foreground: #e8eee0;
  --muted: #1e2e1a;
  --muted-foreground: #7a8870;
  --accent: #9caf88;
  --accent-foreground: #0a0e08;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #1e2e1a;
  --input: #1e2e1a;
  --ring: #9caf88;
  --sidebar: #141a10;
  --sidebar-foreground: #e8eee0;
  --sidebar-primary: #9caf88;
  --sidebar-primary-foreground: #0a0e08;
  --sidebar-accent: #9caf88;
  --sidebar-accent-foreground: #0a0e08;
  --sidebar-border: #1e2e1a;
  --sidebar-ring: #9caf88;
 }
--- a/apps/web/src/styles/themes/steel-pink.css
+++ b/apps/web/src/styles/themes/steel-pink.css
@@ -0,0 +1,60 @@
 /* themes-v1: Steel Pink (family: pink/magenta).
   Dark anchors: #0e0408 #1a080e #2e0c1a #9a4070 #cc33aa. */
 .theme-steel-pink {
  --background: #fdf4fa;
  --foreground: #2a0a1f;
  --card: #fbe8f4;
  --card-foreground: #2a0a1f;
  --popover: #fbe8f4;
  --popover-foreground: #2a0a1f;
  --primary: #952382;
  --primary-foreground: #ffffff;
  --secondary: #f4d4ea;
  --secondary-foreground: #2a0a1f;
  --muted: #f4d4ea;
  --muted-foreground: #7a3058;
  --accent: #952382;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #f4d4ea;
  --input: #f4d4ea;
  --ring: #952382;
  --sidebar: #fbe8f4;
  --sidebar-foreground: #2a0a1f;
  --sidebar-primary: #952382;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f4d4ea;
  --sidebar-accent-foreground: #2a0a1f;
  --sidebar-border: #f4d4ea;
  --sidebar-ring: #952382;
 }
 .theme-steel-pink.dark {
  --background: #0e0408;
  --foreground: #f0d8e8;
  --card: #1a080e;
  --card-foreground: #f0d8e8;
  --popover: #1a080e;
  --popover-foreground: #f0d8e8;
  --primary: #cc33aa;
  --primary-foreground: #0e0408;
  --secondary: #2e0c1a;
  --secondary-foreground: #f0d8e8;
  --muted: #2e0c1a;
  --muted-foreground: #9a4070;
  --accent: #cc33aa;
  --accent-foreground: #0e0408;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2e0c1a;
  --input: #2e0c1a;
  --ring: #cc33aa;
  --sidebar: #1a080e;
  --sidebar-foreground: #f0d8e8;
  --sidebar-primary: #cc33aa;
  --sidebar-primary-foreground: #0e0408;
  --sidebar-accent: #cc33aa;
  --sidebar-accent-foreground: #0e0408;
  --sidebar-border: #2e0c1a;
  --sidebar-ring: #cc33aa;
 }
--- a/apps/web/src/styles/themes/volcanic-brown.css
+++ b/apps/web/src/styles/themes/volcanic-brown.css
@@ -0,0 +1,60 @@
 /* themes-v1: Volcanic Brown (family: brown/earth).
   Dark anchors: #140906 #1e0e0a #2e1610 #7a4030 #cc4a1a. */
 .theme-volcanic-brown {
  --background: #faf3ee;
  --foreground: #2a1410;
  --card: #f3e6dc;
  --card-foreground: #2a1410;
  --popover: #f3e6dc;
  --popover-foreground: #2a1410;
  --primary: #983614;
  --primary-foreground: #ffffff;
  --secondary: #e8d4c4;
  --secondary-foreground: #2a1410;
  --muted: #e8d4c4;
  --muted-foreground: #5e2818;
  --accent: #983614;
  --accent-foreground: #ffffff;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #e8d4c4;
  --input: #e8d4c4;
  --ring: #983614;
  --sidebar: #f3e6dc;
  --sidebar-foreground: #2a1410;
  --sidebar-primary: #983614;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e8d4c4;
  --sidebar-accent-foreground: #2a1410;
  --sidebar-border: #e8d4c4;
  --sidebar-ring: #983614;
 }
 .theme-volcanic-brown.dark {
  --background: #140906;
  --foreground: #f0e0d4;
  --card: #1e0e0a;
  --card-foreground: #f0e0d4;
  --popover: #1e0e0a;
  --popover-foreground: #f0e0d4;
  --primary: #cc4a1a;
  --primary-foreground: #140906;
  --secondary: #2e1610;
  --secondary-foreground: #f0e0d4;
  --muted: #2e1610;
  --muted-foreground: #7a4030;
  --accent: #cc4a1a;
  --accent-foreground: #140906;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2e1610;
  --input: #2e1610;
  --ring: #cc4a1a;
  --sidebar: #1e0e0a;
  --sidebar-foreground: #f0e0d4;
  --sidebar-primary: #cc4a1a;
  --sidebar-primary-foreground: #140906;
  --sidebar-accent: #cc4a1a;
  --sidebar-accent-foreground: #140906;
  --sidebar-border: #2e1610;
  --sidebar-ring: #cc4a1a;
 }
--- a/boocode_roadmap.md
+++ b/boocode_roadmap.md
@@ -0,0 +1,344 @@
 # BooCode v1.x — Roadmap
 Last updated: 2026-05-16
 ## Overview
 BooCode is a standalone code-chat tool at `/opt/boocode/`. Read-only by design — pick a project, chat with a local LLM that has file-inspection tools, get streaming responses over WebSocket.
 Live at `https://code.indifferentketchup.com` (Caddy → Authelia → Tailscale → `100.114.205.53:9500`).
 **Architectural commitments:**
 - No embeddings. The model uses file-view tools (`view_file`, `list_dir`, `grep`, `find_files`) + sidecar analyzers (codecontext, codesight). Walked away from the RAG pipeline May 2026.
 - Read-only in v1.x. Write tools land in BooCoder (separate container, post-v1.x).
 - One Postgres (`boocode_db`), one frontend SPA, container-per-service for new capabilities.
 External code lifted from / referenced in: see `boocode_code_review.md` for full inventory.
 -----
 ## Batch summary
 |Batch                                     |Theme                                                                              |Status     |Branch / Notes                         |
 |------------------------------------------|-----------------------------------------------------------------------------------|-----------|---------------------------------------|
 |1                                         |Markdown, Copy + Regen, tok/s + ctx, AI naming                                     |✅ Done     |`v1.1-batch1` merged                   |
 |2                                         |Sidebar restructure                                                                |✅ Done     |`v1.1-batch2` merged                   |
 |3                                         |Pane system, FileBrowserPane + Shiki, cross-tab                                    |✅ Done     |`v1.1-batch3` merged                   |
 |3.5                                       |Chip infrastructure, `@file`, line-select                                          |✅ Done     |merged                                 |
 |4 (v1.2)                                  |Chats inside sessions, right-rail, `/compact`, archive, force-send                 |✅ Done     |merged                                 |
 |4.1–4.4                                   |Project archive, sidebar context, Gitea API, bootstrap                             |✅ Done     |merged                                 |
 |v1.5 cleanup                              |resolveProjectPath, BOOTSTRAP_ROOT, vitest pin                                     |✅ Done     |merged                                 |
 |v1.6 mobile                               |Drawer, single-pane, long-press, IME-safe, pull-to-refresh, swipe-close            |✅ Done     |merged                                 |
 |v1.6.1                                    |RightRail mobile wrapper fix                                                       |✅ Done     |merged                                 |
 |Tool-loop bump                            |MAX_TOOL_LOOP_DEPTH 5→15                                                           |✅ Done     |merged                                 |
 |v1.6.2                                    |Workspace + Session+Project headers + ChatTabBar new-chat + RightRail mobile drawer|🔄 In flight|`v1.6.2-mobile-ui-fixes`               |
 |**v1.8 mobile tabs**                      |**Bottom-sheet pane switcher + cross-tab `pane_status` WS sync + StatusDot on tabs**|**Next up**|`v1.8-mobile-tabs`; hand-rolled sheet  |
 |9 (REORDERED, DECOUPLED)                  |Agents (Tier 2): `AGENTS.md`, per-agent temp/tools, picker in ChatInput toolbar    |✅ Implemented, uncommitted|six builtins; on `main` awaiting commit|
 |5                                         |Fork message, delete message, header polish                                        |Planned    |                                       |
 |6                                         |Drag-drop file + paste-as-attachment                                               |Planned    |thin extension of 3.5 chips            |
 |7                                         |Settings drawer: system prompt, web search toggle, agent entry                     |Planned    |adds SettingsDrawer agent entry (Batch 9 deferred half) |
 |8                                         |Web search backend: SearXNG `web_search` + `web_fetch`                             |Planned    |                                       |
 |10                                        |BooTerm: separate container, xterm.js + node-pty + tmux                            |Planned    |                                       |
 |11 — Architect: codebase map              |codecontext sidecar + MCP tool wiring                                              |Planned    |from nmakod/codecontext                |
 |11b — Architect: repo health              |call graph, circular deps, dead code                                               |Planned    |from spirituslab/codesight             |
 |12 — Tool approval + plan/act mode        |Read-only invariant, per-tool gating                                               |Planned    |from cline                             |
 |13 — Append-only event log                |Replace messages-table semantics                                                   |Planned    |from OpenHands V1                      |
 |14 — BooCoder: pending changes            |Sandboxed edit queue, atomic apply                                                 |Post-v1.x  |from plandex                           |
 |15 — BooCoder runtime isolation           |Per-session Docker sandbox                                                         |Post-v1.x  |from OpenHands                         |
 |16 — Multi-provider LLM                   |Optional litellm-style abstraction                                                 |Optional   |from pi-ai                             |
 |17 — Workflow graphs                      |Multi-agent coordination                                                           |Far future |from microsoft/agent-framework concepts|
 **Old Batch 12 (codebase indexer w/ Harrier embeddings) — REMOVED.** Replaced by Batch 11/11b sidecar approach. See `boocode_code_review.md` decisions log.
 **Batch 9 reordered ahead of 5–8, 10.** Picker mounts in `ChatInput.tsx` toolbar only. SettingsDrawer agent entry rolled into Batch 7 when it lands. No UI dependency on Batches 5/6/7, so it can ship anytime after v1.6.2.
 -----
 ## Batch details (planned / new)
 ### Batch 9 — Agents (Tier 2, DECOUPLED)
 **Spec:** `boocode_batch9.md` with the deltas below.
 **Status:** Next up after v1.6.2 merges. Decoupled from Batch 7.
 **Deltas from `boocode_batch9.md`:**
 1. Builtin defaults in `agents.ts` OMIT the `model` field. Resolution order makes `session.model` win when `agent.model` is null. Spec line 30 example is misleading — do not hardcode any model in builtins.
 2. Builtin defaults are the six agents shipped in `/opt/boocode/AGENTS.md`: **Code Reviewer, Debugger, Refactorer, Architect, Security Auditor, Prompt Builder.** If project root `AGENTS.md` exists, only its agents show. If absent, show the six builtins.
 3. AgentPicker mounts in `ChatInput.tsx` toolbar between ModelPicker and the `+` button. **No `SettingsDrawer.tsx` or `Header.tsx` changes in this batch.**
 4. SettingsDrawer agent entry + Header active-agent badge moved to Batch 7.
 **Files to create:**
 - `apps/server/src/services/agents.ts` — parser, six builtin defaults, mtime-keyed cache.
 - `apps/server/src/routes/agents.ts` — `GET /api/projects/:id/agents`.
 - `apps/web/src/components/AgentPicker.tsx` — dropdown, matches ModelPicker pattern.
 **Files to modify:**
 - `apps/server/src/schema.sql` — `ALTER TABLE sessions ADD COLUMN IF NOT EXISTS agent_id TEXT;`
 - `apps/server/src/services/inference.ts` — resolution order: `effective_system_prompt`, `effective_model`, `effective_temperature`, `effective_tools` from session + agent + project. Filter tools array against agent whitelist before sending to llama-swap.
 - `apps/server/src/routes/sessions.ts` — PATCH accepts `agent_id`.
 - `apps/server/src/types/api.ts` — Agent type, extend Session with `agent_id`.
 - `apps/web/src/api/client.ts`, `apps/web/src/api/types.ts` — Agent type, `api.agents.list(projectId)`.
 - `apps/web/src/components/ChatInput.tsx` — mount AgentPicker.
 **Testing plan (manual, before locking temps):**
 - Drop `/opt/boocode/AGENTS.md` (six agents, no `model` field on any).
 - For each of the 7 keeper models, switch session model and run the same target prompt against each agent. Log tok/s, instruction-following quality.
 - Adjust per-agent temperature in `AGENTS.md` based on results.
 - A/B candidates: qwen3.6-35b-a3b-mxfp4 (daily), qwopus3.6-35b-a3b-q4 (reasoning), qwopus3.5-27b-q4, qwen3.6-27b-ud-q4-xl, nemotron-3-nano-30b, gemma-4-26b-a4b-mxfp4, qwen3-coder-30b-apex.
 **Dependencies:** v1.6.2 merged.
 -----
 ### Batch 11 — Architect: codebase map (REVISED)
 **Inspiration / lift:** `nmakod/codecontext` (MIT, Go binary).
 **What it gives BooCode:** an architect-grade codebase overview without embeddings. Codecontext parses the repo with tree-sitter, extracts symbols, builds import/dependency relationships, and exposes the result via an MCP server with 8 tools. The model gets a structural map of any codebase on demand.
 **Why this replaces the original Batch 11 (aider PageRank port):** codecontext is a finished binary in our stack language (Go), with watch mode, incremental updates, framework detection, and git-co-change-based semantic neighborhoods (no embeddings). The aider port would be reimplementing what codecontext already ships.
 **Scope:**
 - Add `codecontext` sidecar container to `docker-compose.yml`. Mount the project root read-only. One sidecar per BooCode instance — projects are addressed by absolute path.
 - Wire each codecontext MCP tool into BooCode’s `inference/tools.ts` as a native tool the model can call:
 - `repo_overview(project_id)` → codecontext `get_codebase_overview`
 - `repo_file_analysis(project_id, path)` → `get_file_analysis`
 - `repo_symbol_info(project_id, symbol)` → `get_symbol_info`
 - `repo_search_symbols(project_id, query)` → `search_symbols`
 - `repo_dependencies(project_id, path)` → `get_dependencies`
 - `repo_semantic_neighborhoods(project_id, path)` → `get_semantic_neighborhoods` (git co-change)
 - `repo_framework_analysis(project_id)` → `get_framework_analysis`
 - `path_guard.ts` extension: incorporate `continuedev/continue` `DEFAULT_SECURITY_IGNORE_FILETYPES` so codecontext can’t surface `.env`, `.pem`, keys, etc.
 - Fallback grammars: drop `Aider-AI/aider`‘s `aider/queries/tree-sitter-*.scm` files for any language codecontext doesn’t cover. Use them via an in-process tree-sitter wrapper *only if* a project needs an unsupported language. Defer wrapper build until that’s an actual gap.
 **Where it goes:** new `apps/server/src/architect/` directory. No new tables — codecontext maintains its own state on disk. New env: `CODECONTEXT_URL=http://codecontext:8765` (MCP endpoint).
 **Decisions to make at recon time:**
 - Bundle the binary directly in the BooCode Dockerfile, or run codecontext as its own service? Sidecar is cleaner. Bundle is one less container.
 - How does the model discover codecontext tools — register them statically in the tools registry, or proxy MCP `tools/list` at startup?
 **Dependencies:** none. Can ship before Batches 5–10.
 -----
 ### Batch 11b — Architect: repo health (NEW)
 **Inspiration / lift:** `spirituslab/codesight` (MIT-ish, TS/Node).
 **What it gives BooCode:** complement to Batch 11. Where codecontext answers “what is this codebase,” repo health answers “what’s wrong with this codebase.” Call graph, circular dependency detection, dead code flagging.
 **Scope:**
 - Port codesight’s `analyze.mjs` analyzer core into `apps/server/src/architect/repo_health.ts`. Drop the VS Code extension shell. Keep:
 - Symbol extraction (already overlaps codecontext — call codecontext where possible, only redo what’s needed for graph edges).
 - Call graph builder (function-to-function edges).
 - Circular dependency detector.
 - Dead code detector (exported symbols never imported or called).
 - New tool: `repo_health(project_id)` returning `{ circular_dependencies: [...], dead_code: [...] }`. Output respects codesight’s documented false-positive caveats (customElements.define, framework entry points, dynamic imports) — surface those in the tool description so the model doesn’t trust dead-code flags blindly.
 - Cache results in `boocode_db` keyed by `(project_id, file_hashes)`. Invalidate on file change via file-index hash check.
 **Decisions:**
 - Build it in-process (Node) vs spawn a CLI? In-process is simpler. Spawn matches codecontext sidecar pattern but adds latency.
 **Dependencies:** Batch 11 merged (so we can reuse codecontext’s parse output where possible). Can be deferred until after Batches 5–10.
 -----
 ### Batch 12 — Tool approval gating + plan/act mode
 **Inspiration / lift:** `cline/cline` (Apache-2.0).
 **What it gives BooCode:** per-session control over which tools the model can call. Lays the groundwork for BooCoder by building the gating mechanism before there are any write tools to gate.
 **Scope:**
 - New column `sessions.tool_approval_mode TEXT` — values: `read_only` (v1.x default), `plan`, `act_auto`, `act_approve`.
 - New column `sessions.approved_tools JSONB` — per-session whitelist for `act_approve` mode.
 - Tool registry refactor: tools tagged `read_only` or `write`. In `read_only` mode (v1.x), write tools never appear in the model’s tools array. In `plan` mode, same — write tools hidden, model produces a plan only. `act_*` modes unlock writes (post-v1.x).
 - UI: mode picker in SettingsDrawer (Batch 7 dependency). Inline indicator in chat header.
 **Dependencies:** Batch 7 (SettingsDrawer).
 -----
 ### Batch 13 — Append-only event log
 **Inspiration / lift:** `OpenHands/OpenHands` V1 (MIT).
 **What it gives BooCode:** replaces the ad-hoc `messages` table semantics with a typed event stream. Unlocks rewind, time-travel, and clean handoff semantics for multi-agent flows.
 **Scope:**
 - New `session_events` table: `(id, session_id, ts, kind, payload JSONB, parent_id)`. Event kinds: `user_message`, `assistant_message`, `tool_call`, `tool_result`, `pane_action`, `mode_change`, `system`.
 - Existing `messages` table becomes a derived view over `session_events` for backward compatibility, then deprecated over a release.
 - Inference loop emits events instead of mutating message rows.
 - Frontend `useSessionStream` reducer rewritten to consume events.
 **Migration is non-trivial.** Plan in a dedicated batch with explicit cutover window.
 **Dependencies:** Batches 5 (fork/delete) and 7 (settings) merged. Must not be in flight with other backend work.
 -----
 ### Batch 14 — BooCoder: pending changes
 **Inspiration / lift:** `plandex-ai/plandex` (MIT).
 **What it gives BooCode:** safe write tools. Edits queue in a virtual layer; nothing touches the filesystem until explicit `/apply`.
 **Scope:**
 - New container `boocoder` at `100.114.205.53:9502`. Owns write tools (`edit_file`, `create_file`, `delete_file`, `apply_pending`, `rewind`).
 - New table `pending_changes (id, session_id, file_path, diff TEXT, status, created_at)`. Status: `pending`, `applied`, `rejected`.
 - Tools execute against the pending-changes layer, not the filesystem. `apply_pending` is the only path that touches disk. `rewind` rolls back a `pending`-id back to disk state.
 - BooCode chat container stays read-only (`/opt:/opt:ro`). BooCoder mounts `/opt/repos:/opt/repos:rw` and uses git worktree pattern from paseo for isolation.
 - Frontend: new pane kind `pending_diff` shows the queued diff inline with Approve/Reject per chunk.
 **Dependencies:** Batches 12 (gating) + 13 (events). Don’t start until both are live.
 -----
 ### Batch 15 — BooCoder runtime isolation
 **Inspiration / lift:** `OpenHands/OpenHands` (MIT).
 **What it gives BooCode:** per-session Docker sandbox for BooCoder writes. Closes the `/opt:ro` mount risk identified in v1.x open items.
 **Scope:**
 - Per-session container spawned by BooCoder on first write. Container has only the project’s path mounted, not `/opt`.
 - Container lifecycle: spawn on first write call, idle-timeout after 30 min, recreate on resume.
 - Action execution server pattern: HTTP API inside the container, BooCoder calls in. Standard OpenHands runtime contract.
 **Dependencies:** Batch 14.
 -----
 ### Batch 16 — Multi-provider LLM abstraction
 **Inspiration / lift:** `earendil-works/pi` `pi-ai` (MIT).
 **What it gives BooCode:** optional non-llama-swap inference paths (Anthropic, OpenAI, Mistral direct). Currently we have one provider (llama-swap) and the existing `streamCompletion` is hardcoded to OpenAI-compatible at that endpoint.
 **Scope:**
 - Provider abstraction: `interface LLMProvider { stream(req): AsyncIterator<Frame> }`.
 - Built-in: llama-swap (current), Anthropic, OpenAI (Codex-style).
 - Per-session `provider_id` column.
 **Status:** **Optional. Skip unless a concrete need surfaces.** llama-swap covers daily driver work.
 -----
 ### Batch 17 — Workflow graphs
 **Inspiration / lift:** `microsoft/agent-framework` (MIT) — concepts only.
 **What it gives BooCode:** multi-agent coordination. Architect → Coder → Reviewer → Verifier handoffs orchestrated by a YAML-defined workflow.
 **Status:** **Far future.** Read agent-framework’s `docs/decisions/` ADRs. Don’t port code — Azure/.NET-heavy.
 **Dependencies:** Batches 12 (modes), 13 (events). Realistically a v2.x topic.
 -----
 ## Order of operations
 Two tracks. Pick one to drive next.
 **Track A — Finish v1.x mobile + polish then agents:**
 - v1.6.2 ships (in flight)
 - **Batch 9 (agents)** — decoupled, can land next; no UI dependency on 5/6/7
 - Batches 5, 6, 7, 8 in order. Each is small, frontend-heavy, no architecture risk. Batch 7 absorbs SettingsDrawer agent entry.
 **Track B — Begin architect capabilities in parallel:**
 - Batch 11 (codecontext sidecar) — biggest single capability jump. Frontend stays the same; new tools appear to the model.
 - Batch 11b (repo health) — follow-up.
 - Batch 12 (gating) — sets up everything post-v1.x.
 Recommendation: ship v1.6.2, then **Batch 9 (agents)** next so the test bed exists before Track A continues. Then Track A through Batch 7. Batch 11 can run in parallel with Batches 8–10 since 11 has no UI dependency.
 -----
 ## Architecture target state
 ### Containers
 |Container    |Port                            |Mount                     |Purpose                       |Status  |
 |-------------|--------------------------------|--------------------------|------------------------------|--------|
 |`boocode`    |`100.114.205.53:9500`           |`/opt:/opt:ro`            |Chat + read-only tools + SPA  |Live    |
 |`boocode_db` |`127.0.0.1:5500`                |`boocode_pgdata` volume   |Postgres 16-alpine            |Live    |
 |`codecontext`|`100.114.205.53:8765` (internal)|project root :ro          |MCP server for architect tools|Batch 11|
 |`booterm`    |`100.114.205.53:9501`           |`/opt/repos:/opt/repos:rw`|Terminals (tmux + node-pty)   |Batch 10|
 |`boocoder`   |`100.114.205.53:9502`           |per-session sandbox       |Write tools                   |Batch 14|
 ### Schema additions
 **Batch 9:** `sessions.agent_id TEXT` (nullable; references AGENTS.md by slug).
 **Batch 11:** none (codecontext stateless on disk).
 **Batch 11b:** `repo_health_cache (project_id, file_hashes_sig, payload JSONB, created_at)`.
 **Batch 12:** `sessions.tool_approval_mode`, `sessions.approved_tools`.
 **Batch 13:** `session_events`; deprecate `messages` long-tail.
 **Batch 14:** `pending_changes`.
 -----
 ## Lift sources (summary)
 Full inventory in `boocode_code_review.md`. Headline items:
 |Source                                |Used for                                |Where                |
 |--------------------------------------|----------------------------------------|---------------------|
 |nmakod/codecontext (MIT, Go)          |Architect: codebase map sidecar         |Batch 11             |
 |spirituslab/codesight (MIT-ish, TS)   |Architect: repo health analyzer         |Batch 11b            |
 |Aider-AI/aider (Apache-2.0)           |Fallback `.scm` grammars (60+ languages)|Batch 11 (fallback)  |
 |continuedev/continue (Apache-2.0)     |DEFAULT_SECURITY_IGNORE_FILETYPES       |Batch 11 prep        |
 |cline/cline (Apache-2.0)              |Plan/Act mode pattern                   |Batch 12             |
 |plandex-ai/plandex (MIT)              |Pending-changes data model              |Batch 14             |
 |OpenHands/OpenHands (MIT)             |Event log + sandbox runtime             |Batches 13, 15       |
 |aimasteracc/tree-sitter-analyzer (MIT)|Outline-first response patterns         |Reference            |
 |earendil-works/pi (MIT)               |Multi-provider LLM                      |Batch 16 (optional)  |
 |rshah515/claude-code-subagents (MIT)  |Reference for builtin agent prompts     |Batch 9 (six builtins)|
 |microsoft/agent-framework (MIT)       |Workflow concepts                       |Batch 17 (far future)|
 -----
 ## Decisions log
 - **Embeddings dropped from BooCode.** Replaced RAG with file-view tools + sidecar analyzers.
 - **Original Batch 11 (aider PageRank port) replaced** by codecontext sidecar approach.
 - **Original Batch 12 (codebase indexer w/ Harrier) removed** entirely. No embedding infrastructure in BooCode v1.x.
 - **Globstar parked** — not an architect tool, future verify-before-commit candidate only.
 - **codeprysm rejected** — embedding-based; node/edge taxonomy noted as reference if we ever build our own graph.
 - **Batch 9 decoupled from Batch 7 (2026-05-16).** AgentPicker mounts in `ChatInput.tsx` toolbar only. SettingsDrawer agent entry and Header active-agent badge moved to Batch 7. Builtin defaults shipped: six agents (Code Reviewer, Debugger, Refactorer, Architect, Security Auditor, Prompt Builder) with no `model` field — session model wins by default.
 ## Follow-ups (post-ship docs / cleanup)
 - **After v1.8.2 ships:** Add explicit `max_tool_calls: 30` to all 6 agents in `/data/AGENTS.md` and `/opt/boocode/AGENTS.md`. Purely for documentation/discoverability — defaults handle behavior identically (all 6 agents use only read-only tools, default is already 30).
 -----
 ## Workflow
 Each batch:
 1. Verify previous batch merged.
 2. Dispatch via Paseo to Claude Code at `/opt/boocode`.
 3. Claude Code recon → blocking questions → implement → hand back.
 4. Compliance review in separate Claude chat.
 5. Deploy: `docker compose up --build -d`.
 6. Smoke test.
 7. Sam commits and pushes.
 Sam reviews all diffs. Sam commits. Never git pull/push/commit on his behalf.
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -9,7 +9,15 @@ services:
    environment:
      DATABASE_URL: postgres://boocode:${POSTGRES_PASSWORD}@boocode_db:5432/boocode
    volumes:
-      - /opt:/opt:rw
+      # Read-only mount for legacy/existing project add-existing flow.
      - /opt:/opt:ro
      # Writable mount only for the create-new-project bootstrap target.
      # Host must `mkdir -p /opt/projects` before container start.
      - /opt/projects:/opt/projects:rw
      - ./secrets/boocode_gitea:/root/.ssh/id_ed25519:ro
      # v1.8.1: global agents file. Host seeds it once before deploy:
      # cp /opt/boocode/AGENTS.md /opt/boocode/data/AGENTS.md
      - ./data:/data:ro
    depends_on:
      - boocode_db
    networks:
--- a/docs/themes_v1.md
+++ b/docs/themes_v1.md
@@ -0,0 +1,263 @@
 # BooCode — Theme System v1
 Standalone BooCode (`/opt/boocode/`). Tailwind v4 + shadcn nova preset. 18 preset themes × 2 modes (dark/light) = 36 palettes. User-selectable in Settings only. Persists to `settings` table.
 -----
 ## 1. Theme list (locked)
 | # | id                  | Display name      | Family         | Mode default         |
 |---|---------------------|-------------------|----------------|----------------------|
 | 1 | `obsidian`          | Obsidian          | Charcoal/Black | dark (default theme) |
 | 2 | `gunmetal`          | Gunmetal          | Charcoal/Black | dark                 |
 | 3 | `espresso`          | Espresso          | Brown/Earth    | dark                 |
 | 4 | `volcanic-brown`    | Volcanic Brown    | Brown/Earth    | dark                 |
 | 5 | `copper`            | Copper            | Orange/Amber   | dark                 |
 | 6 | `gold`              | Gold              | Orange/Amber   | dark                 |
 | 7 | `oxblood`           | Oxblood           | Red/Crimson    | dark                 |
 | 8 | `crimson`           | Crimson           | Red/Crimson    | dark                 |
 | 9 | `elderflower`       | Elderflower       | Purple/Violet  | dark                 |
 | 10| `plum`              | Plum              | Purple/Violet  | dark                 |
 | 11| `steel-pink`        | Steel Pink        | Pink/Magenta   | dark                 |
 | 12| `fuchsia-noir`      | Fuchsia Noir      | Pink/Magenta   | dark                 |
 | 13| `matrix`            | Matrix            | Green          | dark                 |
 | 14| `sage`              | Sage              | Green          | dark                 |
 | 15| `ivory`             | Ivory             | Light          | light (always)       |
 | 16| `chalk`             | Chalk             | Light          | light (always)       |
 | 17| `cobalt`            | Cobalt            | Blue           | dark                 |
 | 18| `midnight-sapphire` | Midnight Sapphire | Blue           | dark                 |
 **Default on first load:** `obsidian` (dark).
 **Light variants:** every dark theme ships a paired light variant. `ivory` and `chalk` have no dark variant — they are light-only.
 -----
 ## 2. Storage model
 ### Schema change
 Additive only. In `apps/server/src/schema.sql`:
 ```sql
 ALTER TABLE settings ADD COLUMN IF NOT EXISTS theme_id TEXT NOT NULL DEFAULT 'obsidian';
 ALTER TABLE settings ADD COLUMN IF NOT EXISTS theme_mode TEXT NOT NULL DEFAULT 'dark'
  CHECK (theme_mode IN ('dark', 'light', 'system'));
 ```
 ### API surface
 Extend `GET /api/settings` and `PATCH /api/settings`. No new routes.
 `GET` response includes `theme_id`, `theme_mode`. `PATCH` accepts both. Validation:
 - `theme_id` must be one of the 18 ids listed in section 1.
 - `theme_mode` ∈ `{dark, light, system}`.
 - Reject otherwise with 400.
 -----
 ## 3. CSS token layer
 Tailwind v4 + shadcn nova uses CSS custom properties.
 ### File layout
 ```
 apps/web/src/styles/
 ├── globals.css           # existing Tailwind entrypoint
 └── themes/
    ├── obsidian.css
    ├── gunmetal.css
    ├── espresso.css
    ├── volcanic-brown.css
    ├── copper.css
    ├── gold.css
    ├── oxblood.css
    ├── crimson.css
    ├── elderflower.css
    ├── plum.css
    ├── steel-pink.css
    ├── fuchsia-noir.css
    ├── matrix.css
    ├── sage.css
    ├── ivory.css
    ├── chalk.css
    ├── cobalt.css
    └── midnight-sapphire.css
 ```
 Each per-theme file declares `.theme-<id>` (light tokens) and `.theme-<id>.dark` (dark tokens), overriding the shadcn nova CSS variables. `ivory.css` and `chalk.css` declare only the light selector.
 `globals.css` imports all 18 theme files after the existing Tailwind/shadcn `@import` lines.
 ### Tokens overridden per theme
 ```
 --background
 --foreground
 --card
 --card-foreground
 --popover
 --popover-foreground
 --primary
 --primary-foreground
 --secondary
 --secondary-foreground
 --muted
 --muted-foreground
 --accent
 --accent-foreground
 --destructive
 --destructive-foreground
 --border
 --input
 --ring
 --sidebar
 --sidebar-foreground
 --sidebar-primary
 --sidebar-primary-foreground
 --sidebar-accent
 --sidebar-accent-foreground
 --sidebar-border
 --sidebar-ring
 ```
 `--radius` is locked at `0.5rem` (not per-theme). `--destructive` stays in the red family across all themes — error states are not theme-shifted.
 ### Anchor-to-token mapping
 Five anchor swatches per theme map as follows:
 ```
 background                       ← anchor 1 (deepest)
 card / popover / sidebar         ← anchor 2 (surface)
 border / input / muted           ← anchor 3 (line)
 muted-foreground                 ← anchor 4 (dimmed text)
 primary / accent / ring /
  sidebar-primary /
  sidebar-accent                 ← anchor 5 (accent)
 foreground                       ← computed: anchor-5 hue, ~92% L, ~25% S
                                   (warm tint for warm themes, cool for cool)
 sidebar-foreground               ← same as foreground
 sidebar-border                   ← same as border (anchor 3)
 sidebar-ring                     ← same as ring (anchor 5)
 destructive                      ← red family — dark mode: #dc2626,
                                   light mode: #b91c1c
 *-foreground variants            ← derived high-contrast against parent
 ```
 ### Dark anchor values
 ```
 obsidian          #0c0c0e #15151a #1f1f23 #6b6b75 #8b5cf6
 gunmetal          #0d1117 #161b22 #21262d #7d8590 #388bfd
 espresso          #1c1410 #241a14 #2e2218 #8a7058 #c8a880
 volcanic-brown    #140906 #1e0e0a #2e1610 #7a4030 #cc4a1a
 copper            #100800 #1c1408 #2e1f0a #8a6040 #b87333
 gold              #0e0800 #1a1200 #2a1f00 #a07c30 #d4af37
 oxblood           #0a0303 #180606 #2a0808 #7a3028 #8b1a1a
 crimson           #0e0404 #1a0808 #2e0a0a #8a3030 #dc143c
 elderflower       #100818 #1c1024 #2c1830 #8a78a0 #b89cd8
 plum              #0c0814 #180e20 #241830 #7a4878 #8e4585
 steel-pink        #0e0408 #1a080e #2e0c1a #9a4070 #cc33aa
 fuchsia-noir      #0a0610 #14081a #2a0c2e #8a3878 #ff1493
 matrix            #000a00 #031403 #0a200a #208030 #00ff41
 sage              #0a0e08 #141a10 #1e2e1a #7a8870 #9caf88
 cobalt            #020817 #061434 #0c2244 #3060a0 #0047ab
 midnight-sapphire #02050e #060c1f #0e1a36 #4a6088 #1e3a8a
 ```
 ### Light-only anchors
 `ivory` and `chalk` use these values directly as the light palette:
 ```
 ivory  #fdfcf8 #f5f2e8 #e8e4d8 #8a8478 #3a3328
 chalk  #fafaf7 #f0f0ec #e5e5e0 #75756e #2a2a28
 ```
 ### Light variants of the 16 dark themes
 - lightest anchor → background
 - accent darkens ~15% (reduce HSL lightness by 15 percentage points)
 - foreground → near-black tinted toward family hue
 - surfaces, borders scale up in lightness symmetrically
 -----
 ## 4. Mode resolution (dark/light/system)
 ```ts
 function resolvedMode(mode: 'dark' | 'light' | 'system'): 'dark' | 'light' {
  if (mode === 'system') {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }
  return mode;
 }
 ```
 - If `theme_id` is light-only (`ivory`, `chalk`) and the resolved mode is `dark`, fall back to `obsidian` dark.
 - Otherwise apply `<html class="theme-<id> dark?">`.
 System-mode listener: subscribe to `matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)` only when `theme_mode === 'system'`.
 -----
 ## 5. Frontend wiring
 ### `apps/web/src/lib/theme.ts` (new)
 Exports:
 - `THEMES`: const array of `{ id, name, family, supportsDark, supportsLight, anchors }`
 - `applyTheme(id, mode)`: writes class to `<html>`, updates localStorage cache
 - `useTheme()`: hook reading `theme_id` + `theme_mode` from settings; applies on mount and on change; owns the matchMedia listener (only mounted when mode === 'system')
 ### `apps/web/src/App.tsx`
 Call `useTheme()` at the top of the App component, before children, so the theme is applied before any child renders.
 ### `apps/web/index.html`
 Inline `<script>` BEFORE the React entry that reads `localStorage['boocode.theme']` and sets `className` on `<html>` to prevent FOUC. Cache value: JSON `{ id, mode }`.
 ### `apps/web/src/pages/Settings.tsx` (new)
 Route `/settings`. Layout:
 - **Mode radio group** at top — Dark / Light / System (shadcn `radio-group` + `label`).
 - **Theme grid** below — 18 cards. `grid-cols-2` mobile, `grid-cols-3` md+.
  - Each card: shadcn `Card` containing theme name (font-mono, sm), family label (xs, muted), 5-swatch horizontal strip from `THEMES[i].anchors`, "Selected" badge if active, "Light only" hint on `ivory`/`chalk`.
 - Click card → PATCH `/api/settings` → on 200, `applyTheme()` + update localStorage cache. Optimistic; revert on failure with toast.
 - Mode radio change → same PATCH path.
 ### `apps/web/src/components/ui/`
 Required shadcn primitives (verified present): `card`, `button`, `radio-group`, `label`.
 -----
 ## 6. Build / verification
 - `pnpm typecheck` (must pass)
 - `pnpm -F web build` (must pass)
 - Schema migration: `psql ... -c "\d settings"` shows `theme_id` and `theme_mode`.
 - API: `curl GET /api/settings` returns new fields; `PATCH` accepts them; invalid id → 400.
 - Visual: cycle themes, toggle mode, system follows OS, reload persists.
 -----
 ## 7. Out of scope (v1)
 - Custom user-defined palettes.
 - Per-project or per-session themes (global only).
 - Syntax-highlighting themes for `CodeBlock`.
 - Header quick-switcher dropdown (Settings only).
 -----
 ## 8. Decisions on ambiguous points
 1. **Light-only theme + dark mode request:** fall back to `obsidian` dark. No inline message.
 2. **Font per theme:** locked at Inter + JetBrains Mono. No theme changes typography in v1.
 3. **Animation on swap:** instant class change. No CSS transitions on `--background` (they cause flicker on first paint).
--- a/Show More
+++ b/Show More