@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -0,0 +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, 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 — Sprint S10. Pulls `/api/memory` (Bizar memory entries).
+ * Click a chip to scope the view (Project / Global / All).
+ */
+
+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."
+      />
+      <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>
+  );
+}

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

@@ -0,0 +1,152 @@
+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 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={snapshot.error ? 'danger' : 'success'} dot>
+            {snapshot.loading ? 'Loading' : snapshot.error ? 'Offline' : 'Live'}
+          </Badge>
+        }
+      />
+
+      <StatGrid cols={4}>
+        <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={items.length ? items : []} />
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader title="Needs attention" />
+          <CardBody>
+            <Stack gap={3}>
+              {(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>
+      </div>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,72 @@
+import { lazy, useMemo } from 'react';
+
+/**
+ * Router — flat state-based view switcher (Sprint S10).
+ *
+ * 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 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 })),
+);
+
+// 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(() => {
+    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" />;
+      case 'mcps':
+        return <LibrariesView kind="mcps" />;
+      case 'hooks':
+        return <LibrariesView kind="hooks" />;
+      case 'settings':
+        return <SettingsView />;
+      default:
+        return <OverviewView />;
+    }
+  }, [id]);
+}