@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -0,0 +1,142 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '../../ui/theme/ThemeProvider.js';
+import { DensityProvider } from '../../ui/theme/DensityProvider.js';
+import { AppCommandPalette } from './AppCommandPalette.js';
+
+/**
+ * AppCommandPalette — the ⌘K palette with three scopes:
+ *   Navigation, Actions, Settings.
+ *
+ * The underlying `cmdk` primitive filters items by typed value; we don't
+ * need to type to exercise selection, but typing "Tasks" narrows the
+ * list to the matching Navigation item.
+ *
+ * The Dialog mounts a portal; @testing-library queries reach into the
+ * portal transparently.
+ */
+
+function PaletteHarness(props: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onNavigate: (id: string) => void;
+}): JSX.Element {
+  return (
+    <ThemeProvider defaultMode="light">
+      <DensityProvider>
+        <AppCommandPalette
+          open={props.open}
+          onOpenChange={props.onOpenChange}
+          onNavigate={props.onNavigate}
+        />
+      </DensityProvider>
+    </ThemeProvider>
+  );
+}
+
+// `cmdk` calls `scrollIntoView` on the highlighted item whenever the user
+// types. jsdom doesn't implement it natively, so we stub a no-op on the
+// prototype before every test. The real implementation behaves no
+// differently for the assertions we make here.
+beforeEach(() => {
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = vi.fn();
+  }
+});
+
+describe('AppCommandPalette', () => {
+  it('renders the three scope headings when open', () => {
+    const onNavigate = vi.fn();
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={() => undefined}
+        onNavigate={onNavigate}
+      />,
+    );
+    // Scope to the dialog portal — the sidebar also renders
+    // "Navigation" as a section heading outside the palette.
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+    const headings = Array.from(dialog.querySelectorAll('[cmdk-group-heading]')).map(
+      (node) => node.textContent,
+    );
+    expect(headings).toEqual(['Navigation', 'Actions', 'Agents', 'Tasks', 'Settings']);
+  });
+
+  it('typing Tasks narrows to the Tasks nav item and Enter calls onNavigate("tasks")', async () => {
+    const onNavigate = vi.fn();
+    const onOpenChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={onOpenChange}
+        onNavigate={onNavigate}
+      />,
+    );
+    await user.type(screen.getByPlaceholderText(/Type a command/i), 'Tasks');
+    await user.keyboard('{Enter}');
+    expect(onNavigate).toHaveBeenCalledWith('tasks');
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('Toggle theme calls onNavigate("__theme")', async () => {
+    const onNavigate = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={() => undefined}
+        onNavigate={onNavigate}
+      />,
+    );
+    await user.type(screen.getByPlaceholderText(/Type a command/i), 'Toggle theme');
+    await user.keyboard('{Enter}');
+    expect(onNavigate).toHaveBeenCalledWith('__theme');
+  });
+
+  it('Selecting a Settings item routes to settings + scrolls to section', async () => {
+    const onNavigate = vi.fn();
+    const onOpenChange = vi.fn();
+    const scrollSpy = vi.fn();
+    const user = userEvent.setup();
+    // Stub scrollIntoView on the prototype so the rAF callback finds it.
+    Element.prototype.scrollIntoView = scrollSpy;
+    // Provide a section element for the palette to find after mount.
+    const section = document.createElement('section');
+    section.id = 'density';
+    document.body.appendChild(section);
+
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={onOpenChange}
+        onNavigate={onNavigate}
+      />,
+    );
+    await user.type(screen.getByPlaceholderText(/Type a command/i), 'Settings · Density');
+    await user.keyboard('{Enter}');
+    // Setting navigation triggers onNavigate('settings') and closes palette.
+    expect(onNavigate).toHaveBeenCalledWith('settings');
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+
+    // Flush the rAF scheduled by handleSelect.
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    expect(scrollSpy).toHaveBeenCalled();
+
+    document.body.removeChild(section);
+  });
+
+  it('renders the ⌘, shortcut hint on the Settings nav item', () => {
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={() => undefined}
+        onNavigate={() => undefined}
+      />,
+    );
+    expect(screen.getByText('⌘,')).toBeInTheDocument();
+  });
+});

package/bizar-dash/src/web/v8/views/CommandPalette/AppCommandPalette.tsx

@@ -0,0 +1,247 @@
+import { useEffect, useState } from 'react';
+import { Dialog, DialogContent } from '../../ui/feedback/Dialog.js';
+import {
+  CommandPalette,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+} from '../../ui/navigation/CommandPalette.js';
+import { Kbd } from '../../ui/data/Kbd.js';
+import { fetchJson } from '../../data/fetcher.js';
+import type { BizarAgent } from '../../data/types.js';
+
+/**
+ * AppCommandPalette — Sprint S10/S13. ⌘K palette wired with the v8
+ * navigation map plus the control plane.
+ *
+ * Scopes per DESIGN.md §9.4 + S13:
+ *   - Navigation  — top-level views
+ *   - Actions     — quick toggles (theme, density)
+ *   - Settings    — drill into a Settings section
+ *   - Agents      — spawn common agent types (calls POST /api/agents)
+ *   - Tasks       — dispatch a new task (calls POST /api/tasks/submit)
+ *   - Projects    — switch active project (calls POST /api/projects/active)
+ *   - System      — reuse theme/density/settings shortcuts
+ */
+
+export interface AppCommandPaletteProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onNavigate: (id: string) => void;
+  onToast?: (msg: { kind: 'success' | 'error'; text: string }) => void;
+}
+
+interface NavItem {
+  id: string;
+  label: string;
+  shortcut?: string;
+}
+
+const NAV: NavItem[] = [
+  { id: 'overview', label: 'Go to Overview' },
+  { id: 'tasks', label: 'Go to Tasks' },
+  { id: 'goals', label: 'Go to Goals' },
+  { id: 'agents', label: 'Go to Agents' },
+  { id: 'activity', label: 'Go to Activity' },
+  { id: 'memory', label: 'Go to Memory' },
+  { id: 'skills', label: 'Go to Skills' },
+  { id: 'mcps', label: 'Go to MCPs' },
+  { id: 'hooks', label: 'Go to Hooks' },
+  { id: 'settings', label: 'Go to Settings', shortcut: '⌘,' },
+];
+
+const ACTIONS: NavItem[] = [
+  { id: '__theme', label: 'Toggle theme' },
+  { id: '__density', label: 'Toggle density' },
+];
+
+const SETTINGS: NavItem[] = [
+  { id: 'section:general', label: 'Settings · General' },
+  { id: 'section:theme', label: 'Settings · Theme' },
+  { id: 'section:density', label: 'Settings · Density' },
+  { id: 'section:density-rules', label: 'Settings · Density rules' },
+  { id: 'section:palette', label: 'Settings · Command palette' },
+  { id: 'section:keyboard', label: 'Settings · Keyboard' },
+  { id: 'section:notifications', label: 'Settings · Notifications' },
+  { id: 'section:storage', label: 'Settings · Storage' },
+  { id: 'section:plugins', label: 'Settings · Plugins' },
+  { id: 'section:mcps', label: 'Settings · MCP servers' },
+  { id: 'section:skills', label: 'Settings · Skills' },
+  { id: 'section:hooks', label: 'Settings · Hooks' },
+  { id: 'section:activity', label: 'Settings · Activity' },
+  { id: 'section:memory', label: 'Settings · Memory' },
+  { id: 'section:privacy', label: 'Settings · Privacy' },
+  { id: 'section:advanced', label: 'Settings · Advanced' },
+];
+
+const SPAWN: NavItem[] = [
+  { id: 'spawn:coder', label: 'Spawn · Coder agent' },
+  { id: 'spawn:researcher', label: 'Spawn · Researcher agent' },
+  { id: 'spawn:planner', label: 'Spawn · Planner agent' },
+  { id: 'spawn:reviewer', label: 'Spawn · Reviewer agent' },
+];
+
+const TASK_OPS: NavItem[] = [
+  { id: 'task:new', label: 'New task…' },
+  { id: 'tasks:open', label: 'Go to tasks board' },
+];
+
+function useSettingsNavigation(
+  onNavigate: (id: string) => void,
+  onOpenChange: (open: boolean) => void,
+): (id: string) => void {
+  return (id: string): void => {
+    if (id.startsWith('section:')) {
+      const sectionId = id.slice('section:'.length);
+      onNavigate('settings');
+      requestAnimationFrame(() => {
+        document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      });
+      onOpenChange(false);
+      return;
+    }
+    onNavigate(id);
+    onOpenChange(false);
+  };
+}
+
+interface Project {
+  id: string;
+  name?: string;
+  cwd?: string;
+}
+
+async function spawnAgent(kind: string, onToast?: AppCommandPaletteProps['onToast']): Promise<void> {
+  try {
+    const res = await fetchJson<{ agent?: BizarAgent; ok?: boolean; error?: string }>(`/api/agents`, {
+      method: 'POST',
+      body: { kind, prompt: 'Spawned via command palette' },
+    });
+    if (res.error) onToast?.({ kind: 'error', text: res.error });
+    else onToast?.({ kind: 'success', text: `Spawned ${kind} agent` });
+  } catch (err) {
+    onToast?.({ kind: 'error', text: err instanceof Error ? err.message : String(err) });
+  }
+}
+
+async function switchProject(id: string, onToast?: AppCommandPaletteProps['onToast']): Promise<void> {
+  try {
+    await fetchJson<{ ok?: boolean }>(`/api/projects/${encodeURIComponent(id)}/activate`, { method: 'POST' });
+    onToast?.({ kind: 'success', text: `Switched to ${id}` });
+  } catch (err) {
+    onToast?.({ kind: 'error', text: err instanceof Error ? err.message : String(err) });
+  }
+}
+
+async function newTask(title: string, onToast?: AppCommandPaletteProps['onToast']): Promise<void> {
+  try {
+    await fetchJson<{ ok?: boolean; task?: { id: string }; error?: string }>(`/api/tasks/submit`, {
+      method: 'POST',
+      body: { title, priority: 'medium' },
+    });
+    onToast?.({ kind: 'success', text: `Dispatched task "${title.slice(0, 30)}"` });
+  } catch (err) {
+    onToast?.({ kind: 'error', text: err instanceof Error ? err.message : String(err) });
+  }
+}
+
+export function AppCommandPalette(props: AppCommandPaletteProps): JSX.Element {
+  const { open, onOpenChange, onNavigate, onToast } = props;
+  const handleSelect = useSettingsNavigation(onNavigate, onOpenChange);
+  const [projects, setProjects] = useState<Project[]>([]);
+
+  useEffect(() => {
+    if (!open) return;
+    let cancel = false;
+    (async () => {
+      try {
+        const res = await fetchJson<{ projects?: Project[] }>(`/api/projects`);
+        if (!cancel && res.projects) setProjects(res.projects);
+      } catch {
+        // ignore — group just won't appear.
+      }
+    })();
+    return () => { cancel = true; };
+  }, [open]);
+
+  const onSpawn = (id: string): void => {
+    const kind = id.slice('spawn:'.length);
+    onOpenChange(false);
+    void spawnAgent(kind, onToast);
+  };
+
+  const onSwitchProject = (id: string): void => {
+    const pid = id.slice('project:'.length);
+    onOpenChange(false);
+    void switchProject(pid, onToast);
+  };
+
+  const onTaskNew = (): void => {
+    const title = window.prompt('New task title') || '';
+    if (!title.trim()) return;
+    onOpenChange(false);
+    void newTask(title, onToast);
+  };
+
+  const projectItems: NavItem[] = projects.map((p) => ({
+    id: `project:${p.id}`,
+    label: `Switch to ${p.name || p.id}`,
+  }));
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent title="Command palette" size="md">
+        <CommandPalette placeholder="Type a command, page, or setting…">
+          <CommandPaletteGroup heading="Navigation">
+            {NAV.map((item) => (
+              <CommandPaletteItem key={item.id} value={item.label} onSelect={() => handleSelect(item.id)}>
+                <span>{item.label}</span>
+                {item.shortcut !== undefined && <Kbd>{item.shortcut}</Kbd>}
+              </CommandPaletteItem>
+            ))}
+          </CommandPaletteGroup>
+          <CommandPaletteGroup heading="Actions">
+            {ACTIONS.map((item) => (
+              <CommandPaletteItem key={item.id} value={item.label} onSelect={() => handleSelect(item.id)}>
+                <span>{item.label}</span>
+              </CommandPaletteItem>
+            ))}
+          </CommandPaletteGroup>
+          <CommandPaletteGroup heading="Agents">
+            {SPAWN.map((item) => (
+              <CommandPaletteItem key={item.id} value={item.label} onSelect={() => onSpawn(item.id)}>
+                <span>{item.label}</span>
+              </CommandPaletteItem>
+            ))}
+          </CommandPaletteGroup>
+          <CommandPaletteGroup heading="Tasks">
+            {TASK_OPS.map((item) => (
+              <CommandPaletteItem
+                key={item.id}
+                value={item.label}
+                onSelect={() => (item.id === 'task:new' ? onTaskNew() : handleSelect('tasks'))}
+              >
+                <span>{item.label}</span>
+              </CommandPaletteItem>
+            ))}
+          </CommandPaletteGroup>
+          {projectItems.length > 0 && (
+            <CommandPaletteGroup heading="Projects">
+              {projectItems.map((item) => (
+                <CommandPaletteItem key={item.id} value={item.label} onSelect={() => onSwitchProject(item.id)}>
+                  <span>{item.label}</span>
+                </CommandPaletteItem>
+              ))}
+            </CommandPaletteGroup>
+          )}
+          <CommandPaletteGroup heading="Settings">
+            {SETTINGS.map((item) => (
+              <CommandPaletteItem key={item.id} value={item.label} onSelect={() => handleSelect(item.id)}>
+                <span>{item.label}</span>
+              </CommandPaletteItem>
+            ))}
+          </CommandPaletteGroup>
+        </CommandPalette>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/bizar-dash/src/web/v8/views/Goals/GoalsView.tsx

@@ -0,0 +1,193 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Plus } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Grid } from '../../ui/primitives/Grid.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { GoalCard, type GoalCardProps, type GoalStatus } from '../../ui/goals/GoalCard.js';
+import { GoalDetail } from '../../ui/goals/GoalDetail.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { Button } from '../../ui/controls/Button.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+import { fetchJson } from '../../data/fetcher.js';
+import type { Goal, WsMessage } from '../../data/types.js';
+
+/**
+ * GoalsView — Sprint S10/S12. Pulls `/api/goals` (parsed PROGRESS.md).
+ * Card click → `GoalDetail` Drawer (editable title / status / due /
+ * owner / KR add/toggle/remove). "+ New goal" button creates a fresh
+ * goal via `POST /api/goals`. Live updates via `goals:change`.
+ */
+
+function goalToCard(g: Goal): GoalCardProps {
+  return {
+    id: g.id,
+    title: g.title,
+    description: g.description || '',
+    status: g.status as GoalStatus,
+    progress: g.progress,
+    due: g.due,
+    ownerName: g.owner,
+    keyResultsDone: g.keyResults.filter((k) => k.done).length,
+    keyResultsTotal: g.keyResults.length,
+  };
+}
+
+export function GoalsView(): JSX.Element {
+  const goals = useFetch<{ goals?: Goal[]; count?: number }>('/api/goals');
+  const [local, setLocal] = useState<Goal[]>([]);
+  const [initialized, setInitialized] = useState(false);
+  const [openGoalId, setOpenGoalId] = useState<string | null>(null);
+  const [creating, setCreating] = useState<boolean>(false);
+  const [decomposing, setDecomposing] = useState<string | null>(null);
+  const [decomposeError, setDecomposeError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (goals.data?.goals && !initialized) {
+      setInitialized(true);
+      setLocal(goals.data.goals);
+    }
+  }, [goals.data, initialized]);
+
+  const onChange = useCallback((msg: WsMessage) => {
+    if (msg.type !== 'goals:change') return;
+    const g = (msg as Extract<WsMessage, { type: 'goals:change' }>).goal;
+    if (!g) return;
+    setLocal((prev) => {
+      const idx = prev.findIndex((x) => x.id === g.id);
+      if (idx === -1) return [...prev, g];
+      const copy = prev.slice();
+      copy[idx] = g;
+      return copy;
+    });
+  }, []);
+  useWsMessage('goals:change', onChange);
+
+  const createGoal = useCallback(async () => {
+    setCreating(true);
+    try {
+      const res = await fetchJson<{ goal?: Goal; id?: string }>('/api/goals', {
+        method: 'POST',
+        body: { title: 'New goal' },
+      });
+      if (res.goal) setLocal((prev) => [...prev, res.goal as Goal]);
+      if (res.id) setOpenGoalId(res.id);
+    } catch {
+      // server will broadcast the canonical state via WS on the next reload
+    } finally {
+      setCreating(false);
+    }
+  }, []);
+
+  const openGoal = openGoalId ? local.find((g) => g.id === openGoalId) ?? null : null;
+
+  const decompose = useCallback(async (goalId: string) => {
+    setDecomposing(goalId);
+    setDecomposeError(null);
+    try {
+      const res = await fetchJson<{ goalId: string; created: { kr: string; task: string }[] }>(
+        `/api/goals/${encodeURIComponent(goalId)}/decompose`,
+        { method: 'POST' },
+      );
+      // Patch local state with the new taskIds so the button reflects
+      // "Decomposed" without waiting for the WS roundtrip.
+      if (Array.isArray(res.created) && res.created.length > 0) {
+        setLocal((prev) => prev.map((g) => {
+          if (g.id !== goalId) return g;
+          const krs = (g.keyResults ?? []).map((kr) => {
+            const link = res.created.find((c) => c.kr === kr.id);
+            return link ? { ...kr, taskId: link.task } : kr;
+          });
+          return { ...g, keyResults: krs };
+        }));
+      }
+    } catch (err) {
+      setDecomposeError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setDecomposing(null);
+    }
+  }, []);
+
+  return (
+    <Stack gap={5}>
+      <ViewHeader
+        title="Goals"
+        description="Long-horizon commitments parsed from .bizar/PROGRESS.md."
+        actions={
+          <Button variant="primary" onClick={() => { void createGoal(); }} disabled={creating}>
+            <Plus size={14} aria-hidden /> New goal
+          </Button>
+        }
+      />
+      {decomposeError !== null && (
+        <div role="alert" style={{ padding: 'var(--space-3)', background: 'color-mix(in oklch, var(--danger) 12%, var(--surface-0))', border: '1px solid var(--danger)', borderRadius: 'var(--radius-md)', fontSize: 'var(--fs-12)' }}>
+          Decompose failed: {decomposeError}
+        </div>
+      )}
+      {goals.loading && local.length === 0 ? (
+        <Stack gap={3}>
+          <Skeleton style={{ height: 160 }} />
+          <Skeleton style={{ height: 160 }} />
+        </Stack>
+      ) : local.length === 0 ? (
+        <Card>
+          <CardBody>
+            <Stack gap={2}>
+              <strong>No goals yet.</strong>
+              <span style={{ color: 'var(--fg-muted)' }}>
+                Create one with the dashboard or via CC's <code>/goal &lt;text&gt;</code>.
+              </span>
+            </Stack>
+          </CardBody>
+        </Card>
+      ) : (
+        <Grid cols={2}>
+          {local.map((g) => {
+            const krCount = g.keyResults?.length ?? 0;
+            const decomposed = (g.keyResults ?? []).every((kr) => Boolean(kr.taskId));
+            return (
+              <div
+                key={g.id}
+                role="button"
+                tabIndex={0}
+                onClick={() => setOpenGoalId(g.id)}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpenGoalId(g.id); } }}
+                style={{ cursor: 'pointer', outline: 'none' }}
+                data-testid={`goal-card-${g.id}`}
+              >
+                <Stack gap={2}>
+                  <GoalCard {...goalToCard(g)} />
+                  {krCount > 0 && (
+                    <Inline align="center" justify="flex-end" gap={2}>
+                      <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                        {decomposed ? 'Decomposed' : `${krCount} key result${krCount === 1 ? '' : 's'} · not yet linked`}
+                      </span>
+                      <Button
+                        variant="secondary"
+                        onClick={(e) => { e.stopPropagation(); void decompose(g.id); }}
+                        disabled={decomposing === g.id}
+                        title={decomposed ? 'Re-create missing task links' : 'Create one task per key result'}
+                      >
+                        <Plus size={12} aria-hidden /> {decomposed ? 'Re-link tasks' : 'Decompose → Tasks'}
+                      </Button>
+                    </Inline>
+                  )}
+                </Stack>
+              </div>
+            );
+          })}
+        </Grid>
+      )}
+
+      {openGoal && (
+        <GoalDetail
+          goal={openGoal}
+          open={openGoalId !== null}
+          onOpenChange={(o) => { if (!o) setOpenGoalId(null); }}
+        />
+      )}
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/Libraries/LibrariesView.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState, useCallback } from 'react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { LibraryGrid, LibraryItem, type LibraryItemProps, type LibraryStatus } from '../../ui/index.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+import type { LibraryItem as LibItem } from '../../data/types.js';
+
+/**
+ * LibrariesView — Sprint S10. Generic Skills / MCPs / Hooks surface.
+ *
+ * The parent (`Router.tsx`) picks the data source per kind. This
+ * view pulls live data from `/api/skills`, `/api/mcps`,
+ * `/api/hooks` instead of seeded arrays.
+ */
+
+export type LibraryKind = 'skills' | 'mcps' | 'hooks';
+
+const KIND_LABEL: Record<LibraryKind, string> = {
+  skills: 'Skills',
+  mcps: 'MCPs',
+  hooks: 'Hooks',
+};
+
+const KIND_DESCRIPTION: Record<LibraryKind, string> = {
+  skills: 'Bizar skill packs. Auto-loaded by name or dispatched via the Skill tool.',
+  mcps: 'MCP server registrations under `.claude/settings.json` → `mcpServers`.',
+  hooks: 'Executable hook scripts (PreToolUse / PostToolUse / SessionStart / SessionEnd).',
+};
+
+const ENDPOINT: Record<LibraryKind, string> = {
+  skills: '/api/skills',
+  mcps: '/api/skills?kind=mcps',
+  hooks: '/api/skills?kind=hooks',
+};
+
+const CHANGE_EVENTS: Record<LibraryKind, readonly string[]> = {
+  skills: ['skills:change', 'agents:change'] as const,
+  mcps: ['mcps:change', 'agents:change'] as const,
+  hooks: ['agents:change', 'agents:change'] as const,
+};
+// Stable hook count: always register listeners for all possible events,
+// filter inside the handler so kind navigation never changes hook order.
+const ALL_EVENTS = ['skills:change', 'mcps:change', 'agents:change'] as const;
+
+function mapItem(it: LibItem): LibraryItemProps {
+  const status: LibraryStatus =
+    it.status === 'enabled' || it.status === 'disabled' || it.status === 'error'
+      ? it.status
+      : 'disabled';
+  return {
+    id: it.id,
+    name: it.name,
+    slug: it.slug ?? it.id,
+    status,
+    description: it.description,
+    meta: it.meta,
+  };
+}
+
+export interface LibrariesViewProps {
+  kind: LibraryKind;
+}
+
+export function LibrariesView(props: LibrariesViewProps): JSX.Element {
+  const { kind } = props;
+  const url = ENDPOINT[kind];
+  const res = useFetch<{ skills?: LibItem[]; items?: LibItem[]; count?: number }>(url);
+  const [bust, setBust] = useState(0);
+
+  // Force a re-fetch when the matching change event fires. Hook count
+  // is fixed (ALL_EVENTS.length) so navigating between kinds can't trip
+  // React's "Rendered fewer hooks than expected" runtime guard.
+  const events = CHANGE_EVENTS[kind];
+  const handler = useCallback((): void => setBust((n) => n + 1), []);
+  for (const evt of ALL_EVENTS) {
+    useWsMessage(evt, events.includes(evt) ? handler : () => {});
+  }
+
+  useEffect(() => {
+    if (bust > 0) res.refetch();
+  }, [bust, res]);
+
+  const items: LibraryItemProps[] = (res.data?.skills || res.data?.items || []).map(mapItem);
+
+  return (
+    <Stack gap={5}>
+      <ViewHeader title={KIND_LABEL[kind]} description={KIND_DESCRIPTION[kind]} />
+      {res.loading ? (
+        <Skeleton style={{ height: 240 }} />
+      ) : items.length === 0 ? (
+        <EmptyState
+          icon={<span>📚</span>}
+          title={`No ${KIND_LABEL[kind].toLowerCase()} installed`}
+          description={`${KIND_LABEL[kind]} appear here as soon as they are registered.`}
+        />
+      ) : (
+        <LibraryGrid>
+          {items.map((item) => (
+            <LibraryItem key={item.id} {...item} />
+          ))}
+        </LibraryGrid>
+      )}
+    </Stack>
+  );
+}