@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/__tests__/voice-view.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * S43 — voice-view.test.tsx
+ *
+ * Renders the list, audio src uses /api/voice/:id/audio, and
+ * Delete confirms + fires DELETE.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { VoiceView } from '../views/Voice/VoiceView.js';
+
+interface MockState {
+  deletes: string[];
+}
+
+function installFetchMock(handler: (url: string) => Response, state?: MockState): MockState {
+  const out: MockState = state ?? { deletes: [] };
+  globalThis.fetch = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = String(input);
+    const method = String(init?.method ?? 'GET').toUpperCase();
+    if (method === 'DELETE') out.deletes.push(url);
+    return handler(url);
+  }) as unknown as typeof fetch;
+  return out;
+}
+
+function jsonResponse(status: number, body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { 'content-type': 'application/json' },
+  });
+}
+
+describe('S43 VoiceView', () => {
+  beforeEach(() => {
+    if (!Element.prototype.scrollIntoView) Element.prototype.scrollIntoView = vi.fn();
+  });
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  it('renders empty state when no memos', async () => {
+    installFetchMock((url) => {
+      if (url.endsWith('/api/voice/list')) return jsonResponse(200, { memos: [] });
+      return jsonResponse(200, {});
+    });
+    render(<VoiceView />);
+    expect(await screen.findByTestId('voice-view')).toBeTruthy();
+    expect(await screen.findByText('No voice memos')).toBeTruthy();
+  });
+
+  it('renders rows with audio src on /api/voice/:id/audio', async () => {
+    installFetchMock((url) => {
+      if (url.endsWith('/api/voice/list')) {
+        return jsonResponse(200, { memos: [{ id: 'v1', filename: 'note.wav', durationMs: 4321 }] });
+      }
+      return jsonResponse(200, {});
+    });
+    render(<VoiceView />);
+    const row = await screen.findByTestId('voice-row-v1');
+    expect(row.textContent).toContain('note.wav');
+    const audio = screen.getByTestId('voice-audio-v1') as HTMLAudioElement;
+    expect(audio.getAttribute('src')).toBe('/api/voice/v1/audio');
+  });
+
+  it('DELETEs /api/voice/:id on confirm', async () => {
+    const state = installFetchMock((url) => {
+      if (url.endsWith('/api/voice/list')) {
+        return jsonResponse(200, { memos: [{ id: 'v2', filename: 'x.wav' }] });
+      }
+      return jsonResponse(200, {});
+    });
+    render(<VoiceView />);
+    fireEvent.click(await screen.findByTestId('voice-delete-v2'));
+    fireEvent.click(await screen.findByTestId('voice-confirm-delete-v2'));
+    await waitFor(() => {
+      expect(state.deletes.find((u) => u.endsWith('/api/voice/v2'))).toBeTruthy();
+    });
+  });
+});

package/bizar-dash/src/web/v8/data/types.ts

@@ -33,7 +33,7 @@ export interface BizarAgent {
   tools?: string[];
   tags?: string[];
   category?: string;
-  status?: 'idle' | 'working' | 'error' | 'stuck';
+  status?: 'idle' | 'working' | 'error' | 'stuck' | 'paused';
   currentTaskId?: string | null;
   currentTaskStartedAt?: number;
   lastSeen?: number;
@@ -89,7 +89,7 @@ export interface Goal {
 export interface Task {
   id: string;
   title: string;
-  status?: 'queued' | 'doing' | 'done' | 'blocked' | 'archived';
+  status?: 'backlog' | 'queued' | 'doing' | 'done' | 'blocked' | 'archived';
   priority?: 'low' | 'medium' | 'high' | 'urgent';
   description?: string;
   branch?: string;
@@ -100,6 +100,18 @@ export interface Task {
   metadata?: Record<string, unknown>;
   createdAt?: number;
   updatedAt?: number;
+  /** Optional tag list (Task tags are stored on the task itself in v10). */
+  tags?: string[];
+  /** Optional subtask list (freeform — accept string ids or {id, title, done}). */
+  subtasks?: Array<{ id?: string; title?: string; done?: boolean } | string>;
+  /** Optional dependencies (other task ids). */
+  dependencies?: string[];
+  /** Recurring task indicator. */
+  recurring?: boolean | string;
+  /** Activity log entries (for the detail dialog). */
+  activity?: Array<{ ts?: number; kind?: string; message?: string }>;
+  /** When the active timer started (for in-progress tracking). */
+  timerStart?: number;
 }
 
 /** `GET /api/memory` — memo entries. */
@@ -149,8 +161,79 @@ export type WsMessage =
   | { type: 'agents:change'; source?: string; digest?: string }
   | { type: 'agent:status'; agent?: BizarAgent }
   | { type: 'goals:change'; goal?: Goal }
+  | { type: 'goals:removed'; id?: string }
   | { type: 'background:change'; id?: string; status?: string }
   | { type: 'background:syncError'; taskId?: string; instanceId?: string; fails?: number }
   | { type: 'artifact:new'; artifact?: { id?: string; title?: string } }
   | { type: 'activity:new'; event?: ActivityEvent }
-  | { type: string; [key: string]: unknown };
+  // ── v9.3.0 chat streaming protocol ───────────────────────────────────
+  // `chat:delta` streams raw assistant text chunks mid-response.
+  // `chat:message` is the final persisted turn after the agent idles.
+  // `chat:done` always follows (or precedes) the final `chat:message`
+  // and signals the server is no longer streaming for this session.
+  // `chat:error` is a non-fatal error envelope (rate limit, claude
+  // unavailable, etc.); the session stays alive so the user can retry.
+  | { type: 'chat:delta'; session?: string; text?: string; ts?: number }
+  | { type: 'chat:message'; session?: string; message?: ChatMessage }
+  | { type: 'chat:done'; session?: string }
+  | { type: 'chat:error'; session?: string; error?: string; status?: number }
+  // ── v9.3.0 cross-project timeline ────────────────────────────────────
+  | { type: 'history:new'; event?: HistoryEvent }
+  // ── v9.3.0 projects context switch ───────────────────────────────────
+  | { type: 'projects:change'; active?: string | null }
+  // ── v9.3.0 self-update progress ──────────────────────────────────────
+  | { type: 'update:progress'; stage?: string; percent?: number; message?: string }
+  | { type: string; [key: string]: unknown };
+
+/** `GET /api/chat/sessions` — chat sessions for the active project. */
+export interface ChatSession {
+  id: string;
+  title?: string;
+  createdAt?: number;
+  updatedAt?: number;
+  messageCount?: number;
+  agent?: string | null;
+}
+
+/** `GET /api/chat?session=…` — single chat session message log. */
+export interface ChatMessage {
+  id: string;
+  ts: string;
+  role: 'user' | 'assistant' | 'system' | 'tool';
+  content: string;
+  agent?: string | null;
+  model?: string | null;
+  attachments?: Array<{ kind?: string; name?: string; url?: string }>;
+}
+
+/** `GET /api/claude-sessions` — Claude Code session list. */
+export interface ClaudeSession {
+  id: string;
+  project?: string;
+  agent?: string;
+  title?: string;
+  startedAt?: number;
+  lastActivity?: number;
+  messageCount?: number;
+}
+
+/** `GET /api/projects` — registered project registry. */
+export interface Project {
+  id: string;
+  name?: string;
+  path: string;
+  active?: boolean;
+  addedAt?: number;
+  lastUsedAt?: number;
+}
+
+/** `GET /api/history` — cross-project history event log. */
+export interface HistoryEvent {
+  id?: string;
+  project?: string;
+  agent?: string;
+  kind?: string;
+  title?: string;
+  description?: string;
+  ts?: number;
+}

package/bizar-dash/src/web/v8/data/useViewNavigate.ts

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+/**
+ * useViewNavigate — fire-and-forget view router navigation.
+ *
+ * The v8 dashboard owns `activeId` state inside `App.tsx`. Components deep
+ * in the tree (e.g. `ActivityLane` rows inside `ActivityView`) need to
+ * switch the active view without prop-drilling. This hook dispatches a
+ * `bizar:navigate` `CustomEvent` on `window` that `App.tsx` listens for
+ * and forwards to its `setActiveId` setter.
+ *
+ * Event shape:
+ *   { id: string; detail?: { entity?: string; slug?: string } }
+ *
+ * The receiving view may read `entity`/`slug` from `useLocation().hash` or
+ * its own props — the event itself is intentionally minimal.
+ */
+
+declare global {
+  interface WindowEventMap {
+    'bizar:navigate': CustomEvent<{ id: string; entity?: string; slug?: string }>;
+  }
+}
+
+export interface ViewNavigateDetail {
+  id: string;
+  entity?: string;
+  slug?: string;
+}
+
+export function useViewNavigate(): (detail: ViewNavigateDetail) => void {
+  return useCallback((detail: ViewNavigateDetail) => {
+    if (typeof window === 'undefined') return;
+    window.dispatchEvent(new CustomEvent('bizar:navigate', { detail }));
+  }, []);
+}
+
+/**
+ * Map an `ActivityEvent` (kind + slug) to a target view id + entity scope.
+ *
+ * Returns `null` when no specific target is known — the caller should
+ * still dispatch the event so the user lands somewhere useful, but
+ * `null` means "no specific deep-link scope".
+ */
+export function activityTarget(kind: string | undefined, slug: string | undefined): ViewNavigateDetail | null {
+  const k = (kind || '').toLowerCase();
+  const s = slug || '';
+  if (k.startsWith('task')) return { id: 'tasks', entity: s };
+  if (k.startsWith('goal')) return { id: 'goals', entity: s };
+  if (k.startsWith('agent')) return { id: 'agents', entity: s };
+  if (k === 'artifact.new' || k.startsWith('artifact')) return { id: 'artifacts', entity: s };
+  if (k.startsWith('git')) return { id: 'git', entity: s };
+  return null;
+}

package/bizar-dash/src/web/v8/data/useWebSocket.ts

@@ -21,14 +21,25 @@ interface SocketState {
   retries: number;
   retryTimer: ReturnType<typeof setTimeout> | null;
   connectedListeners: Set<(connected: boolean) => void>;
+  /** Last time we received ANY message from the server. Used by the
+   *  client-side heartbeat to detect silently-dropped sockets where the
+   *  close event hasn't fired yet. */
+  lastMessageAt: number;
+  /** Wall-clock ping interval handle. */
+  heartbeatTimer: ReturnType<typeof setInterval> | null;
 }
 
+const HEARTBEAT_INTERVAL_MS = 30_000;
+const HEARTBEAT_TIMEOUT_MS = 60_000;
+
 const state: SocketState = {
   socket: null,
   listeners: new Set(),
   retries: 0,
   retryTimer: null,
   connectedListeners: new Set(),
+  lastMessageAt: 0,
+  heartbeatTimer: null,
 };
 
 function url(): string {
@@ -43,6 +54,34 @@ function notifyConnected(connected: boolean): void {
   }
 }
 
+function startHeartbeat(): void {
+  if (state.heartbeatTimer) return;
+  state.heartbeatTimer = setInterval(() => {
+    const sock = state.socket;
+    if (!sock) return;
+    // If the open socket hasn't seen any traffic in HEARTBEAT_TIMEOUT_MS,
+    // assume it's stuck (corporate proxy in the middle, server SIGSTOP,
+    // etc) and force a reconnect so the topbar indicator + listeners
+    // recover. The close event will not fire on a hung socket.
+    if (sock.readyState === WebSocket.OPEN) {
+      if (Date.now() - state.lastMessageAt > HEARTBEAT_TIMEOUT_MS) {
+        try { sock.close(); } catch { /* */ }
+        return;
+      }
+      // Lightweight app-level ping. The server doesn't have to answer;
+      // any incoming frame (including the WS pong) counts as liveness.
+      try { sock.send('ping'); } catch { /* */ }
+    }
+  }, HEARTBEAT_INTERVAL_MS);
+}
+
+function stopHeartbeat(): void {
+  if (state.heartbeatTimer) {
+    clearInterval(state.heartbeatTimer);
+    state.heartbeatTimer = null;
+  }
+}
+
 function connect(): void {
   if (typeof window === 'undefined') return;
   if (state.socket && (state.socket.readyState === WebSocket.OPEN || state.socket.readyState === WebSocket.CONNECTING)) return;
@@ -56,9 +95,12 @@ function connect(): void {
   state.socket = sock;
   sock.addEventListener('open', () => {
     state.retries = 0;
+    state.lastMessageAt = Date.now();
     notifyConnected(true);
+    startHeartbeat();
   });
   sock.addEventListener('message', (ev) => {
+    state.lastMessageAt = Date.now();
     let msg: WsMessage;
     try { msg = JSON.parse(typeof ev.data === 'string' ? ev.data : ''); }
     catch { return; }
@@ -69,6 +111,7 @@ function connect(): void {
   sock.addEventListener('close', () => {
     state.socket = null;
     notifyConnected(false);
+    stopHeartbeat();
     scheduleReconnect();
   });
   sock.addEventListener('error', () => {
@@ -157,5 +200,7 @@ export function _resetForTests(): void {
     clearTimeout(state.retryTimer);
     state.retryTimer = null;
   }
+  stopHeartbeat();
+  state.lastMessageAt = 0;
   state.retries = 0;
 }

package/bizar-dash/src/web/v8/shell/Sidebar.tsx

@@ -5,16 +5,40 @@ import { Separator } from '../ui/primitives/Separator.js';
 import { ScrollArea } from '../ui/primitives/ScrollArea.js';
 import {
   Activity,
+  Bell,
   Bot,
   CheckSquare,
   ChevronsLeft,
   ChevronsRight,
+  FlaskConical,
+  Folder,
   Goal,
+  History,
   Layers,
   Library,
+  Network,
+  ServerCog,
   Settings as SettingsIcon,
+  Stethoscope,
+  ShieldCheck,
+  Variable,
+  Wrench,
   Target,
   Cpu,
+  Archive,
+  BarChart3,
+  Terminal,
+  MessageSquareText,
+  MessageCircle,
+  MessageSquare,
+  Sparkles,
+  Boxes,
+  ArrowUpCircle,
+  Database,
+  Mic,
+  ClipboardPaste,
+  BookOpen,
+  Search,
   type LucideIcon,
 } from 'lucide-react';
 import { cx } from '../ui/utils/cx.js';
@@ -96,6 +120,9 @@ const DEFAULT_SECTIONS: SidebarSection[] = [
       { id: 'overview', label: 'Overview', icon: Layers },
       { id: 'tasks', label: 'Tasks', icon: CheckSquare, count: 47, active: true },
       { id: 'goals', label: 'Goals', icon: Target, count: 3 },
+      { id: 'chat', label: 'Chat', icon: MessageSquareText, live: true },
+      { id: 'projects-list', label: 'Projects', icon: Folder },
+      { id: 'claude-sessions', label: 'Claude sessions', icon: MessageCircle },
     ],
   },
   {
@@ -119,7 +146,31 @@ const DEFAULT_SECTIONS: SidebarSection[] = [
   {
     id: 'system',
     label: 'System',
-    items: [{ id: 'settings', label: 'Settings', icon: SettingsIcon }],
+    items: [
+      { id: 'history', label: 'History', icon: History },
+      { id: 'admin', label: 'Admin', icon: Wrench },
+      { id: 'auth', label: 'Auth', icon: ShieldCheck },
+      { id: 'env-vars', label: 'Env vars', icon: Variable },
+      { id: 'config', label: 'Config', icon: ServerCog },
+      { id: 'dialogs', label: 'Dialogs', icon: MessageSquare },
+      { id: 'providers', label: 'Providers', icon: Sparkles },
+      { id: 'mods', label: 'Mods', icon: Boxes },
+      { id: 'update', label: 'Update', icon: ArrowUpCircle },
+      { id: 'artifacts', label: 'Artifacts', icon: Layers },
+      { id: 'lightrag', label: 'LightRAG', icon: Database },
+      { id: 'voice', label: 'Voice', icon: Mic },
+      { id: 'clipboard', label: 'Clipboard', icon: ClipboardPaste },
+      { id: 'obsidian', label: 'Obsidian', icon: BookOpen },
+      { id: 'misc', label: 'Misc', icon: Search },
+      { id: 'doctor', label: 'Doctor', icon: Stethoscope },
+      { id: 'usage', label: 'Usage', icon: BarChart3 },
+      { id: 'backup', label: 'Backups', icon: Archive },
+      { id: 'notifications', label: 'Notifications', icon: Bell },
+      { id: 'diagnostics', label: 'Diagnostics', icon: Terminal },
+      { id: 'headroom', label: 'Headroom', icon: Network },
+      { id: 'eval', label: 'Eval', icon: FlaskConical },
+      { id: 'settings', label: 'Settings', icon: SettingsIcon },
+    ],
   },
 ];
 
@@ -290,31 +341,77 @@ function SidebarSectionView({
   onItemSelect?: (id: string) => void;
   isItemActive: (id: string) => boolean;
 }): JSX.Element {
+  // v10.0.6 — per-section collapse, persisted to localStorage. Lets the
+  // System section (23 items) fold away without disappearing entirely.
+  const storageKey = `bizar:sidebar:section:collapsed:${section.id}`;
+  const initial = typeof window !== 'undefined' && window.localStorage.getItem(storageKey) === '1';
+  const [sectionOpen, setSectionOpen] = useState<boolean>(!initial);
+
+  const toggle = (): void => {
+    setSectionOpen((open) => {
+      const next = !open;
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(storageKey, next ? '0' : '1');
+      }
+      return next;
+    });
+  };
+
   return (
-    <Stack gap={1}>
+    <Stack gap={1} data-sidebar-section={section.id}>
       {!collapsed && (
-        <Box
+        <button
+          type="button"
+          onClick={toggle}
+          aria-expanded={sectionOpen}
+          aria-controls={`sidebar-section-${section.id}`}
+          data-testid={`sidebar-section-toggle-${section.id}`}
           style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 'var(--space-2)',
             padding: 'var(--space-1) var(--space-3)',
+            background: 'transparent',
+            border: 0,
             fontSize: 'var(--fs-12)',
             fontWeight: 600,
             color: 'var(--fg-subtle)',
             letterSpacing: 'var(--tracking-wide)',
             textTransform: 'uppercase',
+            cursor: 'pointer',
+            width: '100%',
+            textAlign: 'left',
           }}
         >
-          {section.label}
-        </Box>
+          <span>{section.label}</span>
+          <span
+            aria-hidden="true"
+            data-testid={`sidebar-section-chevron-${section.id}`}
+            style={{
+              display: 'inline-block',
+              transition: 'transform var(--motion-fast) var(--ease-out)',
+              transform: sectionOpen ? 'rotate(90deg)' : 'rotate(0deg)',
+              fontSize: 10,
+            }}
+          >
+            ▸
+          </span>
+        </button>
+      )}
+      {sectionOpen && (
+        <div id={`sidebar-section-${section.id}`} role="group" aria-label={section.label}>
+          {section.items.map((item) => (
+            <SidebarItemView
+              key={item.id}
+              item={item}
+              collapsed={collapsed}
+              active={isItemActive(item.id)}
+              onSelect={onItemSelect}
+            />
+          ))}
+        </div>
       )}
-      {section.items.map((item) => (
-        <SidebarItemView
-          key={item.id}
-          item={item}
-          collapsed={collapsed}
-          active={isItemActive(item.id)}
-          onSelect={onItemSelect}
-        />
-      ))}
     </Stack>
   );
 }

package/bizar-dash/src/web/v8/shell/Topbar.tsx

@@ -1,12 +1,15 @@
-import { type ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
+import { ChevronDown } from 'lucide-react';
 import { Box } from '../ui/primitives/Box.js';
 import { Inline } from '../ui/primitives/Inline.js';
 import { Cluster } from '../ui/primitives/Cluster.js';
 import { Separator } from '../ui/primitives/Separator.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/feedback/Popover.js';
 import { ThemeToggle, DensityToggle } from '../ui/theme/ThemeToggle.js';
 import { useFetch } from '../data/useFetch.js';
 import { useConnectionState } from '../data/useWebSocket.js';
 import { NotificationsPopover } from '../ui/feedback/NotificationsPopover.js';
+import { fetchJson, FetchError } from '../data/fetcher.js';
 
 /**
  * Topbar — the 56px horizontal bar at the top of the v8 shell.
@@ -71,6 +74,24 @@ function BrandPlaceholder(): JSX.Element {
   const activeId = typeof projects.data?.active === 'string' ? projects.data.active : projects.data?.active?.id;
   const active = list.find((p) => p.id === activeId);
   const label = active?.name || activeId || 'workspace';
+  const [open, setOpen] = useState<boolean>(false);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const activate = async (id: string): Promise<void> => {
+    setBusy(id);
+    setError(null);
+    try {
+      await fetchJson(`/api/projects/${encodeURIComponent(id)}/activate`, { method: 'POST' });
+      projects.refetch();
+      setOpen(false);
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+
   return (
     <Inline align="center" gap={2}>
       <Box
@@ -91,13 +112,84 @@ function BrandPlaceholder(): JSX.Element {
       </Box>
       <Box style={{ fontWeight: 600, fontSize: 'var(--fs-14)' }}>Bizar</Box>
       <Separator orientation="vertical" style={{ height: 16 }} />
-      <Box
-        title={activeId ?? undefined}
-        data-testid="topbar-active-project"
-        style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)' }}
-      >
-        {label} ▾
-      </Box>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            aria-label={`Switch project (current: ${label})`}
+            aria-haspopup="menu"
+            aria-expanded={open}
+            data-testid="topbar-project-selector"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 4,
+              padding: '4px 8px',
+              borderRadius: 'var(--radius-sm)',
+              border: '1px solid var(--border)',
+              background: 'var(--surface-1)',
+              color: 'var(--fg)',
+              fontSize: 'var(--fs-13)',
+              cursor: 'pointer',
+            }}
+          >
+            <span data-testid="topbar-active-project" title={activeId ?? undefined}>{label}</span>
+            <ChevronDown size={12} aria-hidden="true" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="start" sideOffset={6}>
+          <Box style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)', marginBottom: 8 }}>
+            Switch project
+          </Box>
+          {list.length === 0 ? (
+            <Box style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>No projects registered</Box>
+          ) : (
+            <ul role="menu" style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
+              {list.map((p) => {
+                const isActive = p.id === activeId;
+                return (
+                  <li key={p.id} role="none">
+                    <button
+                      type="button"
+                      role="menuitem"
+                      disabled={busy !== null}
+                      onClick={() => { void activate(p.id); }}
+                      data-testid={`topbar-project-option-${p.id}`}
+                      aria-current={isActive ? 'true' : undefined}
+                      style={{
+                        display: 'flex',
+                        width: '100%',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 8,
+                        padding: '6px 8px',
+                        background: isActive ? 'var(--surface-2)' : 'transparent',
+                        border: 0,
+                        borderRadius: 'var(--radius-sm)',
+                        color: 'var(--fg)',
+                        cursor: busy !== null ? 'wait' : 'pointer',
+                        fontSize: 'var(--fs-13)',
+                        textAlign: 'left',
+                      }}
+                    >
+                      <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {p.name || p.id}
+                      </span>
+                      {isActive && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--accent)' }}>●</span>}
+                      {!isActive && busy === p.id && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>…</span>}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          {error !== null && (
+            <Box role="alert" data-testid="topbar-project-error" style={{ marginTop: 8, fontSize: 'var(--fs-12)', color: 'var(--danger)' }}>
+              {error}
+            </Box>
+          )}
+        </PopoverContent>
+      </Popover>
     </Inline>
   );
 }