initial

2026-05-14 19:24:50 +00:00
parent af0628867f
commit a7f218e182
63 changed files with 10539 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,12 @@
+node_modules
+**/node_modules
+dist
+**/dist
+.env
+.git
+.gitignore
+.DS_Store
+*.log
+.vite
+coverage
+/tmp
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,7 @@
+NODE_ENV=production
+PORT=3000
+DATABASE_URL=postgres://boocode:CHANGE_ME@boocode_db:5432/boocode
+LLAMA_SWAP_URL=http://100.101.41.16:8401
+PROJECT_ROOT_WHITELIST=/opt
+DEFAULT_MODEL=qwen3.6-35b-a3b-mxfp4
+POSTGRES_PASSWORD=CHANGE_ME
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+.env
+*.log
+.DS_Store
+.vite
+coverage
--- a/32
+++ b/32
@@ -0,0 +1,32 @@
+# syntax=docker/dockerfile:1.7
+
+FROM node:20-alpine AS builder
+RUN corepack enable
+WORKDIR /build
+
+COPY package.json pnpm-workspace.yaml pnpm-lock.yaml tsconfig.base.json ./
+COPY apps/server/package.json ./apps/server/
+COPY apps/web/package.json ./apps/web/
+
+RUN pnpm install --frozen-lockfile
+
+COPY apps/server ./apps/server
+COPY apps/web ./apps/web
+
+RUN pnpm build
+
+RUN pnpm deploy --filter=@boocode/server --prod --legacy /out/server
+
+
+FROM node:20-alpine AS runtime
+RUN apk add --no-cache ripgrep
+WORKDIR /app
+
+COPY --from=builder /out/server ./
+COPY --from=builder /build/apps/web/dist ./web
+
+ENV NODE_ENV=production
+ENV WEB_DIST_PATH=/app/web
+EXPOSE 3000
+
+CMD ["node", "dist/index.js"]
--- a/README.md
+++ b/README.md
@@ -1 +1,59 @@
 # boocode
+
+Self-hosted single-user developer chat app. v1: chat only.
+
+## Stack
+
+- Node 20, Fastify, postgres (porsager/postgres), ws, zod
+- React 18, Vite, TypeScript, Tailwind v4, shadcn/ui
+- Postgres 16
+- pnpm workspaces
+
+## Layout
+
+- `apps/server` — Fastify API + WebSocket + inference loop + file-read tools
+- `apps/web` — React frontend; served by Fastify in production, Vite in dev
+
+## Local dev
+
+Requires Node 20, pnpm, Docker (for Postgres), and ripgrep.
+
+```bash
+# install
+pnpm install
+
+# bring up postgres only
+cp .env.example .env
+# edit POSTGRES_PASSWORD if you like; default DATABASE_URL points at the container
+docker compose up -d boocode_db
+
+# run server (port 3000) and web (port 5173) in two shells
+DATABASE_URL=postgres://boocode:devpass@127.0.0.1:5500/boocode \
+LLAMA_SWAP_URL=http://100.101.41.16:8401 \
+pnpm dev:server
+
+pnpm dev:web
+```
+
+The Vite dev server proxies `/api` and `/api/ws/*` to the Fastify backend with a
+synthetic `Remote-User: sam` header so the Authelia auth layer can be skipped
+during development.
+
+## Production
+
+```bash
+cd /opt/boocode
+docker compose up --build -d
+```
+
+Binds to `100.114.205.53:9500` (Tailscale). Authelia is expected to gate the
+upstream and inject `Remote-User`. Postgres binds loopback only.
+
+## What v1 has
+
+Project sidebar, sessions per project, chat with streaming responses over
+WebSocket, four file-read tools scoped to the project root (`view_file`,
+`list_dir`, `grep`, `find_files`), and a model picker driven by llama-swap's
+`/v1/models`.
+
+What v1 does not have lives in v2 (terminal pane) and v3 (Coder pane).
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@boocode/server",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc && node -e \"import('node:fs').then(fs=>fs.copyFileSync('src/schema.sql','dist/schema.sql'))\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fastify/static": "^7.0.4",
+    "@fastify/websocket": "^10.0.1",
+    "fastify": "^4.28.1",
+    "postgres": "^3.4.4",
+    "ws": "^8.18.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "@types/ws": "^8.5.10",
+    "tsx": "^4.16.2",
+    "typescript": "^5.5.0"
+  }
+}
--- a/apps/server/src/auth.ts
+++ b/apps/server/src/auth.ts
@@ -0,0 +1,31 @@
+import type { FastifyInstance, FastifyRequest } from 'fastify';
+
+declare module 'fastify' {
+  interface FastifyRequest {
+    user?: string;
+  }
+}
+
+const PUBLIC_PATHS = new Set<string>(['/api/health']);
+
+export function registerAuth(app: FastifyInstance): void {
+  app.addHook('onRequest', async (req, reply) => {
+    if (!req.url.startsWith('/api')) return;
+    if (PUBLIC_PATHS.has(req.routeOptions.url ?? req.url.split('?')[0]!)) return;
+
+    const header = req.headers['remote-user'];
+    const user = Array.isArray(header) ? header[0] : header;
+    if (!user || user.trim() === '') {
+      reply.code(401).send({ error: 'unauthenticated' });
+      return reply;
+    }
+    req.user = user.trim();
+  });
+}
+
+export function requireUser(req: FastifyRequest): string {
+  if (!req.user) {
+    throw new Error('user not set on request — auth hook must run first');
+  }
+  return req.user;
+}
--- a/apps/server/src/config.ts
+++ b/apps/server/src/config.ts
@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+const ConfigSchema = z.object({
+  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
+  PORT: z.coerce.number().int().positive().default(3000),
+  HOST: z.string().default('0.0.0.0'),
+  DATABASE_URL: z.string().url(),
+  LLAMA_SWAP_URL: z.string().url(),
+  PROJECT_ROOT_WHITELIST: z.string().default('/opt'),
+  DEFAULT_MODEL: z.string().default('qwen3.6-35b-a3b-mxfp4'),
+  LOG_LEVEL: z.string().default('info'),
+});
+
+export type Config = z.infer<typeof ConfigSchema>;
+
+let cached: Config | null = null;
+
+export function loadConfig(): Config {
+  if (cached) return cached;
+  const parsed = ConfigSchema.safeParse(process.env);
+  if (!parsed.success) {
+    console.error('Invalid environment configuration:');
+    console.error(parsed.error.flatten().fieldErrors);
+    process.exit(1);
+  }
+  cached = parsed.data;
+  return cached;
+}
--- a/apps/server/src/db.ts
+++ b/apps/server/src/db.ts
@@ -0,0 +1,45 @@
+import postgres from 'postgres';
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+import type { Config } from './config.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export type Sql = ReturnType<typeof postgres>;
+
+let sqlInstance: Sql | null = null;
+
+export function getSql(config: Config): Sql {
+  if (sqlInstance) return sqlInstance;
+  sqlInstance = postgres(config.DATABASE_URL, {
+    max: 10,
+    idle_timeout: 30,
+    connect_timeout: 10,
+    onnotice: () => {},
+  });
+  return sqlInstance;
+}
+
+export async function applySchema(sql: Sql): Promise<void> {
+  const schemaPath = resolve(__dirname, 'schema.sql');
+  const ddl = await readFile(schemaPath, 'utf8');
+  await sql.unsafe(ddl);
+}
+
+export async function pingDb(sql: Sql): Promise<boolean> {
+  try {
+    await sql`SELECT 1`;
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function closeDb(): Promise<void> {
+  if (sqlInstance) {
+    await sqlInstance.end({ timeout: 5 });
+    sqlInstance = null;
+  }
+}
--- a/apps/server/src/index.ts
+++ b/apps/server/src/index.ts
@@ -0,0 +1,114 @@
+import Fastify from 'fastify';
+import fastifyStatic from '@fastify/static';
+import fastifyWebsocket from '@fastify/websocket';
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { loadConfig } from './config.js';
+import { getSql, applySchema, pingDb, closeDb } from './db.js';
+import { registerAuth } from './auth.js';
+import { registerProjectRoutes } from './routes/projects.js';
+import { registerSessionRoutes } from './routes/sessions.js';
+import { registerSettingsRoutes } from './routes/settings.js';
+import { registerMessageRoutes } from './routes/messages.js';
+import { registerWebSocket } from './routes/ws.js';
+import { registerModelRoutes } from './routes/models.js';
+import { createInferenceRunner } from './services/inference.js';
+import { createBroker } from './services/broker.js';
+
+async function main() {
+  const config = loadConfig();
+
+  const app = Fastify({
+    logger: { level: config.LOG_LEVEL },
+  });
+
+  const sql = getSql(config);
+  await applySchema(sql);
+  app.log.info('database schema applied');
+
+  await app.register(fastifyWebsocket);
+
+  registerAuth(app);
+
+  app.get('/api/health', async () => {
+    const dbOk = await pingDb(sql);
+    return { status: dbOk ? 'ok' : 'degraded', db: dbOk };
+  });
+
+  registerProjectRoutes(app, sql, config);
+  registerSessionRoutes(app, sql, config);
+  registerSettingsRoutes(app, sql);
+  registerModelRoutes(app, config);
+
+  const broker = createBroker();
+  const inference = createInferenceRunner({
+    sql,
+    config,
+    log: app.log,
+    publish: (sessionId, frame) => {
+      broker.publish(sessionId, frame as unknown as Record<string, unknown> & { type: string });
+    },
+  });
+  registerMessageRoutes(app, sql, {
+    onSend: (sessionId, _userId, assistantId) => {
+      inference.enqueue(sessionId, assistantId);
+    },
+    publishUserMessage: (sessionId, userMessageId, content) => {
+      broker.publish(sessionId, {
+        type: 'message_started',
+        message_id: userMessageId,
+        role: 'user',
+      });
+      broker.publish(sessionId, {
+        type: 'delta',
+        message_id: userMessageId,
+        content,
+      });
+      broker.publish(sessionId, {
+        type: 'message_complete',
+        message_id: userMessageId,
+      });
+    },
+  });
+  registerWebSocket(app, sql, broker);
+
+  const webDist = process.env.WEB_DIST_PATH ?? resolve(process.cwd(), '../web/dist');
+  if (existsSync(webDist)) {
+    await app.register(fastifyStatic, {
+      root: webDist,
+      prefix: '/',
+      wildcard: false,
+    });
+    app.setNotFoundHandler((req, reply) => {
+      if (req.url.startsWith('/api')) {
+        reply.code(404).send({ error: 'not found' });
+        return;
+      }
+      reply.sendFile('index.html');
+    });
+    app.log.info(`serving static frontend from ${webDist}`);
+  }
+
+  const shutdown = async (signal: string) => {
+    app.log.info(`received ${signal}, shutting down`);
+    try {
+      await app.close();
+      await closeDb();
+      process.exit(0);
+    } catch (err) {
+      app.log.error(err);
+      process.exit(1);
+    }
+  };
+
+  process.on('SIGINT', () => void shutdown('SIGINT'));
+  process.on('SIGTERM', () => void shutdown('SIGTERM'));
+
+  await app.listen({ port: config.PORT, host: config.HOST });
+  app.log.info(`boocode server listening on http://${config.HOST}:${config.PORT}`);
+}
+
+main().catch((err) => {
+  console.error('Fatal startup error:', err);
+  process.exit(1);
+});
--- a/apps/server/src/routes/messages.ts
+++ b/apps/server/src/routes/messages.ts
@@ -0,0 +1,83 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import type { Sql } from '../db.js';
+import type { Message, Session } from '../types/api.js';
+
+const SendBody = z.object({
+  content: z.string().min(1).max(64_000),
+});
+
+interface MessageHandlers {
+  onSend: (sessionId: string, userMessageId: string, assistantMessageId: string) => void;
+  publishUserMessage: (
+    sessionId: string,
+    userMessageId: string,
+    content: string
+  ) => void;
+}
+
+export function registerMessageRoutes(
+  app: FastifyInstance,
+  sql: Sql,
+  handlers: MessageHandlers
+): void {
+  app.get<{ Params: { id: string } }>(
+    '/api/sessions/:id/messages',
+    async (req, reply) => {
+      const session = await sql<Session[]>`SELECT id FROM sessions WHERE id = ${req.params.id}`;
+      if (session.length === 0) {
+        reply.code(404);
+        return { error: 'session not found' };
+      }
+      const rows = await sql<Message[]>`
+        SELECT id, session_id, role, content, tool_calls, tool_results, status, last_seq, created_at
+        FROM messages
+        WHERE session_id = ${req.params.id}
+        ORDER BY created_at ASC, id ASC
+      `;
+      return rows;
+    }
+  );
+
+  app.post<{ Params: { id: string } }>(
+    '/api/sessions/:id/messages',
+    async (req, reply) => {
+      const parsed = SendBody.safeParse(req.body);
+      if (!parsed.success) {
+        reply.code(400);
+        return { error: 'invalid body', details: parsed.error.flatten() };
+      }
+
+      const session = await sql<Session[]>`SELECT id FROM sessions WHERE id = ${req.params.id}`;
+      if (session.length === 0) {
+        reply.code(404);
+        return { error: 'session not found' };
+      }
+
+      const result = await sql.begin(async (tx) => {
+        const [userMsg] = await tx<{ id: string }[]>`
+          INSERT INTO messages (session_id, role, content, status, created_at)
+          VALUES (${req.params.id}, 'user', ${parsed.data.content}, 'complete', clock_timestamp())
+          RETURNING id
+        `;
+        const [assistantMsg] = await tx<{ id: string }[]>`
+          INSERT INTO messages (session_id, role, content, status, created_at)
+          VALUES (${req.params.id}, 'assistant', '', 'streaming', clock_timestamp())
+          RETURNING id
+        `;
+        await tx`UPDATE sessions SET updated_at = NOW() WHERE id = ${req.params.id}`;
+        return { user_message_id: userMsg!.id, assistant_message_id: assistantMsg!.id };
+      });
+
+      handlers.publishUserMessage(
+        req.params.id,
+        result.user_message_id,
+        parsed.data.content
+      );
+      handlers.onSend(req.params.id, result.user_message_id, result.assistant_message_id);
+
+      reply.code(202);
+      return result;
+    }
+  );
+}
--- a/apps/server/src/routes/models.ts
+++ b/apps/server/src/routes/models.ts
@@ -0,0 +1,27 @@
+import type { FastifyInstance } from 'fastify';
+import type { Config } from '../config.js';
+import type { ModelInfo } from '../types/api.js';
+
+interface LlamaSwapModelsResponse {
+  data?: ModelInfo[];
+}
+
+export function registerModelRoutes(app: FastifyInstance, config: Config): void {
+  app.get('/api/models', async (_req, reply) => {
+    try {
+      const res = await fetch(`${config.LLAMA_SWAP_URL}/v1/models`);
+      if (!res.ok) {
+        reply.code(502);
+        return { error: `llama-swap returned ${res.status}` };
+      }
+      const parsed = (await res.json()) as LlamaSwapModelsResponse;
+      return parsed.data ?? [];
+    } catch (err) {
+      reply.code(502);
+      return {
+        error: 'failed to reach llama-swap',
+        details: err instanceof Error ? err.message : String(err),
+      };
+    }
+  });
+}
--- a/apps/server/src/routes/projects.ts
+++ b/apps/server/src/routes/projects.ts
@@ -0,0 +1,130 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import { realpath, stat, readdir, access } from 'node:fs/promises';
+import { basename, resolve, sep } from 'node:path';
+import type { Sql } from '../db.js';
+import type { Config } from '../config.js';
+import type { Project, AvailableProject } from '../types/api.js';
+
+const AddProjectBody = z.object({
+  path: z.string().min(1),
+  name: z.string().min(1).optional(),
+});
+
+async function isDir(path: string): Promise<boolean> {
+  try {
+    const s = await stat(path);
+    return s.isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+async function resolveProjectPath(
+  raw: string,
+  whitelist: string
+): Promise<{ real: string; name: string } | { error: string }> {
+  if (!raw.startsWith('/')) return { error: 'path must be absolute' };
+  let real: string;
+  try {
+    real = await realpath(raw);
+  } catch {
+    return { error: 'path does not exist' };
+  }
+  const whitelistReal = await realpath(whitelist);
+  if (real !== whitelistReal && !real.startsWith(whitelistReal + sep)) {
+    return { error: `path must be under ${whitelist}` };
+  }
+  if (!(await isDir(real))) return { error: 'path is not a directory' };
+  return { real, name: basename(real) };
+}
+
+export function registerProjectRoutes(
+  app: FastifyInstance,
+  sql: Sql,
+  config: Config
+): void {
+  app.get('/api/projects', async () => {
+    const rows = await sql<Project[]>`
+      SELECT id, name, path, added_at, last_session_id
+      FROM projects
+      ORDER BY added_at DESC
+    `;
+    return rows;
+  });
+
+  app.post('/api/projects', async (req, reply) => {
+    const parsed = AddProjectBody.safeParse(req.body);
+    if (!parsed.success) {
+      reply.code(400);
+      return { error: 'invalid body', details: parsed.error.flatten() };
+    }
+    const resolved = await resolveProjectPath(parsed.data.path, config.PROJECT_ROOT_WHITELIST);
+    if ('error' in resolved) {
+      reply.code(400);
+      return { error: resolved.error };
+    }
+    const name = parsed.data.name?.trim() || resolved.name;
+    try {
+      const [row] = await sql<Project[]>`
+        INSERT INTO projects (name, path)
+        VALUES (${name}, ${resolved.real})
+        RETURNING id, name, path, added_at, last_session_id
+      `;
+      reply.code(201);
+      return row;
+    } catch (err) {
+      if (err instanceof Error && err.message.includes('duplicate key')) {
+        reply.code(409);
+        return { error: 'project already exists' };
+      }
+      throw err;
+    }
+  });
+
+  app.delete<{ Params: { id: string } }>('/api/projects/:id', async (req, reply) => {
+    const id = req.params.id;
+    const result = await sql`DELETE FROM projects WHERE id = ${id}`;
+    if (result.count === 0) {
+      reply.code(404);
+      return { error: 'not found' };
+    }
+    reply.code(204);
+    return null;
+  });
+
+  app.get('/api/projects/available', async () => {
+    const whitelist = await realpath(config.PROJECT_ROOT_WHITELIST);
+    let entries: string[];
+    try {
+      entries = await readdir(whitelist);
+    } catch {
+      return [] as AvailableProject[];
+    }
+
+    const existing = await sql<{ path: string }[]>`SELECT path FROM projects`;
+    const existingSet = new Set(existing.map((r) => r.path));
+
+    const out: AvailableProject[] = [];
+    for (const entry of entries) {
+      const full = resolve(whitelist, entry);
+      let real: string;
+      try {
+        real = await realpath(full);
+      } catch {
+        continue;
+      }
+      if (real !== whitelist && !real.startsWith(whitelist + sep)) continue;
+      if (existingSet.has(real)) continue;
+      if (!(await isDir(real))) continue;
+      try {
+        await access(resolve(real, '.git'));
+      } catch {
+        continue;
+      }
+      out.push({ path: real, name: basename(real) });
+    }
+    out.sort((a, b) => a.name.localeCompare(b.name));
+    return out;
+  });
+}
--- a/apps/server/src/routes/sessions.ts
+++ b/apps/server/src/routes/sessions.ts
@@ -0,0 +1,138 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import type { Sql } from '../db.js';
+import type { Config } from '../config.js';
+import type { Session } from '../types/api.js';
+import { getSetting } from './settings.js';
+
+const CreateBody = z.object({
+  name: z.string().min(1).max(200).optional(),
+  model: z.string().min(1).max(200).optional(),
+  system_prompt: z.string().max(8000).optional(),
+});
+
+const PatchBody = z.object({
+  name: z.string().min(1).max(200).optional(),
+  model: z.string().min(1).max(200).optional(),
+  system_prompt: z.string().max(8000).optional(),
+});
+
+async function resolveDefaultModel(sql: Sql, config: Config): Promise<string> {
+  const fromDb = await getSetting<string>(sql, 'default_model');
+  if (typeof fromDb === 'string' && fromDb.length > 0) return fromDb;
+  return config.DEFAULT_MODEL;
+}
+
+export function registerSessionRoutes(
+  app: FastifyInstance,
+  sql: Sql,
+  config: Config
+): void {
+  app.get<{ Params: { id: string } }>(
+    '/api/projects/:id/sessions',
+    async (req, reply) => {
+      const project = await sql`SELECT id FROM projects WHERE id = ${req.params.id}`;
+      if (project.length === 0) {
+        reply.code(404);
+        return { error: 'project not found' };
+      }
+      const rows = await sql<Session[]>`
+        SELECT id, project_id, name, model, system_prompt, created_at, updated_at
+        FROM sessions
+        WHERE project_id = ${req.params.id}
+        ORDER BY updated_at DESC
+      `;
+      return rows;
+    }
+  );
+
+  app.post<{ Params: { id: string } }>(
+    '/api/projects/:id/sessions',
+    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 = await sql`SELECT id FROM projects WHERE id = ${req.params.id}`;
+      if (project.length === 0) {
+        reply.code(404);
+        return { error: 'project not found' };
+      }
+
+      let model = parsed.data.model;
+      if (!model) {
+        const lastUsed = await sql<{ model: string }[]>`
+          SELECT model FROM sessions
+          WHERE project_id = ${req.params.id}
+          ORDER BY created_at DESC
+          LIMIT 1
+        `;
+        model = lastUsed[0]?.model ?? (await resolveDefaultModel(sql, config));
+      }
+
+      const name = parsed.data.name ?? 'New session';
+      const systemPrompt = parsed.data.system_prompt ?? '';
+
+      const [row] = await sql<Session[]>`
+        INSERT INTO sessions (project_id, name, model, system_prompt)
+        VALUES (${req.params.id}, ${name}, ${model}, ${systemPrompt})
+        RETURNING id, project_id, name, model, system_prompt, created_at, updated_at
+      `;
+      reply.code(201);
+      return row;
+    }
+  );
+
+  app.get<{ Params: { id: string } }>('/api/sessions/:id', async (req, reply) => {
+    const rows = await sql<Session[]>`
+      SELECT id, project_id, name, model, system_prompt, created_at, updated_at
+      FROM sessions WHERE id = ${req.params.id}
+    `;
+    if (rows.length === 0) {
+      reply.code(404);
+      return { error: 'session not found' };
+    }
+    return rows[0];
+  });
+
+  app.patch<{ Params: { id: string } }>(
+    '/api/sessions/:id',
+    async (req, reply) => {
+      const parsed = PatchBody.safeParse(req.body);
+      if (!parsed.success) {
+        reply.code(400);
+        return { error: 'invalid body', details: parsed.error.flatten() };
+      }
+      const { name, model, system_prompt } = parsed.data;
+      const rows = await sql<Session[]>`
+        UPDATE sessions
+        SET
+          name = COALESCE(${name ?? null}, name),
+          model = COALESCE(${model ?? null}, model),
+          system_prompt = COALESCE(${system_prompt ?? null}, system_prompt),
+          updated_at = NOW()
+        WHERE id = ${req.params.id}
+        RETURNING id, project_id, name, model, system_prompt, created_at, updated_at
+      `;
+      if (rows.length === 0) {
+        reply.code(404);
+        return { error: 'session not found' };
+      }
+      return rows[0];
+    }
+  );
+
+  app.delete<{ Params: { id: string } }>(
+    '/api/sessions/:id',
+    async (req, reply) => {
+      const result = await sql`DELETE FROM sessions WHERE id = ${req.params.id}`;
+      if (result.count === 0) {
+        reply.code(404);
+        return { error: 'not found' };
+      }
+      reply.code(204);
+      return null;
+    }
+  );
+}
--- a/apps/server/src/routes/settings.ts
+++ b/apps/server/src/routes/settings.ts
@@ -0,0 +1,49 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import type { Sql } from '../db.js';
+
+export async function getSetting<T = unknown>(
+  sql: Sql,
+  key: string
+): Promise<T | null> {
+  const rows = await sql<{ value: T }[]>`SELECT value FROM settings WHERE key = ${key}`;
+  return rows[0]?.value ?? null;
+}
+
+export async function setSetting(
+  sql: Sql,
+  key: string,
+  value: unknown
+): Promise<void> {
+  await sql`
+    INSERT INTO settings (key, value)
+    VALUES (${key}, ${sql.json(value as never)})
+    ON CONFLICT (key) DO UPDATE SET value = EXCLUDED.value
+  `;
+}
+
+const PatchBody = z.record(z.string(), z.unknown());
+
+export function registerSettingsRoutes(app: FastifyInstance, sql: Sql): void {
+  app.get('/api/settings', async () => {
+    const rows = await sql<{ key: string; value: unknown }[]>`SELECT key, value FROM settings`;
+    const out: Record<string, unknown> = {};
+    for (const r of rows) out[r.key] = r.value;
+    return out;
+  });
+
+  app.patch('/api/settings', async (req, reply) => {
+    const parsed = PatchBody.safeParse(req.body);
+    if (!parsed.success) {
+      reply.code(400);
+      return { error: 'invalid body', details: parsed.error.flatten() };
+    }
+    for (const [k, v] of Object.entries(parsed.data)) {
+      await setSetting(sql, k, v);
+    }
+    const rows = await sql<{ key: string; value: unknown }[]>`SELECT key, value FROM settings`;
+    const out: Record<string, unknown> = {};
+    for (const r of rows) out[r.key] = r.value;
+    return out;
+  });
+}
--- a/apps/server/src/routes/ws.ts
+++ b/apps/server/src/routes/ws.ts
@@ -0,0 +1,45 @@
+import type { FastifyInstance } from 'fastify';
+import type { Sql } from '../db.js';
+import type { Broker } from '../services/broker.js';
+import type { Message } from '../types/api.js';
+
+export function registerWebSocket(
+  app: FastifyInstance,
+  sql: Sql,
+  broker: Broker
+): void {
+  app.get<{ Params: { id: string } }>(
+    '/api/ws/sessions/:id',
+    { websocket: true },
+    async (socket, req) => {
+      const sessionId = req.params.id;
+
+      const session = await sql<{ id: string }[]>`SELECT id FROM sessions WHERE id = ${sessionId}`;
+      if (session.length === 0) {
+        socket.send(JSON.stringify({ type: 'error', error: 'session not found' }));
+        socket.close(1008, 'session not found');
+        return;
+      }
+
+      const messages = await sql<Message[]>`
+        SELECT id, session_id, role, content, tool_calls, tool_results, status, last_seq, created_at
+        FROM messages
+        WHERE session_id = ${sessionId}
+        ORDER BY created_at ASC, id ASC
+      `;
+      socket.send(JSON.stringify({ type: 'snapshot', messages }));
+
+      const unsubscribe = broker.subscribe(sessionId, (frame) => {
+        if (socket.readyState !== socket.OPEN) return;
+        try {
+          socket.send(JSON.stringify(frame));
+        } catch (err) {
+          app.log.warn({ err, sessionId }, 'ws send failed');
+        }
+      });
+
+      socket.on('close', () => unsubscribe());
+      socket.on('error', () => unsubscribe());
+    }
+  );
+}
--- a/apps/server/src/schema.sql
+++ b/apps/server/src/schema.sql
@@ -0,0 +1,40 @@
+CREATE TABLE IF NOT EXISTS projects (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  name TEXT NOT NULL,
+  path TEXT NOT NULL UNIQUE,
+  added_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+  last_session_id UUID
+);
+
+CREATE TABLE IF NOT EXISTS sessions (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  project_id UUID NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+  name TEXT NOT NULL,
+  model TEXT NOT NULL,
+  system_prompt TEXT NOT NULL DEFAULT '',
+  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_sessions_project ON sessions(project_id, updated_at DESC);
+
+CREATE TABLE IF NOT EXISTS messages (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  session_id UUID NOT NULL REFERENCES sessions(id) ON DELETE CASCADE,
+  role TEXT NOT NULL CHECK (role IN ('user', 'assistant', 'tool')),
+  content TEXT NOT NULL DEFAULT '',
+  tool_calls JSONB,
+  tool_results JSONB,
+  status TEXT NOT NULL DEFAULT 'complete' CHECK (status IN ('streaming', 'complete', 'failed')),
+  last_seq INT NOT NULL DEFAULT 0,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_messages_session ON messages(session_id, created_at);
+
+CREATE TABLE IF NOT EXISTS settings (
+  key TEXT PRIMARY KEY,
+  value JSONB NOT NULL
+);
+
+INSERT INTO settings (key, value) VALUES ('default_model', '"qwen3.6-35b-a3b-mxfp4"') ON CONFLICT (key) DO NOTHING;
--- a/apps/server/src/services/broker.ts
+++ b/apps/server/src/services/broker.ts
@@ -0,0 +1,38 @@
+export type Frame = Record<string, unknown> & { type: string };
+export type Listener = (frame: Frame) => void;
+
+export interface Broker {
+  publish(sessionId: string, frame: Frame): void;
+  subscribe(sessionId: string, listener: Listener): () => void;
+}
+
+export function createBroker(): Broker {
+  const topics = new Map<string, Set<Listener>>();
+  return {
+    publish(sessionId, frame) {
+      const set = topics.get(sessionId);
+      if (!set) return;
+      for (const listener of set) {
+        try {
+          listener(frame);
+        } catch {
+          // ignore listener errors so one bad subscriber doesn't break the rest
+        }
+      }
+    },
+    subscribe(sessionId, listener) {
+      let set = topics.get(sessionId);
+      if (!set) {
+        set = new Set();
+        topics.set(sessionId, set);
+      }
+      set.add(listener);
+      return () => {
+        const s = topics.get(sessionId);
+        if (!s) return;
+        s.delete(listener);
+        if (s.size === 0) topics.delete(sessionId);
+      };
+    },
+  };
+}
--- a/apps/server/src/services/inference.ts
+++ b/apps/server/src/services/inference.ts
@@ -0,0 +1,471 @@
+import type { FastifyBaseLogger } from 'fastify';
+import type { Sql } from '../db.js';
+import type { Config } from '../config.js';
+import type { Message, Project, Session, ToolCall } from '../types/api.js';
+import { ALL_TOOLS, TOOLS_BY_NAME, toolJsonSchemas } from './tools.js';
+import { PathScopeError, resolveProjectRoot } from './path_guard.js';
+
+const BASE_SYSTEM_PROMPT = (projectPath: string) =>
+  `You are BooCode Chat, a code investigation assistant. The user is working on a project located at ${projectPath}. Use the file-read tools (view_file, list_dir, grep, find_files) to investigate code when needed. Be concise. Cite file paths and line numbers when discussing code. Do not hallucinate file contents — read the file first. Tool results may be truncated; if so, narrow your query rather than guessing.`;
+
+const DB_FLUSH_INTERVAL_MS = 500;
+const MAX_TOOL_LOOP_DEPTH = 5;
+
+export interface InferenceFrame {
+  type: 'message_started' | 'delta' | 'tool_call' | 'tool_result' | 'message_complete' | 'error';
+  message_id?: string;
+  tool_message_id?: string;
+  tool_call_id?: string;
+  role?: 'assistant' | 'tool' | 'user';
+  content?: string;
+  tool_call?: ToolCall;
+  output?: unknown;
+  truncated?: boolean;
+  error?: string;
+}
+
+export type FramePublisher = (sessionId: string, frame: InferenceFrame) => void;
+
+interface OpenAiMessage {
+  role: 'system' | 'user' | 'assistant' | 'tool';
+  content: string | null;
+  tool_calls?: Array<{
+    id: string;
+    type: 'function';
+    function: { name: string; arguments: string };
+  }>;
+  tool_call_id?: string;
+}
+
+interface ChatCompletionDelta {
+  role?: string;
+  content?: string | null;
+  tool_calls?: Array<{
+    index: number;
+    id?: string;
+    type?: 'function';
+    function?: { name?: string; arguments?: string };
+  }>;
+}
+
+interface ChatCompletionChunk {
+  choices: Array<{
+    delta: ChatCompletionDelta;
+    finish_reason: string | null;
+  }>;
+}
+
+interface InferenceContext {
+  sql: Sql;
+  config: Config;
+  log: FastifyBaseLogger;
+  publish: FramePublisher;
+}
+
+export function buildMessagesPayload(
+  session: Session,
+  project: Project,
+  history: Message[]
+): OpenAiMessage[] {
+  const out: OpenAiMessage[] = [];
+  let systemPrompt = BASE_SYSTEM_PROMPT(project.path);
+  if (session.system_prompt && session.system_prompt.trim().length > 0) {
+    systemPrompt += '\n\n' + session.system_prompt.trim();
+  }
+  out.push({ role: 'system', content: systemPrompt });
+
+  for (const m of history) {
+    if (m.role === 'assistant' && m.status === 'streaming') continue;
+    if (m.role === 'tool') {
+      const tr = m.tool_results;
+      if (!tr) continue;
+      const outputText = tr.error
+        ? `error: ${tr.error}`
+        : typeof tr.output === 'string'
+          ? tr.output
+          : JSON.stringify(tr.output);
+      out.push({
+        role: 'tool',
+        content: outputText,
+        tool_call_id: tr.tool_call_id,
+      });
+      continue;
+    }
+    if (m.role === 'assistant') {
+      const msg: OpenAiMessage = {
+        role: 'assistant',
+        content: m.content && m.content.length > 0 ? m.content : null,
+      };
+      if (m.tool_calls && m.tool_calls.length > 0) {
+        msg.tool_calls = m.tool_calls.map((tc) => ({
+          id: tc.id,
+          type: 'function' as const,
+          function: { name: tc.name, arguments: JSON.stringify(tc.args) },
+        }));
+      }
+      out.push(msg);
+      continue;
+    }
+    out.push({ role: 'user', content: m.content });
+  }
+  return out;
+}
+
+async function loadContext(
+  sql: Sql,
+  sessionId: string
+): Promise<{ session: Session; project: Project; history: Message[] } | null> {
+  const sessionRows = await sql<Session[]>`
+    SELECT id, project_id, name, model, system_prompt, created_at, updated_at
+    FROM sessions WHERE id = ${sessionId}
+  `;
+  if (sessionRows.length === 0) return null;
+  const session = sessionRows[0]!;
+
+  const projectRows = await sql<Project[]>`
+    SELECT id, name, path, added_at, last_session_id
+    FROM projects WHERE id = ${session.project_id}
+  `;
+  if (projectRows.length === 0) return null;
+  const project = projectRows[0]!;
+
+  const history = await sql<Message[]>`
+    SELECT id, session_id, role, content, tool_calls, tool_results, status, last_seq, created_at
+    FROM messages
+    WHERE session_id = ${sessionId}
+    ORDER BY created_at ASC, id ASC
+  `;
+
+  return { session, project, history };
+}
+
+async function* sseLines(stream: ReadableStream<Uint8Array>): AsyncGenerator<string> {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder('utf-8');
+  let buffer = '';
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      let idx;
+      while ((idx = buffer.indexOf('\n')) >= 0) {
+        const line = buffer.slice(0, idx).replace(/\r$/, '');
+        buffer = buffer.slice(idx + 1);
+        if (line.length === 0) continue;
+        yield line;
+      }
+    }
+    if (buffer.length > 0) yield buffer;
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+async function streamCompletion(
+  ctx: InferenceContext,
+  model: string,
+  messages: OpenAiMessage[],
+  includeTools: boolean,
+  onDelta: (content: string) => void
+): Promise<{ finishReason: string | null; content: string; toolCalls: ToolCall[] }> {
+  const body: Record<string, unknown> = { model, messages, stream: true };
+  if (includeTools) {
+    body['tools'] = toolJsonSchemas();
+    body['tool_choice'] = 'auto';
+  }
+
+  const res = await fetch(`${ctx.config.LLAMA_SWAP_URL}/v1/chat/completions`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok || !res.body) {
+    const text = await res.text().catch(() => '');
+    throw new Error(`llama-swap returned ${res.status}: ${text.slice(0, 200)}`);
+  }
+
+  let content = '';
+  let finishReason: string | null = null;
+  const toolCallsBuffer = new Map<number, { id: string; name: string; argsText: string }>();
+
+  for await (const line of sseLines(res.body)) {
+    if (!line.startsWith('data:')) continue;
+    const payload = line.slice(5).trim();
+    if (payload === '[DONE]') break;
+    let parsed: ChatCompletionChunk;
+    try {
+      parsed = JSON.parse(payload);
+    } catch {
+      continue;
+    }
+    const choice = parsed.choices?.[0];
+    if (!choice) continue;
+    const delta = choice.delta ?? {};
+    if (typeof delta.content === 'string' && delta.content.length > 0) {
+      content += delta.content;
+      onDelta(delta.content);
+    }
+    if (Array.isArray(delta.tool_calls)) {
+      for (const tc of delta.tool_calls) {
+        const idx = tc.index;
+        const existing = toolCallsBuffer.get(idx) ?? { id: '', name: '', argsText: '' };
+        if (tc.id) existing.id = tc.id;
+        if (tc.function?.name) existing.name = tc.function.name;
+        if (typeof tc.function?.arguments === 'string') existing.argsText += tc.function.arguments;
+        toolCallsBuffer.set(idx, existing);
+      }
+    }
+    if (choice.finish_reason) finishReason = choice.finish_reason;
+  }
+
+  const toolCalls: ToolCall[] = [];
+  for (const [, t] of [...toolCallsBuffer.entries()].sort(([a], [b]) => a - b)) {
+    let args: Record<string, unknown> = {};
+    if (t.argsText.length > 0) {
+      try {
+        args = JSON.parse(t.argsText);
+      } catch {
+        args = { _raw: t.argsText };
+      }
+    }
+    toolCalls.push({ id: t.id || `call_${toolCalls.length}`, name: t.name, args });
+  }
+
+  return { finishReason, content, toolCalls };
+}
+
+async function executeToolCall(
+  projectRoot: string,
+  toolCall: ToolCall
+): Promise<{ output: unknown; truncated: boolean; error?: string }> {
+  const tool = TOOLS_BY_NAME[toolCall.name];
+  if (!tool) {
+    return { output: null, truncated: false, error: `unknown tool: ${toolCall.name}` };
+  }
+  const parsed = tool.inputSchema.safeParse(toolCall.args);
+  if (!parsed.success) {
+    return {
+      output: null,
+      truncated: false,
+      error: `invalid input: ${JSON.stringify(parsed.error.flatten())}`,
+    };
+  }
+  try {
+    const output = await tool.execute(parsed.data, projectRoot);
+    const truncated =
+      typeof output === 'object' && output !== null && 'truncated' in output
+        ? Boolean((output as { truncated: unknown }).truncated)
+        : false;
+    return { output, truncated };
+  } catch (err) {
+    if (err instanceof PathScopeError) {
+      return { output: null, truncated: false, error: err.message };
+    }
+    return {
+      output: null,
+      truncated: false,
+      error: err instanceof Error ? err.message : String(err),
+    };
+  }
+}
+
+async function runAssistantTurn(
+  ctx: InferenceContext,
+  sessionId: string,
+  assistantMessageId: string,
+  depth: number
+): Promise<void> {
+  if (depth > MAX_TOOL_LOOP_DEPTH) {
+    await ctx.sql`
+      UPDATE messages
+      SET status = 'failed', content = ${'tool loop depth exceeded'}
+      WHERE id = ${assistantMessageId}
+    `;
+    ctx.publish(sessionId, {
+      type: 'error',
+      message_id: assistantMessageId,
+      error: 'tool loop depth exceeded',
+    });
+    return;
+  }
+
+  const loaded = await loadContext(ctx.sql, sessionId);
+  if (!loaded) {
+    ctx.log.warn({ sessionId }, 'inference: session or project missing');
+    return;
+  }
+  const { session, project, history } = loaded;
+  const projectRoot = await resolveProjectRoot(project.path);
+  const messages = buildMessagesPayload(session, project, history);
+
+  ctx.publish(sessionId, {
+    type: 'message_started',
+    message_id: assistantMessageId,
+    role: 'assistant',
+  });
+
+  let accumulated = '';
+  let pendingFlushTimer: NodeJS.Timeout | null = null;
+  let flushPromise: Promise<unknown> = Promise.resolve();
+
+  const flushNow = () => {
+    if (pendingFlushTimer) {
+      clearTimeout(pendingFlushTimer);
+      pendingFlushTimer = null;
+    }
+    const snapshot = accumulated;
+    flushPromise = flushPromise.then(() =>
+      ctx.sql`UPDATE messages SET content = ${snapshot} WHERE id = ${assistantMessageId}`
+    );
+  };
+
+  const scheduleFlush = () => {
+    if (pendingFlushTimer) return;
+    pendingFlushTimer = setTimeout(() => {
+      pendingFlushTimer = null;
+      flushNow();
+    }, DB_FLUSH_INTERVAL_MS);
+  };
+
+  let content = '';
+  let finishReason: string | null = null;
+  let toolCalls: ToolCall[] = [];
+
+  try {
+    const result = await streamCompletion(
+      ctx,
+      session.model,
+      messages,
+      true,
+      (delta) => {
+        accumulated += delta;
+        ctx.publish(sessionId, {
+          type: 'delta',
+          message_id: assistantMessageId,
+          content: delta,
+        });
+        ctx.log.debug({ sessionId, delta }, 'inference delta');
+        scheduleFlush();
+      }
+    );
+    content = result.content;
+    finishReason = result.finishReason;
+    toolCalls = result.toolCalls;
+  } catch (err) {
+    if (pendingFlushTimer) {
+      clearTimeout(pendingFlushTimer);
+      pendingFlushTimer = null;
+    }
+    const errMsg = err instanceof Error ? err.message : String(err);
+    await ctx.sql`
+      UPDATE messages
+      SET status = 'failed', content = ${accumulated}
+      WHERE id = ${assistantMessageId}
+    `;
+    ctx.publish(sessionId, {
+      type: 'error',
+      message_id: assistantMessageId,
+      error: errMsg,
+    });
+    ctx.log.error({ err, sessionId, assistantMessageId }, 'inference failed');
+    return;
+  }
+
+  if (pendingFlushTimer) {
+    clearTimeout(pendingFlushTimer);
+    pendingFlushTimer = null;
+  }
+  await flushPromise;
+
+  if (toolCalls.length > 0) {
+    await ctx.sql`
+      UPDATE messages
+      SET content = ${content}, status = 'complete',
+          tool_calls = ${ctx.sql.json(toolCalls as never)}
+      WHERE id = ${assistantMessageId}
+    `;
+    for (const tc of toolCalls) {
+      ctx.publish(sessionId, {
+        type: 'tool_call',
+        message_id: assistantMessageId,
+        tool_call: tc,
+      });
+    }
+    ctx.publish(sessionId, {
+      type: 'message_complete',
+      message_id: assistantMessageId,
+    });
+
+    await Promise.all(
+      toolCalls.map(async (tc) => {
+        const [toolRow] = await ctx.sql<{ id: string }[]>`
+          INSERT INTO messages (session_id, role, content, status, created_at)
+          VALUES (${sessionId}, 'tool', '', 'complete', clock_timestamp())
+          RETURNING id
+        `;
+        const toolMessageId = toolRow!.id;
+        const result = await executeToolCall(projectRoot, tc);
+        const stored = {
+          tool_call_id: tc.id,
+          output: result.output,
+          truncated: result.truncated,
+          ...(result.error ? { error: result.error } : {}),
+        };
+        await ctx.sql`
+          UPDATE messages
+          SET tool_results = ${ctx.sql.json(stored as never)}
+          WHERE id = ${toolMessageId}
+        `;
+        ctx.publish(sessionId, {
+          type: 'tool_result',
+          tool_message_id: toolMessageId,
+          tool_call_id: tc.id,
+          output: result.output,
+          truncated: result.truncated,
+          ...(result.error ? { error: result.error } : {}),
+        });
+      })
+    );
+
+    const [nextAssistant] = await ctx.sql<{ id: string }[]>`
+      INSERT INTO messages (session_id, role, content, status, created_at)
+      VALUES (${sessionId}, 'assistant', '', 'streaming', clock_timestamp())
+      RETURNING id
+    `;
+    await runAssistantTurn(ctx, sessionId, nextAssistant!.id, depth + 1);
+    return;
+  }
+
+  await ctx.sql`
+    UPDATE messages
+    SET content = ${content}, status = 'complete'
+    WHERE id = ${assistantMessageId}
+  `;
+  ctx.publish(sessionId, {
+    type: 'message_complete',
+    message_id: assistantMessageId,
+  });
+  ctx.log.info({ sessionId, assistantMessageId, finishReason, chars: content.length }, 'inference complete');
+}
+
+export async function runInference(
+  ctx: InferenceContext,
+  sessionId: string,
+  assistantMessageId: string
+): Promise<void> {
+  return runAssistantTurn(ctx, sessionId, assistantMessageId, 0);
+}
+
+export function createInferenceRunner(ctx: InferenceContext) {
+  return {
+    enqueue(sessionId: string, assistantMessageId: string) {
+      void runInference(ctx, sessionId, assistantMessageId).catch((err) => {
+        ctx.log.error({ err }, 'unhandled inference error');
+      });
+    },
+  };
+}
+
+// Reference to keep ALL_TOOLS imported for type checks if needed
+export const _toolNames = ALL_TOOLS.map((t) => t.name);
--- a/apps/server/src/services/path_guard.ts
+++ b/apps/server/src/services/path_guard.ts
@@ -0,0 +1,39 @@
+import { realpath } from 'node:fs/promises';
+import { isAbsolute, resolve, sep } from 'node:path';
+
+export class PathScopeError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'PathScopeError';
+  }
+}
+
+export async function resolveProjectRoot(projectPath: string): Promise<string> {
+  try {
+    return await realpath(projectPath);
+  } catch {
+    throw new PathScopeError(`project path does not exist: ${projectPath}`);
+  }
+}
+
+export async function pathGuard(
+  projectRoot: string,
+  requested: string
+): Promise<string> {
+  if (typeof requested !== 'string' || requested.length === 0) {
+    throw new PathScopeError('path is required');
+  }
+  const candidate = isAbsolute(requested) ? requested : resolve(projectRoot, requested);
+  let real: string;
+  try {
+    real = await realpath(candidate);
+  } catch {
+    throw new PathScopeError(`path does not exist: ${requested}`);
+  }
+  if (real !== projectRoot && !real.startsWith(projectRoot + sep)) {
+    throw new PathScopeError(
+      `path escapes project root: ${requested} -> ${real}`
+    );
+  }
+  return real;
+}
--- a/apps/server/src/services/tools.ts
+++ b/apps/server/src/services/tools.ts
@@ -0,0 +1,371 @@
+import { readFile, readdir, stat } from 'node:fs/promises';
+import { resolve, basename, relative } from 'node:path';
+import { spawn } from 'node:child_process';
+import { z } from 'zod';
+import { pathGuard, PathScopeError } from './path_guard.js';
+
+const MAX_FILE_BYTES = 5 * 1024 * 1024;
+const DEFAULT_VIEW_LINES = 200;
+const MAX_GREP_RESULTS = 200;
+const DEFAULT_GREP_RESULTS = 100;
+const MAX_FIND_RESULTS = 200;
+const DEFAULT_FIND_RESULTS = 100;
+const MAX_DIR_ENTRIES = 500;
+
+export interface ToolJsonSchema {
+  type: 'function';
+  function: {
+    name: string;
+    description: string;
+    parameters: Record<string, unknown>;
+  };
+}
+
+export interface ToolDef<TInput> {
+  name: string;
+  description: string;
+  inputSchema: z.ZodType<TInput>;
+  jsonSchema: ToolJsonSchema;
+  execute(input: TInput, projectRoot: string): Promise<unknown>;
+}
+
+const ViewFileInput = z.object({
+  path: z.string().min(1),
+  start_line: z.number().int().positive().optional(),
+  end_line: z.number().int().positive().optional(),
+});
+type ViewFileInputT = z.infer<typeof ViewFileInput>;
+
+export const viewFile: ToolDef<ViewFileInputT> = {
+  name: 'view_file',
+  description:
+    "Read a file under the project. Returns first 200 lines by default, or a slice via start_line/end_line (1-indexed, inclusive). Files larger than 5MB are refused. Output is truncated if longer than the slice; the response indicates truncation.",
+  inputSchema: ViewFileInput,
+  jsonSchema: {
+    type: 'function',
+    function: {
+      name: 'view_file',
+      description:
+        "Read a file under the project. Returns first 200 lines by default, or a slice via start_line/end_line (1-indexed, inclusive). Files larger than 5MB are refused.",
+      parameters: {
+        type: 'object',
+        properties: {
+          path: { type: 'string', description: 'absolute or project-relative path' },
+          start_line: { type: 'integer', description: 'first line (1-indexed)' },
+          end_line: { type: 'integer', description: 'last line (1-indexed, inclusive)' },
+        },
+        required: ['path'],
+        additionalProperties: false,
+      },
+    },
+  },
+  async execute(input, projectRoot) {
+    const real = await pathGuard(projectRoot, input.path);
+    const s = await stat(real);
+    if (!s.isFile()) {
+      throw new PathScopeError(`not a file: ${input.path}`);
+    }
+    if (s.size > MAX_FILE_BYTES) {
+      throw new Error(`file too large (${s.size} bytes, max ${MAX_FILE_BYTES})`);
+    }
+    const raw = await readFile(real, 'utf8');
+    const lines = raw.split('\n');
+    const total = lines.length;
+    let start = input.start_line ?? 1;
+    let end = input.end_line ?? Math.min(total, start + DEFAULT_VIEW_LINES - 1);
+    if (input.start_line == null && input.end_line == null) {
+      end = Math.min(total, DEFAULT_VIEW_LINES);
+    }
+    if (start < 1) start = 1;
+    if (end > total) end = total;
+    if (end < start) end = start;
+    const slice = lines.slice(start - 1, end);
+    const content = slice.join('\n');
+    const truncated = total > end || start > 1;
+    return {
+      path: relative(projectRoot, real) || basename(real),
+      content,
+      total_lines: total,
+      returned_lines: [start, end],
+      truncated,
+    };
+  },
+};
+
+const ListDirInput = z.object({
+  path: z.string().min(1),
+  show_hidden: z.boolean().optional(),
+});
+type ListDirInputT = z.infer<typeof ListDirInput>;
+
+export const listDir: ToolDef<ListDirInputT> = {
+  name: 'list_dir',
+  description: 'List entries in a directory (up to 500). Hidden files excluded unless show_hidden=true.',
+  inputSchema: ListDirInput,
+  jsonSchema: {
+    type: 'function',
+    function: {
+      name: 'list_dir',
+      description:
+        'List entries in a directory (up to 500). Hidden files (dot-prefixed) excluded unless show_hidden=true.',
+      parameters: {
+        type: 'object',
+        properties: {
+          path: { type: 'string' },
+          show_hidden: { type: 'boolean' },
+        },
+        required: ['path'],
+        additionalProperties: false,
+      },
+    },
+  },
+  async execute(input, projectRoot) {
+    const real = await pathGuard(projectRoot, input.path);
+    const s = await stat(real);
+    if (!s.isDirectory()) {
+      throw new PathScopeError(`not a directory: ${input.path}`);
+    }
+    const entries = await readdir(real, { withFileTypes: true });
+    const filtered = input.show_hidden
+      ? entries
+      : entries.filter((e) => !e.name.startsWith('.'));
+    const total = filtered.length;
+    const slice = filtered.slice(0, MAX_DIR_ENTRIES);
+    const out = await Promise.all(
+      slice.map(async (e) => {
+        const child = resolve(real, e.name);
+        let size: number | undefined;
+        if (e.isFile()) {
+          try {
+            const cs = await stat(child);
+            size = cs.size;
+          } catch {
+            /* ignore */
+          }
+        }
+        return {
+          name: e.name,
+          type: e.isDirectory() ? ('dir' as const) : ('file' as const),
+          ...(size != null ? { size } : {}),
+        };
+      })
+    );
+    return {
+      path: relative(projectRoot, real) || '.',
+      entries: out,
+      total,
+      truncated: total > MAX_DIR_ENTRIES,
+    };
+  },
+};
+
+const GrepInput = z.object({
+  pattern: z.string().min(1),
+  path: z.string().optional(),
+  case_sensitive: z.boolean().optional(),
+  max_results: z.number().int().positive().optional(),
+  hidden: z.boolean().optional(),
+});
+type GrepInputT = z.infer<typeof GrepInput>;
+
+interface RipgrepMatch {
+  type: string;
+  data?: {
+    path?: { text?: string };
+    line_number?: number;
+    lines?: { text?: string };
+  };
+}
+
+export const grep: ToolDef<GrepInputT> = {
+  name: 'grep',
+  description:
+    'Search file contents with ripgrep. Default path is project root. Max 100 results (200 cap).',
+  inputSchema: GrepInput,
+  jsonSchema: {
+    type: 'function',
+    function: {
+      name: 'grep',
+      description:
+        'Search file contents with ripgrep. Returns up to 100 matches (cap 200). Set hidden=true to include dot-prefixed files.',
+      parameters: {
+        type: 'object',
+        properties: {
+          pattern: { type: 'string' },
+          path: { type: 'string' },
+          case_sensitive: { type: 'boolean' },
+          max_results: { type: 'integer' },
+          hidden: { type: 'boolean' },
+        },
+        required: ['pattern'],
+        additionalProperties: false,
+      },
+    },
+  },
+  async execute(input, projectRoot) {
+    const target = await pathGuard(projectRoot, input.path ?? projectRoot);
+    const limit = Math.min(
+      Math.max(input.max_results ?? DEFAULT_GREP_RESULTS, 1),
+      MAX_GREP_RESULTS
+    );
+    const args = [
+      '--json',
+      '--max-count',
+      String(limit),
+      '--max-columns',
+      '300',
+    ];
+    if (!input.case_sensitive) args.push('--ignore-case');
+    if (input.hidden) args.push('--hidden');
+    args.push('--', input.pattern, target);
+
+    return await new Promise((resolveP, rejectP) => {
+      const child = spawn('rg', args, { cwd: projectRoot });
+      const matches: Array<{ path: string; line: number; content: string }> = [];
+      let buf = '';
+      let stderr = '';
+      child.stdout.setEncoding('utf8');
+      child.stderr.setEncoding('utf8');
+      child.stdout.on('data', (chunk: string) => {
+        buf += chunk;
+        let idx;
+        while ((idx = buf.indexOf('\n')) >= 0) {
+          const line = buf.slice(0, idx);
+          buf = buf.slice(idx + 1);
+          if (!line) continue;
+          if (matches.length >= limit) continue;
+          try {
+            const parsed = JSON.parse(line) as RipgrepMatch;
+            if (parsed.type !== 'match' || !parsed.data) continue;
+            const path = parsed.data.path?.text ?? '';
+            const lineNumber = parsed.data.line_number ?? 0;
+            const content = parsed.data.lines?.text ?? '';
+            matches.push({
+              path: relative(projectRoot, path) || path,
+              line: lineNumber,
+              content: content.replace(/\n$/, ''),
+            });
+          } catch {
+            /* ignore non-json */
+          }
+        }
+        if (matches.length >= limit) {
+          child.kill();
+        }
+      });
+      child.stderr.on('data', (chunk: string) => {
+        stderr += chunk;
+      });
+      child.on('error', (err) => rejectP(err));
+      child.on('close', (code) => {
+        // rg exits 1 when no matches, 2 on real error
+        if (code === 2 && matches.length === 0) {
+          rejectP(new Error(`ripgrep failed: ${stderr.slice(0, 300)}`));
+          return;
+        }
+        resolveP({
+          matches,
+          total: matches.length,
+          truncated: matches.length >= limit,
+        });
+      });
+    });
+  },
+};
+
+const FindFilesInput = z.object({
+  pattern: z.string().min(1),
+  path: z.string().optional(),
+  max_results: z.number().int().positive().optional(),
+});
+type FindFilesInputT = z.infer<typeof FindFilesInput>;
+
+export const findFiles: ToolDef<FindFilesInputT> = {
+  name: 'find_files',
+  description: 'Glob for filenames. Default path is project root. Max 100 results (200 cap).',
+  inputSchema: FindFilesInput,
+  jsonSchema: {
+    type: 'function',
+    function: {
+      name: 'find_files',
+      description:
+        'Glob for filenames under a directory. Default path is project root. Max 100 results (cap 200). Pattern uses standard glob (e.g. "**/*.ts").',
+      parameters: {
+        type: 'object',
+        properties: {
+          pattern: { type: 'string' },
+          path: { type: 'string' },
+          max_results: { type: 'integer' },
+        },
+        required: ['pattern'],
+        additionalProperties: false,
+      },
+    },
+  },
+  async execute(input, projectRoot) {
+    const target = await pathGuard(projectRoot, input.path ?? projectRoot);
+    const limit = Math.min(
+      Math.max(input.max_results ?? DEFAULT_FIND_RESULTS, 1),
+      MAX_FIND_RESULTS
+    );
+    return await new Promise((resolveP, rejectP) => {
+      const args = ['--files', '--glob', input.pattern, target];
+      const child = spawn('rg', args, { cwd: projectRoot });
+      const paths: string[] = [];
+      let total = 0;
+      let buf = '';
+      let stderr = '';
+      child.stdout.setEncoding('utf8');
+      child.stderr.setEncoding('utf8');
+      child.stdout.on('data', (chunk: string) => {
+        buf += chunk;
+        let idx;
+        while ((idx = buf.indexOf('\n')) >= 0) {
+          const line = buf.slice(0, idx);
+          buf = buf.slice(idx + 1);
+          if (!line) continue;
+          total++;
+          if (paths.length < limit) {
+            paths.push(relative(projectRoot, line) || line);
+          }
+        }
+      });
+      child.stderr.on('data', (chunk: string) => {
+        stderr += chunk;
+      });
+      child.on('error', (err) => rejectP(err));
+      child.on('close', (code) => {
+        if (code === 2) {
+          rejectP(new Error(`ripgrep failed: ${stderr.slice(0, 300)}`));
+          return;
+        }
+        if (buf.length > 0) {
+          total++;
+          if (paths.length < limit) {
+            paths.push(relative(projectRoot, buf) || buf);
+          }
+        }
+        resolveP({
+          paths,
+          total,
+          truncated: total > paths.length,
+        });
+      });
+    });
+  },
+};
+
+export const ALL_TOOLS: ReadonlyArray<ToolDef<unknown>> = [
+  viewFile as ToolDef<unknown>,
+  listDir as ToolDef<unknown>,
+  grep as ToolDef<unknown>,
+  findFiles as ToolDef<unknown>,
+];
+
+export const TOOLS_BY_NAME: Record<string, ToolDef<unknown>> = Object.fromEntries(
+  ALL_TOOLS.map((t) => [t.name, t])
+);
+
+export function toolJsonSchemas(): ToolJsonSchema[] {
+  return ALL_TOOLS.map((t) => t.jsonSchema);
+}
--- a/apps/server/src/types/api.ts
+++ b/apps/server/src/types/api.ts
@@ -0,0 +1,55 @@
+export interface Project {
+  id: string;
+  name: string;
+  path: string;
+  added_at: string;
+  last_session_id: string | null;
+}
+
+export interface AvailableProject {
+  path: string;
+  name: string;
+}
+
+export interface Session {
+  id: string;
+  project_id: string;
+  name: string;
+  model: string;
+  system_prompt: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export type MessageRole = 'user' | 'assistant' | 'tool';
+export type MessageStatus = 'streaming' | 'complete' | 'failed';
+
+export interface ToolCall {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+}
+
+export interface ToolResult {
+  tool_call_id: string;
+  output: unknown;
+  truncated: boolean;
+  error?: string;
+}
+
+export interface Message {
+  id: string;
+  session_id: string;
+  role: MessageRole;
+  content: string;
+  tool_calls: ToolCall[] | null;
+  tool_results: ToolResult | null;
+  status: MessageStatus;
+  last_seq: number;
+  created_at: string;
+}
+
+export interface ModelInfo {
+  id: string;
+  [key: string]: unknown;
+}
--- a/apps/server/tsconfig.json
+++ b/apps/server/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2022"],
+    "types": ["node"],
+    "declaration": false,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"]
+}
--- a/apps/web/components.json
+++ b/apps/web/components.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BooCode</title>
+  </head>
+  <body class="bg-neutral-950 text-neutral-100">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@boocode/web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc -b --noEmit"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.16.0",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
+    "shadcn": "^4.7.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^20.14.10",
+    "@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"
+  }
+}
--- a/apps/web/postcss.config.js
+++ b/apps/web/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -0,0 +1,24 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { ProjectSidebar } from '@/components/ProjectSidebar';
+import { Home } from '@/pages/Home';
+import { Project } from '@/pages/Project';
+import { Session } from '@/pages/Session';
+import { Toaster } from '@/components/ui/sonner';
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <div className="dark h-screen flex bg-background text-foreground">
+        <ProjectSidebar />
+        <main className="flex-1 flex flex-col min-w-0">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/project/:id" element={<Project />} />
+            <Route path="/session/:id" element={<Session />} />
+          </Routes>
+        </main>
+        <Toaster position="bottom-right" />
+      </div>
+    </BrowserRouter>
+  );
+}
--- a/apps/web/src/api/client.ts
+++ b/apps/web/src/api/client.ts
@@ -0,0 +1,98 @@
+import type {
+  Project,
+  AvailableProject,
+  Session,
+  Message,
+  ModelInfo,
+} 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<{ status: string; db: boolean }>('/api/health'),
+
+  projects: {
+    list: () => request<Project[]>('/api/projects'),
+    available: () => request<AvailableProject[]>('/api/projects/available'),
+    add: (body: { path: string; name?: string }) =>
+      request<Project>('/api/projects', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    remove: (id: string) =>
+      request<void>(`/api/projects/${id}`, { method: 'DELETE' }),
+  },
+
+  sessions: {
+    listForProject: (projectId: string) =>
+      request<Session[]>(`/api/projects/${projectId}/sessions`),
+    create: (
+      projectId: string,
+      body: { name?: string; model?: string; system_prompt?: string }
+    ) =>
+      request<Session>(`/api/projects/${projectId}/sessions`, {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    get: (id: string) => request<Session>(`/api/sessions/${id}`),
+    update: (
+      id: string,
+      body: Partial<Pick<Session, 'name' | 'model' | 'system_prompt'>>
+    ) =>
+      request<Session>(`/api/sessions/${id}`, {
+        method: 'PATCH',
+        body: JSON.stringify(body),
+      }),
+    remove: (id: string) =>
+      request<void>(`/api/sessions/${id}`, { method: 'DELETE' }),
+  },
+
+  messages: {
+    list: (sessionId: string) =>
+      request<Message[]>(`/api/sessions/${sessionId}/messages`),
+    send: (sessionId: string, content: string) =>
+      request<{ user_message_id: string; assistant_message_id: string }>(
+        `/api/sessions/${sessionId}/messages`,
+        {
+          method: 'POST',
+          body: JSON.stringify({ content }),
+        }
+      ),
+  },
+
+  models: () => request<ModelInfo[]>('/api/models'),
+
+  settings: {
+    get: () => request<Record<string, unknown>>('/api/settings'),
+    patch: (body: Record<string, unknown>) =>
+      request<Record<string, unknown>>('/api/settings', {
+        method: 'PATCH',
+        body: JSON.stringify(body),
+      }),
+  },
+};
--- a/apps/web/src/api/types.ts
+++ b/apps/web/src/api/types.ts
@@ -0,0 +1,71 @@
+export interface Project {
+  id: string;
+  name: string;
+  path: string;
+  added_at: string;
+  last_session_id: string | null;
+}
+
+export interface AvailableProject {
+  path: string;
+  name: string;
+}
+
+export interface Session {
+  id: string;
+  project_id: string;
+  name: string;
+  model: string;
+  system_prompt: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export type MessageRole = 'user' | 'assistant' | 'tool';
+export type MessageStatus = 'streaming' | 'complete' | 'failed';
+
+export interface ToolCall {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+}
+
+export interface ToolResult {
+  tool_call_id: string;
+  output: unknown;
+  truncated: boolean;
+  error?: string;
+}
+
+export interface Message {
+  id: string;
+  session_id: string;
+  role: MessageRole;
+  content: string;
+  tool_calls: ToolCall[] | null;
+  tool_results: ToolResult | null;
+  status: MessageStatus;
+  last_seq: number;
+  created_at: string;
+}
+
+export interface ModelInfo {
+  id: string;
+  [key: string]: unknown;
+}
+
+export type WsFrame =
+  | { type: 'snapshot'; messages: Message[] }
+  | { type: 'message_started'; message_id: string; role: MessageRole }
+  | { type: 'delta'; message_id: string; content: string }
+  | { type: 'tool_call'; message_id: string; tool_call: ToolCall }
+  | {
+      type: 'tool_result';
+      tool_message_id: string;
+      tool_call_id: string;
+      output: unknown;
+      truncated: boolean;
+      error?: string;
+    }
+  | { type: 'message_complete'; message_id: string }
+  | { type: 'error'; message_id?: string; error: string };
--- a/apps/web/src/components/AddProjectModal.tsx
+++ b/apps/web/src/components/AddProjectModal.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import { api } from '@/api/client';
+import type { AvailableProject } from '@/api/types';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAdded: () => void;
+}
+
+export function AddProjectModal({ open, onOpenChange, onAdded }: Props) {
+  const [available, setAvailable] = useState<AvailableProject[] | null>(null);
+  const [customPath, setCustomPath] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setError(null);
+    setCustomPath('');
+    setAvailable(null);
+    api.projects
+      .available()
+      .then(setAvailable)
+      .catch((err) =>
+        setError(err instanceof Error ? err.message : 'failed to list available projects')
+      );
+  }, [open]);
+
+  async function add(path: string) {
+    setBusy(true);
+    setError(null);
+    try {
+      await api.projects.add({ path });
+      onAdded();
+      onOpenChange(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'failed to add');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add project</DialogTitle>
+          <DialogDescription>
+            Pick from detected repos in /opt or type a path.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="rounded-md border max-h-64 overflow-y-auto">
+            {available === null && (
+              <div className="px-3 py-2 text-sm text-muted-foreground">Loading…</div>
+            )}
+            {available && available.length === 0 && (
+              <div className="px-3 py-2 text-sm text-muted-foreground">
+                No undiscovered repos in /opt.
+              </div>
+            )}
+            {available?.map((p) => (
+              <button
+                key={p.path}
+                disabled={busy}
+                onClick={() => void add(p.path)}
+                className="w-full text-left px-3 py-2 hover:bg-muted disabled:opacity-50 border-b last:border-b-0"
+              >
+                <div className="text-sm font-medium">{p.name}</div>
+                <div className="text-xs text-muted-foreground font-mono">{p.path}</div>
+              </button>
+            ))}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="custom-path">Custom path</Label>
+            <div className="flex gap-2">
+              <Input
+                id="custom-path"
+                placeholder="/opt/some-repo"
+                value={customPath}
+                onChange={(e) => setCustomPath(e.target.value)}
+                disabled={busy}
+              />
+              <Button
+                onClick={() => void add(customPath.trim())}
+                disabled={busy || !customPath.trim()}
+              >
+                Add
+              </Button>
+            </div>
+          </div>
+
+          {error && (
+            <div className="text-sm text-destructive">{error}</div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={busy}>
+            Cancel
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/apps/web/src/components/ChatInput.tsx
+++ b/apps/web/src/components/ChatInput.tsx
@@ -0,0 +1,58 @@
+import { useState, type KeyboardEvent } from 'react';
+import { Send } from 'lucide-react';
+import { toast } from 'sonner';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+
+interface Props {
+  disabled?: boolean;
+  onSend: (content: string) => void | Promise<void>;
+}
+
+export function ChatInput({ disabled, onSend }: Props) {
+  const [value, setValue] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    const text = value.trim();
+    if (!text || disabled || busy) return;
+    setBusy(true);
+    try {
+      await onSend(text);
+      setValue('');
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'failed to send');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      void submit();
+    }
+  }
+
+  return (
+    <div className="border-t px-4 py-3 flex items-end gap-2">
+      <Textarea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={onKeyDown}
+        placeholder="Ask about this project. Cmd/Ctrl+Enter to send."
+        disabled={disabled || busy}
+        rows={3}
+        className="resize-none min-h-[68px] max-h-[240px]"
+      />
+      <Button
+        onClick={() => void submit()}
+        disabled={disabled || busy || !value.trim()}
+        size="icon-lg"
+        aria-label="Send"
+      >
+        <Send />
+      </Button>
+    </div>
+  );
+}
--- a/apps/web/src/components/CodeBlock.tsx
+++ b/apps/web/src/components/CodeBlock.tsx
@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+
+// NOTE: spec calls for syntax-highlighted code blocks. Highlighting deferred
+// to keep dep footprint minimal; this renders styled mono code with a copy
+// button. Adding a highlighter (shiki / highlight.js) is a one-import swap.
+interface Props {
+  code: string;
+  lang?: string;
+}
+
+export function CodeBlock({ code, lang }: Props) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return (
+    <div className="rounded-md border bg-muted/40 overflow-hidden text-sm my-1">
+      <div className="flex items-center justify-between px-2 py-1 border-b text-xs text-muted-foreground">
+        <span className="font-mono">{lang || 'code'}</span>
+        <button
+          type="button"
+          onClick={() => void copy()}
+          className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-muted text-foreground"
+          aria-label="Copy code"
+        >
+          {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+          <span>{copied ? 'Copied' : 'Copy'}</span>
+        </button>
+      </div>
+      <pre className="overflow-x-auto px-3 py-2 font-mono text-xs leading-relaxed">
+        {code}
+      </pre>
+    </div>
+  );
+}
+
+interface SegmentText {
+  kind: 'text';
+  value: string;
+}
+interface SegmentCode {
+  kind: 'code';
+  lang?: string;
+  value: string;
+}
+export type Segment = SegmentText | SegmentCode;
+
+export function splitCodeBlocks(input: string): Segment[] {
+  const segments: Segment[] = [];
+  const fence = /```([a-zA-Z0-9_-]*)\n([\s\S]*?)```/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+  while ((match = fence.exec(input)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ kind: 'text', value: input.slice(lastIndex, match.index) });
+    }
+    segments.push({
+      kind: 'code',
+      lang: match[1] || undefined,
+      value: (match[2] ?? '').replace(/\n$/, ''),
+    });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < input.length) {
+    segments.push({ kind: 'text', value: input.slice(lastIndex) });
+  }
+  return segments;
+}
--- a/apps/web/src/components/MessageBubble.tsx
+++ b/apps/web/src/components/MessageBubble.tsx
@@ -0,0 +1,56 @@
+import type { Message } from '@/api/types';
+import { ToolCallCard } from './ToolCallCard';
+import { CodeBlock, splitCodeBlocks } from './CodeBlock';
+
+interface Props {
+  message: Message;
+}
+
+export function MessageBubble({ message }: Props) {
+  if (message.role === 'tool') {
+    return <ToolCallCard message={message} />;
+  }
+
+  if (message.role === 'user') {
+    return (
+      <div className="flex justify-end">
+        <div className="max-w-[80%] rounded-lg bg-primary text-primary-foreground px-3 py-2 text-sm whitespace-pre-wrap">
+          {message.content}
+        </div>
+      </div>
+    );
+  }
+
+  const isStreaming = message.status === 'streaming';
+  const failed = message.status === 'failed';
+
+  return (
+    <div className="flex flex-col gap-2">
+      {message.tool_calls?.map((tc) => (
+        <ToolCallCard key={tc.id} toolCall={tc} />
+      ))}
+      {(message.content.length > 0 || (!message.tool_calls?.length && isStreaming)) && (
+        <div className="max-w-[90%] text-sm leading-relaxed space-y-2">
+          {splitCodeBlocks(message.content).map((seg, i) =>
+            seg.kind === 'code' ? (
+              <CodeBlock key={i} code={seg.value} lang={seg.lang} />
+            ) : (
+              <div key={i} className="whitespace-pre-wrap">
+                {seg.value}
+                {isStreaming && i === splitCodeBlocks(message.content).length - 1 && (
+                  <span className="inline-block w-1.5 h-3.5 align-baseline bg-muted-foreground/60 animate-pulse ml-0.5" />
+                )}
+              </div>
+            )
+          )}
+          {message.content.length === 0 && isStreaming && (
+            <span className="inline-block w-1.5 h-3.5 align-baseline bg-muted-foreground/60 animate-pulse" />
+          )}
+        </div>
+      )}
+      {failed && (
+        <div className="text-xs text-destructive">message failed</div>
+      )}
+    </div>
+  );
+}
--- a/apps/web/src/components/MessageList.tsx
+++ b/apps/web/src/components/MessageList.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+import type { Message } from '@/api/types';
+import { MessageBubble } from './MessageBubble';
+
+interface Props {
+  messages: Message[];
+}
+
+export function MessageList({ messages }: Props) {
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ block: 'end' });
+  }, [messages]);
+
+  if (messages.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-sm text-muted-foreground">
+        Send a message to start.
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+      {messages.map((m) => (
+        <MessageBubble key={m.id} message={m} />
+      ))}
+      <div ref={endRef} />
+    </div>
+  );
+}
--- a/apps/web/src/components/ModelPicker.tsx
+++ b/apps/web/src/components/ModelPicker.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import { Check, ChevronDown } from 'lucide-react';
+import { api } from '@/api/client';
+import type { ModelInfo } from '@/api/types';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+interface Props {
+  value: string;
+  onChange: (model: string) => void | Promise<void>;
+}
+
+export function ModelPicker({ value, onChange }: Props) {
+  const [models, setModels] = useState<ModelInfo[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open || models !== null) return;
+    api.models()
+      .then(setModels)
+      .catch((err) =>
+        setError(err instanceof Error ? err.message : 'failed to load models')
+      );
+  }, [open, models]);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className="text-xs font-mono text-muted-foreground hover:text-foreground flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-muted/60"
+        >
+          {value}
+          <ChevronDown className="size-3 opacity-70" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="max-h-72 overflow-y-auto">
+        {error && (
+          <div className="px-2 py-1.5 text-xs text-destructive">{error}</div>
+        )}
+        {models === null && !error && (
+          <div className="px-2 py-1.5 text-xs text-muted-foreground">Loading…</div>
+        )}
+        {models?.map((m) => (
+          <DropdownMenuItem
+            key={m.id}
+            onSelect={() => void onChange(m.id)}
+            className="font-mono text-xs"
+          >
+            <Check
+              className={`size-3 ${m.id === value ? 'opacity-100' : 'opacity-0'}`}
+            />
+            {m.id}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/apps/web/src/components/ProjectSidebar.tsx
+++ b/apps/web/src/components/ProjectSidebar.tsx
@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import { Plus, Folder } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { AddProjectModal } from './AddProjectModal';
+import { useProjects } from '@/hooks/useProjects';
+
+export function ProjectSidebar() {
+  const { projects, refresh, remove } = useProjects();
+  const [addOpen, setAddOpen] = useState(false);
+  const navigate = useNavigate();
+
+  async function handleRemove(id: string) {
+    try {
+      await remove(id);
+      navigate('/');
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'failed to remove project');
+    }
+  }
+
+  return (
+    <aside className="w-60 shrink-0 border-r bg-sidebar text-sidebar-foreground flex flex-col h-screen">
+      <div className="px-4 py-3 border-b flex items-center justify-between">
+        <NavLink to="/" className="font-semibold tracking-tight text-base">
+          BooCode
+        </NavLink>
+        <Button
+          size="icon-sm"
+          variant="ghost"
+          onClick={() => setAddOpen(true)}
+          aria-label="Add project"
+        >
+          <Plus />
+        </Button>
+      </div>
+
+      <nav className="flex-1 overflow-y-auto py-2">
+        {projects === null && (
+          <div className="px-4 py-2 text-xs text-muted-foreground">Loading…</div>
+        )}
+        {projects && projects.length === 0 && (
+          <div className="px-4 py-2 text-xs text-muted-foreground">No projects yet.</div>
+        )}
+        {projects?.map((p) => (
+          <div key={p.id} className="px-2">
+            <DropdownMenu>
+              <NavLink
+                to={`/project/${p.id}`}
+                className={({ isActive }) =>
+                  `group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm ${
+                    isActive
+                      ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                      : 'hover:bg-sidebar-accent/60'
+                  }`
+                }
+                onContextMenu={(e) => {
+                  e.preventDefault();
+                  (
+                    e.currentTarget.parentElement?.querySelector(
+                      '[data-ctxtrigger]'
+                    ) as HTMLElement | null
+                  )?.click();
+                }}
+              >
+                <Folder className="size-3.5 shrink-0 opacity-70" />
+                <span className="truncate" title={p.path}>
+                  {p.name}
+                </span>
+              </NavLink>
+              <DropdownMenuTrigger asChild>
+                <button data-ctxtrigger className="hidden" aria-hidden />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem
+                  variant="destructive"
+                  onClick={() => void handleRemove(p.id)}
+                >
+                  Remove from sidebar
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        ))}
+      </nav>
+
+      <AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={refresh} />
+    </aside>
+  );
+}
--- a/apps/web/src/components/ToolCallCard.tsx
+++ b/apps/web/src/components/ToolCallCard.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { ChevronRight, Wrench } from 'lucide-react';
+import type { Message, ToolCall } from '@/api/types';
+
+interface Props {
+  message?: Message;
+  toolCall?: ToolCall;
+}
+
+export function ToolCallCard({ message, toolCall }: Props) {
+  const [open, setOpen] = useState(false);
+  const tc = toolCall ?? message?.tool_calls?.[0];
+  const result = message?.tool_results;
+
+  const name = tc?.name ?? 'tool';
+  const args = tc?.args ?? {};
+  const error = result?.error;
+  const output = result?.output;
+  const truncated = result?.truncated;
+
+  return (
+    <div className="rounded-md border border-border bg-muted/30 text-sm overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/60 text-left"
+      >
+        <ChevronRight
+          className={`size-3.5 transition-transform ${open ? 'rotate-90' : ''}`}
+        />
+        <Wrench className="size-3.5 opacity-70" />
+        <span className="font-mono font-medium">{name}</span>
+        <span className="font-mono text-xs text-muted-foreground truncate min-w-0 flex-1">
+          {JSON.stringify(args)}
+        </span>
+        {error && (
+          <span className="text-xs text-destructive font-medium ml-2">error</span>
+        )}
+        {truncated && (
+          <span className="text-xs text-muted-foreground ml-2">truncated</span>
+        )}
+      </button>
+      {open && (
+        <div className="px-2.5 py-2 border-t bg-background/40">
+          {error ? (
+            <pre className="text-xs text-destructive font-mono whitespace-pre-wrap">
+              {error}
+            </pre>
+          ) : output !== undefined ? (
+            <pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto max-h-72 overflow-y-auto">
+              {typeof output === 'string' ? output : JSON.stringify(output, null, 2)}
+            </pre>
+          ) : (
+            <div className="text-xs text-muted-foreground">no result yet</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -0,0 +1,166 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,269 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/apps/web/src/components/ui/label.tsx
+++ b/apps/web/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/apps/web/src/components/ui/sonner.tsx
+++ b/apps/web/src/components/ui/sonner.tsx
@@ -0,0 +1,29 @@
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      theme="dark"
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
--- a/apps/web/src/hooks/useProjects.ts
+++ b/apps/web/src/hooks/useProjects.ts
@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '@/api/client';
+import type { Project } from '@/api/types';
+
+export function useProjects() {
+  const [projects, setProjects] = useState<Project[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      const list = await api.projects.list();
+      setProjects(list);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'failed to load projects');
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const add = useCallback(
+    async (body: { path: string; name?: string }) => {
+      const created = await api.projects.add(body);
+      await refresh();
+      return created;
+    },
+    [refresh]
+  );
+
+  const remove = useCallback(
+    async (id: string) => {
+      await api.projects.remove(id);
+      await refresh();
+    },
+    [refresh]
+  );
+
+  return { projects, error, refresh, add, remove };
+}
--- a/apps/web/src/hooks/useSessionStream.ts
+++ b/apps/web/src/hooks/useSessionStream.ts
@@ -0,0 +1,139 @@
+import { useEffect, useRef, useState } from 'react';
+import type { Message, WsFrame } 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: '',
+        role: frame.role,
+        content: '',
+        tool_calls: null,
+        tool_results: null,
+        status: 'streaming',
+        last_seq: 0,
+        created_at: new Date().toISOString(),
+      };
+      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: '',
+        role: 'tool',
+        content: '',
+        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',
+        last_seq: 0,
+        created_at: new Date().toISOString(),
+      };
+      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 } : 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 };
+    }
+  }
+}
+
+export function useSessionStream(sessionId: string | undefined) {
+  const [state, setState] = useState<State>({ messages: [], connected: false, error: null });
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    if (!sessionId) return;
+
+    setState({ messages: [], connected: false, error: null });
+
+    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 = () => {
+      setState((s) => ({ ...s, connected: true, error: null }));
+    };
+    ws.onmessage = (ev) => {
+      try {
+        const frame = JSON.parse(typeof ev.data === 'string' ? ev.data : '') as WsFrame;
+        setState((s) => applyFrame(s, frame));
+      } catch (err) {
+        console.warn('bad ws frame', err);
+      }
+    };
+    ws.onerror = () => {
+      setState((s) => ({ ...s, error: 'websocket error' }));
+    };
+    ws.onclose = () => {
+      setState((s) => ({ ...s, connected: false }));
+    };
+
+    return () => {
+      wsRef.current = null;
+      ws.close();
+    };
+  }, [sessionId]);
+
+  return state;
+}
--- a/apps/web/src/hooks/useSessions.ts
+++ b/apps/web/src/hooks/useSessions.ts
@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '@/api/client';
+import type { Session } from '@/api/types';
+
+export function useSessions(projectId: string | undefined) {
+  const [sessions, setSessions] = useState<Session[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    if (!projectId) {
+      setSessions(null);
+      return;
+    }
+    try {
+      const list = await api.sessions.listForProject(projectId);
+      setSessions(list);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'failed to load sessions');
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const create = useCallback(
+    async (body: { name?: string; model?: string; system_prompt?: string }) => {
+      if (!projectId) throw new Error('no project');
+      const created = await api.sessions.create(projectId, body);
+      await refresh();
+      return created;
+    },
+    [projectId, refresh]
+  );
+
+  const remove = useCallback(
+    async (id: string) => {
+      await api.sessions.remove(id);
+      await refresh();
+    },
+    [refresh]
+  );
+
+  return { sessions, error, refresh, create, remove };
+}
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/apps/web/src/pages/Home.tsx
+++ b/apps/web/src/pages/Home.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { AddProjectModal } from '@/components/AddProjectModal';
+import { useProjects } from '@/hooks/useProjects';
+
+export function Home() {
+  const { projects, refresh } = useProjects();
+  const [open, setOpen] = useState(false);
+
+  const empty = projects && projects.length === 0;
+
+  return (
+    <div className="flex-1 flex items-center justify-center px-6">
+      <div className="max-w-md text-center space-y-4">
+        {empty ? (
+          <>
+            <h1 className="text-2xl font-semibold tracking-tight">No projects yet</h1>
+            <p className="text-sm text-muted-foreground">
+              Add a project from /opt to start chatting about its code.
+            </p>
+            <Button onClick={() => setOpen(true)}>Add project</Button>
+          </>
+        ) : (
+          <>
+            <h1 className="text-2xl font-semibold tracking-tight">BooCode</h1>
+            <p className="text-sm text-muted-foreground">
+              Pick a project from the sidebar.
+            </p>
+          </>
+        )}
+      </div>
+      <AddProjectModal open={open} onOpenChange={setOpen} onAdded={refresh} />
+    </div>
+  );
+}
--- a/apps/web/src/pages/Project.tsx
+++ b/apps/web/src/pages/Project.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Plus, MessageSquare, Trash2 } from 'lucide-react';
+import { api } from '@/api/client';
+import type { Project as ProjectType } from '@/api/types';
+import { Button } from '@/components/ui/button';
+import { useSessions } from '@/hooks/useSessions';
+
+export function Project() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { sessions, create, remove } = useSessions(id);
+  const [project, setProject] = useState<ProjectType | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  useEffect(() => {
+    if (!id) return;
+    api.projects
+      .list()
+      .then((list) => setProject(list.find((p) => p.id === id) ?? null))
+      .catch(() => {});
+  }, [id]);
+
+  async function handleNew() {
+    if (!id || creating) return;
+    setCreating(true);
+    try {
+      const s = await create({});
+      navigate(`/session/${s.id}`);
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  return (
+    <div className="flex-1 flex flex-col">
+      <header className="border-b px-6 py-3 flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight">
+            {project?.name ?? '…'}
+          </h1>
+          <div className="text-xs text-muted-foreground font-mono">
+            {project?.path}
+          </div>
+        </div>
+        <Button onClick={handleNew} disabled={creating}>
+          <Plus />
+          New session
+        </Button>
+      </header>
+
+      <div className="flex-1 overflow-y-auto px-6 py-4">
+        {sessions === null && (
+          <div className="text-sm text-muted-foreground">Loading…</div>
+        )}
+        {sessions && sessions.length === 0 && (
+          <div className="text-sm text-muted-foreground">
+            No sessions yet. Click <span className="font-medium">New session</span> to start.
+          </div>
+        )}
+        {sessions && sessions.length > 0 && (
+          <ul className="divide-y rounded-md border">
+            {sessions.map((s) => (
+              <li key={s.id} className="flex items-center justify-between px-3 py-2 hover:bg-muted/50">
+                <Link to={`/session/${s.id}`} className="flex-1 flex items-center gap-2 min-w-0">
+                  <MessageSquare className="size-3.5 opacity-70 shrink-0" />
+                  <span className="truncate text-sm">{s.name}</span>
+                  <span className="text-xs text-muted-foreground font-mono ml-2 shrink-0">
+                    {s.model}
+                  </span>
+                </Link>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="Delete session"
+                  onClick={() => void remove(s.id)}
+                >
+                  <Trash2 />
+                </Button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/pages/Session.tsx
+++ b/apps/web/src/pages/Session.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { ChevronLeft } from 'lucide-react';
+import { toast } from 'sonner';
+import { api } from '@/api/client';
+import type { Session as SessionType } from '@/api/types';
+import { useSessionStream } from '@/hooks/useSessionStream';
+import { MessageList } from '@/components/MessageList';
+import { ChatInput } from '@/components/ChatInput';
+import { ModelPicker } from '@/components/ModelPicker';
+
+export function Session() {
+  const { id } = useParams<{ id: string }>();
+  const stream = useSessionStream(id);
+  const [session, setSession] = useState<SessionType | null>(null);
+  const [name, setName] = useState('');
+  const [editingName, setEditingName] = useState(false);
+  const lastErrorRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (stream.error && stream.error !== lastErrorRef.current) {
+      lastErrorRef.current = stream.error;
+      toast.error(stream.error);
+    }
+    if (!stream.error) {
+      lastErrorRef.current = null;
+    }
+  }, [stream.error]);
+
+  useEffect(() => {
+    if (!id) return;
+    setSession(null);
+    api.sessions
+      .get(id)
+      .then((s) => {
+        setSession(s);
+        setName(s.name);
+      })
+      .catch(() => {});
+  }, [id]);
+
+  async function saveName() {
+    if (!id || !session) return;
+    const trimmed = name.trim();
+    if (!trimmed || trimmed === session.name) {
+      setName(session.name);
+      setEditingName(false);
+      return;
+    }
+    const updated = await api.sessions.update(id, { name: trimmed });
+    setSession(updated);
+    setEditingName(false);
+  }
+
+  async function handleSend(content: string) {
+    if (!id) return;
+    await api.messages.send(id, content);
+  }
+
+  const streaming = stream.messages.some((m) => m.status === 'streaming');
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      <header className="border-b px-4 py-2 flex items-center gap-2 shrink-0">
+        {session && (
+          <Link
+            to={`/project/${session.project_id}`}
+            className="text-muted-foreground hover:text-foreground"
+            aria-label="Back to project"
+          >
+            <ChevronLeft className="size-4" />
+          </Link>
+        )}
+        {editingName ? (
+          <input
+            autoFocus
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onBlur={() => void saveName()}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') void saveName();
+              if (e.key === 'Escape') {
+                setName(session?.name ?? '');
+                setEditingName(false);
+              }
+            }}
+            className="bg-transparent border-b border-border px-1 py-0.5 text-sm font-medium outline-none focus:border-ring"
+          />
+        ) : (
+          <button
+            type="button"
+            className="text-sm font-medium hover:underline"
+            onClick={() => setEditingName(true)}
+          >
+            {session?.name ?? '…'}
+          </button>
+        )}
+        <div className="ml-auto">
+          {session && (
+            <ModelPicker
+              value={session.model}
+              onChange={async (model) => {
+                const updated = await api.sessions.update(session.id, { model });
+                setSession(updated);
+              }}
+            />
+          )}
+        </div>
+        {!stream.connected && (
+          <span className="text-xs text-muted-foreground">reconnecting…</span>
+        )}
+      </header>
+
+      <MessageList messages={stream.messages} />
+
+      <ChatInput disabled={streaming} onSend={handleSend} />
+    </div>
+  );
+}
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -0,0 +1,131 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/jetbrains-mono";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --font-sans: "Inter Variable", "Inter", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, monospace;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
--- a/apps/web/tsconfig.app.json
+++ b/apps/web/tsconfig.app.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/apps/web/tsconfig.node.json
+++ b/apps/web/tsconfig.node.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "noEmit": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -0,0 +1,29 @@
+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: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:3000',
+        changeOrigin: true,
+        ws: true,
+        headers: {
+          'Remote-User': process.env.DEV_REMOTE_USER ?? 'sam',
+        },
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+});
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,38 @@
+services:
+  boocode:
+    build: .
+    container_name: boocode
+    restart: unless-stopped
+    ports:
+      - "100.114.205.53:9500:3000"
+    env_file: .env
+    environment:
+      DATABASE_URL: postgres://boocode:${POSTGRES_PASSWORD}@boocode_db:5432/boocode
+    volumes:
+      - /opt:/opt:ro
+    depends_on:
+      - boocode_db
+    networks:
+      - boocode_net
+
+  boocode_db:
+    image: postgres:16-alpine
+    container_name: boocode_db
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: boocode
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: boocode
+    ports:
+      - "127.0.0.1:5500:5432"
+    volumes:
+      - boocode_pgdata:/var/lib/postgresql/data
+    networks:
+      - boocode_net
+
+volumes:
+  boocode_pgdata:
+
+networks:
+  boocode_net:
+    driver: bridge
--- a/package.json
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "boocode",
+  "private": true,
+  "packageManager": "pnpm@10.15.1",
+  "scripts": {
+    "dev:server": "pnpm --filter ./apps/server dev",
+    "dev:web": "pnpm --filter ./apps/web dev",
+    "build": "pnpm --filter ./apps/web build && pnpm --filter ./apps/server build",
+    "start": "node apps/server/dist/index.js"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+packages:
+  - "apps/*"
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "noUncheckedIndexedAccess": true
+  }
+}