@polderlabs/bizar 8.0.0 → 8.1.0

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="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

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

package/bizar-dash/src/web/v8/views/Memory/MemoryView.tsx

@@ -1,61 +1,77 @@
+import { useMemo, useState } from 'react';
 import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
 import { ViewHeader } from '../../ui/data/ViewHeader.js';
-import { MemoryVault, type MemoryEntry } from '../../ui/memory/MemoryVault.js';
+import { MemoryVault, type MemoryEntry, type MemoryScope } from '../../ui/memory/MemoryVault.js';
 import { EmptyState } from '../../ui/feedback/EmptyState.js';
 import { Brain } from 'lucide-react';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { Chip } from '../../ui/data/Chip.js';
+import { useFetch } from '../../data/useFetch.js';
 
 /**
- * MemoryView — the durable cross-session memos the harness writes down.
+ * MemoryView — Sprint S10. Pulls `/api/memory` (Bizar memory entries).
+ * Click a chip to scope the view (Project / Global / All).
  */
 
-const ENTRIES: MemoryEntry[] = [
-  {
-    id: 'm1',
-    content: 'The dashboard rewrite lives in v8 tree under `bizar-dash/src/web/v8/`. Sprint boundaries: S1..S9 (per PLAN.md).',
-    tags: ['dashboard', 'rewrite', 'sprint'],
-    scope: 'project',
-    updatedAt: 'Just now',
-  },
-  {
-    id: 'm2',
-    content: 'User prefers OKLch tokens, minimal visual flair, and token-driven styling only. No hardcoded hex anywhere in the v8 tree.',
-    tags: ['preferences', 'design'],
-    scope: 'global',
-    updatedAt: '3 days ago',
-  },
-  {
-    id: 'm3',
-    content: 'Pre-existing test failures in `tests/a11y/forms.test.tsx` predate v8 work — do not chase them in this branch.',
-    tags: ['tests', 'a11y'],
-    scope: 'project',
-    updatedAt: '1 week ago',
-  },
-  {
-    id: 'm4',
-    content: 'WIP=1 rule: only one feature active at a time per `feature_list.json`.',
-    tags: ['process'],
-    scope: 'project',
-    updatedAt: '2 weeks ago',
-  },
-];
+interface MemoryResponse {
+  entries?: Array<{
+    id?: string;
+    content?: string;
+    tags?: string[];
+    scope?: 'project' | 'global';
+    updatedAt?: string | number;
+  }>;
+  count?: number;
+}
+
+function toEntry(e: NonNullable<MemoryResponse['entries']>[number]): MemoryEntry {
+  return {
+    id: e.id || '',
+    content: e.content || '',
+    tags: e.tags || [],
+    scope: (e.scope || 'project') as MemoryScope,
+    updatedAt:
+      typeof e.updatedAt === 'number'
+        ? new Date(e.updatedAt).toLocaleString()
+        : e.updatedAt || '',
+  };
+}
 
 export function MemoryView(): JSX.Element {
+  const mem = useFetch<MemoryResponse>('/api/memory');
+  const [scope, setScope] = useState<MemoryScope | 'all'>('all');
+
+  const entries = useMemo<MemoryEntry[]>(() => {
+    const list = (mem.data?.entries || []).map(toEntry);
+    if (scope === 'all') return list;
+    return list.filter((e) => e.scope === scope);
+  }, [mem.data, scope]);
+
   return (
     <Stack gap={5}>
       <ViewHeader
         title="Memory"
         description="Cross-session notes. Project memos live in the repo; global memos live on the user."
       />
-      <MemoryVault
-        entries={ENTRIES}
-        empty={
-          <EmptyState
-            icon={<Brain size={24} aria-hidden="true" />}
-            title="No memos yet"
-            description="Memos appear here as you and the harness accumulate them."
-          />
-        }
-      />
+      <Inline gap={2}>
+        {(['all', 'project', 'global'] as const).map((s) => (
+          <Chip key={s} selected={scope === s} onClick={() => setScope(s)}>
+            {s === 'all' ? 'All' : s === 'project' ? 'Project' : 'Global'}
+          </Chip>
+        ))}
+      </Inline>
+      {mem.loading ? (
+        <Skeleton style={{ height: 240 }} />
+      ) : entries.length === 0 ? (
+        <EmptyState
+          icon={<Brain size={32} aria-hidden />}
+          title="No memory entries"
+          description="Memos land here once they are written via the memory tools."
+        />
+      ) : (
+        <MemoryVault entries={entries} />
+      )}
     </Stack>
   );
 }