v2.0.0-final: dispatcher + task queue + agent probing

Phase 4 of v2.0. BooCoder can now queue tasks and dispatch them
through the inference loop autonomously.

Dispatcher (services/dispatcher.ts): in-process setInterval(5s) polls
tasks WHERE state='pending', picks one at a time, creates an isolated
session+chat, enqueues inference with the task's input as the user
message, polls for completion, marks state completed/failed with
output_summary. Single-task-at-a-time for v2.0.0; parallel dispatch
is a Phase 5+ concern. Respects onClose hook for graceful shutdown.

Task routes (routes/tasks.ts): POST /api/tasks (create), GET /api/tasks
(list with state/project filters), GET /api/tasks/:id (detail),
POST /api/tasks/:id/cancel (marks cancelled, aborts if running).

Agent probe (services/agent-probe.ts): on startup, probes PATH for
opencode/goose/claude/pi via which + --version. UPSERTs into
available_agents table. Finds nothing inside the container (expected —
Phase 5 addresses host-agent access via ACP/PTY).

Schema: ALTER TABLE tasks ADD COLUMN IF NOT EXISTS session_id (links
task to its auto-created inference session for isolation).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

BOOCHAT.md

@@ -39,6 +39,13 @@
 
 Always-true rules (process discipline, refusals, behavior contracts) live here in `BOOCHAT.md` — and in `BOOCODER.md` / `CLAUDE.md` per their scopes — where they are 100% present in every turn. On-demand recipes (specific procedures, scaffolds, checklists) live in `/data/skills/` and invoke roughly 6% of the time in clean multi-turn flow (Codeminer42 measurement, 2026). Don't file workflow rules as skills — they silently misfire. See Anthropic agent-skills best-practices (platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices) for the canonical conventions.
 
+## Verification discipline
+
+- When assessing implementation status, verify against the running container (`curl /api/health`) and latest git commit (`git log --oneline -3`), not just source file contents. Source files can be mid-edit. The deployed state is the truth.
+- Never count `dist/` directory sizes as source lines. Only count `src/**/*.ts` files. Compiled output is inflated by inlined types and transpilation artifacts.
+- Before claiming a feature works, run the actual command and show the output. "Should work" is not verification. Acceptable evidence: test output (`pnpm test`), build output (`pnpm build`), curl response, docker logs, `\d tablename` output. If you can't run it, say so explicitly — don't assert success without evidence.
+- When reporting counts (tools, tests, files, routes, lines), derive the number from a command (`grep -c`, `wc -l`, test runner output) — not from memory or approximation.
+
 ## Known limitations
 
 - Codecontext re-analyzes the project graph on each call against a different target_dir. First call to a new project may take 1-3 seconds; subsequent calls to the same project return in ~10ms.

BOOCODER.md

@@ -30,3 +30,10 @@ Every file modification queues in `pending_changes` before touching disk. The us
 - If uncertain about scope, use smaller edits and verify between steps.
 - Cite file paths + line numbers for context.
 - Verify before reporting work complete: run the relevant test/build/smoke and confirm output matches the claim. Evidence first, assertion second.
+
+## Verification discipline
+
+- When assessing implementation status, verify against the running container (`curl /api/health`) and latest git commit (`git log --oneline -3`), not just source file contents. Source files can be mid-edit. The deployed state is the truth.
+- Never count `dist/` directory sizes as source lines. Only count `src/**/*.ts` files. Compiled output is inflated by inlined types and transpilation artifacts.
+- Before claiming a feature works, run the actual command and show the output. "Should work" is not verification. Acceptable evidence: test output (`pnpm test`), build output (`pnpm build`), curl response, docker logs, `\d tablename` output. If you can't run it, say so explicitly — don't assert success without evidence.
+- When reporting counts (tools, tests, files, routes, lines), derive the number from a command (`grep -c`, `wc -l`, test runner output) — not from memory or approximation.

CLAUDE.md

@@ -69,6 +69,14 @@ Key services:
 
 Route registration: all routes registered in `index.ts` via `register*Routes(app, sql, ...)` functions. Routes are in `routes/*.ts`.
 
+### BooCoder (`apps/coder/src/`)
+
+- Write-capable coding agent. Separate Fastify server at port 9502, same docker network (`boocode_net`).
+- **Workspace dependency on `@boocode/server`**: imports `createInferenceRunner`, `createBroker`, `ALL_TOOLS`, `appendMcpTools` from the server's compiled `dist/`. apps/server's `package.json` has an `exports` map with `types` conditions for NodeNext resolution. apps/server must build FIRST (Dockerfile builds server → coder).
+- `apps/server/tsconfig.json` has `declaration: true` so `.d.ts` files exist for workspace consumers.
+- Write tools (`edit_file`, `create_file`, `delete_file`, `apply_pending`, `rewind`) queue in `pending_changes` table. Nothing hits disk until `apply_pending` is called. `write_guard.ts` validates paths (resolve + prefix-check, no realpath since files may not exist for creates).
+- Frontend: NOT a separate SPA. BooCoder is a `'coder'` pane type within BooChat's SPA (`apps/web/`). `CoderPane.tsx` in `apps/web/src/components/panes/`. API requests go through `/api/coder/*` proxy (Vite dev + Fastify production) which rewrites to `http://boocoder:3000/api/*`. WS connects directly to `:9502`.
+
 ### Frontend (`apps/web/src/`)
 
 - **React 18** + React Router v6 + **Tailwind v4** + shadcn/radix-ui primitives.
@@ -105,14 +113,16 @@ Sessions hold 1–5 panes (chat / empty / placeholder terminal+agent). v1.12.1 m
 
 ## Database
 
-PostgreSQL 16. Tables: `projects`, `sessions`, `chats`, `messages`, `settings`, `message_parts` (v1.13.0). Views: `messages_with_parts` (v1.13.1-B parts-merge read path), `tool_cost_stats` (v1.13.10 per-tool 100-call rolling window). (`session_panes` was dropped in v1.12.1; workspace pane state lives in `sessions.workspace_panes jsonb`.) Schema applied idempotently on startup via `applySchema()`. Use `clock_timestamp()` (not `NOW()`) inside transactions. CHECK constraints in place: `projects_status_chk` ('open'|'archived'), `sessions_status_chk` (same), `chats_status_chk` (same), `messages_role_chk`, `messages_status_chk` — keep in sync with the `*_STATUSES` const arrays in `apps/server/src/types/api.ts`. The older anonymous `messages_status_check` (without 'cancelled') and `messages_role_check` (without 'system') were dropped in v1.12.1; only the `_chk` variants remain.
+PostgreSQL 16. Database name: `boochat` (renamed from `boocode` in v2.0.0-alpha; Docker service name stays `boocode_db`). Tables: `projects`, `sessions`, `chats`, `messages`, `settings`, `message_parts` (v1.13.0), `pending_changes` (v2.0.0), `tasks` (v2.0.0), `available_agents` (v2.0.0). Views: `messages_with_parts` (v1.13.1-B parts-merge read path), `tool_cost_stats` (v1.13.10 per-tool 100-call rolling window), `human_inbox` (v2.0.0 — tasks WHERE state IN blocked/failed). (`session_panes` was dropped in v1.12.1; workspace pane state lives in `sessions.workspace_panes jsonb`.) Schema applied idempotently on startup via `applySchema()`. Use `clock_timestamp()` (not `NOW()`) inside transactions. CHECK constraints in place: `projects_status_chk` ('open'|'archived'), `sessions_status_chk` (same), `chats_status_chk` (same), `messages_role_chk`, `messages_status_chk` — keep in sync with the `*_STATUSES` const arrays in `apps/server/src/types/api.ts`. The older anonymous `messages_status_check` (without 'cancelled') and `messages_role_check` (without 'system') were dropped in v1.12.1; only the `_chk` variants remain.
 
 Schema CHECK migration order when renaming allowed values: (1) `ALTER TABLE ... DROP CONSTRAINT IF EXISTS <system_name>` (inline `CREATE TABLE` checks get `<table>_<column>_check`), (2) `UPDATE` rows to new values, (3) wrap new constraint ADD in `DO $$ ... pg_constraint` guard — that block is the only way to get `ADD CONSTRAINT IF NOT EXISTS`.
 
 
 ## Environment
 
-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`, `SEARXNG_URL` (default `http://100.114.205.53:8888` — internal Tailscale Fathom; the public `search.indifferentketchup.com` is behind Authelia and unusable from server context), `BOOCODE_TOOLS` (`core` | `standard` | `all`, default `all`; v1.13.15-tools tier filter — ceiling, never expands an agent's whitelist).
+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`, `SEARXNG_URL` (default `http://100.114.205.53:8888` — internal Tailscale Fathom; the public `search.indifferentketchup.com` is behind Authelia and unusable from server context), `BOOCODE_TOOLS` (`core` | `standard` | `all`, default `all`; v1.13.15-tools tier filter — ceiling, never expands an agent's whitelist), `MCP_CONFIG_PATH` (optional; default `/data/mcp.json` — JSON config for MCP servers matching opencode's `mcpServers` shape; file missing = no MCP).
+
+BooCoder at port 9502: `curl http://100.114.205.53:9502/api/health`. Same Tailscale IP binding as BooChat. Health reports tool count: `{"ok":true,"db":true,"tools":30}`.
 
 ## Workflow
 
@@ -134,6 +144,8 @@ Required: `DATABASE_URL`, `LLAMA_SWAP_URL`. Optional: `PORT` (3000), `HOST` (0.0
 - `/opt/boolab` hosts a working sibling BooCode terminal at `boocode.indifferentketchup.com`. Useful for visual side-by-side comparison on the same iPhone when debugging booterm rendering. Boolab uses Tailwind v3 (`@tailwind base`); boocode uses v4 — many subtle build differences. Don't assume parity.
 - booterm SSHs to the host as `samkintop@100.114.205.53` (the Tailscale IP). The hostname `ubuntu-homelab` (shown in the bash prompt after login) does NOT resolve from inside the container — only the host's `/etc/hosts` knows it. Override via `BOOTERM_SSH_HOST` / `BOOTERM_SSH_USER` env vars in docker-compose if you ever move the shell to a different machine.
 - codecontext sidecar lives at `/opt/boocode/codecontext/`. Sidecar HTTP API at `http://codecontext:8080/v1/<tool_name>` over the `boocode_net` bridge (no host port). BooCode wrappers in `apps/server/src/services/tools/codecontext/`. The `.codecontextignore.template` documents recommended ignore patterns; users copy and adapt to project root manually.
+- codecontext fork at `/opt/forks/codecontext/` — separate git repo (branch `boocode-ts`), pushed via the same boocode_gitea SSH key to `indifferentketchup/codecontext`. Build: `go build ./...`. Test: `go test ./...`. Docker rebuild: `docker compose build --no-cache codecontext`.
+- Go binary: `/snap/go/current/bin/go` (not on PATH by default). Use `export PATH=$PATH:/snap/go/current/bin` or full path for Go commands.
 - `os/exec` child supervisors must explicitly call `child.Wait()` in a goroutine and `os.Exit` on child death. `Signal(0)` returns nil on zombies and is NOT a liveness check. Without `Wait()`, docker's `restart: unless-stopped` policy never fires because the parent stays alive. The `codecontext/shim.go` implementation is the reference pattern.
 
 ## Conventions
@@ -156,3 +168,5 @@ Required: `DATABASE_URL`, `LLAMA_SWAP_URL`. Optional: `PORT` (3000), `HOST` (0.0
 - Tool-name whitelists must derive from `ALL_TOOLS` in `services/tools.ts`, never hardcoded. `services/agents.ts` `ALL_TOOL_NAMES` had this drift class until v1.12 — same pattern applies to any future tool-aware code.
 - Agent registry lives at `data/AGENTS.md` (global, bind-mounted at `/data/AGENTS.md`). No per-project `AGENTS.md` in this repo — removed in v1.12 to eliminate the two-files-must-stay-in-sync drift. The `getAgentsForProject` per-project override mechanism remains for *other* projects.
 - MCP stdio transport uses newline-delimited JSON (NDJSON), NOT LSP-style `Content-Length` headers. The `codecontext/shim.go` framing implementation is the reference; per the MCP spec (modelcontextprotocol.io/specification/server/transports).
+- **Workspace dependency pattern** (`apps/coder` → `@boocode/server`): the consuming package adds `"@boocode/server": "workspace:*"` in `package.json`. The provider's `package.json` needs `exports` with `types` + `default` conditions per subpath: `"./inference": { "types": "./dist/.../index.d.ts", "default": "./dist/.../index.js" }`. Without the `types` condition, NodeNext resolution can't find `.d.ts` files and tsc fails with "Cannot find module" in the consumer.
+- **Docker build order for workspace deps**: the Dockerfile must `COPY` + `RUN pnpm build` the provider app BEFORE the consumer app. `apps/coder/Dockerfile` builds `apps/server` first, then `apps/coder`.

apps/coder/Dockerfile

@@ -7,6 +7,7 @@ WORKDIR /build
 COPY package.json pnpm-workspace.yaml pnpm-lock.yaml tsconfig.base.json ./
 COPY apps/server/package.json ./apps/server/
 COPY apps/coder/package.json ./apps/coder/
+COPY apps/coder/web/package.json ./apps/coder/web/
 
 RUN pnpm install --frozen-lockfile
 
@@ -15,6 +16,7 @@ COPY apps/server ./apps/server
 RUN pnpm -C apps/server build
 
 COPY apps/coder ./apps/coder
+RUN pnpm -C apps/coder/web build
 RUN pnpm -C apps/coder build
 
 RUN pnpm deploy --filter=@boocode/coder --prod --legacy /out/coder
@@ -25,6 +27,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends ripgrep git &&
 WORKDIR /app
 
 COPY --from=builder /out/coder ./
+COPY --from=builder /build/apps/coder/web/dist ./web
 
 ENV NODE_ENV=production
 EXPOSE 3000

apps/coder/src/index.ts

@@ -1,5 +1,12 @@
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { existsSync } from 'node:fs';
 import Fastify from 'fastify';
 import fastifyWebsocket from '@fastify/websocket';
+import fastifyStatic from '@fastify/static';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 import { loadConfig } from './config.js';
 import { getSql, applySchema, pingDb, closeDb } from './db.js';
 // v2.0.0 Phase 2B: workspace dependency on @boocode/server — reuse the
@@ -16,7 +23,11 @@ import { setInferenceContext, clearInferenceContext } from './services/tools/inf
 // Routes
 import { registerMessageRoutes } from './routes/messages.js';
 import { registerPendingRoutes } from './routes/pending.js';
+import { registerTaskRoutes } from './routes/tasks.js';
 import { registerWebSocket } from './routes/ws.js';
+// Phase 4: dispatcher + agent probe
+import { createDispatcher } from './services/dispatcher.js';
+import { probeAgents } from './services/agent-probe.js';
 
 async function main() {
   const config = loadConfig();
@@ -106,11 +117,42 @@ async function main() {
     });
   });
 
+  // Phase 4: probe available agents on startup
+  await probeAgents(sql, app.log);
+
+  // Phase 4: dispatcher — polls tasks table and runs inference
+  const dispatcher = createDispatcher({ sql, inference: inferenceApi, broker, log: app.log, config });
+  dispatcher.start();
+  app.addHook('onClose', () => dispatcher.stop());
+
   // Register routes
   registerMessageRoutes(app, sql, broker, inferenceApi);
   registerPendingRoutes(app, sql);
+  registerTaskRoutes(app, sql, inferenceApi);
   registerWebSocket(app, sql, broker);
 
+  // Serve static frontend (built web app). In production, the dist/ is
+  // copied to ../web relative to the dist/ directory at /app/web. In dev,
+  // check adjacent to the source.
+  const webRoot = resolve(__dirname, '../web');
+  if (existsSync(webRoot)) {
+    await app.register(fastifyStatic, {
+      root: webRoot,
+      prefix: '/',
+      // Don't intercept /api routes — static only serves files that exist.
+      wildcard: false,
+    });
+    // SPA fallback: serve index.html for non-API routes that don't match a file.
+    app.setNotFoundHandler(async (req, reply) => {
+      if (req.url.startsWith('/api')) {
+        reply.code(404);
+        return { error: 'not found' };
+      }
+      return reply.sendFile('index.html');
+    });
+    app.log.info(`serving frontend from ${webRoot}`);
+  }
+
   // Graceful shutdown
   const shutdown = async () => {
     app.log.info('shutting down');

apps/coder/src/routes/tasks.ts

@@ -0,0 +1,138 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import type { Sql } from '../db.js';
+
+interface InferenceApi {
+  cancel: (sessionId: string, chatId: string) => Promise<boolean>;
+}
+
+const CreateBody = z.object({
+  project_id: z.string().uuid(),
+  input: z.string().min(1).max(64_000),
+  agent: z.string().max(100).optional(),
+  model: z.string().max(200).optional(),
+});
+
+const ListQuery = z.object({
+  state: z.enum(['pending', 'running', 'completed', 'failed', 'blocked', 'cancelled']).optional(),
+  project_id: z.string().uuid().optional(),
+});
+
+export function registerTaskRoutes(app: FastifyInstance, sql: Sql, inference: InferenceApi): void {
+  // POST /api/tasks — create a new task
+  app.post('/api/tasks', async (req, reply) => {
+    const parsed = CreateBody.safeParse(req.body);
+    if (!parsed.success) {
+      reply.code(400);
+      return { error: 'invalid body', details: parsed.error.flatten() };
+    }
+
+    const { project_id, input, agent, model } = parsed.data;
+
+    const [task] = await sql<{ id: string; state: string }[]>`
+      INSERT INTO tasks (project_id, input, agent, model)
+      VALUES (${project_id}, ${input}, ${agent ?? null}, ${model ?? null})
+      RETURNING id, state
+    `;
+
+    reply.code(201);
+    return { id: task!.id, state: task!.state };
+  });
+
+  // GET /api/tasks — list tasks with optional filters
+  app.get('/api/tasks', async (req, _reply) => {
+    const parsed = ListQuery.safeParse(req.query);
+    if (!parsed.success) {
+      return { error: 'invalid query', details: parsed.error.flatten() };
+    }
+
+    const { state, project_id } = parsed.data;
+
+    // Build query with optional filters
+    if (state && project_id) {
+      return sql`
+        SELECT id, project_id, state, input, output_summary, agent, model, execution_path, session_id, started_at, ended_at, created_at
+        FROM tasks
+        WHERE state = ${state} AND project_id = ${project_id}
+        ORDER BY created_at DESC
+        LIMIT 100
+      `;
+    } else if (state) {
+      return sql`
+        SELECT id, project_id, state, input, output_summary, agent, model, execution_path, session_id, started_at, ended_at, created_at
+        FROM tasks
+        WHERE state = ${state}
+        ORDER BY created_at DESC
+        LIMIT 100
+      `;
+    } else if (project_id) {
+      return sql`
+        SELECT id, project_id, state, input, output_summary, agent, model, execution_path, session_id, started_at, ended_at, created_at
+        FROM tasks
+        WHERE project_id = ${project_id}
+        ORDER BY created_at DESC
+        LIMIT 100
+      `;
+    } else {
+      return sql`
+        SELECT id, project_id, state, input, output_summary, agent, model, execution_path, session_id, started_at, ended_at, created_at
+        FROM tasks
+        ORDER BY created_at DESC
+        LIMIT 100
+      `;
+    }
+  });
+
+  // GET /api/tasks/:id — single task detail
+  app.get<{ Params: { id: string } }>('/api/tasks/:id', async (req, reply) => {
+    const rows = await sql`
+      SELECT id, project_id, parent_task_id, state, input, output_summary, agent, model, execution_path, worktree_path, session_id, cost_tokens, started_at, ended_at, created_at
+      FROM tasks
+      WHERE id = ${req.params.id}
+    `;
+    if (rows.length === 0) {
+      reply.code(404);
+      return { error: 'task not found' };
+    }
+    return rows[0];
+  });
+
+  // POST /api/tasks/:id/cancel — cancel a pending or running task
+  app.post<{ Params: { id: string } }>('/api/tasks/:id/cancel', async (req, reply) => {
+    const taskId = req.params.id;
+
+    // Get current task state + session info
+    const rows = await sql<{ id: string; state: string; session_id: string | null }[]>`
+      SELECT id, state, session_id FROM tasks WHERE id = ${taskId}
+    `;
+    if (rows.length === 0) {
+      reply.code(404);
+      return { error: 'task not found' };
+    }
+
+    const task = rows[0]!;
+    if (task.state !== 'pending' && task.state !== 'running') {
+      reply.code(409);
+      return { error: `cannot cancel task in state '${task.state}'` };
+    }
+
+    // If running, try to cancel inference
+    if (task.state === 'running' && task.session_id) {
+      // Find active chat in the task's session
+      const chats = await sql<{ id: string }[]>`
+        SELECT id FROM chats WHERE session_id = ${task.session_id} AND status = 'open'
+      `;
+      for (const chat of chats) {
+        await inference.cancel(task.session_id, chat.id);
+      }
+    }
+
+    await sql`
+      UPDATE tasks
+      SET state = 'cancelled', ended_at = clock_timestamp()
+      WHERE id = ${taskId} AND state IN ('pending', 'running')
+    `;
+
+    return { cancelled: true };
+  });
+}

apps/coder/src/schema.sql

@@ -43,6 +43,9 @@ CREATE TABLE IF NOT EXISTS available_agents (
   last_probed_at TIMESTAMPTZ
 );
 
+-- v2.0.0 Phase 4: link tasks to their inference sessions.
+ALTER TABLE tasks ADD COLUMN IF NOT EXISTS session_id UUID REFERENCES sessions(id);
+
 -- Human inbox: tasks needing attention
 CREATE OR REPLACE VIEW human_inbox AS
   SELECT * FROM tasks WHERE state IN ('blocked', 'failed');

apps/coder/src/services/agent-probe.ts

@@ -0,0 +1,51 @@
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+import type { Sql } from '../db.js';
+import type { FastifyBaseLogger } from 'fastify';
+
+const execFileAsync = promisify(execFile);
+
+const KNOWN_AGENTS: Array<{ name: string; supportsAcp: boolean }> = [
+  { name: 'opencode', supportsAcp: true },
+  { name: 'goose', supportsAcp: true },
+  { name: 'claude', supportsAcp: false },
+  { name: 'pi', supportsAcp: false },
+];
+
+export async function probeAgents(sql: Sql, log: FastifyBaseLogger): Promise<void> {
+  log.info('agent-probe: scanning PATH for known agents');
+
+  for (const agent of KNOWN_AGENTS) {
+    try {
+      // Check if the agent binary is on PATH
+      const { stdout: whichOut } = await execFileAsync('which', [agent.name], { timeout: 5_000 });
+      const installPath = whichOut.trim();
+      if (!installPath) continue;
+
+      // Get version
+      let version: string | null = null;
+      try {
+        const { stdout: verOut } = await execFileAsync(agent.name, ['--version'], { timeout: 10_000 });
+        version = verOut.trim().slice(0, 100);
+      } catch {
+        // Some agents may not support --version — that's fine
+      }
+
+      // UPSERT into available_agents
+      await sql`
+        INSERT INTO available_agents (name, install_path, version, supports_acp, last_probed_at)
+        VALUES (${agent.name}, ${installPath}, ${version}, ${agent.supportsAcp}, clock_timestamp())
+        ON CONFLICT (name) DO UPDATE SET
+          install_path = EXCLUDED.install_path,
+          version = EXCLUDED.version,
+          supports_acp = EXCLUDED.supports_acp,
+          last_probed_at = EXCLUDED.last_probed_at
+      `;
+      log.info({ agent: agent.name, version, installPath }, 'agent-probe: found');
+    } catch {
+      // Agent not found on PATH — skip silently
+    }
+  }
+
+  log.info('agent-probe: scan complete');
+}

apps/coder/src/services/dispatcher.ts

@@ -0,0 +1,191 @@
+import type { Sql } from '../db.js';
+import type { FastifyBaseLogger } from 'fastify';
+import type { Broker } from '@boocode/server/broker';
+import type { Config } from '../config.js';
+
+interface InferenceRunner {
+  enqueue: (sessionId: string, chatId: string, assistantId: string, user: string) => void;
+  cancel: (sessionId: string, chatId: string) => Promise<boolean>;
+  hasActive: (chatId: string) => boolean;
+}
+
+interface Deps {
+  sql: Sql;
+  inference: InferenceRunner;
+  broker: Broker;
+  log: FastifyBaseLogger;
+  config: Config;
+}
+
+const POLL_INTERVAL_MS = 5_000;
+const COMPLETION_POLL_MS = 2_000;
+
+export function createDispatcher(deps: Deps): { start(): void; stop(): Promise<void> } {
+  const { sql, inference, log, config } = deps;
+  let timer: ReturnType<typeof setInterval> | null = null;
+  let running = false;
+  let stopping = false;
+  let inflightPromise: Promise<void> | null = null;
+
+  async function poll(): Promise<void> {
+    if (running || stopping) return;
+
+    // Grab one pending task
+    const rows = await sql<{ id: string; project_id: string; input: string; agent: string | null; model: string | null }[]>`
+      SELECT id, project_id, input, agent, model
+      FROM tasks
+      WHERE state = 'pending'
+      ORDER BY created_at
+      LIMIT 1
+    `;
+    if (rows.length === 0) return;
+
+    const task = rows[0]!;
+    running = true;
+    inflightPromise = runTask(task).finally(() => {
+      running = false;
+      inflightPromise = null;
+    });
+  }
+
+  async function runTask(task: { id: string; project_id: string; input: string; agent: string | null; model: string | null }): Promise<void> {
+    const taskId = task.id;
+    log.info({ taskId }, 'dispatcher: starting task');
+
+    try {
+      // Mark running
+      await sql`
+        UPDATE tasks
+        SET state = 'running', started_at = clock_timestamp(), execution_path = 'native'
+        WHERE id = ${taskId}
+      `;
+
+      // Create session + chat for this task
+      const model = task.model ?? config.DEFAULT_MODEL;
+      const sessionName = 'Task: ' + task.input.slice(0, 40);
+
+      const [session] = await sql<{ id: string }[]>`
+        INSERT INTO sessions (project_id, name, model, status)
+        VALUES (${task.project_id}, ${sessionName}, ${model}, 'open')
+        RETURNING id
+      `;
+      const sessionId = session!.id;
+
+      const [chat] = await sql<{ id: string }[]>`
+        INSERT INTO chats (session_id, name, status)
+        VALUES (${sessionId}, 'Task execution', 'open')
+        RETURNING id
+      `;
+      const chatId = chat!.id;
+
+      // Link task to session
+      await sql`UPDATE tasks SET session_id = ${sessionId} WHERE id = ${taskId}`;
+
+      // Create user message + streaming assistant
+      await sql<{ id: string }[]>`
+        INSERT INTO messages (session_id, chat_id, role, content, status, created_at)
+        VALUES (${sessionId}, ${chatId}, 'user', ${task.input}, 'complete', clock_timestamp())
+        RETURNING id
+      `;
+      const [assistantMsg] = await sql<{ id: string }[]>`
+        INSERT INTO messages (session_id, chat_id, role, content, status, created_at)
+        VALUES (${sessionId}, ${chatId}, 'assistant', '', 'streaming', clock_timestamp())
+        RETURNING id
+      `;
+      const assistantId = assistantMsg!.id;
+
+      // Enqueue inference
+      inference.enqueue(sessionId, chatId, assistantId, 'default');
+
+      // Wait for inference to complete (poll message status)
+      const finalStatus = await waitForCompletion(assistantId);
+
+      if (stopping) {
+        // Graceful shutdown — mark cancelled
+        await sql`
+          UPDATE tasks
+          SET state = 'cancelled', ended_at = clock_timestamp()
+          WHERE id = ${taskId}
+        `;
+        return;
+      }
+
+      if (finalStatus === 'complete') {
+        // Grab assistant content for output_summary
+        const [msg] = await sql<{ content: string | null }[]>`
+          SELECT content FROM messages WHERE id = ${assistantId}
+        `;
+        const summary = (msg?.content ?? '').slice(0, 500);
+        await sql`
+          UPDATE tasks
+          SET state = 'completed', ended_at = clock_timestamp(), output_summary = ${summary}
+          WHERE id = ${taskId}
+        `;
+        log.info({ taskId }, 'dispatcher: task completed');
+      } else {
+        // failed or cancelled
+        const [msg] = await sql<{ content: string | null }[]>`
+          SELECT content FROM messages WHERE id = ${assistantId}
+        `;
+        const summary = (msg?.content ?? 'Inference failed').slice(0, 500);
+        await sql`
+          UPDATE tasks
+          SET state = 'failed', ended_at = clock_timestamp(), output_summary = ${summary}
+          WHERE id = ${taskId}
+        `;
+        log.warn({ taskId, finalStatus }, 'dispatcher: task failed');
+      }
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : String(err);
+      log.error({ taskId, err: errMsg }, 'dispatcher: task error');
+      await sql`
+        UPDATE tasks
+        SET state = 'failed', ended_at = clock_timestamp(), output_summary = ${errMsg.slice(0, 500)}
+        WHERE id = ${taskId}
+      `.catch(() => {}); // best-effort
+    }
+  }
+
+  async function waitForCompletion(assistantId: string): Promise<string> {
+    // Poll until the assistant message is no longer streaming
+    for (;;) {
+      if (stopping) return 'cancelled';
+
+      const [row] = await sql<{ status: string }[]>`
+        SELECT status FROM messages WHERE id = ${assistantId}
+      `;
+      const status = row?.status ?? 'failed';
+      if (status !== 'streaming') return status;
+
+      await sleep(COMPLETION_POLL_MS);
+    }
+  }
+
+  function sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  return {
+    start() {
+      log.info('dispatcher: starting poll loop');
+      timer = setInterval(() => {
+        poll().catch((err) => {
+          log.error({ err }, 'dispatcher: poll error');
+        });
+      }, POLL_INTERVAL_MS);
+    },
+
+    async stop() {
+      stopping = true;
+      if (timer) {
+        clearInterval(timer);
+        timer = null;
+      }
+      if (inflightPromise) {
+        log.info('dispatcher: waiting for in-flight task');
+        await inflightPromise;
+      }
+      log.info('dispatcher: stopped');
+    },
+  };
+}

apps/coder/web/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BooCoder</title>
+  </head>
+  <body class="bg-zinc-900 text-zinc-100">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/coder/web/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@boocode/coder-web",
+  "version": "2.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "typecheck": "tsc -b --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^1.16.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.26.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.3.4"
+  }
+}

apps/coder/web/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

apps/coder/web/src/App.tsx

@@ -0,0 +1,13 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { Home } from './pages/Home';
+import { Session } from './pages/Session';
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/sessions/:sessionId" element={<Session />} />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

apps/coder/web/src/api/client.ts

@@ -0,0 +1,93 @@
+import type { Project, Session, Chat, Message, PendingChange } from './types';
+
+export class ApiError extends Error {
+  constructor(
+    public status: number,
+    public body: unknown,
+  ) {
+    super(
+      typeof body === 'object' && body && 'error' in body
+        ? String((body as { error: unknown }).error)
+        : `HTTP ${status}`,
+    );
+  }
+}
+
+async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
+  const res = await fetch(path, {
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(init.headers ?? {}),
+    },
+  });
+  if (res.status === 204) return undefined as T;
+  const text = await res.text();
+  const data = text ? JSON.parse(text) : undefined;
+  if (!res.ok) throw new ApiError(res.status, data);
+  return data as T;
+}
+
+export const api = {
+  health: () => request<{ ok: boolean; db: boolean; tools: number }>('/api/health'),
+
+  projects: {
+    list: (params?: { status?: 'open' | 'archived' }) =>
+      request<Project[]>(`/api/projects${params?.status ? `?status=${params.status}` : ''}`),
+  },
+
+  sessions: {
+    listForProject: (projectId: string, status?: 'open' | 'archived') =>
+      request<Session[]>(
+        `/api/projects/${projectId}/sessions${status ? `?status=${status}` : ''}`,
+      ),
+    get: (id: string) => request<Session>(`/api/sessions/${id}`),
+  },
+
+  chats: {
+    listForSession: (sessionId: string) =>
+      request<Chat[]>(`/api/sessions/${sessionId}/chats`),
+    create: (sessionId: string, body?: { name?: string }) =>
+      request<Chat>(`/api/sessions/${sessionId}/chats`, {
+        method: 'POST',
+        body: JSON.stringify(body ?? {}),
+      }),
+  },
+
+  messages: {
+    send: (sessionId: string, chatId: string, content: string) =>
+      request<{ user_message_id: string; assistant_message_id: string }>(
+        `/api/sessions/${sessionId}/messages`,
+        {
+          method: 'POST',
+          body: JSON.stringify({ content, chat_id: chatId }),
+        },
+      ),
+    stop: (sessionId: string) =>
+      request<{ cancelled: boolean }>(`/api/sessions/${sessionId}/stop`, {
+        method: 'POST',
+      }),
+  },
+
+  pending: {
+    list: (sessionId: string) =>
+      request<PendingChange[]>(`/api/sessions/${sessionId}/pending`),
+    applyAll: (sessionId: string) =>
+      request<{ results: Array<{ id: string; success: boolean; error?: string }> }>(
+        `/api/sessions/${sessionId}/pending/apply`,
+        { method: 'POST' },
+      ),
+    applyOne: (changeId: string) =>
+      request<{ success: boolean; error?: string }>(`/api/pending/${changeId}/apply`, {
+        method: 'POST',
+      }),
+    rejectOne: (changeId: string) =>
+      request<{ ok: boolean }>(`/api/pending/${changeId}/reject`, {
+        method: 'POST',
+      }),
+    rewindOne: (changeId: string) =>
+      request<{ success: boolean; error?: string }>(`/api/pending/${changeId}/rewind`, {
+        method: 'POST',
+      }),
+  },
+};

apps/coder/web/src/api/types.ts

@@ -0,0 +1,89 @@
+// Minimal types for the BooCoder frontend.
+// Shared DB entities (same schema as BooChat).
+
+export interface Project {
+  id: string;
+  name: string;
+  path: string;
+  status: 'open' | 'archived';
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Session {
+  id: string;
+  project_id: string;
+  name: string | null;
+  model: string | null;
+  status: 'open' | 'archived';
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Chat {
+  id: string;
+  session_id: string;
+  name: string | null;
+  status: 'open' | 'archived';
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ToolCall {
+  id: string;
+  name: string;
+  arguments: string;
+}
+
+export interface ToolResult {
+  tool_call_id: string;
+  output: string;
+  truncated?: boolean;
+  error?: boolean;
+}
+
+export interface Message {
+  id: string;
+  session_id: string;
+  chat_id: string;
+  role: 'user' | 'assistant' | 'tool' | 'system';
+  content: string;
+  kind: string;
+  tool_calls: ToolCall[] | null;
+  tool_results: ToolResult | null;
+  status: 'streaming' | 'complete' | 'failed' | 'cancelled';
+  tokens_used: number | null;
+  ctx_used: number | null;
+  ctx_max: number | null;
+  started_at: string | null;
+  finished_at: string | null;
+  created_at: string;
+  metadata: unknown;
+}
+
+export interface PendingChange {
+  id: string;
+  session_id: string;
+  task_id: string | null;
+  file_path: string;
+  operation: 'create' | 'edit' | 'delete';
+  old_string: string | null;
+  new_string: string | null;
+  content: string | null;
+  diff: string | null;
+  status: 'pending' | 'applied' | 'rejected' | 'reverted';
+  created_at: string;
+  applied_at: string | null;
+}
+
+// WebSocket frame types (subset of what the coder backend publishes)
+export type WsFrame =
+  | { type: 'snapshot'; messages: Message[] }
+  | { type: 'message_started'; message_id: string; chat_id: string; role: Message['role'] }
+  | { type: 'delta'; message_id: string; chat_id: string; content: string }
+  | { type: 'tool_call'; message_id: string; chat_id: string; tool_call: ToolCall }
+  | { type: 'tool_result'; tool_message_id: string; chat_id: string; tool_call_id: string; output: string; truncated?: boolean; error?: boolean }
+  | { type: 'message_complete'; message_id: string; chat_id: string; tokens_used?: number; ctx_used?: number; ctx_max?: number; started_at?: string; finished_at?: string; metadata?: unknown }
+  | { type: 'error'; message_id?: string; error: string; reason?: string }
+  | { type: 'pending_change_added'; change: PendingChange }
+  | { type: 'pending_change_updated'; change: PendingChange };

apps/coder/web/src/components/ChatPane.tsx

@@ -0,0 +1,131 @@
+import { useState, useRef, useEffect } from 'react';
+import { Send, Square } from 'lucide-react';
+import type { Message } from '@/api/types';
+import { api } from '@/api/client';
+import { MessageBubble } from './MessageBubble';
+
+interface Props {
+  sessionId: string;
+  chatId: string;
+  messages: Message[];
+  isStreaming: boolean;
+  connected: boolean;
+}
+
+export function ChatPane({ sessionId, chatId, messages, isStreaming, connected }: Props) {
+  const [input, setInput] = useState('');
+  const [sending, setSending] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+  }, [input]);
+
+  const handleSend = async () => {
+    const content = input.trim();
+    if (!content || sending || isStreaming) return;
+
+    setInput('');
+    setSending(true);
+    try {
+      await api.messages.send(sessionId, chatId, content);
+    } catch (err) {
+      console.error('send failed:', err);
+      // Restore input on failure
+      setInput(content);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const handleStop = async () => {
+    try {
+      await api.messages.stop(sessionId);
+    } catch (err) {
+      console.error('stop failed:', err);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  // Filter out system messages for display (sentinels)
+  const visibleMessages = messages.filter((m) => m.role !== 'system');
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Connection indicator */}
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-zinc-800 text-xs text-zinc-500">
+        <div
+          className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`}
+        />
+        <span>{connected ? 'Connected' : 'Disconnected'}</span>
+        {isStreaming && (
+          <span className="text-blue-400 ml-auto">Generating...</span>
+        )}
+      </div>
+
+      {/* Messages list */}
+      <div className="flex-1 overflow-y-auto px-4 py-4">
+        {visibleMessages.length === 0 && (
+          <div className="text-center text-zinc-500 mt-8">
+            <p className="text-lg font-medium">BooCoder</p>
+            <p className="text-sm mt-1">Send a message to start coding.</p>
+          </div>
+        )}
+        {visibleMessages.map((msg) => (
+          <MessageBubble key={msg.id} message={msg} />
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input area */}
+      <div className="border-t border-zinc-800 px-4 py-3">
+        <div className="flex items-end gap-2">
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Message BooCoder..."
+            rows={1}
+            className="flex-1 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 resize-none focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            disabled={sending}
+          />
+          {isStreaming ? (
+            <button
+              onClick={handleStop}
+              className="p-2 rounded-lg bg-red-600 hover:bg-red-500 text-white transition-colors"
+              title="Stop generation"
+            >
+              <Square size={18} />
+            </button>
+          ) : (
+            <button
+              onClick={handleSend}
+              disabled={!input.trim() || sending}
+              className="p-2 rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:cursor-not-allowed text-white transition-colors"
+              title="Send message"
+            >
+              <Send size={18} />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/coder/web/src/components/DiffPane.tsx

@@ -0,0 +1,352 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Check, X, RotateCcw, FileText, FilePlus, Trash2, RefreshCw } from 'lucide-react';
+import type { PendingChange } from '@/api/types';
+import { api } from '@/api/client';
+
+interface Props {
+  sessionId: string;
+  onPendingChange: (cb: (change: PendingChange) => void) => () => void;
+}
+
+export function DiffPane({ sessionId, onPendingChange }: Props) {
+  const [changes, setChanges] = useState<PendingChange[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const fetchPending = useCallback(async () => {
+    try {
+      const result = await api.pending.list(sessionId);
+      setChanges(result);
+    } catch (err) {
+      console.error('fetch pending failed:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [sessionId]);
+
+  // Initial load
+  useEffect(() => {
+    fetchPending();
+  }, [fetchPending]);
+
+  // Listen for WS pending change events
+  useEffect(() => {
+    const unsub = onPendingChange((change) => {
+      setChanges((prev) => {
+        const idx = prev.findIndex((c) => c.id === change.id);
+        if (idx >= 0) {
+          const next = [...prev];
+          next[idx] = change;
+          return next;
+        }
+        return [...prev, change];
+      });
+    });
+    return unsub;
+  }, [onPendingChange]);
+
+  const pendingChanges = changes.filter((c) => c.status === 'pending');
+  const resolvedChanges = changes.filter((c) => c.status !== 'pending');
+
+  const handleApplyOne = async (id: string) => {
+    try {
+      await api.pending.applyOne(id);
+      setChanges((prev) =>
+        prev.map((c) => (c.id === id ? { ...c, status: 'applied' as const } : c)),
+      );
+    } catch (err) {
+      console.error('apply failed:', err);
+    }
+  };
+
+  const handleRejectOne = async (id: string) => {
+    try {
+      await api.pending.rejectOne(id);
+      setChanges((prev) =>
+        prev.map((c) => (c.id === id ? { ...c, status: 'rejected' as const } : c)),
+      );
+    } catch (err) {
+      console.error('reject failed:', err);
+    }
+  };
+
+  const handleRewindOne = async (id: string) => {
+    try {
+      await api.pending.rewindOne(id);
+      setChanges((prev) =>
+        prev.map((c) => (c.id === id ? { ...c, status: 'reverted' as const } : c)),
+      );
+    } catch (err) {
+      console.error('rewind failed:', err);
+    }
+  };
+
+  const handleApplyAll = async () => {
+    try {
+      const result = await api.pending.applyAll(sessionId);
+      const appliedIds = new Set(
+        result.results.filter((r) => r.success).map((r) => r.id),
+      );
+      setChanges((prev) =>
+        prev.map((c) =>
+          appliedIds.has(c.id) ? { ...c, status: 'applied' as const } : c,
+        ),
+      );
+    } catch (err) {
+      console.error('apply all failed:', err);
+    }
+  };
+
+  const handleRejectAll = async () => {
+    // Reject each pending change individually (no batch reject endpoint)
+    for (const c of pendingChanges) {
+      await handleRejectOne(c.id);
+    }
+  };
+
+  const OpIcon = ({ op }: { op: PendingChange['operation'] }) => {
+    switch (op) {
+      case 'create':
+        return <FilePlus size={14} className="text-green-400" />;
+      case 'edit':
+        return <FileText size={14} className="text-blue-400" />;
+      case 'delete':
+        return <Trash2 size={14} className="text-red-400" />;
+    }
+  };
+
+  const StatusBadge = ({ status }: { status: PendingChange['status'] }) => {
+    const colors: Record<PendingChange['status'], string> = {
+      pending: 'bg-yellow-500/20 text-yellow-400',
+      applied: 'bg-green-500/20 text-green-400',
+      rejected: 'bg-zinc-500/20 text-zinc-400',
+      reverted: 'bg-orange-500/20 text-orange-400',
+    };
+    return (
+      <span className={`text-[10px] px-1.5 py-0.5 rounded ${colors[status]}`}>
+        {status}
+      </span>
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-zinc-800">
+        <h2 className="text-sm font-medium text-zinc-300">
+          Pending Changes
+          {pendingChanges.length > 0 && (
+            <span className="ml-1.5 text-xs text-zinc-500">
+              ({pendingChanges.length})
+            </span>
+          )}
+        </h2>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={fetchPending}
+            className="p-1 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200"
+            title="Refresh"
+          >
+            <RefreshCw size={14} />
+          </button>
+          {pendingChanges.length > 0 && (
+            <>
+              <button
+                onClick={handleApplyAll}
+                className="text-xs px-2 py-1 rounded bg-green-600/80 hover:bg-green-600 text-white"
+              >
+                Apply All
+              </button>
+              <button
+                onClick={handleRejectAll}
+                className="text-xs px-2 py-1 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300"
+              >
+                Reject All
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Changes list */}
+      <div className="flex-1 overflow-y-auto">
+        {loading && (
+          <div className="text-center text-zinc-500 text-sm py-8">Loading...</div>
+        )}
+
+        {!loading && changes.length === 0 && (
+          <div className="text-center text-zinc-500 text-sm py-8">
+            No pending changes yet.
+          </div>
+        )}
+
+        {/* Pending changes first */}
+        {pendingChanges.map((change) => (
+          <ChangeItem
+            key={change.id}
+            change={change}
+            expanded={expandedId === change.id}
+            onToggle={() =>
+              setExpandedId((prev) => (prev === change.id ? null : change.id))
+            }
+            onApply={() => handleApplyOne(change.id)}
+            onReject={() => handleRejectOne(change.id)}
+            OpIcon={OpIcon}
+            StatusBadge={StatusBadge}
+          />
+        ))}
+
+        {/* Resolved changes */}
+        {resolvedChanges.length > 0 && pendingChanges.length > 0 && (
+          <div className="border-t border-zinc-800 my-1" />
+        )}
+        {resolvedChanges.map((change) => (
+          <ChangeItem
+            key={change.id}
+            change={change}
+            expanded={expandedId === change.id}
+            onToggle={() =>
+              setExpandedId((prev) => (prev === change.id ? null : change.id))
+            }
+            onRewind={
+              change.status === 'applied'
+                ? () => handleRewindOne(change.id)
+                : undefined
+            }
+            OpIcon={OpIcon}
+            StatusBadge={StatusBadge}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface ChangeItemProps {
+  change: PendingChange;
+  expanded: boolean;
+  onToggle: () => void;
+  onApply?: () => void;
+  onReject?: () => void;
+  onRewind?: () => void;
+  OpIcon: React.ComponentType<{ op: PendingChange['operation'] }>;
+  StatusBadge: React.ComponentType<{ status: PendingChange['status'] }>;
+}
+
+function ChangeItem({
+  change,
+  expanded,
+  onToggle,
+  onApply,
+  onReject,
+  onRewind,
+  OpIcon,
+  StatusBadge,
+}: ChangeItemProps) {
+  const fileName = change.file_path.split('/').pop() || change.file_path;
+  const dirPath = change.file_path.split('/').slice(0, -1).join('/');
+
+  return (
+    <div className="border-b border-zinc-800/50">
+      <div
+        className="flex items-center gap-2 px-4 py-2 hover:bg-zinc-800/50 cursor-pointer"
+        onClick={onToggle}
+      >
+        <OpIcon op={change.operation} />
+        <div className="flex-1 min-w-0">
+          <span className="text-sm font-mono text-zinc-200 truncate block">
+            {fileName}
+          </span>
+          {dirPath && (
+            <span className="text-[11px] text-zinc-500 truncate block">
+              {dirPath}
+            </span>
+          )}
+        </div>
+        <StatusBadge status={change.status} />
+        {change.status === 'pending' && (
+          <div className="flex items-center gap-1 ml-1">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onApply?.();
+              }}
+              className="p-1 rounded hover:bg-green-600/30 text-green-400"
+              title="Apply"
+            >
+              <Check size={14} />
+            </button>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onReject?.();
+              }}
+              className="p-1 rounded hover:bg-red-600/30 text-red-400"
+              title="Reject"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        )}
+        {change.status === 'applied' && onRewind && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onRewind();
+            }}
+            className="p-1 rounded hover:bg-orange-600/30 text-orange-400"
+            title="Rewind"
+          >
+            <RotateCcw size={14} />
+          </button>
+        )}
+      </div>
+
+      {expanded && (
+        <div className="px-4 pb-3">
+          {change.operation === 'edit' && (
+            <div className="space-y-2">
+              {change.old_string && (
+                <div className="rounded bg-red-950/30 border border-red-900/30 p-2">
+                  <div className="text-[10px] text-red-400 mb-1 font-medium">
+                    Remove
+                  </div>
+                  <pre className="text-xs text-red-200 whitespace-pre-wrap break-all font-mono">
+                    {change.old_string}
+                  </pre>
+                </div>
+              )}
+              {change.new_string && (
+                <div className="rounded bg-green-950/30 border border-green-900/30 p-2">
+                  <div className="text-[10px] text-green-400 mb-1 font-medium">
+                    Add
+                  </div>
+                  <pre className="text-xs text-green-200 whitespace-pre-wrap break-all font-mono">
+                    {change.new_string}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )}
+          {change.operation === 'create' && change.content && (
+            <div className="rounded bg-green-950/30 border border-green-900/30 p-2">
+              <div className="text-[10px] text-green-400 mb-1 font-medium">
+                New file
+              </div>
+              <pre className="text-xs text-green-200 whitespace-pre-wrap break-all font-mono max-h-60 overflow-y-auto">
+                {change.content.length > 2000
+                  ? change.content.slice(0, 2000) + '\n... (truncated)'
+                  : change.content}
+              </pre>
+            </div>
+          )}
+          {change.operation === 'delete' && (
+            <div className="rounded bg-red-950/30 border border-red-900/30 p-2 text-xs text-red-300">
+              This file will be deleted.
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

apps/coder/web/src/components/Layout.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { Code2, MessageSquare, GitPullRequest } from 'lucide-react';
+
+interface Props {
+  chatPane: React.ReactNode;
+  diffPane: React.ReactNode;
+}
+
+export function Layout({ chatPane, diffPane }: Props) {
+  const [activeTab, setActiveTab] = useState<'chat' | 'diff'>('chat');
+
+  return (
+    <div className="flex flex-col h-screen bg-zinc-900">
+      {/* Top bar */}
+      <header className="flex items-center gap-3 px-4 py-2 border-b border-zinc-800 bg-zinc-900/95">
+        <Code2 size={20} className="text-blue-400" />
+        <h1 className="text-sm font-semibold text-zinc-200">BooCoder</h1>
+      </header>
+
+      {/* Mobile tab bar (visible below lg breakpoint) */}
+      <div className="lg:hidden flex border-b border-zinc-800">
+        <button
+          onClick={() => setActiveTab('chat')}
+          className={`flex-1 flex items-center justify-center gap-1.5 py-2 text-sm ${
+            activeTab === 'chat'
+              ? 'text-blue-400 border-b-2 border-blue-400'
+              : 'text-zinc-500'
+          }`}
+        >
+          <MessageSquare size={14} />
+          Chat
+        </button>
+        <button
+          onClick={() => setActiveTab('diff')}
+          className={`flex-1 flex items-center justify-center gap-1.5 py-2 text-sm ${
+            activeTab === 'diff'
+              ? 'text-blue-400 border-b-2 border-blue-400'
+              : 'text-zinc-500'
+          }`}
+        >
+          <GitPullRequest size={14} />
+          Changes
+        </button>
+      </div>
+
+      {/* Desktop split layout */}
+      <div className="flex-1 hidden lg:flex overflow-hidden">
+        <div className="w-[60%] border-r border-zinc-800 overflow-hidden">
+          {chatPane}
+        </div>
+        <div className="w-[40%] overflow-hidden">
+          {diffPane}
+        </div>
+      </div>
+
+      {/* Mobile: show only the active tab */}
+      <div className="flex-1 lg:hidden overflow-hidden">
+        {activeTab === 'chat' ? chatPane : diffPane}
+      </div>
+    </div>
+  );
+}

apps/coder/web/src/components/MessageBubble.tsx

@@ -0,0 +1,115 @@
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import type { Message } from '@/api/types';
+import { Wrench, AlertCircle, Loader2 } from 'lucide-react';
+
+interface Props {
+  message: Message;
+}
+
+export function MessageBubble({ message }: Props) {
+  if (message.role === 'tool') {
+    return <ToolResultBubble message={message} />;
+  }
+
+  const isUser = message.role === 'user';
+  const isStreaming = message.status === 'streaming';
+  const isFailed = message.status === 'failed';
+
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-3`}>
+      <div
+        className={`max-w-[85%] rounded-lg px-4 py-2.5 ${
+          isUser
+            ? 'bg-blue-600 text-white'
+            : 'bg-zinc-800 text-zinc-100 border border-zinc-700'
+        }`}
+      >
+        {isFailed && (
+          <div className="flex items-center gap-1.5 text-red-400 text-xs mb-1">
+            <AlertCircle size={12} />
+            <span>Failed</span>
+          </div>
+        )}
+
+        {message.tool_calls && message.tool_calls.length > 0 && (
+          <div className="mb-2 space-y-1">
+            {message.tool_calls.map((tc) => (
+              <div
+                key={tc.id}
+                className="flex items-center gap-1.5 text-xs text-zinc-400 bg-zinc-900/50 rounded px-2 py-1"
+              >
+                <Wrench size={11} />
+                <span className="font-mono">{tc.name}</span>
+                <span className="text-zinc-500 truncate max-w-[200px]">
+                  {truncateArgs(tc.arguments)}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {message.content.trim() && (
+          <div className="prose prose-invert prose-sm max-w-none [&_pre]:bg-zinc-900 [&_pre]:p-3 [&_pre]:rounded [&_pre]:overflow-x-auto [&_code]:text-zinc-300 [&_p]:my-1.5">
+            <Markdown remarkPlugins={[remarkGfm]}>{message.content}</Markdown>
+          </div>
+        )}
+
+        {isStreaming && !message.content.trim() && (
+          <div className="flex items-center gap-1.5 text-zinc-400">
+            <Loader2 size={14} className="animate-spin" />
+            <span className="text-xs">Thinking...</span>
+          </div>
+        )}
+
+        {isStreaming && message.content.trim() && (
+          <span className="inline-block w-1.5 h-4 bg-zinc-400 animate-pulse ml-0.5 align-middle" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ToolResultBubble({ message }: Props) {
+  const result = message.tool_results;
+  if (!result) return null;
+
+  const isError = result.error;
+  const output = result.output || '';
+  const displayOutput =
+    output.length > 300 ? output.slice(0, 300) + '...' : output;
+
+  return (
+    <div className="flex justify-start mb-2 ml-6">
+      <div
+        className={`max-w-[80%] rounded px-3 py-2 text-xs font-mono border ${
+          isError
+            ? 'bg-red-950/30 border-red-800/50 text-red-300'
+            : 'bg-zinc-800/50 border-zinc-700/50 text-zinc-400'
+        }`}
+      >
+        {result.truncated && (
+          <span className="text-yellow-500 text-[10px] block mb-1">
+            [truncated]
+          </span>
+        )}
+        <pre className="whitespace-pre-wrap break-all">{displayOutput}</pre>
+      </div>
+    </div>
+  );
+}
+
+function truncateArgs(args: string): string {
+  if (!args) return '';
+  try {
+    const parsed = JSON.parse(args);
+    const keys = Object.keys(parsed);
+    if (keys.length === 0) return '';
+    const first = keys[0]!;
+    const val = String(parsed[first]);
+    const display = val.length > 40 ? val.slice(0, 40) + '...' : val;
+    return `${first}: ${display}`;
+  } catch {
+    return args.length > 50 ? args.slice(0, 50) + '...' : args;
+  }
+}

apps/coder/web/src/globals.css

@@ -0,0 +1,22 @@
+@import "tailwindcss";
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+/* Scrollbar styling for dark theme */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #3f3f46;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #52525b;
+}

apps/coder/web/src/hooks/useSessionStream.ts

@@ -0,0 +1,230 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import type { Message, WsFrame, PendingChange } from '@/api/types';
+
+interface State {
+  messages: Message[];
+  connected: boolean;
+  error: string | null;
+}
+
+function applyFrame(state: State, frame: WsFrame): State {
+  switch (frame.type) {
+    case 'snapshot': {
+      return { ...state, messages: frame.messages };
+    }
+    case 'message_started': {
+      const exists = state.messages.some((m) => m.id === frame.message_id);
+      if (exists) return state;
+      const newMsg: Message = {
+        id: frame.message_id,
+        session_id: '',
+        chat_id: frame.chat_id,
+        role: frame.role,
+        content: '',
+        kind: 'message',
+        tool_calls: null,
+        tool_results: null,
+        status: frame.role === 'system' ? 'complete' : 'streaming',
+        tokens_used: null,
+        ctx_used: null,
+        ctx_max: null,
+        started_at: null,
+        finished_at: null,
+        created_at: new Date().toISOString(),
+        metadata: null,
+      };
+      return { ...state, messages: [...state.messages, newMsg] };
+    }
+    case 'delta': {
+      const next = state.messages.map((m) =>
+        m.id === frame.message_id ? { ...m, content: m.content + frame.content } : m,
+      );
+      return { ...state, messages: next };
+    }
+    case 'tool_call': {
+      const next = state.messages.map((m) =>
+        m.id === frame.message_id
+          ? { ...m, tool_calls: [...(m.tool_calls ?? []), frame.tool_call] }
+          : m,
+      );
+      return { ...state, messages: next };
+    }
+    case 'tool_result': {
+      const exists = state.messages.some((m) => m.id === frame.tool_message_id);
+      if (exists) {
+        const next = state.messages.map((m) =>
+          m.id === frame.tool_message_id
+            ? {
+                ...m,
+                role: 'tool' as const,
+                tool_results: {
+                  tool_call_id: frame.tool_call_id,
+                  output: frame.output,
+                  truncated: frame.truncated,
+                  ...(frame.error ? { error: frame.error } : {}),
+                },
+                status: 'complete' as const,
+              }
+            : m,
+        );
+        return { ...state, messages: next };
+      }
+      const newMsg: Message = {
+        id: frame.tool_message_id,
+        session_id: '',
+        chat_id: frame.chat_id,
+        role: 'tool',
+        content: '',
+        kind: 'message',
+        tool_calls: null,
+        tool_results: {
+          tool_call_id: frame.tool_call_id,
+          output: frame.output,
+          truncated: frame.truncated,
+          ...(frame.error ? { error: frame.error } : {}),
+        },
+        status: 'complete',
+        tokens_used: null,
+        ctx_used: null,
+        ctx_max: null,
+        started_at: null,
+        finished_at: null,
+        created_at: new Date().toISOString(),
+        metadata: null,
+      };
+      return { ...state, messages: [...state.messages, newMsg] };
+    }
+    case 'message_complete': {
+      const next = state.messages.map((m) =>
+        m.id === frame.message_id
+          ? {
+              ...m,
+              status: 'complete' as const,
+              ...(frame.tokens_used !== undefined ? { tokens_used: frame.tokens_used } : {}),
+              ...(frame.ctx_used !== undefined ? { ctx_used: frame.ctx_used } : {}),
+              ...(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 } : {}),
+              ...(frame.metadata !== undefined ? { metadata: frame.metadata } : {}),
+            }
+          : m,
+      );
+      return { ...state, messages: next };
+    }
+    case 'error': {
+      const next = frame.message_id
+        ? state.messages.map((m) =>
+            m.id === frame.message_id ? { ...m, status: 'failed' as const } : m,
+          )
+        : state.messages;
+      return { ...state, messages: next, error: frame.error };
+    }
+    case 'pending_change_added':
+    case 'pending_change_updated':
+      // These are handled by the pending changes listener, not the message state
+      return state;
+  }
+}
+
+const RECONNECT_INITIAL_MS = 1000;
+const RECONNECT_MAX_MS = 30_000;
+
+interface SessionStreamResult {
+  messages: Message[];
+  connected: boolean;
+  error: string | null;
+  isStreaming: boolean;
+  /** Listeners for pending change frames */
+  onPendingChange: (cb: (change: PendingChange) => void) => () => void;
+}
+
+export function useSessionStream(sessionId: string | undefined): SessionStreamResult {
+  const [state, setState] = useState<State>({ messages: [], connected: false, error: null });
+  const wsRef = useRef<WebSocket | null>(null);
+  const pendingListenersRef = useRef<Set<(change: PendingChange) => void>>(new Set());
+
+  useEffect(() => {
+    if (!sessionId) return;
+
+    setState({ messages: [], connected: false, error: null });
+
+    let unmounted = false;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let reconnectDelay = RECONNECT_INITIAL_MS;
+
+    const connect = () => {
+      if (unmounted) return;
+      const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
+      const url = `${proto}://${window.location.host}/api/ws/sessions/${sessionId}`;
+      const ws = new WebSocket(url);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        reconnectDelay = RECONNECT_INITIAL_MS;
+        setState((s) => ({ ...s, connected: true, error: null }));
+      };
+
+      ws.onmessage = (ev) => {
+        let frame: WsFrame;
+        try {
+          frame = JSON.parse(typeof ev.data === 'string' ? ev.data : '') as WsFrame;
+        } catch {
+          return;
+        }
+
+        // Notify pending change listeners
+        if (frame.type === 'pending_change_added' || frame.type === 'pending_change_updated') {
+          for (const cb of pendingListenersRef.current) {
+            cb(frame.change);
+          }
+        }
+
+        setState((s) => applyFrame(s, frame));
+      };
+
+      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;
+      if (ws)
+        try {
+          ws.close();
+        } catch {}
+    };
+  }, [sessionId]);
+
+  const isStreaming = state.messages.some((m) => m.status === 'streaming');
+
+  const onPendingChange = useCallback((cb: (change: PendingChange) => void) => {
+    pendingListenersRef.current.add(cb);
+    return () => {
+      pendingListenersRef.current.delete(cb);
+    };
+  }, []);
+
+  return {
+    messages: state.messages,
+    connected: state.connected,
+    error: state.error,
+    isStreaming,
+    onPendingChange,
+  };
+}

apps/coder/web/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { App } from './App';
+import './globals.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+);

apps/coder/web/src/pages/Home.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Code2, Folder, ArrowRight } from 'lucide-react';
+import type { Project, Session } from '@/api/types';
+import { api } from '@/api/client';
+
+export function Home() {
+  const navigate = useNavigate();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [selectedProject, setSelectedProject] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch projects on mount
+  useEffect(() => {
+    api.projects
+      .list({ status: 'open' })
+      .then(setProjects)
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Fetch sessions when a project is selected
+  useEffect(() => {
+    if (!selectedProject) {
+      setSessions([]);
+      return;
+    }
+    api.sessions
+      .listForProject(selectedProject, 'open')
+      .then(setSessions)
+      .catch(console.error);
+  }, [selectedProject]);
+
+  const handleSessionClick = (session: Session) => {
+    navigate(`/sessions/${session.id}`);
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-zinc-900 flex items-center justify-center">
+        <div className="text-zinc-500">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-900 p-6">
+      <div className="max-w-2xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-8">
+          <Code2 size={28} className="text-blue-400" />
+          <h1 className="text-2xl font-bold text-zinc-100">BooCoder</h1>
+        </div>
+
+        {/* Projects list */}
+        <div className="mb-8">
+          <h2 className="text-sm font-medium text-zinc-400 uppercase tracking-wide mb-3">
+            Projects
+          </h2>
+          {projects.length === 0 ? (
+            <p className="text-zinc-500 text-sm">
+              No projects found. Create one in BooChat first.
+            </p>
+          ) : (
+            <div className="space-y-1">
+              {projects.map((project) => (
+                <button
+                  key={project.id}
+                  onClick={() => setSelectedProject(project.id)}
+                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-colors ${
+                    selectedProject === project.id
+                      ? 'bg-blue-600/20 border border-blue-500/40'
+                      : 'bg-zinc-800/50 border border-zinc-800 hover:bg-zinc-800'
+                  }`}
+                >
+                  <Folder
+                    size={16}
+                    className={
+                      selectedProject === project.id
+                        ? 'text-blue-400'
+                        : 'text-zinc-500'
+                    }
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium text-zinc-200 truncate">
+                      {project.name}
+                    </div>
+                    <div className="text-xs text-zinc-500 truncate">
+                      {project.path}
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Sessions list */}
+        {selectedProject && (
+          <div>
+            <h2 className="text-sm font-medium text-zinc-400 uppercase tracking-wide mb-3">
+              Sessions
+            </h2>
+            {sessions.length === 0 ? (
+              <p className="text-zinc-500 text-sm">
+                No open sessions. Create one in BooChat first.
+              </p>
+            ) : (
+              <div className="space-y-1">
+                {sessions.map((session) => (
+                  <button
+                    key={session.id}
+                    onClick={() => handleSessionClick(session)}
+                    className="w-full flex items-center gap-3 px-4 py-3 rounded-lg bg-zinc-800/50 border border-zinc-800 hover:bg-zinc-800 text-left transition-colors group"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-medium text-zinc-200 truncate">
+                        {session.name || 'Untitled session'}
+                      </div>
+                      <div className="text-xs text-zinc-500">
+                        {new Date(session.updated_at).toLocaleDateString()}
+                      </div>
+                    </div>
+                    <ArrowRight
+                      size={16}
+                      className="text-zinc-600 group-hover:text-zinc-400 transition-colors"
+                    />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/coder/web/src/pages/Session.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
+import type { Chat } from '@/api/types';
+import { api } from '@/api/client';
+import { useSessionStream } from '@/hooks/useSessionStream';
+import { ChatPane } from '@/components/ChatPane';
+import { DiffPane } from '@/components/DiffPane';
+import { Layout } from '@/components/Layout';
+
+export function Session() {
+  const { sessionId } = useParams<{ sessionId: string }>();
+  const navigate = useNavigate();
+  const [chat, setChat] = useState<Chat | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const { messages, connected, isStreaming, onPendingChange } =
+    useSessionStream(sessionId);
+
+  // Get or create a chat for this session
+  useEffect(() => {
+    if (!sessionId) return;
+
+    api.chats
+      .listForSession(sessionId)
+      .then((chats) => {
+        // Use the first open chat, or create one
+        const openChat = chats.find((c) => c.status === 'open');
+        if (openChat) {
+          setChat(openChat);
+        } else {
+          // Create a new chat
+          return api.chats.create(sessionId).then((newChat) => {
+            setChat(newChat);
+          });
+        }
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, [sessionId]);
+
+  if (!sessionId) {
+    navigate('/');
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-zinc-900 flex items-center justify-center">
+        <div className="text-zinc-500">Loading session...</div>
+      </div>
+    );
+  }
+
+  if (!chat) {
+    return (
+      <div className="min-h-screen bg-zinc-900 flex flex-col items-center justify-center gap-4">
+        <div className="text-zinc-500">Could not load chat for this session.</div>
+        <button
+          onClick={() => navigate('/')}
+          className="flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300"
+        >
+          <ArrowLeft size={14} />
+          Back to projects
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <Layout
+      chatPane={
+        <ChatPane
+          sessionId={sessionId}
+          chatId={chat.id}
+          messages={messages}
+          isStreaming={isStreaming}
+          connected={connected}
+        />
+      }
+      diffPane={
+        <DiffPane sessionId={sessionId} onPendingChange={onPendingChange} />
+      }
+    />
+  );
+}

apps/coder/web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/coder/web/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "noUncheckedIndexedAccess": true,
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

apps/coder/web/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

apps/coder/web/tsconfig.node.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

apps/coder/web/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

apps/coder/web/vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+        },
+    },
+    server: {
+        port: 5174,
+        proxy: {
+            '/api': {
+                target: 'http://127.0.0.1:3000',
+                changeOrigin: true,
+                ws: true,
+            },
+        },
+    },
+    build: {
+        outDir: 'dist',
+        emptyOutDir: true,
+    },
+});

apps/coder/web/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5174,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:3000',
+        changeOrigin: true,
+        ws: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+});

apps/server/src/index.ts

@@ -212,6 +212,37 @@ async function main() {
   });
   registerWebSocket(app, sql, broker);
 
+  // v2.0.0: reverse proxy /api/coder/* to the boocoder container. Keeps the
+  // SPA's HTTP requests going through a single origin (avoids CORS). WS for
+  // the coder pane connects directly to boocoder:9502 from the browser (same
+  // Tailscale network — no CORS issue for WebSocket upgrade requests).
+  const BOOCODER_ORIGIN = process.env.BOOCODER_URL ?? 'http://boocoder:3000';
+  app.all('/api/coder/*', async (req, reply) => {
+    const targetPath = req.url.replace('/api/coder', '/api');
+    const targetUrl = `${BOOCODER_ORIGIN}${targetPath}`;
+    const headers: Record<string, string> = {};
+    if (req.headers['content-type']) headers['content-type'] = req.headers['content-type'] as string;
+    if (req.headers['authorization']) headers['authorization'] = req.headers['authorization'] as string;
+
+    try {
+      const res = await fetch(targetUrl, {
+        method: req.method as string,
+        headers,
+        body: req.method !== 'GET' && req.method !== 'HEAD' ? JSON.stringify(req.body) : undefined,
+      });
+      reply.code(res.status);
+      for (const [key, value] of res.headers) {
+        if (key === 'transfer-encoding') continue;
+        reply.header(key, value);
+      }
+      const body = await res.text();
+      return reply.send(body);
+    } catch (err) {
+      app.log.error({ err, targetUrl }, 'coder proxy error');
+      reply.code(502).send({ error: 'boocoder backend unavailable' });
+    }
+  });
+
   const webDist = process.env.WEB_DIST_PATH ?? resolve(process.cwd(), '../web/dist');
   if (existsSync(webDist)) {
     await app.register(fastifyStatic, {

apps/server/src/services/auto_name.ts

@@ -1,7 +1,7 @@
 import type { InferenceContext } from './inference/index.js';
 
 const NAMING_SYSTEM_PROMPT =
-  'You name chat sessions. Reply directly with no thinking, reasoning, or explanation. Output ONLY the title, 4 words max, no quotes, no punctuation, no prefix like "Title:".';
+  'You name chat sessions based on what the assistant did. Summarize the topic or outcome — do NOT copy the first few words verbatim. Reply directly with no thinking, reasoning, or explanation. Output ONLY the title, 4 words max, no quotes, no punctuation, no prefix like "Title:".';
 
 const MAX_TITLE_CHARS = 60;
 
@@ -70,12 +70,6 @@ export async function maybeAutoNameChat(
   const model = sessionRows[0]?.model;
   if (!model) return;
 
-  const userMsg = await ctx.sql<{ content: string }[]>`
-    SELECT content FROM messages
-    WHERE chat_id = ${chatId} AND role = 'user'
-    ORDER BY created_at ASC
-    LIMIT 1
-  `;
   const assistantMsg = await ctx.sql<{ content: string }[]>`
     SELECT content FROM messages
     WHERE chat_id = ${chatId}
@@ -85,9 +79,8 @@ export async function maybeAutoNameChat(
     ORDER BY created_at ASC
     LIMIT 1
   `;
-  if (!userMsg[0] || !assistantMsg[0]) return;
+  if (!assistantMsg[0]) return;
 
-  const userText = userMsg[0].content.slice(0, 2000);
   const assistantText = assistantMsg[0].content.slice(0, 2000);
 
   const body = {
@@ -96,7 +89,7 @@ export async function maybeAutoNameChat(
       { role: 'system', content: NAMING_SYSTEM_PROMPT },
       {
         role: 'user',
-        content: `First user message: ${userText}\nFirst assistant reply: ${assistantText}`,
+        content: assistantText,
       },
     ],
     max_tokens: 30,

apps/server/src/types/api.ts

@@ -56,7 +56,7 @@ export interface Session {
 export type WorkspacePaneKind =
   | 'chat'
   | 'terminal'
-  | 'agent'
+  | 'coder'
   | 'empty'
   | 'settings'
   | 'markdown_artifact'

apps/web/src/api/types.ts

@@ -326,7 +326,7 @@ export interface AskUserAnswerSet {
 export type WorkspacePaneKind =
   | 'chat'
   | 'terminal'
-  | 'agent'
+  | 'coder'
   | 'empty'
   | 'settings'
   | 'markdown_artifact'

apps/web/src/components/ChatTabBar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Bot, History, MessageSquare, Plus, Terminal, X } from 'lucide-react';
+import { Code, History, MessageSquare, Plus, Terminal, X } from 'lucide-react';
 import type { Chat, WorkspacePane } from '@/api/types';
 import { StatusDot } from '@/components/StatusDot';
 import {
@@ -26,7 +26,7 @@ interface Props {
   onCloseOthers: (chatId: string) => void;
   onCloseToRight: (chatId: string) => void;
   onCloseAll: () => void;
-  onAddPane: (kind: 'chat' | 'terminal' | 'agent') => void;
+  onAddPane: (kind: 'chat' | 'terminal' | 'coder') => void;
   onShowHistory: () => void;
   onRename: (chatId: string, name: string) => Promise<void>;
   onRemovePane?: () => void;
@@ -188,8 +188,8 @@ export function ChatTabBar({
             <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
               <Terminal size={14} /> New terminal
             </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onAddPane('agent')}>
-              <Bot size={14} /> New agent
+            <DropdownMenuItem onSelect={() => onAddPane('coder')}>
+              <Code size={14} /> New coder
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

apps/web/src/components/MobileTabSwitcher.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import {
-  Bot,
+  Code,
   ChevronDown,
   Edit2,
   MessageSquare,
@@ -43,7 +43,7 @@ const SWIPE_VISUAL_CAP = 120;
 
 function paneIcon(kind: WorkspacePane['kind']) {
   if (kind === 'terminal') return <Terminal size={14} />;
-  if (kind === 'agent') return <Bot size={14} />;
+  if (kind === 'coder') return <Code size={14} />;
   if (kind === 'settings') return <SettingsIcon size={14} />;
   return <MessageSquare size={14} />;
 }
@@ -64,7 +64,7 @@ function paneLabel(pane: WorkspacePane, chats: Chat[]): string {
   }
   if (pane.kind === 'chat') return 'Chat';
   if (pane.kind === 'terminal') return 'Terminal';
-  if (pane.kind === 'agent') return 'Agent';
+  if (pane.kind === 'coder') return 'Coder';
   if (pane.kind === 'settings') return 'Settings';
   return 'Empty';
 }

apps/web/src/components/NewPaneMenu.tsx

@@ -1,4 +1,4 @@
-import { Bot, MessageSquare, Plus, Terminal } from 'lucide-react';
+import { Code, MessageSquare, Plus, Terminal } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -7,14 +7,13 @@ import {
 } from '@/components/ui/dropdown-menu';
 
 interface Props {
-  onAddPane: (kind: 'chat' | 'terminal' | 'agent') => void;
+  onAddPane: (kind: 'chat' | 'terminal' | 'coder') => 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.
+// Terminal + Coder items pass through to addSplitPane which creates panes
+// of the appropriate kind.
 export function NewPaneMenu({ onAddPane, disabled }: Props) {
   return (
     <DropdownMenu>
@@ -35,8 +34,8 @@ export function NewPaneMenu({ onAddPane, disabled }: Props) {
         <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
           <Terminal size={14} /> New terminal
         </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => onAddPane('agent')}>
-          <Bot size={14} /> New agent
+        <DropdownMenuItem onSelect={() => onAddPane('coder')}>
+          <Code size={14} /> New coder
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

apps/web/src/components/Workspace.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { PanelRight, MessageSquare, Terminal, Bot, Clipboard, Plus, X } from 'lucide-react';
+import { PanelRight, MessageSquare, Terminal, Code, Clipboard, Plus, X } from 'lucide-react';
 import type { Chat, Project, Session, WorkspacePane } from '@/api/types';
 import { MAX_PANES, type UseWorkspacePanesResult } from '@/hooks/useWorkspacePanes';
 import type { UseSessionChatsResult } from '@/hooks/useSessionChats';
@@ -8,6 +8,7 @@ import { terminalsRegistry } from '@/lib/events';
 import { ChatPane } from '@/components/panes/ChatPane';
 import { SettingsPane } from '@/components/panes/SettingsPane';
 import { TerminalPane } from '@/components/panes/TerminalPane';
+import { CoderPane } from '@/components/panes/CoderPane';
 import { MarkdownArtifactPane } from '@/components/MarkdownArtifactPane';
 import { HtmlArtifactPane } from '@/components/HtmlArtifactPane';
 import { ChatTabBar } from '@/components/ChatTabBar';
@@ -160,8 +161,8 @@ export function Workspace({
               <DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
                 <Terminal size={14} /> Terminal
               </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => addSplitPane('agent')}>
-                <Bot size={14} /> Agent
+              <DropdownMenuItem onSelect={() => addSplitPane('coder')}>
+                <Code size={14} /> Coder
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -264,8 +265,8 @@ export function Workspace({
                       <DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
                         <Terminal size={14} /> New terminal
                       </DropdownMenuItem>
-                      <DropdownMenuItem onSelect={() => addSplitPane('agent')}>
-                        <Bot size={14} /> New agent
+                      <DropdownMenuItem onSelect={() => addSplitPane('coder')}>
+                        <Code size={14} /> New coder
                       </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
@@ -321,6 +322,8 @@ export function Workspace({
                   label={terminalLabels.get(pane.id) ?? 'Terminal'}
                   active={idx === activePaneIdx}
                 />
+              ) : pane.kind === 'coder' ? (
+                <CoderPane sessionId={sessionId} />
               ) : pane.kind === 'markdown_artifact' && pane.markdown_artifact_state ? (
                 <MarkdownArtifactPane
                   chatId={pane.markdown_artifact_state.chat_id}

apps/web/src/components/panes/CoderPane.tsx

@@ -0,0 +1,432 @@
+// v2.0.0: BooCoder pane — renders the BooCoder chat + diff interface inside
+// BooChat's multi-pane workspace.
+//
+// Architecture:
+// - REST calls go through /api/coder/* which BooChat's server proxies to
+//   the boocoder container at http://boocoder:3000/api/*
+// - WS connects directly to the boocoder container at :9502 (same Tailscale
+//   network, no CORS for WebSocket). In dev, the Vite proxy handles it.
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Code, Send, Check, X, RefreshCw } from 'lucide-react';
+import { MarkdownRenderer } from '@/components/MarkdownRenderer';
+import { cn } from '@/lib/utils';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface CoderMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  status?: 'streaming' | 'complete' | 'failed';
+  tool_calls?: Array<{
+    id: string;
+    function: { name: string; arguments: string };
+  }>;
+  tool_results?: {
+    tool_call_id: string;
+    content: string;
+  };
+}
+
+interface PendingChange {
+  id: string;
+  file_path: string;
+  operation: 'create' | 'modify' | 'delete';
+  diff?: string;
+  new_content?: string;
+  status: 'pending' | 'approved' | 'rejected';
+}
+
+interface Props {
+  sessionId: string;
+}
+
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+
+function useCoderMessages(sessionId: string) {
+  const [messages, setMessages] = useState<CoderMessage[]>([]);
+  const [connected, setConnected] = useState(false);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    // Fetch existing messages on mount
+    fetch(`/api/coder/sessions/${sessionId}/messages`)
+      .then((res) => res.ok ? res.json() : [])
+      .then((data: CoderMessage[]) => setMessages(data))
+      .catch(() => {/* noop — coder backend may not be running */});
+  }, [sessionId]);
+
+  useEffect(() => {
+    // WS connects to the coder backend. In production, this goes through the
+    // same host (BooChat serves the SPA and proxies). In dev, Vite proxy
+    // handles /api/coder/ws/* -> boocoder:9502.
+    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${proto}//${window.location.host}/api/coder/ws/sessions/${sessionId}`;
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => setConnected(true);
+    ws.onclose = () => setConnected(false);
+
+    ws.onmessage = (ev) => {
+      try {
+        const frame = JSON.parse(ev.data as string);
+        if (frame.type === 'message_started') {
+          setMessages((prev) => [
+            ...prev,
+            { id: frame.message_id, role: frame.role ?? 'assistant', content: '', status: 'streaming' },
+          ]);
+        } else if (frame.type === 'delta') {
+          setMessages((prev) =>
+            prev.map((m) =>
+              m.id === frame.message_id
+                ? { ...m, content: m.content + (frame.content ?? '') }
+                : m
+            )
+          );
+        } else if (frame.type === 'message_complete') {
+          setMessages((prev) =>
+            prev.map((m) =>
+              m.id === frame.message_id ? { ...m, status: 'complete' } : m
+            )
+          );
+        } else if (frame.type === 'tool_call') {
+          setMessages((prev) =>
+            prev.map((m) =>
+              m.id === frame.message_id
+                ? {
+                    ...m,
+                    tool_calls: [
+                      ...(m.tool_calls ?? []),
+                      { id: frame.tool_call_id, function: { name: frame.name, arguments: frame.arguments ?? '' } },
+                    ],
+                  }
+                : m
+            )
+          );
+        }
+      } catch {
+        // ignore unparseable frames
+      }
+    };
+
+    return () => {
+      ws.close();
+      wsRef.current = null;
+    };
+  }, [sessionId]);
+
+  return { messages, setMessages, connected };
+}
+
+function usePendingChanges(sessionId: string) {
+  const [changes, setChanges] = useState<PendingChange[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    fetch(`/api/coder/sessions/${sessionId}/pending`)
+      .then((res) => res.ok ? res.json() : [])
+      .then((data: PendingChange[]) => setChanges(data))
+      .catch(() => {/* noop */})
+      .finally(() => setLoading(false));
+  }, [sessionId]);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  const approve = useCallback(async (changeId: string) => {
+    const res = await fetch(`/api/coder/sessions/${sessionId}/pending/${changeId}/approve`, {
+      method: 'POST',
+    });
+    if (res.ok) {
+      setChanges((prev) => prev.map((c) => c.id === changeId ? { ...c, status: 'approved' } : c));
+    }
+  }, [sessionId]);
+
+  const reject = useCallback(async (changeId: string) => {
+    const res = await fetch(`/api/coder/sessions/${sessionId}/pending/${changeId}/reject`, {
+      method: 'POST',
+    });
+    if (res.ok) {
+      setChanges((prev) => prev.map((c) => c.id === changeId ? { ...c, status: 'rejected' } : c));
+    }
+  }, [sessionId]);
+
+  return { changes, loading, refresh, approve, reject };
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function CoderMessageBubble({ message }: { message: CoderMessage }) {
+  const isUser = message.role === 'user';
+  return (
+    <div className={cn('flex flex-col gap-1 px-3 py-2', isUser ? 'items-end' : 'items-start')}>
+      <div
+        className={cn(
+          'rounded-lg px-3 py-2 max-w-[85%] text-sm',
+          isUser
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-muted text-foreground'
+        )}
+      >
+        {isUser ? (
+          <p className="whitespace-pre-wrap">{message.content}</p>
+        ) : (
+          <div className="prose prose-sm dark:prose-invert max-w-none">
+            <MarkdownRenderer content={message.content} />
+          </div>
+        )}
+        {message.tool_calls && message.tool_calls.length > 0 && (
+          <div className="mt-2 border-t border-border/50 pt-2 space-y-1">
+            {message.tool_calls.map((tc) => (
+              <div key={tc.id} className="text-xs font-mono text-muted-foreground">
+                <span className="text-primary/70">{tc.function.name}</span>
+                {tc.function.arguments && (
+                  <span className="ml-1 opacity-60">
+                    ({tc.function.arguments.slice(0, 80)}
+                    {tc.function.arguments.length > 80 ? '...' : ''})
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+        {message.status === 'streaming' && (
+          <span className="inline-block w-2 h-4 bg-current opacity-60 animate-pulse ml-0.5" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DiffPanel({
+  changes,
+  loading,
+  onRefresh,
+  onApprove,
+  onReject,
+}: {
+  changes: PendingChange[];
+  loading: boolean;
+  onRefresh: () => void;
+  onApprove: (id: string) => void;
+  onReject: (id: string) => void;
+}) {
+  const pending = changes.filter((c) => c.status === 'pending');
+
+  return (
+    <div className="flex flex-col h-full border-t border-border">
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/30">
+        <span className="text-xs font-medium text-muted-foreground">
+          Pending Changes {pending.length > 0 && `(${pending.length})`}
+        </span>
+        <button
+          type="button"
+          onClick={onRefresh}
+          disabled={loading}
+          className="inline-flex items-center justify-center size-6 rounded hover:bg-muted text-muted-foreground"
+          aria-label="Refresh pending changes"
+        >
+          <RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        {pending.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+            No pending changes
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {pending.map((change) => (
+              <div key={change.id} className="px-3 py-2">
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-xs font-mono text-foreground truncate flex-1 mr-2">
+                    <span className={cn(
+                      'inline-block w-1.5 h-1.5 rounded-full mr-1.5',
+                      change.operation === 'create' && 'bg-green-500',
+                      change.operation === 'modify' && 'bg-yellow-500',
+                      change.operation === 'delete' && 'bg-red-500',
+                    )} />
+                    {change.file_path}
+                  </span>
+                  <div className="flex items-center gap-1 shrink-0">
+                    <button
+                      type="button"
+                      onClick={() => onApprove(change.id)}
+                      className="inline-flex items-center justify-center size-6 rounded bg-green-500/10 hover:bg-green-500/20 text-green-600 dark:text-green-400"
+                      aria-label="Approve change"
+                      title="Approve"
+                    >
+                      <Check size={12} />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => onReject(change.id)}
+                      className="inline-flex items-center justify-center size-6 rounded bg-red-500/10 hover:bg-red-500/20 text-red-600 dark:text-red-400"
+                      aria-label="Reject change"
+                      title="Reject"
+                    >
+                      <X size={12} />
+                    </button>
+                  </div>
+                </div>
+                {change.diff && (
+                  <pre className="text-[11px] font-mono bg-muted/50 rounded p-2 overflow-x-auto max-h-32 whitespace-pre">
+                    {change.diff}
+                  </pre>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function CoderPane({ sessionId }: Props) {
+  const { messages, setMessages, connected } = useCoderMessages(sessionId);
+  const { changes, loading, refresh, approve, reject } = usePendingChanges(sessionId);
+  const [input, setInput] = useState('');
+  const [sending, setSending] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-scroll on new messages
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Refresh pending changes when a message_complete arrives
+  useEffect(() => {
+    const lastMsg = messages[messages.length - 1];
+    if (lastMsg?.role === 'assistant' && lastMsg.status === 'complete') {
+      refresh();
+    }
+  }, [messages, refresh]);
+
+  const handleSend = useCallback(async () => {
+    const text = input.trim();
+    if (!text || sending) return;
+
+    setInput('');
+    setSending(true);
+
+    // Optimistic user message
+    const tempId = `temp-${Date.now()}`;
+    setMessages((prev) => [...prev, { id: tempId, role: 'user', content: text, status: 'complete' }]);
+
+    try {
+      const res = await fetch(`/api/coder/sessions/${sessionId}/messages`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ content: text }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        // Replace temp message with real one if server returned it
+        if (data.user_message_id) {
+          setMessages((prev) =>
+            prev.map((m) => m.id === tempId ? { ...m, id: data.user_message_id } : m)
+          );
+        }
+      }
+    } catch {
+      // The WS will bring the real messages; optimistic is good enough
+    } finally {
+      setSending(false);
+    }
+  }, [input, sending, sessionId, setMessages]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        void handleSend();
+      }
+    },
+    [handleSend]
+  );
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-muted/30 shrink-0">
+        <Code size={14} className="text-muted-foreground" />
+        <span className="text-xs font-medium text-muted-foreground">BooCoder</span>
+        <span
+          className={cn(
+            'inline-block w-1.5 h-1.5 rounded-full ml-auto',
+            connected ? 'bg-green-500' : 'bg-red-500'
+          )}
+          title={connected ? 'Connected' : 'Disconnected'}
+        />
+      </div>
+
+      {/* Chat area */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-sm text-muted-foreground gap-2">
+            <Code size={32} className="opacity-40" />
+            <p>Send a message to start coding</p>
+          </div>
+        ) : (
+          <div className="py-2">
+            {messages.map((msg) => (
+              <CoderMessageBubble key={msg.id} message={msg} />
+            ))}
+            <div ref={messagesEndRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Diff panel — only shows when there are pending changes */}
+      {changes.filter((c) => c.status === 'pending').length > 0 && (
+        <div className="h-48 shrink-0">
+          <DiffPanel
+            changes={changes}
+            loading={loading}
+            onRefresh={refresh}
+            onApprove={approve}
+            onReject={reject}
+          />
+        </div>
+      )}
+
+      {/* Input */}
+      <div className="shrink-0 border-t border-border p-2">
+        <div className="flex items-end gap-2">
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask BooCoder to write code..."
+            rows={1}
+            className="flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring max-h-32 min-h-[36px] max-md:min-h-[44px]"
+          />
+          <button
+            type="button"
+            onClick={() => void handleSend()}
+            disabled={!input.trim() || sending}
+            className="inline-flex items-center justify-center size-9 max-md:min-h-[44px] max-md:min-w-[44px] rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+            aria-label="Send message"
+          >
+            <Send size={16} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/hooks/useWorkspacePanes.ts

@@ -40,6 +40,13 @@ function terminalPane(id: string = generateId()): WorkspacePane {
   return { id, kind: 'terminal', chatIds: [], activeChatIdx: -1 };
 }
 
+// v2.0.0: coder pane — renders the BooCoder interface (chat + diff panel).
+// Like terminal panes, carries no chats — the CoderPane component manages
+// its own session/messages via the /api/coder proxy.
+function coderPane(id: string = generateId()): WorkspacePane {
+  return { id, kind: 'coder', chatIds: [], activeChatIdx: -1 };
+}
+
 // v1.9: settings pane factory. No chats, no state beyond identity — the
 // SettingsPane component renders Session/Project sections from the
 // surrounding session/project.
@@ -109,10 +116,10 @@ export interface UseWorkspacePanesResult {
   closeAllTabs: (paneIdx: number) => void;
   showLandingPage: (paneIdx: number) => void;
   // v1.10.3: returns the new pane's id (or null if the operation was a no-op:
-  // 'agent' kind is a toast stub, or max panes reached). Callers can use the
+  // max panes reached). Callers can use the
   // id to update mobile URL state so the URL-sync effect doesn't fight the
   // freshly-set activePaneIdx.
-  addSplitPane: (kind: 'chat' | 'terminal' | 'agent') => string | null;
+  addSplitPane: (kind: 'chat' | 'terminal' | 'coder') => string | null;
   // Open-on-first-click, close-on-second-click. Singleton — settings panes
   // don't count toward MAX_PANES. Closing the only remaining pane (edge case)
   // falls back to an empty pane to preserve the "always one pane" invariant.
@@ -388,11 +395,7 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
     });
   }, []);
 
-  const addSplitPane = useCallback((kind: 'chat' | 'terminal' | 'agent'): string | null => {
-    if (kind === 'agent') {
-      toast('Agent panes coming in BooCoder');
-      return null;
-    }
+  const addSplitPane = useCallback((kind: 'chat' | 'terminal' | 'coder'): string | null => {
     // Generate the id outside the updater so we can return it deterministically.
     // setPanes's updater can be invoked twice in strict mode; using a fixed id
     // ensures both invocations agree and the returned id matches what landed.
@@ -404,7 +407,10 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
         toast.error(`Maximum ${MAX_PANES} panes`);
         return prev;
       }
-      const newPane = kind === 'terminal' ? terminalPane(newPaneId) : emptyPane(newPaneId);
+      const newPane =
+        kind === 'terminal' ? terminalPane(newPaneId) :
+        kind === 'coder' ? coderPane(newPaneId) :
+        emptyPane(newPaneId);
       const next = [...prev, newPane];
       setActivePaneIdx(next.length - 1);
       success = true;

apps/web/src/pages/Session.tsx

@@ -178,7 +178,7 @@ function SessionInner({ sessionId }: { sessionId: string }) {
   // the new pane's id to the URL atomically so the effect's next pass sees a
   // matching id and is a no-op. Desktop has no URL pane state — fall through.
   const addPaneAndSwitch = useCallback(
-    (kind: 'chat' | 'terminal' | 'agent') => {
+    (kind: 'chat' | 'terminal' | 'coder') => {
       const newPaneId = addSplitPane(kind);
       if (newPaneId === null) return;
       if (isMobile) {

apps/web/vite.config.ts

@@ -30,6 +30,17 @@ export default defineConfig({
           'Remote-User': process.env.DEV_REMOTE_USER ?? 'sam',
         },
       },
+      // BooCoder: proxy /api/coder/* to the coder container. Must be listed
+      // before /api so the more-specific prefix matches first.
+      '/api/coder': {
+        target: process.env.BOOCODER_DEV_URL ?? 'http://127.0.0.1:9502',
+        changeOrigin: true,
+        ws: true,
+        rewrite: (path: string) => path.replace(/^\/api\/coder/, '/api'),
+        headers: {
+          'Remote-User': process.env.DEV_REMOTE_USER ?? 'sam',
+        },
+      },
       '/api': {
         target: 'http://127.0.0.1:3000',
         changeOrigin: true,

pnpm-lock.yaml

@@ -80,6 +80,49 @@ importers:
         specifier: ^3.0.0
         version: 3.2.4(@types/debug@4.1.13)(@types/node@20.19.41)(lightningcss@1.32.0)(msw@2.14.6(@types/node@20.19.41)(typescript@5.9.3))
 
+  apps/coder/web:
+    dependencies:
+      lucide-react:
+        specifier: ^1.16.0
+        version: 1.16.0(react@18.3.1)
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@18.3.28)(react@18.3.1)
+      react-router-dom:
+        specifier: ^6.26.0
+        version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+    devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.3.0
+        version: 4.3.0
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.28
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.7(@types/react@18.3.28)
+      '@vitejs/plugin-react':
+        specifier: ^4.3.1
+        version: 4.7.0(vite@5.4.21(@types/node@20.19.41)(lightningcss@1.32.0))
+      tailwindcss:
+        specifier: ^4.3.0
+        version: 4.3.0
+      typescript:
+        specifier: ^5.5.0
+        version: 5.9.3
+      vite:
+        specifier: ^5.3.4
+        version: 5.4.21(@types/node@20.19.41)(lightningcss@1.32.0)
+
   apps/server:
     dependencies:
       '@ai-sdk/openai-compatible':

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 packages:
   - "apps/*"
+  - "apps/coder/web"