@semalt-ai/code 1.6.0 → 1.8.0

package/lib/ui/create-ui.js

@@ -0,0 +1,474 @@
+'use strict';
+
+const readline = require('readline');
+
+const { RST, DIM, FG_YELLOW, FG_CYAN, FG_GRAY, BG_SELECTED } = require('./ansi');
+const { ChatHistory } = require('./chat-history');
+const { stripAnsi } = require('./utils');
+
+function _createNoOpUI() {
+  const chatHistory = {
+    addMessage: (msg) => {
+      if (msg.role === 'assistant' || msg.role === 'user')
+        process.stdout.write(`[${msg.role}] ${msg.content || ''}\n`);
+    },
+    streamToken: (token) => process.stdout.write(token),
+    clearStreamingContent: () => {},
+    finalizeLastMessage: () => {},
+    clearMessages: () => {},
+    scrollUp: () => {}, scrollDown: () => {},
+    rerenderById: () => {},
+    removeById: () => {},
+    collapseById: () => {},
+    invalidateCache: () => {},
+  };
+  const statusBar = {
+    update: () => {}, updateMetrics: () => {}, onToken: () => {},
+    drawSeparator: () => {}, liveUpdate: () => {}, _renderBar: () => {},
+    setModel: () => {}, destroy: () => {},
+  };
+  let _submitCb = null;
+  const inputField = {
+    setDisabled: () => {}, getValue: () => '', suspend: () => {}, resume: () => {},
+    captureNavigation: () => {}, releaseNavigation: () => {},
+    captureSelect: (menu) => Promise.resolve(menu.options[0]),
+    on: (ev, cb) => { if (ev === 'interrupt') process.on('SIGINT', cb); },
+    emit: () => {},
+    onSubmit: (cb) => {
+      _submitCb = cb;
+      if (!process.stdin.isTTY) {
+        const rl = readline.createInterface({ input: process.stdin, output: null });
+        rl.on('line', (line) => { const t = line.trim(); if (t && _submitCb) _submitCb(t); });
+        rl.on('close', () => process.exit(0));
+      }
+    },
+    setSearchItems: () => {},
+    destroy: () => {},
+  };
+  return { chatHistory, statusBar, inputField, layout: null, destroy: () => {} };
+}
+
+let _destroyCalled = false;
+
+function createUI(opts) {
+  if (!process.stdout.isTTY) return _createNoOpUI();
+
+  _destroyCalled = false;
+
+  const { LayoutManager } = require('./layout');
+  const { FullStatusBar } = require('./status-bar');
+  const { InputField } = require('./input-field');
+  const { interactiveSelect } = require('./legacy');
+
+  const layout = new LayoutManager();
+  const chatHistory = new ChatHistory();
+  const sb = new FullStatusBar(layout);
+  const inputField = new InputField(layout, chatHistory);
+
+  // ── Scroll region ────────────────────────────────────────────────────────────
+
+  // DECSTBM (\x1b[T;Br) moves the cursor to home (1,1) on many terminals.
+  // Wrapping it with DECSC/DECRC (\x1b7/\x1b8) preserves the cursor position so
+  // subsequent save/restore calls in drawSeparator/_renderBar stay correct.
+  function _setupScrollRegion() {
+    process.stdout.write(`\x1b7\x1b[${layout.historyStart};${layout.historyRows}r\x1b8`);
+  }
+
+  // Position cursor at the last row of the scroll region so subsequent stdout
+  // writes (with embedded \n) stay inside the region and never clobber the
+  // fixed panels below it.
+  function _toHistoryEnd() {
+    process.stdout.write(`\x1b[${layout.historyRows};1H`);
+  }
+
+  // ── Fixed-panel redraw ───────────────────────────────────────────────────────
+
+  function _redrawFixed() {
+    _setupScrollRegion();
+    sb.drawSeparator();
+    sb._renderBar();
+    inputField._renderHints();
+    inputField._render();
+  }
+
+  function _redrawInput() {
+    inputField._renderHints();
+    inputField._render();
+  }
+
+  layout.onResize(_redrawFixed);
+  layout.onInputHeightChange(_redrawFixed);
+
+  // ── Wrap ChatHistory writes ──────────────────────────────────────────────────
+  // Ensure all output lands in the scroll region and fixed panels are redrawn.
+  // Every compound write hides the OS cursor first and restores it after, so
+  // the terminal caret never visibly jumps during in-place updates.
+
+  function _withCursorHidden(fn) {
+    const wasHidden = inputField._cursorHidden;
+    inputField.hideCursor();
+    fn();
+    if (!wasHidden) inputField.showCursor();
+  }
+
+  const _origAdd = chatHistory.addMessage.bind(chatHistory);
+  chatHistory.addMessage = (msg) => {
+    _withCursorHidden(() => {
+      // Capture what _origAdd would write without actually writing it.  The
+      // capture also runs _origAdd's side effects (state like _msgById /
+      // _msgLineCount, _flush of any streaming content), so we just need to
+      // place the captured lines ourselves.
+      const chunks = [];
+      const origWrite = process.stdout.write;
+      process.stdout.write = (chunk, enc, cb) => {
+        chunks.push(typeof chunk === 'string' ? chunk : chunk.toString('utf8'));
+        if (typeof enc === 'function') enc();
+        else if (typeof cb === 'function') cb();
+        return true;
+      };
+      try { _origAdd(msg); } finally { process.stdout.write = origWrite; }
+
+      const rendered = chunks.join('');
+      const lines = rendered.split('\n');
+      if (lines[lines.length - 1] === '') lines.pop();
+      const msgLines = lines.length;
+
+      if (msgLines > 0) {
+        // Count visual rows after terminal-width wrapping so a message with long
+        // single lines doesn't overflow absolute positioning.
+        let visualLines = 0;
+        for (const line of lines) {
+          const plain = stripAnsi(line);
+          visualLines += plain.length === 0 ? 1 : Math.ceil(plain.length / layout.cols);
+        }
+
+        const inGrowing = layout.rows < layout._termRows;
+        const msgStartRow = layout.historyStart + layout._contentLines;
+        const maxGrowableHistoryRows = layout._termRows - layout.inputHeight - 3;
+        const maxFitLines = Math.max(0, maxGrowableHistoryRows - msgStartRow + 1);
+        const fits = inGrowing && msgLines <= maxFitLines && visualLines <= maxFitLines;
+
+        if (fits) {
+          // Growing mode: expand layout so the message's last line lands exactly
+          // at historyRows.  Write content at absolute positions; no scroll.
+          const prevHistoryRows = layout.historyRows;
+          layout.rows = Math.min(msgStartRow + msgLines - 1 + layout.inputHeight + 3,
+                                  layout._termRows);
+          _setupScrollRegion();
+
+          // Clear old fixed-panel rows that are now inside the history region.
+          for (let r = prevHistoryRows + 1; r <= layout.historyRows; r++) {
+            process.stdout.write(`\x1b[${r};1H\x1b[2K`);
+          }
+
+          for (let i = 0; i < lines.length; i++) {
+            const row = msgStartRow + i;
+            if (row > layout.historyRows) break;
+            process.stdout.write(`\x1b[${row};1H\x1b[2K${lines[i]}`);
+          }
+
+          layout._contentLines += msgLines;
+        } else {
+          // Maxed layout, or message too large for growing mode.  Scroll the
+          // region up by msgLines (so the bottom msgLines rows are blank), then
+          // place the message flush at historyRows using absolute positioning.
+          // This is critical for rerenderById: letting _origAdd emit its own
+          // trailing \n leaves row historyRows blank, so a later rerender
+          // (which targets historyRows-prevLines+1..historyRows) would miss the
+          // first old row and leave the stale header visible above the redraw.
+          if (inGrowing) {
+            const prevHistoryRows = layout.historyRows;
+            layout.rows = layout._termRows;
+            _setupScrollRegion();
+            for (let r = prevHistoryRows + 1; r <= layout.historyRows; r++) {
+              process.stdout.write(`\x1b[${r};1H\x1b[2K`);
+            }
+          }
+
+          _toHistoryEnd();
+          process.stdout.write('\n'.repeat(msgLines));
+
+          const startRow = layout.historyRows - msgLines + 1;
+          for (let i = 0; i < lines.length; i++) {
+            const row = startRow + i;
+            if (row < 1) continue;
+            process.stdout.write(`\x1b[${row};1H\x1b[2K${lines[i]}`);
+          }
+        }
+      }
+
+      _toHistoryEnd();
+      chatHistory._messages.push(msg);
+      sb.drawSeparator();
+      sb._renderBar();
+      _redrawInput();
+    });
+  };
+
+  const _origStream = chatHistory.streamToken.bind(chatHistory);
+  chatHistory.streamToken = (token) => {
+    if (!chatHistory._streamWritten) _toHistoryEnd();
+    _origStream(token);
+  };
+
+  const _origFinalize = chatHistory.finalizeLastMessage.bind(chatHistory);
+  chatHistory.finalizeLastMessage = (content) => {
+    _withCursorHidden(() => {
+      const wasStreaming = chatHistory._streamWritten;
+      const streamStart = chatHistory._streamStart;
+      if (!wasStreaming) _toHistoryEnd();
+      _origFinalize(content);
+      _toHistoryEnd();
+      if (content && content.trim()) {
+        chatHistory._messages.push({
+          role: 'assistant',
+          content,
+          ts: wasStreaming ? (streamStart || new Date()) : new Date(),
+        });
+      }
+      sb.drawSeparator();
+      sb._renderBar();
+      _redrawInput();
+    });
+  };
+
+  const _origClear = chatHistory.clearStreamingContent.bind(chatHistory);
+  chatHistory.clearStreamingContent = () => {
+    _withCursorHidden(() => {
+      _origClear();
+      _toHistoryEnd();
+      sb.drawSeparator();
+      sb._renderBar();
+      _redrawInput();
+    });
+  };
+
+  // ── rerenderById: overwrite previous render in-place (no scroll) ─────────────
+  chatHistory.rerenderById = (id) => {
+    const msg = chatHistory._msgById[id];
+    if (!msg) return;
+    _withCursorHidden(() => {
+      const prevLines = chatHistory._msgLineCount[id] || 0;
+      if (prevLines > 0) {
+        // Capture what _origAdd would write without actually writing it
+        const chunks = [];
+        const origWrite = process.stdout.write;
+        process.stdout.write = (chunk, enc, cb) => {
+          chunks.push(typeof chunk === 'string' ? chunk : chunk.toString('utf8'));
+          if (typeof enc === 'function') enc();
+          else if (typeof cb === 'function') cb();
+          return true;
+        };
+        try { _origAdd(msg); } finally { process.stdout.write = origWrite; }
+
+        const rendered = chunks.join('').split('\n');
+        if (rendered[rendered.length - 1] === '') rendered.pop();
+
+        // Write each line using absolute row addressing — no trailing \n so the
+        // scroll region never shifts during a navigation key press.  The original
+        // write placed the last line at historyRows, so rewrite the same range
+        // (historyRows - prevLines + 1 .. historyRows); the previous off-by-one
+        // left the final row untouched, leaving stale content (e.g. the "No"
+        // option) beneath the new render.
+        const startRow = Math.max(1, layout.historyRows - prevLines + 1);
+        for (let i = 0; i < prevLines && (startRow + i) <= layout.historyRows; i++) {
+          const line = i < rendered.length ? rendered[i] : '';
+          process.stdout.write(`\x1b[${startRow + i};1H\x1b[2K${line}`);
+        }
+      } else {
+        _toHistoryEnd();
+        _origAdd(msg);
+      }
+      sb.drawSeparator();
+      sb._renderBar();
+      _redrawInput();
+    });
+  };
+
+  // ── collapseById: replace list block with 1-line summary, no blank gap ────────
+  // After writing the summary in-place we insert (prevLines-1) blank lines at
+  // row 1 of the scroll region.  This shifts the summary flush to historyRows-1
+  // (losing only the blank rows we just cleared at the bottom) so the next
+  // addMessage scroll lands immediately below it with no gap.
+  chatHistory.collapseById = (id) => {
+    const msg = chatHistory._msgById[id];
+    if (!msg) return;
+    const prevLines = chatHistory._msgLineCount[id] || 0;
+    if (prevLines <= 0) { chatHistory.removeById(id); return; }
+
+    _withCursorHidden(() => {
+      // Capture the rendered output of the new 1-line content without writing it
+      const chunks = [];
+      const origWrite = process.stdout.write;
+      process.stdout.write = (chunk, enc, cb) => {
+        chunks.push(typeof chunk === 'string' ? chunk : chunk.toString('utf8'));
+        if (typeof enc === 'function') enc();
+        else if (typeof cb === 'function') cb();
+        return true;
+      };
+      try { _origAdd(msg); } finally { process.stdout.write = origWrite; }
+
+      const rendered = chunks.join('').split('\n');
+      if (rendered[rendered.length - 1] === '') rendered.pop();
+
+      const startRow = Math.max(1, layout.historyRows - prevLines);
+
+      // Write the summary line and blank the rest of the block in-place
+      process.stdout.write(`\x1b[${startRow};1H\x1b[2K${rendered[0] || ''}`);
+      for (let i = 1; i < prevLines && (startRow + i) < layout.historyRows; i++) {
+        process.stdout.write(`\x1b[${startRow + i};1H\x1b[2K`);
+      }
+
+      // Insert (prevLines-1) blank lines at the top of the scroll region.
+      // Content shifts down by that many rows; the summary lands at historyRows-1.
+      // Cap at historyRows-1: more blank lines than the region height pushes the
+      // summary off the bottom, leaving a blank screen.
+      const blankRows = Math.min(prevLines - 1, layout.historyRows - 1);
+      if (blankRows > 0) process.stdout.write(`\x1b[1;1H\x1b[${blankRows}L`);
+      // Restore cursor to end of scroll region — the L sequence leaves it at row 1,
+      // which would cause any subsequent stdout writes to land above visible content.
+      _toHistoryEnd();
+
+      chatHistory.removeById(id);
+      sb.drawSeparator();
+      sb._renderBar();
+      _redrawInput();
+    });
+  };
+
+  // ── toggleLastExpand: full-redraw of visible scroll region ──────────────────
+  // In-place row targeting is unreliable once the tool message has scrolled up.
+  // Instead: toggle the expand flag, re-render all recent messages into a line
+  // buffer, then write the visible slice directly into the scroll region rows.
+  chatHistory.toggleLastExpand = () => {
+    const id = chatHistory._lastExpandableId;
+    if (!id) return;
+    const msg = chatHistory._msgById[id];
+    if (!msg) return;
+
+    chatHistory._toolExpanded[id] = !chatHistory._toolExpanded[id];
+
+    _withCursorHidden(() => {
+      const msgs = chatHistory._messages;
+      const availRows = layout.historyRows;
+
+      function captureMsg(m) {
+        const chunks = [];
+        const origWrite = process.stdout.write;
+        process.stdout.write = (chunk, enc, cb) => {
+          chunks.push(typeof chunk === 'string' ? chunk : chunk.toString('utf8'));
+          if (typeof enc === 'function') enc();
+          else if (typeof cb === 'function') cb();
+          return true;
+        };
+        try { _origAdd(m); } finally { process.stdout.write = origWrite; }
+        const lines = chunks.join('').split('\n');
+        if (lines[lines.length - 1] === '') lines.pop();
+        return lines;
+      }
+
+      // Walk messages newest-first, accumulate until we have enough lines to fill
+      // the scroll region (or exhaust history).
+      const captures = [];
+      let totalLines = 0;
+      for (let i = msgs.length - 1; i >= 0; i--) {
+        const lines = captureMsg(msgs[i]);
+        if (lines.length === 0) continue;
+        totalLines += lines.length;
+        captures.unshift(lines);
+        if (totalLines >= availRows) break;
+      }
+
+      const allLines = [];
+      for (const msgLines of captures) allLines.push(...msgLines);
+      const visibleLines = allLines.slice(Math.max(0, allLines.length - availRows));
+      const startRow = availRows - visibleLines.length + 1;
+
+      // Clear every row in the scroll region then write the new content.
+      const ops = ['\x1b7'];
+      for (let r = 1; r <= availRows; r++) ops.push(`\x1b[${r};1H\x1b[2K`);
+      for (let i = 0; i < visibleLines.length; i++) ops.push(`\x1b[${startRow + i};1H${visibleLines[i]}`);
+      ops.push('\x1b8');
+      process.stdout.write(ops.join(''));
+
+      // Restore: captureMsg calls _origAdd which overwrites _lastExpandableId
+      // with whichever expandable message it rendered last (oldest wins in the
+      // newest→oldest loop), so subsequent Ctrl+O presses would toggle the wrong block.
+      chatHistory._lastExpandableId = id;
+
+      sb.drawSeparator();
+      sb._renderBar();
+      _redrawInput();
+    });
+  };
+
+  // ── captureSelect: render menu in history area, not in input zone ────────────
+
+  inputField.captureSelect = (menu) => new Promise((resolve) => {
+    if (!process.stdin.isTTY) {
+      resolve(menu.options[0]);
+      return;
+    }
+    _toHistoryEnd();
+    inputField.suspend();
+
+    interactiveSelect(
+      menu.options,
+      (opt, isSelected, isFinal) => {
+        if (isSelected && !isFinal)
+          return `  ${FG_YELLOW}❯${RST} ${BG_SELECTED}${FG_CYAN}${opt}${RST}`;
+        if (isSelected)
+          return `  ${FG_YELLOW}❯${RST} ${FG_CYAN}${opt}${RST}`;
+        return `   ${FG_GRAY}${opt}${RST}`;
+      },
+      { initialIndex: 0, onExpand: () => chatHistory.toggleLastExpand() }
+    ).then((idx) => {
+      inputField.resume(); // re-adds data listener and redraws hints+input
+      sb.drawSeparator();
+      sb._renderBar();
+      resolve(idx === null ? menu.options[menu.options.length - 1] : menu.options[idx]);
+    });
+  });
+
+  // ── Interrupt ────────────────────────────────────────────────────────────────
+
+  if (opts && opts.onInterrupt) {
+    inputField.on('interrupt', () => opts.onInterrupt(destroy));
+  }
+
+  // ── Idle / active: stop all periodic stdout writes while user isn't typing ───
+  // Any timer write (clock, spinner, blink) at a fixed row snaps the terminal
+  // viewport back to the bottom. Pausing the status bar and blink timer when idle
+  // lets the native scrollback work freely.
+
+  inputField.on('idle',   () => sb.pause());
+  inputField.on('active', () => sb.resume());
+
+  // ── Initial draw ─────────────────────────────────────────────────────────────
+  // Clear screen and home cursor so the UI occupies the full terminal cleanly.
+  process.stdout.write('\x1b[2J\x1b[H');
+  _setupScrollRegion();
+  sb.drawSeparator();
+  sb._renderBar();
+  inputField._renderHints();
+  inputField._render();
+
+  // ── Destroy ──────────────────────────────────────────────────────────────────
+
+  function destroy() {
+    if (_destroyCalled) return;
+    _destroyCalled = true;
+    // Reset scroll region and place cursor at bottom so the shell prompt
+    // appears on a fresh line after exit.
+    process.stdout.write(`\x1b[r\x1b[${layout.rows};1H\n`);
+    inputField.destroy();
+    sb.destroy();
+    layout.destroy();
+  }
+
+  process.once('exit', () => { try { destroy(); } catch {} });
+
+  return { chatHistory, statusBar: sb, inputField, layout, destroy, redrawFixed: _redrawFixed };
+}
+
+module.exports = { createUI };