@polderlabs/bizar 8.0.0 → 9.0.0

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

@@ -1,61 +1,231 @@
+import { useMemo, useState } from 'react';
+import { Plus } from 'lucide-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 { Button } from '../../ui/controls/Button.js';
+import { Sheet, SheetContent } from '../../ui/feedback/Sheet.js';
+import { Textarea } from '../../ui/controls/Textarea.js';
+import { useFetch } from '../../data/useFetch.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
 
 /**
- * MemoryView — the durable cross-session memos the harness writes down.
+ * MemoryView — Sprint S10 + S15b. Pulls `/api/memory`, lets the user
+ * create / edit / delete notes via the dashboard's control surface.
+ *
+ * Notes are stored via `/api/memory/notes` (POST create, PUT/DELETE
+ * per-note). Scope is `project` (in the repo) vs `global` (user-wide).
  */
 
-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 RawMemoryEntry {
+  id?: string;
+  content?: string;
+  tags?: string[];
+  scope?: 'project' | 'global';
+  updatedAt?: string | number;
+}
+
+interface MemoryResponse {
+  notes?: RawMemoryEntry[];
+  count?: number;
+}
+
+function toEntry(e: RawMemoryEntry): 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 || '',
+  };
+}
+
+interface NoteDraft {
+  id?: string;
+  content: string;
+  scope: MemoryScope;
+}
 
 export function MemoryView(): JSX.Element {
+  const mem = useFetch<MemoryResponse>('/api/memory/notes');
+  const [scope, setScope] = useState<MemoryScope | 'all'>('all');
+  const [draft, setDraft] = useState<NoteDraft | null>(null);
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const entries = useMemo<MemoryEntry[]>(() => {
+    const list = (mem.data?.notes || []).map(toEntry);
+    if (scope === 'all') return list;
+    return list.filter((e) => e.scope === scope);
+  }, [mem.data, scope]);
+
+  const refresh = (): void => { void mem.refetch(); };
+
+  const saveDraft = async (): Promise<void> => {
+    if (!draft || !draft.content.trim()) return;
+    setBusy(true);
+    setError(null);
+    try {
+      if (draft.id) {
+        // Edit
+        await fetchJson(`/api/memory/notes/${encodeURIComponent(draft.id)}`, {
+          method: 'PUT',
+          body: { content: draft.content, scope: draft.scope },
+        });
+      } else {
+        await fetchJson('/api/memory/notes', {
+          method: 'POST',
+          body: { content: draft.content, scope: draft.scope },
+        });
+      }
+      setDraft(null);
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const deleteEntry = async (id: string): Promise<void> => {
+    setBusy(true);
+    setError(null);
+    try {
+      await fetchJson(`/api/memory/notes/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      setDraft(null);
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
   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 align="center" justify="between" gap={2} wrap>
+        <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>
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => setDraft({ content: '', scope: 'project' })}
+          data-testid="memory-new"
+        >
+          <Plus size={14} aria-hidden /> New note
+        </Button>
+      </Inline>
+      {error !== null && (
+        <div
+          role="alert"
+          style={{
+            padding: 'var(--space-2) var(--space-3)',
+            background: 'color-mix(in oklch, var(--danger) 12%, var(--surface-0))',
+            border: '1px solid color-mix(in oklch, var(--danger) 40%, var(--border))',
+            borderRadius: 'var(--radius-md)',
+            fontSize: 'var(--fs-12)',
+            color: 'var(--danger)',
+          }}
+        >
+          {error}
+        </div>
+      )}
+      {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. Add one with the button above."
+          action={
+            <Button variant="primary" size="sm" onClick={() => setDraft({ content: '', scope: 'project' })}>
+              <Plus size={14} aria-hidden /> New note
+            </Button>
+          }
+        />
+      ) : (
+        <MemoryVault
+          entries={entries}
+          onOpen={(e) => setDraft({ id: e.id, content: e.content, scope: e.scope })}
+        />
+      )}
+      <Sheet open={draft !== null} onOpenChange={(o) => { if (!o) setDraft(null); }}>
+        <SheetContent side="right" title={draft?.id ? 'Edit note' : 'New note'}>
+          {draft !== null && (
+            <Stack gap={4} style={{ padding: 'var(--space-4)' }}>
+              <Stack gap={2}>
+                <label
+                  htmlFor="memory-content"
+                  style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}
+                >
+                  Content
+                </label>
+                <Textarea
+                  id="memory-content"
+                  value={draft.content}
+                  onChange={(e) => setDraft({ ...draft, content: e.target.value })}
+                  rows={10}
+                  disabled={busy}
+                  data-testid="memory-content"
+                />
+              </Stack>
+              <Stack gap={2}>
+                <label style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Scope</label>
+                <Inline gap={2}>
+                  {(['project', 'global'] as const).map((s) => (
+                    <Chip
+                      key={s}
+                      selected={draft.scope === s}
+                      onClick={() => setDraft({ ...draft, scope: s })}
+                    >
+                      {s === 'project' ? 'Project (in-repo)' : 'Global (user-wide)'}
+                    </Chip>
+                  ))}
+                </Inline>
+              </Stack>
+              <Inline gap={2}>
+                <Button
+                  variant="primary"
+                  onClick={() => { void saveDraft(); }}
+                  disabled={busy || !draft.content.trim()}
+                >
+                  {draft.id ? 'Save' : 'Create'}
+                </Button>
+                <Button variant="ghost" onClick={() => setDraft(null)} disabled={busy}>
+                  Cancel
+                </Button>
+                {draft.id !== undefined && (
+                  <Button
+                    variant="danger"
+                    onClick={() => { void deleteEntry(draft.id!); }}
+                    disabled={busy}
+                    style={{ marginLeft: 'auto' }}
+                  >
+                    Delete
+                  </Button>
+                )}
+              </Inline>
+            </Stack>
+          )}
+        </SheetContent>
+      </Sheet>
     </Stack>
   );
 }

package/bizar-dash/src/web/v8/views/Overview/OverviewView.tsx

@@ -1,88 +1,148 @@
-import { GitMerge, GitPullRequest, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { useMemo, useState, useCallback } from 'react';
+import {
+  GitMerge,
+  GitPullRequest,
+  AlertTriangle,
+  CheckCircle2,
+  Bot,
+  Wrench,
+  Activity as ActivityIcon,
+  type LucideIcon,
+} from 'lucide-react';
 import { Stack } from '../../ui/primitives/Stack.js';
 import { StatTile, StatGrid } from '../../ui/data/StatTile.js';
 import { Card, CardBody, CardHeader } from '../../ui/data/Card.js';
 import { Badge } from '../../ui/data/Badge.js';
 import { ActivityFeed, type ActivityItem } from '../../ui/activity/ActivityFeed.js';
 import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+import type { ActivityEvent, Snapshot } from '../../data/types.js';
 
 /**
  * OverviewView — the home/dashboard landing page.
+ *
+ * S10 — pulls `/api/snapshot` for the headline counts and `/api/activity`
+ * for the recent feed. Live-tails via `useWsMessage('activity:new', …)`
+ * so a new event lands in the feed without a re-fetch.
  */
 
-const RECENT: ActivityItem[] = [
-  {
-    id: 'o1',
-    icon: <GitMerge size={14} aria-hidden="true" />,
-    title: 'Merged PR #42 — OKLch token system',
-    meta: '2m ago',
-    tone: 'success',
-  },
-  {
-    id: 'o2',
-    icon: <GitPullRequest size={14} aria-hidden="true" />,
-    title: 'Opened PR #43 — Kanban centerpiece',
-    meta: '12m ago',
-    tone: 'info',
-  },
-  {
-    id: 'o3',
-    icon: <CheckCircle2 size={14} aria-hidden="true" />,
-    title: 'Goal "Ship v8 dashboard" advanced to 42%',
-    meta: '34m ago',
-    tone: 'success',
-  },
-  {
-    id: 'o4',
-    icon: <AlertTriangle size={14} aria-hidden="true" />,
-    title: '3 tests failing in tests/a11y/forms.test.tsx',
-    meta: '1h ago',
-    tone: 'warning',
-  },
-];
+const ICON_MAP: Record<string, LucideIcon> = {
+  'git.merge': GitMerge,
+  'git.pull-request': GitPullRequest,
+  'git.merge.pr': GitMerge,
+  'task.completed': CheckCircle2,
+  'task.failed': AlertTriangle,
+  'agent.run': Bot,
+  'agent.tool': Wrench,
+  'agent.message': ActivityIcon,
+};
+
+function iconFor(key: string | undefined): JSX.Element {
+  const Icon = ICON_MAP[key || ''] || ActivityIcon;
+  return <Icon size={14} aria-hidden="true" />;
+}
+
+function eventToItem(e: ActivityEvent, idx: number): ActivityItem {
+  const ts = typeof e.ts === 'number' ? e.ts : Date.now();
+  const meta = e.meta || (ts ? new Date(ts).toLocaleString() : '');
+  return {
+    id: e.id || `${ts}-${idx}`,
+    icon: iconFor(e.iconKey || e.kind),
+    title: e.title || e.description || e.kind || 'event',
+    description: e.description,
+    meta,
+    tone: e.tone,
+  };
+}
 
 export function OverviewView(): JSX.Element {
+  const snapshot = useFetch<Snapshot>('/api/snapshot');
+  const activity = useFetch<{ events?: ActivityEvent[] }>('/api/activity?limit=10');
+
+  // Live-tail new events. Keep them in a small in-memory ring buffer.
+  const [liveEvents, setLiveEvents] = useState<ActivityEvent[]>([]);
+  const onEvent = useCallback((msg: { event?: ActivityEvent } & Record<string, unknown>) => {
+    const ev = msg.event;
+    if (!ev) return;
+    setLiveEvents((prev) => [...prev.slice(-19), ev]);
+  }, []);
+  useWsMessage('activity:new', onEvent);
+
+  const items = useMemo<ActivityItem[]>(() => {
+    const list = [
+      ...liveEvents.slice(-10).reverse(),
+      ...((activity.data?.events || []).slice(0, 10)),
+    ];
+    return list.map(eventToItem);
+  }, [activity.data, liveEvents]);
+
+  const ov = snapshot.data?.overview || {};
+  const tasks = ov.tasks || {};
+  const goals = ov.goals || {};
+  const agents = ov.agents || {};
+  const tokens = ov.tokens || {};
+
   return (
     <Stack gap={5}>
       <ViewHeader
         title="Overview"
         description="What's moving in the harness right now."
-        actions={<Badge tone="success" dot>Live</Badge>}
+        actions={
+          <Badge tone={snapshot.error ? 'danger' : 'success'} dot>
+            {snapshot.loading ? 'Loading' : snapshot.error ? 'Offline' : 'Live'}
+          </Badge>
+        }
       />
 
       <StatGrid cols={4}>
-        <StatTile label="Active tasks" value="47" trend="up" delta="+6 today" />
-        <StatTile label="Goals on track" value="2 / 3" trend="flat" delta="no change" />
-        <StatTile label="Agents running" value="8 / 16" trend="up" delta="+2 since yesterday" />
-        <StatTile label="Tokens (24h)" value="1.4M" trend="down" delta="−12% vs avg" />
+        <StatTile
+          label="Active tasks"
+          value={String((tasks.queued || 0) + (tasks.active || 0))}
+          trend={(tasks.active || 0) > (tasks.queued || 0) ? 'up' : 'flat'}
+          delta={`${tasks.done || 0} done · ${tasks.blocked || 0} blocked`}
+        />
+        <StatTile
+          label="Goals at risk"
+          value={`${goals.atRisk || 0} / ${goals.total || 0}`}
+          trend={(goals.atRisk || 0) > 0 ? 'down' : 'flat'}
+          delta={`${goals.done || 0} done`}
+        />
+        <StatTile
+          label="Agents running"
+          value={`${agents.running || 0} / ${agents.total || 0}`}
+          trend={(agents.running || 0) > 0 ? 'up' : 'flat'}
+          delta={`${agents.idle || 0} idle · ${agents.error || 0} error`}
+        />
+        <StatTile
+          label="Tokens (24h)"
+          value={tokens.last24h ? `${(tokens.last24h / 1_000_000).toFixed(1)}M` : '—'}
+          trend={tokens.trend || 'flat'}
+          delta="last 24h"
+        />
       </StatGrid>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
         <Card>
           <CardHeader title="Recent activity" />
           <CardBody>
-            <ActivityFeed items={RECENT} />
+            <ActivityFeed items={items.length ? items : []} />
           </CardBody>
         </Card>
         <Card>
           <CardHeader title="Needs attention" />
           <CardBody>
             <Stack gap={3}>
-              <StatTile
-                label="At-risk goal"
-                value="Cut S9 polish in half"
-                hint="Owner: sam · Due Aug 1"
-              />
-              <StatTile
-                label="Failing tests"
-                value="3 in tests/a11y/forms.test.tsx"
-                hint="Pre-existing — does not block v8 work."
-              />
-              <StatTile
-                label="Token budget"
-                value="73% of daily limit"
-                hint="Resets at midnight UTC."
-              />
+              {(ov.needsAttention || []).length === 0 && (
+                <StatTile
+                  label="All clear"
+                  value="Nothing needs attention"
+                  hint="The harness is running smoothly."
+                />
+              )}
+              {(ov.needsAttention || []).map((n, i) => (
+                <StatTile key={i} label={n.label} value={n.value} hint={n.hint} />
+              ))}
             </Stack>
           </CardBody>
         </Card>

package/bizar-dash/src/web/v8/views/Router.tsx

@@ -1,46 +1,17 @@
 import { lazy, useMemo } from 'react';
-import type { LibraryItemProps } from '../ui/libraries/LibraryItem.js';
 
 /**
- * Router — flat state-based view switcher.
+ * Router — flat state-based view switcher (Sprint S10).
  *
- * State lives in `App.tsx`. Views are lazy-loaded via `React.lazy` so
- * the initial bundle only ships the shell + providers + the active view
- * on demand. Rollup emits each lazy view as its own chunk.
- *
- * Library views (skills/mcps/hooks) share the same surface; the data
- * lives here so the Library component stays generic.
+ * Library views (skills/mcps/hooks) hit the backend now. The
+ * LibraryItemProps shape used here is the same as the one shipped
+ * pre-S10 — no consumer-side changes required.
  */
 
 export interface RouteContext {
   currentId: string;
 }
 
-const SKILLS: LibraryItemProps[] = [
-  { id: 'frigg', name: 'Frigg', slug: 'frigg', status: 'enabled', description: 'Read-only codebase Q&A. Returns file:line refs.', meta: 'v1.2.0 · used 14× today' },
-  { id: 'mimir', name: 'Mimir', slug: 'mimir', status: 'enabled', description: 'Deep codebase research via Semble search.', meta: 'v0.9.0 · used 6× today' },
-  { id: 'odin', name: 'Odin', slug: 'odin', status: 'enabled', description: 'Pure router that delegates to Thor / Tyr.', meta: 'v2.1.0 · used 22× today' },
-  { id: 'tyr', name: 'Tyr', slug: 'tyr', status: 'enabled', description: 'Top-tier implementation engine.', meta: 'v2.1.0 · used 11× today' },
-  { id: 'thor', name: 'Thor', slug: 'thor', status: 'enabled', description: 'Mid-complexity implementation.', meta: 'v2.1.0 · used 18× today' },
-  { id: 'heimdall', name: 'Heimdall', slug: 'heimdall', status: 'enabled', description: 'Deterministic mechanical edits.', meta: 'v1.4.0 · used 9× today' },
-];
-
-const MCPS: LibraryItemProps[] = [
-  { id: 'semble', name: 'Semble', slug: 'semble', status: 'enabled', description: 'Instant code search across the workspace.', meta: 'v1.0.0 · index 18,432 symbols' },
-  { id: 'codegraph', name: 'CodeGraph', slug: 'codegraph', status: 'enabled', description: 'SQLite knowledge graph with call-path resolution.', meta: 'v0.6.0 · indexed at .codegraph/' },
-  { id: 'bizar-mem', name: 'Bizar memory', slug: 'bizar-mem', status: 'disabled', description: 'Cross-session memo vault.', meta: 'v0.4.0 · disabled' },
-];
-
-const HOOKS: LibraryItemProps[] = [
-  { id: 'pretooluse-check-arch', name: 'PreToolUse:check-arch', slug: 'PreToolUse:check-arch', status: 'enabled', description: 'Refuses cross-layer imports.', meta: 'fires 312× today' },
-  { id: 'posttooluse-test', name: 'PostToolUse:test', slug: 'posttooluse-test', status: 'enabled', description: 'Runs vitest on saved files.', meta: 'fires 88× today' },
-  { id: 'sessionstart-load-proj', name: 'SessionStart:load-project', slug: 'sessionstart-load-proj', status: 'enabled', description: 'Reads `.bizar/PROJECT.md` + memory vault.', meta: 'fires on session start' },
-  { id: 'sessionend-trace', name: 'SessionEnd:trace', slug: 'sessionend-trace', status: 'enabled', description: 'Appends to `.harness/traces/sessions.jsonl`.', meta: 'fires on session end' },
-  { id: 'userpromptsubmit-mem', name: 'UserPromptSubmit:mem', slug: 'userpromptsubmit-mem', status: 'error', description: 'Searches memory vault for prior context.', meta: 'exit 1 — needs token' },
-];
-
-// Each view is a separate Rollup entry once we hit production build.
-// The dev server serves them as-is via the lazy import.
 const OverviewView = lazy(() =>
   import('./Overview/OverviewView.js').then((m) => ({ default: m.OverviewView })),
 );
@@ -65,6 +36,17 @@ const LibrariesView = lazy(() =>
 const SettingsView = lazy(() =>
   import('./Settings/SettingsView.js').then((m) => ({ default: m.SettingsView })),
 );
+const SchedulesView = lazy(() =>
+  import('./Schedules/SchedulesView.js').then((m) => ({ default: m.SchedulesView })),
+);
+const BackgroundJobsView = lazy(() =>
+  import('./BackgroundJobs/BackgroundJobsView.js').then((m) => ({ default: m.BackgroundJobsView })),
+);
+
+// Library surfaces now pull live data inside the view itself.
+// LibraryItemProps is imported so its type stays exported via this
+// barrel; the per-kind view imports the runtime directly.
+export type { LibraryItemProps } from '../ui/libraries/LibraryItem.js';
 
 export function useViewForId(id: string): JSX.Element {
   return useMemo(() => {
@@ -82,15 +64,19 @@ export function useViewForId(id: string): JSX.Element {
       case 'memory':
         return <MemoryView />;
       case 'skills':
-        return <LibrariesView kind="skills" items={SKILLS} />;
+        return <LibrariesView kind="skills" />;
       case 'mcps':
-        return <LibrariesView kind="mcps" items={MCPS} />;
+        return <LibrariesView kind="mcps" />;
       case 'hooks':
-        return <LibrariesView kind="hooks" items={HOOKS} />;
+        return <LibrariesView kind="hooks" />;
       case 'settings':
         return <SettingsView />;
+      case 'schedules':
+        return <SchedulesView />;
+      case 'background':
+        return <BackgroundJobsView />;
       default:
         return <OverviewView />;
     }
   }, [id]);
-}
+}