@polderlabs/bizar 7.0.2 → 8.0.0

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

@@ -1,126 +0,0 @@
-// src/web/components/agents/CommunicationLog.tsx — inter-agent message bus trace.
-//
-// v6.4.0 — F-036 (Goal Planner UI). Subscribes to ws.ts for any
-// event whose type starts with `agent:` and renders the last 200
-// messages with color coding by type. Bounded virtual-list window
-// so a runaway stream can't blow up the page.
-import { useEffect, useState } from 'react';
-import { MessageSquare, ArrowRight } from 'lucide-react';
-import { Ws } from '../../lib/ws';
-import { Card, CardTitle, CardMeta } from '../Card';
-import { Tag } from '../Tag';
-
-const MAX_ROWS = 200;
-
-type Entry = {
-  id: string;
-  ts: number;
-  from: string;
-  to: string;
-  message: string;
-  kind: 'info' | 'request' | 'success' | 'warning' | 'error' | 'status' | 'restarted' | 'stuck' | 'message';
-  raw: unknown;
-};
-
-function classify(t: string): Entry['kind'] {
-  if (t === 'agent:status') return 'status';
-  if (t === 'agent:restarted') return 'restarted';
-  if (t === 'agent:stuck') return 'stuck';
-  if (t === 'agent:message') return 'message';
-  return 'info';
-}
-
-function deriveEntry(t: string, payload: Record<string, unknown> | undefined, ts: number): Entry {
-  const kind = classify(t);
-  const id = `${ts}-${Math.random().toString(36).slice(2, 7)}`;
-  if (t === 'agent:message') {
-    const m = (payload?.message || payload) as Record<string, unknown>;
-    return {
-      id,
-      ts,
-      from: String(m?.from || 'unknown'),
-      to: String(m?.to || 'unknown'),
-      message: String(m?.text || m?.message || JSON.stringify(m).slice(0, 160)),
-      kind,
-      raw: payload,
-    };
-  }
-  const agent = (payload?.agent || payload) as Record<string, unknown>;
-  const name = String(agent?.name || 'agent');
-  return {
-    id,
-    ts,
-    from: name,
-    to: kind === 'stuck' ? 'orchestrator' : 'broadcast',
-    message: `${t} ${agent?.status ? `→ ${agent.status}` : ''}`.trim(),
-    kind,
-    raw: payload,
-  };
-}
-
-interface Props {
-  /** Override the max row count (default 200). */
-  maxRows?: number;
-}
-
-export function CommunicationLog({ maxRows = MAX_ROWS }: Props) {
-  const [rows, setRows] = useState<Entry[]>([]);
-
-  useEffect(() => {
-    const ws = new Ws();
-    const off = ws.on((msg) => {
-      const t = (msg as { type?: string }).type;
-      if (!t || !t.startsWith('agent:')) return;
-      const m = msg as { type: string; ts?: number } & Record<string, unknown>;
-      const ts = Number(m.ts) || Date.now();
-      setRows((prev) => {
-        const next = [...prev, deriveEntry(t, m as Record<string, unknown>, ts)];
-        return next.length > maxRows ? next.slice(next.length - maxRows) : next;
-      });
-    });
-    return () => {
-      off();
-      ws.close();
-    };
-  }, [maxRows]);
-
-  return (
-    <Card className="comm-log" data-testid="communication-log">
-      <div className="comm-log-header">
-        <CardTitle>
-          <MessageSquare size={14} aria-hidden /> Communication log
-        </CardTitle>
-        <Tag variant="neutral" data-testid="communication-log-count">{rows.length}</Tag>
-      </div>
-      <CardMeta>Inter-agent message bus trace · bounded to {maxRows} rows</CardMeta>
-      <ul className="comm-log-list" data-testid="communication-log-list">
-        {rows.length === 0 && (
-          <li className="comm-log-empty" data-testid="communication-log-empty">
-            No agent messages yet. Stream will appear here live.
-          </li>
-        )}
-        {rows.slice().reverse().map((row) => (
-          <li
-            key={row.id}
-            className={`comm-log-row is-${row.kind}`}
-            data-testid="communication-log-row"
-            data-kind={row.kind}
-          >
-            <div className="comm-log-row-meta">
-              <span className="comm-log-from">{row.from}</span>
-              <ArrowRight size={12} aria-hidden />
-              <span className="comm-log-to">{row.to}</span>
-              <Tag variant="neutral" className={`comm-log-kind is-${row.kind}`}>{row.kind}</Tag>
-              <time className="comm-log-time" dateTime={new Date(row.ts).toISOString()}>
-                {new Date(row.ts).toLocaleTimeString()}
-              </time>
-            </div>
-            <div className="comm-log-message">{row.message}</div>
-          </li>
-        ))}
-      </ul>
-    </Card>
-  );
-}
-
-export default CommunicationLog;

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

@@ -1,163 +0,0 @@
-// 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

@@ -1,123 +0,0 @@
-// 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

@@ -1,127 +0,0 @@
-// 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

@@ -1,148 +0,0 @@
-/**
- * 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();
-  });
-});