@polderlabs/bizar 7.0.4 → 8.1.0

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

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

package/bizar-dash/src/web/components/background/AttachButton.tsx

@@ -1,96 +0,0 @@
-// src/components/background/AttachButton.tsx — small reusable tmux attach button
-// v3.22.0
-//
-// Renders a primary button with two affordances:
-//   1. "Run" — POST /api/background/:id/open-terminal to spawn the system
-//      terminal emulator with the tmux attach command.
-//   2. "Copy" — ghost button to copy the command to clipboard.
-//
-// Safety: the "run" endpoint only accepts commands that start with
-// `tmux attach -t ` (server-side whitelist). The `command` prop is
-// only used for clipboard copy; the POST endpoint reconstructs the
-// command server-side from the tmux session name.
-
-import { useState } from 'react';
-import { Copy, ExternalLink } from 'lucide-react';
-import { Button } from '../Button';
-import { useToast } from '../Toast';
-import { api } from '../../lib/api';
-
-type AttachButtonProps = {
-  /** The full `tmux attach -t <session>` command. Used for clipboard copy. */
-  command: string;
-  /** Button label. Defaults to "Attach". */
-  label?: string;
-  /** Instance id, sent in the POST body so the server validates the session. */
-  instanceId: string;
-};
-
-export function AttachButton({
-  command,
-  label = 'Attach',
-  instanceId,
-}: AttachButtonProps) {
-  const toast = useToast();
-  const [opening, setOpening] = useState(false);
-
-  // Client-side pre-check: only allow tmux attach commands.
-  const valid = /^tmux attach -t /.test(command);
-
-  const copyCommand = async () => {
-    try {
-      await navigator.clipboard.writeText(command);
-      toast.success('Command copied');
-    } catch {
-      toast.error('Could not copy');
-    }
-  };
-
-  const runInTerminal = async () => {
-    if (!valid || !instanceId) return;
-    setOpening(true);
-    try {
-      const res = await api.post<{ ok: boolean; error?: string }>(
-        `/background/${encodeURIComponent(instanceId)}/open-terminal`,
-        { emulator: 'system' },
-      );
-      if (res.ok) {
-        toast.success('Opening terminal…');
-      } else {
-        toast.error(res.error || 'Failed to open terminal');
-        // Fallback: copy the command.
-        await copyCommand();
-      }
-    } catch (err) {
-      toast.error(`Failed: ${(err as Error).message}`);
-      // Fallback: copy on network error.
-      await copyCommand();
-    } finally {
-      setOpening(false);
-    }
-  };
-
-  return (
-    <div className="attach-button-group">
-      <Button
-        variant="primary"
-        size="sm"
-        onClick={runInTerminal}
-        loading={opening}
-        disabled={!valid}
-        title={valid ? 'Open in system terminal' : 'Invalid attach command'}
-      >
-        <ExternalLink size={14} /> {label}
-      </Button>
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={copyCommand}
-        disabled={!command}
-        title="Copy attach command"
-      >
-        <Copy size={14} />
-      </Button>
-    </div>
-  );
-}

package/bizar-dash/src/web/components/background/TmuxAttachCard.tsx

@@ -1,122 +0,0 @@
-// src/components/background/TmuxAttachCard.tsx — per-instance tmux attach card
-// v3.22.0
-//
-// Shows the tmux session name, a "Copy attach command" button, and
-// an "Open in terminal" button that POSTs to /api/background/:id/open-terminal.
-// When tmux is missing on the host, shows a friendly warning instead.
-
-import { useState } from 'react';
-import { Copy, Terminal, AlertTriangle } from 'lucide-react';
-import { Button } from '../Button';
-import { Card } from '../Card';
-import { useToast } from '../Toast';
-import { api } from '../../lib/api';
-import type { BgInstance } from '../../lib/types';
-
-type TmuxAttachCardProps = {
-  instance: BgInstance;
-};
-
-export function TmuxAttachCard({ instance }: TmuxAttachCardProps) {
-  const toast = useToast();
-  const [opening, setOpening] = useState(false);
-
-  const sessionName = instance.tmuxSession;
-  const attachCommand = sessionName ? `tmux attach -t ${sessionName}` : null;
-
-  const copyCommand = async () => {
-    if (!attachCommand) return;
-    try {
-      await navigator.clipboard.writeText(attachCommand);
-      toast.success('Attach command copied');
-    } catch {
-      toast.error('Could not copy to clipboard');
-    }
-  };
-
-  const openTerminal = async () => {
-    if (!instance.instanceId || !sessionName) return;
-    setOpening(true);
-    try {
-      const result = await api.post<{ ok: boolean; command: string; error?: string }>(
-        `/background/${encodeURIComponent(instance.instanceId)}/open-terminal`,
-        { emulator: 'system' },
-      );
-      if (result.ok) {
-        toast.success('Opening terminal…');
-      } else {
-        toast.error(result.error || 'Failed to open terminal');
-        // Fallback: copy the command so the user can paste it manually.
-        if (attachCommand) {
-          try {
-            await navigator.clipboard.writeText(attachCommand);
-            toast.success('Command copied to clipboard');
-          } catch { /* noop */ }
-        }
-      }
-    } catch (err) {
-      toast.error(`Failed: ${(err as Error).message}`);
-      // Fallback: copy command on network error.
-      if (attachCommand) {
-        try {
-          await navigator.clipboard.writeText(attachCommand);
-          toast.success('Command copied to clipboard');
-        } catch { /* noop */ }
-      }
-    } finally {
-      setOpening(false);
-    }
-  };
-
-  // Don't render anything if there's no tmux session to attach to.
-  if (!sessionName) {
-    return (
-      <Card variant="outlined" className="bg-tmux-card bg-tmux-card-warn">
-        <div className="bg-tmux-card-header">
-          <AlertTriangle size={14} />
-          <span>No tmux session</span>
-        </div>
-        <p className="bg-tmux-hint muted">
-          This instance does not have a tmux session attached.
-          Sessions are created automatically when a background agent starts.
-        </p>
-      </Card>
-    );
-  }
-
-  return (
-    <Card variant="outlined" className="bg-tmux-card">
-      <div className="bg-tmux-card-header">
-        <Terminal size={14} />
-        <span>tmux session</span>
-        {instance.tmuxActive !== false ? (
-          <span className="badge badge-success">live</span>
-        ) : (
-          <span className="badge badge-warning">inactive</span>
-        )}
-      </div>
-
-      <code className="mono bg-tmux-session-name">{sessionName}</code>
-
-      <p className="muted bg-tmux-hint">
-        Attach to the agent's tmux session from a terminal on the host
-        running the dashboard.
-      </p>
-
-      <div className="bg-tmux-card-actions">
-        <Button variant="ghost" size="sm" onClick={copyCommand} title="Copy attach command">
-          <Copy size={14} /> Copy
-        </Button>
-        <Button
-          variant="primary"
-          size="sm"
-          onClick={openTerminal}
-          loading={opening}
-          title="Open in system terminal"
-        >
-          <Terminal size={14} /> Open terminal
-        </Button>
-      </div>
-    </Card>
-  );
-}

package/bizar-dash/src/web/components/chat/AgentChip.tsx

@@ -1,68 +0,0 @@
-// src/components/chat/AgentChip.tsx — custom popover agent picker, replaces <select>.
-
-import { useEffect, useRef, useState } from 'react';
-import { Bot, ChevronDown } from 'lucide-react';
-
-interface Props {
-  agent: string;
-  setAgent: (a: string) => void;
-  agents: Array<{ name: string }>;
-}
-
-export function AgentChip({ agent, setAgent, agents }: Props) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [open]);
-
-  const current = agent || 'no agent';
-  const display = current.startsWith('@') ? current.slice(1) : current;
-
-  return (
-    <div className="chat-agent-chip" ref={ref}>
-      <button
-        type="button"
-        className="chat-agent-chip-btn"
-        onClick={() => setOpen((v) => !v)}
-        aria-haspopup="listbox"
-        aria-expanded={open}
-      >
-        <Bot size={14} />
-        <span>{display}</span>
-        <ChevronDown size={12} className={open ? 'rotated' : ''} />
-      </button>
-      {open && (
-        <div className="chat-agent-chip-menu" role="listbox">
-          <button
-            type="button"
-            role="option"
-            aria-selected={!agent}
-            onClick={() => { setAgent(''); setOpen(false); }}
-          >
-            <span>no agent</span>
-          </button>
-          {agents.map((a) => (
-            <button
-              key={a.name}
-              type="button"
-              role="option"
-              aria-selected={agent === a.name}
-              onClick={() => { setAgent(a.name); setOpen(false); }}
-            >
-              <span>@{a.name}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/bizar-dash/src/web/components/chat/AgentNode.tsx

@@ -1,127 +0,0 @@
-// src/components/chat/AgentNode.tsx — single card in the agent orchestration tree.
-//
-// Two modes:
-//   collapsible=true  — header is a button with a chevron; toggles its
-//                       own summary + children visibility.
-//   collapsible=false — header is a static div (no chevron / no toggle).
-//                       Children render if present but cannot be
-//                       collapsed by the user.
-//
-// FIX #1 (session-collapsed-by-default) is handled at the *parent*
-// (SubAgentList / AgentTree) which decides whether to mount this
-// node's children at all. This component is purely presentational.
-
-import { useState } from 'react';
-
-export type AgentStatus = 'idle' | 'streaming' | 'done' | 'blocked' | 'awaiting';
-
-export interface AgentTreeNode {
-  id: string;
-  name: string;
-  role?: string;
-  status: AgentStatus;
-  summary?: string;
-  children?: AgentTreeNode[];
-}
-
-interface Props {
-  node: AgentTreeNode;
-  depth?: number;
-  collapsible?: boolean;
-  isLast?: boolean;
-  /** Controlled open state — used by SubAgentList so the parent rail
-   *  row's tree-chevron is the single source of truth for collapse. */
-  open?: boolean;
-  onToggle?: (next: boolean) => void;
-}
-
-export function AgentNode({
-  node,
-  depth = 0,
-  collapsible = false,
-  isLast = true,
-  open: controlledOpen,
-  onToggle,
-}: Props) {
-  const [internalOpen, setInternalOpen] = useState<boolean>(collapsible);
-  const isControlled = controlledOpen !== undefined;
-  const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = (next: boolean) => {
-    if (!isControlled) setInternalOpen(next);
-    onToggle?.(next);
-  };
-
-  const hasChildren = (node.children?.length ?? 0) > 0;
-
-  const headContent = (
-    <>
-      {collapsible && (
-        <span
-          className={`agent-node-chevron ${open ? 'open' : ''}`}
-          aria-hidden
-        >
-          ›
-        </span>
-      )}
-      <span
-        className={`agent-node-dot status-${node.status}`}
-        aria-hidden
-      />
-      <span className="agent-node-name">{node.name}</span>
-      {node.role && <span className="agent-node-role chat-mono">{node.role}</span>}
-      <span className={`agent-node-pill status-${node.status}`}>{node.status}</span>
-    </>
-  );
-
-  return (
-    <div
-      className={[
-        'agent-node',
-        `depth-${depth}`,
-        `status-${node.status}`,
-        open ? 'open' : 'closed',
-        isLast ? 'last' : '',
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {collapsible ? (
-        <button
-          type="button"
-          className={`agent-node-head status-${node.status} collapsible`}
-          onClick={(e) => {
-            e.stopPropagation();
-            setOpen(!open);
-          }}
-          aria-expanded={open}
-        >
-          {headContent}
-        </button>
-      ) : (
-        <div className={`agent-node-head status-${node.status}`}>
-          {headContent}
-        </div>
-      )}
-      {open && (
-        <>
-          {node.summary && (
-            <div className="agent-node-summary">{node.summary}</div>
-          )}
-          {hasChildren && (
-            <div className="agent-node-children">
-              {node.children!.map((child, i) => (
-                <AgentNode
-                  key={child.id}
-                  node={child}
-                  depth={depth + 1}
-                  collapsible={false}
-                  isLast={i === node.children!.length - 1}
-                />
-              ))}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}

package/bizar-dash/src/web/components/chat/AgentTree.tsx

@@ -1,80 +0,0 @@
-// src/components/chat/AgentTree.tsx — vertical chain of session cards connected by
-// backbone+L-stub connectors. Two modes:
-//
-//   full tree (variant="full") — renders the root card and all its children.
-//     Used inside the thread head when the active session has sub-agents.
-//
-//   children-only (variant="rail" via SubAgentList) — renders only the children
-//     of the root; the rail row above already shows the root card, so
-//     re-rendering it would duplicate. Children hang directly off the
-//     rail row via standard backbone + L-stub connectors.
-//
-// FIX #1 — the parent (ChatRail) passes `open=false` by default for a
-// freshly-clicked session so the tree is collapsed on first click; the
-// user can open it via the chevron in the row.
-
-import { Fragment } from 'react';
-import { AgentNode, type AgentTreeNode } from './AgentNode';
-
-interface FullTreeProps {
-  tree: { root: AgentTreeNode };
-  variant?: 'full';
-  open?: boolean;
-}
-
-interface ChildrenOnlyProps {
-  children: AgentTreeNode[];
-  variant: 'rail' | 'thread';
-  open?: boolean;
-}
-
-function isFullTree(props: FullTreeProps | ChildrenOnlyProps): props is FullTreeProps {
-  return (props as FullTreeProps).tree !== undefined;
-}
-
-export function AgentTree(props: FullTreeProps | ChildrenOnlyProps) {
-  const open = props.open ?? true;
-
-  if (isFullTree(props)) {
-    return (
-      <div className={`agent-tree variant-${props.variant ?? 'full'}`}>
-        <AgentNode node={props.tree.root} depth={0} open={open} />
-      </div>
-    );
-  }
-
-  // Children-only path (used by SubAgentList hanging off the rail row).
-  const list = props.children ?? [];
-  return (
-    <div className={`agent-tree variant-${props.variant} agent-tree-children-only`}>
-      <div className="agent-tree-children-body">
-        {list.map((child, i) => (
-          <Fragment key={child.id}>
-            <AgentNode
-              node={child}
-              depth={0}
-              collapsible={false}
-              open={open}
-              isLast={i === list.length - 1}
-            />
-          </Fragment>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/* ── SubAgentList — convenience wrapper used by the ChatRail to render
-   the children of a session's tree directly under the active row. ── */
-export function SubAgentList({
-  children,
-  variant = 'rail',
-  open = true,
-}: {
-  children: AgentTreeNode[];
-  variant?: 'rail' | 'thread';
-  open?: boolean;
-}) {
-  if (!open) return null;
-  return <AgentTree variant={variant} open={open} children={children} />;
-}