march-cli 0.1.0

package/src/cli/tui/output-buffer.mjs

@@ -0,0 +1,297 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { R, brightBlack, dim } from "./ui-theme.mjs";
+import { renderToolCardBlock } from "./output/tool-card-renderer.mjs";
+import { renderMarkdown, renderStreamingMarkdown } from "./markdown-renderer.mjs";
+import { renderEditDiffBlock } from "./tui-diff-rendering.mjs";
+import { OutputScrollState } from "./output/scroll-state.mjs";
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+function wrapLine(text, maxWidth) {
+  if (maxWidth <= 0) return [""];
+  const result = [];
+  let cur = "";
+  let curW = 0;
+  let activeSgr = "";
+  for (let i = 0; i < text.length;) {
+    if (text[i] === "\x1b") {
+      const match = text.slice(i).match(/^\x1b\[[0-?]*[ -/]*[@-~]/);
+      if (match) {
+        const seq = match[0];
+        cur += seq;
+        activeSgr = updateActiveSgr(activeSgr, seq);
+        i += seq.length;
+        continue;
+      }
+    }
+    const ch = text[i];
+    const w = visibleWidth(ch);
+    if (curW + w > maxWidth) {
+      result.push(activeSgr ? `${cur}${R}` : cur);
+      cur = activeSgr + ch;
+      curW = w;
+    } else {
+      cur += ch;
+      curW += w;
+    }
+    i += 1;
+  }
+  if (cur) result.push(cur);
+  return result.length > 0 ? result : [""];
+}
+
+function updateActiveSgr(activeSgr, seq) {
+  if (!seq.endsWith("m")) return activeSgr;
+  const body = seq.slice(2, -1);
+  if (body === "" || body.split(";").includes("0")) return "";
+  return seq;
+}
+
+function appendTextLines(lines, textLines, width) {
+  for (const line of textLines) {
+    for (const part of String(line ?? "").split(/\r?\n/)) {
+      for (const wrapped of wrapLine(part, width)) lines.push(wrapped);
+    }
+  }
+}
+
+function currentTextToBlocks(textLines, sealed, cache = null) {
+  const blocks = [];
+  for (let i = 0; i < textLines.length;) {
+    const markdown = textLines[i].markdown;
+    const batch = [];
+    while (i < textLines.length && textLines[i].markdown === markdown) {
+      batch.push(textLines[i].text);
+      i += 1;
+    }
+    blocks.push(markdown
+      ? { type: "markdown", text: batch.join("\n"), sealed, cache: sealed ? new Map() : (cache ?? new Map()) }
+      : { type: "plain", lines: batch });
+  }
+  return blocks;
+}
+
+function renderBlock(block, width) {
+  if (block.type === "diff") return renderEditDiffBlock(block, width);
+  if (block.type === "tool-card") return renderToolCardBlock(block, width);
+  if (block.type === "plain" || block.type === "tool" || block.type === "status") return renderPlainBlock(block, width);
+  if (block.type === "markdown") return renderMarkdownBlock(block, width);
+  if (block.type === "thinking") return renderThinkingBlock(block, width);
+  return [];
+}
+
+function renderPlainBlock(block, width) {
+  const lines = [];
+  appendTextLines(lines, block.lines, width);
+  return lines;
+}
+
+function renderMarkdownBlock(block, width) {
+  if (!block.sealed) return renderStreamingMarkdown(block.text, width, block.cache);
+  const cached = block.cache.get(width);
+  if (cached) return cached;
+  const rendered = renderMarkdown(block.text, width);
+  block.cache.set(width, rendered);
+  return rendered;
+}
+
+function renderThinkingBlock(block, width) {
+  const lines = [dim(`· thinking (${block.tokens} tokens)`)];
+  const indent = width > 40 ? width - 40 : width - 2;
+  const maxContentWidth = Math.max(20, indent);
+  for (const line of block.content) {
+    for (const w of wrapLine(line, maxContentWidth)) lines.push(dim(`  ${w}`));
+  }
+  return lines;
+}
+
+
+export class OutputBuffer {
+  constructor() {
+    this.segments = [];
+    this.currentText = [{ text: "", markdown: false }];
+    this.currentTextCache = new Map();
+    this.spinning = false;
+    this.spinnerText = "";
+    this.spinnerIdx = 0;
+    this._activeThinking = null;
+    this.overlayStatus = null;
+    this.scrollState = new OutputScrollState();
+  }
+
+  get scrollOffset() {
+    return this.scrollState.offset;
+  }
+
+  clear() {
+    this.segments = [];
+    this.currentText = [{ text: "", markdown: false }];
+    this.currentTextCache = new Map();
+    this.spinning = false;
+    this.spinnerText = "";
+    this.spinnerIdx = 0;
+    this._activeThinking = null;
+    this.overlayStatus = null;
+    this.scrollState.clear();
+  }
+
+  write(text) {
+    this._writeText(text, false);
+  }
+
+  writeMarkdown(text) {
+    this._writeText(text, true);
+  }
+
+  _writeText(text, markdown) {
+    this.overlayStatus = null;
+    const current = this.currentText.at(-1);
+    if (current.markdown !== markdown && current.text !== "") {
+      this.currentText.push({ text: "", markdown });
+    } else {
+      current.markdown = markdown;
+    }
+    const parts = text.split("\n");
+    this.currentText[this.currentText.length - 1].text += parts[0];
+    for (let i = 1; i < parts.length; i++) this.currentText.push({ text: parts[i], markdown });
+  }
+
+  writeln(text) {
+    this.overlayStatus = null;
+    this.currentText[this.currentText.length - 1].text += text;
+    this.currentText.push({ text: "", markdown: false });
+  }
+
+  ensureNewline() {
+    const current = this.currentText.at(-1);
+    if (!current || current.text === "") return false;
+    this.currentText.push({ text: "", markdown: false });
+    return true;
+  }
+
+  startThinking() {
+    this.overlayStatus = null;
+    this._flushText();
+    const seg = { type: "thinking", tokens: 0, content: [] };
+    this.segments.push(seg);
+    this._activeThinking = seg;
+  }
+
+  appendThinking(text) {
+    if (!this._activeThinking) this.startThinking();
+    const parts = text.split("\n");
+    const lastIdx = this._activeThinking.content.length - 1;
+    if (lastIdx >= 0) this._activeThinking.content[lastIdx] += parts[0];
+    else this._activeThinking.content.push(parts[0]);
+    for (let i = 1; i < parts.length; i++) this._activeThinking.content.push(parts[i]);
+  }
+
+  endThinking(tokens) {
+    if (this._activeThinking) {
+      this._activeThinking.tokens = tokens;
+      this._activeThinking = null;
+    }
+  }
+
+  addThinkingBlock(tokens, content) {
+    this.overlayStatus = null;
+    this._flushText();
+    this.segments.push({ type: "thinking", tokens, content: content.split("\n") });
+  }
+
+  addBlock(block) {
+    this.overlayStatus = null;
+    this._flushText();
+    this.segments.push(block);
+  }
+
+  setOverlayStatus(lines) {
+    this.overlayStatus = Array.isArray(lines) ? { type: "status", lines } : null;
+  }
+
+  clearOverlayStatus() {
+    this.overlayStatus = null;
+  }
+
+  sealCurrentText() {
+    return this._flushText();
+  }
+
+  _flushText() {
+    if (this.currentText.length <= 1 && this.currentText[0].text === "") return false;
+    this.segments.push(...currentTextToBlocks(this.currentText, true));
+    this.currentText = [{ text: "", markdown: false }];
+    this.currentTextCache = new Map();
+    return true;
+  }
+
+  setSpinner(on, text) {
+    this.spinning = on;
+    if (text !== undefined) this.spinnerText = text;
+  }
+
+  tick() {
+    this.spinnerIdx = (this.spinnerIdx + 1) % SPINNER_FRAMES.length;
+  }
+
+  scroll(delta) {
+    return this.scrollState.scroll(delta);
+  }
+
+  getScrollStep() {
+    return this.scrollState.getStep();
+  }
+
+  getMaxScrollOffset() {
+    return this.scrollState.getMaxOffset();
+  }
+
+  setViewportHeight(height) {
+    this.scrollState.setViewportHeight(height);
+  }
+
+  resetScroll() {
+    this.scrollState.reset();
+  }
+
+  setToolCardsExpanded(expanded) {
+    let changed = false;
+    for (const seg of this.segments) {
+      if (seg.type !== "tool-card") continue;
+      if (seg.expanded === expanded) continue;
+      seg.expanded = expanded;
+      changed = true;
+    }
+    return changed;
+  }
+
+  invalidate() {}
+
+  render(width) {
+    const allLines = this._computeLines(width);
+    this._cachedTotalLines = allLines.length;
+    this.scrollState.setTotalLines(allLines.length);
+    const range = this.scrollState.sliceRange();
+    if (!range) return allLines;
+    const { start, end } = range;
+    return allLines.slice(start, end);
+  }
+
+  _computeLines(width) {
+    const lines = [];
+    for (const seg of this.segments) {
+      for (const line of renderBlock(seg, width)) lines.push(line);
+    }
+    for (const block of currentTextToBlocks(this.currentText, false, this.currentTextCache)) {
+      for (const line of renderBlock(block, width)) lines.push(line);
+    }
+    if (this.overlayStatus) {
+      for (const line of renderBlock(this.overlayStatus, width)) lines.push(line);
+    }
+    if (this.spinning) {
+      const frame = SPINNER_FRAMES[this.spinnerIdx];
+      lines.push(brightBlack(`${frame} ${this.spinnerText}`));
+    }
+    return lines;
+  }
+}

package/src/cli/tui/permission-request-ui.mjs

@@ -0,0 +1,18 @@
+import { permissionLabel } from "../permissions.mjs";
+import { formatToolStartLine } from "./tool-rendering.mjs";
+import { brightBlack, yellow } from "./ui-theme.mjs";
+
+export async function requestToolPermission({ toolName, params, category, output, selectList, requestRender }) {
+  const label = permissionLabel(category);
+  output.writeln(yellow(`● ${toolName} needs ${label} permission`));
+  output.writeln(brightBlack(`  ${formatToolStartLine(toolName, params)}`));
+  requestRender();
+  const choice = await selectList({
+    items: [
+      { label: "Approve once", description: `Allow ${toolName} this time (${label})` },
+      { label: "Deny", description: "Block this tool call" },
+    ],
+    width: 58,
+  });
+  return choice?.label === "Approve once";
+}

package/src/cli/tui/recall-rendering.mjs

@@ -0,0 +1,25 @@
+import { brightBlack } from "./ui-theme.mjs";
+
+const RECALL_ICON = "◈";
+
+export function formatMemoryHintLines(hints = []) {
+  if (!hints.length) return [];
+  if (hints.length === 1) {
+    const hint = hints[0];
+    return [`${RECALL_ICON} memory hint: ${formatHint(hint)}`];
+  }
+  return [
+    `${RECALL_ICON} memory hint: ${hints.length} memories`,
+    ...hints.map((hint) => `  ${formatHint(hint)}`),
+  ];
+}
+
+export function writeMemoryHint({ output, hints = [] }) {
+  for (const line of formatMemoryHintLines(hints)) {
+    output.writeln(brightBlack(line));
+  }
+}
+
+function formatHint(hint) {
+  return [hint.id, hint.name].filter(Boolean).join(" ");
+}

package/src/cli/tui/select/editor-select-list.mjs

@@ -0,0 +1,111 @@
+import { SelectList, fuzzyFilter, matchesKey } from "@earendil-works/pi-tui";
+import { EDITOR_THEME } from "../ui-theme.mjs";
+
+export function showEditorSelectList({
+  tui,
+  editor,
+  items,
+  selectedIndex = 0,
+  maxVisible = 8,
+  requestRender,
+  suppressInitialLineFeed = false,
+  suppressInitialConfirm = false,
+  searchable = false,
+  getSearchText = defaultSearchText,
+}) {
+  if (!Array.isArray(items) || items.length === 0) return Promise.resolve(null);
+  return new Promise((resolve) => {
+    editor.cancelAutocomplete?.();
+    const list = new SelectList(items, maxVisible, EDITOR_THEME.selectList, {
+      minPrimaryColumnWidth: 18,
+      maxPrimaryColumnWidth: 32,
+    });
+    let settled = false;
+    let removeInputListener = null;
+    let query = "";
+    const finish = (item) => {
+      if (settled) return;
+      settled = true;
+      removeInputListener?.();
+      if (searchable) setEditorText(editor, "");
+      editor.autocompleteState = null;
+      editor.autocompleteList = undefined;
+      requestRender();
+      resolve(item);
+    };
+    list.setSelectedIndex(selectedIndex);
+    list.onSelect = (item) => finish(item);
+    list.onCancel = () => finish(null);
+    editor.autocompleteState = "force";
+    editor.autocompleteList = list;
+    let isFirstInput = true;
+    removeInputListener = tui.addInputListener((data) => {
+      if (isFirstInput && (suppressInitialConfirm || suppressInitialLineFeed) && isConfirmInput(data)) {
+        isFirstInput = false;
+        requestRender();
+        return { consume: true };
+      }
+      isFirstInput = false;
+      if (searchable && handleSearchInput(data)) {
+        requestRender();
+        return { consume: true };
+      }
+      list.handleInput(data);
+      requestRender();
+      return { consume: true };
+    });
+    requestRender();
+
+    function handleSearchInput(data) {
+      if (isBackspace(data)) {
+        if (query.length === 0) return true;
+        query = query.slice(0, -1);
+        applySearch();
+        return true;
+      }
+      const printable = decodeSinglePrintable(data);
+      if (printable === undefined) return false;
+      query += printable;
+      applySearch();
+      return true;
+    }
+
+    function applySearch() {
+      setEditorText(editor, query);
+      list.filteredItems = fuzzyFilter(items, query, getSearchText);
+      list.setSelectedIndex(query ? 0 : selectedIndex);
+    }
+  });
+}
+
+function defaultSearchText(item) {
+  return `${item?.label ?? ""} ${item?.description ?? ""} ${item?.value ?? ""}`;
+}
+
+function isBackspace(data) {
+  return data === "\x7f" || data === "\b" || matchesKey(data, "backspace");
+}
+
+function isConfirmInput(data) {
+  return data === "\r" || data === "\n" || matchesKey(data, "enter") || matchesKey(data, "return");
+}
+
+function decodeSinglePrintable(data) {
+  if (typeof data !== "string" || data.length !== 1) return undefined;
+  const code = data.charCodeAt(0);
+  if (code < 32 || code === 127) return undefined;
+  return data;
+}
+
+function setEditorText(editor, text) {
+  if (typeof editor.setTextInternal === "function") {
+    editor.setTextInternal(text);
+    return;
+  }
+  if (editor.state) {
+    editor.state.lines = [text];
+    editor.state.cursorLine = 0;
+    editor.state.cursorCol = text.length;
+  }
+  editor.onChange?.(text);
+}

package/src/cli/tui/selection-screen.mjs

@@ -0,0 +1,212 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+const CONTROL_RE = /\x1b(?:\][^\x07]*(?:\x07|\x1b\\)|\[[0-?]*[ -/]*[@-~]|[@-Z\\-_])/g;
+const INVERSE = "\x1b[7m";
+const RESET = "\x1b[0m";
+
+export class ScreenSelection {
+  constructor() {
+    this.active = false;
+    this.anchor = null;
+    this.focus = null;
+    this.lines = [];
+    this.viewport = { topRow: 0, leftCol: 0, width: Infinity, height: 0 };
+  }
+
+  setLines(lines) {
+    this.lines = lines.map((line) => stripAnsi(line));
+    this.viewport = { topRow: 0, leftCol: 0, width: Infinity, height: this.lines.length };
+  }
+
+  setViewport({ topRow = 0, leftCol = 0, width = Infinity, lines = [] } = {}) {
+    this.lines = lines.map((line) => stripAnsi(line));
+    this.viewport = {
+      topRow: Math.max(0, Math.trunc(topRow)),
+      leftCol: Math.max(0, Math.trunc(leftCol)),
+      width: Number.isFinite(width) ? Math.max(1, Math.trunc(width)) : Infinity,
+      height: this.lines.length,
+    };
+  }
+
+  start(point) {
+    const normalized = normalizePoint(point, this.viewport, true);
+    if (!normalized) {
+      this.clear();
+      return false;
+    }
+    this.active = true;
+    this.anchor = normalized;
+    this.focus = this.anchor;
+    return true;
+  }
+
+  update(point) {
+    if (!this.active || !this.anchor) return false;
+    this.focus = normalizePoint(point, this.viewport, true) ?? this.focus;
+    return true;
+  }
+
+  finish(point, { clear = true } = {}) {
+    if (!this.active || !this.anchor) return "";
+    this.focus = normalizePoint(point, this.viewport, true) ?? this.focus;
+    const text = this.text();
+    if (clear) this.clear();
+    else this.active = false;
+    return text;
+  }
+
+  clear() {
+    const hadSelection = this.active || Boolean(this.anchor || this.focus);
+    this.active = false;
+    this.anchor = null;
+    this.focus = null;
+    return hadSelection;
+  }
+
+  text() {
+    const range = this.range();
+    if (!range) return "";
+    const selected = [];
+    for (let row = range.start.row; row <= range.end.row; row += 1) {
+      const line = this.lines[row] ?? "";
+      const startCol = row === range.start.row ? range.start.col : 0;
+      const endCol = row === range.end.row ? range.end.col : visibleWidth(line);
+      selected.push(sliceColumns(line, startCol, endCol));
+    }
+    return selected.join("\n").replace(/[ \t]+$/gm, "").trimEnd();
+  }
+
+  apply(lines) {
+    const range = this.range();
+    if (!range) return lines;
+    return lines.map((line, row) => {
+      if (row < range.start.row || row > range.end.row) return line;
+      const plain = stripAnsi(line);
+      const startCol = row === range.start.row ? range.start.col : 0;
+      const endCol = row === range.end.row ? range.end.col : visibleWidth(plain);
+      if (endCol <= startCol) return line;
+      return highlightAnsiLine(line, startCol, endCol);
+    });
+  }
+
+  range() {
+    if (!this.anchor || !this.focus) return null;
+    const [start, end] = comparePoints(this.anchor, this.focus) <= 0
+      ? [this.anchor, this.focus]
+      : [this.focus, this.anchor];
+    if (start.row === end.row && start.col === end.col) return null;
+    return { start, end };
+  }
+}
+
+export function stripAnsi(text) {
+  return String(text ?? "").replace(CONTROL_RE, "");
+}
+
+function normalizePoint({ row, col }, viewport, clamp) {
+  const screenRow = Math.trunc(row) - 1;
+  const screenCol = Math.trunc(col) - 1;
+  const height = viewport?.height ?? 0;
+  if (height <= 0) return null;
+
+  let localRow = screenRow - (viewport?.topRow ?? 0);
+  let localCol = screenCol - (viewport?.leftCol ?? 0);
+  const maxCol = Number.isFinite(viewport?.width) ? viewport.width : Infinity;
+  if (!clamp && (localRow < 0 || localRow >= height || localCol < 0 || localCol > maxCol)) return null;
+  localRow = clampNumber(localRow, 0, height - 1);
+  localCol = clampNumber(localCol, 0, maxCol);
+  return { row: localRow, col: localCol };
+}
+
+function comparePoints(a, b) {
+  if (a.row !== b.row) return a.row - b.row;
+  return a.col - b.col;
+}
+
+function highlightAnsiLine(line, startCol, endCol) {
+  const { before, selected, after, activeAtStart, activeAtEnd } = splitAnsiColumns(line, startCol, endCol);
+  return `${before}${INVERSE}${activeAtStart}${keepInverseAfterReset(selected)}${RESET}${activeAtEnd}${after}`;
+}
+
+function keepInverseAfterReset(text) {
+  return String(text ?? "").replace(/\x1b\[([0-9;]*)m/g, (seq, body) => {
+    const params = body === "" ? ["0"] : body.split(";");
+    return params.includes("0") ? `${seq}${INVERSE}` : seq;
+  });
+}
+
+function sliceColumns(text, startCol, endCol) {
+  let col = 0;
+  let result = "";
+  for (const ch of String(text ?? "")) {
+    const next = col + visibleWidth(ch);
+    if (next > startCol && col < endCol) result += ch;
+    col = next;
+    if (col >= endCol) break;
+  }
+  return result;
+}
+
+function splitAnsiColumns(text, startCol, endCol) {
+  let col = 0;
+  let i = 0;
+  let before = "";
+  let selected = "";
+  let after = "";
+  let active = "";
+  let activeAtStart = "";
+  let activeAtEnd = "";
+  let capturedStart = false;
+  let capturedEnd = false;
+  const source = String(text ?? "");
+
+  while (i < source.length) {
+    const ansi = readAnsi(source, i);
+    if (ansi) {
+      active = updateActiveSgr(active, ansi);
+      if (col < startCol) before += ansi;
+      else if (col < endCol) selected += ansi;
+      else after += ansi;
+      i += ansi.length;
+      continue;
+    }
+
+    const ch = source[i];
+    if (!capturedStart && col >= startCol) {
+      activeAtStart = active;
+      capturedStart = true;
+    }
+    if (!capturedEnd && col >= endCol) {
+      activeAtEnd = active;
+      capturedEnd = true;
+    }
+
+    const next = col + visibleWidth(ch);
+    if (next <= startCol) before += ch;
+    else if (col >= endCol) after += ch;
+    else selected += ch;
+    col = next;
+    i += 1;
+  }
+
+  if (!capturedStart) activeAtStart = active;
+  if (!capturedEnd) activeAtEnd = active;
+  return { before, selected, after, activeAtStart, activeAtEnd };
+}
+
+function readAnsi(text, offset) {
+  if (text[offset] !== "\x1b") return null;
+  const match = text.slice(offset).match(/^\x1b(?:\][^\x07]*(?:\x07|\x1b\\)|\[[0-?]*[ -/]*[@-~]|[@-Z\\-_])/);
+  return match?.[0] ?? null;
+}
+
+function updateActiveSgr(active, seq) {
+  if (!seq.startsWith("\x1b[") || !seq.endsWith("m")) return active;
+  const body = seq.slice(2, -1);
+  if (body === "" || body.split(";").includes("0")) return "";
+  return seq;
+}
+
+function clampNumber(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}