@polderlabs/bizar 8.0.0 → 9.0.0

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

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Dialog, DialogContent } from '../../ui/feedback/Dialog.js';
 import {
   CommandPalette,
@@ -5,25 +6,28 @@ import {
   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 — the ⌘K palette wired with the v8 navigation map.
+ * AppCommandPalette — Sprint S10/S13. ⌘K palette wired with the v8
+ * navigation map plus the control plane.
  *
- * Three scopes per DESIGN.md §9.4:
- *   - Navigation — top-level views
- *   - Actions    — quick toggles (theme, density)
- *   - Settings   — drill into a specific Settings section
- *
- * Each item's `onSelect` calls `onNavigate(id)` and closes the palette.
- * Settings items use a synthetic `section:{sectionId}` id parsed by
- * `useSettingsNavigation` to switch to the Settings view and scroll the
- * requested section into view via `requestAnimationFrame`.
+ * 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 {
@@ -69,11 +73,18 @@ const SETTINGS: NavItem[] = [
   { id: 'section:advanced', label: 'Settings · Advanced' },
 ];
 
-/**
- * Internal hook that recognises `section:{id}` palette items and
- * navigates to Settings + scrolls-to-section. Mounted inside the
- * component so the hook tracks palette lifecycle (no SSR concerns).
- */
+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,
@@ -81,9 +92,7 @@ function useSettingsNavigation(
   return (id: string): void => {
     if (id.startsWith('section:')) {
       const sectionId = id.slice('section:'.length);
-      // Switch to the settings view, then scroll to the section.
       onNavigate('settings');
-      // Wait a frame for the view to mount before scrolling.
       requestAnimationFrame(() => {
         document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
       });
@@ -95,9 +104,103 @@ function useSettingsNavigation(
   };
 }
 
+interface Project {
+  id: string;
+  name?: string;
+  cwd?: string;
+}
+
+async function spawnAgent(
+  kind: string,
+  onToast?: AppCommandPaletteProps['onToast'],
+  cwd?: string,
+): Promise<void> {
+  try {
+    // /api/spawn/agent spawns a Claude Code background agent via
+    // claude-runner.mjs. Falls back to /api/agents for legacy kinds.
+    const isCC = ['coder', 'researcher', 'planner', 'reviewer'].includes(kind);
+    const url = isCC ? '/api/spawn/agent' : '/api/agents';
+    const ccBody = { agent: kind, prompt: 'Spawned via command palette', worktree: cwd };
+    const legacyBody = { kind, prompt: 'Spawned via command palette' };
+    const res = await fetchJson<{ ok?: boolean; processId?: string; error?: string; message?: string }>(url, {
+      method: 'POST',
+      body: isCC ? ccBody : legacyBody,
+    });
+    if (res.error || (res.message && !res.ok)) {
+      onToast?.({ kind: 'error', text: res.error || res.message || 'spawn failed' });
+    } 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 } = props;
+  const { open, onOpenChange, onNavigate, onToast } = props;
   const handleSelect = useSettingsNavigation(onNavigate, onOpenChange);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [activeProjectCwd, setActiveProjectCwd] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!open) return;
+    let cancel = false;
+    (async () => {
+      try {
+        const res = await fetchJson<{ projects?: Project[]; active?: { id: string; cwd?: string } }>(`/api/projects`);
+        if (!cancel && res.projects) setProjects(res.projects);
+        if (!cancel && res.active?.cwd) setActiveProjectCwd(res.active.cwd);
+      } 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, activeProjectCwd);
+  };
+
+  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}>
@@ -105,11 +208,7 @@ export function AppCommandPalette(props: AppCommandPaletteProps): JSX.Element {
         <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)}
-              >
+              <CommandPaletteItem key={item.id} value={item.label} onSelect={() => handleSelect(item.id)}>
                 <span>{item.label}</span>
                 {item.shortcut !== undefined && <Kbd>{item.shortcut}</Kbd>}
               </CommandPaletteItem>
@@ -117,22 +216,41 @@ export function AppCommandPalette(props: AppCommandPaletteProps): JSX.Element {
           </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={() => handleSelect(item.id)}
+                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)}
-              >
+              <CommandPaletteItem key={item.id} value={item.label} onSelect={() => handleSelect(item.id)}>
                 <span>{item.label}</span>
               </CommandPaletteItem>
             ))}
@@ -141,4 +259,4 @@ export function AppCommandPalette(props: AppCommandPaletteProps): JSX.Element {
       </DialogContent>
     </Dialog>
   );
-}
+}

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

@@ -1,84 +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 } from '../../ui/goals/GoalCard.js';
-import { KeyResult, type KeyResultProps } from '../../ui/goals/KeyResult.js';
-import { Card, CardBody, CardHeader } from '../../ui/data/Card.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 — long-horizon commitments (PLAN.md "Goals page").
- *
- * Goals are intentional commitments tracked over weeks/months. They are
- * NOT kanban cards. Each goal surfaces key results inline so the user
- * can see "what does done look like" at a glance.
+ * 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`.
  */
 
-const GOALS: GoalCardProps[] = [
-  {
-    id: 'g1',
-    title: 'Ship v8 dashboard',
-    description: 'Replace the v7 dashboard with a fully-token-driven component library.',
-    status: 'on-track',
-    progress: 0.62,
-    due: 'Q3 2026',
-    ownerName: 'alex',
-    keyResultsDone: 5,
-    keyResultsTotal: 8,
-  },
-  {
-    id: 'g2',
-    title: 'Cut S9 polish in half',
-    description: 'Reduce polish + views-wiring sprint from 10 days to 5.',
-    status: 'at-risk',
-    progress: 0.3,
-    due: 'Aug 1',
-    ownerName: 'sam',
-    keyResultsDone: 1,
-    keyResultsTotal: 4,
-  },
-  {
-    id: 'g3',
-    title: 'Make every page keyboard-navigable',
-    description: 'A11y pass across Tasks, Goals, Agents, Memory, Settings.',
-    status: 'done',
-    progress: 1,
-    due: 'Q2 2026',
-    ownerName: 'jordan',
-    keyResultsDone: 6,
-    keyResultsTotal: 6,
-  },
-];
-
-const KEY_RESULTS: KeyResultProps[] = [
-  { id: 'k1', title: 'Publish Plan.md with 17 sections', status: 'done', progress: 1, metric: '17 / 17' },
-  { id: 'k2', title: 'Ship Sprint S1 (Foundation)', status: 'done', progress: 1, metric: 'sprint S1' },
-  { id: 'k3', title: 'Ship Sprint S5 (Kanban centerpiece)', status: 'done', progress: 1, metric: 'sprint S5' },
-  { id: 'k4', title: 'Wire app-level CommandPalette', status: 'in-progress', progress: 0.5, metric: '1 / 2 hooks', assignee: 'alex' },
-  { id: 'k5', title: 'Ship Sprint S9 (Polish + views)', status: 'not-started', progress: 0, assignee: 'sam' },
-];
+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. Each goal lists the measurable key results that signal done."
+        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>
+        }
       />
-      <Grid cols={2}>
-        {GOALS.map((goal) => (
-          <GoalCard key={goal.id} {...goal} />
-        ))}
-      </Grid>
-      <Card>
-        <CardHeader title="Key results — current focus" />
-        <CardBody>
-          <Stack gap={2}>
-            {KEY_RESULTS.map((kr) => (
-              <KeyResult key={kr.id} {...kr} />
-            ))}
-          </Stack>
-        </CardBody>
-      </Card>
+      {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="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

@@ -1,10 +1,19 @@
+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 } from '../../ui/index.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 — generic view that any one of Skills / MCPs / Hooks
- * uses. Pass the kind + items list; the surface is identical.
+ * 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';
@@ -17,25 +26,83 @@ const KIND_LABEL: Record<LibraryKind, string> = {
 
 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/mcp.json`.',
+  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;
-  items: readonly LibraryItemProps[];
 }
 
 export function LibrariesView(props: LibrariesViewProps): JSX.Element {
-  const { kind, items } = props;
+  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]} />
-      <LibraryGrid>
-        {items.map((item) => (
-          <LibraryItem key={item.id} {...item} />
-        ))}
-      </LibraryGrid>
+      {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>
   );
 }