@pellux/goodvibes-tui 2.0.20 → 2.1.0

package/src/renderer/composer.ts

@@ -0,0 +1,146 @@
+/**
+ * composer.ts, the prompt box, built exactly like a user message. It holds
+ * input and nothing else.
+ *
+ *   col 2        ┃ in the mode color, on every row of the block; ╻ and ╹ on
+ *                the cap rows, so the bar spans exactly the visible fill
+ *   cols 3..w-3  the element fill
+ *   rows         ▄ cap, padding, text (one or more), padding, ▀ cap
+ *   text         from column 5, wrapped to width-9 (see prompt-content-width.ts)
+ *
+ * The cap rows are half rows: a ▄ row is empty on top and fill below, a ▀ row
+ * fill on top and empty below (the modal caps' technique, surface-kit.ts).
+ * They keep half a row of empty space between the input area and whatever
+ * sits above it (the throbber, or the transcript at rest) and below it (the
+ * status line), so text never sits directly on the input area.
+ *
+ * Multi-line input grows the text area; nothing else moves. The approval mode,
+ * the auto-approve warning and the safety chips are on the status line; the
+ * model and the failover marker are in the header.
+ */
+
+import { type Line, createEmptyLine } from '@pellux/goodvibes-sdk/platform/types';
+import { getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
+import { GLYPHS } from './ui-primitives.ts';
+import { activeTokens } from './theme.ts';
+
+/** Column of the mode bar. */
+const COMPOSER_BAR_X = 2;
+/** First fill column. */
+const COMPOSER_FILL_X = 3;
+/** First text column. */
+const COMPOSER_TEXT_X = 5;
+/** Rows the composer adds around its text rows (a cap row and a padding row above and below). */
+export const COMPOSER_FIXED_ROWS = 4;
+
+const COMPOSER_PLACEHOLDER = 'Ask anything, or type / for commands and @ for files';
+
+export interface ComposerOptions {
+  readonly width: number;
+  /** Visible prompt rows joined with '\n'. */
+  readonly promptText: string;
+  /** Cursor offset into promptText (rows joined with one separator), when on screen. */
+  readonly cursorPos?: number;
+  readonly focused: boolean;
+  /** Faint hint after the cursor on the last row (a command's arguments). */
+  readonly argsHint?: string;
+  /** The bar's color: the session mode (brand, plan, auto-approving modes, shell), or the agent or process shown. */
+  readonly modeColor: string;
+  /** The empty composer's placeholder (an agent view: "Message engineer. This steers it; main keeps running."). */
+  readonly placeholder?: string;
+  /**
+   * The composer takes no input here; the reason is drawn in its place (a
+   * process whose stdin is not reachable). No cursor is drawn.
+   */
+  readonly disabledReason?: string;
+}
+
+interface Style { readonly fg: string; readonly bg: string; readonly bold?: boolean }
+
+function put(line: Line, x: number, endX: number, text: string, style: Style): number {
+  let cx = x;
+  for (const ch of text) {
+    const w = getDisplayWidth(ch);
+    if (w <= 0) continue;
+    if (cx + w > endX) break;
+    line[cx] = { char: ch, fg: style.fg, bg: style.bg, bold: style.bold ?? false, dim: false, underline: false, italic: false, strikethrough: false };
+    if (w === 2 && cx + 1 < line.length) line[cx + 1] = { ...line[cx]!, char: '' };
+    cx += w;
+  }
+  return cx;
+}
+
+function blockRow(width: number, bar: string, bg: string): Line {
+  const line = createEmptyLine(width);
+  for (const cell of line) cell.bg = '';
+  if (width > COMPOSER_BAR_X) line[COMPOSER_BAR_X] = { char: '┃', fg: bar, bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
+  for (let x = COMPOSER_FILL_X; x <= width - 3; x++) line[x] = { char: ' ', fg: '', bg, bold: false, dim: false, underline: false, italic: false, strikethrough: false };
+  return line;
+}
+
+/**
+ * A half row: ▄ (the fill's lower half, above the block) or ▀ (its upper
+ * half, below the block) across the fill columns, in the fill color on the
+ * terminal background, with the bar's matching half (╻ or ╹) in column 2.
+ */
+function capRow(width: number, bar: string, bg: string, edge: 'top' | 'bottom'): Line {
+  const line = createEmptyLine(width);
+  for (const cell of line) cell.bg = '';
+  const base = { bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
+  if (width > COMPOSER_BAR_X) line[COMPOSER_BAR_X] = { ...base, char: edge === 'top' ? '╻' : '╹', fg: bar };
+  for (let x = COMPOSER_FILL_X; x <= width - 3; x++) line[x] = { ...base, char: edge === 'top' ? '▄' : '▀', fg: bg };
+  return line;
+}
+
+/** Render the composer block (at least 5 rows: cap, padding, text, padding, cap). */
+export function renderComposer(options: ComposerOptions): Line[] {
+  const t = activeTokens();
+  const { width } = options;
+  const bg = t.backgroundElement;
+  const bar = options.modeColor;
+  const textEnd = width - 4; // exclusive: text keeps 2 columns from the fill's right edge
+  if (options.disabledReason !== undefined) {
+    const line = blockRow(width, bar, bg);
+    put(line, COMPOSER_TEXT_X, textEnd, truncateDisplay(options.disabledReason, Math.max(0, textEnd - COMPOSER_TEXT_X)), { fg: t.textFaint, bg });
+    return [capRow(width, bar, bg, 'top'), blockRow(width, bar, bg), line, blockRow(width, bar, bg), capRow(width, bar, bg, 'bottom')];
+  }
+  const rows = options.promptText.split('\n');
+  const lines: Line[] = [capRow(width, bar, bg, 'top'), blockRow(width, bar, bg)];
+  const textFg = options.focused ? t.text : t.textFaint;
+  const placeholder = options.placeholder ?? COMPOSER_PLACEHOLDER;
+
+  let offset = 0;
+  rows.forEach((text, i) => {
+    const line = blockRow(width, bar, bg);
+    const last = i === rows.length - 1;
+    const empty = rows.length === 1 && text === '';
+    if (empty) {
+      // The input area holds only input: its placeholder, focused or not (the status line says where the keys are).
+      put(line, COMPOSER_TEXT_X, textEnd, truncateDisplay(placeholder, Math.max(0, textEnd - COMPOSER_TEXT_X)), { fg: t.textFaint, bg });
+    } else {
+      put(line, COMPOSER_TEXT_X, textEnd + 1, text, { fg: textFg, bg });
+    }
+    if (options.focused) {
+      const posInRow = options.cursorPos !== undefined ? options.cursorPos - offset : (last ? text.length : -1);
+      if (posInRow >= 0 && posInRow <= text.length && (options.cursorPos !== undefined || last)) {
+        const cx = COMPOSER_TEXT_X + getDisplayWidth(text.slice(0, posInRow));
+        if (cx <= width - 4) {
+          const cell = line[cx]!;
+          const blank = empty || cell.char === ' ' || cell.char === '';
+          line[cx] = blank && !empty
+            ? { ...cell, char: GLYPHS.surface.cursor, fg: t.text, bg }
+            : { ...cell, char: cell.char === '' ? ' ' : cell.char, fg: bg, bg: t.text };
+          // A command's argument hint trails the cursor while it sits at the end.
+          if (last && options.argsHint && posInRow >= text.length && !empty) {
+            put(line, cx + 2, textEnd, truncateDisplay(options.argsHint, Math.max(0, textEnd - cx - 2)), { fg: t.textFaint, bg });
+          }
+        }
+      }
+    }
+    offset += text.length + 1;
+    lines.push(line);
+  });
+
+  lines.push(blockRow(width, bar, bg), capRow(width, bar, bg, 'bottom'));
+  return lines;
+}

package/src/renderer/compositor.ts

@@ -1,17 +1,12 @@
 import { TerminalBuffer } from './buffer.ts';
 import { DiffEngine } from './diff.ts';
-import { type Line, createEmptyCell, createEmptyLine, createStyledCell } from '@pellux/goodvibes-sdk/platform/types';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
+import { type Line, createEmptyLine } from '@pellux/goodvibes-sdk/platform/types';
 import type { SearchManager } from '../input/search.ts';
 import { allowTerminalWrite } from '@pellux/goodvibes-terminal-shell/terminal-output-guard';
 import { probeTermCaps, type TermColorCaps } from './term-caps.ts';
-import { activeTheme } from './theme.ts';
-import { UI_TONES } from './ui-primitives.ts';
-
-// Accent / dim colors for the panel focus border. The focused pane's left
-// border column is drawn in the accent tone; the unfocused pane stays dim.
-const PANEL_FOCUS_ACCENT = UI_TONES.state.active; // bright blue
-const PANEL_BORDER_DIM = '238';
+import { activeTheme, activeTokens } from './theme.ts';
+import type { SurfaceLayer } from './surface-kit.ts';
+import { composeLayers } from './surface-compose.ts';
 
 export interface SelectionInfo {
   isCellSelected: (col: number, absoluteRow: number) => boolean;
@@ -25,29 +20,6 @@ export interface SearchInfo {
   viewportStartY: number;
 }
 
-export interface PanelCompositeData {
-  /**
-   * The single consolidated workspace tab bar spanning all open panels across
-   * both panes. There are no per-pane tab bars, pane focus is shown by the
-   * accent border (see `topFocused`/`bottomFocused`).
-   */
-  workspaceBar: Line;
-  /** Top pane: panel content lines */
-  topContent: Line[];
-  /** Whether the top pane is focused (drives the accent border) */
-  topFocused: boolean;
-  /** Whether a bottom pane is present (splits the panel area). */
-  hasBottomPane: boolean;
-  /** Bottom pane content lines. Undefined = no bottom pane. */
-  bottomContent?: Line[];
-  /** Whether the bottom pane is focused */
-  bottomFocused?: boolean;
-  /** Separator between left and right panel area */
-  separator: boolean;
-  /** Ratio of panel height for the top pane (0–1). Only used when bottom pane is present. */
-  verticalSplitRatio: number;
-}
-
 export interface CompositeRequest {
   width: number;
   height: number;
@@ -56,8 +28,11 @@ export interface CompositeRequest {
   footer: Line[];
   selection?: SelectionInfo;
   search?: SearchInfo;
-  panel?: PanelCompositeData;
-  panelWidth?: number; // width of the right panel area (0 = no panel)
+  /**
+   * Surfaces stamped over the finished screen, in order: modals (which dim
+   * everything underneath first), toasts. Screen coordinates.
+   */
+  layers?: readonly SurfaceLayer[];
 }
 
 /**
@@ -124,7 +99,7 @@ export class Compositor {
   }
 
   public composite(params: CompositeRequest): void {
-    const { width, height, header, viewport, footer, selection, search, panel, panelWidth } = params;
+    const { width, height, header, viewport, footer, selection, search, layers } = params;
     // A size change reallocates the buffer, which drops every record of what
     // the terminal is currently showing, repaint in full rather than diff
     // against a model that no longer describes the screen.
@@ -144,10 +119,6 @@ export class Compositor {
     }
     const newBuffer = this.backBuffer;
 
-    const hasPanel = panel !== undefined && panelWidth !== undefined && panelWidth > 0;
-    const leftWidth = hasPanel ? Math.max(1, width - panelWidth - 1) : width;
-    const sepX = hasPanel ? leftWidth : -1;
-
     // 1. Draw Header, always full width
     header.forEach((line, i) => newBuffer.blitLine(i, line));
 
@@ -159,33 +130,6 @@ export class Compositor {
     const lineCount = selection?.lineCount ?? 0;
     const offset = Math.max(0, vHeight - lineCount);
 
-    // --- Pre-compute panel row layout when split pane is active ---
-    // A single consolidated workspace bar heads the panel area; there are no
-    // per-pane tab bars. When both panes are visible the layout is:
-    //   row 0:              workspace tab bar
-    //   rows 1..topH:       top content
-    //   row topH+1:         horizontal separator (───)
-    //   rows topH+2..end:   bottom content
-    const hasBottomPane = hasPanel && panel!.hasBottomPane;
-    let topPaneHeight = 0;   // number of content rows in top pane
-    let hSepRow = -1;        // viewport row of the horizontal separator
-    if (hasPanel && hasBottomPane) {
-      const panelAreaRows = Math.max(0, vHeight - 1); // subtract workspace bar
-      const contentRows = Math.max(0, panelAreaRows - 1); // subtract h-separator
-      topPaneHeight = Math.max(1, Math.floor(contentRows * panel!.verticalSplitRatio));
-      hSepRow = 1 + topPaneHeight; // workspace bar + top content rows
-    }
-
-    const panelFocused = hasPanel && (panel!.topFocused || panel!.bottomFocused);
-    // Per-row left-border color: the focused pane's rows get the accent tone.
-    const borderFgForRow = (i: number): string => {
-      if (!hasPanel || !panel!.separator || !panelFocused) return PANEL_BORDER_DIM;
-      if (!hasBottomPane) return panel!.topFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
-      if (i === 0) return PANEL_FOCUS_ACCENT; // workspace bar, panel is focused
-      if (i <= topPaneHeight) return panel!.topFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
-      return panel!.bottomFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
-    };
-
     // Every body row is written every frame, including rows the caller did not
     // supply a line for. A viewport array shorter than the body (a docked
     // overlay reserves a bottom inset, an overlay-row reservation overshoots
@@ -201,113 +145,30 @@ export class Compositor {
       const screenY = viewportStartY + i;
       if (screenY >= height) break;
 
-      if (!hasPanel) {
-        // No panel: existing fast path
-        newBuffer.blitLine(screenY, line);
-      } else {
-        // Panel active: write cells individually to support split layout
-        // Left side: viewport cells 0..leftWidth-1
-        for (let x = 0; x < leftWidth; x++) {
-          const cell = line[x];
-          if (cell !== undefined) {
-            // If this is a wide char (2-cell) at the last left-side column,
-            // it would bleed into the separator column visually.
-            // Replace with a space to keep the separator aligned.
-            if (x === leftWidth - 1 && cell.char && cell.char.length > 0 && getDisplayWidth(cell.char) > 1) {
-              newBuffer.setCell(x, screenY, { ...cell, char: ' ' });
-              continue;
-            }
-            newBuffer.setCell(x, screenY, cell);
-          }
-        }
-
-        const p = panel!;
-
-        // Separator column (vertical bar between left and panel area).
-        // Colored per-row so the focused pane shows a bright accent border.
-        if (p.separator) {
-          newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: borderFgForRow(i) }));
-        }
-
-        const panelStartX = sepX + 1;
-        const clearPanelRemainder = (fromX = 0) => {
-          for (let x = Math.max(0, fromX); x < panelWidth; x++) {
-            newBuffer.setCell(panelStartX + x, screenY, createEmptyCell());
-          }
-        };
-        const drawPanelLine = (panelLine: Line | undefined) => {
-          if (panelLine === undefined) {
-            clearPanelRemainder();
-            return;
-          }
-          const limit = Math.min(panelLine.length, panelWidth);
-          for (let x = 0; x < limit; x++) {
-            const cell = panelLine[x];
-            if (cell !== undefined) {
-              newBuffer.setCell(panelStartX + x, screenY, cell);
-            }
-          }
-          clearPanelRemainder(limit);
-        };
-
-        if (!hasBottomPane) {
-          // --- Single pane mode ---
-          // viewport row 0 → workspace bar, viewport rows 1+ → panel content
-          const panelLine = i === 0 ? p.workspaceBar : p.topContent[i - 1];
-          drawPanelLine(panelLine);
-        } else {
-          // --- Two pane mode (single consolidated workspace bar) ---
-          // Row layout (by viewport row i):
-          //   i = 0:                      workspace tab bar
-          //   1 <= i <= topPaneHeight:    top content[i-1]
-          //   i = hSepRow:                horizontal separator
-          //   i >= hSepRow+1:             bottom content[i - (hSepRow+1)]
-          let panelLine: Line | undefined;
-
-          if (i === 0) {
-            panelLine = p.workspaceBar;
-          } else if (i <= topPaneHeight) {
-            panelLine = p.topContent[i - 1];
-          } else if (i === hSepRow) {
-            // Horizontal separator between the two panes. Accent when the bottom
-            // pane has focus so the divider reinforces the focus border.
-            const focusFg = p.bottomFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
-            for (let x = 0; x < panelWidth; x++) {
-              newBuffer.setCell(panelStartX + x, screenY, createStyledCell('─', { fg: focusFg }));
-            }
-            // T-junction (├) joins the vertical left-border with the pane divider.
-            if (p.separator) {
-              newBuffer.setCell(sepX, screenY, createStyledCell('├', { fg: focusFg }));
-            }
-          } else {
-            panelLine = p.bottomContent?.[i - (hSepRow + 1)];
-          }
-
-          if (i !== hSepRow) {
-            drawPanelLine(panelLine);
-          }
-        }
-      }
+      newBuffer.blitLine(screenY, line);
 
-      // Apply Selection Highlighting Overlay (left side only)
+      // Apply Selection Highlighting Overlay
       // Only highlight rows that actually contain history (past the bottom-anchor offset)
       if (selection && i >= offset) {
         const absoluteRow = selection.scrollTop + (i - offset);
-        for (let x = 0; x < leftWidth; x++) {
+        for (let x = 0; x < width; x++) {
           if (selection.isCellSelected(x, absoluteRow)) {
-            newBuffer.setCell(x, screenY, { bg: '4', fg: '0', bold: false, dim: false });
+            // Mouse selection: the theme's selection fill with body text (the
+            // inverse selectedListItemText is unreadable on this fill).
+            const sel = activeTokens();
+            newBuffer.setCell(x, screenY, { bg: sel.backgroundSelected, fg: sel.text, bold: false, dim: false });
           }
         }
       }
 
-      // Apply Search Match Highlighting Overlay (left side only)
+      // Apply Search Match Highlighting Overlay
       if (search && search.manager.active && search.manager.query.length > 0 && i >= offset) {
         const T = activeTheme();
         const absoluteRow = search.scrollTop + (i - offset);
         const lineMatches = search.manager.getMatchesOnLine(absoluteRow);
         for (const match of lineMatches) {
           const isCurrent = search.manager.isCurrentMatch(absoluteRow, match.col);
-          for (let x = match.col; x < match.col + match.length && x < leftWidth; x++) {
+          for (let x = match.col; x < match.col + match.length && x < width; x++) {
             if (isCurrent) {
               newBuffer.setCell(x, screenY, { bg: T.searchCurrentBg, fg: T.searchCurrentFg, bold: true, dim: false });
             } else {
@@ -318,7 +179,7 @@ export class Compositor {
       }
     }
     // (rows past the supplied viewport lines are covered by the loop above,
-    // separator column included, so they can no longer keep a stale frame.)
+    // so they can no longer keep a stale frame.)
 
     // 3. Draw Footer (Pinned to Bottom), always full width
     const footerStart = height - footer.length;
@@ -328,7 +189,12 @@ export class Compositor {
       newBuffer.blitLine(screenY, line);
     });
 
-    // 4. Diff and Render
+    // 4. Modal passes: dim the composed screen, then stamp each surface over
+    // it (cells outside a surface keep their dimmed content). Runs after the
+    // selection and search passes so those dim along with everything else.
+    if (layers && layers.length > 0) composeLayers(newBuffer, layers);
+
+    // 5. Diff and Render
     // Diff against front-buffer (last-rendered), then swap front/back, no clone() needed.
     // On a full repaint the SGR run-state is reset (the erase below leaves the
     // terminal's attributes unknown) and the diff runs against no previous