@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/views/Admin/AdminView.tsx

@@ -0,0 +1,210 @@
+/**
+ * v8/views/Admin/AdminView.tsx — Sprint S40, v9.3.0.
+ *
+ * Card grid of admin / maintenance actions. Each tile posts to its
+ * /api/admin/* endpoint, shows a spinner while busy, surfaces the
+ * result inline (or the error message), and uses the inline-confirm
+ * pattern for destructive actions (cache clear, log purge, restart,
+ * rebuild).
+ */
+
+import { useState } from 'react';
+import {
+  RefreshCw,
+  Trash2,
+  Database,
+  Brain,
+  PowerOff,
+  Hammer,
+  ScrollText,
+  Download,
+  ShieldAlert,
+} from 'lucide-react';
+import type { LucideIcon } 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 { Card, CardBody } from '../../ui/data/Card.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Grid } from '../../ui/primitives/Grid.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+
+interface AdminAction {
+  id: string;
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  endpoint: string;
+  method: 'POST' | 'GET';
+  destructive: boolean;
+}
+
+const ACTIONS: AdminAction[] = [
+  {
+    id: 'gc',
+    title: 'Garbage collect',
+    description: 'Prune empty session files + orphaned task rows from the cache.',
+    icon: Trash2,
+    endpoint: '/api/admin/gc',
+    method: 'POST',
+    destructive: false,
+  },
+  {
+    id: 'cache-clear',
+    title: 'Clear cache',
+    description: 'Wipe the dashboard cache directory. Rebuilds on next access.',
+    icon: Database,
+    endpoint: '/api/admin/cache/clear',
+    method: 'POST',
+    destructive: true,
+  },
+  {
+    id: 'memory-reindex',
+    title: 'Reindex memory',
+    description: 'Rebuild the vault search index.',
+    icon: Brain,
+    endpoint: '/api/admin/memory/reindex',
+    method: 'POST',
+    destructive: false,
+  },
+  {
+    id: 'logs-purge',
+    title: 'Purge old logs',
+    description: 'Delete log files older than 14 days from ~/.config/bizar/logs.',
+    icon: ScrollText,
+    endpoint: '/api/admin/logs/purge',
+    method: 'POST',
+    destructive: true,
+  },
+  {
+    id: 'restart',
+    title: 'Restart dashboard',
+    description: 'Signal the server to shut down. The CLI launcher restarts it.',
+    icon: PowerOff,
+    endpoint: '/api/admin/restart',
+    method: 'POST',
+    destructive: true,
+  },
+  {
+    id: 'rebuild',
+    title: 'Rebuild',
+    description: 'Re-run the installer build step.',
+    icon: Hammer,
+    endpoint: '/api/admin/rebuild',
+    method: 'POST',
+    destructive: true,
+  },
+  {
+    id: 'export-activity',
+    title: 'Export activity',
+    description: 'Download the full activity log as NDJSON.',
+    icon: Download,
+    endpoint: '/api/admin/activity/export',
+    method: 'GET',
+    destructive: false,
+  },
+];
+
+export function AdminView(): JSX.Element {
+  return (
+    <Stack gap={4} data-testid="admin-view">
+      <ViewHeader
+        title="Admin"
+        description="Maintenance actions. Destructive actions require an inline confirm."
+      />
+      <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={3}>
+        {ACTIONS.map((a) => (
+          <AdminTile key={a.id} action={a} />
+        ))}
+      </Grid>
+    </Stack>
+  );
+}
+
+function AdminTile({ action }: { action: AdminAction }): JSX.Element {
+  const [busy, setBusy] = useState<boolean>(false);
+  const [confirm, setConfirm] = useState<boolean>(false);
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const Icon = action.icon;
+
+  const run = async (): Promise<void> => {
+    setBusy(true);
+    setError(null);
+    setResult(null);
+    try {
+      if (action.method === 'GET') {
+        // For GET endpoints (export), trigger a download by navigating
+        // to the endpoint in a new tab. The server sets Content-Disposition.
+        window.open(action.endpoint, '_blank');
+        setResult('Download started');
+      } else {
+        const res = await fetchJson<{ ok?: boolean; files?: number; bytes?: number; note?: string }>(
+          action.endpoint,
+          { method: action.method, body: {} },
+        );
+        const summary = res.note
+          ? res.note
+          : res.files !== undefined
+            ? `${res.files} file(s) removed (${res.bytes ?? 0} bytes)`
+            : res.ok ? 'Done' : 'Done';
+        setResult(summary);
+      }
+      setConfirm(false);
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Card variant="default">
+      <CardBody>
+        <Stack gap={2}>
+          <Inline align="center" gap={2}>
+            <Icon size={18} aria-hidden />
+            <strong style={{ fontSize: 'var(--fs-13)' }}>{action.title}</strong>
+            {action.destructive && (
+              <span style={{ marginLeft: 'auto', color: 'var(--danger)', fontSize: 'var(--fs-11)' }} aria-label="Destructive">
+                <ShieldAlert size={14} aria-hidden style={{ verticalAlign: 'middle' }} /> destructive
+              </span>
+            )}
+          </Inline>
+          <p style={{ color: 'var(--fg-muted)', fontSize: 'var(--fs-12)', margin: 0 }}>
+            {action.description}
+          </p>
+          {result !== null && (
+            <span data-testid={`admin-result-${action.id}`} style={{ fontSize: 'var(--fs-12)', color: 'var(--success)' }}>
+              {result}
+            </span>
+          )}
+          {error !== null && (
+            <span role="alert" data-testid={`admin-error-${action.id}`} style={{ fontSize: 'var(--fs-12)', color: 'var(--danger)' }}>
+              {error}
+            </span>
+          )}
+          {confirm ? (
+            <Inline gap={1}>
+              <Button variant="danger" onClick={() => void run()} disabled={busy} data-testid={`admin-confirm-${action.id}`}>
+                Confirm
+              </Button>
+              <Button variant="ghost" onClick={() => setConfirm(false)} disabled={busy} data-testid={`admin-cancel-${action.id}`}>
+                Cancel
+              </Button>
+            </Inline>
+          ) : (
+            <Button
+              variant={action.destructive ? 'danger' : 'primary'}
+              onClick={() => (action.destructive ? setConfirm(true) : void run())}
+              disabled={busy}
+              data-testid={`admin-run-${action.id}`}
+            >
+              <RefreshCw size={14} aria-hidden /> {busy ? 'Working…' : 'Run'}
+            </Button>
+          )}
+        </Stack>
+      </CardBody>
+    </Card>
+  );
+}

package/bizar-dash/src/web/v8/views/Agents/AgentHierarchy.tsx

@@ -0,0 +1,212 @@
+import { useCallback, useMemo, useState } from 'react';
+import { ChevronDown, ChevronRight, GitBranch, Network } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Badge } from '../../ui/data/Badge.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+import type { BizarAgent } from '../../data/types.js';
+
+/**
+ * AgentHierarchy — v9.4.0 S45.
+ *
+ * Reads `/api/agents/hierarchy` (returns `{ roots: Array<{ name, agent,
+ * children }>, all: BizarAgent[] }` from `agents-store.mjs:230-251`).
+ * Renders a collapsible tree where each node is a Bizar agent. Children
+ * render indented beneath their parent. Live updates via `agents:change`
+ * WS event triggers refetch.
+ */
+
+export interface HierarchyNode {
+  name: string;
+  agent: BizarAgent | null;
+  children: HierarchyNode[];
+}
+
+interface HierarchyResponse {
+  roots?: HierarchyNode[];
+  all?: BizarAgent[];
+}
+
+function statusToTone(status: string | undefined): 'neutral' | 'info' | 'success' | 'warning' | 'danger' {
+  const s = (status || '').toLowerCase();
+  if (s === 'busy' || s === 'working') return 'info';
+  if (s === 'idle') return 'neutral';
+  if (s === 'error' || s === 'stuck') return 'danger';
+  if (s === 'paused') return 'warning';
+  return 'neutral';
+}
+
+function statusLabel(status: string | undefined): string {
+  const s = (status || '').toLowerCase();
+  if (s === 'working') return 'working';
+  if (!s) return 'idle';
+  return s;
+}
+
+function relativeMs(ms: number | undefined | null): string {
+  if (typeof ms !== 'number' || !Number.isFinite(ms) || ms <= 0) return '—';
+  const delta = Math.max(0, Date.now() - ms);
+  const sec = Math.floor(delta / 1000);
+  if (sec < 60) return `${sec}s ago`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  return `${Math.floor(hr / 24)}d ago`;
+}
+
+interface NodeRowProps {
+  node: HierarchyNode;
+  depth: number;
+  expanded: Set<string>;
+  onToggle: (name: string) => void;
+}
+
+function NodeRow({ node, depth, expanded, onToggle }: NodeRowProps): JSX.Element {
+  const hasChildren = node.children.length > 0;
+  const isOpen = expanded.has(node.name);
+  const agent = node.agent;
+  const tone = statusToTone(agent?.status);
+  const status = statusLabel(agent?.status);
+  return (
+    <>
+      <div
+        data-testid={`agent-hierarchy-node-${node.name}`}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'auto 1fr auto auto',
+          alignItems: 'center',
+          gap: 'var(--space-3)',
+          padding: 'var(--space-2) var(--space-3)',
+          paddingLeft: `calc(var(--space-3) + ${depth * 24}px)`,
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius-md)',
+          background: 'var(--surface-1)',
+        }}
+      >
+        {hasChildren ? (
+          <button
+            type="button"
+            data-testid={`agent-hierarchy-toggle-${node.name}`}
+            aria-label={isOpen ? 'Collapse' : 'Expand'}
+            onClick={() => onToggle(node.name)}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 22,
+              height: 22,
+              borderRadius: 'var(--radius-sm)',
+              border: '1px solid var(--border)',
+              background: 'var(--surface-0)',
+              color: 'var(--fg-muted)',
+              cursor: 'pointer',
+              padding: 0,
+            }}
+          >
+            {isOpen ? <ChevronDown size={12} aria-hidden /> : <ChevronRight size={12} aria-hidden />}
+          </button>
+        ) : (
+          <span aria-hidden style={{ width: 22, height: 22, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-subtle)' }}>
+            <GitBranch size={12} />
+          </span>
+        )}
+        <div style={{ minWidth: 0 }}>
+          <div style={{ fontSize: 'var(--fs-13)', fontWeight: 600, color: 'var(--fg)' }}>{node.name}</div>
+          {agent && (
+            <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+              {agent.role || agent.category || agent.mode || 'agent'}
+              {agent.parent && agent.parent !== node.name && (
+                <> · parent <code style={{ fontFamily: 'var(--font-mono)' }}>{agent.parent}</code></>
+              )}
+            </div>
+          )}
+        </div>
+        {typeof agent?.lastSeen === 'number' && agent.lastSeen > 0 && (
+          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>
+            {relativeMs(agent.lastSeen)}
+          </span>
+        )}
+        <Badge tone={tone} dot>{status}</Badge>
+      </div>
+      {hasChildren && isOpen && node.children.map((child) => (
+        <NodeRow key={child.name} node={child} depth={depth + 1} expanded={expanded} onToggle={onToggle} />
+      ))}
+    </>
+  );
+}
+
+export function AgentHierarchy(): JSX.Element {
+  const data = useFetch<HierarchyResponse>('/api/agents/hierarchy');
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+  // Track which root names we auto-expanded on first load so subsequent
+  // user toggles of those roots are honored.
+  const [autoRoots, setAutoRoots] = useState<Set<string>>(() => new Set());
+
+  const seenRoots = useMemo(() => data.data?.roots?.map((n) => n.name) ?? [], [data.data]);
+
+  // On first successful load, auto-expand every root and remember the set so
+  // a future toggle of a root is a real state change (no longer masked by
+  // the auto-expand).
+  if (autoRoots.size === 0 && seenRoots.length > 0) {
+    setAutoRoots(new Set(seenRoots));
+    setExpanded(new Set(seenRoots));
+  }
+
+  const onAgentsChange = useCallback(() => data.refetch(), [data]);
+  useWsMessage('agents:change', onAgentsChange);
+
+  const toggle = useCallback((name: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
+
+  if (data.loading && !data.data) {
+    return (
+      <Stack gap={3}>
+        <Skeleton style={{ height: 48 }} />
+        <Skeleton style={{ height: 48 }} />
+        <Skeleton style={{ height: 48 }} />
+      </Stack>
+    );
+  }
+
+  const roots = data.data?.roots ?? [];
+  if (roots.length === 0) {
+    return (
+      <Card>
+        <CardBody>
+          <EmptyState
+            icon={<Network size={32} aria-hidden />}
+            title="No hierarchy yet"
+            description="Agents have no parent links in their frontmatter. Add `parent:` to an agent's .md frontmatter to nest it beneath another agent."
+            data-testid="agent-hierarchy-empty"
+          />
+        </CardBody>
+      </Card>
+    );
+  }
+
+  return (
+    <Stack gap={2}>
+      <Inline align="center" justify="between">
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+          {roots.length} root agent{roots.length === 1 ? '' : 's'} · {data.data?.all?.length ?? 0} total
+        </span>
+      </Inline>
+      <Stack gap={2}>
+        {roots.map((root) => (
+          <NodeRow key={root.name} node={root} depth={0} expanded={expanded} onToggle={toggle} />
+        ))}
+      </Stack>
+    </Stack>
+  );
+}