@polderlabs/bizar 7.0.4 → 8.0.0

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

@@ -0,0 +1,144 @@
+import { Dialog, DialogContent } from '../../ui/feedback/Dialog.js';
+import {
+  CommandPalette,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+} from '../../ui/navigation/CommandPalette.js';
+import { Kbd } from '../../ui/data/Kbd.js';
+
+/**
+ * AppCommandPalette — the ⌘K palette wired with the v8 navigation map.
+ *
+ * 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`.
+ */
+
+export interface AppCommandPaletteProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onNavigate: (id: 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' },
+];
+
+/**
+ * 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).
+ */
+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);
+      // 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' });
+      });
+      onOpenChange(false);
+      return;
+    }
+    onNavigate(id);
+    onOpenChange(false);
+  };
+}
+
+export function AppCommandPalette(props: AppCommandPaletteProps): JSX.Element {
+  const { open, onOpenChange, onNavigate } = props;
+  const handleSelect = useSettingsNavigation(onNavigate, onOpenChange);
+
+  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="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,84 @@
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Grid } from '../../ui/primitives/Grid.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';
+
+/**
+ * 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.
+ */
+
+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' },
+];
+
+export function GoalsView(): JSX.Element {
+  return (
+    <Stack gap={5}>
+      <ViewHeader
+        title="Goals"
+        description="Long-horizon commitments. Each goal lists the measurable key results that signal done."
+      />
+      <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>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { Stack } from '../../ui/primitives/Stack.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { LibraryGrid, LibraryItem, type LibraryItemProps } from '../../ui/index.js';
+
+/**
+ * LibrariesView — generic view that any one of Skills / MCPs / Hooks
+ * uses. Pass the kind + items list; the surface is identical.
+ */
+
+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/mcp.json`.',
+  hooks: 'Executable hook scripts (PreToolUse / PostToolUse / SessionStart / SessionEnd).',
+};
+
+export interface LibrariesViewProps {
+  kind: LibraryKind;
+  items: readonly LibraryItemProps[];
+}
+
+export function LibrariesView(props: LibrariesViewProps): JSX.Element {
+  const { kind, items } = props;
+  return (
+    <Stack gap={5}>
+      <ViewHeader title={KIND_LABEL[kind]} description={KIND_DESCRIPTION[kind]} />
+      <LibraryGrid>
+        {items.map((item) => (
+          <LibraryItem key={item.id} {...item} />
+        ))}
+      </LibraryGrid>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { Stack } from '../../ui/primitives/Stack.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { MemoryVault, type MemoryEntry } from '../../ui/memory/MemoryVault.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { Brain } from 'lucide-react';
+
+/**
+ * MemoryView — the durable cross-session memos the harness writes down.
+ */
+
+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',
+  },
+];
+
+export function MemoryView(): JSX.Element {
+  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."
+          />
+        }
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,92 @@
+import { GitMerge, GitPullRequest, AlertTriangle, CheckCircle2 } 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';
+
+/**
+ * OverviewView — the home/dashboard landing page.
+ */
+
+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',
+  },
+];
+
+export function OverviewView(): JSX.Element {
+  return (
+    <Stack gap={5}>
+      <ViewHeader
+        title="Overview"
+        description="What's moving in the harness right now."
+        actions={<Badge tone="success" dot>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" />
+      </StatGrid>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
+        <Card>
+          <CardHeader title="Recent activity" />
+          <CardBody>
+            <ActivityFeed items={RECENT} />
+          </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."
+              />
+            </Stack>
+          </CardBody>
+        </Card>
+      </div>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,96 @@
+import { lazy, useMemo } from 'react';
+import type { LibraryItemProps } from '../ui/libraries/LibraryItem.js';
+
+/**
+ * Router — flat state-based view switcher.
+ *
+ * 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.
+ */
+
+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 })),
+);
+const TasksView = lazy(() =>
+  import('./Tasks/TasksView.js').then((m) => ({ default: m.TasksView })),
+);
+const GoalsView = lazy(() =>
+  import('./Goals/GoalsView.js').then((m) => ({ default: m.GoalsView })),
+);
+const AgentsView = lazy(() =>
+  import('./Agents/AgentsView.js').then((m) => ({ default: m.AgentsView })),
+);
+const ActivityView = lazy(() =>
+  import('./Activity/ActivityView.js').then((m) => ({ default: m.ActivityView })),
+);
+const MemoryView = lazy(() =>
+  import('./Memory/MemoryView.js').then((m) => ({ default: m.MemoryView })),
+);
+const LibrariesView = lazy(() =>
+  import('./Libraries/LibrariesView.js').then((m) => ({ default: m.LibrariesView })),
+);
+const SettingsView = lazy(() =>
+  import('./Settings/SettingsView.js').then((m) => ({ default: m.SettingsView })),
+);
+
+export function useViewForId(id: string): JSX.Element {
+  return useMemo(() => {
+    switch (id) {
+      case 'overview':
+        return <OverviewView />;
+      case 'tasks':
+        return <TasksView />;
+      case 'goals':
+        return <GoalsView />;
+      case 'agents':
+        return <AgentsView />;
+      case 'activity':
+        return <ActivityView />;
+      case 'memory':
+        return <MemoryView />;
+      case 'skills':
+        return <LibrariesView kind="skills" items={SKILLS} />;
+      case 'mcps':
+        return <LibrariesView kind="mcps" items={MCPS} />;
+      case 'hooks':
+        return <LibrariesView kind="hooks" items={HOOKS} />;
+      case 'settings':
+        return <SettingsView />;
+      default:
+        return <OverviewView />;
+    }
+  }, [id]);
+}