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>

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({

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
       `;

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 };
+  });
+}

apps/server/src/schema.sql

@@ -38,6 +38,8 @@ 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

apps/server/src/services/inference.ts

@@ -426,6 +426,7 @@ async function runAssistantTurn(
           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,
@@ -458,6 +459,7 @@ async function runAssistantTurn(
       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',
@@ -529,6 +531,7 @@ async function runAssistantTurn(
     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,

apps/server/src/types/api.ts

@@ -58,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[];
+}

apps/web/src/api/client.ts

@@ -4,6 +4,7 @@ import type {
   Session,
   Message,
   ModelInfo,
+  SidebarResponse,
 } from './types';
 
 export class ApiError extends Error {
@@ -100,4 +101,8 @@ export const api = {
         body: JSON.stringify(body),
       }),
   },
+
+  sidebar: {
+    get: () => request<SidebarResponse>('/api/sidebar'),
+  },
 };

apps/web/src/api/types.ts

@@ -59,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 }

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) {

apps/web/src/components/ProjectSidebar.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink, useLocation, useNavigate } from 'react-router-dom';
-import { Plus, Folder } from 'lucide-react';
+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
+        <Button size="icon-sm" variant="ghost" onClick={() => setAddOpen(true)} aria-label="Add project">
-          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 && (
+        {loading && data == null && (
-          <div className="px-4 py-2 text-xs text-muted-foreground">Loading…</div>
+          <div className="space-y-2 px-2">
-        )}
+            {[0, 1, 2, 3].map((i) => (
-        {projects && projects.length === 0 && (
+              <div key={i} className="bg-muted/40 animate-pulse rounded h-6" />
-          <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>
-        ))}
+        )}
+        {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>
   );
 }

apps/web/src/hooks/sessionEvents.ts

@@ -1,6 +1,8 @@
 // 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). One event type for now.
+// also refresh the sidebar's session list).
+
+import type { Project, Session } from '@/api/types';
 
 export interface SessionRenamedEvent {
   type: 'session_renamed';
@@ -8,7 +10,34 @@ export interface SessionRenamedEvent {
   name: string;
 }
 
-type SessionEvent = SessionRenamedEvent;
+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>();

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]

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 };
+}

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>
   );
 }

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>

apps/web/src/pages/Session.tsx

@@ -60,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);
   }