v1.1 batch 2: sidebar restructure — chats under projects, max 5 + view-all, live updates

Schema (idempotent): ALTER TABLE sessions ADD COLUMN IF NOT EXISTS updated_at TIMESTAMPTZ NOT NULL DEFAULT clock_timestamp(); The column already exists from v1 (DEFAULT NOW()); ALTER is a no-op kept for self-documentation. Explicit clock_timestamp() bumps now run wherever the column actually matters — see services/inference.ts and routes/sessions.ts. Backend updated_at maintenance: - services/inference.ts: after each terminal status UPDATE on the assistant message (failure / tool-call complete / clean complete), also bump sessions.updated_at = clock_timestamp() so the parent session jumps to the top of recency ordering on every assistant turn. - routes/sessions.ts PATCH: NOW() → clock_timestamp() for consistency. New endpoint GET /api/sidebar (routes/sidebar.ts): { projects: [{ id, name, recent_sessions[≤6], total_sessions }] } One outer query for projects ordered added_at DESC; per-project Promise.all over (recent_sessions LIMIT 6 ORDER BY updated_at DESC) and COUNT(*)::int. Outer Promise.all parallelizes across projects. Two queries per project; the composite idx_sessions_project(project_id, updated_at DESC) serves the inner query. Auth via the global Remote-User hook. types/api.ts gains SidebarSession / SidebarProject / SidebarResponse; index.ts wires the route. Frontend foundations: - api/types.ts mirrors the three sidebar interfaces. - api/client.ts: api.sidebar.get() → Promise<SidebarResponse>. - hooks/sessionEvents.ts: five-variant union — added project_created, project_deleted, session_created, session_deleted. session_renamed unchanged from Batch 1. Bus internals untouched (still a dumb Set<Listener>, no validation). New hooks/useSidebar.ts (module-singleton): - Module-scope sharedData/sharedError/sharedLoading/initialized/fetchInFlight/ subscribers; a single sessionEvents.subscribe at module-top-level mutates sharedData via an exhaustive switch over the five events. load() dedupes parallel calls via fetchInFlight. Hook is a thin subscription layer: any number of mount points share state and the very first one triggers the single GET /api/sidebar. Subsequent mounts read cached state synchronously (no skeleton flash). Public shape: { data, error, loading, retry }. - Lift to module-scope was driven by the "ONE sidebar request on mount" spec promise — both ProjectSidebar AND Home consume the hook now, and they share the singleton. Frontend UI: - components/ProjectSidebar.tsx (rewrite, 234 lines): per-project chevron + folder + name; chevron toggles expand, name navigates /project/:id. Expanded → ≤5 sessions with MessageSquare + name + muted relTime() timestamp. "View all (N)" link when total_sessions > 5, routing to /project/:id. Active session row uses bg-sidebar-accent. Active project always renders expanded (URL-derived: direct /project/:id or scan of recent_sessions for /session/:id). Expanded ids persisted in localStorage['boocode.sidebar.expanded'] with try/catch on both read and write. Loading shows 4 muted-pulse skeleton blocks; empty + error + retry button; error toast guarded by ref so it fires once per distinct message and resets on recovery. Remove path calls api.projects.remove directly + explicit project_deleted emit (replaced the prior useProjects() dependency which fired a redundant /api/projects on mount, violating the one-fetch promise). - components/AddProjectModal.tsx: captures returned Project and emits project_created before onAdded() / onOpenChange(false). - pages/Project.tsx: emits session_created after create(); trash button is now async with try/catch — emits session_deleted on success, toast.error on failure. - pages/Home.tsx: switched from useProjects to useSidebar so loading / fires exactly one /api/sidebar, with no parallel /api/projects. - pages/Session.tsx: manual inline rename now emits session_renamed on the success path so the sidebar updates live without a refresh (also fixes the regression made visible by Batch 2 — the sidebar caches session names where the project page used to re-fetch on every visit). useProjects.ts retains a project_deleted emit inside remove for any future caller; no live consumer uses it (ProjectSidebar calls api.projects.remove directly). Acknowledged dead code, to be removed in the next cleanup pass along with three remaining NOW() → clock_timestamp() consistency flips at routes/messages.ts:70, routes/messages.ts:127, and services/auto_name.ts:144. Cross-tab parity for session_created/session_deleted/project_created/ project_deleted is deferred — those events are tab-local in Batch 2 per spec. session_renamed continues to propagate cross-tab via the existing WS frame from Batch 1. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
v1.1 batch 1: markdown, message actions, tok/s+ctx, AI naming
2026-05-15 14:19:59 +00:00 · 2026-05-14 22:52:40 +00:00
26 changed files with 2076 additions and 159 deletions
--- a/apps/server/src/index.ts
+++ b/apps/server/src/index.ts
@@ -10,6 +10,7 @@ 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 { registerSidebarRoutes } from './routes/sidebar.js';
 import { registerWebSocket } from './routes/ws.js';
 import { registerModelRoutes } from './routes/models.js';
 import { createInferenceRunner } from './services/inference.js';
@@ -39,6 +40,7 @@ async function main() {
  registerSessionRoutes(app, sql, config);
  registerSettingsRoutes(app, sql);
  registerModelRoutes(app, config);
+  registerSidebarRoutes(app, sql);

  const broker = createBroker();
  const inference = createInferenceRunner({
@@ -50,7 +52,7 @@ async function main() {
    },
  });
  registerMessageRoutes(app, sql, {
-    onSend: (sessionId, _userId, assistantId) => {
+    enqueueInference: (sessionId, assistantId) => {
      inference.enqueue(sessionId, assistantId);
    },
    publishUserMessage: (sessionId, userMessageId, content) => {
@@ -69,6 +71,12 @@ async function main() {
        message_id: userMessageId,
      });
    },
+    publishMessagesDeleted: (sessionId, messageIds) => {
+      broker.publish(sessionId, {
+        type: 'messages_deleted',
+        message_ids: messageIds,
+      });
+    },
  });
  registerWebSocket(app, sql, broker);

--- a/apps/server/src/routes/messages.ts
+++ b/apps/server/src/routes/messages.ts
@@ -8,12 +8,13 @@ const SendBody = z.object({
 });

 interface MessageHandlers {
-  onSend: (sessionId: string, userMessageId: string, assistantMessageId: string) => void;
+  enqueueInference: (sessionId: string, assistantMessageId: string) => void;
  publishUserMessage: (
    sessionId: string,
    userMessageId: string,
    content: string
  ) => void;
+  publishMessagesDeleted: (sessionId: string, messageIds: string[]) => void;
 }

 export function registerMessageRoutes(
@@ -30,7 +31,8 @@ export function registerMessageRoutes(
        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
+        SELECT id, session_id, role, content, tool_calls, tool_results, status, last_seq,
+               tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at
        FROM messages
        WHERE session_id = ${req.params.id}
        ORDER BY created_at ASC, id ASC
@@ -74,10 +76,66 @@ export function registerMessageRoutes(
        result.user_message_id,
        parsed.data.content
      );
-      handlers.onSend(req.params.id, result.user_message_id, result.assistant_message_id);
+      handlers.enqueueInference(req.params.id, result.assistant_message_id);

      reply.code(202);
      return result;
    }
  );
+
+  app.post<{ Params: { id: string; message_id: string } }>(
+    '/api/sessions/:id/messages/:message_id/regenerate',
+    async (req, reply) => {
+      const { id: sessionId, message_id: targetId } = req.params;
+
+      const target = await sql<{ id: string; role: string; status: string }[]>`
+        SELECT id, role, status
+        FROM messages
+        WHERE session_id = ${sessionId} AND id = ${targetId}
+      `;
+      if (target.length === 0) {
+        reply.code(404);
+        return { error: 'message not found' };
+      }
+      const targetRow = target[0]!;
+      if (targetRow.role !== 'assistant') {
+        reply.code(400);
+        return { error: 'only assistant messages can be regenerated' };
+      }
+      if (targetRow.status === 'streaming') {
+        reply.code(409);
+        return { error: 'message is still streaming' };
+      }
+
+      const { newAssistantId, deletedIds } = await sql.begin(async (tx) => {
+        // Subquery keeps created_at in postgres at TIMESTAMPTZ µs precision.
+        // Round-tripping through JS Date loses sub-ms precision and can pull
+        // earlier rows (e.g. the triggering user message) into the >= bound.
+        const deletedRows = await tx<{ id: string }[]>`
+          DELETE FROM messages
+          WHERE session_id = ${sessionId}
+            AND created_at >= (
+              SELECT created_at FROM messages WHERE id = ${targetId}
+            )
+          RETURNING id
+        `;
+        const [row] = await tx<{ id: string }[]>`
+          INSERT INTO messages (session_id, role, content, status, created_at)
+          VALUES (${sessionId}, 'assistant', '', 'streaming', clock_timestamp())
+          RETURNING id
+        `;
+        await tx`UPDATE sessions SET updated_at = NOW() WHERE id = ${sessionId}`;
+        return {
+          newAssistantId: row!.id,
+          deletedIds: deletedRows.map((r) => r.id),
+        };
+      });
+
+      handlers.publishMessagesDeleted(sessionId, deletedIds);
+      handlers.enqueueInference(sessionId, newAssistantId);
+
+      reply.code(202);
+      return { assistant_message_id: newAssistantId };
+    }
+  );
 }
--- a/apps/server/src/routes/sessions.ts
+++ b/apps/server/src/routes/sessions.ts
@@ -111,7 +111,7 @@ export function registerSessionRoutes(
          name = COALESCE(${name ?? null}, name),
          model = COALESCE(${model ?? null}, model),
          system_prompt = COALESCE(${system_prompt ?? null}, system_prompt),
-          updated_at = NOW()
+          updated_at = clock_timestamp()
        WHERE id = ${req.params.id}
        RETURNING id, project_id, name, model, system_prompt, created_at, updated_at
      `;
--- a/apps/server/src/routes/sidebar.ts
+++ b/apps/server/src/routes/sidebar.ts
@@ -0,0 +1,44 @@
+import type { FastifyInstance } from 'fastify';
+import type { Sql } from '../db.js';
+import type {
+  SidebarProject,
+  SidebarResponse,
+  SidebarSession,
+} from '../types/api.js';
+
+export function registerSidebarRoutes(app: FastifyInstance, sql: Sql): void {
+  app.get('/api/sidebar', async (): Promise<SidebarResponse> => {
+    const projects = await sql<{ id: string; name: string }[]>`
+      SELECT id, name
+      FROM projects
+      ORDER BY added_at DESC
+    `;
+
+    const enriched: SidebarProject[] = await Promise.all(
+      projects.map(async (p) => {
+        const [recent_sessions, countRows] = await Promise.all([
+          sql<SidebarSession[]>`
+            SELECT id, name, model, updated_at
+            FROM sessions
+            WHERE project_id = ${p.id}
+            ORDER BY updated_at DESC
+            LIMIT 6
+          `,
+          sql<{ n: number }[]>`
+            SELECT COUNT(*)::int AS n
+            FROM sessions
+            WHERE project_id = ${p.id}
+          `,
+        ]);
+        return {
+          id: p.id,
+          name: p.name,
+          recent_sessions,
+          total_sessions: countRows[0]?.n ?? 0,
+        };
+      })
+    );
+
+    return { projects: enriched };
+  });
+}
--- a/apps/server/src/routes/ws.ts
+++ b/apps/server/src/routes/ws.ts
@@ -22,7 +22,8 @@ export function registerWebSocket(
      }

      const messages = await sql<Message[]>`
-        SELECT id, session_id, role, content, tool_calls, tool_results, status, last_seq, created_at
+        SELECT id, session_id, role, content, tool_calls, tool_results, status, last_seq,
+               tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at
        FROM messages
        WHERE session_id = ${sessionId}
        ORDER BY created_at ASC, id ASC
--- a/apps/server/src/schema.sql
+++ b/apps/server/src/schema.sql
@@ -32,6 +32,14 @@ CREATE TABLE IF NOT EXISTS messages (

 CREATE INDEX IF NOT EXISTS idx_messages_session ON messages(session_id, created_at);

+ALTER TABLE messages ADD COLUMN IF NOT EXISTS tokens_used INTEGER;
+ALTER TABLE messages ADD COLUMN IF NOT EXISTS ctx_used INTEGER;
+ALTER TABLE messages ADD COLUMN IF NOT EXISTS ctx_max INTEGER;
+ALTER TABLE messages ADD COLUMN IF NOT EXISTS started_at TIMESTAMPTZ;
+ALTER TABLE messages ADD COLUMN IF NOT EXISTS finished_at TIMESTAMPTZ;
+
+ALTER TABLE sessions ADD COLUMN IF NOT EXISTS updated_at TIMESTAMPTZ NOT NULL DEFAULT clock_timestamp();
+
 CREATE TABLE IF NOT EXISTS settings (
  key TEXT PRIMARY KEY,
  value JSONB NOT NULL
--- a/apps/server/src/services/auto_name.ts
+++ b/apps/server/src/services/auto_name.ts
@@ -0,0 +1,157 @@
+import type { InferenceContext } from './inference.js';
+
+const NAMING_SYSTEM_PROMPT =
+  'You name chat sessions. Reply directly with no thinking, reasoning, or explanation. Output ONLY the title, 4 words max, no quotes, no punctuation, no prefix like "Title:".';
+
+const MAX_TITLE_CHARS = 60;
+
+// QWEN3 NON-STREAMING UTILITY-CALL PATTERN
+// ----------------------------------------
+// Qwen3-family chat templates default to chain-of-thought reasoning: the
+// model emits a long <think>…</think> block into `reasoning_content` and
+// only finalizes a real reply in `content`. For short utility calls
+// (naming, classification, routing, summarization) with a tight token
+// budget, the model burns the entire budget on reasoning and returns:
+//   - content: ""
+//   - reasoning_content: "Thinking Process: 1. ..." (mid-thought, truncated)
+//   - finish_reason: "length"
+// Fix: pass `chat_template_kwargs: { enable_thinking: false }` to skip the
+// thinking block, and keep `max_tokens` low (~30 is plenty for a 4-word
+// title). The kwarg is a no-op for non-Qwen chat templates, so it's safe
+// to apply unconditionally for any short non-streaming model call.
+// Apply this same pattern to: fork-message (planned), agent-routing
+// (planned), web-search summarization (planned).
+
+function cleanTitle(raw: string): string {
+  let name = raw.trim();
+  // Strip surrounding straight or smart quotes (one layer).
+  const quotes = ['"', "'", '`', '‘', '’', '“', '”'];
+  while (name.length >= 2 && quotes.includes(name[0]!) && quotes.includes(name[name.length - 1]!)) {
+    name = name.slice(1, -1).trim();
+  }
+  // Drop a leading "Title:" prefix if the model added one despite instructions.
+  name = name.replace(/^title\s*:\s*/i, '').trim();
+  if (name.length > MAX_TITLE_CHARS) {
+    name = name.slice(0, MAX_TITLE_CHARS).trim();
+  }
+  return name;
+}
+
+interface NamingResponse {
+  choices?: Array<{
+    message?: {
+      content?: string;
+      reasoning_content?: string;
+    };
+  }>;
+}
+
+// Some Qwen-family models emit "thinking" tokens into reasoning_content and
+// only finalize a real reply in content. Pull a sensible candidate string.
+function pickTitleSource(data: NamingResponse): string {
+  const choice = data.choices?.[0]?.message;
+  if (!choice) return '';
+  if (choice.content && choice.content.trim().length > 0) return choice.content;
+  // Fallback: try to extract a last-line title from reasoning, if present.
+  const reasoning = choice.reasoning_content ?? '';
+  if (reasoning.length === 0) return '';
+  const lines = reasoning
+    .split('\n')
+    .map((l) => l.trim())
+    .filter((l) => l.length > 0);
+  return lines[lines.length - 1] ?? '';
+}
+
+export async function maybeAutoNameSession(
+  ctx: InferenceContext,
+  sessionId: string
+): Promise<void> {
+  const counts = await ctx.sql<{ n: number }[]>`
+    SELECT COUNT(*)::int AS n
+    FROM messages
+    WHERE session_id = ${sessionId}
+      AND role = 'assistant'
+      AND status = 'complete'
+  `;
+  if (counts[0]?.n !== 1) return;
+
+  const sessionRows = await ctx.sql<
+    { id: string; name: string; model: string }[]
+  >`
+    SELECT id, name, model FROM sessions WHERE id = ${sessionId}
+  `;
+  const session = sessionRows[0];
+  if (!session) return;
+  const existingName = session.name ?? '';
+  if (existingName !== '' && existingName !== 'New session') return;
+
+  const userMsg = await ctx.sql<{ content: string }[]>`
+    SELECT content FROM messages
+    WHERE session_id = ${sessionId} AND role = 'user'
+    ORDER BY created_at ASC
+    LIMIT 1
+  `;
+  const assistantMsg = await ctx.sql<{ content: string }[]>`
+    SELECT content FROM messages
+    WHERE session_id = ${sessionId}
+      AND role = 'assistant'
+      AND status = 'complete'
+    ORDER BY created_at ASC
+    LIMIT 1
+  `;
+  if (!userMsg[0] || !assistantMsg[0]) return;
+
+  const userText = userMsg[0].content.slice(0, 2000);
+  const assistantText = assistantMsg[0].content.slice(0, 2000);
+
+  const body = {
+    model: session.model,
+    messages: [
+      { role: 'system', content: NAMING_SYSTEM_PROMPT },
+      {
+        role: 'user',
+        content: `First user message: ${userText}\nFirst assistant reply: ${assistantText}`,
+      },
+    ],
+    max_tokens: 30,
+    temperature: 0.3,
+    stream: false,
+    // Qwen-family models default to chain-of-thought; this template kwarg
+    // tells llama.cpp's chat template renderer to skip the thinking block.
+    // Harmless for non-Qwen models.
+    chat_template_kwargs: { enable_thinking: false },
+  };
+
+  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) {
+    const text = await res.text().catch(() => '');
+    throw new Error(`naming request failed: ${res.status} ${text.slice(0, 200)}`);
+  }
+  const data = (await res.json()) as NamingResponse;
+  const raw = pickTitleSource(data);
+  const name = cleanTitle(raw);
+  if (!name) {
+    ctx.log.warn({ sessionId, raw }, 'auto-name: empty title from model');
+    return;
+  }
+
+  const updated = await ctx.sql<{ id: string; name: string }[]>`
+    UPDATE sessions
+    SET name = ${name}, updated_at = NOW()
+    WHERE id = ${sessionId}
+      AND (name IS NULL OR name = '' OR name = 'New session')
+    RETURNING id, name
+  `;
+  if (updated.length === 0) return;
+
+  ctx.publish(sessionId, {
+    type: 'session_renamed',
+    session_id: sessionId,
+    name,
+  });
+  ctx.log.info({ sessionId, name }, 'session auto-named');
+}
--- a/apps/server/src/services/inference.ts
+++ b/apps/server/src/services/inference.ts
@@ -4,6 +4,7 @@ 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';
+import { maybeAutoNameSession } from './auto_name.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.`;
@@ -12,8 +13,17 @@ 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';
+  type:
+    | 'message_started'
+    | 'delta'
+    | 'tool_call'
+    | 'tool_result'
+    | 'message_complete'
+    | 'messages_deleted'
+    | 'session_renamed'
+    | 'error';
  message_id?: string;
+  message_ids?: string[];
  tool_message_id?: string;
  tool_call_id?: string;
  role?: 'assistant' | 'tool' | 'user';
@@ -22,6 +32,14 @@ export interface InferenceFrame {
  output?: unknown;
  truncated?: boolean;
  error?: string;
+  tokens_used?: number | null;
+  ctx_used?: number | null;
+  ctx_max?: number | null;
+  started_at?: string | null;
+  finished_at?: string | null;
+  model?: string;
+  session_id?: string;
+  name?: string;
 }

 export type FramePublisher = (sessionId: string, frame: InferenceFrame) => void;
@@ -49,13 +67,21 @@ interface ChatCompletionDelta {
 }

 interface ChatCompletionChunk {
-  choices: Array<{
+  choices?: Array<{
    delta: ChatCompletionDelta;
    finish_reason: string | null;
  }>;
+  usage?: {
+    prompt_tokens?: number;
+    completion_tokens?: number;
+    total_tokens?: number;
+  };
+  timings?: {
+    n_ctx?: number;
+  };
 }

-interface InferenceContext {
+export interface InferenceContext {
  sql: Sql;
  config: Config;
  log: FastifyBaseLogger;
@@ -130,7 +156,8 @@ async function loadContext(
  const project = projectRows[0]!;

  const history = await sql<Message[]>`
-    SELECT id, session_id, role, content, tool_calls, tool_results, status, last_seq, created_at
+    SELECT id, session_id, role, content, tool_calls, tool_results, status, last_seq,
+           tokens_used, ctx_used, ctx_max, started_at, finished_at, created_at
    FROM messages
    WHERE session_id = ${sessionId}
    ORDER BY created_at ASC, id ASC
@@ -162,14 +189,28 @@ async function* sseLines(stream: ReadableStream<Uint8Array>): AsyncGenerator<str
  }
 }

+interface StreamResult {
+  finishReason: string | null;
+  content: string;
+  toolCalls: ToolCall[];
+  promptTokens: number | null;
+  completionTokens: number | null;
+  nCtx: number | null;
+}
+
 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 };
+): Promise<StreamResult> {
+  const body: Record<string, unknown> = {
+    model,
+    messages,
+    stream: true,
+    stream_options: { include_usage: true },
+  };
  if (includeTools) {
    body['tools'] = toolJsonSchemas();
    body['tool_choice'] = 'auto';
@@ -187,6 +228,9 @@ async function streamCompletion(

  let content = '';
  let finishReason: string | null = null;
+  let promptTokens: number | null = null;
+  let completionTokens: number | null = null;
+  let nCtx: number | null = null;
  const toolCallsBuffer = new Map<number, { id: string; name: string; argsText: string }>();

  for await (const line of sseLines(res.body)) {
@@ -199,6 +243,19 @@ async function streamCompletion(
    } catch {
      continue;
    }
+
+    if (parsed.usage) {
+      if (typeof parsed.usage.prompt_tokens === 'number') {
+        promptTokens = parsed.usage.prompt_tokens;
+      }
+      if (typeof parsed.usage.completion_tokens === 'number') {
+        completionTokens = parsed.usage.completion_tokens;
+      }
+    }
+    if (parsed.timings && typeof parsed.timings.n_ctx === 'number') {
+      nCtx = parsed.timings.n_ctx;
+    }
+
    const choice = parsed.choices?.[0];
    if (!choice) continue;
    const delta = choice.delta ?? {};
@@ -232,7 +289,7 @@ async function streamCompletion(
    toolCalls.push({ id: t.id || `call_${toolCalls.length}`, name: t.name, args });
  }

-  return { finishReason, content, toolCalls };
+  return { finishReason, content, toolCalls, promptTokens, completionTokens, nCtx };
 }

 async function executeToolCall(
@@ -279,7 +336,9 @@ async function runAssistantTurn(
  if (depth > MAX_TOOL_LOOP_DEPTH) {
    await ctx.sql`
      UPDATE messages
-      SET status = 'failed', content = ${'tool loop depth exceeded'}
+      SET status = 'failed',
+          content = ${'tool loop depth exceeded'},
+          finished_at = clock_timestamp()
      WHERE id = ${assistantMessageId}
    `;
    ctx.publish(sessionId, {
@@ -299,6 +358,14 @@ async function runAssistantTurn(
  const projectRoot = await resolveProjectRoot(project.path);
  const messages = buildMessagesPayload(session, project, history);

+  const startedRow = await ctx.sql<{ started_at: string }[]>`
+    UPDATE messages
+    SET started_at = clock_timestamp()
+    WHERE id = ${assistantMessageId}
+    RETURNING started_at
+  `;
+  const startedAt = startedRow[0]?.started_at ?? null;
+
  ctx.publish(sessionId, {
    type: 'message_started',
    message_id: assistantMessageId,
@@ -328,12 +395,9 @@ async function runAssistantTurn(
    }, DB_FLUSH_INTERVAL_MS);
  };

-  let content = '';
-  let finishReason: string | null = null;
-  let toolCalls: ToolCall[] = [];
-
+  let result: StreamResult;
  try {
-    const result = await streamCompletion(
+    result = await streamCompletion(
      ctx,
      session.model,
      messages,
@@ -349,9 +413,6 @@ async function runAssistantTurn(
        scheduleFlush();
      }
    );
-    content = result.content;
-    finishReason = result.finishReason;
-    toolCalls = result.toolCalls;
  } catch (err) {
    if (pendingFlushTimer) {
      clearTimeout(pendingFlushTimer);
@@ -360,9 +421,12 @@ async function runAssistantTurn(
    const errMsg = err instanceof Error ? err.message : String(err);
    await ctx.sql`
      UPDATE messages
-      SET status = 'failed', content = ${accumulated}
+      SET status = 'failed',
+          content = ${accumulated},
+          finished_at = clock_timestamp()
      WHERE id = ${assistantMessageId}
    `;
+    await ctx.sql`UPDATE sessions SET updated_at = clock_timestamp() WHERE id = ${sessionId}`;
    ctx.publish(sessionId, {
      type: 'error',
      message_id: assistantMessageId,
@@ -378,13 +442,24 @@ async function runAssistantTurn(
  }
  await flushPromise;

+  const { content, finishReason, toolCalls, promptTokens, completionTokens, nCtx } = result;
+
  if (toolCalls.length > 0) {
-    await ctx.sql`
+    const [updated] = await ctx.sql<
+      { tokens_used: number | null; ctx_used: number | null; ctx_max: number | null; finished_at: string | null }[]
+    >`
      UPDATE messages
-      SET content = ${content}, status = 'complete',
-          tool_calls = ${ctx.sql.json(toolCalls as never)}
+      SET content = ${content},
+          status = 'complete',
+          tool_calls = ${ctx.sql.json(toolCalls as never)},
+          tokens_used = ${completionTokens},
+          ctx_used = ${promptTokens},
+          ctx_max = ${nCtx},
+          finished_at = clock_timestamp()
      WHERE id = ${assistantMessageId}
+      RETURNING tokens_used, ctx_used, ctx_max, finished_at
    `;
+    await ctx.sql`UPDATE sessions SET updated_at = clock_timestamp() WHERE id = ${sessionId}`;
    for (const tc of toolCalls) {
      ctx.publish(sessionId, {
        type: 'tool_call',
@@ -395,6 +470,12 @@ async function runAssistantTurn(
    ctx.publish(sessionId, {
      type: 'message_complete',
      message_id: assistantMessageId,
+      tokens_used: updated?.tokens_used ?? null,
+      ctx_used: updated?.ctx_used ?? null,
+      ctx_max: updated?.ctx_max ?? null,
+      started_at: startedAt,
+      finished_at: updated?.finished_at ?? null,
+      model: session.model,
    });

    await Promise.all(
@@ -405,12 +486,12 @@ async function runAssistantTurn(
          RETURNING id
        `;
        const toolMessageId = toolRow!.id;
-        const result = await executeToolCall(projectRoot, tc);
+        const tres = await executeToolCall(projectRoot, tc);
        const stored = {
          tool_call_id: tc.id,
-          output: result.output,
-          truncated: result.truncated,
-          ...(result.error ? { error: result.error } : {}),
+          output: tres.output,
+          truncated: tres.truncated,
+          ...(tres.error ? { error: tres.error } : {}),
        };
        await ctx.sql`
          UPDATE messages
@@ -421,9 +502,9 @@ async function runAssistantTurn(
          type: 'tool_result',
          tool_message_id: toolMessageId,
          tool_call_id: tc.id,
-          output: result.output,
-          truncated: result.truncated,
-          ...(result.error ? { error: result.error } : {}),
+          output: tres.output,
+          truncated: tres.truncated,
+          ...(tres.error ? { error: tres.error } : {}),
        });
      })
    );
@@ -437,16 +518,41 @@ async function runAssistantTurn(
    return;
  }

-  await ctx.sql`
+  const [updated] = await ctx.sql<
+    { tokens_used: number | null; ctx_used: number | null; ctx_max: number | null; finished_at: string | null }[]
+  >`
    UPDATE messages
-    SET content = ${content}, status = 'complete'
+    SET content = ${content},
+        status = 'complete',
+        tokens_used = ${completionTokens},
+        ctx_used = ${promptTokens},
+        ctx_max = ${nCtx},
+        finished_at = clock_timestamp()
    WHERE id = ${assistantMessageId}
+    RETURNING tokens_used, ctx_used, ctx_max, finished_at
  `;
+  await ctx.sql`UPDATE sessions SET updated_at = clock_timestamp() WHERE id = ${sessionId}`;
  ctx.publish(sessionId, {
    type: 'message_complete',
    message_id: assistantMessageId,
+    tokens_used: updated?.tokens_used ?? null,
+    ctx_used: updated?.ctx_used ?? null,
+    ctx_max: updated?.ctx_max ?? null,
+    started_at: startedAt,
+    finished_at: updated?.finished_at ?? null,
+    model: session.model,
  });
-  ctx.log.info({ sessionId, assistantMessageId, finishReason, chars: content.length }, 'inference complete');
+  ctx.log.info(
+    {
+      sessionId,
+      assistantMessageId,
+      finishReason,
+      chars: content.length,
+      tokens_used: updated?.tokens_used,
+      ctx_used: updated?.ctx_used,
+    },
+    'inference complete'
+  );
 }

 export async function runInference(
@@ -460,9 +566,18 @@ export async function runInference(
 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');
-      });
+      void (async () => {
+        try {
+          await runInference(ctx, sessionId, assistantMessageId);
+          setImmediate(() => {
+            void maybeAutoNameSession(ctx, sessionId).catch((err) => {
+              ctx.log.warn({ err, sessionId }, 'auto-name failed');
+            });
+          });
+        } catch (err) {
+          ctx.log.error({ err }, 'unhandled inference error');
+        }
+      })();
    },
  };
 }
--- a/apps/server/src/types/api.ts
+++ b/apps/server/src/types/api.ts
@@ -46,6 +46,11 @@ export interface Message {
  tool_results: ToolResult | null;
  status: MessageStatus;
  last_seq: number;
+  tokens_used: number | null;
+  ctx_used: number | null;
+  ctx_max: number | null;
+  started_at: string | null;
+  finished_at: string | null;
  created_at: string;
 }

@@ -53,3 +58,21 @@ export interface ModelInfo {
  id: string;
  [key: string]: unknown;
 }
+
+export interface SidebarSession {
+  id: string;
+  name: string;
+  model: string;
+  updated_at: string;
+}
+
+export interface SidebarProject {
+  id: string;
+  name: string;
+  recent_sessions: SidebarSession[];
+  total_sessions: number;
+}
+
+export interface SidebarResponse {
+  projects: SidebarProject[];
+}
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -19,7 +19,9 @@
    "radix-ui": "^1.4.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
+    "react-markdown": "^10.1.0",
    "react-router-dom": "^6.26.0",
+    "remark-gfm": "^4.0.1",
    "shadcn": "^4.7.0",
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.6.0",
--- a/apps/web/src/api/client.ts
+++ b/apps/web/src/api/client.ts
@@ -4,6 +4,7 @@ import type {
  Session,
  Message,
  ModelInfo,
+  SidebarResponse,
 } from './types';

 export class ApiError extends Error {
@@ -83,6 +84,11 @@ export const api = {
          body: JSON.stringify({ content }),
        }
      ),
+    regenerate: (sessionId: string, messageId: string) =>
+      request<{ assistant_message_id: string }>(
+        `/api/sessions/${sessionId}/messages/${messageId}/regenerate`,
+        { method: 'POST' }
+      ),
  },

  models: () => request<ModelInfo[]>('/api/models'),
@@ -95,4 +101,8 @@ export const api = {
        body: JSON.stringify(body),
      }),
  },
+
+  sidebar: {
+    get: () => request<SidebarResponse>('/api/sidebar'),
+  },
 };
--- a/apps/web/src/api/types.ts
+++ b/apps/web/src/api/types.ts
@@ -46,6 +46,11 @@ export interface Message {
  tool_results: ToolResult | null;
  status: MessageStatus;
  last_seq: number;
+  tokens_used: number | null;
+  ctx_used: number | null;
+  ctx_max: number | null;
+  started_at: string | null;
+  finished_at: string | null;
  created_at: string;
 }

@@ -54,6 +59,24 @@ export interface ModelInfo {
  [key: string]: unknown;
 }

+export interface SidebarSession {
+  id: string;
+  name: string;
+  model: string;
+  updated_at: string;
+}
+
+export interface SidebarProject {
+  id: string;
+  name: string;
+  recent_sessions: SidebarSession[];
+  total_sessions: number;
+}
+
+export interface SidebarResponse {
+  projects: SidebarProject[];
+}
+
 export type WsFrame =
  | { type: 'snapshot'; messages: Message[] }
  | { type: 'message_started'; message_id: string; role: MessageRole }
@@ -67,5 +90,15 @@ export type WsFrame =
      truncated: boolean;
      error?: string;
    }
-  | { type: 'message_complete'; message_id: string }
+  | {
+      type: 'message_complete';
+      message_id: string;
+      tokens_used?: number | null;
+      ctx_used?: number | null;
+      ctx_max?: number | null;
+      started_at?: string | null;
+      finished_at?: string | null;
+    }
+  | { type: 'messages_deleted'; message_ids: string[] }
+  | { type: 'session_renamed'; session_id: string; name: string }
  | { type: 'error'; message_id?: string; error: string };
--- a/apps/web/src/components/AddProjectModal.tsx
+++ b/apps/web/src/components/AddProjectModal.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { api } from '@/api/client';
 import type { AvailableProject } from '@/api/types';
+import { sessionEvents } from '@/hooks/sessionEvents';
 import { Button } from '@/components/ui/button';
 import {
  Dialog,
@@ -42,7 +43,8 @@ export function AddProjectModal({ open, onOpenChange, onAdded }: Props) {
    setBusy(true);
    setError(null);
    try {
-      await api.projects.add({ path });
+      const created = await api.projects.add({ path });
+      sessionEvents.emit({ type: 'project_created', project: created });
      onAdded();
      onOpenChange(false);
    } catch (err) {
--- a/apps/web/src/components/CodeBlock.tsx
+++ b/apps/web/src/components/CodeBlock.tsx
@@ -42,36 +42,3 @@ export function CodeBlock({ code, lang }: Props) {
    </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
@@ -1,49 +1,209 @@
+import { useState } from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Copy, RefreshCw, Check } from 'lucide-react';
+import { toast } from 'sonner';
 import type { Message } from '@/api/types';
+import { api } from '@/api/client';
 import { ToolCallCard } from './ToolCallCard';
-import { CodeBlock, splitCodeBlocks } from './CodeBlock';
+import { CodeBlock } from './CodeBlock';

 interface Props {
  message: Message;
+  sessionId: string;
 }

-export function MessageBubble({ message }: Props) {
+function MarkdownBody({ content }: { content: string }) {
+  return (
+    <Markdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        pre: ({ children }) => <>{children}</>,
+        code: (props) => {
+          const { children, className, ...rest } = props as {
+            children?: unknown;
+            className?: string;
+          };
+          const text = String(children ?? '').replace(/\n$/, '');
+          const langMatch = /language-([\w-]+)/.exec(className ?? '');
+          const isBlock = !!langMatch || text.includes('\n');
+          if (isBlock) {
+            return <CodeBlock code={text} lang={langMatch?.[1]} />;
+          }
+          return (
+            <code
+              {...rest}
+              className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]"
+            >
+              {children as React.ReactNode}
+            </code>
+          );
+        },
+        a: ({ children, href }) => (
+          <a
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+            className="underline decoration-muted-foreground/40 underline-offset-2 hover:decoration-foreground"
+          >
+            {children}
+          </a>
+        ),
+        ul: ({ children }) => (
+          <ul className="list-disc pl-5 space-y-1">{children}</ul>
+        ),
+        ol: ({ children }) => (
+          <ol className="list-decimal pl-5 space-y-1">{children}</ol>
+        ),
+        p: ({ children }) => <p className="leading-relaxed">{children}</p>,
+        h1: ({ children }) => <h1 className="text-base font-semibold mt-2">{children}</h1>,
+        h2: ({ children }) => <h2 className="text-sm font-semibold mt-2">{children}</h2>,
+        h3: ({ children }) => <h3 className="text-sm font-semibold mt-1">{children}</h3>,
+        blockquote: ({ children }) => (
+          <blockquote className="border-l-2 border-border pl-3 text-muted-foreground">
+            {children}
+          </blockquote>
+        ),
+        table: ({ children }) => (
+          <div className="overflow-x-auto">
+            <table className="border-collapse text-xs">{children}</table>
+          </div>
+        ),
+        th: ({ children }) => (
+          <th className="border border-border px-2 py-1 text-left font-medium">{children}</th>
+        ),
+        td: ({ children }) => (
+          <td className="border border-border px-2 py-1">{children}</td>
+        ),
+      }}
+    >
+      {content}
+    </Markdown>
+  );
+}
+
+function StatsLine({ message }: { message: Message }) {
+  const tokens = message.tokens_used;
+  if (typeof tokens !== 'number' || tokens <= 0) return null;
+  const started = message.started_at ? Date.parse(message.started_at) : NaN;
+  const finished = message.finished_at ? Date.parse(message.finished_at) : NaN;
+  let tps: number | null = null;
+  if (!Number.isNaN(started) && !Number.isNaN(finished) && finished > started) {
+    const seconds = (finished - started) / 1000;
+    if (seconds > 0) tps = Math.round((tokens / seconds) * 10) / 10;
+  }
+  const ctxUsed = message.ctx_used;
+  const ctxMax = message.ctx_max;
+  const ctxPart =
+    typeof ctxUsed === 'number'
+      ? typeof ctxMax === 'number' && ctxMax > 0
+        ? `${ctxUsed} / ${ctxMax} ctx`
+        : `${ctxUsed} ctx`
+      : null;
+
+  const parts: string[] = [`${tokens} tokens`];
+  if (tps !== null) parts.push(`${tps.toFixed(1)} tok/s`);
+  if (ctxPart) parts.push(ctxPart);
+
+  return (
+    <div className="text-[10px] font-mono text-muted-foreground">
+      {parts.join(' · ')}
+    </div>
+  );
+}
+
+function ActionRow({
+  message,
+  sessionId,
+}: {
+  message: Message;
+  sessionId: string;
+}) {
+  const [justCopied, setJustCopied] = useState(false);
+  const [regenerating, setRegenerating] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(message.content);
+      setJustCopied(true);
+      setTimeout(() => setJustCopied(false), 1200);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'copy failed');
+    }
+  }
+
+  async function regenerate() {
+    if (regenerating || message.status === 'streaming') return;
+    setRegenerating(true);
+    try {
+      await api.messages.regenerate(sessionId, message.id);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'regenerate failed');
+    } finally {
+      setRegenerating(false);
+    }
+  }
+
+  const isAssistant = message.role === 'assistant';
+  const canRegen = isAssistant && message.status !== 'streaming';
+
+  return (
+    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+      <button
+        type="button"
+        onClick={() => void copy()}
+        className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
+        aria-label="Copy message"
+        title="Copy"
+      >
+        {justCopied ? <Check className="size-3" /> : <Copy className="size-3" />}
+      </button>
+      {isAssistant && (
+        <button
+          type="button"
+          onClick={() => void regenerate()}
+          disabled={!canRegen || regenerating}
+          className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
+          aria-label="Regenerate message"
+          title="Regenerate"
+        >
+          <RefreshCw className={`size-3 ${regenerating ? 'animate-spin' : ''}`} />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function MessageBubble({ message, sessionId }: Props) {
  if (message.role === 'tool') {
    return <ToolCallCard message={message} />;
  }

  if (message.role === 'user') {
    return (
-      <div className="flex justify-end">
+      <div className="group flex flex-col items-end gap-1">
        <div className="max-w-[80%] rounded-lg bg-primary text-primary-foreground px-3 py-2 text-sm whitespace-pre-wrap">
          {message.content}
        </div>
+        <ActionRow message={message} sessionId={sessionId} />
      </div>
    );
  }

  const isStreaming = message.status === 'streaming';
  const failed = message.status === 'failed';
+  const hasContent = message.content.length > 0;
+  const hasToolCalls = (message.tool_calls?.length ?? 0) > 0;

  return (
-    <div className="flex flex-col gap-2">
+    <div className="group 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)) && (
+      {(hasContent || (!hasToolCalls && 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 && (
+          {hasContent ? <MarkdownBody content={message.content} /> : null}
+          {isStreaming && (
            <span className="inline-block w-1.5 h-3.5 align-baseline bg-muted-foreground/60 animate-pulse" />
          )}
        </div>
@@ -51,6 +211,10 @@ export function MessageBubble({ message }: Props) {
      {failed && (
        <div className="text-xs text-destructive">message failed</div>
      )}
+      {!isStreaming && <StatsLine message={message} />}
+      {!isStreaming && (hasContent || hasToolCalls) && (
+        <ActionRow message={message} sessionId={sessionId} />
+      )}
    </div>
  );
 }
--- a/apps/web/src/components/MessageList.tsx
+++ b/apps/web/src/components/MessageList.tsx
@@ -4,9 +4,10 @@ import { MessageBubble } from './MessageBubble';

 interface Props {
  messages: Message[];
+  sessionId: string;
 }

-export function MessageList({ messages }: Props) {
+export function MessageList({ messages, sessionId }: Props) {
  const endRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
@@ -24,7 +25,7 @@ export function MessageList({ messages }: Props) {
  return (
    <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
      {messages.map((m) => (
-        <MessageBubble key={m.id} message={m} />
+        <MessageBubble key={m.id} message={m} sessionId={sessionId} />
      ))}
      <div ref={endRef} />
    </div>
--- a/apps/web/src/components/ProjectSidebar.tsx
+++ b/apps/web/src/components/ProjectSidebar.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react';
-import { NavLink, useNavigate } from 'react-router-dom';
-import { Plus, Folder } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import { ChevronRight, Folder, MessageSquare, Plus } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import {
@@ -10,88 +10,225 @@ import {
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { AddProjectModal } from './AddProjectModal';
-import { useProjects } from '@/hooks/useProjects';
+import { api } from '@/api/client';
+import { sessionEvents } from '@/hooks/sessionEvents';
+import { useSidebar } from '@/hooks/useSidebar';
+import type { SidebarProject } from '@/api/types';
+
+const EXPANDED_KEY = 'boocode.sidebar.expanded';
+const MAX_VISIBLE_SESSIONS = 5;
+
+function readExpanded(): Set<string> {
+  try {
+    const raw = localStorage.getItem(EXPANDED_KEY);
+    if (!raw) return new Set();
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return new Set();
+    return new Set(parsed.filter((v): v is string => typeof v === 'string'));
+  } catch {
+    return new Set();
+  }
+}
+
+function writeExpanded(ids: Set<string>): void {
+  try {
+    localStorage.setItem(EXPANDED_KEY, JSON.stringify(Array.from(ids)));
+  } catch {
+    /* quota or disabled storage — ignore */
+  }
+}
+
+function relTime(iso: string): string {
+  const now = Date.now();
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return '';
+  const sec = Math.max(0, Math.floor((now - t) / 1000));
+  if (sec < 60) return `${sec}s`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h`;
+  const day = Math.floor(hr / 24);
+  if (day < 30) return `${day}d`;
+  const mo = Math.floor(day / 30);
+  if (mo < 12) return `${mo}mo`;
+  return `${Math.floor(mo / 12)}y`;
+}
+
+function activeProjectId(pathname: string, projects: SidebarProject[]): string | null {
+  const pm = pathname.match(/^\/project\/([^/]+)/);
+  if (pm?.[1]) return pm[1];
+  const sm = pathname.match(/^\/session\/([^/]+)/);
+  const sid = sm?.[1];
+  if (!sid) return null;
+  return projects.find((p) => p.recent_sessions.some((s) => s.id === sid))?.id ?? null;
+}
+
+function activeSessionId(pathname: string): string | null {
+  const m = pathname.match(/^\/session\/([^/]+)/);
+  return m?.[1] ?? null;
+}

 export function ProjectSidebar() {
-  const { projects, refresh, remove } = useProjects();
+  const { data, error, loading, retry } = useSidebar();
  const [addOpen, setAddOpen] = useState(false);
+  const [expanded, setExpanded] = useState<Set<string>>(() => readExpanded());
  const navigate = useNavigate();
+  const location = useLocation();
+  const lastToastedError = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (error && !data && error !== lastToastedError.current) {
+      toast.error(error);
+      lastToastedError.current = error;
+    }
+    if (!error) lastToastedError.current = null;
+  }, [error, data]);
+
+  const projects = data?.projects ?? [];
+  const activeProject = useMemo(
+    () => activeProjectId(location.pathname, projects),
+    [location.pathname, projects]
+  );
+  const activeSession = useMemo(
+    () => activeSessionId(location.pathname),
+    [location.pathname]
+  );
+
+  function toggle(id: string) {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      writeExpanded(next);
+      return next;
+    });
+  }

  async function handleRemove(id: string) {
    try {
-      await remove(id);
+      await api.projects.remove(id);
+      sessionEvents.emit({ type: 'project_deleted', project_id: id });
      navigate('/');
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to remove project');
    }
  }

+  const rowCls = (active: boolean) =>
+    active ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'hover:bg-sidebar-accent/60';
+
  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"
-        >
+        <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>
+        {loading && data == null && (
+          <div className="space-y-2 px-2">
+            {[0, 1, 2, 3].map((i) => (
+              <div key={i} className="bg-muted/40 animate-pulse rounded h-6" />
+            ))}
          </div>
-        ))}
+        )}
+        {data != null && projects.length === 0 && (
+          <div className="px-4 py-2 text-xs text-muted-foreground">
+            No projects yet. Click + to add one.
+          </div>
+        )}
+        {error != null && !data && (
+          <div className="px-4 py-2 space-y-2">
+            <div className="text-xs text-muted-foreground">{error}</div>
+            <Button size="sm" variant="outline" onClick={retry}>
+              Retry
+            </Button>
+          </div>
+        )}
+        {data != null &&
+          projects.map((p) => {
+            const isActiveProject = activeProject === p.id;
+            const isExpanded = isActiveProject || expanded.has(p.id);
+            const visible = p.recent_sessions.slice(0, MAX_VISIBLE_SESSIONS);
+            return (
+              <div key={p.id} className="px-2">
+                <DropdownMenu>
+                  <div
+                    className={`group flex items-center gap-1 rounded-md px-2 py-1.5 text-sm ${rowCls(isActiveProject)}`}
+                    onContextMenu={(e) => {
+                      e.preventDefault();
+                      (
+                        e.currentTarget.parentElement?.querySelector(
+                          '[data-ctxtrigger]'
+                        ) as HTMLElement | null
+                      )?.click();
+                    }}
+                  >
+                    <button
+                      type="button"
+                      aria-label={isExpanded ? 'Collapse' : 'Expand'}
+                      aria-expanded={isExpanded}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggle(p.id);
+                      }}
+                      className="flex items-center justify-center size-4 shrink-0 opacity-70 hover:opacity-100"
+                    >
+                      <ChevronRight
+                        className={`size-3.5 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+                      />
+                    </button>
+                    <NavLink to={`/project/${p.id}`} className="flex items-center gap-2 min-w-0 flex-1">
+                      <Folder className="size-3.5 shrink-0 opacity-70" />
+                      <span className="truncate" title={p.name}>{p.name}</span>
+                    </NavLink>
+                  </div>
+                  <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>
+
+                {isExpanded && (
+                  <div className="ml-5 mt-0.5 space-y-0.5">
+                    {visible.map((s) => (
+                      <NavLink
+                        key={s.id}
+                        to={`/session/${s.id}`}
+                        className={`flex items-center gap-2 rounded-md px-2 py-1 text-sm min-w-0 ${rowCls(activeSession === s.id)}`}
+                      >
+                        <MessageSquare className="size-3.5 shrink-0 opacity-70" />
+                        <span className="truncate flex-1" title={s.name}>{s.name}</span>
+                        <span className="text-xs text-muted-foreground shrink-0 tabular-nums">
+                          {relTime(s.updated_at)}
+                        </span>
+                      </NavLink>
+                    ))}
+                    {p.total_sessions > MAX_VISIBLE_SESSIONS && (
+                      <NavLink
+                        to={`/project/${p.id}`}
+                        className="block rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-sidebar-accent/60"
+                      >
+                        View all ({p.total_sessions})
+                      </NavLink>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
      </nav>

-      <AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={refresh} />
+      <AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={() => {}} />
    </aside>
  );
 }
--- a/apps/web/src/hooks/sessionEvents.ts
+++ b/apps/web/src/hooks/sessionEvents.ts
@@ -0,0 +1,61 @@
+// Tiny in-app event bus for session metadata changes that need to propagate
+// across hooks (e.g. AI rename arriving via WS in the session view needs to
+// also refresh the sidebar's session list).
+
+import type { Project, Session } from '@/api/types';
+
+export interface SessionRenamedEvent {
+  type: 'session_renamed';
+  session_id: string;
+  name: string;
+}
+
+export interface ProjectCreatedEvent {
+  type: 'project_created';
+  project: Project;
+}
+
+export interface ProjectDeletedEvent {
+  type: 'project_deleted';
+  project_id: string;
+}
+
+export interface SessionCreatedEvent {
+  type: 'session_created';
+  session: Session;
+  project_id: string;
+}
+
+export interface SessionDeletedEvent {
+  type: 'session_deleted';
+  session_id: string;
+  project_id: string;
+}
+
+export type SessionEvent =
+  | SessionRenamedEvent
+  | ProjectCreatedEvent
+  | ProjectDeletedEvent
+  | SessionCreatedEvent
+  | SessionDeletedEvent;
+type Listener = (event: SessionEvent) => void;
+
+const listeners = new Set<Listener>();
+
+export const sessionEvents = {
+  emit(event: SessionEvent) {
+    for (const listener of listeners) {
+      try {
+        listener(event);
+      } catch {
+        // swallow — one bad listener shouldn't break others
+      }
+    }
+  },
+  subscribe(listener: Listener): () => void {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+};
--- a/apps/web/src/hooks/useProjects.ts
+++ b/apps/web/src/hooks/useProjects.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { api } from '@/api/client';
 import type { Project } from '@/api/types';
+import { sessionEvents } from './sessionEvents';

 export function useProjects() {
  const [projects, setProjects] = useState<Project[] | null>(null);
@@ -32,6 +33,7 @@ export function useProjects() {
  const remove = useCallback(
    async (id: string) => {
      await api.projects.remove(id);
+      sessionEvents.emit({ type: 'project_deleted', project_id: id });
      await refresh();
    },
    [refresh]
--- a/apps/web/src/hooks/useSessionStream.ts
+++ b/apps/web/src/hooks/useSessionStream.ts
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import type { Message, WsFrame } from '@/api/types';
+import { sessionEvents } from './sessionEvents';

 interface State {
  messages: Message[];
@@ -24,6 +25,11 @@ function applyFrame(state: State, frame: WsFrame): State {
        tool_results: null,
        status: 'streaming',
        last_seq: 0,
+        tokens_used: null,
+        ctx_used: null,
+        ctx_max: null,
+        started_at: null,
+        finished_at: null,
        created_at: new Date().toISOString(),
      };
      return { ...state, messages: [...state.messages, newMsg] };
@@ -76,16 +82,47 @@ function applyFrame(state: State, frame: WsFrame): State {
        },
        status: 'complete',
        last_seq: 0,
+        tokens_used: null,
+        ctx_used: null,
+        ctx_max: null,
+        started_at: null,
+        finished_at: null,
        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
+        m.id === frame.message_id
+          ? {
+              ...m,
+              status: 'complete' as const,
+              ...(frame.tokens_used !== undefined ? { tokens_used: frame.tokens_used } : {}),
+              ...(frame.ctx_used !== undefined ? { ctx_used: frame.ctx_used } : {}),
+              ...(frame.ctx_max !== undefined ? { ctx_max: frame.ctx_max } : {}),
+              ...(frame.started_at !== undefined ? { started_at: frame.started_at } : {}),
+              ...(frame.finished_at !== undefined ? { finished_at: frame.finished_at } : {}),
+            }
+          : m
      );
      return { ...state, messages: next };
    }
+    case 'messages_deleted': {
+      const removeSet = new Set(frame.message_ids);
+      return {
+        ...state,
+        messages: state.messages.filter((m) => !removeSet.has(m.id)),
+      };
+    }
+    case 'session_renamed': {
+      // Side-effect, not state — dispatch via event bus to other hooks.
+      sessionEvents.emit({
+        type: 'session_renamed',
+        session_id: frame.session_id,
+        name: frame.name,
+      });
+      return state;
+    }
    case 'error': {
      const next = frame.message_id
        ? state.messages.map((m) =>
--- a/apps/web/src/hooks/useSessions.ts
+++ b/apps/web/src/hooks/useSessions.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { api } from '@/api/client';
 import type { Session } from '@/api/types';
+import { sessionEvents } from './sessionEvents';

 export function useSessions(projectId: string | undefined) {
  const [sessions, setSessions] = useState<Session[] | null>(null);
@@ -24,6 +25,23 @@ export function useSessions(projectId: string | undefined) {
    void refresh();
  }, [refresh]);

+  useEffect(() => {
+    return sessionEvents.subscribe((event) => {
+      if (event.type !== 'session_renamed') return;
+      setSessions((prev) => {
+        if (!prev) return prev;
+        let changed = false;
+        const next = prev.map((s) => {
+          if (s.id !== event.session_id) return s;
+          if (s.name === event.name) return s;
+          changed = true;
+          return { ...s, name: event.name };
+        });
+        return changed ? next : prev;
+      });
+    });
+  }, []);
+
  const create = useCallback(
    async (body: { name?: string; model?: string; system_prompt?: string }) => {
      if (!projectId) throw new Error('no project');
--- a/apps/web/src/hooks/useSidebar.ts
+++ b/apps/web/src/hooks/useSidebar.ts
@@ -0,0 +1,169 @@
+import { useEffect, useState } from 'react';
+import { api } from '@/api/client';
+import type { SidebarProject, SidebarResponse, SidebarSession } from '@/api/types';
+import { sessionEvents } from './sessionEvents';
+
+const RECENT_SESSIONS_LIMIT = 6;
+
+// Module-scope shared state — there is at most one sidebar fetch
+// for the lifetime of the page, regardless of how many components
+// call useSidebar().
+let sharedData: SidebarResponse | null = null;
+let sharedError: string | null = null;
+let sharedLoading: boolean = true;
+let initialized = false;
+let fetchInFlight: Promise<void> | null = null;
+const subscribers = new Set<() => void>();
+
+function notify(): void {
+  for (const sub of subscribers) {
+    try {
+      sub();
+    } catch {
+      // swallow — one bad subscriber shouldn't break others
+    }
+  }
+}
+
+function load(): Promise<void> {
+  if (fetchInFlight) return fetchInFlight;
+  sharedLoading = true;
+  sharedError = null;
+  notify();
+  const p = (async () => {
+    try {
+      const res = await api.sidebar.get();
+      sharedData = res;
+      sharedError = null;
+    } catch (err) {
+      sharedData = null;
+      sharedError = err instanceof Error ? err.message : 'failed to load sidebar';
+    } finally {
+      sharedLoading = false;
+      fetchInFlight = null;
+      notify();
+    }
+  })();
+  fetchInFlight = p;
+  return p;
+}
+
+function applyEvent(prev: SidebarResponse, event: import('./sessionEvents').SessionEvent): SidebarResponse {
+  switch (event.type) {
+    case 'project_created': {
+      const fresh: SidebarProject = {
+        id: event.project.id,
+        name: event.project.name,
+        recent_sessions: [],
+        total_sessions: 0,
+      };
+      return { ...prev, projects: [fresh, ...prev.projects] };
+    }
+    case 'project_deleted': {
+      const next = prev.projects.filter((p) => p.id !== event.project_id);
+      if (next.length === prev.projects.length) return prev;
+      return { ...prev, projects: next };
+    }
+    case 'session_created': {
+      let changed = false;
+      const projects = prev.projects.map((p) => {
+        if (p.id !== event.project_id) return p;
+        changed = true;
+        const fresh: SidebarSession = {
+          id: event.session.id,
+          name: event.session.name,
+          model: event.session.model,
+          updated_at: event.session.updated_at,
+        };
+        return {
+          ...p,
+          recent_sessions: [fresh, ...p.recent_sessions].slice(0, RECENT_SESSIONS_LIMIT),
+          total_sessions: p.total_sessions + 1,
+        };
+      });
+      return changed ? { ...prev, projects } : prev;
+    }
+    case 'session_deleted': {
+      let changed = false;
+      const projects = prev.projects.map((p) => {
+        if (p.id !== event.project_id) return p;
+        changed = true;
+        const recent = p.recent_sessions.filter((s) => s.id !== event.session_id);
+        return {
+          ...p,
+          recent_sessions: recent,
+          total_sessions: Math.max(0, p.total_sessions - 1),
+        };
+      });
+      return changed ? { ...prev, projects } : prev;
+    }
+    case 'session_renamed': {
+      let changed = false;
+      const projects = prev.projects.map((p) => {
+        let projectChanged = false;
+        const recent = p.recent_sessions.map((s) => {
+          if (s.id !== event.session_id) return s;
+          if (s.name === event.name) return s;
+          projectChanged = true;
+          return { ...s, name: event.name };
+        });
+        if (!projectChanged) return p;
+        changed = true;
+        return { ...p, recent_sessions: recent };
+      });
+      return changed ? { ...prev, projects } : prev;
+    }
+    default:
+      return prev;
+  }
+}
+
+// One bus subscription for the lifetime of the module. Events arriving
+// before the initial fetch resolves are dropped; the eventual fetch
+// result is the source of truth.
+sessionEvents.subscribe((event) => {
+  if (!sharedData) return;
+  const next = applyEvent(sharedData, event);
+  if (next === sharedData) return;
+  sharedData = next;
+  notify();
+});
+
+interface Snapshot {
+  data: SidebarResponse | null;
+  error: string | null;
+  loading: boolean;
+}
+
+function snapshot(): Snapshot {
+  return { data: sharedData, error: sharedError, loading: sharedLoading };
+}
+
+export function useSidebar(): {
+  data: SidebarResponse | null;
+  error: string | null;
+  loading: boolean;
+  retry: () => void;
+} {
+  const [state, setState] = useState<Snapshot>(snapshot);
+
+  useEffect(() => {
+    const sub = () => setState(snapshot());
+    subscribers.add(sub);
+    // Sync up if the module state changed between render and effect.
+    sub();
+    if (!initialized) {
+      initialized = true;
+      void load();
+    }
+    return () => {
+      subscribers.delete(sub);
+    };
+  }, []);
+
+  const retry = () => {
+    void load();
+  };
+
+  return { data: state.data, error: state.error, loading: state.loading, retry };
+}
--- a/apps/web/src/pages/Home.tsx
+++ b/apps/web/src/pages/Home.tsx
@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { AddProjectModal } from '@/components/AddProjectModal';
-import { useProjects } from '@/hooks/useProjects';
+import { useSidebar } from '@/hooks/useSidebar';

 export function Home() {
-  const { projects, refresh } = useProjects();
+  const { data } = useSidebar();
  const [open, setOpen] = useState(false);

-  const empty = projects && projects.length === 0;
+  const empty = data ? data.projects.length === 0 : false;

  return (
    <div className="flex-1 flex items-center justify-center px-6">
@@ -29,7 +29,7 @@ export function Home() {
          </>
        )}
      </div>
-      <AddProjectModal open={open} onOpenChange={setOpen} onAdded={refresh} />
+      <AddProjectModal open={open} onOpenChange={setOpen} onAdded={() => {}} />
    </div>
  );
 }
--- a/apps/web/src/pages/Project.tsx
+++ b/apps/web/src/pages/Project.tsx
@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Plus, MessageSquare, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 import { api } from '@/api/client';
 import type { Project as ProjectType } from '@/api/types';
 import { Button } from '@/components/ui/button';
+import { sessionEvents } from '@/hooks/sessionEvents';
 import { useSessions } from '@/hooks/useSessions';

 export function Project() {
@@ -26,6 +28,7 @@ export function Project() {
    setCreating(true);
    try {
      const s = await create({});
+      sessionEvents.emit({ type: 'session_created', session: s, project_id: id });
      navigate(`/session/${s.id}`);
    } finally {
      setCreating(false);
@@ -73,7 +76,20 @@ export function Project() {
                  variant="ghost"
                  size="icon-sm"
                  aria-label="Delete session"
-                  onClick={() => void remove(s.id)}
+                  onClick={async () => {
+                    try {
+                      await remove(s.id);
+                      sessionEvents.emit({
+                        type: 'session_deleted',
+                        session_id: s.id,
+                        project_id: id!,
+                      });
+                    } catch (err) {
+                      toast.error(
+                        err instanceof Error ? err.message : 'failed to delete session'
+                      );
+                    }
+                  }}
                >
                  <Trash2 />
                </Button>
--- a/apps/web/src/pages/Session.tsx
+++ b/apps/web/src/pages/Session.tsx
@@ -5,6 +5,7 @@ import { toast } from 'sonner';
 import { api } from '@/api/client';
 import type { Session as SessionType } from '@/api/types';
 import { useSessionStream } from '@/hooks/useSessionStream';
+import { sessionEvents } from '@/hooks/sessionEvents';
 import { MessageList } from '@/components/MessageList';
 import { ChatInput } from '@/components/ChatInput';
 import { ModelPicker } from '@/components/ModelPicker';
@@ -39,6 +40,16 @@ export function Session() {
      .catch(() => {});
  }, [id]);

+  useEffect(() => {
+    if (!id) return;
+    return sessionEvents.subscribe((event) => {
+      if (event.type !== 'session_renamed') return;
+      if (event.session_id !== id) return;
+      setSession((prev) => (prev ? { ...prev, name: event.name } : prev));
+      setName((prev) => (editingName ? prev : event.name));
+    });
+  }, [id, editingName]);
+
  async function saveName() {
    if (!id || !session) return;
    const trimmed = name.trim();
@@ -49,6 +60,11 @@ export function Session() {
    }
    const updated = await api.sessions.update(id, { name: trimmed });
    setSession(updated);
+    sessionEvents.emit({
+      type: 'session_renamed',
+      session_id: id,
+      name: trimmed,
+    });
    setEditingName(false);
  }

@@ -111,7 +127,7 @@ export function Session() {
        )}
      </header>

-      <MessageList messages={stream.messages} />
+      {id && <MessageList messages={stream.messages} sessionId={id} />}

      <ChatInput disabled={streaming} onSend={handleSend} />
    </div>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml