@sofer_agent/cli 0.3.11 → 0.3.13

package/dist/tui.js

@@ -1,346 +1,199 @@
-const SIDEBAR_W = 28;
-const MIN_CHAT_W = 34;
-const GUTTER = "  ";
-const LABEL_W = 6;
-const INDENT = `${GUTTER}${" ".repeat(LABEL_W + 1)}`;
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<box flexdirection=row marginbottom=1><text flexShrink=0></text><text wrapMode=word flexGrow=1 fg=#e5e7eb>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<box flexdirection=column><scrollbox flexgrow=1 flexshrink=1 stickyscroll stickystart=bottom></scrollbox><box flexdirection=row flexshrink=0 paddingleft=3 paddingright=2 margintop=1><text fg=#67e8f9 flexGrow=1></text></box><box flexdirection=row flexshrink=0 minheight=3 maxheight=8 borderstyle=rounded bordercolor=#374151 paddingleft=1 paddingright=1 marginleft=2 marginright=2><text fg=#67e8f9 flexShrink=0>› </text><text wrapMode=word flexGrow=1 fg=#e5e7eb></text></box><box flexdirection=row flexshrink=0 paddingleft=2 paddingright=2><text fg=#9ca3af>`);
+import { render, useKeyboard, useTerminalDimensions } from "@opentui/solid";
+import { For, createEffect, createSignal, onCleanup } from "solid-js";
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const SPINNER_MS = 80;
-// Box-drawing: ╭ ─ ╮ │ ╰ ╯ ├ ┤ ┬ ┴ ┼
-const B = {
-    tl: "╭", tr: "╮", bl: "╰", br: "╯",
-    h: "─", v: "│",
-    lt: "├", rt: "┤", tt: "┬", bt: "┴",
-};
-export class SoferTui {
-    agent;
-    config;
-    state = [];
-    inputBuf = "";
-    cursor = 0;
-    columns = 90;
-    rows = 28;
-    chatW = 58;
-    sideW = 26;
-    bodyH = 22;
-    scrollOff = 0;
-    // spinner
-    status = "idle";
-    spinnerFrame = 0;
-    spinnerTimer = null;
-    turnStartedAt = 0;
-    // interrupt
-    abortCtrl = null;
-    // sidebar
-    info = { lastTurnIn: 0, lastTurnOut: 0 };
-    // callbacks
-    resolve = null;
-    onLine = null;
-    constructor(agent, config) {
-        this.agent = agent;
-        this.config = config;
-    }
-    measure() {
-        this.columns = Math.max(80, process.stdout.columns ?? 80);
-        this.rows = Math.max(24, process.stdout.rows ?? 24);
-        this.chatW = Math.max(MIN_CHAT_W, this.columns - SIDEBAR_W - 3);
-        this.sideW = this.columns - this.chatW - 3;
-        this.bodyH = this.rows - 5; // top border, input box(3), footer(1)
-    }
-    addMessage(role, text) {
-        this.state.push({ role, text });
-        this.scrollOff = Number.MAX_SAFE_INTEGER; // will be clamped to maxScroll in buildFrame
-    }
-    setInfo(info) {
-        Object.assign(this.info, info);
-    }
-    startSpinner() {
-        if (this.spinnerTimer)
-            return;
-        this.status = "thinking";
-        this.turnStartedAt = Date.now();
-        this.spinnerFrame = 0;
-        this.spinnerTimer = setInterval(() => {
-            this.spinnerFrame = (this.spinnerFrame + 1) % SPINNER_FRAMES.length;
-            this.render();
-        }, SPINNER_MS);
-    }
-    stopSpinner() {
-        this.status = "idle";
-        this.turnStartedAt = 0;
-        if (this.spinnerTimer) {
-            clearInterval(this.spinnerTimer);
-            this.spinnerTimer = null;
-        }
-    }
-    async run(onLine) {
-        this.onLine = onLine;
-        this.measure();
-        if (process.stdin.isTTY)
-            process.stdin.setRawMode?.(true);
-        process.stdin.on("data", this.handleInput);
-        process.stdout.on("resize", this.handleResize);
-        process.on("SIGWINCH", this.handleResize);
-        this.render();
-        return new Promise((resolve) => { this.resolve = resolve; });
-    }
-    shutdown() {
-        this.stopSpinner();
-        process.stdin.setRawMode?.(false);
-        process.stdin.removeAllListeners("data");
-        process.stdout.removeAllListeners("resize");
-        process.removeAllListeners("SIGWINCH");
-        this.render();
-        process.stdout.write("\n");
-        this.resolve?.();
-    }
-    // ── Input handling ──────────────────────────────────────────────────────
-    handleInput = (data) => {
-        const str = data.toString();
-        for (const ch of str) {
-            const code = ch.charCodeAt(0);
-            if (code === 3) {
-                this.shutdown();
-                return;
-            }
-            if (code === 4 && this.inputBuf.length === 0) {
-                this.shutdown();
-                return;
-            }
-            if (code === 27) {
-                if (this.status === "thinking" && this.abortCtrl) {
-                    this.abortCtrl.abort();
-                    return;
-                }
-                this.inputBuf = "";
-                this.cursor = 0;
-                this.render();
-                return;
-            }
-            if (this.status === "thinking")
-                continue;
-            if (code === 13) {
-                this.submit();
-                return;
-            }
-            if (code === 127) {
-                if (this.cursor > 0) {
-                    this.inputBuf = this.inputBuf.slice(0, this.cursor - 1) + this.inputBuf.slice(this.cursor);
-                    this.cursor--;
-                }
-                this.render();
-                return;
-            }
-            if (ch >= " ") {
-                this.inputBuf = this.inputBuf.slice(0, this.cursor) + ch + this.inputBuf.slice(this.cursor);
-                this.cursor++;
-                this.render();
-            }
-        }
-    };
-    async submit() {
-        const line = this.inputBuf.trim();
-        this.inputBuf = "";
-        this.cursor = 0;
-        if (!line) {
-            this.render();
-            return;
-        }
-        if (line === "/exit" || line === "/quit") {
-            this.shutdown();
-            return;
-        }
-        this.addMessage("you", line);
-        // scrollOff already set to MAX by addMessage (pinned to bottom)
-        this.abortCtrl = new AbortController();
-        this.startSpinner();
-        this.render();
-        await this.onLine?.(line, this.abortCtrl.signal);
-        this.abortCtrl = null;
-        this.stopSpinner();
-        this.render();
-    }
-    // ── Rendering ───────────────────────────────────────────────────────────
-    handleResize = () => { this.measure(); this.render(); };
-    render() {
-        this.measure();
-        process.stdout.write("\x1b[?25l\x1b[H" + this.buildFrame() + "\x1b[?25h");
-    }
-    buildFrame() {
-        const { columns, chatW, sideW, bodyH } = this;
-        const innerSideW = sideW - 2;
-        const sep = `${B.lt}${B.h.repeat(chatW)}${B.bt}${B.h.repeat(sideW)}${B.rt}`;
-        const inputW = columns - 2; // inside border
-        let buf = "";
-        // ── Top border ────────────────────────────────────────────────────────
-        buf += `${B.tl}${B.h.repeat(chatW)}${B.tt}${B.h.repeat(sideW)}${B.tr}\n`;
-        // ── Body ──────────────────────────────────────────────────────────────
-        const wrapped = this.state.flatMap((m) => this.wrapMessage(m, chatW));
-        const maxScroll = Math.max(0, wrapped.length - bodyH);
-        if (this.scrollOff > maxScroll)
-            this.scrollOff = maxScroll;
-        if (this.scrollOff < 0)
-            this.scrollOff = 0;
-        const visible = wrapped.slice(this.scrollOff, this.scrollOff + bodyH);
-        const sidebarLines = this.buildSidebar(innerSideW);
-        const sbTop = Math.max(0, Math.floor((bodyH - sidebarLines.length) / 2));
-        for (let r = 0; r < bodyH; r++) {
-            buf += B.v;
-            buf += visible[r] ? padTrunc(visible[r], chatW) : " ".repeat(chatW);
-            buf += B.v;
-            const sbIdx = r - sbTop;
-            const sbLine = (sbIdx >= 0 && sbIdx < sidebarLines.length) ? sidebarLines[sbIdx] : "";
-            buf += ` ${padRight(sbLine, innerSideW)} `;
-            buf += `${B.v}\n`;
-        }
-        // ── Separator ─────────────────────────────────────────────────────────
-        buf += `${sep}\n`;
-        // ── Spinner row ───────────────────────────────────────────────────────
-        if (this.status === "thinking") {
-            const frame = SPINNER_FRAMES[this.spinnerFrame];
-            const elapsed = this.turnStartedAt ? formatElapsed(Date.now() - this.turnStartedAt) : "";
-            const spinnerText = `${frame} thinking\u2026${elapsed ? ` ${elapsed}` : ""} (esc to interrupt)`;
-            buf += `${B.v} \x1b[36m${spinnerText}\x1b[0m${" ".repeat(Math.max(0, inputW - 1 - spinnerText.length))}${B.v}\n`;
-        }
-        // ── Input bar (bordered box) ─────────────────────────────────────────
-        buf += `${B.tl}${B.h.repeat(inputW)}${B.tr}\n`;
-        const cursorCh = this.status === "idle" ? "\x1b[5m▋\x1b[25m" : "";
-        const inputMaxW = inputW - 3; // "> " prefix + 1 padding
-        const visibleInput = this.inputBuf.length > inputMaxW
-            ? this.inputBuf.slice(this.inputBuf.length - inputMaxW)
-            : this.inputBuf;
-        const inputPad = inputMaxW - visibleInput.length;
-        buf += `${B.v} \x1b[36m>\x1b[0m ${visibleInput}${cursorCh}${" ".repeat(Math.max(0, inputPad))} ${B.v}\n`;
-        buf += `${B.bl}${B.h.repeat(inputW)}${B.br}\n`;
-        // ── Footer ────────────────────────────────────────────────────────────
-        const totalIn = this.agent.usage.tokens.inputTokens;
-        const totalOut = this.agent.usage.tokens.outputTokens;
-        const cost = this.agent.usage.costUsd.toFixed(4);
-        const ft = `\x1b[90m${this.agent.address.slice(0, 10)}…  ·  in ${totalIn}  out ${totalOut}  $${cost}  /exit\x1b[0m`;
-        buf += `${padTrunc(ft, columns)}\n`;
-        // ── Cursor position ───────────────────────────────────────────────────
-        // Row layout: 1(top border) + bodyH(body) + 1(sep) + [1 spinner] + 1(input top) + 1(input content) = bodyH+4|5
-        const cursorRow = bodyH + 3 + (this.status === "thinking" ? 1 : 0); // 1-indexed: body+sep+[spinner]+input-top+input-content
-        const cursorCol = 4 + Math.min(this.cursor, inputMaxW);
-        buf += `\x1b[${cursorRow};${cursorCol}H`;
-        return buf;
-    }
-    // ── Messages ────────────────────────────────────────────────────────────
-    wrapMessage(msg, width) {
-        const label = this.roleLabel(msg.role);
-        const bodyWidth = Math.max(10, width - GUTTER.length - LABEL_W - 1);
-        const lines = wrapText(msg.text, bodyWidth);
-        return lines.map((l, i) => i === 0 ? `${GUTTER}${label} ${l}` : `${INDENT}${l}`);
-    }
-    roleLabel(role) {
-        switch (role) {
-            case "you": return "\x1b[36myou   \x1b[0m";
-            case "agent": return `\x1b[32m${this.agent.name.toLowerCase().padEnd(LABEL_W)}\x1b[0m`;
-            case "system": return "\x1b[90msys   \x1b[0m";
-            case "error": return "\x1b[31merr   \x1b[0m";
-        }
-    }
-    // ── Sidebar ─────────────────────────────────────────────────────────────
-    buildSidebar(width) {
-        const { agent, config, info } = this;
-        const addr = `${agent.address.slice(0, 6)}…${agent.address.slice(-4)}`;
-        const totalIn = agent.usage.tokens.inputTokens;
-        const totalOut = agent.usage.tokens.outputTokens;
-        const cost = agent.usage.costUsd.toFixed(6);
-        const rows = [
-            `\x1b[1;36m${agent.name}\x1b[0m`,
-            `\x1b[90m${addr}\x1b[0m`,
-            "",
-            `${B.h.repeat(width)}`,
-            `\x1b[90mnetwork\x1b[0m  ${config.network}`,
-            `\x1b[90mmodel\x1b[0m    ${shortModel(config.brain.model)}`,
-        ];
-        if (info.balance) {
-            rows.push("", `\x1b[90mbalance\x1b[0m  \x1b[33m${info.balance} SUI\x1b[0m`);
-        }
-        rows.push("", `\x1b[90m▸ last turn\x1b[0m`, `  in  ${info.lastTurnIn}`, `  out ${info.lastTurnOut}`, "", `\x1b[90m▸ total\x1b[0m`, `  in  ${totalIn}`, `  out ${totalOut}`, `  \x1b[33m$${cost}\x1b[0m`);
-        return rows;
-    }
+// ── State signals (module-level so chat.ts can push into them) ──────────────
+
+const [rows, setRows] = createSignal([]);
+const [status, setStatus] = createSignal("idle");
+const [input, setInput] = createSignal("");
+const [info, setInfoSignal] = createSignal({
+  lastTurnIn: 0,
+  lastTurnOut: 0
+});
+const [turnStartedAt, setTurnStartedAt] = createSignal(null);
+const [spinnerFrame, setSpinnerFrame] = createSignal(0);
+const [activeAbort, setActiveAbort] = createSignal(null);
+
+// ── Exported imperative API (used by chat.ts) ────────────────────────────────
+
+export function addMessage(role, text) {
+  setRows(prev => [...prev, {
+    role,
+    text
+  }]);
 }
-// ── Helpers ────────────────────────────────────────────────────────────────
-function wrapText(text, width) {
-    if (!text)
-        return [""];
-    const lines = [];
-    // First split on hard newlines, then word-wrap each paragraph
-    for (const para of text.split("\n")) {
-        if (!para) {
-            lines.push("");
-            continue;
-        }
-        const words = para.split(" ");
-        let cur = "";
-        for (const w of words) {
-            // Break words longer than width
-            if (w.length > width) {
-                if (cur) {
-                    lines.push(cur);
-                    cur = "";
-                }
-                for (let i = 0; i < w.length; i += width)
-                    lines.push(w.slice(i, i + width));
-                continue;
-            }
-            if (cur && cur.length + 1 + w.length > width) {
-                lines.push(cur);
-                cur = w;
-            }
-            else
-                cur = cur ? `${cur} ${w}` : w;
-        }
-        if (cur)
-            lines.push(cur);
-    }
-    return lines.length > 0 ? lines : [""];
+export function setInfo(patch) {
+  setInfoSignal(prev => ({
+    ...prev,
+    ...patch
+  }));
 }
-function stripAnsi(s) {
-    // biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape stripping
-    return s.replace(/\x1b\[\d*;?\d*m/g, "");
+
+// ── Helper ───────────────────────────────────────────────────────────────────
+
+function formatElapsed(startedAt) {
+  if (!startedAt) return "";
+  const sec = Math.floor((Date.now() - startedAt) / 1000);
+  if (sec < 60) return `${sec}s`;
+  const m = Math.floor(sec / 60);
+  return `${m}m${String(sec % 60).padStart(2, "0")}s`;
 }
-function visibleLen(s) {
-    // biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape stripping
-    const re = /\x1b\[\d*;?\d*m/g;
-    let len = 0;
-    let last = 0;
-    let m = re.exec(s);
-    while (m !== null) {
-        len += m.index - last;
-        last = m.index + m[0].length;
-        m = re.exec(s);
-    }
-    return len + s.length - last;
-}
-function padRight(s, w) {
-    const vl = visibleLen(s);
-    return vl >= w ? s : s + " ".repeat(w - vl);
+function shortModel(model) {
+  const m = model.toLowerCase();
+  if (m.includes("sonnet")) return "sonnet-4";
+  if (m.includes("haiku")) return "haiku";
+  if (m.includes("opus")) return "opus-4";
+  return model.length > 16 ? `${model.slice(0, 15)}…` : model;
 }
-function padTrunc(s, w) {
-    const stripped = stripAnsi(s);
-    if (stripped.length <= w)
-        return s + " ".repeat(w - stripped.length);
-    return stripped.slice(0, w);
+const LABEL = {
+  you: "you",
+  agent: "agent",
+  system: "sys",
+  error: "err"
+};
+const COLOR = {
+  you: "#67e8f9",
+  agent: "#86efac",
+  system: "#9ca3af",
+  error: "#fca5a5"
+};
+
+// ── Components ────────────────────────────────────────────────────────────────
+
+function MessageRow(props) {
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    _$insert(_el$2, () => `   ${LABEL[props.line.role].padEnd(5)}  `);
+    _$insert(_el$3, () => props.line.text);
+    _$effect(() => _$setAttribute(_el$2, "fg", COLOR[props.line.role]));
+    return _el$;
+  })();
 }
-function formatElapsed(ms) {
-    const sec = Math.floor(ms / 1000);
-    if (sec < 60)
-        return `${sec}s`;
-    const m = Math.floor(sec / 60);
-    return `${m}m${String(sec % 60).padStart(2, "0")}s`;
+function App(props) {
+  const dims = useTerminalDimensions();
+
+  // Spinner tick — only while thinking
+  createEffect(() => {
+    if (status() !== "thinking") {
+      setSpinnerFrame(0);
+      return;
+    }
+    const id = setInterval(() => setSpinnerFrame(f => (f + 1) % SPINNER_FRAMES.length), SPINNER_MS);
+    onCleanup(() => clearInterval(id));
+  });
+  useKeyboard(evt => {
+    if (evt.ctrl && evt.name === "c") {
+      evt.preventDefault();
+      props.onExit();
+      return;
+    }
+    if (evt.name === "escape") {
+      const ab = activeAbort();
+      if (ab && !ab.signal.aborted) ab.abort();
+      return;
+    }
+    if (status() === "thinking") return; // block input during turns
+
+    if (evt.name === "return") {
+      const text = input().trim();
+      if (!text) return;
+      if (text === "/exit" || text === "/quit") {
+        props.onExit();
+        return;
+      }
+      addMessage("you", text);
+      setInput("");
+      const ctrl = new AbortController();
+      setActiveAbort(ctrl);
+      setStatus("thinking");
+      setTurnStartedAt(Date.now());
+      props.onSubmit(text, ctrl.signal).finally(() => {
+        setStatus("idle");
+        setTurnStartedAt(null);
+        setActiveAbort(null);
+      });
+      return;
+    }
+    if (evt.name === "backspace" || evt.name === "delete") {
+      setInput(p => p.slice(0, -1));
+      return;
+    }
+    if (evt.sequence && !evt.ctrl && !evt.meta && !evt.option) {
+      setInput(p => p + evt.sequence);
+    }
+  });
+  const {
+    agent,
+    config
+  } = props;
+  const addr = () => `${agent.address.slice(0, 6)}…${agent.address.slice(-4)}`;
+  return (() => {
+    var _el$4 = _tmpl$2(),
+      _el$5 = _el$4.firstChild,
+      _el$6 = _el$5.nextSibling,
+      _el$7 = _el$6.firstChild,
+      _el$8 = _el$6.nextSibling,
+      _el$9 = _el$8.firstChild,
+      _el$0 = _el$9.nextSibling,
+      _el$1 = _el$8.nextSibling,
+      _el$10 = _el$1.firstChild;
+    _$setAttribute(_el$5, "contentoptions", {
+      flexDirection: "column",
+      paddingLeft: 0,
+      paddingRight: 1,
+      paddingTop: 1,
+      paddingBottom: 1
+    });
+    _$insert(_el$5, _$createComponent(For, {
+      get each() {
+        return rows();
+      },
+      children: line => _$createComponent(MessageRow, {
+        line: line
+      })
+    }));
+    _$insert(_el$7, () => {
+      if (status() !== "thinking") return " ";
+      spinnerFrame(); // reactive dependency
+      const elapsed = formatElapsed(turnStartedAt());
+      const frame = SPINNER_FRAMES[spinnerFrame()];
+      return elapsed ? `${frame} thinking… ${elapsed} (esc to interrupt)` : `${frame} thinking… (esc to interrupt)`;
+    });
+    _$insert(_el$0, () => `${input()}${status() === "idle" ? "▋" : ""}`);
+    _$insert(_el$10, () => [addr(), `${config.network}`, shortModel(config.brain.model), info().balance ? `${info().balance} SUI` : null, `in ${agent.usage.tokens.inputTokens}  out ${agent.usage.tokens.outputTokens}  $${agent.usage.costUsd.toFixed(4)}`, "/exit"].filter(Boolean).join("  ·  "));
+    _$effect(_p$ => {
+      var _v$ = dims().width,
+        _v$2 = dims().height;
+      _v$ !== _p$.e && _$setAttribute(_el$4, "width", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$4, "height", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$4;
+  })();
 }
-function shortModel(model) {
-    const m = model.toLowerCase();
-    if (m.includes("sonnet"))
-        return "Sonnet 4";
-    if (m.includes("haiku"))
-        return "Haiku";
-    if (m.includes("opus"))
-        return "Opus 4";
-    if (m.includes("fable"))
-        return "Fable 5";
-    return model.length > 14 ? `${model.slice(0, 13)}…` : model;
+
+// ── Main entry ────────────────────────────────────────────────────────────────
+
+export async function runTui(agent, config, onSubmit) {
+  return new Promise(resolve => {
+    render(() => _$createComponent(App, {
+      agent: agent,
+      config: config,
+      onSubmit: onSubmit,
+      onExit: resolve
+    }));
+  });
 }
-//# sourceMappingURL=tui.js.map