@semalt-ai/code 1.8.0 → 1.8.3

package/lib/ui/create-ui.js

@@ -4,7 +4,8 @@ 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');
+const writer = require('./writer');
+const { registerTerminalCleanup } = require('./terminal');
 
 function _createNoOpUI() {
   const chatHistory = {
@@ -62,413 +63,155 @@ function createUI(opts) {
 
   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];
+  // ── Live-region composer ─────────────────────────────────────────────────────
+  //
+  // Everything below the scrollback boundary — streaming partial line,
+  // separator, status bar, input rows, hints — lives in the writer's live
+  // region. _updateLive() builds the full row array from the current state
+  // of chatHistory + statusBar + inputField and pushes it through
+  // writer.setLive, which erases the previous frame and draws the new one
+  // in a single serialized burst.
+
+  let _sb = null;
+  let _inputField = null;
+
+  function _updateLive() {
+    const lines = [];
+
+    // Streaming in-progress line (optional). Shown at the top of the live
+    // region while tokens are arriving; promoted to scrollback when a
+    // newline is seen or the stream ends.
+    const streamLine = chatHistory.getStreamingLiveLine
+      ? chatHistory.getStreamingLiveLine()
+      : null;
+    if (streamLine !== null && streamLine !== undefined) {
+      lines.push(streamLine);
+    }
 
-    _withCursorHidden(() => {
-      const msgs = chatHistory._messages;
-      const availRows = layout.historyRows;
+    // Thin separator rule above the status bar. Always present so the
+    // chrome has a visible top edge.
+    if (_sb) lines.push(_sb.renderSeparator());
 
-      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;
+    // Status bar.
+    if (_sb) {
+      const statusLine = _sb.renderLine();
+      if (statusLine !== null && statusLine !== undefined) {
+        lines.push(statusLine);
       }
+    }
 
-      // 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;
+    // Input row(s).
+    if (_inputField) {
+      for (const row of _inputField.renderInputLines()) {
+        lines.push(row);
       }
+      // Hints row.
+      lines.push(_inputField.renderHintsLine());
+    }
 
-      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();
-    });
-  };
+    writer.setLive(lines);
+  }
 
-  // ── captureSelect: render menu in history area, not in input zone ────────────
+  _sb = new FullStatusBar(layout, _updateLive);
+  _inputField = new InputField(layout, chatHistory, _updateLive);
+  chatHistory._onLiveUpdate = _updateLive;
+
+  const sb = _sb;
+  const inputField = _inputField;
+
+  // ── Resize ───────────────────────────────────────────────────────────────────
+  //
+  // Terminal resize: re-truncate the current live lines to the new width.
+  // Scrollback is left alone — the terminal re-wraps existing rows on its
+  // own. The LayoutManager's own listener already refreshes cols; we just
+  // repaint the live region here.
+  layout.onResize(() => {
+    // Input field may need to re-check height against new cols; trigger a
+    // re-render so its cached lines reflect the new width.
+    try { inputField._render(); inputField._renderHints(); } catch {}
+    writer.redrawLive();
+  });
+  layout.onInputHeightChange(() => { _updateLive(); });
 
+  // ── captureSelect (modal menu) ───────────────────────────────────────────────
+  //
+  // Interactive menus need to take over the bottom of the screen. Clear
+  // the live region, let interactiveSelect draw into scrollback-like space,
+  // then rebuild live on resume.
   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]);
+    writer.clearLive().then(() => {
+      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();
+        _updateLive();
+        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.
-
+  // ── Idle / active ────────────────────────────────────────────────────────────
+  // When the user is idle, pause the status bar's periodic redraws so the
+  // terminal viewport can scroll freely (the clock tick re-pushes the live
+  // region, which would otherwise fight user scrollback).
   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();
+  // Clear the current viewport and the terminal's save buffer so the UI
+  // starts in a known state, then paint the first live frame below a fresh
+  // cursor position.
+  writer.enqueue(() => {
+    try { process.stdout.write('\x1b[2J\x1b[3J\x1b[H\x1b[?25l'); } catch {}
+  });
+  // Pre-render both input and hints so the first _updateLive has valid
+  // cached content from inputField.
   inputField._render();
+  inputField._renderHints();
+  _updateLive();
 
-  // ── Destroy ──────────────────────────────────────────────────────────────────
+  // ── Cleanup wiring ───────────────────────────────────────────────────────────
+  // index.js installs the same handlers at startup; this defensive call is a
+  // no-op if they're already registered. Ensures cleanup runs even when the
+  // UI is initialised from a code path that bypassed index.js.
+  registerTerminalCleanup();
 
+  // ── Destroy ──────────────────────────────────────────────────────────────────
+  // Stop timers + stdin listeners FIRST so no further writes can be queued,
+  // then run writer.teardown(). teardown is a single synchronous stdout
+  // write that erases the live region and resets terminal state. After it
+  // returns, the cursor sits at column 0 of the row immediately below the
+  // last scrollback line — so any subsequent console.log (goodbye banner,
+  // metrics summary, resume hint) lands cleanly under the session content.
   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();
+    try { inputField.destroy(); } catch {}
+    try { sb.destroy(); } catch {}
+    try { layout.destroy(); } catch {}
+    writer.teardown();
   }
 
-  process.once('exit', () => { try { destroy(); } catch {} });
-
-  return { chatHistory, statusBar: sb, inputField, layout, destroy, redrawFixed: _redrawFixed };
+  return { chatHistory, statusBar: sb, inputField, layout, destroy, redrawFixed: _updateLive };
 }
 
 module.exports = { createUI };