@polderlabs/bizar 6.3.0 → 7.0.0

package/bizar-dash/src/web/components/agents/DependencyGraph.tsx

@@ -0,0 +1,163 @@
+// src/web/components/agents/DependencyGraph.tsx — DAG of plan step dependencies.
+//
+// v6.4.0 — F-036 (Goal Planner UI). Uses @xyflow/react (already in
+// Bizar deps) to render the plan's step graph. Falls back to a
+// hand-rolled table when no plan is supplied.
+import { useMemo } from 'react';
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  type Node,
+  type Edge,
+  type NodeProps,
+  Handle,
+  Position,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { GitBranch } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../Card';
+import { Tag } from '../Tag';
+import type { Plan } from '../../lib/goapPlanner';
+
+interface Props {
+  plan: Plan | null;
+}
+
+function StepNode({ data }: NodeProps<Node<{ label: string; action: string; agent: string }>>) {
+  return (
+    <div className={`dep-node is-${(data as { action?: string }).action || 'research'}`}>
+      <Handle type="target" position={Position.Left} className="dep-handle" />
+      <div className="dep-node-action">{(data as { action?: string }).action}</div>
+      <div className="dep-node-label">{(data as { label?: string }).label}</div>
+      <div className="dep-node-agent">@{(data as { agent?: string }).agent}</div>
+      <Handle type="source" position={Position.Right} className="dep-handle" />
+    </div>
+  );
+}
+
+const nodeTypes = { step: StepNode };
+
+export function DependencyGraph({ plan }: Props) {
+  const nodes: Node[] = useMemo(() => {
+    if (!plan) return [];
+    const n = plan.steps.length;
+    // Lay out nodes in a horizontal flow based on dep depth.
+    const depths = new Map<string, number>();
+    const computeDepth = (id: string, stack = new Set<string>()): number => {
+      const cached = depths.get(id);
+      if (cached !== undefined) return cached;
+      if (stack.has(id)) return 0;
+      stack.add(id);
+      const step = plan.steps.find((s) => s.id === id);
+      if (!step || step.deps.length === 0) {
+        depths.set(id, 0);
+        stack.delete(id);
+        return 0;
+      }
+      let max = 0;
+      for (const dep of step.deps) {
+        const d = computeDepth(dep, stack);
+        if (d > max) max = d;
+      }
+      depths.set(id, max + 1);
+      stack.delete(id);
+      return max + 1;
+    };
+    for (const s of plan.steps) computeDepth(s.id);
+
+    const byDepth = new Map<number, string[]>();
+    for (const s of plan.steps) {
+      const d = depths.get(s.id) ?? 0;
+      const arr = byDepth.get(d) || [];
+      arr.push(s.id);
+      byDepth.set(d, arr);
+    }
+    const nodesOut: Node[] = [];
+    for (const [depth, ids] of byDepth) {
+      const total = ids.length;
+      ids.forEach((id, i) => {
+        const step = plan.steps.find((s) => s.id === id);
+        if (!step) return;
+        const xOffset = 60 + depth * 220;
+        const yOffset = 40 + (i - (total - 1) / 2) * 90;
+        nodesOut.push({
+          id: step.id,
+          type: 'step',
+          position: { x: xOffset, y: yOffset },
+          data: {
+            label: step.title,
+            action: step.action,
+            agent: step.agent,
+          },
+        });
+      });
+    }
+    void n;
+    return nodesOut;
+  }, [plan]);
+
+  const edges: Edge[] = useMemo(() => {
+    if (!plan) return [];
+    return plan.steps.flatMap((step) =>
+      step.deps.map((dep) => ({
+        id: `${dep}->${step.id}`,
+        source: dep,
+        target: step.id,
+        animated: true,
+      })),
+    );
+  }, [plan]);
+
+  if (!plan) {
+    return (
+      <Card className="dep-graph" data-testid="dep-graph">
+        <CardTitle>
+          <GitBranch size={14} aria-hidden /> Dependency graph
+        </CardTitle>
+        <CardMeta>Submit a goal to render the dependency DAG.</CardMeta>
+      </Card>
+    );
+  }
+
+  if (plan.steps.length === 0) {
+    return (
+      <Card className="dep-graph" data-testid="dep-graph">
+        <CardTitle>
+          <GitBranch size={14} aria-hidden /> Dependency graph
+        </CardTitle>
+        <CardMeta>Empty plan — nothing to render.</CardMeta>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="dep-graph" data-testid="dep-graph">
+      <div className="dep-graph-header">
+        <CardTitle>
+          <GitBranch size={14} aria-hidden /> Dependency graph
+        </CardTitle>
+        <Tag variant="info">{plan.steps.length} nodes</Tag>
+        <Tag variant="accent">{edges.length} edges</Tag>
+      </div>
+      <CardMeta>Plan step DAG · {plan.goal.slice(0, 80)}</CardMeta>
+      <div className="dep-graph-canvas" data-testid="dep-graph-canvas">
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          fitView
+          fitViewOptions={{ padding: 0.15 }}
+          proOptions={{ hideAttribution: true }}
+        >
+          <Background gap={16} size={1} />
+          <Controls showInteractive={false} />
+          <MiniMap pannable zoomable />
+        </ReactFlow>
+      </div>
+    </Card>
+  );
+}
+
+export default DependencyGraph;

package/bizar-dash/src/web/components/agents/QualityGates.tsx

@@ -0,0 +1,123 @@
+// src/web/components/agents/QualityGates.tsx — pass/fail rubric display.
+//
+// v6.4.0 — F-036 (Goal Planner UI). Scores the four L09 rubric
+// dimensions (Correctness / Arch compliance / Test coverage /
+// Verification evidence) against the live plan. Each gate turns
+// green when the supplied metric meets the threshold documented in
+// `templates/evaluator-rubric.md`.
+import { Shield, CheckCircle2, XCircle, AlertTriangle } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../Card';
+import { Tag } from '../Tag';
+import type { Plan } from '../../lib/goapPlanner';
+
+interface Metrics {
+  /** 0 or 1 — whether `make check` is green. */
+  compileCheck: boolean;
+  /** Percentage of touched tests passing. */
+  testCoverage: number;
+  /** Percentage of arch-rules passing. */
+  archScore: number;
+  /** Verification evidence (commit hash or test output) present. */
+  evidencePresent: boolean;
+}
+
+interface GateRow {
+  name: string;
+  status: 'passed' | 'warning' | 'failed';
+  value?: number | boolean;
+  threshold?: number | boolean;
+  detail: string;
+}
+
+interface Props {
+  plan: Plan | null;
+  metrics: Metrics;
+}
+
+function evaluate(metrics: Metrics): GateRow[] {
+  const compile: GateRow = metrics.compileCheck
+    ? { name: 'Compile check', status: 'passed', value: true, threshold: true, detail: 'make check is green.' }
+    : { name: 'Compile check', status: 'failed', value: false, threshold: true, detail: 'Typecheck error — fix before marking passing.' };
+
+  const coverage: GateRow = metrics.testCoverage >= 80
+    ? { name: 'Test coverage', status: 'passed', value: metrics.testCoverage, threshold: 80, detail: 'Coverage meets the B-grade threshold.' }
+    : metrics.testCoverage >= 60
+      ? { name: 'Test coverage', status: 'warning', value: metrics.testCoverage, threshold: 80, detail: 'Coverage is below the B-grade threshold.' }
+      : { name: 'Test coverage', status: 'failed', value: metrics.testCoverage, threshold: 80, detail: 'Coverage is critical.' };
+
+  const arch: GateRow = metrics.archScore >= 90
+    ? { name: 'Arch compliance', status: 'passed', value: metrics.archScore, threshold: 90, detail: 'All non-trivial arch-rules satisfied.' }
+    : metrics.archScore >= 70
+      ? { name: 'Arch compliance', status: 'warning', value: metrics.archScore, threshold: 90, detail: 'Minor arch-rule violations.' }
+      : { name: 'Arch compliance', status: 'failed', value: metrics.archScore, threshold: 90, detail: 'Multiple arch-rule violations.' };
+
+  const evidence: GateRow = metrics.evidencePresent
+    ? { name: 'Verification evidence', status: 'passed', value: true, threshold: true, detail: 'Test output + commit hash captured.' }
+    : { name: 'Verification evidence', status: 'failed', value: false, threshold: true, detail: 'No evidence recorded yet.' };
+
+  return [compile, coverage, arch, evidence];
+}
+
+function GateIcon({ status }: { status: GateRow['status'] }) {
+  if (status === 'passed') return <CheckCircle2 size={14} className="qg-icon is-pass" />;
+  if (status === 'warning') return <AlertTriangle size={14} className="qg-icon is-warn" />;
+  return <XCircle size={14} className="qg-icon is-fail" />;
+}
+
+function GateTag({ status }: { status: GateRow['status'] }) {
+  if (status === 'passed') return <Tag variant="success">passed</Tag>;
+  if (status === 'warning') return <Tag variant="warning">warning</Tag>;
+  return <Tag variant="error">failed</Tag>;
+}
+
+export function QualityGates({ plan, metrics }: Props) {
+  const gates = evaluate(metrics);
+  const passing = gates.filter((g) => g.status === 'passed').length;
+  return (
+    <Card className="qg-panel" data-testid="quality-gates">
+      <div className="qg-header">
+        <CardTitle>
+          <Shield size={14} aria-hidden /> Quality gates
+        </CardTitle>
+        <Tag variant={passing === gates.length ? 'success' : passing > 0 ? 'warning' : 'error'}>
+          {passing}/{gates.length} passing
+        </Tag>
+      </div>
+      <CardMeta>
+        L09 rubric (Correctness / Arch compliance / Test coverage / Verification evidence) —{' '}
+        {plan ? `evaluating against plan with ${plan.steps.length} steps.` : 'awaiting plan.'}
+      </CardMeta>
+      <ul className="qg-list" data-testid="quality-gates-list">
+        {gates.map((gate) => (
+          <li
+            key={gate.name}
+            className={`qg-row is-${gate.status}`}
+            data-testid="quality-gates-row"
+            data-status={gate.status}
+          >
+            <div className="qg-row-head">
+              <GateIcon status={gate.status} />
+              <span className="qg-name">{gate.name}</span>
+              <GateTag status={gate.status} />
+            </div>
+            <div className="qg-row-body">
+              <span className="qg-detail">{gate.detail}</span>
+              {typeof gate.value === 'number' && (
+                <span className="qg-threshold">
+                  current: {gate.value}% · threshold: {gate.threshold}%
+                </span>
+              )}
+              {typeof gate.value === 'boolean' && (
+                <span className="qg-threshold">
+                  current: {String(gate.value)} · threshold: {String(gate.threshold)}
+                </span>
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Card>
+  );
+}
+
+export default QualityGates;

package/bizar-dash/src/web/components/agents/RealTimeEventLog.tsx

@@ -0,0 +1,127 @@
+// src/web/components/agents/RealTimeEventLog.tsx — streaming event ticker.
+//
+// v6.4.0 — F-036 (Goal Planner UI). Subscribes to ws.ts for ALL
+// events and renders a color-coded ticker. Bounded ring buffer so
+// a runaway server can't fill memory.
+import { useEffect, useMemo, useState } from 'react';
+import { Activity } from 'lucide-react';
+import { Ws } from '../../lib/ws';
+import { Card, CardTitle, CardMeta } from '../Card';
+import { Tag } from '../Tag';
+
+const MAX_ROWS = 500;
+
+type EventRow = {
+  id: string;
+  ts: number;
+  type: string;
+  severity: 'info' | 'success' | 'warning' | 'error' | 'control';
+  preview: string;
+};
+
+function severityFor(type: string): EventRow['severity'] {
+  if (type.startsWith('goal:')) return 'success';
+  if (type.startsWith('task:')) return 'info';
+  if (type.includes('error') || type.includes('fail')) return 'error';
+  if (type.includes('stuck') || type.includes('blocked') || type.includes('warn')) return 'warning';
+  if (type === 'ping' || type === 'pong' || type === 'refresh') return 'control';
+  return 'info';
+}
+
+function previewOf(type: string, payload: Record<string, unknown> | undefined): string {
+  if (!payload) return type;
+  const keys = Object.keys(payload).slice(0, 3);
+  return keys.map((k) => `${k}=${shortVal(payload[k])}`).join(' ') || type;
+}
+
+function shortVal(v: unknown): string {
+  if (v == null) return 'null';
+  if (typeof v === 'string') return v.length > 20 ? `"${v.slice(0, 20)}…"` : `"${v}"`;
+  if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+  if (Array.isArray(v)) return `[${v.length}]`;
+  if (typeof v === 'object') return `{${Object.keys(v).length}}`;
+  return String(v);
+}
+
+export function RealTimeEventLog() {
+  const [rows, setRows] = useState<EventRow[]>([]);
+
+  useEffect(() => {
+    const ws = new Ws();
+    const off = ws.on((msg) => {
+      const m = msg as { type?: string; ts?: number } & Record<string, unknown>;
+      const t = m.type;
+      if (!t) return;
+      const ts = Number(m.ts) || Date.now();
+      const row: EventRow = {
+        id: `${ts}-${Math.random().toString(36).slice(2, 7)}`,
+        ts,
+        type: t,
+        severity: severityFor(t),
+        preview: previewOf(t, m as Record<string, unknown>),
+      };
+      setRows((prev) => {
+        const next = [...prev, row];
+        return next.length > MAX_ROWS ? next.slice(next.length - MAX_ROWS) : next;
+      });
+    });
+    return () => {
+      off();
+      ws.close();
+    };
+  }, []);
+
+  const summary = useMemo(() => {
+    const counts: Record<EventRow['severity'], number> = {
+      info: 0,
+      success: 0,
+      warning: 0,
+      error: 0,
+      control: 0,
+    };
+    for (const r of rows) counts[r.severity] += 1;
+    return counts;
+  }, [rows]);
+
+  return (
+    <Card className="event-log" data-testid="event-log">
+      <div className="event-log-header">
+        <CardTitle>
+          <Activity size={14} aria-hidden /> Real-time events
+        </CardTitle>
+        <Tag variant="neutral" data-testid="event-log-count">{rows.length}</Tag>
+      </div>
+      <CardMeta>Live WebSocket event ticker · bounded to {MAX_ROWS} rows</CardMeta>
+      <div className="event-log-summary" data-testid="event-log-summary">
+        <Tag variant="info">info {summary.info}</Tag>
+        <Tag variant="success">success {summary.success}</Tag>
+        <Tag variant="warning">warning {summary.warning}</Tag>
+        <Tag variant="error">error {summary.error}</Tag>
+        <Tag variant="neutral">control {summary.control}</Tag>
+      </div>
+      <ul className="event-log-list" data-testid="event-log-list">
+        {rows.length === 0 && (
+          <li className="event-log-empty" data-testid="event-log-empty">
+            No events yet. Events will stream here as the server emits them.
+          </li>
+        )}
+        {rows.slice().reverse().map((row) => (
+          <li
+            key={row.id}
+            className={`event-log-row is-${row.severity}`}
+            data-testid="event-log-row"
+            data-severity={row.severity}
+          >
+            <time className="event-log-time" dateTime={new Date(row.ts).toISOString()}>
+              {new Date(row.ts).toLocaleTimeString()}
+            </time>
+            <code className="event-log-type">{row.type}</code>
+            <span className="event-log-preview">{row.preview}</span>
+          </li>
+        ))}
+      </ul>
+    </Card>
+  );
+}
+
+export default RealTimeEventLog;

package/bizar-dash/src/web/components/agents/RoutingDecisions.test.tsx

@@ -0,0 +1,148 @@
+/**
+ * src/web/components/agents/RoutingDecisions.test.tsx
+ *
+ * F-035 — vitest tests for the routing-decisions panel.
+ * 3 tests required by the F-035 layers[] spec:
+ *   1. renders the empty state when no decisions have been emitted
+ *   2. renders a single decision via the `initial` prop
+ *   3. renders multiple decisions via the WS subscription path
+ *
+ * The `subscribe` prop receives a `(msg: WsMessage) => void` handler
+ * and returns an unsubscribe function. We capture the handler and
+ * drive it directly — no real WebSocket needed.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
+import React from 'react';
+import { RoutingDecisions } from './RoutingDecisions';
+import type { RoutingDecision, WsMessage } from '../../lib/types';
+
+const dec = (id: string, tier: RoutingDecision['tier'], model: string, extras: Partial<RoutingDecision> = {}): RoutingDecision => ({
+  id,
+  ts: 1_700_000_000_000 + Number(id.replace(/\D/g, '') || 0) * 1000,
+  tier,
+  model,
+  task: `task-${id}`,
+  costUsd: tier === 'CODEMOD' ? 0 : 0.01,
+  latencyMs: 250,
+  ...extras,
+});
+
+describe('RoutingDecisions', () => {
+  it('renders the empty state when no decisions have been emitted', () => {
+    render(<RoutingDecisions />);
+    const empty = screen.getByTestId('routing-decisions-empty');
+    expect(empty).toBeTruthy();
+    expect(empty.textContent).toMatch(/No routing decisions yet/i);
+    // Confirm table is NOT rendered in empty state.
+    expect(screen.queryByRole('table')).toBeNull();
+  });
+
+  it('renders a single decision via the initial prop', () => {
+    const one = dec('1', 'CODEMOD', 'codemod:var-to-const');
+    render(<RoutingDecisions initial={[one]} />);
+
+    // Tier badge with the right class
+    const row = screen.getByTestId(`routing-row-${one.id}`);
+    expect(row).toBeTruthy();
+    const badge = row.querySelector('.routing-tier-codemod');
+    expect(badge).toBeTruthy();
+    expect(badge?.textContent).toBe('CODEMOD');
+
+    // Model + task + cost columns
+    expect(row.querySelector('.routing-model')?.textContent).toBe('codemod:var-to-const');
+    expect(row.querySelector('.routing-task')?.textContent).toBe('task-1');
+    expect(row.querySelector('.routing-cost')?.textContent).toBe('$0');
+    // latency = 250ms → "250ms"
+    expect(row.querySelector('.routing-latency')?.textContent).toBe('250ms');
+  });
+
+  it('renders multiple decisions and filters by tier', () => {
+    const list: RoutingDecision[] = [
+      dec('1', 'CODEMOD', 'codemod:remove-console', { costUsd: 0 }),
+      dec('2', 'TIER1', 'haiku', { costUsd: 0.0008 }),
+      dec('3', 'TIER2', 'sonnet', { costUsd: 0.012 }),
+      dec('4', 'TIER3', 'opus', { costUsd: 0.05 }),
+    ];
+
+    const { rerender } = render(<RoutingDecisions initial={list} />);
+    // All four rows present
+    for (const d of list) {
+      expect(screen.getByTestId(`routing-row-${d.id}`)).toBeTruthy();
+    }
+
+    // Tier filter — only TIER2 row survives
+    rerender(<RoutingDecisions initial={list} filterTier="TIER2" />);
+    expect(screen.getByTestId('routing-row-3')).toBeTruthy();
+    expect(screen.queryByTestId('routing-row-1')).toBeNull();
+    expect(screen.queryByTestId('routing-row-2')).toBeNull();
+    expect(screen.queryByTestId('routing-row-4')).toBeNull();
+
+    // Subscribed WS append test — drive a `routing:decision` through
+    // the captured handler.
+    let capturedHandler: ((msg: WsMessage) => void) | null = null;
+    const subscribe = (handler: (msg: WsMessage) => void) => {
+      capturedHandler = handler;
+      return () => { capturedHandler = null; };
+    };
+    const appended: RoutingDecision[] = [];
+    const onAppend = (d: RoutingDecision) => appended.push(d);
+
+    rerender(
+      <RoutingDecisions
+        initial={list}
+        subscribe={subscribe}
+        onAppend={onAppend}
+        filterTier="ALL"
+      />,
+    );
+    expect(capturedHandler).toBeTruthy();
+    const fresh = dec('5', 'TIER3', 'opus-2', { costUsd: 0.07, latencyMs: 1200 });
+    // Drive the handler inside act() so React commits the setDecisions.
+    act(() => {
+      capturedHandler!({ type: 'routing:decision', decision: fresh });
+    });
+    expect(screen.getByTestId('routing-row-5')).toBeTruthy();
+    expect(appended).toHaveLength(1);
+    expect(appended[0].id).toBe('5');
+
+    // Malformed message should be ignored (no `routing:decision` type).
+    capturedHandler!({ type: 'tasks:change', task: {} as never });
+    expect(screen.queryByTestId('routing-row-')).toBeNull();
+
+    // Empty filterTier = 'ALL' shows everything
+    rerender(<RoutingDecisions initial={list} filterTier="ALL" />);
+    for (const d of list) {
+      expect(screen.getByTestId(`routing-row-${d.id}`)).toBeTruthy();
+    }
+  });
+
+  it('respects maxRows by pruning oldest decisions', () => {
+    // The component treats `initial` as most-recent-first (same
+    // convention as the WS stream). Build the list newest-first so
+    // maxRows=3 keeps the last 3 items from the array (the newest).
+    const list: RoutingDecision[] = [
+      dec('5', 'TIER1', 'haiku'),
+      dec('4', 'TIER1', 'haiku'),
+      dec('3', 'TIER1', 'haiku'),
+      dec('2', 'TIER1', 'haiku'),
+      dec('1', 'TIER1', 'haiku'),
+    ];
+    render(<RoutingDecisions initial={list} maxRows={3} />);
+    // Only 3 of 5 should be visible (most-recent first)
+    expect(screen.getByTestId('routing-row-5')).toBeTruthy();
+    expect(screen.getByTestId('routing-row-4')).toBeTruthy();
+    expect(screen.getByTestId('routing-row-3')).toBeTruthy();
+    expect(screen.queryByTestId('routing-row-2')).toBeNull();
+    expect(screen.queryByTestId('routing-row-1')).toBeNull();
+  });
+
+  it('compact prop toggles a different class', () => {
+    const one = dec('1', 'CODEMOD', 'codemod:add-logging');
+    const { container, rerender } = render(<RoutingDecisions initial={[one]} />);
+    expect(container.querySelector('.routing-decisions-compact')).toBeNull();
+    rerender(<RoutingDecisions initial={[one]} compact />);
+    expect(container.querySelector('.routing-decisions-compact')).toBeTruthy();
+  });
+});