@polderlabs/bizar 8.0.0 → 9.0.0

package/bizar-dash/src/web/v8/__tests__/control-plane.test.tsx

@@ -0,0 +1,104 @@
+import { describe, expect, it, vi, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ThemeProvider } from '../ui/theme/ThemeProvider.js';
+import { DensityProvider } from '../ui/theme/DensityProvider.js';
+import { AgentDetail } from '../ui/agents/AgentDetail.js';
+import { GoalDetail } from '../ui/goals/GoalDetail.js';
+
+function Providers({ children }: { children: React.ReactNode }): JSX.Element {
+  return (
+    <ThemeProvider>
+      <DensityProvider>{children}</DensityProvider>
+    </ThemeProvider>
+  );
+}
+
+afterEach(() => { vi.restoreAllMocks(); });
+
+describe('AgentDetail (S11 control plane)', () => {
+  const baseProps = {
+    agentId: 'cc:sess-abc-123',
+    name: 'Atlas',
+    role: 'CC background',
+    status: 'busy' as const,
+    open: true,
+    onOpenChange: () => {},
+  };
+
+  it('renders the agent name + role + source badge', () => {
+    render(<Providers><AgentDetail {...baseProps} currentTask="Wiring v8" /></Providers>);
+    expect(screen.getByText('Atlas')).toBeInTheDocument();
+    expect(screen.getByText('CC background')).toBeInTheDocument();
+    expect(screen.getByText('Claude Code')).toBeInTheDocument();
+  });
+
+  it('shows the current task callout when provided', () => {
+    render(<Providers><AgentDetail {...baseProps} currentTask="Wiring v8 plumbing" /></Providers>);
+    expect(screen.getByText(/Wiring v8 plumbing/i)).toBeInTheDocument();
+  });
+
+  it('calls the right endpoint when Send is clicked (CC source)', async () => {
+    const fetchMock = vi.fn(async () => new Response(JSON.stringify({ ok: true, sessionId: 'sess-new' }), { status: 200, headers: { 'content-type': 'application/json' } })) as unknown as typeof fetch;
+    globalThis.fetch = fetchMock;
+    render(<Providers><AgentDetail {...baseProps} /></Providers>);
+    const ta = screen.getByPlaceholderText(/follow-up/i) as HTMLTextAreaElement;
+    fireEvent.change(ta, { target: { value: 'continue from S10' } });
+    fireEvent.click(screen.getByRole('button', { name: /Send/i }));
+    await waitFor(() => {
+      const calls = (fetchMock as unknown as { mock: { calls: unknown[][] } }).mock.calls;
+      const hasSend = calls.some((c) => String(c[0] ?? '').includes('/api/cc-agents/sess-abc-123/send'));
+      expect(hasSend).toBe(true);
+    });
+  });
+
+  it('renders Copy id + Restart buttons alongside Send', () => {
+    render(<Providers><AgentDetail {...baseProps} /></Providers>);
+    expect(screen.getByRole('button', { name: /Send/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Restart/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Copy id/i })).toBeInTheDocument();
+  });
+});
+
+describe('GoalDetail (S12 goal editor)', () => {
+  const goal = {
+    id: 'g1',
+    title: 'Ship v8',
+    status: 'active' as const,
+    progress: 0.5,
+    keyResults: [
+      { id: 'kr1', title: 'Cut S9 polish in half', done: false },
+      { id: 'kr2', title: 'Publish Plan.md with 17 sections', done: true },
+    ],
+    owner: 'sam',
+    due: '2026-09-30',
+  };
+
+  it('renders editable title, status, owner, and due', () => {
+    render(<Providers><GoalDetail goal={goal} open onOpenChange={() => {}} /></Providers>);
+    expect(screen.getByDisplayValue('Ship v8')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('sam')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('2026-09-30')).toBeInTheDocument();
+  });
+
+  it('lists key results with toggle checkboxes', () => {
+    render(<Providers><GoalDetail goal={goal} open onOpenChange={() => {}} /></Providers>);
+    expect(screen.getByText(/Cut S9 polish/i)).toBeInTheDocument();
+    expect(screen.getByText(/Publish Plan.md/i)).toBeInTheDocument();
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('Patches /api/goals/:id when the title field is edited and blurred', async () => {
+    const fetchMock = vi.fn(async () => new Response(JSON.stringify({ ok: true }), { status: 200, headers: { 'content-type': 'application/json' } })) as unknown as typeof fetch;
+    globalThis.fetch = fetchMock;
+    render(<Providers><GoalDetail goal={goal} open onOpenChange={() => {}} /></Providers>);
+    const input = screen.getByDisplayValue('Ship v8') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'Ship v8 dashboard' } });
+    fireEvent.blur(input);
+    await waitFor(() => {
+      const calls = (fetchMock as unknown as { mock: { calls: { toString: () => string }[] } }).mock.calls;
+      expect(calls.length).toBeGreaterThan(0);
+      expect(calls[0].toString()).toContain('/api/goals/g1');
+    });
+  });
+});

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

@@ -86,13 +86,19 @@ describe('hook usage outside provider', () => {
   it('useTheme throws when used without a provider', () => {
     // suppress React's error boundary log
     const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    expect(() => renderHook(() => useTheme())).toThrow(/ThemeProvider/);
-    spy.mockRestore();
+    try {
+      expect(() => renderHook(() => useTheme())).toThrow(/ThemeProvider/);
+    } finally {
+      spy.mockRestore();
+    }
   });
 
   it('useDensity throws when used without a provider', () => {
     const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    expect(() => renderHook(() => useDensity())).toThrow(/DensityProvider/);
-    spy.mockRestore();
+    try {
+      expect(() => renderHook(() => useDensity())).toThrow(/DensityProvider/);
+    } finally {
+      spy.mockRestore();
+    }
   });
 });

package/bizar-dash/src/web/v8/__tests__/useFetch.test.ts

@@ -0,0 +1,92 @@
+/**
+ * v8/__tests__/useFetch.test.ts
+ *
+ * Sprint S10 — Verifies the useFetch + fetcher wiring in jsdom.
+ */
+
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { fetchJson, FetchError } from '../data/fetcher.js';
+import { useFetch } from '../data/useFetch.js';
+
+describe('fetchJson', () => {
+  const originalFetch = global.fetch;
+  beforeEach(() => {
+    global.fetch = vi.fn(async () =>
+      new Response(JSON.stringify({ ok: true }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    ) as unknown as typeof fetch;
+  });
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  it('parses JSON on 200', async () => {
+    const data = await fetchJson<{ ok: boolean }>('/api/test');
+    expect(data.ok).toBe(true);
+  });
+
+  it('throws FetchError on 4xx', async () => {
+    global.fetch = vi.fn(async () =>
+      new Response(JSON.stringify({ error: 'bad_request', message: 'nope' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    ) as unknown as typeof fetch;
+    await expect(fetchJson('/api/test')).rejects.toBeInstanceOf(FetchError);
+  });
+
+  it('aborts via AbortSignal', async () => {
+    let aborted = false;
+    global.fetch = vi.fn(async (_url, init) =>
+      new Promise((_, reject) => {
+        const signal = (init as RequestInit | undefined)?.signal;
+        if (signal) {
+          signal.addEventListener('abort', () => {
+            aborted = true;
+            const err = new Error('aborted');
+            err.name = 'AbortError';
+            reject(err);
+          });
+        }
+      }),
+    ) as unknown as typeof fetch;
+    const ctrl = new AbortController();
+    const p = fetchJson('/api/test', { signal: ctrl.signal });
+    ctrl.abort();
+    await expect(p).rejects.toThrow();
+    expect(aborted).toBe(true);
+  });
+});
+
+describe('useFetch', () => {
+  beforeEach(() => {
+    global.fetch = vi.fn(async () =>
+      new Response(JSON.stringify({ tasks: [] }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    ) as unknown as typeof fetch;
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('returns loading → data', async () => {
+    const { result } = renderHook(() => useFetch<{ tasks: unknown[] }>('/api/tasks'));
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.data?.tasks).toEqual([]);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('surfaces error on failure', async () => {
+    global.fetch = vi.fn(async () =>
+      new Response('boom', { status: 500 }),
+    ) as unknown as typeof fetch;
+    const { result } = renderHook(() => useFetch('/api/test'));
+    await waitFor(() => expect(result.current.error).not.toBeNull());
+    expect(result.current.loading).toBe(false);
+  });
+});

package/bizar-dash/src/web/v8/__tests__/useWebSocket.test.ts

@@ -0,0 +1,87 @@
+/**
+ * v8/__tests__/useWebSocket.test.ts
+ *
+ * Sprint S10 — Verifies the WS subscriber wiring in jsdom.
+ */
+
+import { describe, expect, it, beforeEach, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useWsMessages, useWsMessage, _resetForTests } from '../data/useWebSocket.js';
+
+class FakeSocket {
+  readyState = 0;
+  listeners: Record<string, Array<(ev: unknown) => void>> = {};
+  addEventListener(name: string, cb: (ev: unknown) => void) {
+    (this.listeners[name] ||= []).push(cb);
+  }
+  removeEventListener() { /* no-op */ }
+  fire(name: string, ev: unknown) {
+    for (const cb of this.listeners[name] || []) cb(ev);
+  }
+  close() { this.readyState = 3; this.fire('close', {}); }
+  // unused
+  send() {}
+}
+
+let fakeSocket: FakeSocket | null = null;
+
+beforeEach(() => {
+  _resetForTests();
+  fakeSocket = new FakeSocket();
+  // @ts-expect-error -- substitute a fake WebSocket for the singleton.
+  global.WebSocket = class {
+    constructor() { return fakeSocket!; }
+    static OPEN = 1;
+    static CONNECTING = 0;
+    static CLOSED = 3;
+    readyState = 0;
+    addEventListener = fakeSocket!.addEventListener.bind(fakeSocket!);
+    close = fakeSocket!.close.bind(fakeSocket!);
+  };
+});
+
+describe('useWsMessages', () => {
+  it('subscribes and forwards matching messages', () => {
+    const cb = vi.fn();
+    renderHook(() => useWsMessages(cb));
+    // open then message.
+    fakeSocket!.fire('open', {});
+    fakeSocket!.fire('message', { data: JSON.stringify({ type: 'tasks:change', task: { id: 't1' } }) });
+    expect(cb).toHaveBeenCalledWith(expect.objectContaining({ type: 'tasks:change' }));
+  });
+
+  it('unmount removes the listener', () => {
+    const cb = vi.fn();
+    const { unmount } = renderHook(() => useWsMessages(cb));
+    unmount();
+    fakeSocket!.fire('message', { data: JSON.stringify({ type: 'tasks:change' }) });
+    expect(cb).not.toHaveBeenCalled();
+  });
+});
+
+describe('useWsMessage', () => {
+  it('filters by single type', () => {
+    const cb = vi.fn();
+    renderHook(() => useWsMessage('goals:change', cb));
+    fakeSocket!.fire('message', { data: JSON.stringify({ type: 'tasks:change' }) });
+    fakeSocket!.fire('message', { data: JSON.stringify({ type: 'goals:change', goal: { id: 'g1' } }) });
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenCalledWith(expect.objectContaining({ type: 'goals:change' }));
+  });
+
+  it('filters by multiple types', () => {
+    const cb = vi.fn();
+    renderHook(() => useWsMessage(['tasks:change', 'goals:change'], cb));
+    fakeSocket!.fire('message', { data: JSON.stringify({ type: 'activity:new' }) });
+    fakeSocket!.fire('message', { data: JSON.stringify({ type: 'tasks:change' }) });
+    fakeSocket!.fire('message', { data: JSON.stringify({ type: 'goals:change' }) });
+    expect(cb).toHaveBeenCalledTimes(2);
+  });
+
+  it('ignores malformed JSON', () => {
+    const cb = vi.fn();
+    renderHook(() => useWsMessages(cb));
+    fakeSocket!.fire('message', { data: 'not-json{' });
+    expect(cb).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { describe, expect, it, beforeEach, vi, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
 import { ThemeProvider } from '../ui/theme/ThemeProvider.js';
 import { DensityProvider } from '../ui/theme/DensityProvider.js';
 import { OverviewView } from '../views/Overview/OverviewView.js';
@@ -11,6 +11,13 @@ import { MemoryView } from '../views/Memory/MemoryView.js';
 import { LibrariesView } from '../views/Libraries/LibrariesView.js';
 import { SettingsView } from '../views/Settings/SettingsView.js';
 
+/**
+ * Views test (S10) — every view pulls live data from the backend now.
+ * We mock `fetch` so jsdom doesn't try to hit a real server. Each test
+ * asserts: (1) the view renders its title/header, (2) the rendered
+ * surface reflects whatever the mocked endpoint returned.
+ */
+
 function Providers({ children }: { children: React.ReactNode }): JSX.Element {
   return (
     <ThemeProvider>
@@ -19,82 +26,151 @@ function Providers({ children }: { children: React.ReactNode }): JSX.Element {
   );
 }
 
+interface MockRoute {
+  url: string;
+  body: unknown;
+}
+
+let routes: MockRoute[] = [];
+const originalFetch = globalThis.fetch;
+
+function mockFetch(routesIn: MockRoute[]): void {
+  routes = routesIn;
+  globalThis.fetch = vi.fn(async (input: RequestInfo | URL) => {
+    const url = typeof input === 'string' ? input : input.toString();
+    const match = routes.find((r) => url.startsWith(r.url));
+    if (!match) {
+      return new Response(JSON.stringify({ error: 'not-mocked', url }), { status: 404 });
+    }
+    return new Response(JSON.stringify(match.body), {
+      status: 200,
+      headers: { 'content-type': 'application/json' },
+    });
+  }) as typeof fetch;
+}
+
+beforeEach(() => {
+  // Reasonable default — most tests only care about one endpoint.
+  mockFetch([]);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  // Restore the real fetch (mockFetch overwrites globalThis.fetch and
+  // vi.restoreAllMocks doesn't undo that since it isn't a spy). Without
+  // this, a previous test's mock bleeds into the next one and triggers
+  // 404 responses for any endpoint not on its route table.
+  globalThis.fetch = originalFetch;
+});
+
 describe('OverviewView', () => {
-  it('renders stat tiles, recent activity, and needs-attention cards', () => {
+  it('renders the four stat tiles plus activity + needs-attention cards', async () => {
+    mockFetch([
+      { url: '/api/snapshot', body: { overview: { tasks: { active: 2, queued: 1, done: 0, blocked: 0 }, goals: { atRisk: 1, total: 3, done: 1 }, agents: { running: 2, total: 4, idle: 1, error: 0 }, tokens: { last24h: 1_500_000 }, needsAttention: [{ label: 'CI', value: 'failed' }] } } },
+      { url: '/api/activity', body: { events: [] } },
+    ]);
     render(<Providers><OverviewView /></Providers>);
-    expect(screen.getByRole('heading', { level: 1, name: /overview/i })).toBeInTheDocument();
-    expect(screen.getByText(/Active tasks/i)).toBeInTheDocument();
-    expect(screen.getByText(/Goals on track/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/Active tasks/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/Goals at risk/i)).toBeInTheDocument();
+    expect(screen.getByText(/Agents running/i)).toBeInTheDocument();
+    expect(screen.getByText(/Tokens \(24h\)/i)).toBeInTheDocument();
     expect(screen.getByText(/Recent activity/i)).toBeInTheDocument();
     expect(screen.getByText(/Needs attention/i)).toBeInTheDocument();
   });
 });
 
 describe('TasksView', () => {
-  it('renders the kanban columns with sample cards', () => {
+  it('renders kanban column titles for a non-empty task list', async () => {
+    mockFetch([
+      { url: '/api/tasks', body: { tasks: [{ id: 't1', title: 'Ship v8 dashboard', status: 'doing', priority: 'high' }] } },
+    ]);
     render(<Providers><TasksView /></Providers>);
-    expect(screen.getByRole('heading', { level: 1, name: /tasks/i })).toBeInTheDocument();
-    expect(screen.getByText(/Backlog/i)).toBeInTheDocument();
-    expect(screen.getByText(/To do/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/Backlog/i)).toBeInTheDocument();
+    });
     expect(screen.getByText(/In progress/i)).toBeInTheDocument();
-    expect(screen.getByText(/Wire TanStack Router in v8 App/i)).toBeInTheDocument();
+    expect(screen.getByText(/In review/i)).toBeInTheDocument();
+    expect(screen.getByText(/Done/i)).toBeInTheDocument();
+    expect(screen.getByText(/Archived/i)).toBeInTheDocument();
+    expect(screen.getByText(/Ship v8 dashboard/i)).toBeInTheDocument();
   });
 });
 
 describe('GoalsView', () => {
-  it('renders goals and key results', () => {
+  it('renders goal titles pulled from /api/goals', async () => {
+    mockFetch([
+      { url: '/api/goals', body: { goals: [
+        { id: 'g1', title: 'Ship v8 dashboard', status: 'active', progress: 0.5, keyResults: [{ id: 'kr1', title: 'Cut S9 polish in half', done: false }] },
+        { id: 'g2', title: 'Adopt OKLch tokens', status: 'on-track', progress: 0.8, keyResults: [] },
+      ] } },
+    ]);
     render(<Providers><GoalsView /></Providers>);
-    expect(screen.getByRole('heading', { level: 1, name: /goals/i })).toBeInTheDocument();
-    expect(screen.getByText(/Ship v8 dashboard/i)).toBeInTheDocument();
-    expect(screen.getByText(/Cut S9 polish in half/i)).toBeInTheDocument();
-    expect(screen.getByText(/Key results — current focus/i)).toBeInTheDocument();
-    expect(screen.getByText(/Publish Plan.md with 17 sections/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/Ship v8 dashboard/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/Adopt OKLch tokens/i)).toBeInTheDocument();
   });
 });
 
 describe('AgentsView', () => {
-  it('renders the agent roster and a featured activity feed', () => {
+  it('renders Bizar + CC agents with the source filter chip', async () => {
+    mockFetch([
+      { url: '/api/agents', body: { agents: [{ name: 'atlas', role: 'coder', status: 'busy' }] } },
+      { url: '/api/cc-agents', body: { agents: [{ id: 's1', sessionId: 's1', name: 'CC worker', kind: 'background', status: 'idle' }] } },
+    ]);
     render(<Providers><AgentsView /></Providers>);
-    expect(screen.getByRole('heading', { level: 1, name: /agents/i })).toBeInTheDocument();
-    expect(screen.getByText(/Lead researcher/i)).toBeInTheDocument();
-    expect(screen.getByText(/Frontend specialist/i)).toBeInTheDocument();
-    expect(screen.getByText(/Activity — Atlas/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('atlas')).toBeInTheDocument();
+    });
+    expect(screen.getByText('CC worker')).toBeInTheDocument();
+    expect(screen.getByText(/^All$/)).toBeInTheDocument();
+    expect(screen.getByText(/^Bizar$/)).toBeInTheDocument();
+    expect(screen.getByText(/^Claude Code$/)).toBeInTheDocument();
   });
 });
 
 describe('ActivityView', () => {
-  it('renders the full event history', () => {
+  it('renders the heading even when no events', async () => {
+    mockFetch([{ url: '/api/activity', body: { events: [] } }]);
     render(<Providers><ActivityView /></Providers>);
-    expect(screen.getByRole('heading', { level: 1, name: /activity/i })).toBeInTheDocument();
-    expect(screen.getByText(/Merged PR #42 — OKLch token system/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { level: 1, name: /activity/i })).toBeInTheDocument();
+    });
   });
 });
 
 describe('MemoryView', () => {
-  it('renders memos with project and global scopes', () => {
+  it('renders scope filter chips and an empty state when no entries', async () => {
+    mockFetch([{ url: '/api/memory', body: { entries: [] } }]);
     render(<Providers><MemoryView /></Providers>);
-    expect(screen.getByRole('heading', { level: 1, name: /memory/i })).toBeInTheDocument();
-    expect(screen.getAllByText(/^Project$/i).length).toBeGreaterThan(0);
-    expect(screen.getAllByText(/^Global$/i).length).toBeGreaterThan(0);
+    await waitFor(() => {
+      expect(screen.getByText(/^All$/)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/^Project$/)).toBeInTheDocument();
+    expect(screen.getByText(/^Global$/)).toBeInTheDocument();
   });
 });
 
 describe('LibrariesView (Skills)', () => {
-  const items = [
-    { id: 'frigg', name: 'Frigg', slug: 'frigg', status: 'enabled' as const, description: 'Read-only codebase Q&A.' },
-    { id: 'mimir', name: 'Mimir', slug: 'mimir', status: 'enabled' as const, description: 'Deep codebase research.' },
-  ];
-
-  it('renders the title and library items', () => {
-    const { container } = render(<Providers><LibrariesView kind="skills" items={items} /></Providers>);
-    expect(screen.getByRole('heading', { level: 1, name: /skills/i })).toBeInTheDocument();
-    expect(container.textContent).toContain('Frigg');
+  it('renders items fetched from /api/skills', async () => {
+    mockFetch([
+      { url: '/api/skills', body: { skills: [
+        { id: 'frigg', name: 'Frigg', slug: 'frigg', status: 'enabled', description: 'Read-only codebase Q&A.' },
+        { id: 'mimir', name: 'Mimir', slug: 'mimir', status: 'enabled', description: 'Deep codebase research.' },
+      ] } },
+    ]);
+    const { container } = render(<Providers><LibrariesView kind="skills" /></Providers>);
+    await waitFor(() => {
+      expect(container.textContent).toContain('Frigg');
+    });
     expect(container.textContent).toContain('Read-only codebase Q&A.');
   });
 });
 
 describe('SettingsView', () => {
-  it('renders the 16 settings sections', () => {
+  it('renders the 16 settings sections and shows the active nav', () => {
     render(<Providers><SettingsView /></Providers>);
     expect(screen.getByRole('heading', { level: 2, name: /^General$/i })).toBeInTheDocument();
     expect(screen.getByRole('heading', { level: 2, name: /^Theme$/i })).toBeInTheDocument();
@@ -103,7 +179,7 @@ describe('SettingsView', () => {
     expect(screen.getByRole('heading', { level: 2, name: /^Advanced$/i })).toBeInTheDocument();
   });
 
-  it('shows the settings nav with the active section', () => {
+  it('marks the General nav entry as the active section', () => {
     render(<Providers><SettingsView /></Providers>);
     const navButtons = screen.getAllByRole('button');
     const generalBtn = navButtons.find((b) => b.textContent === 'General');

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

@@ -0,0 +1,59 @@
+/**
+ * v8/data/fetcher.ts — tiny fetch wrapper for the v8 dashboard.
+ *
+ * Thin layer over `fetch` with AbortController support. The dashboard
+ * sits behind the same origin as the API (vite dev proxies /api → :PORT,
+ * prod serves from the same host), so the URL is always relative.
+ *
+ * `useFetch` is React-side; `fetchJson` is the vanilla helper that the
+ * hook uses. Both go through here so we have one place to add
+ * auth headers, retry, etc.
+ */
+
+export class FetchError extends Error {
+  status: number;
+  body: unknown;
+  constructor(status: number, message: string, body: unknown) {
+    super(message);
+    this.name = 'FetchError';
+    this.status = status;
+    this.body = body;
+  }
+}
+
+export interface FetchJsonOptions {
+  signal?: AbortSignal;
+  method?: 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE';
+  body?: unknown;
+  headers?: Record<string, string>;
+  /** Override the base URL. Default = '' (same-origin). */
+  base?: string;
+}
+
+export async function fetchJson<T>(url: string, opts: FetchJsonOptions = {}): Promise<T> {
+  const init: RequestInit = {
+    method: opts.method || 'GET',
+    headers: {
+      Accept: 'application/json',
+      ...(opts.body ? { 'Content-Type': 'application/json' } : {}),
+      ...(opts.headers || {}),
+    },
+    signal: opts.signal,
+  };
+  if (opts.body !== undefined) init.body = JSON.stringify(opts.body);
+  const fullUrl = (opts.base || '') + url;
+  const res = await fetch(fullUrl, init);
+  const text = await res.text();
+  let parsed: unknown = null;
+  if (text) {
+    try { parsed = JSON.parse(text); } catch { parsed = text; }
+  }
+  if (!res.ok) {
+    const message =
+      (parsed && typeof parsed === 'object' && 'message' in parsed && typeof (parsed as { message: unknown }).message === 'string')
+        ? (parsed as { message: string }).message
+        : `HTTP ${res.status}`;
+    throw new FetchError(res.status, message, parsed);
+  }
+  return parsed as T;
+}