march-cli 0.1.0

package/src/cli/tui/input/mouse-selection-controller.mjs

@@ -0,0 +1,89 @@
+import { parseMouseEvent } from "./mouse-tracking.mjs";
+import { brightBlack } from "../ui-theme.mjs";
+
+export function createMouseSelectionController({
+  terminal,
+  output,
+  shellDrawer,
+  shellDrawerControls,
+  selection,
+  writeClipboard,
+  requestRender,
+}) {
+  function copySelectionText(text) {
+    if (!text) return false;
+    let result;
+    try {
+      result = writeClipboard(text);
+    } catch (err) {
+      setCopyStatus({ ok: false, message: err.message }, text.length);
+      return false;
+    }
+    if (result?.then) {
+      output.setOverlayStatus([brightBlack(`● copying selection (${text.length} chars)`)]);
+      requestRender();
+      result.then(
+        (resolved) => setCopyStatus(resolved, text.length),
+        (err) => setCopyStatus({ ok: false, message: err.message }, text.length)
+      );
+      return true;
+    }
+    setCopyStatus(result, text.length);
+    return result?.ok !== false;
+  }
+
+  function setCopyStatus(result, length) {
+    output.setOverlayStatus([
+      result?.ok === false
+        ? brightBlack(`● selection copy failed: ${compactStatusMessage(result.message)}`)
+        : brightBlack(`● copied selection (${length} chars)`),
+    ]);
+    requestRender();
+  }
+
+  return {
+    handleMouseInput(data, mouseOn) {
+      if (!mouseOn) return undefined;
+      const mouse = parseMouseEvent(data);
+      if (mouse?.type === "scroll") {
+        if (shellDrawer.isVisible?.() && mouse.col > Math.floor((terminal.columns || 80) * 0.64)) {
+          shellDrawerControls.scroll(mouse.delta);
+        } else {
+          output.scroll(mouse.delta);
+        }
+        requestRender();
+        return { consume: true };
+      }
+      if (mouse?.type === "down" && mouse.button === 0) {
+        selection.start(mouse);
+        requestRender();
+        return { consume: true };
+      }
+      if (mouse?.type === "drag" && mouse.button === 0) {
+        selection.update(mouse);
+        requestRender();
+        return { consume: true };
+      }
+      if (mouse?.type === "up") {
+        selection.finish(mouse, { clear: false });
+        requestRender();
+        return { consume: true };
+      }
+      return undefined;
+    },
+
+    handleCopyKey(data) {
+      if (data !== "\x03") return undefined;
+      const text = selection.text();
+      if (!text) return undefined;
+      selection.clear();
+      copySelectionText(text);
+      return { consume: true };
+    },
+  };
+}
+
+function compactStatusMessage(message) {
+  const text = String(message || "unknown error").replace(/\s+/g, " ").trim();
+  return text.length > 80 ? `${text.slice(0, 79)}…` : text;
+}

package/src/cli/tui/input/mouse-tracking.mjs

@@ -0,0 +1,20 @@
+export function parseMouseEvent(data) {
+  const match = data.match(/^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/);
+  if (!match) return null;
+  const code = parseInt(match[1], 10);
+  const col = parseInt(match[2], 10);
+  const row = parseInt(match[3], 10);
+  const final = match[4];
+
+  if (code === 64 || code === 65) {
+    return { type: "scroll", delta: code === 64 ? -1 : 1, col, row };
+  }
+  if (final === "m") return { type: "up", button: code & 3, col, row };
+  if ((code & 32) === 32) return { type: "drag", button: code & 3, col, row };
+  return { type: "down", button: code & 3, col, row };
+}
+
+export function parseMouseScroll(data) {
+  const event = parseMouseEvent(data);
+  return event?.type === "scroll" ? event.delta : null;
+}

package/src/cli/tui/layout/main-pane-layout.mjs

@@ -0,0 +1,38 @@
+export class MainPaneLayout {
+  constructor({ output, statusBar, editor, terminal, selection = null }) {
+    this.output = output;
+    this.statusBar = statusBar;
+    this.editor = editor;
+    this.terminal = terminal;
+    this.selection = selection;
+  }
+
+  render(width) {
+    const safeWidth = Math.max(1, Math.trunc(width));
+    const statusLines = this.statusBar.render(safeWidth);
+    const editorLines = this.editor.render(safeWidth);
+    const fixedHeight = statusLines.length + editorLines.length;
+    const viewportHeight = Math.max(1, (this.terminal?.rows || 30) - fixedHeight);
+    this.output.setViewportHeight(viewportHeight);
+    const outputLines = this.output.render(safeWidth);
+    const outputTop = Math.max(0, viewportHeight - outputLines.length);
+    this.selection?.setViewport({ topRow: outputTop, leftCol: 0, width: safeWidth, lines: outputLines });
+    const selectedOutputLines = this.selection?.apply(outputLines) ?? outputLines;
+    return [
+      ...padToHeight(selectedOutputLines, viewportHeight),
+      ...statusLines,
+      ...editorLines,
+    ];
+  }
+
+  invalidate() {
+    this.output.invalidate?.();
+    this.statusBar.invalidate?.();
+    this.editor.invalidate?.();
+  }
+}
+
+function padToHeight(lines, height) {
+  if (lines.length >= height) return lines;
+  return [...Array(height - lines.length).fill(""), ...lines];
+}

package/src/cli/tui/layout/safe-render-boundary.mjs

@@ -0,0 +1,46 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { brightBlack } from "../ui-theme.mjs";
+
+export class SafeRenderBoundary {
+  constructor(child, { onError = null } = {}) {
+    this.child = child;
+    this.onError = onError;
+  }
+
+  render(width) {
+    const safeWidth = Math.max(1, Math.trunc(width));
+    try {
+      return sanitizeRenderedLines(this.child.render(safeWidth), safeWidth);
+    } catch (err) {
+      this.onError?.(err);
+      return sanitizeRenderedLines([brightBlack(`March UI recovered from render error: ${err.message}`)], safeWidth);
+    }
+  }
+
+  invalidate() {
+    this.child.invalidate?.();
+  }
+}
+
+export function sanitizeRenderedLines(lines, width) {
+  const safeWidth = Math.max(1, Math.trunc(width));
+  const result = [];
+  for (const line of Array.isArray(lines) ? lines : []) {
+    for (const part of String(line ?? "").split(/\r?\n/)) {
+      result.push(fitRenderedLine(part, safeWidth));
+    }
+  }
+  return result;
+}
+
+function fitRenderedLine(line, width) {
+  if (visibleWidth(line) <= width) return line;
+  const truncated = truncateToWidth(line, width, "…");
+  if (visibleWidth(truncated) <= width) return truncated;
+  const plain = truncateToWidth(stripAnsi(line), width, "…");
+  return visibleWidth(plain) <= width ? plain : "";
+}
+
+function stripAnsi(text) {
+  return String(text ?? "").replace(/\x1b(?:\][^\x07]*(?:\x07|\x1b\\)|[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+}

package/src/cli/tui/markdown-renderer.mjs

@@ -0,0 +1,279 @@
+import { marked } from "marked";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { R, brightBlack, dim, orange, softGreen, bold, cyan } from "./ui-theme.mjs";
+import { highlightCodeLines } from "./syntax/highlighting.mjs";
+const TABLE_CELL_PADDING = 2;
+export function renderMarkdown(markdown, width) {
+  return renderMarkdownText(markdown, Math.max(1, width));
+}
+export function renderStreamingMarkdown(markdown, width, cache = new Map()) {
+  const text = String(markdown ?? "");
+  const maxWidth = Math.max(1, width);
+  const split = splitStableMarkdown(text);
+  if (!split.prefix) return renderMarkdownText(split.tail, maxWidth);
+
+  const key = `${maxWidth}\0${split.prefix}`;
+  let prefixLines = cache.get(key);
+  if (!prefixLines) {
+    prefixLines = renderMarkdownText(split.prefix, maxWidth);
+    cache.set(key, prefixLines);
+  }
+  const tailLines = split.tail ? renderMarkdownText(split.tail, maxWidth) : [];
+  return tailLines.length ? [...prefixLines, ...tailLines] : prefixLines;
+}
+
+function renderMarkdownText(markdown, maxWidth) {
+  let tokens;
+  try {
+    tokens = marked.lexer(String(markdown ?? ""));
+  } catch {
+    return renderPlainMarkdownFallback(markdown, maxWidth);
+  }
+  const lines = [];
+  for (const token of tokens) renderBlock(token, lines, maxWidth, 0);
+  return clampRenderedLines(lines.length ? lines : [""], maxWidth);
+}
+
+function clampRenderedLines(lines, width) {
+  return lines.flatMap((line) => String(line ?? "").split(/\r?\n/).map((part) => fitMarkdownLine(part, width)));
+}
+
+function fitMarkdownLine(line, width) {
+  if (visibleWidth(line) <= width) return line;
+  const truncated = truncateToWidth(line, width, "…");
+  return visibleWidth(truncated) <= width ? truncated : "";
+}
+
+function splitStableMarkdown(text) {
+  const lines = text.split("\n");
+  let offset = 0;
+  let stableOffset = 0;
+  let inFence = false;
+  for (const line of lines) {
+    const nextOffset = offset + line.length + 1;
+    if (/^\s*```/.test(line)) {
+      inFence = !inFence;
+      if (!inFence) stableOffset = Math.min(text.length, nextOffset);
+    } else if (!inFence && line.trim() === "") {
+      stableOffset = Math.min(text.length, nextOffset);
+    }
+    offset = nextOffset;
+  }
+  return { prefix: text.slice(0, stableOffset), tail: text.slice(stableOffset) };
+}
+
+function renderBlock(token, lines, width, depth) {
+  if (!token) return;
+  if (token.type === "space") {
+    if (lines.length && lines.at(-1) !== "") lines.push("");
+    return;
+  }
+  if (token.type === "heading") {
+    if (lines.length && lines.at(-1) !== "") lines.push("");
+    appendWrappedRuns(lines, inlineRuns(token.tokens ?? [{ type: "text", text: token.text }], "heading"), width, 0);
+    return;
+  }
+  if (token.type === "paragraph" || token.type === "text") {
+    appendWrappedRuns(lines, inlineRuns(token.tokens ?? [{ type: "text", text: token.text }]), width, depth * 2);
+    return;
+  }
+  if (token.type === "list") return renderList(token, lines, width, depth);
+  if (token.type === "table") return renderTable(token, lines, width);
+  if (token.type === "blockquote") return renderBlockquote(token, lines, width, depth);
+  if (token.type === "code") return renderCode(token, lines, width);
+  if (token.type === "hr") {
+    lines.push(brightBlack("─".repeat(Math.min(width, 60))));
+    return;
+  }
+  appendWrappedRuns(lines, [{ text: token.raw ?? token.text ?? "", style: null }], width, depth * 2);
+}
+
+function renderList(token, lines, width, depth) {
+  token.items?.forEach((item, index) => {
+    const marker = token.ordered ? `${Number(token.start || 1) + index}.` : "•";
+    const prefix = `${'  '.repeat(depth)}${cyan(marker)} `;
+    const inlineTokens = item.tokens?.filter((t) => t.type !== "list") ?? [];
+    const nested = item.tokens?.filter((t) => t.type === "list") ?? [];
+    const runs = inlineTokens.length
+      ? inlineTokens.flatMap((t) => inlineRuns(t.tokens ?? [{ type: "text", text: t.text }]))
+      : inlineRuns([{ type: "text", text: item.text ?? "" }]);
+    appendWrappedRuns(lines, runs, width, visibleWidth(stripAnsi(prefix)), prefix);
+    for (const child of nested) renderList(child, lines, width, depth + 1);
+  });
+}
+
+function renderTable(token, lines, width) {
+  const rows = [token.header ?? [], ...(token.rows ?? [])];
+  if (!rows.length) return;
+  const cells = rows.map((row) => row.map((cell) => plainInline(cell.tokens ?? [{ type: "text", text: cell.text }])));
+  const columnCount = Math.max(...cells.map((row) => row.length));
+  const widths = Array.from({ length: columnCount }, (_, i) => Math.max(3, ...cells.map((row) => visibleWidth(row[i] ?? ""))));
+  const borderWidth = columnCount + 1;
+  const paddingWidth = TABLE_CELL_PADDING * columnCount;
+  shrinkColumns(widths, Math.max(1, width - borderWidth - paddingWidth));
+
+  lines.push(formatTableBorder(widths, "┌", "┬", "┐"));
+  lines.push(formatTableRow(cells[0], widths, true));
+  lines.push(formatTableBorder(widths, "├", "┼", "┤"));
+  for (const row of cells.slice(1)) lines.push(formatTableRow(row, widths, false));
+  lines.push(formatTableBorder(widths, "└", "┴", "┘"));
+}
+
+function renderBlockquote(token, lines, width, depth) {
+  const inner = [];
+  for (const child of token.tokens ?? []) renderBlock(child, inner, Math.max(1, width - 2), depth);
+  for (const line of inner) lines.push(`${brightBlack("│")} ${dim(line)}`);
+}
+
+function renderCode(token, lines, width) {
+  const innerWidth = Math.max(1, width - 4);
+  lines.push(formatCodeBorder("╭", token.lang ? ` ${token.lang} ` : "", "╮", width));
+  for (const line of highlightCodeLines(String(token.text ?? ""), token.lang)) {
+    for (const wrapped of wrapAnsi(line, innerWidth)) {
+      lines.push(formatCodeLine(wrapped, width));
+    }
+  }
+  lines.push(formatCodeBorder("╰", "", "╯", width));
+}
+
+function formatCodeBorder(left, label, right, width) {
+  const prefix = `${left}─${label}`;
+  const fill = "─".repeat(Math.max(0, width - visibleWidth(prefix) - 1));
+  return brightBlack(`${prefix}${fill}${right}`);
+}
+
+function formatCodeLine(content, width) {
+  const padding = " ".repeat(Math.max(0, width - visibleWidth(stripAnsi(content)) - 4));
+  return `${brightBlack("│")} ${content}${padding} ${brightBlack("│")}`;
+}
+
+function inlineRuns(tokens, forcedStyle = null) {
+  const runs = [];
+  for (const token of tokens ?? []) {
+    if (token.type === "strong") runs.push(...inlineRuns(token.tokens, "strong"));
+    else if (token.type === "em") runs.push(...inlineRuns(token.tokens, "em"));
+    else if (token.type === "codespan") runs.push({ text: token.text ?? "", style: "code" });
+    else if (token.type === "link") runs.push(...inlineRuns(token.tokens ?? [{ type: "text", text: token.text }], "link"));
+    else runs.push({ text: token.text ?? token.raw ?? "", style: forcedStyle });
+  }
+  return runs;
+}
+
+function appendWrappedRuns(lines, runs, width, indent = 0, firstPrefix = null) {
+  const prefix = firstPrefix ?? " ".repeat(indent);
+  const restPrefix = " ".repeat(indent);
+  let current = prefix;
+  let currentWidth = visibleWidth(stripAnsi(prefix));
+  const maxWidth = Math.max(1, width);
+  for (const run of runs) {
+    for (const ch of run.text) {
+      const charWidth = visibleWidth(ch);
+      if (currentWidth + charWidth > maxWidth && currentWidth > visibleWidth(stripAnsi(prefix))) {
+        lines.push(current);
+        current = restPrefix;
+        currentWidth = visibleWidth(restPrefix);
+      }
+      current += styleText(ch, run.style);
+      currentWidth += charWidth;
+    }
+  }
+  lines.push(current);
+}
+
+function styleText(text, style) {
+  if (!style) return text;
+  if (style === "heading" || style === "strong") return orange(text);
+  if (style === "code") return softGreen(text);
+  if (style === "em") return dim(text);
+  if (style === "link") return cyan(text);
+  return text;
+}
+
+function plainInline(tokens) {
+  return stripAnsi(inlineRuns(tokens).map((run) => run.text).join(""));
+}
+
+function formatTableRow(row, widths, header) {
+  const cells = widths.map((width, i) => {
+    const text = truncateCell(row[i] ?? "", width);
+    const padded = text + " ".repeat(Math.max(0, width - visibleWidth(text)));
+    return ` ${header ? bold(padded) : padded} `;
+  });
+  return `${brightBlack("│")}${cells.join(brightBlack("│"))}${brightBlack("│")}`;
+}
+
+function formatTableBorder(widths, left, join, right) {
+  return brightBlack(`${left}${widths.map((width) => "─".repeat(width + TABLE_CELL_PADDING)).join(join)}${right}`);
+}
+
+function shrinkColumns(widths, maxTotal) {
+  while (widths.reduce((a, b) => a + b, 0) > maxTotal && Math.max(...widths) > 6) {
+    const index = widths.indexOf(Math.max(...widths));
+    widths[index] -= 1;
+  }
+}
+
+function truncateCell(text, width) {
+  const chars = [];
+  const sourceChars = Array.from(text);
+  let used = 0;
+  for (const ch of sourceChars) {
+    const w = visibleWidth(ch);
+    if (used + w > width) break;
+    chars.push(ch);
+    used += w;
+  }
+  if (chars.length < sourceChars.length && width > 1) {
+    while (chars.length && used + 1 > width) used -= visibleWidth(chars.pop());
+    return `${chars.join("")}…`;
+  }
+  return chars.join("");
+}
+
+function renderPlainMarkdownFallback(markdown, width) {
+  return String(markdown ?? "").split("\n").flatMap((line) => wrapAnsi(line, width));
+}
+
+function wrapAnsi(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 ? 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 stripAnsi(text) {
+  return String(text ?? "").replace(/\x1b(?:\][^\x07]*(?:\x07|\x1b\\)|[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+}

package/src/cli/tui/output/scroll-state.mjs

@@ -0,0 +1,79 @@
+export class OutputScrollState {
+  constructor() {
+    this.offset = 0;
+    this.anchorStart = null;
+    this.viewportHeight = null;
+    this.totalLines = 0;
+  }
+
+  clear() {
+    this.offset = 0;
+    this.anchorStart = null;
+    this.viewportHeight = null;
+    this.totalLines = 0;
+  }
+
+  setTotalLines(total) {
+    this.totalLines = Math.max(0, Math.trunc(total));
+  }
+
+  scroll(delta) {
+    const total = this.totalLines;
+    const win = this._windowHeight();
+    const maxOffset = this.getMaxOffset();
+    const step = this.getStep();
+    const currentStart = this.anchorStart ?? Math.max(0, total - this.offset - win);
+    const maxStart = Math.max(0, total - win);
+    const nextStart = clamp(currentStart + (delta < 0 ? -step : step), 0, maxStart);
+    const nextEnd = Math.min(total, nextStart + win);
+    this.offset = clamp(total - nextEnd, 0, maxOffset);
+    this.anchorStart = this.offset > 0 ? nextStart : null;
+    return { offset: this.offset, maxOffset, atTail: this.offset === 0 };
+  }
+
+  getStep() {
+    return Math.max(1, Math.floor(this._windowHeight() / 3));
+  }
+
+  getMaxOffset() {
+    return Math.max(0, this.totalLines - this._windowHeight());
+  }
+
+  setViewportHeight(height) {
+    this.viewportHeight = Math.max(1, Math.trunc(height));
+    this.offset = clamp(this.offset, 0, this.getMaxOffset());
+    if (this.offset === 0) this.anchorStart = null;
+  }
+
+  reset() {
+    this.offset = 0;
+    this.anchorStart = null;
+  }
+
+  sliceRange() {
+    const win = this.viewportHeight;
+    if (win === null) return null;
+    const maxOffset = this.getMaxOffset();
+    if (this.anchorStart !== null && this.offset > 0) {
+      const start = clamp(this.anchorStart, 0, Math.max(0, this.totalLines - win));
+      const end = Math.min(this.totalLines, start + win);
+      this.offset = clamp(this.totalLines - end, 0, maxOffset);
+      if (this.offset === 0) this.anchorStart = null;
+      else this.anchorStart = start;
+      return { start, end };
+    }
+
+    this.offset = clamp(this.offset, 0, maxOffset);
+    if (this.offset === 0) this.anchorStart = null;
+    const end = Math.max(0, this.totalLines - this.offset);
+    return { start: Math.max(0, end - win), end };
+  }
+
+  _windowHeight() {
+    return this.viewportHeight || (process.stdout.rows || 30) - 2;
+  }
+}
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}

package/src/cli/tui/output/tool-card-renderer.mjs

@@ -0,0 +1,59 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { R, brightBlack, dim, red } from "../ui-theme.mjs";
+
+export function renderToolCardBlock(block, width) {
+  const lines = [];
+  const border = brightBlack("┃");
+  const marker = block.state === "running" ? "▶" : block.expanded ? "▾" : "▸";
+  const summary = block.summary ? ` · ${block.summary}` : "";
+  const head = `${marker} ${block.title}${summary}`;
+  appendCardWrapped(lines, border, (block.isError ? red : dim)(head), width);
+
+  if (block.expanded && block.bodyLines?.length) {
+    lines.push(border);
+    for (const line of block.bodyLines) appendCardWrapped(lines, border, dim(line), width, "  ");
+  }
+  return lines;
+}
+
+function appendCardWrapped(lines, border, text, width, indent = "") {
+  const prefix = `${border} ${indent}`;
+  const contentWidth = Math.max(8, width - visibleWidth(prefix));
+  for (const part of wrapLine(text, contentWidth)) lines.push(`${prefix}${part}`);
+}
+
+function wrapLine(text, maxWidth) {
+  if (maxWidth <= 0) return [""];
+  const result = [];
+  let cur = "", curW = 0, activeSgr = "";
+  for (let i = 0; i < text.length;) {
+    if (text[i] === "\x1b") {
+      const match = text.slice(i).match(/^\x1b\[[0-?]*[ -/]*[@-~]/);
+      if (match) {
+        cur += match[0];
+        activeSgr = updateActiveSgr(activeSgr, match[0]);
+        i += match[0].length;
+        continue;
+      }
+    }
+    const ch = text[i], 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;
+}