@ouro.bot/cli 0.1.0-alpha.26 → 0.1.0-alpha.260

package/dist/senses/cli/ouro-tui.js

@@ -0,0 +1,416 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueuedMessages = QueuedMessages;
+exports.OuroTui = OuroTui;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Ouroboros TUI — full terminal interface using Ink v3 + Static.
+ *
+ * Architecture:
+ *   <Static> renders completed messages ONCE — they scroll up naturally.
+ *   Only the "live" area (current streaming + spinner + input) re-renders.
+ *   This avoids the screen-clearing problem that broke the previous Ink attempt.
+ *
+ * Design language: ouroboros brand palette from ouroboros.bot / Outlook UI.
+ * ZERO business logic here — pure rendering from CliStore state.
+ */
+const react_1 = require("react");
+const ink_1 = require("ink");
+const streaming_markdown_1 = require("./streaming-markdown");
+const image_paste_1 = require("./image-paste");
+// ─── Ouroboros Brand Palette (ANSI RGB) ─────────────────────────────
+// From packages/outlook-ui/src/style.css and ouroboros.bot
+const OURO = {
+    scale: "#2f8f4e", // primary green
+    teal: "#4ec9b0", // tool/accent teal
+    glow: "#74e08f", // bright green (highlights)
+    bone: "#eef2ea", // light text
+    mist: "#a5b8a8", // dim text
+    shadow: "#708373", // very dim
+    fang: "#d35f47", // error red
+    gold: "#d6b56f", // warning amber
+    moss: "#183325", // subtle bg accent
+    separator: "#3a5a40", // dim line separator
+};
+// ─── Ring Spinner (growing/shrinking) ───────────────────────────────
+const RING_FRAMES = ["∙", "○", "◎", "●", "◎", "○"];
+function ringColor(elapsedSec) {
+    if (elapsedSec >= 45)
+        return OURO.fang;
+    if (elapsedSec >= 15)
+        return OURO.gold;
+    return OURO.scale;
+}
+// ─── Header ─────────────────────────────────────────────────────────
+/** Terminal width for content (capped at 200, with 2-char margin) */
+function safeWidth() {
+    return Math.min(process.stdout.columns || 80, 200) - 2;
+}
+/** Full terminal width for edge-to-edge elements (separators) */
+function termWidth() {
+    return process.stdout.columns || 80;
+}
+function Header({ agentName, model, contextPercent, cwd, resumeInfo }) {
+    const showCtx = contextPercent > 0;
+    const info = [agentName, model, cwd, showCtx ? `ctx ${contextPercent}%` : ""].filter(Boolean).join(" · ");
+    // 3-segment snake: TAIL (fixed) + MIDDLE (stretches) + HEAD (fixed)
+    const HEAD1 = "     ____";
+    const HEAD2 = "____/ O  \\___/";
+    const HEAD3 = "_________/   \\";
+    const TAIL1 = "   ";
+    const TAIL2 = " __";
+    const TAIL3 = "<__";
+    const fixedWidth = TAIL1.length + HEAD1.length;
+    const maxMiddle = safeWidth() - fixedWidth;
+    const middleLen = Math.max(Math.min(Math.max(info.length, 20), maxMiddle), 10);
+    const textPad = Math.max(middleLen - info.length, 0);
+    const line1 = TAIL1 + " ".repeat(middleLen) + HEAD1;
+    const line2 = TAIL2 + "_".repeat(middleLen) + HEAD2;
+    const line3text = (info.length > middleLen ? info.slice(0, middleLen) : info) + "_".repeat(textPad);
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.scale, children: line1 }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.scale, children: line2 }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { color: OURO.scale, children: [TAIL3, (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.glow, children: line3text }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.scale, children: HEAD3 })] }), resumeInfo ? ((0, jsx_runtime_1.jsxs)(ink_1.Text, { color: OURO.teal, children: ["  resuming \u00b7 ", resumeInfo.messageCount, " messages \u00b7 last active ", resumeInfo.timeAgo] })) : null] }));
+}
+// ─── Message Rendering ──────────────────────────────────────────────
+// Flow control tools are invisible to the user — they are internal agent mechanics
+const FLOW_CONTROL_TOOLS = new Set(["settle", "ponder", "observe", "rest"]);
+function ToolResultLine({ tc }) {
+    const icon = tc.success !== false ? "✓" : "✗";
+    const iconColor = tc.success !== false ? OURO.scale : OURO.fang;
+    const argColor = tc.success === false ? OURO.fang : OURO.shadow;
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: iconColor, children: icon }), " ", (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.teal, children: tc.name }), " ", (0, jsx_runtime_1.jsx)(ink_1.Text, { color: argColor, children: tc.argSummary })] }));
+}
+function MessageBlock({ msg }) {
+    if (msg.role === "tool") {
+        const visibleCalls = msg.toolCalls?.filter(tc => !FLOW_CONTROL_TOOLS.has(tc.name));
+        // Flow control tools produce no visible output at all
+        if (!visibleCalls || visibleCalls.length === 0)
+            return (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" });
+        return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", children: visibleCalls.map((tc, i) => (0, jsx_runtime_1.jsx)(ToolResultLine, { tc: tc }, i)) }));
+    }
+    if (msg.role === "user") {
+        return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", marginTop: 1, children: [msg.content ? (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.bone, bold: true, children: msg.content }) : null, (0, jsx_runtime_1.jsx)(ink_1.Box, { marginBottom: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }) })] }));
+    }
+    if (msg.role === "assistant") {
+        return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", marginBottom: 1, children: msg.content ? (0, jsx_runtime_1.jsx)(streaming_markdown_1.StreamingMarkdown, { text: msg.content, maxWidth: safeWidth() }) : null }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", marginTop: 1, children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.shadow, children: msg.content }), (0, jsx_runtime_1.jsx)(ink_1.Box, { marginBottom: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }) })] }));
+}
+// ─── Live Area (re-renders) ─────────────────────────────────────────
+function Spinner({ phrasePool, elapsed }) {
+    const [frame, setFrame] = (0, react_1.useState)(0);
+    const [currentPhrase, setCurrentPhrase] = (0, react_1.useState)(() => phrasePool.length > 0 ? phrasePool[Math.floor(Math.random() * phrasePool.length)] : "");
+    // Animate ring frames
+    (0, react_1.useEffect)(() => {
+        const iv = setInterval(() => setFrame(f => (f + 1) % RING_FRAMES.length), 120);
+        return () => clearInterval(iv);
+    }, []);
+    // Rotate phrases every 3 seconds
+    (0, react_1.useEffect)(() => {
+        if (phrasePool.length <= 1)
+            return;
+        const iv = setInterval(() => {
+            setCurrentPhrase(phrasePool[Math.floor(Math.random() * phrasePool.length)]);
+        }, 3000);
+        return () => clearInterval(iv);
+    }, [phrasePool]);
+    const color = ringColor(elapsed);
+    const timeStr = elapsed > 0 ? `${elapsed}s` : "";
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Text, { color: color, children: [RING_FRAMES[frame], " ", timeStr ? (0, jsx_runtime_1.jsxs)(ink_1.Text, { color: OURO.shadow, children: [timeStr, " \u00B7 "] }) : "", currentPhrase] }));
+}
+function formatActiveToolArgs(name, args) {
+    switch (name) {
+        case "shell":
+            return `$ ${args.command ?? "?"}`;
+        case "read_file":
+            return `path=${args.path ?? "?"}`;
+        case "write_file":
+            return `path=${args.path ?? "?"}`;
+        case "edit_file":
+            return args.path ?? "?";
+        case "glob":
+            return `pattern=${args.pattern ?? "?"}`;
+        case "grep":
+            return `pattern=${args.pattern ?? "?"} ${args.path ? `path=${args.path}` : ""}`.trim();
+        default: {
+            // Show first 2 key=value pairs
+            const entries = Object.entries(args).slice(0, 2);
+            return entries.map(([k, v]) => `${k}=${String(v).slice(0, 50)}`).join(" ");
+        }
+    }
+}
+function ActiveToolLine({ tool }) {
+    // Hide flow control tools from in-progress display
+    if (FLOW_CONTROL_TOOLS.has(tool.name))
+        return (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" });
+    const argStr = formatActiveToolArgs(tool.name, tool.args);
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.shadow, children: "∙" }), " ", (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.teal, children: tool.name }), " ", (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.shadow, children: argStr })] }));
+}
+function LiveArea({ live, elapsed }) {
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [live.streamingText ? ((0, jsx_runtime_1.jsx)(streaming_markdown_1.StreamingMarkdown, { text: live.streamingText, maxWidth: safeWidth() })) : null, live.activeTool ? ((0, jsx_runtime_1.jsx)(ActiveToolLine, { tool: live.activeTool })) : null, live.loading ? ((0, jsx_runtime_1.jsx)(Spinner, { phrasePool: live.spinnerPhrasePool, elapsed: elapsed })) : null, live.errorMessage ? ((0, jsx_runtime_1.jsxs)(ink_1.Text, { color: OURO.fang, children: ["✗ ", live.errorMessage] })) : null, live.kickMessage ? ((0, jsx_runtime_1.jsxs)(ink_1.Text, { color: OURO.gold, children: ["↻ ", live.kickMessage] })) : null] }));
+}
+// ─── Queued Messages ───────────────────────────────────────────────
+function QueuedMessages({ items }) {
+    if (items.length === 0)
+        return (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" });
+    return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", children: items.map((text, i) => ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.shadow, children: "\u231B queued: " }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { color: OURO.mist, children: ["\"", text, "\""] })] }, i))) }));
+}
+// ─── Input ──────────────────────────────────────────────────────────
+function InputArea({ onSubmit, onCtrlC, history, queuedInputs, onPopQueue, agentName, model, onImageMap }) {
+    const [input, setInput] = (0, react_1.useState)("");
+    const [cursorPos, setCursorPos] = (0, react_1.useState)(0); // cursor position within input
+    const [tooltip, setTooltip] = (0, react_1.useState)("");
+    const [cursorVisible, setCursorVisible] = (0, react_1.useState)(true);
+    const inputRef = (0, react_1.useRef)("");
+    const cursorRef = (0, react_1.useRef)(0);
+    const historyIdx = (0, react_1.useRef)(-1);
+    const savedInput = (0, react_1.useRef)("");
+    // Deferred ESC handling: Ink 3.2 fires escape events for ESC prefix of arrow
+    // keys (\x1b[D) and Alt+Enter (\x1b\r). We defer ESC actions by 80ms — if
+    // another key arrives in that window, it was an escape sequence, not standalone ESC.
+    const escTimerRef = (0, react_1.useRef)(null);
+    const lastEscTime = (0, react_1.useRef)(0);
+    const tooltipTimerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => () => {
+        if (tooltipTimerRef.current)
+            clearTimeout(tooltipTimerRef.current);
+    }, []);
+    // Helper: update input and cursor together
+    const updateInput = (text, pos) => {
+        inputRef.current = text;
+        cursorRef.current = pos ?? text.length;
+        setInput(text);
+        setCursorPos(cursorRef.current);
+    };
+    // Blinking cursor
+    (0, react_1.useEffect)(() => {
+        const iv = setInterval(() => setCursorVisible(v => !v), 530);
+        return () => clearInterval(iv);
+    }, []);
+    const handleCtrlC = (0, react_1.useCallback)(() => {
+        const action = onCtrlC(inputRef.current.length > 0);
+        if (action === "clear") {
+            inputRef.current = "";
+            setInput("");
+            setTooltip("");
+            setTooltip("");
+        }
+        else if (action === "warn") {
+            // tooltip handled below
+            setTooltip("Ctrl-C again to exit");
+            if (tooltipTimerRef.current)
+                clearTimeout(tooltipTimerRef.current);
+            tooltipTimerRef.current = setTimeout(() => setTooltip(""), 3000);
+        }
+        // "abort" and "exit" are handled by the parent (cli.ts)
+    }, [onCtrlC]);
+    (0, ink_1.useInput)((inputChar, key) => {
+        if (key.ctrl && inputChar === "c") {
+            handleCtrlC();
+            return;
+        }
+        // Input is NEVER blocked — user can type while agent responds (TTFA)
+        // Any non-Ctrl-C input clears tooltip
+        setTooltip("");
+        if (key.escape) {
+            lastEscTime.current = Date.now();
+            // Defer ESC action — if another key arrives within 80ms, this was an escape
+            // sequence prefix (arrow key, Alt+Enter), not a standalone Escape press.
+            if (escTimerRef.current)
+                clearTimeout(escTimerRef.current);
+            escTimerRef.current = setTimeout(() => {
+                escTimerRef.current = null;
+                if (inputRef.current) {
+                    updateInput("");
+                    historyIdx.current = -1;
+                    setTooltip("Esc again to clear");
+                    if (tooltipTimerRef.current)
+                        clearTimeout(tooltipTimerRef.current);
+                    tooltipTimerRef.current = setTimeout(() => setTooltip(""), 2000);
+                }
+                else if (queuedInputs.length > 0) {
+                    const items = onPopQueue();
+                    updateInput(items.join("\n"));
+                    historyIdx.current = -1;
+                }
+                else {
+                    setTooltip("");
+                }
+            }, 80);
+            return;
+        }
+        // Cancel pending ESC action — this key is part of an escape sequence
+        if (escTimerRef.current) {
+            clearTimeout(escTimerRef.current);
+            escTimerRef.current = null;
+        }
+        if (key.return) {
+            // Alt+Enter: detect via key.meta OR recent ESC (within 50ms — Ink splits \x1b\r)
+            const recentEsc = (Date.now() - lastEscTime.current) < 50;
+            if (key.meta || key.shift || recentEsc) {
+                lastEscTime.current = 0;
+                const before = inputRef.current.slice(0, cursorRef.current);
+                const after = inputRef.current.slice(cursorRef.current);
+                updateInput(before + "\n" + after, cursorRef.current + 1);
+                return;
+            }
+            // Backslash+Enter: insert newline (like Claude Code)
+            if (cursorRef.current > 0 && inputRef.current[cursorRef.current - 1] === "\\") {
+                const before = inputRef.current.slice(0, cursorRef.current - 1);
+                const after = inputRef.current.slice(cursorRef.current);
+                updateInput(before + "\n" + after, cursorRef.current);
+                return;
+            }
+            const text = inputRef.current;
+            if (text.trim()) {
+                const { text: processedText, images } = (0, image_paste_1.processSubmitInput)(text);
+                if (images.size > 0 && onImageMap) {
+                    onImageMap(images);
+                }
+                onSubmit(images.size > 0 ? processedText : text);
+            }
+            updateInput("");
+            historyIdx.current = -1;
+            return;
+        }
+        if (key.backspace || key.delete) {
+            if (cursorRef.current > 0) {
+                // Option+Backspace: delete word
+                if (key.meta) {
+                    const before = inputRef.current.slice(0, cursorRef.current);
+                    const after = inputRef.current.slice(cursorRef.current);
+                    const wordStart = before.replace(/\s*\S+\s*$/, "");
+                    updateInput(wordStart + after, wordStart.length);
+                }
+                else {
+                    const before = inputRef.current.slice(0, cursorRef.current - 1);
+                    const after = inputRef.current.slice(cursorRef.current);
+                    updateInput(before + after, cursorRef.current - 1);
+                }
+            }
+            historyIdx.current = -1;
+            return;
+        }
+        // Left/right arrow: move cursor
+        if (key.leftArrow) {
+            if (key.meta) {
+                // Option+Left: jump to previous word boundary
+                const before = inputRef.current.slice(0, cursorRef.current);
+                const match = before.match(/(?:^|\s)\S+\s*$/);
+                const newPos = match ? cursorRef.current - match[0].length + (match[0].startsWith(" ") ? 1 : 0) : 0;
+                cursorRef.current = Math.max(0, newPos);
+                setCursorPos(cursorRef.current);
+            }
+            else {
+                cursorRef.current = Math.max(0, cursorRef.current - 1);
+                setCursorPos(cursorRef.current);
+            }
+            return;
+        }
+        if (key.rightArrow) {
+            if (key.meta) {
+                // Option+Right: jump to next word boundary
+                const after = inputRef.current.slice(cursorRef.current);
+                const match = after.match(/^\s*\S+/);
+                const newPos = match ? cursorRef.current + match[0].length : inputRef.current.length;
+                cursorRef.current = Math.min(inputRef.current.length, newPos);
+                setCursorPos(cursorRef.current);
+            }
+            else {
+                cursorRef.current = Math.min(inputRef.current.length, cursorRef.current + 1);
+                setCursorPos(cursorRef.current);
+            }
+            return;
+        }
+        // Up/Down: queue pop takes priority over history
+        if (key.upArrow) {
+            // If not already browsing history and queue has items, pop queue into input
+            if (historyIdx.current === -1 && queuedInputs.length > 0) {
+                const items = onPopQueue();
+                updateInput(items.join("\n"));
+                return;
+            }
+            // Otherwise, browse history
+            if (history.length > 0) {
+                if (historyIdx.current === -1) {
+                    savedInput.current = inputRef.current;
+                    historyIdx.current = history.length - 1;
+                }
+                else if (historyIdx.current > 0) {
+                    historyIdx.current--;
+                }
+                updateInput(history[historyIdx.current]);
+            }
+            return;
+        }
+        if (key.downArrow) {
+            if (historyIdx.current >= 0) {
+                if (historyIdx.current < history.length - 1) {
+                    historyIdx.current++;
+                    updateInput(history[historyIdx.current]);
+                }
+                else {
+                    historyIdx.current = -1;
+                    updateInput(savedInput.current);
+                }
+            }
+            return;
+        }
+        // Meta+B / Meta+F: word movement (emacs — Option+Arrow on macOS sends these)
+        if (key.meta && inputChar === "b") {
+            const before = inputRef.current.slice(0, cursorRef.current);
+            const match = before.match(/(?:^|\s)\S+\s*$/);
+            cursorRef.current = match ? Math.max(0, cursorRef.current - match[0].length + (match[0][0] === " " ? 1 : 0)) : 0;
+            setCursorPos(cursorRef.current);
+            return;
+        }
+        if (key.meta && inputChar === "f") {
+            const after = inputRef.current.slice(cursorRef.current);
+            const match = after.match(/^\s*\S+/);
+            cursorRef.current = match ? Math.min(inputRef.current.length, cursorRef.current + match[0].length) : inputRef.current.length;
+            setCursorPos(cursorRef.current);
+            return;
+        }
+        // Meta+D: delete word forward
+        if (key.meta && inputChar === "d") {
+            const after = inputRef.current.slice(cursorRef.current);
+            const match = after.match(/^\s*\S+/);
+            if (match) {
+                const before = inputRef.current.slice(0, cursorRef.current);
+                const rest = after.slice(match[0].length);
+                updateInput(before + rest, cursorRef.current);
+            }
+            return;
+        }
+        // Ctrl+A / Ctrl+E: home / end
+        if (key.ctrl && inputChar === "a") {
+            cursorRef.current = 0;
+            setCursorPos(0);
+            return;
+        }
+        if (key.ctrl && inputChar === "e") {
+            cursorRef.current = inputRef.current.length;
+            setCursorPos(inputRef.current.length);
+            return;
+        }
+        // Regular character: insert at cursor position
+        if (!key.ctrl && !key.meta && inputChar) {
+            const before = inputRef.current.slice(0, cursorRef.current);
+            const after = inputRef.current.slice(cursorRef.current);
+            updateInput(before + inputChar + after, cursorRef.current + 1);
+            historyIdx.current = -1;
+        }
+    });
+    const isMultiline = input.includes("\n");
+    const inputLines = input.split("\n");
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: "─".repeat(termWidth()) }), isMultiline ? ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", children: inputLines.map((line, i) => ((0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.teal, bold: true, children: i === 0 ? ") " : "· " }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.bone, children: line }), i === inputLines.length - 1 ? (cursorVisible ? (0, jsx_runtime_1.jsx)(ink_1.Text, { backgroundColor: OURO.scale, color: "#000000", children: " " }) : (0, jsx_runtime_1.jsx)(ink_1.Text, { children: " " })) : null] }, i))) })) : ((0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.teal, bold: true, children: ") " }), !input && queuedInputs.length > 0 ? ((0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.shadow, children: "Press up to edit queued messages" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.bone, children: input.slice(0, cursorPos) }), cursorVisible
+                                ? (0, jsx_runtime_1.jsx)(ink_1.Text, { backgroundColor: OURO.scale, color: "#000000", children: input[cursorPos] ?? " " })
+                                : (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.bone, children: input[cursorPos] ?? " " }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.bone, children: input.slice(cursorPos + 1) })] }))] })), (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: "─".repeat(termWidth()) }), (0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: ["  ", agentName, model ? ` · ${model}` : "", " \u00B7 /help"] }), (0, jsx_runtime_1.jsx)(ink_1.Box, { flexGrow: 1 }), tooltip ? (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: tooltip }) : (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: "opt+enter for newline" })] })] }));
+}
+// ─── Main TUI Component ─────────────────────────────────────────────
+function OuroTui({ agentName, model, completedMessages, inputHistory, queuedInputs, live, elapsedSeconds, contextPercent, onSubmit, onCtrlC, onPopQueue, cwd, resumeInfo, onImageMap, }) {
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ink_1.Static, { items: [{ id: "__header__" }, ...completedMessages], children: (item, index) => {
+                    if (index === 0) {
+                        return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", marginBottom: 2, children: [(0, jsx_runtime_1.jsx)(ink_1.Box, { marginTop: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }) }), (0, jsx_runtime_1.jsx)(Header, { agentName: agentName, model: model, contextPercent: contextPercent, cwd: cwd, resumeInfo: resumeInfo }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.shadow, dimColor: true, children: "  Ctrl-C twice to exit \u00b7 \u2191\u2193 history \u00b7 Esc clear \u00b7 opt+Enter newline" })] }, "header"));
+                    }
+                    return (0, jsx_runtime_1.jsx)(MessageBlock, { msg: item }, item.id);
+                } }), (live.loading || live.streamingText || live.activeTool) ? (0, jsx_runtime_1.jsx)(ink_1.Box, { marginTop: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }) }) : null, (0, jsx_runtime_1.jsx)(LiveArea, { live: live, elapsed: elapsedSeconds }), (live.loading || live.streamingText || live.activeTool) ? (0, jsx_runtime_1.jsx)(ink_1.Box, { marginBottom: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }) }) : null, queuedInputs.length > 0 ? (0, jsx_runtime_1.jsx)(QueuedMessages, { items: queuedInputs }) : null, (0, jsx_runtime_1.jsx)(ink_1.Box, { marginTop: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }) }), (0, jsx_runtime_1.jsx)(InputArea, { onSubmit: onSubmit, onCtrlC: onCtrlC, history: inputHistory, queuedInputs: queuedInputs, onPopQueue: onPopQueue, agentName: agentName, model: model, onImageMap: onImageMap })] }));
+}

package/dist/senses/cli/spinner-imperative.js

@@ -0,0 +1,135 @@
+"use strict";
+/**
+ * Imperative snake-themed spinner for the CLI.
+ *
+ * Writes directly to stderr via setInterval — no React, no Ink.
+ * Features:
+ * - Ouroboros snake animation frames (serpent eating its own tail)
+ * - Elapsed time display
+ * - Stall detection with color interpolation: green -> amber (15s) -> red (45s)
+ * - Phrase rotation from agent.json phrase pools
+ * - Pause/resume for log coordination
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImperativeSpinner = void 0;
+const phrases_1 = require("../../mind/phrases");
+const runtime_1 = require("../../nerves/runtime");
+// Ring spinner frames (growing/shrinking — option #6)
+const SNAKE_FRAMES = [
+    "\u2219", // ∙ (small dot)
+    "\u25CB", // ○ (white circle)
+    "\u25CE", // ◎ (bullseye)
+    "\u25CF", // ● (black circle)
+    "\u25CE", // ◎ (bullseye)
+    "\u25CB", // ○ (white circle)
+];
+// ANSI color helpers — RGB escape sequences
+const RGB_GREEN = "\x1b[38;2;46;204;64m"; // #2ecc40 — ouroboros green
+const RGB_AMBER = "\x1b[38;2;243;156;18m"; // #f39c12
+const RGB_RED = "\x1b[38;2;231;76;60m"; // #e74c3c
+const DIM = "\x1b[2m";
+const RESET = "\x1b[0m";
+function stallColor(seconds) {
+    if (seconds >= 45)
+        return RGB_RED;
+    if (seconds >= 15)
+        return RGB_AMBER;
+    return RGB_GREEN;
+}
+function formatTime(seconds) {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    if (h > 0)
+        return `${h}h${m}m`;
+    if (m > 0)
+        return `${m}m${s}s`;
+    return `${s}s`;
+}
+class ImperativeSpinner {
+    frames = SNAKE_FRAMES;
+    frameIdx = 0;
+    iv = null;
+    phraseIv = null;
+    msg;
+    phrases = null;
+    lastPhrase = "";
+    stopped = false;
+    startTime = 0;
+    paused = false;
+    constructor(message = "working", phrases) {
+        this.msg = message;
+        if (phrases && phrases.length > 0)
+            this.phrases = phrases;
+    }
+    start() {
+        this.stopped = false;
+        this.paused = false;
+        this.startTime = Date.now();
+        process.stderr.write("\r\x1b[K");
+        this.render();
+        this.iv = setInterval(() => this.render(), 120);
+        if (this.phrases) {
+            this.phraseIv = setInterval(() => this.rotatePhrase(), 1500);
+        }
+        (0, runtime_1.emitNervesEvent)({
+            component: "senses",
+            event: "senses.spinner_start",
+            message: "imperative spinner started",
+            meta: { phrase: this.msg },
+        });
+    }
+    render() {
+        /* v8 ignore next -- race guard: timer callback fires after stop() @preserve */
+        if (this.stopped || this.paused)
+            return;
+        const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
+        const color = stallColor(elapsed);
+        const timeStr = formatTime(elapsed);
+        const frame = this.frames[this.frameIdx % this.frames.length];
+        process.stderr.write(`\r\x1b[K${color}${frame} ${this.msg}${RESET} ${DIM}${timeStr}${RESET} `);
+        this.frameIdx++;
+    }
+    rotatePhrase() {
+        /* v8 ignore next -- race guard: timer callback fires after stop() @preserve */
+        if (this.stopped)
+            return;
+        const next = (0, phrases_1.pickPhrase)(this.phrases, this.lastPhrase);
+        this.lastPhrase = next;
+        this.msg = next;
+    }
+    /* v8 ignore start -- pause/resume: exercised at runtime via log sink coordination @preserve */
+    pause() {
+        if (this.stopped)
+            return;
+        this.paused = true;
+        process.stderr.write("\r\x1b[K");
+    }
+    resume() {
+        if (this.stopped)
+            return;
+        this.paused = false;
+        this.render();
+    }
+    /* v8 ignore stop */
+    stop(ok) {
+        this.stopped = true;
+        if (this.iv) {
+            clearInterval(this.iv);
+            this.iv = null;
+        }
+        if (this.phraseIv) {
+            clearInterval(this.phraseIv);
+            this.phraseIv = null;
+        }
+        process.stderr.write("\r\x1b[K");
+        /* v8 ignore next -- ok parameter currently unused by callers @preserve */
+        if (ok)
+            process.stderr.write(`\x1b[32m\u2713\x1b[0m ${ok}\n`);
+    }
+    fail(msg) {
+        this.stop();
+        process.stderr.write(`\x1b[31m\u2717\x1b[0m ${msg}\n`);
+    }
+}
+exports.ImperativeSpinner = ImperativeSpinner;

package/dist/senses/cli/spinner.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnhancedSpinner = EnhancedSpinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ink_1 = require("ink");
+/**
+ * Enhanced spinner with ouroboros/snake-themed animation.
+ *
+ * Features:
+ * - Snake-themed animation frames (serpent eating its own tail)
+ * - Elapsed time display
+ * - Color interpolation: normal -> amber (>15s) -> red (>45s)
+ * - Output token counter during streaming
+ * - Phrase rotation (driven externally via props)
+ * - Reduced-motion: static text, no animation
+ */
+// Ouroboros brand palette
+const OURO_GREEN = "#2ecc40";
+const COLOR_AMBER = "#f39c12";
+const COLOR_RED = "#e74c3c";
+// Ouroboros snake-themed spinner frames
+// The serpent cycles through eating its own tail
+const SNAKE_FRAMES = [
+    "\u{1F40D}", // snake emoji
+    "\u25E0", // upper half circle
+    "\u25D4", // circle with upper right quadrant
+    "\u25D1", // circle with right half
+    "\u25D5", // circle with all but upper left quadrant
+    "\u25E1", // lower half circle
+    "\u25CB", // white circle (tail swallowed)
+    "\u25CF", // black circle (digesting)
+];
+// Static indicator for reduced-motion
+const STATIC_INDICATOR = "\u2022"; // bullet
+function formatTime(seconds) {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    if (h > 0)
+        return `${h}h${m}m`;
+    if (m > 0)
+        return `${m}m${s}s`;
+    return `${s}s`;
+}
+function stallColor(seconds) {
+    if (seconds >= 45)
+        return COLOR_RED;
+    if (seconds >= 15)
+        return COLOR_AMBER;
+    return OURO_GREEN;
+}
+function EnhancedSpinner({ elapsedSeconds, phrase, outputTokens, reducedMotion, }) {
+    const [frame, setFrame] = (0, react_1.useState)(0);
+    // Animate spinner (unless reduced-motion)
+    react_1.default.useEffect(() => {
+        if (reducedMotion)
+            return;
+        const iv = setInterval(() => {
+            setFrame(f => (f + 1) % SNAKE_FRAMES.length);
+        }, 120);
+        return () => clearInterval(iv);
+    }, [reducedMotion]);
+    const color = stallColor(elapsedSeconds);
+    const timeStr = formatTime(elapsedSeconds);
+    const indicator = reducedMotion ? STATIC_INDICATOR : SNAKE_FRAMES[frame % SNAKE_FRAMES.length];
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { color: color, children: [indicator, " "] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: color, children: phrase }), (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: ` ${timeStr}` }), outputTokens !== undefined ? ((0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: ` ${outputTokens} tok` })) : null] }));
+}