@multiclawcli/dashboard 0.3.1 → 0.4.0

package/dist/tui.js

@@ -0,0 +1,1548 @@
+// src/tui/index.ts
+import { render } from "ink";
+import { createElement } from "react";
+
+// src/tui/App.tsx
+import * as path from "path";
+import { isAbortError, Orchestrator } from "@multiclawcli/core";
+import { Box as Box5, Text as Text5, useApp, useInput, useWindowSize } from "ink";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+
+// src/tui/commands.ts
+var COMMANDS = [
+  { name: "agents", description: "List the configured team", availability: "always" },
+  {
+    name: "focus",
+    args: "<id>",
+    description: "Focus an agent by id",
+    availability: "always"
+  },
+  { name: "clear", description: "Clear the focused agent's log", availability: "always" },
+  {
+    name: "history",
+    description: "Browse finished turns",
+    availability: "always"
+  },
+  {
+    name: "cancel",
+    description: "Cancel the running turn and its queue",
+    availability: "running"
+  },
+  { name: "help", description: "Show the key map", availability: "always" },
+  { name: "quit", description: "Exit the console", availability: "always" }
+];
+function availableCommands(running) {
+  const phase = running ? "running" : "idle";
+  return COMMANDS.filter((c) => c.availability === "always" || c.availability === phase);
+}
+function matchCommands(query, running) {
+  const q = query.trim().toLowerCase();
+  const pool = availableCommands(running);
+  if (!q) return pool;
+  const byName = [];
+  const byDescription = [];
+  for (const command of pool) {
+    if (command.name.startsWith(q)) byName.push(command);
+    else if (command.description.toLowerCase().includes(q)) byDescription.push(command);
+  }
+  return [...byName, ...byDescription];
+}
+function isCommandLine(text) {
+  return text.startsWith("/");
+}
+function menuQuery(text) {
+  if (!isCommandLine(text)) return void 0;
+  const rest = text.slice(1);
+  return /\s/.test(rest) ? void 0 : rest;
+}
+function parseCommand(text) {
+  if (!isCommandLine(text)) return void 0;
+  const [name = "", ...args] = text.slice(1).trim().split(/\s+/);
+  return name ? { name, args } : void 0;
+}
+
+// src/tui/components/chrome.tsx
+import { Box, Text } from "ink";
+
+// src/tui/format.ts
+function truncate(text, max) {
+  if (max <= 0) return "";
+  if (text.length <= max) return text;
+  return `${text.slice(0, Math.max(0, max - 1))}\u2026`;
+}
+function formatDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+  const totalSeconds = Math.round(ms / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  if (minutes < 60) return `${minutes}m ${String(totalSeconds % 60).padStart(2, "0")}s`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${String(minutes % 60).padStart(2, "0")}m`;
+}
+var CIRCLED = "\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468\u2469\u246A\u246B\u246C\u246D\u246E\u246F\u2470\u2471\u2472\u2473";
+function circled(n) {
+  return CIRCLED[n - 1] ?? `(${n})`;
+}
+function padRight(text, width) {
+  return text.length >= width ? text : text + " ".repeat(width - text.length);
+}
+
+// src/tui/layout.ts
+var MIN_COLUMNS = 40;
+var MIN_ROWS = 10;
+var COMPACT_COLUMNS = 72;
+var RAIL_MIN_ROWS = 16;
+var MAX_RAIL_ROWS = 2;
+var MAX_MENU_ROWS = 7;
+var MAX_QUEUE_ROWS = 3;
+var MIN_BODY_ROWS = 3;
+function measureRailRows(cells, columns) {
+  if (!cells || cells.length === 0) return 0;
+  if (columns <= 0) return MAX_RAIL_ROWS;
+  let rows = 1;
+  let used = 0;
+  for (const cell of cells) {
+    if (used > 0 && used + cell > columns) {
+      rows += 1;
+      if (rows >= MAX_RAIL_ROWS) return MAX_RAIL_ROWS;
+      used = cell;
+    } else {
+      used += cell;
+    }
+  }
+  return rows;
+}
+function computeLayout(input) {
+  const columns = Math.max(MIN_COLUMNS, input.columns);
+  const rows = Math.max(MIN_ROWS, input.rows);
+  const compact = columns < COMPACT_COLUMNS;
+  const welcome = !input.overlay && input.turn === 0;
+  const showRail = !welcome && !input.overlay && rows >= RAIL_MIN_ROWS && input.hasRail;
+  const menuRows = Math.min(Math.max(0, input.menuRows), MAX_MENU_ROWS);
+  const queueRows = Math.min(Math.max(0, input.queueRows ?? 0), MAX_QUEUE_ROWS);
+  const railRows = showRail ? Math.min(MAX_RAIL_ROWS, Math.max(1, measureRailRows(input.railCells, columns))) : 0;
+  const reserved = 1 + // header
+  1 + // rule under the header
+  (railRows > 0 ? railRows + 1 : 0) + // pipeline rail plus the gap above it
+  1 + // gap before the body
+  (input.notice ? 1 : 0) + (input.viewing ? 1 : 0) + // "viewing turn N" banner
+  queueRows + menuRows + 1 + // prompt
+  1;
+  const bodyHeight = Math.max(MIN_BODY_ROWS, rows - reserved);
+  return {
+    columns,
+    rows,
+    compact,
+    showTeam: !compact,
+    showRail,
+    railRows,
+    welcome,
+    bodyHeight,
+    // The stream spends one of the body's rows on its own header.
+    logViewport: Math.max(1, bodyHeight - 1),
+    teamWidth: Math.min(30, Math.max(18, Math.floor(columns * 0.24))),
+    menuRows,
+    queueRows
+  };
+}
+
+// src/tui/theme.ts
+var COLOR = {
+  accent: "cyan",
+  ok: "green",
+  warn: "yellow",
+  error: "red",
+  muted: "gray"
+};
+var STATUS = {
+  pending: { glyph: "\u25CB", color: COLOR.muted, dim: true, label: "queued" },
+  running: { glyph: "\u25D0", color: COLOR.accent, label: "running" },
+  retrying: { glyph: "\u21BB", color: COLOR.warn, label: "retrying" },
+  success: { glyph: "\u2713", color: COLOR.ok, label: "done" },
+  failed: { glyph: "\u2717", color: COLOR.error, label: "failed" },
+  skipped: { glyph: "\u2298", color: COLOR.muted, dim: true, label: "skipped" }
+};
+var SPINNER = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+var GLYPH = {
+  /** Marks the console itself in the header and the welcome screen. */
+  brand: "\u25C6",
+  /** The leader runs before the pipeline exists, so it gets its own mark. */
+  leader: "\u25C6",
+  agent: "\u25C7",
+  /** Points at the focused row in the team list. */
+  caret: "\u203A",
+  /** Pipeline flow between stages. */
+  connector: "\u2500\u2500\u25B8",
+  /** The stream is tailing; new output appears as it arrives. */
+  live: "\u25BC",
+  /** The stream is parked while the user reads back. */
+  paused: "\u23F8",
+  /**
+   * A follow-up waiting for the team to finish.
+   *
+   * Latin-1 on purpose: it renders as exactly one cell in every terminal, which
+   * a pictograph like ⏳ does not.
+   */
+  queued: "\xBB",
+  /** The leader is asking for a decision rather than reporting one. */
+  ask: "?",
+  /** A mid-turn warning that rides alongside the outcome rather than hiding it. */
+  warn: "\u26A0"
+};
+
+// src/tui/components/chrome.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Header({ name, right }) {
+  return /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", flexShrink: 0, children: [
+    /* @__PURE__ */ jsx(Box, { flexShrink: 1, children: /* @__PURE__ */ jsxs(Text, { wrap: "truncate-end", children: [
+      /* @__PURE__ */ jsxs(Text, { color: COLOR.accent, bold: true, children: [
+        GLYPH.brand,
+        " multiclaw"
+      ] }),
+      name ? /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        " \xB7 ",
+        name
+      ] }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: right }) })
+  ] });
+}
+function Rule({ width }) {
+  return /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { color: COLOR.muted, dimColor: true, children: "\u2500".repeat(Math.max(0, width)) }) });
+}
+function Chip({ agent, fallbackName, spinner }) {
+  const status = agent?.status ?? "pending";
+  const style = STATUS[status];
+  const glyph = status === "running" ? spinner : style.glyph;
+  return /* @__PURE__ */ jsx(Box, { marginRight: 1, children: /* @__PURE__ */ jsxs(Text, { color: style.color, dimColor: style.dim, children: [
+    glyph,
+    " ",
+    agent?.icon ? `${agent.icon} ` : "",
+    agent?.name ?? fallbackName
+  ] }) });
+}
+function railCellWidths(turn) {
+  const chip = (name, icon) => `G ${icon ? `${icon} ` : ""}${name}`.length + 1;
+  const cells = [];
+  for (const id of turn.leaderIds) {
+    const agent = turn.agents[id];
+    cells.push(chip(agent?.name ?? id, agent?.icon));
+  }
+  turn.stages.forEach((stage, index) => {
+    cells.push(` ${GLYPH.connector} `.length, `${circled(index + 1)} `.length);
+    for (const agent of stage.agents) {
+      cells.push(chip(agent.name, agent.icon));
+    }
+  });
+  return cells;
+}
+function PipelineRail({ turn, spinner }) {
+  if (turn.leaderIds.length === 0 && turn.stages.length === 0) return null;
+  const items = [];
+  for (const id of turn.leaderIds) {
+    items.push(
+      /* @__PURE__ */ jsx(Chip, { agent: turn.agents[id], fallbackName: id, spinner }, `leader-${id}`)
+    );
+  }
+  turn.stages.forEach((stage, index) => {
+    items.push(
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: ` ${GLYPH.connector} ` }, `flow-${stage.stageIndex}`),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        circled(index + 1),
+        " "
+      ] }, `stage-${stage.stageIndex}`)
+    );
+    for (const agent of stage.agents) {
+      items.push(
+        /* @__PURE__ */ jsx(
+          Chip,
+          {
+            agent: turn.agents[agent.id],
+            fallbackName: agent.name,
+            spinner
+          },
+          agent.id
+        )
+      );
+    }
+  });
+  return /* @__PURE__ */ jsx(Box, { flexWrap: "wrap", children: items });
+}
+function HintBar({ status, keys }) {
+  return /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", flexShrink: 0, children: [
+    /* @__PURE__ */ jsx(Box, { flexShrink: 1, children: status }),
+    /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: keys }) })
+  ] });
+}
+function QueueStrip({ items, max = MAX_QUEUE_ROWS }) {
+  if (items.length === 0 || max <= 0) return null;
+  const shown = items.slice(0, max);
+  const hidden = items.length - shown.length;
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", flexShrink: 0, children: shown.map((text, index) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: a queue may hold the same sentence twice, so position is what tells the rows apart
+    /* @__PURE__ */ jsxs(Text, { wrap: "truncate-end", children: [
+      /* @__PURE__ */ jsx(Text, { color: COLOR.warn, children: index === 0 ? `${GLYPH.queued} ` : "  " }),
+      /* @__PURE__ */ jsx(Text, { dimColor: index > 0, children: text }),
+      hidden > 0 && index === shown.length - 1 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: ` (+${hidden} more)` }) : null
+    ] }, `${index}-${text}`)
+  )) });
+}
+
+// src/tui/components/overlays.tsx
+import { Box as Box2, Text as Text2 } from "ink";
+
+// src/tui/state.ts
+var MAX_LOG_CHARS = 8e3;
+var ANSI_PATTERN = /\x1b\[[0-9;]*[a-zA-Z]/g;
+var MAX_HISTORY = 20;
+var initialState = {
+  phase: "idle",
+  name: "",
+  turn: 0,
+  stages: [],
+  agents: {},
+  leaderIds: [],
+  autoFollow: true,
+  scroll: 0,
+  history: []
+};
+function stripAnsi(text) {
+  return text.replace(ANSI_PATTERN, "");
+}
+function appendLog(previous, chunk) {
+  const next = previous + stripAnsi(chunk);
+  return next.length > MAX_LOG_CHARS ? next.slice(next.length - MAX_LOG_CHARS) : next;
+}
+function blankAgent(id, name, patch = {}) {
+  return { id, name, status: "pending", logs: "", ...patch };
+}
+function epoch(iso) {
+  const value = Date.parse(iso);
+  return Number.isNaN(value) ? void 0 : value;
+}
+function agentModel(agent) {
+  return agent.model ?? agent.models?.[agent.runtime ?? "acp"];
+}
+function activeLeader(config) {
+  return config.useLeader === false ? void 0 : config.leader;
+}
+function plannedAgents(config) {
+  const leader = activeLeader(config);
+  return leader ? [leader, ...config.agents] : config.agents;
+}
+function leaderAgentIds(config) {
+  const leader = activeLeader(config);
+  return leader ? [leader.id] : [];
+}
+function seedAgents(config) {
+  const agents = {};
+  for (const agent of plannedAgents(config)) {
+    agents[agent.id] = blankAgent(agent.id, agent.name, {
+      icon: agent.icon,
+      model: agentModel(agent),
+      description: agent.description,
+      taskTitle: agent.taskTitle
+    });
+  }
+  return agents;
+}
+function createInitialState(config) {
+  const agents = seedAgents(config);
+  return {
+    phase: "idle",
+    name: config.name,
+    turn: 0,
+    stages: [],
+    leaderIds: leaderAgentIds(config),
+    agents,
+    focusId: Object.keys(agents)[0],
+    autoFollow: true,
+    scroll: 0,
+    history: []
+  };
+}
+function mergeStageAgents(agents, stages) {
+  const next = { ...agents };
+  for (const stage of stages) {
+    for (const a of stage.agents) {
+      const existing = next[a.id];
+      next[a.id] = existing ? {
+        ...existing,
+        name: a.name,
+        icon: a.icon,
+        model: a.model,
+        // The event's `description` is absent for a hand-rolled agent
+        // definition, so fall back rather than blanking a known role.
+        description: a.description ?? existing.description,
+        taskTitle: a.taskTitle
+      } : blankAgent(a.id, a.name, {
+        icon: a.icon,
+        model: a.model,
+        description: a.description,
+        taskTitle: a.taskTitle
+      });
+    }
+  }
+  return next;
+}
+function reduceEvent(state, event) {
+  switch (event.type) {
+    case "orchestration:start": {
+      return {
+        ...state,
+        phase: "running",
+        name: event.payload.name,
+        requirement: event.payload.requirement ?? state.requirement,
+        stages: event.payload.stages,
+        agents: mergeStageAgents(state.agents, event.payload.stages)
+      };
+    }
+    // The architect's task plan is applied *after* the first stage, which can
+    // regroup the team. The console drew the pre-plan grouping from
+    // `orchestration:start`; this is how it learns the grouping that ran.
+    case "orchestration:stages": {
+      return {
+        ...state,
+        stages: event.payload.stages,
+        agents: mergeStageAgents(state.agents, event.payload.stages)
+      };
+    }
+    // Stage boundaries carry no state of their own — the per-agent statuses
+    // derived from them already drive the pipeline bar.
+    case "stage:start":
+    case "stage:complete":
+      return state;
+    case "agent:start": {
+      const { agentId, agentName, icon, model, taskTitle } = event.payload;
+      const existing = state.agents[agentId];
+      const startedAt = epoch(event.timestamp);
+      const next = existing ? {
+        ...existing,
+        name: agentName,
+        icon: icon ?? existing.icon,
+        model: model ?? existing.model,
+        taskTitle: taskTitle ?? existing.taskTitle,
+        status: "running",
+        startedAt: startedAt ?? existing.startedAt
+      } : blankAgent(agentId, agentName, {
+        icon,
+        model,
+        taskTitle,
+        status: "running",
+        startedAt
+      });
+      const takesFocus = state.autoFollow;
+      return {
+        ...state,
+        agents: { ...state.agents, [agentId]: next },
+        focusId: takesFocus ? agentId : state.focusId,
+        // A new agent takes the stream with it, so the window must follow.
+        scroll: takesFocus ? 0 : state.scroll
+      };
+    }
+    case "agent:output": {
+      const { agentId, chunk } = event.payload;
+      const existing = state.agents[agentId];
+      if (!existing) return state;
+      return {
+        ...state,
+        agents: {
+          ...state.agents,
+          [agentId]: { ...existing, logs: appendLog(existing.logs, chunk) }
+        }
+      };
+    }
+    case "agent:complete":
+    case "agent:failed": {
+      const result = event.payload;
+      const status = event.type === "agent:complete" ? "success" : "failed";
+      const existing = state.agents[result.agentId];
+      const next = existing ? {
+        ...existing,
+        status,
+        duration: result.duration,
+        attempts: result.attempts,
+        error: result.error
+      } : blankAgent(result.agentId, result.agentName, {
+        status,
+        duration: result.duration,
+        attempts: result.attempts,
+        error: result.error
+      });
+      return { ...state, agents: { ...state.agents, [result.agentId]: next } };
+    }
+    case "agent:skipped": {
+      const { agentId, agentName, icon } = event.payload;
+      const existing = state.agents[agentId];
+      const next = existing ? { ...existing, status: "skipped" } : blankAgent(agentId, agentName, { icon, status: "skipped" });
+      return { ...state, agents: { ...state.agents, [agentId]: next } };
+    }
+    case "agent:retrying": {
+      const { agentId, agentName, attempt, maxAttempts, error } = event.payload;
+      const note = `
+[retry ${attempt}/${maxAttempts}] ${error}
+`;
+      const existing = state.agents[agentId];
+      const retry = { attempt, max: maxAttempts };
+      const next = existing ? { ...existing, status: "retrying", retry, logs: appendLog(existing.logs, note) } : blankAgent(agentId, agentName, { status: "retrying", retry, logs: note });
+      return { ...state, agents: { ...state.agents, [agentId]: next } };
+    }
+    case "orchestration:warning":
+      return { ...state, warning: event.payload.message };
+    case "orchestration:complete":
+      return {
+        ...state,
+        phase: "complete",
+        success: event.payload.success,
+        totalDuration: event.payload.totalDuration,
+        endedAt: epoch(event.timestamp) ?? Date.now(),
+        reply: event.payload.reply
+      };
+    default:
+      return state;
+  }
+}
+function focusedLineCount(turn) {
+  const agent = turn.focusId ? turn.agents[turn.focusId] : void 0;
+  return agent?.logs ? agent.logs.split("\n").length : 0;
+}
+function snapshot(state) {
+  return {
+    turn: state.turn,
+    requirement: state.requirement,
+    phase: state.phase,
+    startedAt: state.startedAt,
+    endedAt: state.endedAt,
+    stages: state.stages,
+    agents: state.agents,
+    leaderIds: state.leaderIds,
+    focusId: state.focusId,
+    autoFollow: state.autoFollow,
+    scroll: state.scroll,
+    success: state.success,
+    totalDuration: state.totalDuration,
+    warning: state.warning,
+    reply: state.reply
+  };
+}
+function mapShown(state, fn) {
+  if (state.view) {
+    const next2 = fn(state.view);
+    return next2 === state.view ? state : { ...state, view: next2 };
+  }
+  const next = fn(state);
+  return next === state ? state : { ...state, ...next };
+}
+function conversationTurns(state) {
+  const turns = [];
+  for (const turn of [...state.history, snapshot(state)]) {
+    if (turn.phase !== "complete" || !turn.requirement) continue;
+    turns.push(
+      turn.reply ? { requirement: turn.requirement, reply: turn.reply } : { requirement: turn.requirement }
+    );
+  }
+  return turns;
+}
+function tuiReducer(state, action) {
+  switch (action.type) {
+    case "event":
+      return reduceEvent(state, action.event);
+    case "turn:start": {
+      const ids = Object.keys(action.agents);
+      const history = state.turn > 0 ? [...state.history, snapshot(state)].slice(-MAX_HISTORY) : state.history;
+      return {
+        phase: "running",
+        name: state.name,
+        turn: state.turn + 1,
+        requirement: action.requirement,
+        startedAt: action.startedAt,
+        stages: [],
+        leaderIds: action.leaderIds,
+        agents: action.agents,
+        focusId: ids[0],
+        autoFollow: true,
+        scroll: 0,
+        history,
+        // A new requirement replaces the previous answer; leaving it up would
+        // make the old reply look like the response to the new request. Reading
+        // a past turn ends for the same reason — the panes belong to the run.
+        reply: void 0,
+        view: void 0
+      };
+    }
+    case "focus:cycle":
+      return mapShown(state, (turn) => {
+        const ids = Object.keys(turn.agents);
+        if (ids.length === 0) return turn;
+        const current = turn.focusId ? ids.indexOf(turn.focusId) : -1;
+        const nextIndex = (current + action.delta + ids.length) % ids.length;
+        if (nextIndex === current) return turn;
+        return { ...turn, focusId: ids[nextIndex], autoFollow: false, scroll: 0 };
+      });
+    case "focus:set":
+      return mapShown(state, (turn) => {
+        if (!turn.agents[action.agentId]) return turn;
+        if (turn.focusId === action.agentId && !turn.autoFollow && turn.scroll === 0) return turn;
+        return { ...turn, focusId: action.agentId, autoFollow: false, scroll: 0 };
+      });
+    case "stream:scroll":
+      return mapShown(state, (turn) => {
+        const lines = focusedLineCount(turn);
+        const maxScroll = Math.max(0, lines - Math.max(1, action.viewport));
+        const next = Math.min(Math.max(0, turn.scroll + action.delta), maxScroll);
+        return next === turn.scroll ? turn : { ...turn, scroll: next };
+      });
+    case "stream:clear":
+      return mapShown(state, (turn) => {
+        const id = turn.focusId;
+        const agent = id ? turn.agents[id] : void 0;
+        if (!id || !agent) return turn;
+        return { ...turn, agents: { ...turn.agents, [id]: { ...agent, logs: "" } }, scroll: 0 };
+      });
+    case "view:open": {
+      const record = state.history.find((turn) => turn.turn === action.turn);
+      return record ? { ...state, view: record } : state;
+    }
+    case "view:close":
+      return state.view ? { ...state, view: void 0 } : state;
+  }
+}
+function stageStatus(stage, agents) {
+  const statuses = stage.agents.map((a) => agents[a.id]?.status ?? "pending");
+  if (statuses.some((s) => s === "failed")) return "failed";
+  if (statuses.some((s) => s === "running" || s === "retrying")) return "running";
+  if (statuses.length > 0 && statuses.every((s) => s === "success")) return "success";
+  if (statuses.length > 0 && statuses.every((s) => s === "skipped")) return "skipped";
+  return "pending";
+}
+var SETTLED = /* @__PURE__ */ new Set(["success", "failed", "skipped"]);
+function progress(turn) {
+  const agents = Object.values(turn.agents);
+  return { done: agents.filter((a) => SETTLED.has(a.status)).length, total: agents.length };
+}
+function agentElapsed(agent, now) {
+  if (agent.status === "running" || agent.status === "retrying") {
+    return agent.startedAt === void 0 ? void 0 : Math.max(0, now - agent.startedAt);
+  }
+  return agent.duration;
+}
+function turnElapsed(turn, now) {
+  if (turn.totalDuration !== void 0) return turn.totalDuration;
+  if (turn.startedAt === void 0) return void 0;
+  const end = turn.phase === "running" ? now : turn.endedAt ?? now;
+  return Math.max(0, end - turn.startedAt);
+}
+function visibleLog(turn, viewport) {
+  const agent = turn.focusId ? turn.agents[turn.focusId] : void 0;
+  const all = agent?.logs ? agent.logs.split("\n") : [];
+  const height = Math.max(1, viewport);
+  const maxScroll = Math.max(0, all.length - height);
+  const scrolledBack = Math.min(Math.max(0, turn.scroll), maxScroll);
+  const end = all.length - scrolledBack;
+  return {
+    lines: all.slice(Math.max(0, end - height), end),
+    scrolledBack,
+    following: scrolledBack === 0
+  };
+}
+
+// src/tui/components/overlays.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var HELP_GROUPS = [
+  {
+    title: "prompt",
+    rows: [
+      ["enter", "Run the requirement"],
+      ["enter (busy)", "Queue it to run next"],
+      ["esc", "Clear the line, close an overlay"],
+      ["\u2190 \u2192 home end", "Move the caret"]
+    ]
+  },
+  {
+    title: "panes",
+    rows: [
+      ["tab  \u21E7tab", "Next / previous agent"],
+      ["\u2191 \u2193", "Scroll the stream one line"],
+      ["pgup pgdn", "Scroll the stream a page"],
+      ["ctrl+l", "Clear the focused log"],
+      ["esc", "Stop reading a past turn"]
+    ]
+  },
+  {
+    title: "commands",
+    rows: [
+      ["/", "Command menu"],
+      ["/history", "Browse finished turns"],
+      ["?", "This help"],
+      ["ctrl+c", "Cancel the turn and its queue \xB7 again to quit"]
+    ]
+  }
+];
+var KEY_COLUMN = 16;
+var TURN_ROWS = 3;
+var HISTORY_CHROME_ROWS = 4;
+function historyCapacity(maxRows) {
+  return Math.max(1, Math.floor((maxRows - HISTORY_CHROME_ROWS) / TURN_ROWS));
+}
+function historyWindowStart(selected, total, capacity) {
+  const maxStart = Math.max(0, total - capacity);
+  return Math.min(Math.max(0, Math.min(selected, selected - capacity + 1)), maxStart);
+}
+function helpRows(compact = false) {
+  const gap = compact ? 0 : 1;
+  const groups = HELP_GROUPS.reduce((total, group) => total + gap + 1 + group.rows.length, 0);
+  return 1 + gap + groups + gap + 1;
+}
+function HelpOverlay({ width, maxRows }) {
+  const compact = helpRows(false) > maxRows;
+  const gap = compact ? 0 : 1;
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", flexShrink: 0, paddingLeft: 2, paddingTop: 1, width, children: [
+    /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "? keys" }),
+    HELP_GROUPS.map((group) => /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: gap, children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: group.title }),
+      group.rows.map(([keys, description]) => /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { color: COLOR.accent, children: padRight(keys, KEY_COLUMN) }),
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, wrap: "truncate-end", children: description })
+      ] }, keys))
+    ] }, group.title)),
+    /* @__PURE__ */ jsx2(Box2, { marginTop: gap, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "esc or ? to close" }) })
+  ] });
+}
+function outcome(turn) {
+  if (turn.reply) {
+    return turn.reply.mode === "ask" ? { text: `${GLYPH.ask} needs input`, color: COLOR.warn } : { text: `${STATUS.success.glyph} answered`, color: COLOR.ok };
+  }
+  if (turn.phase !== "complete") return { text: "interrupted", color: COLOR.warn };
+  return turn.success ? { text: `${STATUS.success.glyph} done`, color: COLOR.ok } : { text: `${STATUS.failed.glyph} failed`, color: COLOR.error };
+}
+function HistoryOverlay({
+  turns,
+  selected,
+  width,
+  maxRows
+}) {
+  const capacity = historyCapacity(maxRows);
+  const start = historyWindowStart(selected, turns.length, capacity);
+  const visible = turns.slice(start, start + capacity);
+  const range = turns.length > capacity ? ` \xB7 showing ${start + 1}\u2013${start + visible.length} of ${turns.length}` : "";
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", flexShrink: 0, paddingLeft: 2, paddingTop: 1, width, children: [
+    /* @__PURE__ */ jsxs2(Box2, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "HISTORY" }),
+      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+        turns.length,
+        " earlier"
+      ] })
+    ] }),
+    turns.length === 0 ? /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "No earlier turns yet." }) }) : /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", marginTop: 1, children: visible.map((turn, offset) => {
+      const index = start + offset;
+      const focused = index === selected;
+      const state = outcome(turn);
+      const { done, total } = progress(turn);
+      const time = turn.totalDuration === void 0 ? "" : ` \xB7 ${formatDuration(turn.totalDuration)}`;
+      return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: focused ? COLOR.accent : void 0, children: focused ? `${GLYPH.caret} ` : "  " }),
+          /* @__PURE__ */ jsxs2(Text2, { bold: focused, color: focused ? COLOR.accent : void 0, children: [
+            "turn ",
+            turn.turn
+          ] }),
+          /* @__PURE__ */ jsxs2(Text2, { color: state.color, children: [
+            " \xB7 ",
+            state.text
+          ] }),
+          /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+            time,
+            " \xB7 ",
+            done,
+            "/",
+            total,
+            " agents"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { dimColor: true, wrap: "truncate-end", children: [
+          "    ",
+          truncate(turn.requirement ?? "(no requirement)", Math.max(8, width - 6))
+        ] })
+      ] }, turn.turn);
+    }) }),
+    /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: `\u2191\u2193 select \xB7 enter open \xB7 esc close${range}` }) })
+  ] });
+}
+
+// src/tui/components/panels.tsx
+import { Box as Box3, Text as Text3 } from "ink";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function rightColumn(agent, now) {
+  if (agent.status === "retrying" && agent.retry) {
+    return { text: `retry ${agent.retry.attempt}/${agent.retry.max}`, color: COLOR.warn };
+  }
+  const elapsed = agentElapsed(agent, now);
+  if (elapsed !== void 0) return { text: formatDuration(elapsed) };
+  if (agent.status === "skipped") return { text: "skipped" };
+  return { text: "\u2014" };
+}
+function TeamRow({
+  agent,
+  focused,
+  now,
+  spinner
+}) {
+  const style = STATUS[agent.status];
+  const glyph = agent.status === "running" ? spinner : style.glyph;
+  const right = rightColumn(agent, now);
+  return /* @__PURE__ */ jsxs3(Box3, { justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsx3(Box3, { flexShrink: 1, children: /* @__PURE__ */ jsxs3(
+      Text3,
+      {
+        color: focused ? COLOR.accent : style.color,
+        dimColor: !focused && style.dim,
+        bold: focused,
+        wrap: "truncate-end",
+        children: [
+          focused ? `${GLYPH.caret} ` : "  ",
+          glyph,
+          " ",
+          agent.icon ? `${agent.icon} ` : "",
+          agent.name
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(Box3, { flexShrink: 0, children: /* @__PURE__ */ jsx3(Text3, { color: right.color, dimColor: right.color === void 0, children: right.text }) })
+  ] });
+}
+function TeamPanel({
+  turn,
+  width,
+  now,
+  spinner
+}) {
+  const ids = Object.keys(turn.agents);
+  const { done, total } = progress(turn);
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", width, flexShrink: 0, paddingRight: 1, children: [
+    /* @__PURE__ */ jsxs3(Box3, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "TEAM" }),
+      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+        done,
+        "/",
+        total
+      ] })
+    ] }),
+    ids.length === 0 ? /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "no agents configured" }) : ids.map((id) => /* @__PURE__ */ jsx3(
+      TeamRow,
+      {
+        agent: turn.agents[id],
+        focused: turn.focusId === id,
+        now,
+        spinner
+      },
+      id
+    ))
+  ] });
+}
+function Divider() {
+  return /* @__PURE__ */ jsx3(
+    Box3,
+    {
+      flexShrink: 0,
+      borderStyle: "single",
+      borderTop: false,
+      borderBottom: false,
+      borderRight: false,
+      borderLeft: true,
+      borderColor: COLOR.muted
+    }
+  );
+}
+function StreamPanel({
+  turn,
+  height,
+  now,
+  spinner
+}) {
+  const agent = turn.focusId ? turn.agents[turn.focusId] : void 0;
+  const viewport = Math.max(1, height - 1);
+  const window = visibleLog(turn, viewport);
+  const style = agent ? STATUS[agent.status] : void 0;
+  const elapsed = agent ? agentElapsed(agent, now) : void 0;
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", flexGrow: 1, height, paddingLeft: 1, children: [
+    /* @__PURE__ */ jsxs3(Box3, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs3(Box3, { flexShrink: 1, children: [
+        /* @__PURE__ */ jsx3(Text3, { bold: true, wrap: "truncate-end", children: agent?.name ?? "\u2014" }),
+        agent?.model ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+          " \xB7 ",
+          agent.model
+        ] }) : null,
+        agent && style ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: " \xB7 " }),
+          /* @__PURE__ */ jsx3(Text3, { color: style.color, dimColor: style.dim, children: agent.status === "running" ? `${spinner} ${style.label}` : style.label })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs3(Box3, { flexShrink: 0, children: [
+        elapsed === void 0 ? null : /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+          formatDuration(elapsed),
+          " "
+        ] }),
+        /* @__PURE__ */ jsx3(Text3, { color: window.following ? COLOR.accent : COLOR.warn, children: window.following ? GLYPH.live : `${GLYPH.paused} ${window.scrolledBack}\u2191` })
+      ] })
+    ] }),
+    window.lines.length === 0 ? /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: turn.phase === "running" ? "waiting for output\u2026" : "no output yet" }) : window.lines.map((line, index) => (
+      // Log lines are an append-only tail; position is the identity.
+      // biome-ignore lint/suspicious/noArrayIndexKey: positional log tail
+      /* @__PURE__ */ jsx3(Text3, { wrap: "truncate-end", children: line }, index)
+    ))
+  ] });
+}
+function ReplyPanel({ reply, width }) {
+  const asking = reply.mode === "ask";
+  return (
+    // `flexShrink={0}`: the body must clip this, not compress it. A shrunken
+    // column box folds its own text rows into each other before the body ever
+    // gets a chance to hide the overflow.
+    /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", flexShrink: 0, paddingLeft: 2, paddingTop: 1, width, children: [
+      /* @__PURE__ */ jsxs3(Text3, { color: asking ? COLOR.warn : COLOR.accent, bold: true, children: [
+        asking ? GLYPH.ask : GLYPH.leader,
+        " ",
+        asking ? "the team needs a decision" : "answered"
+      ] }),
+      /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text3, { children: reply.message }) }),
+      /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: asking ? "Answer below and press enter." : "Type a requirement and press enter." }) })
+    ] })
+  );
+}
+function WelcomePanel({ turn, width }) {
+  const agents = Object.values(turn.agents);
+  const leaderId = turn.leaderIds[0];
+  const nameWidth = Math.min(24, Math.max(8, ...agents.map((a) => a.name.length)) + 2);
+  return (
+    // `flexShrink={0}` — see ReplyPanel. Compressing the roster folds one agent's
+    // description onto the next row's, which reads as a corrupted screen.
+    /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", flexShrink: 0, paddingLeft: 2, paddingTop: 1, width, children: [
+      /* @__PURE__ */ jsxs3(Text3, { color: COLOR.accent, bold: true, children: [
+        GLYPH.brand,
+        " multiclaw"
+      ] }),
+      /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "A team of agents, one prompt away." }) }),
+      /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", marginTop: 1, children: agents.map((agent) => {
+        const focused = turn.focusId === agent.id;
+        const leader = agent.id === leaderId;
+        return /* @__PURE__ */ jsxs3(Box3, { children: [
+          /* @__PURE__ */ jsxs3(Box3, { flexShrink: 0, children: [
+            /* @__PURE__ */ jsx3(Text3, { color: focused ? COLOR.accent : void 0, children: focused ? `${GLYPH.caret} ` : "  " }),
+            /* @__PURE__ */ jsx3(Text3, { color: leader ? COLOR.accent : COLOR.muted, children: leader ? GLYPH.leader : GLYPH.agent }),
+            /* @__PURE__ */ jsxs3(Text3, { bold: focused, color: focused ? COLOR.accent : void 0, children: [
+              " ",
+              padRight(truncate(agent.name, nameWidth - 2), nameWidth - 1)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3(Box3, { flexShrink: 1, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, wrap: "truncate-end", children: agent.taskTitle ?? agent.description ?? "" }) })
+        ] }, agent.id);
+      }) }),
+      /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "Type a requirement and press enter." }) })
+    ] })
+  );
+}
+
+// src/tui/components/prompt.tsx
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Prompt({
+  value,
+  cursor,
+  caretVisible,
+  placeholder
+}) {
+  const ghost = value === "";
+  const before = value.slice(0, cursor);
+  const cell = ghost ? placeholder.slice(0, 1) : value.slice(cursor, cursor + 1);
+  const tail = ghost ? placeholder.slice(1) : value.slice(cursor + 1);
+  return /* @__PURE__ */ jsxs4(Box4, { flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs4(Text4, { color: COLOR.accent, children: [
+      GLYPH.caret,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx4(Text4, { dimColor: ghost, children: before }),
+    /* @__PURE__ */ jsx4(Text4, { inverse: caretVisible, dimColor: !caretVisible && ghost, children: cell || " " }),
+    /* @__PURE__ */ jsx4(Text4, { dimColor: ghost, children: tail })
+  ] });
+}
+function CommandMenu({ commands, selected }) {
+  const nameWidth = Math.max(
+    1,
+    ...commands.map((c) => c.name.length + (c.args ? c.args.length + 1 : 0))
+  );
+  return /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", paddingLeft: 2, children: commands.map((command, index) => {
+    const active = index === selected;
+    const label = command.args ? `${command.name} ${command.args}` : command.name;
+    return /* @__PURE__ */ jsxs4(
+      Text4,
+      {
+        color: active ? COLOR.accent : void 0,
+        dimColor: !active,
+        wrap: "truncate-end",
+        children: [
+          active ? GLYPH.caret : " ",
+          " /",
+          padRight(label, nameWidth),
+          " ",
+          command.description
+        ]
+      },
+      command.name
+    );
+  }) });
+}
+
+// src/tui/App.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var FLUSH_INTERVAL_MS = 80;
+var SPINNER_INTERVAL_MS = 110;
+var BLINK_INTERVAL_MS = 530;
+var INPUT_PLACEHOLDER = "describe what the team should do\u2026";
+var RUNNING_PLACEHOLDER = "type to queue a follow-up\u2026";
+var EMPTY_LINE = { text: "", cursor: 0 };
+function StatusLine({
+  state,
+  running,
+  cancelled,
+  error,
+  now,
+  spinner,
+  queued
+}) {
+  const { done, total } = progress(state);
+  if (error)
+    return /* @__PURE__ */ jsx5(Text5, { color: COLOR.error, wrap: "truncate-end", children: error });
+  if (state.warning && state.phase !== "complete")
+    return /* @__PURE__ */ jsx5(Text5, { color: COLOR.warn, wrap: "truncate-end", children: state.warning });
+  if (cancelled && !running) return /* @__PURE__ */ jsx5(Text5, { color: COLOR.warn, children: "cancelled" });
+  if (state.reply) {
+    const asking = state.reply.mode === "ask";
+    return /* @__PURE__ */ jsx5(Text5, { color: asking ? COLOR.warn : COLOR.ok, wrap: "truncate-end", children: asking ? `${GLYPH.ask} needs your input` : `${STATUS.success.glyph} answered` });
+  }
+  if (running) {
+    const elapsed = turnElapsed(state, now);
+    const time = elapsed === void 0 ? "" : ` ${formatDuration(elapsed)}`;
+    return /* @__PURE__ */ jsxs5(Text5, { color: COLOR.accent, wrap: "truncate-end", children: [
+      spinner,
+      " running",
+      time,
+      " \xB7 ",
+      done,
+      "/",
+      total,
+      " agents",
+      queued > 0 ? ` \xB7 ${queued} queued` : ""
+    ] });
+  }
+  if (state.phase === "complete") {
+    const time = state.totalDuration === void 0 ? "" : ` ${formatDuration(state.totalDuration)}`;
+    const outcome2 = state.success ? `${STATUS.success.glyph} done${time}` : `${STATUS.failed.glyph} finished with failures${time}`;
+    return /* @__PURE__ */ jsxs5(Text5, { color: state.success ? COLOR.ok : COLOR.error, wrap: "truncate-end", children: [
+      outcome2,
+      state.warning ? ` \xB7 ${GLYPH.warn} ${state.warning}` : ""
+    ] });
+  }
+  const stages = state.stages.length;
+  return /* @__PURE__ */ jsxs5(Text5, { dimColor: true, wrap: "truncate-end", children: [
+    "ready \xB7 ",
+    total,
+    " agents",
+    stages > 0 ? ` \xB7 ${stages} stages` : ""
+  ] });
+}
+function App({ config, onTurnStart }) {
+  const { exit } = useApp();
+  const { columns, rows } = useWindowSize();
+  const [state, dispatch] = useReducer(tuiReducer, config, createInitialState);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const [line, setLine] = useState(EMPTY_LINE);
+  const [caretOn, setCaretOn] = useState(true);
+  const [tick, setTick] = useState(0);
+  const [running, setRunning] = useState(false);
+  const [queue, setQueue] = useState([]);
+  const [cancelled, setCancelled] = useState(false);
+  const [error, setError] = useState();
+  const [notice, setNotice] = useState();
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const [historyCursor, setHistoryCursor] = useState(0);
+  const [menuCursor, setMenuCursor] = useState({
+    query: void 0,
+    index: 0
+  });
+  const abortRef = useRef(null);
+  const pending = useRef([]);
+  const flush = useCallback(() => {
+    const batch = pending.current;
+    if (batch.length === 0) return;
+    pending.current = [];
+    for (const event of batch) dispatch({ type: "event", event });
+  }, []);
+  useEffect(() => {
+    if (!running) return;
+    const timer = setInterval(() => setTick((value) => value + 1), SPINNER_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [running]);
+  useEffect(() => {
+    if (!running && line.text === "") {
+      setCaretOn(true);
+      return;
+    }
+    const timer = setInterval(() => setCaretOn((on) => !on), BLINK_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [running, line.text]);
+  const startTurn = useCallback(
+    async (requirement) => {
+      setError(void 0);
+      setCancelled(false);
+      setNotice(void 0);
+      const earlierTurns = conversationTurns(stateRef.current);
+      dispatch({
+        type: "turn:start",
+        requirement,
+        agents: seedAgents(config),
+        leaderIds: leaderAgentIds(config),
+        startedAt: Date.now()
+      });
+      const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
+      const logDir = path.join(config.workDir, ".multiclaw", "runs", `run-${stamp}`, "logs");
+      const runConfig = {
+        ...config,
+        context: { ...config.context, requirement },
+        // An answer only reads as a requirement next to the question it answers,
+        // so the leader is handed the turns behind this one as well.
+        history: earlierTurns,
+        logDir
+      };
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setRunning(true);
+      const orchestrator = new Orchestrator(runConfig);
+      const unsubscribe = orchestrator.eventBus.subscribe((event) => {
+        pending.current.push(event);
+      });
+      onTurnStart?.(orchestrator.eventBus, logDir);
+      const timer = setInterval(flush, FLUSH_INTERVAL_MS);
+      try {
+        await orchestrator.run({ signal: controller.signal });
+      } catch (err) {
+        if (isAbortError(err)) setCancelled(true);
+        else setError(err.message);
+      } finally {
+        clearInterval(timer);
+        flush();
+        unsubscribe();
+        abortRef.current = null;
+        setRunning(false);
+      }
+    },
+    [config, flush, onTurnStart]
+  );
+  useEffect(() => {
+    if (running || queue.length === 0) return;
+    const [next, ...rest] = queue;
+    setQueue(rest);
+    void startTurn(next);
+  }, [running, queue, startTurn]);
+  const runCommand = useCallback(
+    (name, args) => {
+      setLine(EMPTY_LINE);
+      const shown2 = state.view ?? state;
+      switch (name) {
+        case "agents":
+          setNotice(
+            `team: ${plannedAgents(config).map((agent) => agent.id).join(", ")}`
+          );
+          return;
+        case "focus": {
+          const id = args[0];
+          if (!id) {
+            setNotice("usage: /focus <agent id>");
+            return;
+          }
+          if (!shown2.agents[id]) {
+            setNotice(`unknown agent: ${id}`);
+            return;
+          }
+          dispatch({ type: "focus:set", agentId: id });
+          setNotice(`focused ${id}`);
+          return;
+        }
+        case "clear":
+          if (!shown2.focusId) {
+            setNotice("nothing focused");
+            return;
+          }
+          dispatch({ type: "stream:clear" });
+          setNotice(`cleared ${shown2.focusId}`);
+          return;
+        case "history":
+          if (state.history.length === 0) {
+            setNotice("no earlier turns yet");
+            return;
+          }
+          setNotice(void 0);
+          setHistoryCursor(0);
+          setHistoryOpen(true);
+          return;
+        case "cancel": {
+          if (!abortRef.current) {
+            setNotice("nothing to cancel");
+            return;
+          }
+          const dropped = queue.length;
+          abortRef.current.abort();
+          setQueue([]);
+          setCancelled(true);
+          setNotice(dropped > 0 ? `cancelling\u2026 \xB7 dropped ${dropped} queued` : "cancelling\u2026");
+          return;
+        }
+        case "help":
+          setNotice(void 0);
+          setHelpOpen(true);
+          return;
+        case "quit":
+          exit();
+          return;
+        default:
+          setNotice(`unknown command: /${name}`);
+      }
+    },
+    [config, exit, queue.length, state]
+  );
+  const submit = useCallback(() => {
+    const text = line.text.trim();
+    if (!text) return;
+    const command = parseCommand(text);
+    if (command) {
+      runCommand(command.name, command.args);
+      return;
+    }
+    setLine(EMPTY_LINE);
+    setNotice(void 0);
+    if (running) {
+      setQueue((pending2) => [...pending2, text]);
+      return;
+    }
+    void startTurn(text);
+  }, [line.text, runCommand, running, startTurn]);
+  const insert = useCallback((chunk) => {
+    setLine((l) => ({
+      text: l.text.slice(0, l.cursor) + chunk + l.text.slice(l.cursor),
+      cursor: l.cursor + chunk.length
+    }));
+  }, []);
+  const backspace = useCallback(() => {
+    setLine(
+      (l) => l.cursor === 0 ? l : { text: l.text.slice(0, l.cursor - 1) + l.text.slice(l.cursor), cursor: l.cursor - 1 }
+    );
+  }, []);
+  const deleteForward = useCallback(() => {
+    setLine(
+      (l) => l.cursor >= l.text.length ? l : { text: l.text.slice(0, l.cursor) + l.text.slice(l.cursor + 1), cursor: l.cursor }
+    );
+  }, []);
+  const move = useCallback((delta) => {
+    setLine((l) => ({ ...l, cursor: Math.min(Math.max(0, l.cursor + delta), l.text.length) }));
+  }, []);
+  const moveTo = useCallback((cursor) => {
+    setLine((l) => ({ ...l, cursor }));
+  }, []);
+  const query = menuQuery(line.text);
+  const matches = useMemo(
+    () => query === void 0 ? [] : matchCommands(query, running),
+    [query, running]
+  );
+  const menuIndex = menuCursor.query === query ? menuCursor.index : 0;
+  const selected = matches.length === 0 ? 0 : Math.min(menuIndex, matches.length - 1);
+  const menuOpen = !helpOpen && !historyOpen && query !== void 0 && matches.length > 0;
+  const historyTurns = useMemo(() => [...state.history].reverse(), [state.history]);
+  const historyIndex = historyTurns.length === 0 ? 0 : Math.min(historyCursor, historyTurns.length - 1);
+  const shown = state.view ?? state;
+  const layout = computeLayout({
+    columns,
+    rows,
+    turn: state.turn,
+    overlay: helpOpen || historyOpen,
+    menuRows: menuOpen ? matches.length : 0,
+    queueRows: queue.length,
+    notice: notice !== void 0,
+    viewing: state.view !== void 0,
+    hasRail: shown.leaderIds.length > 0 || shown.stages.length > 0,
+    railCells: railCellWidths(shown)
+  });
+  const menuWindow = matches.slice(0, layout.menuRows);
+  const menuSelected = Math.min(selected, Math.max(0, menuWindow.length - 1));
+  const now = Date.now();
+  const spinner = SPINNER[tick % SPINNER.length];
+  const handleKey = (char, key) => {
+    if (key.ctrl && char === "c") {
+      if (helpOpen) {
+        setHelpOpen(false);
+      } else if (historyOpen) {
+        setHistoryOpen(false);
+      } else if (abortRef.current) {
+        abortRef.current.abort();
+        setNotice(queue.length > 0 ? `cancelling\u2026 \xB7 dropped ${queue.length} queued` : "cancelling\u2026");
+        setQueue([]);
+        setCancelled(true);
+      } else if (line.text) {
+        setLine(EMPTY_LINE);
+      } else {
+        exit();
+      }
+      return;
+    }
+    if (helpOpen) {
+      if (key.escape || char === "?") setHelpOpen(false);
+      return;
+    }
+    if (historyOpen) {
+      if (key.escape) {
+        setHistoryOpen(false);
+        return;
+      }
+      if (historyTurns.length === 0) return;
+      if (key.upArrow) {
+        setHistoryCursor((historyIndex - 1 + historyTurns.length) % historyTurns.length);
+        return;
+      }
+      if (key.downArrow) {
+        setHistoryCursor((historyIndex + 1) % historyTurns.length);
+        return;
+      }
+      if (key.return) {
+        dispatch({ type: "view:open", turn: historyTurns[historyIndex].turn });
+        setHistoryOpen(false);
+        return;
+      }
+      return;
+    }
+    if (key.ctrl && char === "d") {
+      if (!line.text) exit();
+      return;
+    }
+    if (key.ctrl && char === "l") {
+      dispatch({ type: "stream:clear" });
+      setNotice(shown.focusId ? `cleared ${shown.focusId}` : "nothing focused");
+      return;
+    }
+    if (key.ctrl && char === "a") {
+      moveTo(0);
+      return;
+    }
+    if (key.ctrl && char === "e") {
+      setLine((l) => ({ ...l, cursor: l.text.length }));
+      return;
+    }
+    if (key.tab) {
+      dispatch({ type: "focus:cycle", delta: key.shift ? -1 : 1 });
+      return;
+    }
+    if (menuOpen) {
+      if (key.upArrow) {
+        setMenuCursor({ query, index: (menuIndex - 1 + matches.length) % matches.length });
+        return;
+      }
+      if (key.downArrow) {
+        setMenuCursor({ query, index: (menuIndex + 1) % matches.length });
+        return;
+      }
+      if (key.escape) {
+        setLine(EMPTY_LINE);
+        return;
+      }
+      if (key.return) {
+        runCommand(matches[selected].name, []);
+        return;
+      }
+    }
+    if (key.upArrow) {
+      dispatch({ type: "stream:scroll", delta: 1, viewport: layout.logViewport });
+      return;
+    }
+    if (key.downArrow) {
+      dispatch({ type: "stream:scroll", delta: -1, viewport: layout.logViewport });
+      return;
+    }
+    if (key.pageUp) {
+      dispatch({ type: "stream:scroll", delta: layout.logViewport, viewport: layout.logViewport });
+      return;
+    }
+    if (key.pageDown) {
+      dispatch({ type: "stream:scroll", delta: -layout.logViewport, viewport: layout.logViewport });
+      return;
+    }
+    if (char === "?" && line.text === "" && !running) {
+      setHelpOpen(true);
+      return;
+    }
+    if (key.return) {
+      submit();
+      return;
+    }
+    if (key.leftArrow) {
+      move(-1);
+      return;
+    }
+    if (key.rightArrow) {
+      move(1);
+      return;
+    }
+    if (key.home) {
+      moveTo(0);
+      return;
+    }
+    if (key.end) {
+      setLine((l) => ({ ...l, cursor: l.text.length }));
+      return;
+    }
+    if (key.escape) {
+      if (state.view) {
+        dispatch({ type: "view:close" });
+        return;
+      }
+      setLine(EMPTY_LINE);
+      setNotice(void 0);
+      return;
+    }
+    if (key.backspace) {
+      backspace();
+      return;
+    }
+    if (key.delete) {
+      deleteForward();
+      return;
+    }
+    if (char && !key.ctrl && !key.meta) insert(char.replace(/[\r\n]+/g, " "));
+  };
+  const handlerRef = useRef(handleKey);
+  handlerRef.current = handleKey;
+  useInput((char, key) => handlerRef.current(char, key));
+  const keys = helpOpen ? "esc close" : historyOpen ? "\u2191\u2193 select \xB7 enter open \xB7 esc close" : menuOpen ? "\u2191\u2193 select \xB7 enter run \xB7 esc close" : running ? "enter queues \xB7 ctrl+c cancel" : state.view ? "esc live \xB7 tab agent \xB7 ? help" : state.reply ? "enter sends \xB7 / commands \xB7 ? help" : "tab switch \xB7 / commands \xB7 ? help";
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", height: layout.rows, children: [
+    /* @__PURE__ */ jsx5(
+      Header,
+      {
+        name: state.name || config.name,
+        right: state.view ? `turn ${shown.turn} \xB7 viewing` : `turn ${shown.turn} \xB7 ${running ? formatDuration(turnElapsed(state, now) ?? 0) : state.phase === "complete" ? "complete" : "ready"}`
+      }
+    ),
+    /* @__PURE__ */ jsx5(Rule, { width: layout.columns }),
+    config.useLeader === false ? /* @__PURE__ */ jsx5(Text5, { color: COLOR.warn, dimColor: true, wrap: "truncate-end", children: "  \u26A0 leader off \u2014 every message runs the full team" }) : null,
+    layout.showRail ? (
+      // The rail wraps, so it can be taller than one row. Cap it at the height
+      // the budget reserved and clip, rather than letting the extra rows push
+      // the chrome below it off the screen.
+      /* @__PURE__ */ jsx5(Box5, { marginTop: 1, height: layout.railRows, overflow: "hidden", flexShrink: 0, children: /* @__PURE__ */ jsx5(PipelineRail, { turn: shown, spinner }) })
+    ) : null,
+    /* @__PURE__ */ jsx5(
+      Box5,
+      {
+        marginTop: 1,
+        height: layout.bodyHeight,
+        flexShrink: 0,
+        flexDirection: "column",
+        overflow: "hidden",
+        children: helpOpen ? /* @__PURE__ */ jsx5(HelpOverlay, { width: layout.columns, maxRows: layout.bodyHeight }) : historyOpen ? /* @__PURE__ */ jsx5(
+          HistoryOverlay,
+          {
+            turns: historyTurns,
+            selected: historyIndex,
+            width: layout.columns,
+            maxRows: layout.bodyHeight
+          }
+        ) : layout.welcome ? /* @__PURE__ */ jsx5(WelcomePanel, { turn: state, width: layout.columns }) : shown.reply ? /* @__PURE__ */ jsx5(ReplyPanel, { reply: shown.reply, width: layout.columns }) : /* @__PURE__ */ jsxs5(Box5, { height: layout.bodyHeight, flexShrink: 0, flexDirection: "row", children: [
+          layout.showTeam ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx5(TeamPanel, { turn: shown, width: layout.teamWidth, now, spinner }),
+            /* @__PURE__ */ jsx5(Divider, {})
+          ] }) : null,
+          /* @__PURE__ */ jsx5(StreamPanel, { turn: shown, height: layout.bodyHeight, now, spinner })
+        ] })
+      }
+    ),
+    state.view ? /* @__PURE__ */ jsx5(Text5, { color: COLOR.warn, wrap: "truncate-end", children: `  viewing turn ${shown.turn} \xB7 ${shown.requirement ?? "(no requirement)"} \xB7 esc to return` }) : null,
+    notice ? /* @__PURE__ */ jsxs5(Text5, { dimColor: true, wrap: "truncate-end", children: [
+      "  ",
+      notice
+    ] }) : null,
+    /* @__PURE__ */ jsx5(QueueStrip, { items: queue, max: layout.queueRows }),
+    menuOpen ? /* @__PURE__ */ jsx5(CommandMenu, { commands: menuWindow, selected: menuSelected }) : null,
+    /* @__PURE__ */ jsx5(
+      Prompt,
+      {
+        value: line.text,
+        cursor: line.cursor,
+        caretVisible: caretOn,
+        placeholder: running ? RUNNING_PLACEHOLDER : INPUT_PLACEHOLDER
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      HintBar,
+      {
+        status: /* @__PURE__ */ jsx5(
+          StatusLine,
+          {
+            state,
+            running,
+            cancelled,
+            error,
+            now,
+            spinner,
+            queued: queue.length
+          }
+        ),
+        keys
+      }
+    )
+  ] });
+}
+
+// src/tui/index.ts
+async function startTui(options) {
+  if (process.stdout.isTTY !== true) {
+    throw new Error(
+      'The interactive TUI needs a TTY. Use `multiclaw run "<requirement>"` for headless execution.'
+    );
+  }
+  const restore = () => process.stdout.write("\x1B[?25h\x1B[?1049l");
+  process.stdout.write("\x1B[?1049h\x1B[?25l");
+  process.on("exit", restore);
+  try {
+    const app = render(createElement(App, options), { exitOnCtrlC: false });
+    await app.waitUntilExit();
+  } finally {
+    process.off("exit", restore);
+    restore();
+  }
+}
+export {
+  COMPACT_COLUMNS,
+  MAX_HISTORY,
+  MAX_LOG_CHARS,
+  MAX_MENU_ROWS,
+  MAX_QUEUE_ROWS,
+  MAX_RAIL_ROWS,
+  MIN_COLUMNS,
+  MIN_ROWS,
+  RAIL_MIN_ROWS,
+  agentElapsed,
+  appendLog,
+  computeLayout,
+  conversationTurns,
+  createInitialState,
+  initialState,
+  leaderAgentIds,
+  measureRailRows,
+  plannedAgents,
+  progress,
+  reduceEvent,
+  seedAgents,
+  stageStatus,
+  startTui,
+  stripAnsi,
+  tuiReducer,
+  turnElapsed,
+  visibleLog
+};