@awak-app/simy-cli 0.1.0 → 0.1.2

package/src/console/app.js

@@ -0,0 +1,1042 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { stripVTControlCharacters } from "node:util";
+import { homedir } from "node:os";
+import { resolve as resolvePath } from "node:path";
+import { Box, Spacer, Text, useApp, useInput, useStdout } from "ink";
+
+import { consoleHelpLines, parseConsoleCommand } from "./commands.js";
+import { summarizeCodingLoopEvent } from "../orchestrator/presentation.js";
+import { isLocalRepositoryApprovalPending } from "../runner.js";
+
+const TERMINAL_STATES = new Set([
+  "merge_ready",
+  "pr_ready_for_review",
+  "waiting_human",
+  "blocked",
+  "failed",
+  "stopped",
+]);
+const NEW_TASK = "__new_task__";
+
+export function CodingLoopConsole({ agent, onQuit = () => {} }) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [terminal, setTerminal] = useState(() => terminalSize(stdout));
+  const [runs, setRuns] = useState(() => agent.registry.list());
+  const [selectedId, setSelectedId] = useState(() => runs[0]?.id ?? NEW_TASK);
+  const [inputMode, setInputMode] = useState(() => runs.length === 0);
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState("");
+  const [showHelp, setShowHelp] = useState(false);
+  const [confirmStop, setConfirmStop] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [detailScrollFromEnd, setDetailScrollFromEnd] = useState(0);
+  const [scanPrompt, setScanPrompt] = useState(null);
+  const [repositoryPicker, setRepositoryPicker] = useState(null);
+  const [draft, setDraft] = useState(() => initialDraft(agent));
+
+  useEffect(() => {
+    const update = (nextRuns) => {
+      setRuns([...nextRuns]);
+      setSelectedId((current) => {
+        if (current === NEW_TASK) return current;
+        return nextRuns.some((run) => run.id === current)
+          ? current
+          : nextRuns[0]?.id ?? NEW_TASK;
+      });
+    };
+    agent.registry.on("change", update);
+    return () => agent.registry.off("change", update);
+  }, [agent.registry]);
+
+  useEffect(() => {
+    const resize = () => setTerminal(terminalSize(stdout));
+    stdout.on("resize", resize);
+    return () => stdout.off("resize", resize);
+  }, [stdout]);
+
+  const selectedRun = runs.find((run) => run.id === selectedId) ?? null;
+  const selectableIds = [NEW_TASK, ...runs.map((run) => run.id)];
+  const selectedIndex = Math.max(0, selectableIds.indexOf(selectedId));
+  const waitingForHuman = Boolean(
+    selectedRun &&
+      (selectedRun.status === "waiting_human" || selectedRun.controlState === "waiting_human"),
+  );
+  const actionRows =
+    1 +
+    (waitingForHuman ? 1 : 0) +
+    (!selectedRun ? 1 : 0) +
+    (notice || busy ? 1 : 0);
+  const mainHeight = Math.max(8, terminal.rows - 5 - actionRows);
+  const detailInnerWidth = Math.max(20, terminal.columns - 4);
+  const detailRows = useMemo(
+    () => buildRunDetailRows(selectedRun, detailInnerWidth),
+    [selectedRun, detailInnerWidth, runs],
+  );
+  const detailViewportRows = Math.max(1, mainHeight - 3);
+  const maxDetailScroll = Math.max(0, detailRows.length - detailViewportRows);
+  const effectiveDetailScroll = Math.min(detailScrollFromEnd, maxDetailScroll);
+
+  useEffect(() => {
+    setDetailScrollFromEnd(0);
+  }, [selectedId]);
+
+  useEffect(() => {
+    if (detailOpen && !selectedRun) setDetailOpen(false);
+  }, [detailOpen, selectedRun]);
+
+  useEffect(() => {
+    if (selectedRun?.status === "pr_ready_for_review") {
+      setNotice("Review the pull request, then use /recheck to refresh readiness.");
+    } else if (
+      selectedRun?.status === "waiting_human" ||
+      selectedRun?.controlState === "waiting_human"
+    ) {
+      setNotice("SIMY is waiting for your guidance.");
+    }
+  }, [selectedRun?.status, selectedRun?.controlState]);
+
+  async function execute(value) {
+    const command = parseConsoleCommand(value);
+    if (command.type === "empty") return;
+    if (command.type === "error") {
+      setNotice(command.message);
+      if (!selectedRun) setInputMode(true);
+      return;
+    }
+    if (command.type === "help") {
+      setShowHelp(true);
+      return;
+    }
+    if (command.type === "new") {
+      setSelectedId(NEW_TASK);
+      setDetailOpen(false);
+      setInputMode(true);
+      setNotice("New task composer ready.");
+      return;
+    }
+    if (command.type === "scan") {
+      requestRepositoryScan(command.root);
+      return;
+    }
+    if (command.type === "repositories") {
+      const repositories = agent.controls.repositoryInventory?.() || [];
+      if (repositories.length === 0) {
+        requestRepositoryScan();
+      } else {
+        openRepositoryPicker(repositories);
+      }
+      return;
+    }
+    if (command.type === "configure") {
+      setDraft((current) => updateDraft(current, command));
+      setNotice(configurationNotice(command));
+      setInputMode(true);
+      return;
+    }
+    if (!selectedRun) {
+      if (command.type !== "guidance") {
+        setNotice("That command requires a selected coding run.");
+        return;
+      }
+      setBusy(true);
+      setNotice("Creating the Web ledger and starting the local executor...");
+      try {
+        const run = await agent.controls.create({
+          requirement: command.message,
+          repository: draft.repository,
+          baseBranch: draft.branch,
+          backend: draft.backend,
+          localPath: draft.localPath,
+          attachmentPaths: draft.attachmentPaths,
+        });
+        setSelectedId(run.id);
+        setDetailOpen(true);
+        setDetailScrollFromEnd(0);
+        setNotice("Task created from CLI chat. Local execution is starting.");
+      } catch (error) {
+        setNotice(error instanceof Error ? error.message : String(error));
+        setInputMode(true);
+      } finally {
+        setBusy(false);
+      }
+      return;
+    }
+
+    setBusy(true);
+    setNotice("");
+    try {
+      switch (command.type) {
+        case "guidance":
+          if (selectedRun.operation || selectedRun.child) {
+            agent.controls.queueGuidance(selectedRun, command.message);
+            setNotice("Guidance queued for the next executor handoff.");
+          } else {
+            await agent.controls.continue(selectedRun, command.message);
+            setNotice("Human guidance accepted. The coding loop is continuing.");
+          }
+          break;
+        case "decision":
+          await agent.controls.applyDecision(selectedRun, command);
+          setNotice("Human decision recorded. The coding loop is continuing.");
+          break;
+        case "recheck":
+          await agent.controls.recheck(selectedRun);
+          setNotice("Pull request evidence refreshed.");
+          break;
+        case "pause":
+          agent.controls.pause(selectedRun);
+          setNotice("Executor paused.");
+          break;
+        case "resume":
+          agent.controls.resume(selectedRun);
+          setNotice("Executor resumed.");
+          break;
+        case "stop":
+          await agent.controls.stop(selectedRun);
+          setNotice("Stop requested.");
+          break;
+      }
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : String(error));
+    } finally {
+      setBusy(false);
+      setConfirmStop(false);
+    }
+  }
+
+  function quit() {
+    onQuit();
+    exit();
+  }
+
+  function requestRepositoryScan(root = null) {
+    const requestedRoot = String(root || agent.repositoryScanRoot || process.cwd());
+    const expandedRoot = requestedRoot === "~"
+      ? homedir()
+      : requestedRoot.startsWith("~/")
+        ? resolvePath(homedir(), requestedRoot.slice(2))
+        : resolvePath(requestedRoot);
+    setInputMode(false);
+    setDetailOpen(false);
+    setRepositoryPicker(null);
+    setScanPrompt({ root: expandedRoot });
+    setNotice("");
+  }
+
+  function openRepositoryPicker(repositories) {
+    const expected = selectedRun?.request.repository || draft.repository;
+    const selected = Math.max(
+      0,
+      repositories.findIndex(
+        (item) => item.repository.toLowerCase() === String(expected || "").toLowerCase(),
+      ),
+    );
+    setInputMode(false);
+    setDetailOpen(false);
+    setRepositoryPicker({ repositories, selected });
+    setNotice("");
+  }
+
+  async function authorizeRepositoryScan() {
+    if (!scanPrompt || busy) return;
+    const root = scanPrompt.root;
+    setScanPrompt(null);
+    setBusy(true);
+    setNotice(`Scanning authorized root ${root}...`);
+    try {
+      const result = await agent.controls.scanRepositories(root);
+      const discoveredRepositories = result.discoveredRepositories || result.repositories;
+      const match = selectedRun
+        ? discoveredRepositories.find(
+            (item) =>
+              item.repository.toLowerCase() === selectedRun.request.repository.toLowerCase(),
+          )
+        : null;
+      if (selectedRun && match) {
+        await agent.controls.selectRepository(selectedRun, match);
+        setDetailOpen(true);
+        setDetailScrollFromEnd(0);
+        setNotice(`Authorized ${match.repository}. The same coding run is continuing.`);
+      } else if (selectedRun) {
+        setNotice(
+          `${selectedRun.request.repository} was not found under ${result.root}. Run /scan <path> for another authorized root.`,
+        );
+      } else if (discoveredRepositories.length > 0) {
+        openRepositoryPicker(discoveredRepositories);
+        setNotice(
+          `Found ${discoveredRepositories.length} local repositories under ${result.root}. Choose one with Enter.`,
+        );
+      } else {
+        setNotice(`No GitHub repositories were found under ${result.root}.`);
+        setInputMode(true);
+      }
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : String(error));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function selectRepositoryFromPicker() {
+    const selected = repositoryPicker?.repositories[repositoryPicker.selected];
+    if (!selected || busy) return;
+    setBusy(true);
+    try {
+      if (selectedRun) {
+        await agent.controls.selectRepository(selectedRun, selected);
+        setRepositoryPicker(null);
+        setDetailOpen(true);
+        setDetailScrollFromEnd(0);
+        setNotice(`Authorized ${selected.repository}. The same coding run is continuing.`);
+      } else {
+        const verified = await agent.controls.selectRepository(null, selected);
+        setDraft((current) => ({
+          ...current,
+          repository: verified.repository,
+          branch: verified.branch,
+          localPath: verified.local_path,
+        }));
+        setRepositoryPicker(null);
+        setInputMode(true);
+        setNotice(`Repository set to ${verified.repository} at ${verified.local_path}.`);
+      }
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : String(error));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const inputHandlerRef = useRef(() => {});
+  inputHandlerRef.current = (character, key) => {
+    if (scanPrompt) {
+      if (key.escape || String(character).toLowerCase() === "n") {
+        setScanPrompt(null);
+        setNotice("Repository scan cancelled. No filesystem access was granted.");
+        return;
+      }
+      if (String(character).toLowerCase() === "y") void authorizeRepositoryScan();
+      return;
+    }
+
+    if (repositoryPicker) {
+      if (key.escape) {
+        setRepositoryPicker(null);
+        setNotice("Repository selection cancelled.");
+        return;
+      }
+      if (key.upArrow || character === "k") {
+        setRepositoryPicker((current) => ({
+          ...current,
+          selected: Math.max(0, current.selected - 1),
+        }));
+        return;
+      }
+      if (key.downArrow || character === "j") {
+        setRepositoryPicker((current) => ({
+          ...current,
+          selected: Math.min(current.repositories.length - 1, current.selected + 1),
+        }));
+        return;
+      }
+      if (key.return) void selectRepositoryFromPicker();
+      return;
+    }
+
+    if (inputMode) {
+      if (key.escape || (key.ctrl && character === "c")) {
+        setInputMode(false);
+        setInput("");
+        return;
+      }
+      if (key.return) {
+        const submitted = input;
+        setInput("");
+        setInputMode(false);
+        void execute(submitted);
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setInput((current) => current.slice(0, -1));
+        return;
+      }
+      if (key.ctrl && character === "u") {
+        setInput("");
+        return;
+      }
+      if (!key.ctrl && !key.meta && character) setInput((current) => current + character);
+      return;
+    }
+
+    if (key.ctrl && character === "c") {
+      quit();
+      return;
+    }
+
+    if (showHelp && key.escape) {
+      setShowHelp(false);
+      return;
+    }
+
+    if (detailOpen && selectedRun) {
+      if (key.escape) {
+        setDetailOpen(false);
+        setDetailScrollFromEnd(0);
+        return;
+      }
+      if (key.upArrow || character === "k") {
+        setDetailScrollFromEnd((current) => Math.min(maxDetailScroll, current + 1));
+        return;
+      }
+      if (key.downArrow || character === "j") {
+        setDetailScrollFromEnd((current) => Math.max(0, current - 1));
+        return;
+      }
+      if (key.pageUp) {
+        setDetailScrollFromEnd((current) =>
+          Math.min(maxDetailScroll, current + Math.max(1, detailViewportRows - 2)),
+        );
+        return;
+      }
+      if (key.pageDown) {
+        setDetailScrollFromEnd((current) =>
+          Math.max(0, current - Math.max(1, detailViewportRows - 2)),
+        );
+        return;
+      }
+      if (key.home || character === "g") {
+        setDetailScrollFromEnd(maxDetailScroll);
+        return;
+      }
+      if (key.end || character === "G") {
+        setDetailScrollFromEnd(0);
+        return;
+      }
+    }
+
+    if (key.upArrow || character === "k") {
+      const next = Math.max(0, selectedIndex - 1);
+      setSelectedId(selectableIds[next] ?? selectedId);
+      return;
+    }
+    if (key.downArrow || character === "j") {
+      const next = Math.min(selectableIds.length - 1, selectedIndex + 1);
+      setSelectedId(selectableIds[next] ?? selectedId);
+      return;
+    }
+    if (key.return && selectedRun) {
+      setDetailOpen(true);
+      setDetailScrollFromEnd(maxDetailScroll);
+      return;
+    }
+    if (character === "i" || key.return) {
+      setInputMode(true);
+      return;
+    }
+    if (character === "/") {
+      setInput("/");
+      setInputMode(true);
+      return;
+    }
+    if (character === "?") {
+      setShowHelp((current) => !current);
+      return;
+    }
+    if (character === "s") {
+      requestRepositoryScan();
+      return;
+    }
+    if (character === "p" && selectedRun) {
+      void execute(selectedRun.controlState === "paused" ? "/resume" : "/pause");
+      return;
+    }
+    if (character === "r" && selectedRun) {
+      void execute("/recheck");
+      return;
+    }
+    if (character === "x" && selectedRun) {
+      if (confirmStop) void execute("/stop");
+      else {
+        setConfirmStop(true);
+        setNotice("Press x again to stop the selected coding run.");
+      }
+      return;
+    }
+    if (character === "q") quit();
+  };
+  const handleInput = useCallback(
+    (character, key) => inputHandlerRef.current(character, key),
+    [],
+  );
+  useInput(handleInput);
+
+  return jsxs(Box, {
+    flexDirection: "column",
+    width: terminal.columns,
+    children: [
+      jsx(Header, { agent, runCount: runs.length }),
+      jsx(Box, {
+        marginTop: 1,
+        height: mainHeight,
+        children: showHelp
+          ? jsx(Help, { width: terminal.columns })
+          : scanPrompt
+            ? jsx(RepositoryScanConsent, {
+                root: scanPrompt.root,
+                width: terminal.columns,
+                height: mainHeight,
+              })
+            : repositoryPicker
+              ? jsx(RepositoryPicker, {
+                  repositories: repositoryPicker.repositories,
+                  selected: repositoryPicker.selected,
+                  requiredRepository: selectedRun?.request.repository || null,
+                  width: terminal.columns,
+                  height: mainHeight,
+                })
+          : detailOpen && selectedRun
+            ? jsx(RunDetail, {
+                run: selectedRun,
+                rows: detailRows,
+                scrollFromEnd: effectiveDetailScroll,
+                width: terminal.columns,
+                height: mainHeight,
+              })
+            : selectedRun
+              ? jsx(RunList, {
+                  runs,
+                  selectedId,
+                  width: terminal.columns,
+                  height: mainHeight,
+                })
+              : jsx(NewTask, {
+                  draft,
+                  loginUrl: agent.loginUrl,
+                  width: terminal.columns,
+                }),
+      }),
+      jsx(ActionBar, {
+        run: selectedRun,
+        detailOpen,
+        inputMode,
+        input,
+        busy,
+        notice,
+        confirmStop,
+        draft,
+        repositoryMissing: isRepositoryMissing(selectedRun),
+        modalOpen: Boolean(scanPrompt || repositoryPicker),
+      }),
+    ],
+  });
+}
+
+function Header({ agent, runCount }) {
+  return jsxs(Box, {
+    borderStyle: "single",
+    borderColor: "cyan",
+    paddingX: 1,
+    children: [
+      jsx(Text, { bold: true, color: "cyan", children: "SIMY" }),
+      jsx(Text, { bold: true, children: " Coding Chat" }),
+      jsx(Text, { dimColor: true, children: `  localhost:${agent.port}` }),
+      jsx(Spacer, {}),
+      jsx(Text, { color: runCount > 0 ? "green" : "yellow", children: `${runCount} runs` }),
+      jsx(Text, { dimColor: true, children: `  ${agent.webOrigin}` }),
+    ],
+  });
+}
+
+function NewTask({ draft, loginUrl, width }) {
+  return jsxs(Box, {
+    width,
+    flexDirection: "column",
+    borderStyle: "single",
+    borderColor: "cyan",
+    paddingX: 1,
+    children: [
+      jsx(Text, { bold: true, color: "cyan", children: "What do you want to build?" }),
+      jsx(Text, {
+        dimColor: true,
+        children: "Describe the change in the composer. SIMY will create the ledger and run it here.",
+      }),
+      jsx(Text, { children: `Repository  ${draft.repository || "not set"}` }),
+      jsx(Text, { children: `Branch      ${draft.branch}` }),
+      jsx(Text, { children: `Executor    ${executorLabel(draft.backend)}` }),
+      jsx(Text, {
+        children: `Attachments ${draft.attachmentPaths.length === 0 ? "none" : draft.attachmentPaths.join(", ")}`,
+      }),
+      loginUrl ? jsx(Text, { color: "cyan", children: `Sign in: ${loginUrl}` }) : null,
+    ],
+  });
+}
+
+function RepositoryScanConsent({ root, width, height }) {
+  return jsxs(Box, {
+    width,
+    height,
+    flexDirection: "column",
+    borderStyle: "single",
+    borderColor: "yellow",
+    paddingX: 1,
+    children: [
+      jsx(Text, { bold: true, color: "yellow", children: "Allow local repository scan?" }),
+      jsx(Text, { children: " " }),
+      jsx(Text, { bold: true, children: "Authorized root" }),
+      jsx(Text, { color: "cyan", wrap: "wrap", children: root }),
+      jsx(Text, { children: " " }),
+      jsx(Text, {
+        wrap: "wrap",
+        children:
+          "SIMY will recursively look for Git repositories below this folder. It reads directory names plus each repository's Git origin and current branch.",
+      }),
+      jsx(Text, {
+        wrap: "wrap",
+        children:
+          "Source files and file contents are not indexed or uploaded. Hidden, dependency, cache, and symlink directories are skipped.",
+      }),
+      jsx(Text, { children: " " }),
+      jsx(Text, { bold: true, color: "green", children: "Press y to allow this scan" }),
+      jsx(Text, { dimColor: true, children: "Press n or Esc to cancel. Use /scan <path> to choose a narrower root." }),
+    ],
+  });
+}
+
+function RepositoryPicker({ repositories, selected, requiredRepository, width, height }) {
+  const maxVisible = Math.max(1, height - 5);
+  const start = Math.min(
+    Math.max(0, selected - Math.floor(maxVisible / 2)),
+    Math.max(0, repositories.length - maxVisible),
+  );
+  const visible = repositories.slice(start, start + maxVisible);
+  return jsxs(Box, {
+    width,
+    height,
+    flexDirection: "column",
+    borderStyle: "single",
+    borderColor: "cyan",
+    paddingX: 1,
+    children: [
+      jsxs(Box, {
+        children: [
+          jsx(Text, { bold: true, color: "cyan", children: "LOCAL GIT REPOSITORIES" }),
+          jsx(Spacer, {}),
+          jsx(Text, { dimColor: true, children: `${repositories.length} indexed` }),
+        ],
+      }),
+      requiredRepository
+        ? jsx(Text, {
+            color: "yellow",
+            children: `This run requires ${requiredRepository}`,
+          })
+        : jsx(Text, { dimColor: true, children: "Choose the repository for the next coding task." }),
+      ...visible.map((repository, offset) => {
+        const index = start + offset;
+        const active = index === selected;
+        const eligible =
+          !requiredRepository ||
+          repository.repository.toLowerCase() === requiredRepository.toLowerCase();
+        return jsxs(Box, {
+          flexDirection: "column",
+          borderStyle: active ? "round" : undefined,
+          borderColor: active ? (eligible ? "cyan" : "yellow") : undefined,
+          paddingX: active ? 1 : 2,
+          children: [
+            jsx(Text, {
+              bold: active,
+              color: eligible ? (active ? "cyan" : undefined) : "yellow",
+              children: `${active ? "> " : "  "}${repository.repository}  ${repository.branch}`,
+            }),
+            jsx(Text, { dimColor: true, wrap: "wrap", children: repository.local_path }),
+          ],
+        }, repository.local_path);
+      }),
+      jsx(Text, { dimColor: true, children: "Up/Down select  Enter use repository  Esc cancel" }),
+    ],
+  });
+}
+
+function RunList({ runs, selectedId, width, height }) {
+  return jsxs(Box, {
+    width,
+    height,
+    flexDirection: "column",
+    borderStyle: "single",
+    borderColor: "gray",
+    paddingX: 1,
+    children: [
+      jsxs(Box, {
+        children: [
+          jsx(Text, { bold: true, children: "RUNS" }),
+          jsx(Spacer, {}),
+          jsx(Text, { dimColor: true, children: "Enter opens the selected run full screen" }),
+        ],
+      }),
+      jsxs(Box, {
+        borderStyle: selectedId === NEW_TASK ? "round" : undefined,
+        borderColor: selectedId === NEW_TASK ? "cyan" : undefined,
+        paddingX: selectedId === NEW_TASK ? 1 : 2,
+        children: [
+          jsx(Text, { color: "cyan", bold: selectedId === NEW_TASK, children: "+ New task" }),
+        ],
+      }),
+      ...runs.slice(0, 10).map((run) => {
+        const selected = run.id === selectedId;
+        return jsxs(Box, {
+          flexDirection: "column",
+          borderStyle: selected ? "round" : undefined,
+          borderColor: selected ? "cyan" : undefined,
+          paddingX: selected ? 1 : 2,
+          children: [
+            jsxs(Text, {
+              children: [
+                jsx(Text, { color: statusColor(run), children: `${statusGlyph(run)} ` }),
+                jsx(Text, { bold: selected, children: shortId(run.id) }),
+                jsx(Text, { dimColor: true, children: `  ${run.request.backend}` }),
+              ],
+            }),
+            jsx(Text, { dimColor: true, children: truncate(run.request.requirement, width - 6) }),
+          ],
+        }, run.id);
+      }),
+    ],
+  });
+}
+
+function RunDetail({ run, rows, scrollFromEnd, width, height }) {
+  if (!run) return null;
+  const viewportRows = Math.max(1, height - 3);
+  const maxScroll = Math.max(0, rows.length - viewportRows);
+  const scroll = Math.min(scrollFromEnd, maxScroll);
+  const start = Math.max(0, rows.length - viewportRows - scroll);
+  const visibleRows = rows.slice(start, start + viewportRows);
+  const end = Math.min(rows.length, start + visibleRows.length);
+  return jsxs(Box, {
+    width,
+    height,
+    flexDirection: "column",
+    borderStyle: "single",
+    borderColor: "gray",
+    paddingX: 1,
+    children: [
+      jsxs(Box, {
+        children: [
+          jsxs(Text, {
+            children: [
+              jsx(Text, { bold: true, children: run.id }),
+              jsx(Text, { color: statusColor(run), children: `  ${statusLabel(run)}` }),
+            ],
+          }),
+          jsx(Spacer, {}),
+          jsx(Text, {
+            dimColor: true,
+            children: `${start + 1}-${end} / ${rows.length}`,
+          }),
+          jsx(Text, {
+            color: scroll > 0 ? "yellow" : run.child ? "green" : "gray",
+            children: scroll > 0 ? "  ● scroll paused" : run.child ? "  ● live" : "  ○ idle",
+          }),
+        ],
+      }),
+      ...visibleRows.map((row, index) =>
+        jsx(Text, {
+          bold: row.bold,
+          color: row.color,
+          dimColor: row.dimColor,
+          children: row.text || " ",
+        }, `${start + index}-${row.text}`),
+      ),
+    ],
+  });
+}
+
+function Help({ width }) {
+  return jsxs(Box, {
+    width,
+    borderStyle: "single",
+    borderColor: "blue",
+    paddingX: 1,
+    flexDirection: "column",
+    children: [
+      jsx(Text, { bold: true, color: "blue", children: "COMMANDS" }),
+      ...consoleHelpLines().map((line) => jsx(Text, { children: line }, line)),
+    ],
+  });
+}
+
+function ActionBar({
+  run,
+  detailOpen,
+  inputMode,
+  input,
+  busy,
+  notice,
+  confirmStop,
+  draft,
+  repositoryMissing,
+  modalOpen,
+}) {
+  const waiting = run && (run.controlState === "waiting_human" || run.status === "waiting_human");
+  return jsxs(Box, {
+    flexDirection: "column",
+    marginTop: 1,
+    children: [
+      waiting
+        ? jsx(Text, {
+            bold: true,
+            color: "yellow",
+            children: repositoryMissing
+              ? "LOCAL REPOSITORY REQUIRED  Press s to review and authorize a local Git repository scan."
+              : "HUMAN INPUT REQUIRED  Press i, type guidance, then Enter.",
+          })
+        : null,
+      modalOpen
+        ? null
+        : inputMode
+        ? jsxs(Text, {
+            children: [
+              jsx(Text, { color: "cyan", bold: true, children: "simy> " }),
+              input,
+              jsx(Text, { inverse: true, children: " " }),
+            ],
+          })
+        : jsx(Text, {
+            dimColor: true,
+            children: detailOpen
+              ? "↑/↓ scroll  PgUp/PgDn page  Home/End  Esc runs  i guidance  / command  s scan repos  p pause/resume  r recheck  x stop  ? help  q quit"
+              : "↑/↓ select  Enter open  i guidance  / command  s scan repos  ? help  q quit",
+          }),
+      !run
+        ? jsx(Text, {
+            dimColor: true,
+            children: `${draft.repository || "repo not set"}  ${draft.branch}  ${executorLabel(draft.backend)}`,
+          })
+        : null,
+      notice
+        ? jsx(Text, {
+            color: confirmStop ? "yellow" : notice.includes("could not") || notice.includes("requires") ? "red" : "cyan",
+            children: `${busy ? "Working... " : ""}${notice}`,
+          })
+        : busy
+          ? jsx(Text, { color: "cyan", children: "Working..." })
+          : null,
+    ],
+  });
+}
+
+function initialDraft(agent) {
+  const backends = agent.capabilities?.backends ?? {};
+  return {
+    repository: agent.workspace?.repository ?? "",
+    branch: agent.workspace?.branch ?? "dev",
+    localPath: agent.workspace?.localPath ?? process.cwd(),
+    backend: backends.claude ? "claude" : "codex",
+    attachmentPaths: [],
+  };
+}
+
+function isRepositoryMissing(run) {
+  return isLocalRepositoryApprovalPending(run);
+}
+
+function updateDraft(current, command) {
+  if (command.field === "repository") {
+    return { ...current, repository: command.value, localPath: null };
+  }
+  if (command.field === "branch") return { ...current, branch: command.value };
+  if (command.field === "backend") return { ...current, backend: command.value };
+  if (command.field === "attachment") {
+    return current.attachmentPaths.includes(command.value)
+      ? current
+      : { ...current, attachmentPaths: [...current.attachmentPaths, command.value] };
+  }
+  if (command.field === "clearAttachments") return { ...current, attachmentPaths: [] };
+  return current;
+}
+
+function configurationNotice(command) {
+  if (command.field === "clearAttachments") return "Attachments cleared.";
+  if (command.field === "attachment") return `Attached local path: ${command.value}`;
+  return `${command.field} set to ${command.value}.`;
+}
+
+function executorLabel(value) {
+  return value === "claude" ? "Claude Code" : "Codex";
+}
+
+function buildRunDetailRows(run, width) {
+  if (!run) return [];
+  const latestEvent = run.snapshot.events.at(-1);
+  const presentation = latestEvent ? summarizeCodingLoopEvent(run.snapshot, latestEvent) : null;
+  const rows = [];
+  const add = (value = "", style = {}) => {
+    for (const text of wrapTerminalText(value, width)) rows.push({ text, ...style });
+  };
+
+  add(
+    `PID ${run.child?.pid ?? "-"}  attempt ${run.snapshot.attempts.length + (run.child ? 1 : 0)}`,
+    { dimColor: true },
+  );
+  add(`Repository: ${run.request.repository}`, { dimColor: true });
+  if (run.request.attachments?.length) {
+    add(`Attachments: ${run.request.attachments.map((item) => item.name).join(", ")}`, {
+      dimColor: true,
+    });
+  }
+  add();
+  add("YOU", { bold: true, color: "cyan" });
+  add(run.request.requirement);
+  add();
+  add("SIMY", { bold: true, color: "green" });
+  add(statusLabel(run), { color: statusColor(run) });
+
+  if (presentation) {
+    add();
+    add("STEP SUMMARY", { bold: true, color: "cyan" });
+    add(presentation.summary);
+    if (presentation.result) add(`Result: ${presentation.result}`);
+    if (presentation.next) add(`Next: ${presentation.next}`);
+  }
+
+  add();
+  add(`LIVE TRANSCRIPT  ${run.child ? "● streaming" : "○ idle"}`, {
+    bold: true,
+    color: run.child ? "green" : undefined,
+  });
+  for (const line of runLogLines(run)) add(line);
+  return rows;
+}
+
+function runLogLines(run) {
+  const source =
+    run.logs.length > 0
+      ? run.logs.map((entry) => entry.text)
+      : run.snapshot.events.map((event) => {
+          const presentation = summarizeCodingLoopEvent(run.snapshot, event);
+          return `[${event.state}] ${event.message} - ${presentation.summary}`;
+        });
+  return source.map((line) => stripVTControlCharacters(String(line)));
+}
+
+function wrapTerminalText(value, maxWidth) {
+  const width = Math.max(1, maxWidth);
+  const source = stripVTControlCharacters(String(value ?? "")).replaceAll("\t", "  ");
+  const output = [];
+
+  for (const paragraph of source.split(/\r?\n/)) {
+    if (!paragraph) {
+      output.push("");
+      continue;
+    }
+    let line = "";
+    let lineWidth = 0;
+    const pushLine = () => {
+      if (line) output.push(line);
+      line = "";
+      lineWidth = 0;
+    };
+    for (const word of paragraph.trim().split(/\s+/u)) {
+      const wordWidth = terminalTextWidth(word);
+      if (wordWidth <= width) {
+        const separatorWidth = line ? 1 : 0;
+        if (line && lineWidth + separatorWidth + wordWidth > width) pushLine();
+        if (line) {
+          line += " ";
+          lineWidth += 1;
+        }
+        line += word;
+        lineWidth += wordWidth;
+        continue;
+      }
+
+      pushLine();
+      for (const character of word) {
+        const characterWidth = terminalCharacterWidth(character);
+        if (line && lineWidth + characterWidth > width) pushLine();
+        line += character;
+        lineWidth += characterWidth;
+      }
+    }
+    pushLine();
+  }
+  return output.length > 0 ? output : [""];
+}
+
+function terminalTextWidth(value) {
+  let width = 0;
+  for (const character of value) width += terminalCharacterWidth(character);
+  return width;
+}
+
+function terminalCharacterWidth(character) {
+  const codePoint = character.codePointAt(0) ?? 0;
+  if (codePoint === 0 || codePoint < 32 || (codePoint >= 0x7f && codePoint < 0xa0)) return 0;
+  if (/\p{Mark}/u.test(character)) return 0;
+  return isFullWidthCodePoint(codePoint) ? 2 : 1;
+}
+
+function isFullWidthCodePoint(codePoint) {
+  return (
+    codePoint >= 0x1100 &&
+    (codePoint <= 0x115f ||
+      codePoint === 0x2329 ||
+      codePoint === 0x232a ||
+      (codePoint >= 0x2e80 && codePoint <= 0xa4cf && codePoint !== 0x303f) ||
+      (codePoint >= 0xac00 && codePoint <= 0xd7a3) ||
+      (codePoint >= 0xf900 && codePoint <= 0xfaff) ||
+      (codePoint >= 0xfe10 && codePoint <= 0xfe19) ||
+      (codePoint >= 0xfe30 && codePoint <= 0xfe6f) ||
+      (codePoint >= 0xff00 && codePoint <= 0xff60) ||
+      (codePoint >= 0xffe0 && codePoint <= 0xffe6) ||
+      (codePoint >= 0x1f300 && codePoint <= 0x1faff) ||
+      (codePoint >= 0x20000 && codePoint <= 0x3fffd))
+  );
+}
+
+function terminalSize(stdout) {
+  return {
+    columns: Math.max(72, stdout.columns || 120),
+    rows: Math.max(24, stdout.rows || 32),
+  };
+}
+
+function shortId(value) {
+  const id = String(value || "");
+  return id.length > 28 ? `${id.slice(0, 25)}...` : id;
+}
+
+function truncate(value, max) {
+  const text = stripVTControlCharacters(String(value || "")).replace(/\s+/g, " ");
+  return text.length > max ? `${text.slice(0, Math.max(1, max - 3))}...` : text;
+}
+
+function statusGlyph(run) {
+  if (run.controlState === "paused") return "Ⅱ";
+  if (run.controlState === "waiting_human") return "!";
+  if (run.controlState === "stopped" || run.status === "stopped") return "■";
+  if (["blocked", "failed"].includes(run.status)) return "×";
+  if (run.status === "merge_ready") return "✓";
+  return run.child || !TERMINAL_STATES.has(run.status) ? "●" : "○";
+}
+
+function statusLabel(run) {
+  if (run.controlState === "paused") return "PAUSED";
+  if (run.controlState === "stopping") return "STOPPING";
+  if (run.controlState === "stopped" || run.status === "stopped") return "STOPPED";
+  if (run.status === "pr_ready_for_review") return "PR READY - HUMAN REVIEW";
+  if (run.controlState === "waiting_human" || run.status === "waiting_human") {
+    return "WAITING FOR HUMAN";
+  }
+  if (run.status === "merge_ready") return "READY TO MERGE";
+  return String(run.status || "queued").replaceAll("_", " ").toUpperCase();
+}
+
+function statusColor(run) {
+  if (run.controlState === "waiting_human" || run.controlState === "paused") return "yellow";
+  if (["failed", "blocked", "stopped"].includes(run.status)) return "red";
+  if (run.controlState === "complete") return "green";
+  return "cyan";
+}