@taicho-ai/cli 0.1.0

package/src/ui/ProposalCard.tsx

@@ -0,0 +1,96 @@
+import { useState, type MutableRefObject } from "react";
+import { Box, Text, type Key } from "ink";
+import TextInput from "ink-text-input";
+import type { ApprovalDecision } from "@taicho-ai/framework/core/run";
+
+/** The one interaction grammar: propose -> approve. Used for agent creation,
+ *  coaching notes, exemplar promotion. */
+export interface CardField { label: string; value: string; }
+
+/** A card's keyboard handler. Cards publish this to App's single, boot-registered useInput (via a
+ *  ref) instead of owning a useInput of their own — see ProposalCard/QuestionCard for why. */
+export type CardKeyHandler = (input: string, key: Key) => void;
+
+export function ProposalCard(props: {
+  title: string;
+  fields: CardField[];
+  supersedes?: string;          // "this replaces: ..." line
+  keyHandlerRef: MutableRefObject<CardKeyHandler | null>;
+  onDecision: (d: ApprovalDecision) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [editValues, setEditValues] = useState<Record<string, string>>(() =>
+    Object.fromEntries(props.fields.map((f) => [f.label, f.value]))
+  );
+  const [fieldIndex, setFieldIndex] = useState(0);
+
+  // Published during render so App's boot-registered useInput forwards the captain's first keystroke
+  // (a card-owned useInput registers a beat late and would drop it — see QuestionCard). In edit mode
+  // we only handle Esc here; field text is typed by the TextInput, whose input handling fires on its own.
+  props.keyHandlerRef.current = (input, key) => {
+    if (editing) {
+      // Esc from edit mode returns to y/n/e prompt
+      if (key.escape) { setEditing(false); setFieldIndex(0); }
+      return;
+    }
+    if (input === "y") props.onDecision({ type: "approve" });
+    else if (input === "n") props.onDecision({ type: "reject" });
+    else if (input === "e") { setEditing(true); setFieldIndex(0); }
+  };
+
+  if (editing) {
+    const currentField = props.fields[fieldIndex];
+    const isLast = fieldIndex === props.fields.length - 1;
+
+    const handleSubmit = (value: string) => {
+      const updated = { ...editValues, [currentField.label]: value };
+      setEditValues(updated);
+      if (isLast) {
+        // Collect only changed fields (non-empty overrides)
+        const changed: Record<string, string> = {};
+        for (const f of props.fields) {
+          if (updated[f.label] !== f.value && updated[f.label] !== "") {
+            changed[f.label] = updated[f.label];
+          }
+        }
+        props.onDecision({ type: "edit", draft: changed });
+      } else {
+        setFieldIndex(fieldIndex + 1);
+      }
+    };
+
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
+        <Text color="yellow" bold>Editing — Tab/Enter to advance, Esc to cancel</Text>
+        {props.fields.map((f, i) => (
+          <Box key={f.label}>
+            <Text color="gray">{f.label.padEnd(7)}</Text>
+            {i === fieldIndex ? (
+              <TextInput
+                value={editValues[f.label]}
+                onChange={(v) => setEditValues({ ...editValues, [f.label]: v })}
+                onSubmit={handleSubmit}
+              />
+            ) : (
+              <Text>{editValues[f.label]}</Text>
+            )}
+          </Box>
+        ))}
+        <Text color="gray">field {fieldIndex + 1}/{props.fields.length} — Enter to advance, Enter on last to submit</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
+      <Text color="cyan" bold>{props.title}</Text>
+      {props.fields.map((f) => (
+        <Text key={f.label}>
+          <Text color="gray">{f.label.padEnd(7)}</Text>{f.value}
+        </Text>
+      ))}
+      {props.supersedes && <Text color="yellow">replaces: {props.supersedes}</Text>}
+      <Text color="gray">approve? [y]es [n]o [e]dit</Text>
+    </Box>
+  );
+}

package/src/ui/QuestionCard.tsx

@@ -0,0 +1,61 @@
+import { useState, type MutableRefObject } from "react";
+import { Box, Text } from "ink";
+import TextInput from "ink-text-input";
+import type { ApprovalDecision } from "@taicho-ai/framework/core/run";
+import type { CardKeyHandler } from "./ProposalCard";
+import { cycleIndex } from "./slash";
+
+/** An agent's question to the captain: numbered options (pick with 1-N or ↑↓+Enter) plus a free-text
+ *  escape hatch ("type your own"). Mirrors ProposalCard's keyHandlerRef + typing-mode-with-TextInput. */
+export function QuestionCard(props: {
+  question: string;
+  options: string[];
+  keyHandlerRef: MutableRefObject<CardKeyHandler | null>;
+  onDecision: (d: ApprovalDecision) => void;
+}) {
+  const [selected, setSelected] = useState(0);
+  const [typing, setTyping] = useState(false);
+  const [draft, setDraft] = useState("");
+  const total = props.options.length + 1; // options + the "type your own" row
+  const answer = (a: string) => props.onDecision({ type: "answered", answer: a });
+
+  // Published synchronously during render (NOT via a card-owned useInput) so App's boot-registered
+  // useInput can forward the captain's very FIRST keystroke. A card-owned listener registers via a
+  // useEffect that runs a beat after the render commits, so the first key would arrive before the
+  // card is listening and be silently dropped — the hang this fixes. In typing mode we only handle
+  // Esc; the chars are typed by the TextInput, whose own input handling fires independently.
+  props.keyHandlerRef.current = (input, key) => {
+    if (typing) { if (key.escape) setTyping(false); return; } // typing handled by the TextInput
+    if (key.escape) { props.onDecision({ type: "reject" }); return; }
+    if (key.upArrow) { setSelected((s) => cycleIndex(s, total, -1)); return; }
+    if (key.downArrow) { setSelected((s) => cycleIndex(s, total, +1)); return; }
+    if (key.return) { selected < props.options.length ? answer(props.options[selected]) : setTyping(true); return; }
+    const n = Number(input); // 1-N fast path
+    if (Number.isInteger(n) && n >= 1 && n <= props.options.length) answer(props.options[n - 1]);
+  };
+
+  if (typing)
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
+        <Text color="yellow" bold>{props.question}</Text>
+        <Box>
+          <Text color="gray">your answer: </Text>
+          <TextInput value={draft} onChange={setDraft} onSubmit={(v) => (v.trim() ? answer(v.trim()) : setTyping(false))} />
+        </Box>
+        <Text color="gray">Enter to submit · Esc to go back</Text>
+      </Box>
+    );
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
+      <Text color="cyan" bold>{props.question}</Text>
+      {props.options.map((o, i) => (
+        <Text key={i} color={i === selected ? "cyan" : undefined}>{`${i === selected ? "›" : " "} ${i + 1}. ${o}`}</Text>
+      ))}
+      <Text color={selected === props.options.length ? "cyan" : "gray"}>
+        {`${selected === props.options.length ? "›" : " "} ✎ type your own answer`}
+      </Text>
+      <Text color="gray">{`1-${props.options.length} or ↑↓ + Enter · esc to cancel`}</Text>
+    </Box>
+  );
+}

package/src/ui/SquadPanes.tsx

@@ -0,0 +1,155 @@
+/** Plan 10 Phase 4 — the split-pane live view. One pane per live agent: a status line (glyph ·
+ *  agent · state · current tool+argsPreview · elapsed) plus its live stream (recent tool lines with
+ *  argsPreview and the streamed/final text). Renders from the SAME AgentStatus model the bar does
+ *  (agent-status.ts) plus a lightweight per-run activity feed the App builds off the one event
+ *  stream — nothing is invented or re-derived here.
+ *
+ *  Lifecycle: a pane appears when an agent goes live and lingers in a dim `done` settle state for a
+ *  beat after its run leaves the status map (so the captain sees the result land) before collapsing.
+ *  Visible panes are capped by terminal height with a "+N more" overflow — the bar stays the
+ *  complete summary. Below a minimum terminal size the panes degrade to bar-only (see resolveLayout).
+ *  Display-only: the REPL always owns the keyboard (Plan 10 scope). */
+import { useState, useEffect, useRef, type ReactNode } from "react";
+import { Box, Text } from "ink";
+import type { AgentStatus, AgentState } from "@taicho-ai/framework/core/agent-status";
+import type { ViewMode } from "@taicho-ai/framework/store/prefs";
+
+/** Per-run activity feed the App accumulates from the event stream and hands to the panes: recent
+ *  tool lines (each already a redacted `→ tool argsPreview`). The streamed/final REPLY text is NOT
+ *  duplicated here — it renders in the main scrollback (the reply channel); echoing it in the pane
+ *  raced that channel (the pane showed the reply before it committed / the trace persisted). The
+ *  pane's live `writing`/`working` state + tool lines carry the transparency; the bar + scrollback
+ *  carry the text. */
+export interface PaneEntry { lines: string[] }
+export type PaneFeedMap = ReadonlyMap<string, PaneEntry>;
+
+const GLYPH: Record<AgentState, string> = {
+  idle: "·", thinking: "…", writing: "✎", working: "●", delegating: "⇢", waiting: "✋",
+};
+
+/** Below either bound the panes collapse to bar-only (the bar always fits one line). */
+export const MIN_PANE_COLS = 50;
+export const MIN_PANE_ROWS = 10;
+
+const SETTLE_MS = 1200;   // how long a completed pane lingers in its `done` state before collapsing
+const PANE_BODY = 3;      // max body (activity) lines shown per pane
+const PANE_HEIGHT = 5;    // header + body + spacer budget, for the terminal-height pane cap
+const RESERVED_ROWS = 6;  // rows kept for the banner/scrollback/bar/input when budgeting pane space
+const RULE = "▎";         // the left-accent that reads as a pane's column edge (cheap vs an Ink border)
+
+/** Pure layout decision shared by the App and its tests: which surfaces show for a mode + terminal
+ *  size. Panes hide in `bar` mode and whenever the terminal is too small (degrade
+ *  to bar-only); the bar stays only in `bar`/`both` (and everywhere when too small to render panes).
+ *  Plan 13's consistent-block view is the DEFAULT render — it replaces the panes as the primary squad view. */
+export function resolveLayout(viewMode: ViewMode, columns: number, rows: number): { showPanes: boolean; showBar: boolean } {
+  const tooSmall = columns < MIN_PANE_COLS || rows < MIN_PANE_ROWS;
+  return {
+    showPanes: viewMode !== "bar" && !tooSmall,
+    // Bar is the complete summary; it owns the surface in bar/both, and is the fallback whenever the
+    // panes can't render because the terminal is too small.
+    showBar: viewMode === "bar" || viewMode === "both" || tooSmall,
+  };
+}
+
+/** Collapse to a single line: strip the inline markdown markers the REPL is careful to hide (so a
+ *  mid-stream tail can never surface raw `**bold**` / `# heading` / `` `code` ``) and cap. Kept
+ *  narrow (backtick/asterisk/hash) so tool names + args like `delegate_task` survive intact. */
+export function paneOneLine(s: string, cap = 72): string {
+  const flat = s.replace(/[`*#]/g, "").replace(/\s+/g, " ").trim();
+  return flat.length > cap ? flat.slice(0, cap - 1) + "…" : flat;
+}
+
+interface LivePane {
+  runId: string; agent: string; state: AgentState; tool?: string; argsPreview?: string;
+  since: number; waiting: boolean; lines: string[]; done: boolean;
+}
+
+function paneColor(p: LivePane): string {
+  if (p.done) return "gray";
+  if (p.waiting) return "red";
+  if (p.state === "delegating") return "magenta";
+  if (p.state === "writing") return "green";
+  return "cyan";
+}
+
+function headerText(p: LivePane, now: number, width: number): string {
+  const secs = Math.max(0, Math.round((now - p.since) / 1000));
+  const label = p.done
+    ? "done"
+    : p.waiting
+      ? `waiting: ${p.tool ?? ""}`.trim()
+      : `${p.state}${p.tool ? ` ${p.tool}${p.argsPreview ? ` ${p.argsPreview}` : ""}` : ""}`;
+  return paneOneLine(`${GLYPH[p.state]} ${p.agent} ${label} · ${secs}s`, width);
+}
+
+/** One pane's rows (header + indented body), as a flat list of plain colored Text. Deliberately
+ *  border- and Box-free: an Ink bordered/nested Box re-lays-out its yoga tree on every event, which
+ *  is measurably slower and can perturb timing-sensitive flows. A left-accent rule (the color-coded
+ *  column edge) reads as the pane's edge for cheap. */
+function paneRows(pane: LivePane, width: number, now: number, prefix: string): ReactNode[] {
+  const color = paneColor(pane);
+  const body = pane.lines.map((l) => paneOneLine(l, width - 4)).slice(-PANE_BODY);
+  return [
+    <Text key={`${prefix}-h`} color={color} bold={pane.waiting}>{`${RULE} ${headerText(pane, now, width - 2)}`}</Text>,
+    ...body.map((l, i) => <Text key={`${prefix}-b${i}`} color={color} dimColor>{`${RULE}   ${l}`}</Text>),
+  ];
+}
+
+export function SquadPanes({ statuses, feed, columns, rows }: {
+  statuses: AgentStatus[]; feed: PaneFeedMap; columns: number; rows: number;
+}) {
+  const [, setTick] = useState(0);
+  // settleRef: runs that just left the status map, kept briefly in a `done` snapshot. prevRef: the
+  // panes rendered last frame, so a disappearance is detected against a self-contained snapshot
+  // (the App may have already cleared the feed by the time a pane collapses).
+  const settleRef = useRef<Map<string, { pane: LivePane; at: number }>>(new Map());
+  const prevRef = useRef<Map<string, LivePane>>(new Map());
+
+  const live: LivePane[] = statuses.map((s) => ({
+    runId: s.runId, agent: s.agent, state: s.state, tool: s.tool, argsPreview: s.argsPreview,
+    since: s.since, waiting: s.waiting,
+    lines: feed.get(s.runId)?.lines ?? [], done: false,
+  }));
+  const liveIds = new Set(live.map((p) => p.runId));
+  const liveById = new Map(live.map((p) => [p.runId, p]));
+
+  const now = Date.now();
+  const settle = settleRef.current;
+  for (const id of liveIds) settle.delete(id);                              // a reappeared run cancels its settle
+  for (const [id, pane] of prevRef.current)                                 // newly disappeared → snapshot in `done`
+    if (!liveIds.has(id) && !settle.has(id)) settle.set(id, { pane: { ...pane, done: true }, at: now });
+  for (const [id, ent] of settle) if (now - ent.at > SETTLE_MS) settle.delete(id); // expire
+  prevRef.current = liveById;
+  const settling = [...settle.values()].map((e) => e.pane);
+
+  const all = [...live, ...settling];
+  // A light ticker advances the elapsed readouts + expires settle panes — but ONLY while panes are
+  // up. Left always-on it re-renders the whole App every tick even at rest, which measurably slows
+  // the REPL (and perturbed a timing-sensitive steering test); gated, an idle REPL pays nothing.
+  const hasPanes = all.length > 0;
+  useEffect(() => {
+    if (!hasPanes) return;
+    const t = setInterval(() => setTick((n) => n + 1), 500);
+    return () => clearInterval(t);
+  }, [hasPanes]);
+
+  if (!all.length) return null;
+  if (columns < MIN_PANE_COLS || rows < MIN_PANE_ROWS) return null;         // degrade to bar-only
+
+  const avail = Math.max(PANE_HEIGHT, rows - RESERVED_ROWS);
+  const maxPanes = Math.max(1, Math.floor(avail / PANE_HEIGHT));
+  const shown = all.slice(0, maxPanes);
+  const hidden = all.length - shown.length;
+  const paneWidth = Math.min(columns - 4, 96);
+
+  // One flat column of Text lines — a spacer row between panes gives the split-pane separation
+  // without any nested Box (keeps the yoga tree, and so per-event render cost, minimal).
+  const out: ReactNode[] = [];
+  shown.forEach((p, i) => {
+    if (i > 0) out.push(<Text key={`sp-${p.runId}`}> </Text>);
+    out.push(...paneRows(p, paneWidth, now, p.runId));
+  });
+  if (hidden > 0) out.push(<Text key="more" dimColor>{`  +${hidden} more (the bar lists them all)`}</Text>);
+
+  return <Box flexDirection="column">{out}</Box>;
+}

package/src/ui/StatusBar.tsx

@@ -0,0 +1,72 @@
+/** Plan 10 Phase 3 — the live status bar. One compact segment per active run (glyph · agent · state
+ *  · tool+argsPreview · elapsed), pinned at the bottom directly above the input. `waiting` is rendered
+ *  loud (the "the squad is stalled on YOU" signal). Hidden when nothing runs; "+N more" past width.
+ *  Renders purely from the AgentStatus model (agent-status.ts) — nothing invented here. */
+import { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import type { AgentStatus } from "@taicho-ai/framework/core/agent-status";
+
+const GLYPH: Record<AgentStatus["state"], string> = {
+  idle: "·", thinking: "…", writing: "✎", working: "●", delegating: "⇢", waiting: "✋",
+};
+
+/** One segment's plain text (used for both rendering and width budgeting). */
+export function segmentText(s: AgentStatus, now: number, cap = 64): string {
+  const secs = Math.max(0, Math.round((now - s.since) / 1000));
+  const tool = s.tool ? ` ${s.tool}${s.argsPreview ? `(${s.argsPreview})` : ""}` : "";
+  const label = s.waiting ? `waiting: ${s.tool ?? ""}`.trim() : `${s.state}${tool}`;
+  const text = `${GLYPH[s.state]} ${s.agent} ${label} ${secs}s`;
+  return text.length > cap ? text.slice(0, cap - 1) + "…" : text;
+}
+
+export function StatusBar({ statuses, width }: { statuses: AgentStatus[]; width: number }) {
+  // A light ticker advances the elapsed readouts without any engine event.
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    const t = setInterval(() => setTick((n) => n + 1), 500);
+    return () => clearInterval(t);
+  }, []);
+  if (!statuses.length) return null;
+
+  const now = Date.now();
+  // Worst-case " +N more" tail width. Reserve it for the FIRST segment too (else a narrow terminal
+  // <~72 cols or ≥10 hidden agents pushes the tail past the single line and soft-wraps). Cap each
+  // segment to leave tail room so even one segment + tail fits.
+  const tailLen = ` +${statuses.length} more`.length;
+  const segCap = Math.min(64, Math.max(8, width - tailLen));
+  const segs = statuses.map((s) => ({ s, text: segmentText(s, now, segCap) }));
+  const SEP = 3; // " · "
+  // Fast path: if everything fits on the line with NO tail, show all (no wasted tail reservation).
+  const totalAll = segs.reduce((sum, seg, i) => sum + seg.text.length + (i ? SEP : 0), 0);
+  let shown: typeof segs;
+  if (totalAll <= width) {
+    shown = segs;
+  } else {
+    shown = [];
+    let used = 0;
+    for (const seg of segs) {
+      const add = seg.text.length + (shown.length ? SEP : 0);
+      if (shown.length && used + add > width - tailLen) break; // reserve room for the "+N more" tail
+      shown.push(seg);
+      used += add;
+    }
+  }
+  const hidden = segs.length - shown.length;
+
+  return (
+    <Box>
+      {shown.map((seg, i) => (
+        <Text key={seg.s.runId}>
+          {i > 0 ? <Text dimColor> · </Text> : null}
+          <Text
+            color={seg.s.waiting ? "red" : seg.s.state === "delegating" ? "magenta" : seg.s.state === "writing" ? "green" : "cyan"}
+            bold={seg.s.waiting}
+          >
+            {seg.text}
+          </Text>
+        </Text>
+      ))}
+      {hidden > 0 && <Text dimColor>{` +${hidden} more`}</Text>}
+    </Box>
+  );
+}

package/src/ui/WorkflowBrowser.tsx

@@ -0,0 +1,141 @@
+/** Plan 25 — the /workflows browser. A docked, read-only inspection mode over the chat, mirroring the Org
+ *  browser's grammar (round cyan border, ▸ selection, dim ·-separated footer). Three screens: the LIST of
+ *  teams and their workflow status, a team's STEPS (the graph), and a workflow's past RUNS. Running and
+ *  proposing stay conversational (root's run_workflow / propose_workflow tools); this surface is for
+ *  seeing what a team's process is and how its runs went. Display-only — the REPL owns the keyboard; this
+ *  component just publishes a key handler on props.keyRef, exactly like OrgBrowser. */
+import { Box, Text } from "ink";
+import { useEffect, type MutableRefObject } from "react";
+import type { CardKeyHandler } from "./ProposalCard";
+import { listWorkflowRows, workflowRunRows, type WorkflowRow } from "./workflow-browser-model";
+import { loadWorkflowDef } from "@taicho-ai/framework/store/workflows";
+import type { WorkflowNode } from "@taicho-ai/graph";
+
+export interface WorkflowUiState {
+  sel: number; // selected team index in the list
+  view?: string; // team id whose steps are shown (drill-in)
+  runsFor?: string; // team id whose past runs are shown
+}
+
+export function initialWorkflowUi(): WorkflowUiState {
+  return { sel: 0 };
+}
+
+export interface WorkflowBrowserProps {
+  ws: string;
+  width: number;
+  st: WorkflowUiState;
+  onChange: (next: WorkflowUiState | ((s: WorkflowUiState) => WorkflowUiState)) => void;
+  keyRef: MutableRefObject<CardKeyHandler | null>;
+  onClose: () => void;
+  bump?: number; // bump to force a re-read after a mutation elsewhere
+}
+
+const clamp = (i: number, len: number): number => (len === 0 ? 0 : Math.max(0, Math.min(i, len - 1)));
+
+const runGlyph = (status: string): { g: string; color: string } =>
+  status === "done" ? { g: "✓", color: "green" }
+  : status === "failed" ? { g: "✗", color: "red" }
+  : status === "interrupted" ? { g: "?", color: "yellow" }
+  : status === "parked" ? { g: "✋", color: "red" }
+  : { g: "◐", color: "yellow" };
+
+/** A compact one-line label for a step in the graph view. */
+function stepLabel(s: WorkflowNode): { glyph: string; color: string; who: string; io: string } {
+  switch (s.kind) {
+    case "agent": return { glyph: "▸", color: "cyan", who: s.run, io: [s.consumes.length ? s.consumes.join(",") : "", s.produces ? `→ ${s.produces}` : ""].filter(Boolean).join("  ") };
+    case "check": return { glyph: "✓", color: "green", who: `check`, io: s.check };
+    case "human": return { glyph: "✋", color: "red", who: `you`, io: s.choices.join(" │ ") };
+    case "branch": return { glyph: "⑂", color: "yellow", who: s.branch, io: Object.keys(s.routes).join(" / ") };
+    case "parallel": return { glyph: "⇉", color: "magenta", who: "parallel", io: s.produces ? `→ ${s.produces}` : "" };
+  }
+}
+
+export function WorkflowBrowser(props: WorkflowBrowserProps): React.ReactElement {
+  const rows = listWorkflowRows(props.ws);
+  const st = props.st;
+
+  const handler: CardKeyHandler = (input, key) => {
+    if (st.view || st.runsFor) {
+      if (key.escape) props.onChange((s) => ({ ...s, view: undefined, runsFor: undefined }));
+      return;
+    }
+    if (key.escape) { props.onClose(); return; }
+    if (key.upArrow) { props.onChange((s) => ({ ...s, sel: clamp(s.sel - 1, rows.length) })); return; }
+    if (key.downArrow) { props.onChange((s) => ({ ...s, sel: clamp(s.sel + 1, rows.length) })); return; }
+    const row = rows[clamp(st.sel, rows.length)];
+    if (key.return) { if (row?.kind === "structured") props.onChange((s) => ({ ...s, view: row.team })); return; }
+    if (input === "h") { if (row?.kind === "structured") props.onChange((s) => ({ ...s, runsFor: row.team })); return; }
+  };
+  props.keyRef.current = handler;
+  useEffect(() => () => { props.keyRef.current = null; }, []); // publish during render; clear on unmount
+
+  // ── STEPS view ──────────────────────────────────────────────────────────────────────────────────
+  if (st.view) {
+    const def = loadWorkflowDef(props.ws, st.view);
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1} width={props.width} marginTop={1}>
+        <Text color="cyan" bold>WORKFLOW · {st.view} <Text dimColor>— {def ? `${def.id} · ${def.steps.length} steps` : "no structured workflow"}</Text></Text>
+        <Box height={1} />
+        {def?.steps.map((s, i) => {
+          const l = stepLabel(s);
+          return (
+            <Text key={s.id}>
+              <Text color={l.color}>{l.glyph}</Text> {String(i + 1).padStart(2)} <Text color="cyan">{s.id}</Text>  <Text dimColor>{l.who}{l.io ? `  ${l.io}` : ""}</Text>
+            </Text>
+          );
+        })}
+        <Box height={1} />
+        <Text dimColor>← esc back{def ? " · h past runs" : ""}</Text>
+      </Box>
+    );
+  }
+
+  // ── RUNS view ───────────────────────────────────────────────────────────────────────────────────
+  if (st.runsFor) {
+    const def = loadWorkflowDef(props.ws, st.runsFor);
+    const runs = def ? workflowRunRows(props.ws, def) : [];
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1} width={props.width} marginTop={1}>
+        <Text color="cyan" bold>WORKFLOWS · {st.runsFor} runs <Text dimColor>— {runs.length} run{runs.length === 1 ? "" : "s"}</Text></Text>
+        <Box height={1} />
+        {runs.length === 0 && <Text dimColor>never run</Text>}
+        {runs.map((r) => {
+          const g = runGlyph(r.status);
+          return <Text key={r.runId}><Text color={g.color}>{g.g}</Text> <Text color="cyan">{r.runId}</Text>  <Text dimColor>{r.status} · {r.done}/{r.total}</Text></Text>;
+        })}
+        <Box height={1} />
+        <Text dimColor>← esc back</Text>
+      </Box>
+    );
+  }
+
+  // ── LIST screen ─────────────────────────────────────────────────────────────────────────────────
+  const structured = rows.filter((r) => r.kind === "structured").length;
+  const sel = clamp(st.sel, rows.length);
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1} width={props.width} marginTop={1}>
+      <Text><Text color="cyan" bold>WORKFLOWS </Text><Text dimColor>  {rows.length} team{rows.length === 1 ? "" : "s"} · {structured} structured</Text></Text>
+      <Box height={1} />
+      {rows.length === 0 && <Text dimColor>no teams yet — create one, then propose a workflow for it</Text>}
+      {rows.map((r, i) => <WorkflowListRow key={r.team} row={r} on={i === sel} />)}
+      <Box height={1} />
+      <Text dimColor>↑↓ · ⏎ steps · h past runs · esc · (run/propose via root)</Text>
+    </Box>
+  );
+}
+
+function WorkflowListRow({ row, on }: { row: WorkflowRow; on: boolean }): React.ReactElement {
+  const summary =
+    row.kind === "structured" ? `${row.steps} steps${row.gates ? ` · ${row.gates} gate${row.gates === 1 ? "" : "s"}` : ""}`
+    : row.kind === "prose" ? "prose (runs on the agentic brief)"
+    : "— no workflow";
+  const last = row.kind === "structured" && row.runs > 0 ? runGlyph(row.lastStatus ?? "") : null;
+  return (
+    <Text>
+      <Text color={on ? "cyan" : undefined} bold={on}>{on ? "▸ " : "  "}{row.team.padEnd(14)}</Text>
+      <Text dimColor>{summary}</Text>
+      {last && <Text> <Text color={last.color}>{last.g}</Text><Text dimColor> {row.runs} run{row.runs === 1 ? "" : "s"}</Text></Text>}
+    </Text>
+  );
+}

package/src/ui/banner.ts

@@ -0,0 +1,10 @@
+/** The taicho launch banner — ANSI Shadow figlet, pre-rendered so there is no figlet runtime
+ *  dependency (bundles cleanly into the single binary). Shown once at the top on launch. */
+export const BANNER = `
+████████╗ █████╗ ██╗ ██████╗██╗  ██╗ ██████╗
+╚══██╔══╝██╔══██╗██║██╔════╝██║  ██║██╔═══██╗
+   ██║   ███████║██║██║     ███████║██║   ██║
+   ██║   ██╔══██║██║██║     ██╔══██║██║   ██║
+   ██║   ██║  ██║██║╚██████╗██║  ██║╚██████╔╝
+   ╚═╝   ╚═╝  ╚═╝╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝
+`;