@sofer_agent/cli 0.3.1 → 0.3.3

package/src/tui.ts

@@ -1,46 +1,50 @@
-import type * as readline from "node:readline";
-import type { SoferConfig } from "@sofer_agent/core";
-import type { SoferAgent } from "@sofer_agent/core";
+import type { SoferAgent, SoferConfig } from "@sofer_agent/core";
 
-const SIDEBAR_W = 28;
+const SIDEBAR_W = 26;
 const MIN_CHAT_W = 30;
-
-interface ChatLine {
-  role: "you" | "agent" | "error";
+const GUTTER = "  ";
+const LABEL_W = 6;
+const INDENT = `${GUTTER}${" ".repeat(LABEL_W + 1)}`;
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const SPINNER_MS = 80;
+
+export interface ChatLine {
+  role: "you" | "agent" | "system" | "error";
   text: string;
 }
 
-export interface TuiState {
-  messages: ChatLine[];
+export interface TuiInfo {
   lastTurnIn: number;
   lastTurnOut: number;
 }
 
 export class SoferTui {
-  private state: TuiState = { messages: [], lastTurnIn: 0, lastTurnOut: 0 };
+  private state: ChatLine[] = [];
   private inputBuf = "";
   private cursor = 0;
-  private rl: readline.Interface | null = null;
   private columns = 80;
   private rows = 24;
-  private chatH = 20;
   private chatW = 50;
+  private chatH = 20;
   private scrollOff = 0;
+  // spinner
+  private status: "idle" | "thinking" = "idle";
+  private spinnerFrame = 0;
+  private spinnerTimer: ReturnType<typeof setInterval> | null = null;
+  private turnStartedAt = 0;
+  // interrupt
+  private abortCtrl: AbortController | null = null;
+  // sidebar info
+  private info: TuiInfo = { lastTurnIn: 0, lastTurnOut: 0 };
+  // callbacks
   private resolve: (() => void) | null = null;
-  private onLine: ((line: string) => void) | null = null;
+  private onLine: ((line: string, signal?: AbortSignal) => Promise<void>) | null = null;
 
   constructor(
     private readonly agent: SoferAgent,
     private readonly config: SoferConfig,
   ) {}
 
-  get width() {
-    return this.columns;
-  }
-  get height() {
-    return this.rows;
-  }
-
   private measure(): void {
     this.columns = process.stdout.columns ?? 80;
     this.rows = process.stdout.rows ?? 24;
@@ -49,16 +53,35 @@ export class SoferTui {
   }
 
   addMessage(role: ChatLine["role"], text: string): void {
-    this.state.messages.push({ role, text });
+    this.state.push({ role, text });
+  }
+
+  setInfo(info: Partial<TuiInfo>): void {
+    Object.assign(this.info, info);
   }
 
-  setUsage(lastTurnIn: number, lastTurnOut: number): void {
-    this.state.lastTurnIn = lastTurnIn;
-    this.state.lastTurnOut = lastTurnOut;
+  private startSpinner(): void {
+    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);
   }
 
-  /** Start the interactive TUI loop. Returns when the user exits. */
-  async run(onLine: (line: string) => Promise<void>): Promise<void> {
+  private stopSpinner(): void {
+    this.status = "idle";
+    this.turnStartedAt = 0;
+    if (this.spinnerTimer) {
+      clearInterval(this.spinnerTimer);
+      this.spinnerTimer = null;
+    }
+  }
+
+  /** Start the interactive TUI loop. */
+  async run(onLine: (line: string, signal?: AbortSignal) => Promise<void>): Promise<void> {
     this.onLine = onLine;
     this.measure();
 
@@ -74,11 +97,12 @@ export class SoferTui {
   }
 
   private shutdown(): void {
+    this.stopSpinner();
     process.stdin.setRawMode?.(false);
     process.stdin.removeAllListeners("data");
     process.stdout.removeAllListeners("resize");
     process.removeAllListeners("SIGWINCH");
-    this.render(); // final render in normal mode
+    this.render();
     process.stdout.write("\n");
     this.resolve?.();
   }
@@ -90,12 +114,25 @@ export class SoferTui {
     for (const ch of str) {
       const code = ch.charCodeAt(0);
       if (code === 3) {
-        process.exit(0);
+        this.shutdown();
+        return;
       } // Ctrl-C
       if (code === 4 && this.inputBuf.length === 0) {
         this.shutdown();
         return;
-      } // Ctrl-D on empty
+      } // Ctrl-D
+      if (code === 27) {
+        // Escape
+        if (this.status === "thinking" && this.abortCtrl) {
+          this.abortCtrl.abort();
+          return;
+        }
+        this.inputBuf = ""; // clear input on Esc when idle
+        this.cursor = 0;
+        this.render();
+        return;
+      }
+      if (this.status === "thinking") continue; // reject input while thinking
       if (code === 13) {
         this.submit();
         return;
@@ -110,13 +147,6 @@ export class SoferTui {
         this.render();
         return;
       }
-      if (code === 27 && this.inputBuf.length > 0) {
-        // Escape clears input
-        this.inputBuf = "";
-        this.cursor = 0;
-        this.render();
-        return;
-      }
       if (ch >= " ") {
         this.inputBuf = this.inputBuf.slice(0, this.cursor) + ch + this.inputBuf.slice(this.cursor);
         this.cursor++;
@@ -137,47 +167,51 @@ export class SoferTui {
       this.shutdown();
       return;
     }
+
     this.addMessage("you", line);
-    this.scrollOff = 0; // auto-scroll to latest
+    this.scrollOff = 0;
+    this.abortCtrl = new AbortController();
+    this.startSpinner();
     this.render();
-    await this.onLine?.(line);
-  }
 
-  // ── Terminal rendering ──────────────────────────────────────────────────
+    await this.onLine?.(line, this.abortCtrl.signal);
+
+    this.abortCtrl = null;
+    this.stopSpinner();
+    this.render();
+  }
 
+  // ── Rendering ───────────────────────────────────────────────────────────
   private handleResize = (): void => {
     this.measure();
     this.render();
   };
 
-  /** Reset cursor, clear, redraw everything. */
   render(): void {
     this.measure();
     const out = process.stdout;
-    out.write("\x1b[?25l"); // hide cursor
+    out.write("\x1b[?25l");
+    out.write("\x1b[H");
     out.write(this.buildFrame());
-    out.write("\x1b[?25h"); // show cursor
+    out.write("\x1b[?25h");
   }
 
   private buildFrame(): string {
-    const { columns, rows, chatW, chatH } = this;
-    const rightW = columns - chatW - 1; // border column
-
-    let buf = "\x1b[H"; // cursor to top-left
+    const { chatW, chatH } = this;
+    const rightW = this.columns - chatW - 1;
+    let buf = "";
 
-    // ── Body ──────────────────────────────────────────────────────────────
-    // We draw row by row. Each row: chat area | border | sidebar
-    const msgs = this.state.messages;
-    const wrappedLines = msgs.flatMap((m) => this.wrapLine(m, chatW));
-    const totalLines = wrappedLines.length;
-    const maxScroll = Math.max(0, totalLines - chatH);
+    // ── Chat body ─────────────────────────────────────────────────────────
+    const wrapped = this.state.flatMap((m) => this.wrapMessage(m, chatW));
+    const maxScroll = Math.max(0, wrapped.length - chatH);
     if (this.scrollOff > maxScroll) this.scrollOff = maxScroll;
     if (this.scrollOff < 0) this.scrollOff = 0;
-    const visible = wrappedLines.slice(this.scrollOff, this.scrollOff + chatH);
+    const visible = wrapped.slice(this.scrollOff, this.scrollOff + chatH);
 
     for (let r = 0; r < chatH; r++) {
       const line = visible[r];
-      buf += line ? this.pad(line, chatW) : this.blank(chatW);
+      if (line) buf += this.pad(line, chatW);
+      else buf += " ".repeat(chatW);
       if (r === 0) buf += "┬";
       else if (r === chatH - 1) buf += "┴";
       else buf += "│";
@@ -188,108 +222,170 @@ export class SoferTui {
     // ── Divider ───────────────────────────────────────────────────────────
     buf += `${"─".repeat(chatW)}┴${"─".repeat(rightW)}\n`;
 
-    // ── Input line ────────────────────────────────────────────────────────
-    const prefix = "\x1b[36myou>\x1b[0m ";
-    const prefixW = 4;
-    const maxInputW = columns - prefixW - 1;
-    let typed = this.inputBuf;
-    if (typed.length > maxInputW) {
-      const start = typed.length - maxInputW;
-      typed = typed.slice(start);
+    // ── Spinner row ───────────────────────────────────────────────────────
+    if (this.status === "thinking") {
+      const frame = SPINNER_FRAMES[this.spinnerFrame];
+      const elapsed = this.turnStartedAt ? formatElapsed(Date.now() - this.turnStartedAt) : "";
+      buf += `\x1b[36m${frame} thinking…${elapsed ? ` ${elapsed}` : ""} (esc to interrupt)\x1b[0m\x1b[K\n`;
     }
-    buf += `${prefix}${typed}\x1b[K`; // clear to end of line
-    // Place cursor at end of input
-    const cursorCol = prefixW + Math.min(this.cursor, maxInputW);
-    buf += `\x1b[${chatH + 2};${cursorCol}H`;
+
+    // ── Input bar ─────────────────────────────────────────────────────────
+    const prefix = "\x1b[36m> \x1b[0m";
+    const cursorChar = this.status === "idle" ? "\x1b[5m▋\x1b[25m" : "";
+    buf += `${prefix}${this.inputBuf}${cursorChar}\x1b[K`;
+
+    // Footer
+    const totalIn = this.agent.usage.tokens.inputTokens;
+    const totalOut = this.agent.usage.tokens.outputTokens;
+    const cost = this.agent.usage.costUsd.toFixed(4);
+    const footer = `\x1b[90m${this.agent.address.slice(0, 10)}…  ·  tokens ${totalIn}/${totalOut}  ·  $${cost}  ·  /exit to quit\x1b[0m`;
+    buf += `\n${this.pad(footer, this.columns)}`;
+
+    // Place cursor at input position
+    const cursorCol = 2 + Math.min(this.cursor, this.columns - 5);
+    buf += `\x1b[${this.chatH + 2 + (this.status === "thinking" ? 1 : 0)};${cursorCol}H`;
 
     return buf;
   }
 
-  private wrapLine(msg: ChatLine, width: number): string[] {
-    const label =
-      msg.role === "you"
-        ? "\x1b[36myou>\x1b[0m "
-        : msg.role === "agent"
-          ? `\x1b[32m${this.agent.name.toLowerCase()}>\x1b[0m `
-          : "\x1b[31merror>\x1b[0m ";
-    const content = msg.text;
-    const full = label + content;
-    if (full.length <= width) return [full];
-    // simple word-wrap
-    const lines: string[] = [];
-    let current = label;
-    const words = content.split(" ");
-    for (const word of words) {
-      if (current.length + 1 + word.length <= width) {
-        current += (current === label ? "" : " ") + word;
-      } else {
-        if (current.length > label.length) lines.push(current);
-        current = `  ${word}`; // indent continuation
-      }
+  // ── Message wrapping with gutter ────────────────────────────────────────
+
+  private wrapMessage(msg: ChatLine, width: number): string[] {
+    const label = this.roleLabel(msg.role);
+    const bodyWidth = width - GUTTER.length - LABEL_W - 1;
+    const lines = wrapText(msg.text, bodyWidth);
+    return lines.map((l, i) => {
+      if (i === 0) return `${GUTTER}${label} ${l}`;
+      return `${INDENT}${l}`;
+    });
+  }
+
+  private roleLabel(role: ChatLine["role"]): string {
+    switch (role) {
+      case "you":
+        return "\x1b[36myou   \x1b[0m"; // cyan "you", padded to LABEL_W
+      case "agent":
+        return `\x1b[32m${this.agent.name.toLowerCase().slice(0, LABEL_W).padEnd(LABEL_W)}\x1b[0m`;
+      case "system":
+        return "\x1b[90msys   \x1b[0m";
+      case "error":
+        return "\x1b[31merr   \x1b[0m";
     }
-    if (current.length > label.length) lines.push(current);
-    return lines.length > 0 ? lines : [full];
   }
 
   private pad(s: string, w: number): string {
-    // biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape stripping
-    const ansiRe = /\x1b\[\d*;?\d*m/g;
-    const stripped = s.replace(ansiRe, "");
-    const padW = Math.max(0, w - stripped.length);
+    const stripped = stripAnsi(s);
+    const padW = Math.max(0, w - visibleLen(stripped));
     return s + " ".repeat(padW);
   }
 
-  private blank(w: number): string {
-    return " ".repeat(w);
-  }
-
   // ── Sidebar ─────────────────────────────────────────────────────────────
 
   private sidebarRow(row: number, total: number, width: number): string {
-    const innerW = width - 2; // left & right padding
+    const innerW = width - 2;
     const lines = this.buildSidebar(innerW);
-
-    // center the sidebar content vertically
     const gap = Math.max(0, total - lines.length);
     const topPad = Math.floor(gap / 2);
     const idx = row - topPad;
-
     if (idx < 0 || idx >= lines.length) return " ".repeat(width);
     const line = lines[idx];
     if (!line) return " ".repeat(width);
-    return ` ${this.pad(line, innerW)} `;
+    const padded = padRight(line, innerW);
+    return ` ${padded} `;
   }
 
   private buildSidebar(width: number): string[] {
-    const { agent, config, state } = this;
-    const addr = `${agent.address.slice(0, 6)}...${agent.address.slice(-4)}`;
+    const { agent, config, info } = this;
+    const addr = `${agent.address.slice(0, 6)}…${agent.address.slice(-4)}`;
+    const hbar = "─".repeat(width);
+    const thinBar = "·".repeat(width);
     const totalIn = agent.usage.tokens.inputTokens;
     const totalOut = agent.usage.tokens.outputTokens;
     const cost = agent.usage.costUsd.toFixed(4);
 
     return [
-      `\x1b[1m${agent.name}\x1b[0m`,
-      "─".repeat(width),
-      `Model: ${this.shortModel(config.brain.model)}`,
-      `Max out:  ${config.brain.maxOutputTokens}`,
+      hbar,
+      `\x1b[1;36m${agent.name}\x1b[0m`,
+      `\x1b[90m${addr}\x1b[0m`,
       "",
-      `Turn in:  ${state.lastTurnIn}`,
-      `Turn out: ${state.lastTurnOut}`,
-      `Total in: ${totalIn}`,
-      `Total out:${totalOut}`,
-      `Cost:     \x1b[33m$${cost}\x1b[0m`,
-      "",
-      `Addr: ${addr}`,
-      `Network: ${config.network}`,
+      `\x1b[90mnetwork\x1b[0m  ${config.network}`,
+      `\x1b[90mmodel\x1b[0m    ${shortModel(config.brain.model)}`,
+      thinBar,
+      `\x1b[90mlast turn\x1b[0m`,
+      ` in  ${info.lastTurnIn}`,
+      ` out ${info.lastTurnOut}`,
+      `\x1b[90mtotal\x1b[0m`,
+      ` in  ${totalIn}`,
+      ` out ${totalOut}`,
+      `\x1b[90mcost\x1b[0m     \x1b[33m$${cost}\x1b[0m`,
+      thinBar,
+      `\x1b[90maddress\x1b[0m`,
+      ` ${agent.address.slice(0, 16)}`,
+      ` ${agent.address.slice(16, 32)}`,
+      ` ${agent.address.slice(32)}`,
+      hbar,
     ];
   }
+}
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function wrapText(text: string, width: number): string[] {
+  if (!text) return [""];
+  const lines: string[] = [];
+  const words = text.split(" ");
+  let current = "";
+  for (const word of words) {
+    if (current && current.length + 1 + word.length > width) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = current ? `${current} ${word}` : word;
+    }
+  }
+  if (current) lines.push(current);
+  return lines.length > 0 ? lines : [""];
+}
+
+function stripAnsi(s: string): string {
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape stripping
+  return s.replace(/\x1b\[\d*;?\d*m/g, "");
+}
 
-  private shortModel(model: string): string {
-    const m = model.toLowerCase();
-    if (m.includes("sonnet")) return "Sonnet 4";
-    if (m.includes("haiku")) return "Haiku 3.5";
-    if (m.includes("opus")) return "Opus 4";
-    if (m.includes("fable")) return "Fable 5";
-    return model;
+function visibleLen(s: string): number {
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape stripping
+  const ansiRe = /\x1b\[\d*;?\d*m/g;
+  let len = 0;
+  let lastIdx = 0;
+  let match = ansiRe.exec(s);
+  while (match !== null) {
+    len += match.index - lastIdx;
+    lastIdx = match.index + match[0].length;
+    match = ansiRe.exec(s);
   }
+  len += s.length - lastIdx;
+  return len;
+}
+
+function padRight(s: string, width: number): string {
+  const len = visibleLen(s);
+  if (len >= width) return s;
+  return s + " ".repeat(width - len);
+}
+
+function formatElapsed(ms: number): string {
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return `${sec}s`;
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${m}m${String(s).padStart(2, "0")}s`;
+}
+
+function shortModel(model: string): string {
+  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;
 }