@ouro.bot/cli 0.1.0-alpha.174 → 0.1.0-alpha.176

package/dist/senses/cli/ink-app.js

@@ -0,0 +1,156 @@
+"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.InkApp = InkApp;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ink_1 = require("ink");
+const streaming_markdown_1 = require("./streaming-markdown");
+/**
+ * Ouroboros CLI TUI — Ink application shell.
+ *
+ * Replaces the imperative readline-based CLI with a React/Ink component tree.
+ * Provides: message list, input area, spinner, tool result display.
+ *
+ * Design: Ouroboros-themed (green serpent), NOT Claude/Anthropic design language.
+ * Copy-paste integrity: no padding characters. Visual hierarchy via color/bold/dim only.
+ */
+// Ouroboros brand palette
+const OURO_GREEN = "#2ecc40";
+const OURO_TEAL = "#4ec9b0";
+const OURO_DIM = true;
+// Snake-themed spinner frames: serpent eating its own tail
+const SNAKE_FRAMES = [
+    "\u{1F40D}\u2003", // snake emoji
+    "\u25E0\u2003", // upper half circle
+    "\u25D4\u2003", // circle with upper right quadrant
+    "\u25D1\u2003", // circle with right half
+    "\u25D5\u2003", // circle with all but upper left quadrant
+    "\u25E1\u2003", // lower half circle
+    "\u{1F40D}\u2003", // snake emoji again
+    "\u25CB\u2003", // white circle (tail eaten)
+];
+function UserMessage({ content }) {
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO_TEAL, bold: true, children: ") " }), (0, jsx_runtime_1.jsx)(ink_1.Text, { children: content })] }));
+}
+function AssistantMessage({ content }) {
+    return ((0, jsx_runtime_1.jsx)(ink_1.Box, { children: (0, jsx_runtime_1.jsx)(streaming_markdown_1.StreamingMarkdown, { text: content }) }));
+}
+function ToolCallDisplay({ toolCall }) {
+    let argSummary = "";
+    try {
+        const args = JSON.parse(toolCall.function.arguments);
+        const first = Object.values(args)[0];
+        if (typeof first === "string")
+            argSummary = first.length > 60 ? first.slice(0, 57) + "..." : first;
+    }
+    catch {
+        argSummary = toolCall.function.arguments.slice(0, 60);
+    }
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO_GREEN, bold: true, children: toolCall.function.name }), argSummary ? (0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [" ", argSummary] }) : null] }));
+}
+function ToolResultDisplay({ result }) {
+    const color = result.success ? OURO_GREEN : "#e74c3c";
+    const icon = result.success ? "\u2713" : "\u2717";
+    const summary = result.result.length > 120
+        ? result.result.slice(0, 117) + "..."
+        : result.result;
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { color: color, children: [icon, " ", result.name] }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [" ", summary.replace(/\n/g, " ")] })] }));
+}
+function SpinnerComponent({ text, frame }) {
+    const char = SNAKE_FRAMES[frame % SNAKE_FRAMES.length];
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO_GREEN, children: char }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: OURO_DIM, children: [text, "..."] })] }));
+}
+function InputArea({ onSubmit, }) {
+    const [input, setInput] = (0, react_1.useState)("");
+    // Ref tracks the latest input value so useInput callback always sees current state
+    const inputRef = (0, react_1.useRef)("");
+    (0, ink_1.useInput)((inputChar, key) => {
+        if (key.return) {
+            if (inputRef.current.trim() && onSubmit) {
+                onSubmit(inputRef.current);
+            }
+            inputRef.current = "";
+            setInput("");
+            return;
+        }
+        if (key.backspace || key.delete) {
+            inputRef.current = inputRef.current.slice(0, -1);
+            setInput(inputRef.current);
+            return;
+        }
+        if (!key.ctrl && !key.meta && inputChar) {
+            inputRef.current += inputChar;
+            setInput(inputRef.current);
+        }
+    });
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO_TEAL, bold: true, children: ") " }), (0, jsx_runtime_1.jsx)(ink_1.Text, { children: input })] }));
+}
+function MessageList({ messages, toolResults, }) {
+    const toolResultMap = new Map();
+    if (toolResults) {
+        for (const tr of toolResults) {
+            toolResultMap.set(tr.toolCallId, tr);
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", children: messages.map((msg, i) => {
+            if (msg.role === "user" && msg.content) {
+                return (0, jsx_runtime_1.jsx)(UserMessage, { content: msg.content }, i);
+            }
+            if (msg.role === "assistant") {
+                return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [msg.content ? (0, jsx_runtime_1.jsx)(AssistantMessage, { content: msg.content }) : null, msg.tool_calls?.map(tc => {
+                            const tr = toolResultMap.get(tc.id);
+                            return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ToolCallDisplay, { toolCall: tc }), tr ? (0, jsx_runtime_1.jsx)(ToolResultDisplay, { result: tr }) : null] }, tc.id));
+                        })] }, i));
+            }
+            return null;
+        }) }));
+}
+function InkApp({ messages, onSubmit, loading, spinnerText, toolResults, }) {
+    const [spinnerFrame, setSpinnerFrame] = (0, react_1.useState)(0);
+    // Animate spinner
+    react_1.default.useEffect(() => {
+        if (!loading)
+            return;
+        const iv = setInterval(() => {
+            setSpinnerFrame(f => (f + 1) % SNAKE_FRAMES.length);
+        }, 120);
+        return () => clearInterval(iv);
+    }, [loading]);
+    const handleSubmit = (0, react_1.useCallback)((text) => {
+        onSubmit?.(text);
+    }, [onSubmit]);
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(MessageList, { messages: messages, toolResults: toolResults }), loading && spinnerText ? ((0, jsx_runtime_1.jsx)(SpinnerComponent, { text: spinnerText, frame: spinnerFrame })) : null, (0, jsx_runtime_1.jsx)(InputArea, { onSubmit: handleSubmit })] }));
+}

package/dist/senses/cli/inline-diff.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineDiff = InlineDiff;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const ink_1 = require("ink");
+// Ouroboros brand colors
+const OURO_GREEN = "#2ecc40"; // added lines -- serpent green
+const OURO_RED = "#e74c3c"; // removed lines
+const OURO_HEADER = "#4ec9b0"; // file header -- teal
+const OURO_LINE_NUM = "gray"; // line numbers -- subtle
+/**
+ * Simple line-level diff algorithm (Myers-like via LCS).
+ * Produces a sequence of add/remove/context lines.
+ */
+function computeDiff(before, after) {
+    const oldLines = before ? before.split("\n") : [];
+    const newLines = after ? after.split("\n") : [];
+    // LCS-based diff
+    const m = oldLines.length;
+    const n = newLines.length;
+    const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+    for (let i = 1; i <= m; i++) {
+        for (let j = 1; j <= n; j++) {
+            if (oldLines[i - 1] === newLines[j - 1]) {
+                dp[i][j] = dp[i - 1][j - 1] + 1;
+            }
+            else {
+                dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+            }
+        }
+    }
+    // Backtrack to build diff
+    const result = [];
+    let i = m;
+    let j = n;
+    while (i > 0 || j > 0) {
+        if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+            result.unshift({ type: "context", content: oldLines[i - 1], oldNum: i, newNum: j });
+            i--;
+            j--;
+        }
+        else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+            result.unshift({ type: "add", content: newLines[j - 1], newNum: j });
+            j--;
+        }
+        else {
+            result.unshift({ type: "remove", content: oldLines[i - 1], oldNum: i });
+            i--;
+        }
+    }
+    return result;
+}
+function DiffLineComponent({ line }) {
+    const num = line.type === "remove" ? line.oldNum : line.newNum;
+    /* v8 ignore next -- defensive fallback; line numbers always present @preserve */
+    const lineNum = num !== undefined ? String(num) : "";
+    const prefix = line.type === "add" ? "+" : line.type === "remove" ? "-" : " ";
+    const color = line.type === "add" ? OURO_GREEN : line.type === "remove" ? OURO_RED : undefined;
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO_LINE_NUM, children: lineNum.padStart(4) }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: color, children: ` ${prefix} ${line.content}` })] }));
+}
+function InlineDiff({ before, after, filePath }) {
+    const diffLines = computeDiff(before, after);
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO_HEADER, bold: true, children: filePath }), diffLines.map((line, i) => ((0, jsx_runtime_1.jsx)(DiffLineComponent, { line: line }, i)))] }));
+}

package/dist/senses/cli/message-list.js

@@ -0,0 +1,84 @@
+"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.ScrollableMessageList = ScrollableMessageList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ink_1 = require("ink");
+const streaming_markdown_1 = require("./streaming-markdown");
+/**
+ * Scrollable message list with virtual rendering.
+ *
+ * Only renders messages within the viewport window. Supports:
+ * - Auto-scroll to bottom (pinned mode, default)
+ * - Scroll lock at a specific offset
+ * - "N below" indicator when scrolled up
+ *
+ * Ouroboros-themed: green serpent palette, no padding decoration.
+ */
+// Ouroboros brand palette
+const OURO_TEAL = "#4ec9b0";
+const OURO_INDICATOR = "#2ecc40";
+function MessageItem({ message }) {
+    if (message.role === "user" && message.content) {
+        return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO_TEAL, bold: true, children: ") " }), (0, jsx_runtime_1.jsx)(ink_1.Text, { children: message.content })] }));
+    }
+    if (message.role === "assistant" && message.content) {
+        return (0, jsx_runtime_1.jsx)(streaming_markdown_1.StreamingMarkdown, { text: message.content });
+    }
+    // system or empty messages render nothing visible
+    return (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" });
+}
+function ScrollableMessageList({ messages, viewportHeight, scrollOffset, }) {
+    const { visibleMessages, belowCount } = (0, react_1.useMemo)(() => {
+        if (messages.length === 0) {
+            return { visibleMessages: [], belowCount: 0 };
+        }
+        let start;
+        if (scrollOffset !== undefined) {
+            start = Math.max(0, Math.min(scrollOffset, messages.length - 1));
+        }
+        else {
+            // Auto-scroll: pin to bottom
+            start = Math.max(0, messages.length - viewportHeight);
+        }
+        const end = Math.min(start + viewportHeight, messages.length);
+        return {
+            visibleMessages: messages.slice(start, end),
+            belowCount: messages.length - end,
+        };
+    }, [messages, viewportHeight, scrollOffset]);
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [visibleMessages.map((msg, i) => ((0, jsx_runtime_1.jsx)(MessageItem, { message: msg }, i))), belowCount > 0 ? ((0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO_INDICATOR, dimColor: true, children: `${belowCount} below` })) : null] }));
+}

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

@@ -0,0 +1,296 @@
+"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.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 = __importStar(require("react"));
+const ink_1 = require("ink");
+const streaming_markdown_1 = require("./streaming-markdown");
+// ─── 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 ─────────────────────────────────────────────────────────
+function Header({ agentName, model, contextPercent, cwd }) {
+    const showCtx = contextPercent > 0;
+    const info = [agentName, model, cwd, showCtx ? `ctx ${contextPercent}%` : ""].filter(Boolean).join(" · ");
+    // 3-segment snake: TAIL (fixed) + MIDDLE (stretches) + HEAD (fixed)
+    // From the reference art, segments split at the dots:
+    //
+    //    .                  .     ____
+    //  __.__________________.____/ O  \___/
+    // <__.__________________._________/   \
+    //
+    // TAIL:     line1=""     line2=" __"   line3="<__"
+    // MIDDLE:   line1=" "    line2="_"     line3="_" (or text)
+    // HEAD:     line1="     ____"  line2="____/ O  \\___/"  line3="_________/   \\"
+    const HEAD1 = "     ____";
+    const HEAD2 = "____/ O  \\___/";
+    const HEAD3 = "_________/   \\";
+    const TAIL1 = "   ";
+    const TAIL2 = " __";
+    const TAIL3 = "<__";
+    const middleLen = Math.max(info.length, 20);
+    const textPad = middleLen - info.length;
+    const line1 = TAIL1 + " ".repeat(middleLen) + HEAD1;
+    const line2 = TAIL2 + "_".repeat(middleLen) + HEAD2;
+    const line3text = 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 })] })] }));
+}
+// ─── 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));
+        if (!visibleCalls || visibleCalls.length === 0)
+            return (0, jsx_runtime_1.jsx)(ink_1.Box, { height: 1, children: (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, { height: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { children: " " }) })] }));
+    }
+    if (msg.role === "assistant") {
+        return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [msg.content ? (0, jsx_runtime_1.jsx)(streaming_markdown_1.StreamingMarkdown, { text: msg.content }) : null, (0, jsx_runtime_1.jsx)(ink_1.Box, { height: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { children: " " }) })] }));
+    }
+    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, { height: 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.Box, { height: 1, children: (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 })) : 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] }));
+}
+// ─── Input ──────────────────────────────────────────────────────────
+function InputArea({ onSubmit, suppressed, onCtrlC, agentName, model, history }) {
+    const [input, setInput] = (0, react_1.useState)("");
+    const [tooltip, setTooltip] = (0, react_1.useState)("");
+    const [cursorVisible, setCursorVisible] = (0, react_1.useState)(true);
+    const inputRef = (0, react_1.useRef)("");
+    const historyIdx = (0, react_1.useRef)(-1); // -1 = not browsing history
+    const savedInput = (0, react_1.useRef)(""); // saves current input when entering history
+    // 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");
+            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;
+        }
+        if (suppressed)
+            return;
+        // Any non-Ctrl-C input clears tooltip
+        setTooltip("");
+        if (key.escape) {
+            if (inputRef.current) {
+                inputRef.current = "";
+                setInput("");
+                historyIdx.current = -1;
+                setTooltip("Esc again to clear");
+                setTimeout(() => setTooltip(""), 2000);
+            }
+            else {
+                setTooltip("");
+            }
+            return;
+        }
+        if (key.return) {
+            const text = inputRef.current;
+            if (text.trim())
+                onSubmit(text);
+            inputRef.current = "";
+            setInput("");
+            historyIdx.current = -1;
+            return;
+        }
+        if (key.backspace || key.delete) {
+            inputRef.current = inputRef.current.slice(0, -1);
+            setInput(inputRef.current);
+            historyIdx.current = -1;
+            return;
+        }
+        // Up arrow: browse history (newest first)
+        if (key.upArrow && history.length > 0) {
+            if (historyIdx.current === -1) {
+                // Entering history — save current input
+                savedInput.current = inputRef.current;
+                historyIdx.current = history.length - 1;
+            }
+            else if (historyIdx.current > 0) {
+                historyIdx.current--;
+            }
+            inputRef.current = history[historyIdx.current];
+            setInput(inputRef.current);
+            return;
+        }
+        // Down arrow: browse forward or restore saved input
+        if (key.downArrow) {
+            if (historyIdx.current >= 0) {
+                if (historyIdx.current < history.length - 1) {
+                    historyIdx.current++;
+                    inputRef.current = history[historyIdx.current];
+                }
+                else {
+                    // Past end of history — restore saved input
+                    historyIdx.current = -1;
+                    inputRef.current = savedInput.current;
+                }
+                setInput(inputRef.current);
+            }
+            return;
+        }
+        if (!key.ctrl && !key.meta && inputChar) {
+            inputRef.current += inputChar;
+            setInput(inputRef.current);
+            historyIdx.current = -1; // typing resets history browsing
+        }
+    });
+    // Get terminal width (capped for sanity)
+    const cols = Math.min(process.stdout.columns || 80, 200);
+    if (suppressed) {
+        // During model generation: show status bar but no input
+        return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: "─".repeat(cols) }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [agentName, model ? ` · ${model}` : ""] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: "─".repeat(cols) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: "─".repeat(cols) }), (0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.teal, bold: true, children: ") " }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.bone, children: input }), cursorVisible ? (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.scale, children: "█" }) : (0, jsx_runtime_1.jsx)(ink_1.Text, { children: " " })] }), (0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [agentName, model ? ` · ${model}` : ""] }), (0, jsx_runtime_1.jsx)(ink_1.Box, { flexGrow: 1 }), tooltip ? (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: tooltip }) : null] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: "─".repeat(cols) })] }));
+}
+// ─── Main TUI Component ─────────────────────────────────────────────
+function OuroTui({ agentName, model, completedMessages, inputHistory, live, elapsedSeconds, contextPercent, onSubmit, onCtrlC, cwd, }) {
+    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", children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { children: " " }), (0, jsx_runtime_1.jsx)(Header, { agentName: agentName, model: model, contextPercent: contextPercent, cwd: cwd }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: OURO.shadow, children: "  Press Ctrl-C twice to exit \u00b7 \u2191\u2193 history \u00b7 Esc clear" }), (0, jsx_runtime_1.jsx)(ink_1.Text, { children: " " })] }, "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, { height: 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, { height: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { children: " " }) }) : null, (0, jsx_runtime_1.jsx)(InputArea, { onSubmit: onSubmit, suppressed: live.inputSuppressed, onCtrlC: onCtrlC, agentName: agentName, model: model, history: inputHistory })] }));
+}