@polderlabs/bizar 6.2.5 → 7.0.0

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();
+  });
+});

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

@@ -0,0 +1,160 @@
+// src/web/components/agents/RoutingDecisions.tsx —
+// F-035 (MetaHarness) — 3-tier model routing transparency panel.
+//
+// Mirrors ruflo's [CODEMOD_AVAILABLE] / [TASK_MODEL_RECOMMENDATION]
+// convention (see goal_ui/src/components/agents/ExecutionMonitor.tsx).
+// Renders the most recent routing decisions emitted on the WS
+// `routing:decision` channel with a tier badge (CODEMOD/TIER1/TIER2/TIER3)
+// plus model + cost + latency columns.
+//
+// Tier color scheme (per spec):
+//   CODEMOD → green   ($0 deterministic codemod intent)
+//   TIER1   → blue    (model)
+//   TIER2   → yellow  (model)
+//   TIER3   → red     (frontier model)
+//
+// Pure functional React. No class components. Vanilla CSS via the
+// existing main.css (.routing-decisions, .routing-tier-* classes).
+
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import type { RoutingDecision, RoutingTier, WsMessage } from '../../lib/types';
+
+export type RoutingDecisionsProps = {
+  /** Optional WebSocket subscription target. */
+  subscribe?: (handler: (msg: WsMessage) => void) => () => void;
+  /** Initial seed for tests / preview. */
+  initial?: RoutingDecision[];
+  /** Cap on visible rows (default 50). Older rows are pruned first. */
+  maxRows?: number;
+  /** Tier filter — undefined = all tiers. */
+  filterTier?: RoutingTier | 'ALL';
+  /** Compact (single-row) layout toggle. */
+  compact?: boolean;
+  /** Test-only callback when a decision is appended. */
+  onAppend?: (d: RoutingDecision) => void;
+};
+
+const TIER_ORDER: RoutingTier[] = ['CODEMOD', 'TIER1', 'TIER2', 'TIER3'];
+
+function tierClass(tier: RoutingTier): string {
+  switch (tier) {
+    case 'CODEMOD': return 'routing-tier routing-tier-codemod';
+    case 'TIER1':   return 'routing-tier routing-tier-1';
+    case 'TIER2':   return 'routing-tier routing-tier-2';
+    case 'TIER3':   return 'routing-tier routing-tier-3';
+    default:        return 'routing-tier';
+  }
+}
+
+function formatCost(c: number | undefined): string {
+  if (c == null || !Number.isFinite(c)) return '—';
+  if (c === 0) return '$0';
+  if (c < 0.0001) return '<$0.0001';
+  if (c < 1)     return `$${c.toFixed(4)}`;
+  return `$${c.toFixed(2)}`;
+}
+
+function formatLatency(ms: number | undefined): string {
+  if (ms == null || !Number.isFinite(ms)) return '—';
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+
+function formatTime(ts: number): string {
+  try {
+    const d = new Date(ts);
+    if (Number.isNaN(d.getTime())) return String(ts);
+    return d.toLocaleTimeString();
+  } catch {
+    return String(ts);
+  }
+}
+
+export function RoutingDecisions(props: RoutingDecisionsProps) {
+  const {
+    subscribe,
+    initial,
+    maxRows = 50,
+    filterTier,
+    compact = false,
+    onAppend,
+  } = props;
+
+  const [decisions, setDecisions] = useState<RoutingDecision[]>(() =>
+    Array.isArray(initial) ? initial.slice(0, maxRows) : [],
+  );
+
+  const onAppendRef = useRef(onAppend);
+  useEffect(() => { onAppendRef.current = onAppend; }, [onAppend]);
+
+  const handle = useCallback((msg: WsMessage) => {
+    if (msg.type !== 'routing:decision') return;
+    const d = msg.decision;
+    if (!d || !d.id || !d.tier) return;
+    setDecisions((cur) => {
+      const next = [d, ...cur.filter((x) => x.id !== d.id)];
+      if (next.length > maxRows) next.length = maxRows;
+      return next;
+    });
+    onAppendRef.current?.(d);
+  }, [maxRows]);
+
+  // Wire up the WS subscription if one is provided.
+  useEffect(() => {
+    if (typeof subscribe !== 'function') return undefined;
+    return subscribe(handle);
+  }, [subscribe, handle]);
+
+  const visible = useMemo(() => {
+    if (!filterTier || filterTier === 'ALL') return decisions;
+    return decisions.filter((d) => d.tier === filterTier);
+  }, [decisions, filterTier]);
+
+  // ── Empty state ──────────────────────────────────────────────────
+  if (decisions.length === 0) {
+    return (
+      <div className="routing-decisions routing-decisions-empty" data-testid="routing-decisions-empty">
+        <div className="routing-decisions-empty-title">No routing decisions yet</div>
+        <div className="routing-decisions-empty-hint">
+          When the SDK emits a <code>routing:decision</code> event, the
+          most recent <strong>{maxRows}</strong> will appear here.
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={compact ? 'routing-decisions routing-decisions-compact' : 'routing-decisions'} data-testid="routing-decisions">
+      <table className="routing-decisions-table" role="table">
+        <thead>
+          <tr>
+            <th scope="col">Tier</th>
+            <th scope="col">Model</th>
+            <th scope="col">Task</th>
+            <th scope="col">Cost</th>
+            <th scope="col">Latency</th>
+            <th scope="col">When</th>
+          </tr>
+        </thead>
+        <tbody>
+          {visible.map((d) => (
+            <tr key={d.id} data-testid={`routing-row-${d.id}`} className="routing-row">
+              <td>
+                <span className={tierClass(d.tier)} title={TIER_ORDER.includes(d.tier) ? `Tier ${d.tier}` : d.tier}>
+                  {d.tier}
+                </span>
+              </td>
+              <td className="routing-model" title={d.model}>{d.model}</td>
+              <td className="routing-task">{d.task || '—'}</td>
+              <td className="routing-cost">{formatCost(d.costUsd)}</td>
+              <td className="routing-latency">{formatLatency(d.latencyMs)}</td>
+              <td className="routing-time" title={String(d.ts)}>{formatTime(d.ts)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default RoutingDecisions;