@causyne/agent 0.0.0-stage → 1.10.1

package/src/tui/lineEditor.js

@@ -0,0 +1,256 @@
+// A multi-line text buffer with a cursor, and the arithmetic to draw it.
+//
+// The chat prompt was a single `inquirer` line: no way to write a paragraph, no
+// way to fix the start of a sentence without deleting the end of it. This is the
+// buffer that replaces it.
+//
+// The buffer holds CODE POINTS, not UTF-16 units. Storing a JavaScript string
+// and moving the cursor by index splits an emoji in half and leaves the terminal
+// printing a replacement character — the cursor must move by what the user sees
+// as one character.
+//
+// Drawing is not done here. render() returns the lines and where the cursor
+// landed in them; putting bytes on the terminal belongs to prompt.js.
+//
+// Pure Node. No dependency, no shell.
+
+import { visibleWidth } from './text.js';
+
+/** Split into code points, so one emoji is one editable unit. */
+function toCodePoints(text) {
+  return Array.from(String(text == null ? '' : text));
+}
+
+// A "word" for word-wise movement. Deliberately generous: an identifier, a
+// path segment and a flag should each move as one unit.
+const WORD_CHARACTER = /[\p{L}\p{N}_-]/u;
+
+export class LineEditor {
+  constructor(initial = '') {
+    this.setText(initial);
+    this.killRing = '';
+  }
+
+  // -------------------------------------------------------------------------
+  // Content
+  // -------------------------------------------------------------------------
+
+  setText(text) {
+    this.lines = String(text == null ? '' : text).split('\n').map(toCodePoints);
+    if (this.lines.length === 0) this.lines = [[]];
+    this.line = this.lines.length - 1;
+    this.col = this.lines[this.line].length;
+  }
+
+  getText() {
+    return this.lines.map((line) => line.join('')).join('\n');
+  }
+
+  get isEmpty() {
+    return this.lines.length === 1 && this.lines[0].length === 0;
+  }
+
+  clear() {
+    this.lines = [[]];
+    this.line = 0;
+    this.col = 0;
+  }
+
+  /** Insert text at the cursor. Embedded newlines split the line, as a paste does. */
+  insert(text) {
+    const parts = String(text).split('\n');
+    const current = this.lines[this.line];
+    const before = current.slice(0, this.col);
+    const after = current.slice(this.col);
+
+    if (parts.length === 1) {
+      this.lines[this.line] = before.concat(toCodePoints(parts[0]), after);
+      this.col += toCodePoints(parts[0]).length;
+      return;
+    }
+
+    const inserted = parts.map(toCodePoints);
+    const first = before.concat(inserted[0]);
+    const last = inserted[inserted.length - 1].concat(after);
+    const middle = inserted.slice(1, -1);
+
+    this.lines.splice(this.line, 1, first, ...middle, last);
+    this.line += parts.length - 1;
+    this.col = inserted[inserted.length - 1].length;
+  }
+
+  newline() {
+    const current = this.lines[this.line];
+    const before = current.slice(0, this.col);
+    const after = current.slice(this.col);
+    this.lines.splice(this.line, 1, before, after);
+    this.line += 1;
+    this.col = 0;
+  }
+
+  backspace() {
+    if (this.col > 0) {
+      this.lines[this.line].splice(this.col - 1, 1);
+      this.col -= 1;
+      return;
+    }
+    if (this.line === 0) return;
+    // Joining lines: the cursor lands where the two met.
+    const removed = this.lines.splice(this.line, 1)[0];
+    this.line -= 1;
+    this.col = this.lines[this.line].length;
+    this.lines[this.line] = this.lines[this.line].concat(removed);
+  }
+
+  deleteForward() {
+    const current = this.lines[this.line];
+    if (this.col < current.length) {
+      current.splice(this.col, 1);
+      return;
+    }
+    if (this.line >= this.lines.length - 1) return;
+    const next = this.lines.splice(this.line + 1, 1)[0];
+    this.lines[this.line] = current.concat(next);
+  }
+
+  // -------------------------------------------------------------------------
+  // Movement
+  // -------------------------------------------------------------------------
+
+  moveLeft() {
+    if (this.col > 0) { this.col -= 1; return; }
+    if (this.line > 0) { this.line -= 1; this.col = this.lines[this.line].length; }
+  }
+
+  moveRight() {
+    if (this.col < this.lines[this.line].length) { this.col += 1; return; }
+    if (this.line < this.lines.length - 1) { this.line += 1; this.col = 0; }
+  }
+
+  moveUp() {
+    if (this.line === 0) return false;
+    this.line -= 1;
+    this.col = Math.min(this.col, this.lines[this.line].length);
+    return true;
+  }
+
+  moveDown() {
+    if (this.line >= this.lines.length - 1) return false;
+    this.line += 1;
+    this.col = Math.min(this.col, this.lines[this.line].length);
+    return true;
+  }
+
+  moveHome() { this.col = 0; }
+  moveEnd() { this.col = this.lines[this.line].length; }
+
+  moveWordLeft() {
+    const line = this.lines[this.line];
+    if (this.col === 0) { this.moveLeft(); return; }
+    let index = this.col;
+    while (index > 0 && !WORD_CHARACTER.test(line[index - 1])) index -= 1;
+    while (index > 0 && WORD_CHARACTER.test(line[index - 1])) index -= 1;
+    this.col = index;
+  }
+
+  moveWordRight() {
+    const line = this.lines[this.line];
+    if (this.col === line.length) { this.moveRight(); return; }
+    let index = this.col;
+    while (index < line.length && !WORD_CHARACTER.test(line[index])) index += 1;
+    while (index < line.length && WORD_CHARACTER.test(line[index])) index += 1;
+    this.col = index;
+  }
+
+  // -------------------------------------------------------------------------
+  // Kill and yank — the readline bindings a terminal user already has muscle
+  // memory for. Killed text goes to a ring so Ctrl+Y can put it back.
+  // -------------------------------------------------------------------------
+
+  killToEnd() {
+    const line = this.lines[this.line];
+    this.killRing = line.slice(this.col).join('');
+    this.lines[this.line] = line.slice(0, this.col);
+  }
+
+  killToStart() {
+    const line = this.lines[this.line];
+    this.killRing = line.slice(0, this.col).join('');
+    this.lines[this.line] = line.slice(this.col);
+    this.col = 0;
+  }
+
+  killWordLeft() {
+    const start = this.col;
+    this.moveWordLeft();
+    const line = this.lines[this.line];
+    this.killRing = line.slice(this.col, start).join('');
+    line.splice(this.col, start - this.col);
+  }
+
+  yank() {
+    if (this.killRing) this.insert(this.killRing);
+  }
+
+  // -------------------------------------------------------------------------
+  // Layout
+  // -------------------------------------------------------------------------
+
+  /**
+   * Lay the buffer out for a terminal `width` columns wide.
+   *
+   * Returns the display rows plus where the cursor ended up in them. A logical
+   * line longer than the terminal soft-wraps onto several rows, so display row
+   * and logical line are not the same number — mixing them up is what makes a
+   * redraw leave debris on screen.
+   */
+  render(width, continuation = '') {
+    const usable = Math.max(8, width);
+    const rows = [];
+    let cursorRow = 0;
+    let cursorCol = 0;
+
+    for (let index = 0; index < this.lines.length; index++) {
+      const prefix = index === 0 ? '' : continuation;
+      const prefixWidth = visibleWidth(prefix);
+      const budget = Math.max(1, usable - prefixWidth);
+      const line = this.lines[index];
+
+      let row = prefix;
+      let used = 0;
+      let placed = false;
+
+      for (let position = 0; position <= line.length; position++) {
+        if (index === this.line && position === this.col) {
+          cursorRow = rows.length;
+          cursorCol = prefixWidth + used;
+          placed = true;
+        }
+        if (position === line.length) break;
+
+        const character = line[position];
+        const charWidth = visibleWidth(character);
+        if (used + charWidth > budget) {
+          rows.push(row);
+          row = prefix;
+          used = 0;
+          // Re-place the cursor if it sat exactly at the wrap point.
+          if (placed && cursorRow === rows.length - 1 && cursorCol === prefixWidth + budget) {
+            cursorRow = rows.length;
+            cursorCol = prefixWidth;
+          }
+        }
+        row += character;
+        used += charWidth;
+      }
+
+      rows.push(row);
+      if (index === this.line && !placed) {
+        cursorRow = rows.length - 1;
+        cursorCol = prefixWidth + used;
+      }
+    }
+
+    return { rows, cursorRow, cursorCol };
+  }
+}

package/src/tui/overlay.js

@@ -0,0 +1,256 @@
+// Modal layer: the thing that makes this an application rather than a log.
+//
+// opencode keeps a dialog STACK and pushes a "modal" entry onto a keybinding
+// mode stack while any dialog is open (ui/dialog.tsx, keymap.tsx). That detail is
+// the whole design. Without a mode stack, a dialog is just a box that happens to
+// be painted on top, and keys leak through to the prompt underneath — you type
+// to filter the palette and your text also lands in the message box. With one,
+// the top layer owns the keyboard and pops cleanly.
+//
+// The backdrop is dimmed rather than blacked out. opencode paints an alpha fill
+// over the screen; a cell grid cannot blend, but it can add the SGR dim
+// attribute to every cell behind the panel, which reads the same way and keeps
+// the conversation legible underneath.
+//
+// Pure Node over ./screen.js, ./theme.js and ./text.js. No dependency, no shell.
+
+import { paint, bold, dim, GLYPHS, HAS_COLOR, HAS_UNICODE } from './theme.js';
+import { truncate, visibleWidth } from './text.js';
+
+// Box-drawing set, degrading with the rest of the glyphs.
+export const FRAME = HAS_UNICODE
+  ? { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' }
+  : { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' };
+
+/**
+ * Add the SGR dim attribute to every cell in a region.
+ *
+ * Operates on the grid AFTER the page beneath has been painted, which is why the
+ * conversation stays readable behind a dialog instead of being erased.
+ */
+export function dimBackdrop(screen, viewport, hole) {
+  if (!HAS_COLOR) return;
+  for (let row = viewport.y; row < viewport.y + viewport.height; row++) {
+    if (row < 0 || row >= screen.height) continue;
+    for (let column = viewport.x; column < viewport.x + viewport.width; column++) {
+      if (column < 0 || column >= screen.width) continue;
+      if (hole
+        && row >= hole.y && row < hole.y + hole.height
+        && column >= hole.x && column < hole.x + hole.width) continue;
+
+      const cell = screen.cells[row * screen.width + column];
+      if (cell.ch === ' ' && !cell.style) continue;
+      const parts = cell.style ? cell.style.split(';') : [];
+      if (!parts.includes('2')) parts.push('2');
+      cell.style = parts.join(';');
+    }
+  }
+}
+
+/**
+ * Draw a framed panel and return the rect available INSIDE it.
+ *
+ * The frame is painted onto its own blank ground first, so a dialog never shows
+ * the transcript bleeding through the gaps between its rows.
+ */
+export function drawPanel(screen, rect, { title = '', footer = '' } = {}) {
+  if (rect.width < 4 || rect.height < 3) return { x: rect.x, y: rect.y, width: 0, height: 0 };
+
+  screen.fill(rect.x, rect.y, rect.width, rect.height, '');
+
+  const inner = rect.width - 2;
+  const line = FRAME.h.repeat(inner);
+
+  // Title sits in the top border, the way every terminal dialog has since curses.
+  let top = FRAME.tl + line + FRAME.tr;
+  if (title) {
+    const label = ` ${truncate(title, Math.max(0, inner - 4), GLYPHS.ellipsis)} `;
+    const width = visibleWidth(label);
+    top = FRAME.tl + FRAME.h + label + FRAME.h.repeat(Math.max(0, inner - width - 1)) + FRAME.tr;
+  }
+
+  let bottom = FRAME.bl + line + FRAME.br;
+  if (footer) {
+    const label = ` ${truncate(footer, Math.max(0, inner - 4), GLYPHS.ellipsis)} `;
+    const width = visibleWidth(label);
+    bottom = FRAME.bl + FRAME.h.repeat(Math.max(0, inner - width - 1)) + label + FRAME.h + FRAME.br;
+  }
+
+  screen.put(rect.x, rect.y, paint('rule', top), rect.width);
+  screen.put(rect.x, rect.y + rect.height - 1, paint('rule', bottom), rect.width);
+
+  for (let row = rect.y + 1; row < rect.y + rect.height - 1; row++) {
+    screen.put(rect.x, row, paint('rule', FRAME.v), 1);
+    screen.put(rect.x + rect.width - 1, row, paint('rule', FRAME.v), 1);
+  }
+
+  return {
+    x: rect.x + 2,
+    y: rect.y + 1,
+    width: Math.max(0, rect.width - 4),
+    height: Math.max(0, rect.height - 2)
+  };
+}
+
+/**
+ * A layer on the stack.
+ *
+ * Subclasses implement `body(width, height)` returning styled rows, and may
+ * implement `key(event)` returning 'close' | 'handled' | null. Returning null
+ * means "not mine" — but the stack still does NOT forward it downward, because a
+ * modal that leaks keys is the bug this class exists to prevent. null only means
+ * the layer chose to ignore it.
+ */
+export class Layer {
+  constructor(options = {}) {
+    this.title = options.title || '';
+    this.footer = options.footer || '';
+    this.width = options.width || 64;
+    this.height = options.height || 16;
+    this.onClose = options.onClose || null;
+    this.onSelect = options.onSelect || null;
+    this.cursor = null;
+  }
+
+  /**
+   * Rows this layer would like, given its content.
+   *
+   * A dialog padded out to a fixed height with blank rows looks unfinished —
+   * it is the single clearest tell between a prototype and a shipped tool. Every
+   * layer reports what it actually needs and the frame shrinks to it.
+   */
+  preferredHeight() { return this.height; }
+
+  /** Panel rect, centred and clamped to the viewport. */
+  rect(viewport) {
+    const width = Math.min(this.width, Math.max(20, viewport.width - 4));
+    const wanted = Math.max(5, Math.min(this.preferredHeight(), this.height));
+    const height = Math.min(wanted, Math.max(5, viewport.height - 4));
+    return {
+      x: viewport.x + Math.floor((viewport.width - width) / 2),
+      // A quarter down reads as centred; dead centre sits visually too low.
+      y: viewport.y + Math.max(1, Math.floor((viewport.height - height) / 4)),
+      width,
+      height
+    };
+  }
+
+  body() { return []; }
+  key() { return null; }
+}
+
+export class OverlayStack {
+  constructor() {
+    this.layers = [];
+  }
+
+  get top() { return this.layers.length > 0 ? this.layers[this.layers.length - 1] : null; }
+  get active() { return this.layers.length > 0; }
+  get depth() { return this.layers.length; }
+
+  push(layer) {
+    this.layers.push(layer);
+    return layer;
+  }
+
+  /** Pop exactly one layer. Nested dialogs unwind one esc at a time. */
+  pop() {
+    const layer = this.layers.pop();
+    if (layer && layer.onClose) layer.onClose();
+    return layer || null;
+  }
+
+  clear() {
+    while (this.layers.length > 0) this.pop();
+  }
+
+  /**
+   * Route a key.
+   *
+   * Returns true when a modal consumed it — which is ALWAYS, while one is open.
+   * The caller uses that to decide whether the prompt beneath ever sees the key,
+   * and the answer while a dialog is up must be no.
+   */
+  handleKey(key) {
+    const layer = this.top;
+    if (!layer) return false;
+
+    const result = layer.key(key);
+    if (result === 'close') this.pop();
+    return true;
+  }
+
+  /** Paint every layer bottom to top, dimming what is behind the topmost. */
+  paint(screen, viewport) {
+    for (let index = 0; index < this.layers.length; index++) {
+      const layer = this.layers[index];
+      const rect = layer.rect(viewport);
+
+      dimBackdrop(screen, viewport, rect);
+      const inner = drawPanel(screen, rect, { title: layer.title, footer: layer.footer });
+      if (inner.height <= 0) continue;
+
+      const rows = layer.body(inner.width, inner.height) || [];
+      for (let row = 0; row < Math.min(rows.length, inner.height); row++) {
+        screen.put(inner.x, inner.y + row, rows[row], inner.width);
+      }
+
+      // Only the topmost layer may own the caret.
+      if (index === this.layers.length - 1 && layer.cursor) {
+        screen.setCursor(inner.x + layer.cursor.x, inner.y + layer.cursor.y);
+      }
+    }
+  }
+}
+
+/** Shared footer text so every dialog teaches the same keys. */
+/**
+ * A layer as framed rows, for a normal-buffer live region.
+ *
+ * drawPanel() paints absolutely into a cell grid, which only exists inside an
+ * alternate-buffer app — and chat does not have one any more (UX-01). This is the
+ * same panel expressed as styled `string[]`, which is all a live region can
+ * append. It is the shape openclaw draws its pickers in: extra lines in the
+ * composed frame, not a floating window.
+ *
+ * There is deliberately no backdrop dim: a line already committed to the user's
+ * scrollback cannot be restyled, and pretending otherwise would corrupt it.
+ */
+export function panelRows(layer, width, maxHeight) {
+  const frameWidth = Math.max(8, width);
+  const inner = frameWidth - 4;                    // two borders, one pad each side
+  const bodyHeight = Math.max(1, Math.min(layer.preferredHeight(), maxHeight) - 2);
+  const body = layer.body(inner, bodyHeight);
+
+  const line = FRAME.h.repeat(frameWidth - 2);
+
+  let top = FRAME.tl + line + FRAME.tr;
+  if (layer.title) {
+    const label = ` ${truncate(layer.title, Math.max(0, inner - 4), GLYPHS.ellipsis)} `;
+    top = FRAME.tl + FRAME.h + label + FRAME.h.repeat(Math.max(0, frameWidth - 3 - visibleWidth(label))) + FRAME.tr;
+  }
+
+  let bottom = FRAME.bl + line + FRAME.br;
+  if (layer.footer) {
+    const label = ` ${truncate(layer.footer, Math.max(0, inner - 4), GLYPHS.ellipsis)} `;
+    bottom = FRAME.bl + FRAME.h.repeat(Math.max(0, frameWidth - 3 - visibleWidth(label))) + label + FRAME.h + FRAME.br;
+  }
+
+  const edge = paint('rule', FRAME.v);
+  const rows = [paint('rule', top)];
+  for (let index = 0; index < bodyHeight; index++) {
+    const content = truncate(body[index] || '', inner, GLYPHS.ellipsis);
+    const pad = ' '.repeat(Math.max(0, inner - visibleWidth(content)));
+    rows.push(`${edge} ${content}${pad} ${edge}`);
+  }
+  rows.push(paint('rule', bottom));
+  return rows;
+}
+
+export function dialogHint(extra = '') {
+  const parts = ['↑↓ move', 'enter select', 'esc close'];
+  if (extra) parts.push(extra);
+  return parts.join(`  ${GLYPHS.dot}  `);
+}
+
+export { bold, dim };