@rind-ai/cli 0.4.1 → 0.6.0

package/lib/components/tool-block.js

@@ -0,0 +1,122 @@
+import {
+  parseToolArguments,
+  renderToolFinished,
+  renderToolRunning,
+} from "../tool-display.js";
+
+const TICKER_TOOLS = new Set(["bash", "bash_output", "delegate", "search_web", "fetch_web_page"]);
+
+export class ToolBlock {
+  constructor({ event, onRequestRender, leading = false }) {
+    this.name = event?.tool_name || "tool";
+    this.args = parseToolArguments(event);
+    this.phase = "running";
+    this.startedAt = Date.now();
+    this.progressMessage = "";
+    this.fileChange = null;
+    this.resultEvent = null;
+    this.expanded = false;
+    this.leading = Boolean(leading);
+    this.timer = null;
+    this.onRequestRender = onRequestRender;
+    if (TICKER_TOOLS.has(this.name)) {
+      this.timer = setInterval(() => {
+        this.onRequestRender?.();
+      }, 1000);
+      this.timer.unref?.();
+    }
+  }
+
+  setProgress(message) {
+    if (this.phase !== "running") {
+      return;
+    }
+    const next = String(message ?? "");
+    if (next === this.progressMessage) {
+      return;
+    }
+    this.progressMessage = next;
+    this.onRequestRender?.();
+  }
+
+  // The runtime streams tool_input_started (id+name only) before
+  // tool_requested (full parsed arguments); merge late-arriving args into
+  // an already-created block so titles gain their command/path/etc.
+  enrichArgs(event) {
+    const incoming = parseToolArguments(event);
+    let changed = false;
+    for (const [key, value] of Object.entries(incoming)) {
+      const current = this.args?.[key];
+      if ((current === undefined || current === null || current === "") && value !== undefined && value !== null && value !== "") {
+        if (!this.args || typeof this.args !== "object") {
+          this.args = {};
+        }
+        this.args[key] = value;
+        changed = true;
+      }
+    }
+    if (changed) {
+      this.onRequestRender?.();
+    }
+  }
+
+  finish(event, fileChange) {
+    this.phase = "done";
+    this.resultEvent = event || this.resultEvent || { status: "completed", result: "" };
+    this.fileChange = fileChange || null;
+    this.clearTimer();
+    this.onRequestRender?.();
+  }
+
+  setExpanded(expanded) {
+    const next = Boolean(expanded);
+    if (this.expanded === next) {
+      return;
+    }
+    this.expanded = next;
+    this.onRequestRender?.();
+  }
+
+  get isRunning() {
+    return this.phase === "running";
+  }
+
+  clearTimer() {
+    if (!this.timer) {
+      return;
+    }
+    clearInterval(this.timer);
+    this.timer = null;
+  }
+
+  invalidate() {
+    // No cached render state (blocks restyle every frame); keep the
+    // elapsed-time ticker alive across full repaints.
+  }
+
+  render(width) {
+    let lines;
+    if (this.phase === "running") {
+      lines = renderToolRunning({
+        name: this.name,
+        args: this.args,
+        phase: "running",
+        elapsedMs: Date.now() - this.startedAt,
+        progressMessage: this.progressMessage,
+      }, width);
+    } else {
+      lines = renderToolFinished({
+        name: this.name,
+        args: this.args,
+        phase: "done",
+        expanded: this.expanded,
+        event: this.resultEvent,
+        fileChange: this.fileChange,
+      }, width);
+    }
+    if (this.leading && lines.length) {
+      return ["", ...lines];
+    }
+    return lines;
+  }
+}

package/lib/composer-terminal.js

@@ -1,203 +1,224 @@
-import { graphemes, stripAnsi, textWidth, wrapTextCells } from "./text-width.js";
-
-const DEFAULT_COLUMNS = 80;
-const INPUT_MARKER = "\n  ▷ ";
-const ANSI_SEQUENCE = /\x1b\[[0-?]*[ -/]*[@-~]/g;
-const SGR_SEQUENCE = /^\x1b\[([0-9;]*)m$/;
-
-export function prepareComposerFrame(frame = {}, columns = DEFAULT_COLUMNS) {
-  const width = terminalColumns(columns);
-  const block = splitPromptBlock(frame.prompt);
-  const input = String(frame.inputText || "");
-  const display = input || String(frame.placeholder || "");
-  const position = cursorPosition(frame, input);
-  const leadingLines = wrapRenderedLines(block.leading, width);
-  const inputLines = wrapInputLines(block.prefix, display, width);
-  const cursor = visualCursor(block.prefix, input, position, width, inputLines);
-  const menuLines = wrapRenderedLines(frame.menuText, width);
-  const trailingLines = wrapRenderedLines(block.trailing, width);
-  const lines = [...leadingLines, ...inputLines, ...menuLines, ...trailingLines];
-  const cursorRow = leadingLines.length + cursor.row;
-  const selectedMenuRow = menuLines.findIndex((line) => stripAnsi(line).startsWith("  › "));
-
-  return {
-    lines,
-    cursorRow,
-    cursorColumn: cursor.column,
-    focusRow: selectedMenuRow === -1
-      ? cursorRow
-      : leadingLines.length + inputLines.length + selectedMenuRow,
-  };
-}
-
-function wrapInputLines(prefix, text, columns) {
-  const logicalLines = String(text || "").split("\n");
-  const prefixWidth = textWidth(prefix);
-  const continuationPrefix = " ".repeat(prefixWidth);
-  const contentWidth = Math.max(1, columns - prefixWidth);
-  const lines = [];
-  for (const [index, logicalLine] of logicalLines.entries()) {
-    const linePrefix = index === 0 ? prefix : continuationPrefix;
-    if (logicalLine.includes("\x1b")) {
-      lines.push(...wrapLine(
-        linePrefix,
-        continuationPrefix,
-        logicalLine,
-        contentWidth,
-      ));
-      continue;
-    }
-    const chunks = wrapTextCells(logicalLine, contentWidth, contentWidth);
-    lines.push(...chunks.map((chunk, chunkIndex) => (
-      `${chunkIndex === 0 ? linePrefix : continuationPrefix}${chunk.text}`
-    )));
-  }
-  return lines.length ? lines : [String(prefix || "")];
-}
-
-function visualCursor(prefix, input, position, columns, inputLines) {
-  const logicalLines = String(input).split("\n");
-  const prefixWidth = textWidth(prefix);
-  const continuationPrefix = " ".repeat(prefixWidth);
-  const contentWidth = Math.max(1, columns - prefixWidth);
-  const visualLines = [];
-  for (const [lineIndex, logicalLine] of logicalLines.entries()) {
-    const chunks = wrapTextCells(logicalLine, contentWidth, contentWidth);
-    for (const chunk of chunks) {
-      visualLines.push({
-        startColumn: chunk.startColumn,
-        length: chunk.length,
-        allowsEnd: chunk.allowsEnd,
-        line: lineIndex,
-        prefixWidth,
-      });
-    }
-    const lastChunk = chunks.at(-1);
-    if (lineIndex === logicalLines.length - 1 && !lastChunk.allowsEnd) {
-      visualLines.push({
-        startColumn: lastChunk.startColumn + lastChunk.length,
-        length: 0,
-        allowsEnd: true,
-        line: lineIndex,
-        prefixWidth,
-      });
-    }
-  }
-
-  let row = visualLines.length - 1;
-  for (const [index, visualLine] of visualLines.entries()) {
-    if (visualLine.line !== position.line) {
-      continue;
-    }
-    const offset = position.column - visualLine.startColumn;
-    if (offset >= 0 && (offset < visualLine.length || (visualLine.allowsEnd && offset === visualLine.length))) {
-      row = index;
-      break;
-    }
-  }
-  while (inputLines.length <= row) {
-    inputLines.push(continuationPrefix);
-  }
-  const visualLine = visualLines[row];
-  const text = graphemes(logicalLines[position.line])
-    .slice(visualLine.startColumn, position.column)
-    .join("");
-  return {
-    row,
-    column: visualLine.prefixWidth + textWidth(text),
-  };
-}
-
-function wrapLine(prefix, continuationPrefix, text, contentWidth) {
-  const lines = [];
-  let line = "";
-  let width = 0;
-  let activeStyle = "";
-  for (const segment of displaySegments(text)) {
-    const sgr = segment.match(SGR_SEQUENCE);
-    if (sgr) {
-      line += segment;
-      const codes = (sgr[1] || "0").split(";").map((code) => code || "0");
-      const resetIndex = codes.lastIndexOf("0");
-      activeStyle = resetIndex === codes.length - 1
-        ? ""
-        : resetIndex >= 0
-          ? segment
-          : `${activeStyle}${segment}`;
-      continue;
-    }
-    const segmentWidth = textWidth(segment);
-    if (width > 0 && width + segmentWidth > contentWidth) {
-      lines.push(`${lines.length ? continuationPrefix : prefix}${line}`);
-      line = activeStyle;
-      width = 0;
-    }
-    line += segment;
-    width += segmentWidth;
-  }
-  lines.push(`${lines.length ? continuationPrefix : prefix}${line}`);
-  return lines;
-}
-
-function displaySegments(value) {
-  const text = String(value || "");
-  const segments = [];
-  let position = 0;
-  for (const match of text.matchAll(ANSI_SEQUENCE)) {
-    segments.push(...graphemes(text.slice(position, match.index)), match[0]);
-    position = match.index + match[0].length;
-  }
-  segments.push(...graphemes(text.slice(position)));
-  return segments;
-}
-
-function cursorPosition(frame, input) {
-  const lines = String(input).split("\n");
-  const line = Math.min(lines.length - 1, Math.max(0, Math.floor(Number(frame.cursor?.line) || 0)));
-  return {
-    line,
-    column: Math.min(
-      graphemes(lines[line]).length,
-      Math.max(0, Math.floor(Number(frame.cursor?.column) || 0)),
-    ),
-  };
-}
-
-function terminalColumns(columns) {
-  const value = Number(columns);
-  return Number.isFinite(value) && value > 0 ? Math.floor(value) : DEFAULT_COLUMNS;
-}
-
-function splitPromptBlock(prompt) {
-  const text = String(prompt || "");
-  const index = text.lastIndexOf(INPUT_MARKER);
-  if (index === -1) {
-    return { leading: "", prefix: text, trailing: "" };
-  }
-  const inputStart = index + 1;
-  const trailingStart = text.indexOf("\n", inputStart);
-  if (trailingStart === -1) {
-    return {
-      leading: text.slice(0, inputStart),
-      prefix: text.slice(inputStart),
-      trailing: "",
-    };
-  }
-  return {
-    leading: text.slice(0, inputStart),
-    prefix: text.slice(inputStart, trailingStart),
-    trailing: text.slice(trailingStart + 1),
-  };
-}
-
-function wrapRenderedLines(text, columns) {
-  const value = String(text || "");
-  if (!value) {
-    return [];
-  }
-  const lines = value.split("\n");
-  if (lines.at(-1) === "") {
-    lines.pop();
-  }
-  return lines.flatMap((line) => wrapLine("", "", line, columns));
-}
+import { graphemes, stripAnsi, textWidth, wrapTextCells } from "./text-width.js";
+
+const DEFAULT_COLUMNS = 80;
+const INPUT_MARKER = "\n  ▷ ";
+const ANSI_SEQUENCE = /\x1b\[[0-?]*[ -/]*[@-~]/g;
+const SGR_SEQUENCE = /^\x1b\[([0-9;]*)m$/;
+
+export function prepareComposerFrame(frame = {}, columns = DEFAULT_COLUMNS) {
+  const width = terminalColumns(columns);
+  const block = splitPromptBlock(frame.prompt);
+  const input = String(frame.inputText || "");
+  const display = input || String(frame.placeholder || "");
+  const position = cursorPosition(frame, input);
+  const leadingLines = wrapRenderedLines(block.leading, width);
+  const inputLines = wrapInputLines(block.prefix, display, width);
+  const menuLines = wrapRenderedLines(frame.menuText, width);
+  const menuCursor = frame.menuCursor
+    ? resolveMenuCursor(frame.menuCursor, frame.menuText, width)
+    : null;
+  const cursor = menuCursor || visualCursor(block.prefix, input, position, width, inputLines);
+  const trailingLines = wrapRenderedLines(block.trailing, width);
+  const lines = [...leadingLines, ...inputLines, ...menuLines, ...trailingLines];
+  const cursorRow = menuCursor
+    ? leadingLines.length + inputLines.length + cursor.row
+    : leadingLines.length + cursor.row;
+  const selectedMenuRow = menuLines.findIndex((line) => stripAnsi(line).startsWith("  › "));
+
+  return {
+    lines,
+    cursorRow,
+    cursorColumn: cursor.column,
+    focusRow: selectedMenuRow === -1
+      ? cursorRow
+      : leadingLines.length + inputLines.length + selectedMenuRow,
+  };
+}
+
+function resolveMenuCursor(cursor, menuText, columns) {
+  const targetLine = Math.max(0, Math.floor(Number(cursor.line) || 0));
+  const rawLines = String(menuText || "").split("\n");
+  if (rawLines.at(-1) === "") {
+    rawLines.pop();
+  }
+  let row = 0;
+  for (let index = 0; index < targetLine; index += 1) {
+    row += wrapRenderedLines(rawLines[index] || "", columns).length;
+  }
+  return {
+    row,
+    column: Math.max(0, Math.floor(Number(cursor.column) || 0)),
+  };
+}
+
+function wrapInputLines(prefix, text, columns) {
+  const logicalLines = String(text || "").split("\n");
+  const prefixWidth = textWidth(prefix);
+  const continuationPrefix = " ".repeat(prefixWidth);
+  const contentWidth = Math.max(1, columns - prefixWidth);
+  const lines = [];
+  for (const [index, logicalLine] of logicalLines.entries()) {
+    const linePrefix = index === 0 ? prefix : continuationPrefix;
+    if (logicalLine.includes("\x1b")) {
+      lines.push(...wrapLine(
+        linePrefix,
+        continuationPrefix,
+        logicalLine,
+        contentWidth,
+      ));
+      continue;
+    }
+    const chunks = wrapTextCells(logicalLine, contentWidth, contentWidth);
+    lines.push(...chunks.map((chunk, chunkIndex) => (
+      `${chunkIndex === 0 ? linePrefix : continuationPrefix}${chunk.text}`
+    )));
+  }
+  return lines.length ? lines : [String(prefix || "")];
+}
+
+function visualCursor(prefix, input, position, columns, inputLines) {
+  const logicalLines = String(input).split("\n");
+  const prefixWidth = textWidth(prefix);
+  const continuationPrefix = " ".repeat(prefixWidth);
+  const contentWidth = Math.max(1, columns - prefixWidth);
+  const visualLines = [];
+  for (const [lineIndex, logicalLine] of logicalLines.entries()) {
+    const chunks = wrapTextCells(logicalLine, contentWidth, contentWidth);
+    for (const chunk of chunks) {
+      visualLines.push({
+        startColumn: chunk.startColumn,
+        length: chunk.length,
+        allowsEnd: chunk.allowsEnd,
+        line: lineIndex,
+        prefixWidth,
+      });
+    }
+    const lastChunk = chunks.at(-1);
+    if (lineIndex === logicalLines.length - 1 && !lastChunk.allowsEnd) {
+      visualLines.push({
+        startColumn: lastChunk.startColumn + lastChunk.length,
+        length: 0,
+        allowsEnd: true,
+        line: lineIndex,
+        prefixWidth,
+      });
+    }
+  }
+
+  let row = visualLines.length - 1;
+  for (const [index, visualLine] of visualLines.entries()) {
+    if (visualLine.line !== position.line) {
+      continue;
+    }
+    const offset = position.column - visualLine.startColumn;
+    if (offset >= 0 && (offset < visualLine.length || (visualLine.allowsEnd && offset === visualLine.length))) {
+      row = index;
+      break;
+    }
+  }
+  while (inputLines.length <= row) {
+    inputLines.push(continuationPrefix);
+  }
+  const visualLine = visualLines[row];
+  const text = graphemes(logicalLines[position.line])
+    .slice(visualLine.startColumn, position.column)
+    .join("");
+  return {
+    row,
+    column: visualLine.prefixWidth + textWidth(text),
+  };
+}
+
+function wrapLine(prefix, continuationPrefix, text, contentWidth) {
+  const lines = [];
+  let line = "";
+  let width = 0;
+  let activeStyle = "";
+  for (const segment of displaySegments(text)) {
+    const sgr = segment.match(SGR_SEQUENCE);
+    if (sgr) {
+      line += segment;
+      const codes = (sgr[1] || "0").split(";").map((code) => code || "0");
+      const resetIndex = codes.lastIndexOf("0");
+      activeStyle = resetIndex === codes.length - 1
+        ? ""
+        : resetIndex >= 0
+          ? segment
+          : `${activeStyle}${segment}`;
+      continue;
+    }
+    const segmentWidth = textWidth(segment);
+    if (width > 0 && width + segmentWidth > contentWidth) {
+      lines.push(`${lines.length ? continuationPrefix : prefix}${line}`);
+      line = activeStyle;
+      width = 0;
+    }
+    line += segment;
+    width += segmentWidth;
+  }
+  lines.push(`${lines.length ? continuationPrefix : prefix}${line}`);
+  return lines;
+}
+
+function displaySegments(value) {
+  const text = String(value || "");
+  const segments = [];
+  let position = 0;
+  for (const match of text.matchAll(ANSI_SEQUENCE)) {
+    segments.push(...graphemes(text.slice(position, match.index)), match[0]);
+    position = match.index + match[0].length;
+  }
+  segments.push(...graphemes(text.slice(position)));
+  return segments;
+}
+
+function cursorPosition(frame, input) {
+  const lines = String(input).split("\n");
+  const line = Math.min(lines.length - 1, Math.max(0, Math.floor(Number(frame.cursor?.line) || 0)));
+  return {
+    line,
+    column: Math.min(
+      graphemes(lines[line]).length,
+      Math.max(0, Math.floor(Number(frame.cursor?.column) || 0)),
+    ),
+  };
+}
+
+function terminalColumns(columns) {
+  const value = Number(columns);
+  return Number.isFinite(value) && value > 0 ? Math.floor(value) : DEFAULT_COLUMNS;
+}
+
+function splitPromptBlock(prompt) {
+  const text = String(prompt || "");
+  const index = text.lastIndexOf(INPUT_MARKER);
+  if (index === -1) {
+    return { leading: "", prefix: text, trailing: "" };
+  }
+  const inputStart = index + 1;
+  const trailingStart = text.indexOf("\n", inputStart);
+  if (trailingStart === -1) {
+    return {
+      leading: text.slice(0, inputStart),
+      prefix: text.slice(inputStart),
+      trailing: "",
+    };
+  }
+  return {
+    leading: text.slice(0, inputStart),
+    prefix: text.slice(inputStart, trailingStart),
+    trailing: text.slice(trailingStart + 1),
+  };
+}
+
+function wrapRenderedLines(text, columns) {
+  const value = String(text || "");
+  if (!value) {
+    return [];
+  }
+  const lines = value.split("\n");
+  if (lines.at(-1) === "") {
+    lines.pop();
+  }
+  return lines.flatMap((line) => wrapLine("", "", line, columns));
+}