@polderlabs/bizar 6.3.0 → 7.0.0

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;

package/bizar-dash/src/web/components/goals/GoalInput.tsx

@@ -0,0 +1,86 @@
+// src/web/components/goals/GoalInput.tsx — plain-English goal input.
+//
+// v6.4.0 — F-036 (Goal Planner UI). Free-form textarea + submit
+// button. The submit fires a POST to /api/goal-planner/plan and
+// returns the resulting Plan to the parent via onSubmit(plan).
+import { useState } from 'react';
+import { Send, Sparkles } from 'lucide-react';
+import { Button } from '../Button';
+import { api } from '../../lib/api';
+import { useToast } from '../Toast';
+import type { Plan } from '../../lib/goapPlanner';
+
+interface Props {
+  onPlan?: (plan: Plan) => void;
+  /** Optional: when true, the input renders in compact (toolbar) mode. */
+  compact?: boolean;
+}
+
+const MAX_CHARS = 4000;
+
+export function GoalInput({ onPlan, compact = false }: Props) {
+  const toast = useToast();
+  const [goal, setGoal] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const submit = async () => {
+    const trimmed = goal.trim();
+    if (!trimmed) {
+      toast.error('Enter a goal first.');
+      return;
+    }
+    if (trimmed.length > MAX_CHARS) {
+      toast.error(`Goal must be ${MAX_CHARS} chars or fewer.`);
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const plan = await api.post<Plan>('/goal-planner/plan', { goal: trimmed });
+      if (onPlan) onPlan(plan);
+      toast.success(`Plan generated: ${plan.steps.length} steps.`);
+    } catch (err) {
+      const msg = (err as Error)?.message || 'Planner failed';
+      toast.error(`Planner failed: ${msg}`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className={`goal-input${compact ? ' goal-input-compact' : ''}`}>
+      <label className="goal-input-label" htmlFor="goal-input-textarea">
+        <Sparkles size={14} aria-hidden />
+        Plain-English goal
+      </label>
+      <textarea
+        id="goal-input-textarea"
+        className="goal-input-textarea"
+        value={goal}
+        onChange={(e) => setGoal(e.target.value)}
+        placeholder="e.g. Research the latest advancements in quantum computing, then design and build a small demo, test it, and document the result."
+        disabled={submitting}
+        maxLength={MAX_CHARS}
+        rows={compact ? 3 : 5}
+        data-testid="goal-input-textarea"
+      />
+      <div className="goal-input-footer">
+        <span className="goal-input-counter" data-testid="goal-input-counter">
+          {goal.length} / {MAX_CHARS}
+        </span>
+        <Button
+          variant="primary"
+          size="md"
+          onClick={submit}
+          loading={submitting}
+          disabled={submitting || !goal.trim()}
+          data-testid="goal-input-submit"
+        >
+          <Send size={14} aria-hidden />
+          {submitting ? 'Planning…' : 'Generate plan'}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default GoalInput;

package/bizar-dash/src/web/components/goals/PlanVisualization.tsx

@@ -0,0 +1,111 @@
+// src/web/components/goals/PlanVisualization.tsx — collapsible action tree.
+//
+// v6.4.0 — F-036 (Goal Planner UI). Renders the A* plan as a list of
+// collapsible steps. Each step shows action, agent, deps, cost,
+// and a click-to-expand description.
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, Clock, GitBranch } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../Card';
+import { Tag } from '../Tag';
+import { cn } from '../../lib/utils';
+import type { Plan, PlannedStep } from '../../lib/goapPlanner';
+
+interface Props {
+  plan: Plan | null;
+}
+
+function formatDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return '—';
+  const total = Math.floor(ms / 1000);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  if (h > 0) return `${h}h ${m}m`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
+
+export function PlanVisualization({ plan }: Props) {
+  if (!plan) {
+    return (
+      <Card className="plan-visualization">
+        <CardTitle>Execution plan</CardTitle>
+        <CardMeta>Submit a goal to generate a plan.</CardMeta>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="plan-visualization" data-testid="plan-visualization">
+      <div className="plan-viz-header">
+        <CardTitle>
+          <GitBranch size={14} aria-hidden /> Execution plan
+        </CardTitle>
+        <div className="plan-viz-badges">
+          <Tag variant="info">{plan.steps.length} steps</Tag>
+          <Tag variant="accent">Cost {plan.totalCost}</Tag>
+          <Tag variant="success">
+            <Clock size={10} aria-hidden /> {formatDuration(plan.totalDurationMs)}
+          </Tag>
+        </div>
+      </div>
+      <CardMeta className="plan-viz-goal">Goal: {plan.goal}</CardMeta>
+      <ol className="plan-viz-tree" role="tree">
+        {plan.steps.map((step) => (
+          <PlanStepRow key={step.id} step={step} />
+        ))}
+      </ol>
+    </Card>
+  );
+}
+
+function PlanStepRow({ step }: { step: PlannedStep }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <li className="plan-viz-row" role="treeitem" aria-expanded={open}>
+      <button
+        type="button"
+        className="plan-viz-row-head"
+        onClick={() => setOpen((v) => !v)}
+        data-testid={`plan-step-${step.id}`}
+      >
+        <span className="plan-viz-chevron">
+          {open ? <ChevronDown size={14} aria-hidden /> : <ChevronRight size={14} aria-hidden />}
+        </span>
+        <span className={cn('plan-viz-action', `is-${step.action}`)}>{step.action}</span>
+        <span className="plan-viz-title">{step.title}</span>
+        <span className="plan-viz-agent">@{step.agent}</span>
+        <span className="plan-viz-cost">{step.estimatedCost}</span>
+      </button>
+      {open && (
+        <div className="plan-viz-row-body" data-testid={`plan-step-${step.id}-body`}>
+          <p>{step.description}</p>
+          {step.deps.length > 0 && (
+            <div className="plan-viz-deps">
+              <strong>Deps:</strong>
+              <ul>
+                {step.deps.map((d) => (
+                  <li key={d}>
+                    <code>{d}</code>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          <div className="plan-viz-effects">
+            <strong>Effects:</strong>
+            <ul>
+              {step.effects.map((e) => (
+                <li key={e}>
+                  <code>{e}</code>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </li>
+  );
+}
+
+export default PlanVisualization;