@pellux/goodvibes-tui 0.18.4

package/src/renderer/code-block.ts

@@ -0,0 +1,373 @@
+import { type Line, type Cell, createStyledCell, createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { UIFactory } from './ui-factory.ts';
+import { getDisplayWidth } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { LAYOUT } from './layout.ts';
+import { SyntaxHighlighter, type SyntaxToken as HLToken } from './syntax-highlighter.ts';
+
+// ─── Language Keyword Maps ───────────────────────────────────────────────────
+
+const TS_JS_KEYWORDS = new Set([
+  'const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while',
+  'do', 'switch', 'case', 'break', 'continue', 'class', 'extends', 'import',
+  'export', 'default', 'from', 'new', 'this', 'super', 'typeof', 'instanceof',
+  'in', 'of', 'try', 'catch', 'finally', 'throw', 'async', 'await', 'yield',
+  'null', 'undefined', 'true', 'false', 'void', 'delete', 'interface', 'type',
+  'enum', 'namespace', 'module', 'declare', 'abstract', 'implements', 'static',
+  'readonly', 'public', 'private', 'protected', 'as', 'satisfies',
+]);
+const TS_TYPES = new Set([
+  'string', 'number', 'boolean', 'any', 'unknown', 'never', 'object', 'symbol',
+  'bigint', 'void', 'Record', 'Array', 'Map', 'Set', 'Promise', 'Partial',
+  'Required', 'Readonly', 'Pick', 'Omit', 'Exclude', 'Extract', 'NonNullable',
+]);
+
+const PYTHON_KEYWORDS = new Set([
+  'def', 'class', 'return', 'if', 'elif', 'else', 'for', 'while', 'import',
+  'from', 'as', 'with', 'try', 'except', 'finally', 'raise', 'pass', 'break',
+  'continue', 'and', 'or', 'not', 'in', 'is', 'lambda', 'yield', 'global',
+  'nonlocal', 'del', 'assert', 'True', 'False', 'None', 'async', 'await',
+]);
+
+const BASH_KEYWORDS = new Set([
+  'if', 'then', 'else', 'elif', 'fi', 'for', 'do', 'done', 'while', 'case',
+  'esac', 'function', 'return', 'exit', 'echo', 'export', 'local', 'readonly',
+  'source', 'set', 'unset', 'shift', 'trap', 'exec', 'eval', 'read',
+]);
+
+// ─── Language Detection ──────────────────────────────────────────────────────
+
+function detectLanguage(lang: string): 'ts' | 'python' | 'bash' | 'json' | 'yaml' | 'html' | 'css' | 'unknown' {
+  const l = lang.toLowerCase();
+  if (l === 'ts' || l === 'tsx' || l === 'js' || l === 'jsx' || l === 'typescript' || l === 'javascript') return 'ts';
+  if (l === 'py' || l === 'python') return 'python';
+  if (l === 'sh' || l === 'bash' || l === 'shell' || l === 'zsh') return 'bash';
+  if (l === 'json') return 'json';
+  if (l === 'yaml' || l === 'yml') return 'yaml';
+  if (l === 'html' || l === 'htm' || l === 'xml') return 'html';
+  if (l === 'css' || l === 'scss' || l === 'less') return 'css';
+  return 'unknown';
+}
+
+// ─── Token Types ─────────────────────────────────────────────────────────────
+
+type SyntaxToken = { text: string; fg: string; bold?: boolean; italic?: boolean };
+
+// ─── Tokenizers ──────────────────────────────────────────────────────────────
+
+function tokenizeTsJs(line: string): SyntaxToken[] {
+  const tokens: SyntaxToken[] = [];
+  let i = 0;
+
+  while (i < line.length) {
+    // Line comment
+    if (line.slice(i, i + 2) === '//') {
+      tokens.push({ text: line.slice(i), fg: '65', italic: true });
+      break;
+    }
+    // String (single, double, template)
+    if (line[i] === '"' || line[i] === "'" || line[i] === '`') {
+      const q = line[i];
+      let j = i + 1;
+      while (j < line.length && line[j] !== q) {
+        if (line[j] === '\\') j++;
+        j++;
+      }
+      tokens.push({ text: line.slice(i, j + 1), fg: '#ce9178' });
+      i = j + 1;
+      continue;
+    }
+    // Number
+    if (/[0-9]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && /[0-9._xXbBoO]/.test(line[j])) j++;
+      tokens.push({ text: line.slice(i, j), fg: '#b5cea8' });
+      i = j;
+      continue;
+    }
+    // Identifier or keyword
+    if (/[a-zA-Z_$]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && /[\w$]/.test(line[j])) j++;
+      const word = line.slice(i, j);
+      if (TS_JS_KEYWORDS.has(word)) {
+        tokens.push({ text: word, fg: '#569cd6', bold: true });
+      } else if (TS_TYPES.has(word)) {
+        tokens.push({ text: word, fg: '#4ec9b0' });
+      } else if (line[j] === '(') {
+        tokens.push({ text: word, fg: '#dcdcaa' });
+      } else {
+        tokens.push({ text: word, fg: '' });
+      }
+      i = j;
+      continue;
+    }
+    // Operators and punctuation
+    const ch = line[i];
+    const isOp = '=<>!&|+-*/%^~?:'.includes(ch);
+    tokens.push({ text: ch, fg: isOp ? '#d4d4d4' : '' });
+    i++;
+  }
+
+  return tokens;
+}
+
+function tokenizePython(line: string): SyntaxToken[] {
+  const tokens: SyntaxToken[] = [];
+  let i = 0;
+
+  while (i < line.length) {
+    if (line[i] === '#') {
+      tokens.push({ text: line.slice(i), fg: '65', italic: true });
+      break;
+    }
+    if (line[i] === '"' || line[i] === "'") {
+      const q = line[i];
+      let j = i + 1;
+      while (j < line.length && line[j] !== q) { if (line[j] === '\\') j++; j++; }
+      tokens.push({ text: line.slice(i, j + 1), fg: '#ce9178' });
+      i = j + 1;
+      continue;
+    }
+    if (/[0-9]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && /[0-9._]/.test(line[j])) j++;
+      tokens.push({ text: line.slice(i, j), fg: '#b5cea8' });
+      i = j;
+      continue;
+    }
+    if (/[a-zA-Z_]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && /[\w]/.test(line[j])) j++;
+      const word = line.slice(i, j);
+      if (PYTHON_KEYWORDS.has(word)) {
+        tokens.push({ text: word, fg: '#569cd6', bold: true });
+      } else if (/^[A-Z]/.test(word)) {
+        tokens.push({ text: word, fg: '#4ec9b0' });
+      } else if (line[j] === '(') {
+        tokens.push({ text: word, fg: '#dcdcaa' });
+      } else {
+        tokens.push({ text: word, fg: '' });
+      }
+      i = j;
+      continue;
+    }
+    tokens.push({ text: line[i], fg: '' });
+    i++;
+  }
+  return tokens;
+}
+
+function tokenizeBash(line: string): SyntaxToken[] {
+  const tokens: SyntaxToken[] = [];
+  let i = 0;
+
+  while (i < line.length) {
+    if (line[i] === '#') {
+      tokens.push({ text: line.slice(i), fg: '65', italic: true });
+      break;
+    }
+    if (line[i] === '"' || line[i] === "'") {
+      const q = line[i];
+      let j = i + 1;
+      while (j < line.length && line[j] !== q) { if (line[j] === '\\') j++; j++; }
+      tokens.push({ text: line.slice(i, j + 1), fg: '#ce9178' });
+      i = j + 1;
+      continue;
+    }
+    if (line[i] === '$') {
+      let j = i + 1;
+      while (j < line.length && /[\w{}_]/.test(line[j])) j++;
+      tokens.push({ text: line.slice(i, j), fg: '#9cdcfe' });
+      i = j;
+      continue;
+    }
+    if (/[a-zA-Z_]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && /[\w-]/.test(line[j])) j++;
+      const word = line.slice(i, j);
+      if (BASH_KEYWORDS.has(word)) {
+        tokens.push({ text: word, fg: '#569cd6', bold: true });
+      } else {
+        tokens.push({ text: word, fg: '' });
+      }
+      i = j;
+      continue;
+    }
+    tokens.push({ text: line[i], fg: '' });
+    i++;
+  }
+  return tokens;
+}
+
+function tokenizeJson(line: string): SyntaxToken[] {
+  const tokens: SyntaxToken[] = [];
+  let i = 0;
+
+  while (i < line.length) {
+    if (line[i] === '"') {
+      let j = i + 1;
+      while (j < line.length && line[j] !== '"') { if (line[j] === '\\') j++; j++; }
+      const str = line.slice(i, j + 1);
+      // JSON key: followed by :
+      const rest = line.slice(j + 1).trimStart();
+      if (rest.startsWith(':')) {
+        tokens.push({ text: str, fg: '#9cdcfe' });
+      } else {
+        tokens.push({ text: str, fg: '#ce9178' });
+      }
+      i = j + 1;
+      continue;
+    }
+    if (/[0-9-]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && /[0-9.eE+-]/.test(line[j])) j++;
+      tokens.push({ text: line.slice(i, j), fg: '#b5cea8' });
+      i = j;
+      continue;
+    }
+    const boolNull = ['true', 'false', 'null'].find(k => line.startsWith(k, i));
+    if (boolNull) {
+      tokens.push({ text: boolNull, fg: '#569cd6', bold: true });
+      i += boolNull.length;
+      continue;
+    }
+    tokens.push({ text: line[i], fg: '244' });
+    i++;
+  }
+  return tokens;
+}
+
+function tokenizeYaml(line: string): SyntaxToken[] {
+  const tokens: SyntaxToken[] = [];
+  if (line.trimStart().startsWith('#')) {
+    return [{ text: line, fg: '65', italic: true }];
+  }
+  const keyMatch = line.match(/^(\s*)([^:]+)(:)(\s*.*)/);
+  if (keyMatch) {
+    if (keyMatch[1]) tokens.push({ text: keyMatch[1], fg: '' });
+    tokens.push({ text: keyMatch[2], fg: '#9cdcfe' });
+    tokens.push({ text: keyMatch[3], fg: '244' });
+    if (keyMatch[4]) {
+      const val = keyMatch[4];
+      const trimVal = val.trimStart();
+      // Differentiate YAML value types for syntax highlighting
+      const isStr = /^['"]/.test(trimVal);
+      const isBool = trimVal === 'true' || trimVal === 'false' || trimVal === 'null' || trimVal === 'yes' || trimVal === 'no';
+      const isNum = /^-?[0-9]/.test(trimVal);
+      const valFg = isStr ? '#ce9178' : isBool ? '#569cd6' : isNum ? '#b5cea8' : '';
+      tokens.push({ text: val, fg: valFg });
+    }
+    return tokens;
+  }
+  return [{ text: line, fg: '' }];
+}
+
+function tokenizePlain(line: string): SyntaxToken[] {
+  return [{ text: line, fg: '' }];
+}
+
+// ─── Main Renderer ───────────────────────────────────────────────────────────
+
+/**
+ * renderCodeBlock - Render lines of code with syntax highlighting and line numbers.
+ * Returns Line[] for the cell-based pipeline.
+ */
+export function renderCodeBlock(
+  codeLines: string[],
+  lang: string,
+  width: number,
+  opts: { showLineNumbers?: boolean } = {},
+): Line[] {
+  const lines: Line[] = [];
+  const language = detectLanguage(lang);
+  const leftMargin = LAYOUT.LEFT_MARGIN;
+  const showLineNumbers = opts.showLineNumbers ?? true;
+  const lineNumW = showLineNumbers ? String(codeLines.length).length + 1 : 0; // e.g. "10 "
+  const contentStartX = showLineNumbers ? leftMargin + lineNumW + 1 : leftMargin;
+  const BG = '#0d0d0d';
+  const LINE_NUM_FG = '238';
+  const effectiveWidth = width - LAYOUT.RIGHT_MARGIN;
+
+  // Try tree-sitter highlight cache first (populated asynchronously).
+  // Falls back to regex tokenizer when parser not yet ready or language unsupported.
+  const fullCode = codeLines.join('\n');
+  const hlLines = lang ? new SyntaxHighlighter().highlight(fullCode, lang) : null;
+
+  // Regex tokenizer fallback (used when tree-sitter not ready)
+  const regexTokenize = (line: string): SyntaxToken[] => {
+    switch (language) {
+      case 'ts': return tokenizeTsJs(line);
+      case 'python': return tokenizePython(line);
+      case 'bash': return tokenizeBash(line);
+      case 'json': return tokenizeJson(line);
+      case 'yaml': return tokenizeYaml(line);
+      default: return tokenizePlain(line);
+    }
+  };
+
+  // Header bar: language label
+  const langLabel = lang ? ` ${lang} ` : ' code ';
+  const headerLine = createEmptyLine(width);
+  const headerStr = langLabel.padEnd(effectiveWidth - leftMargin);
+  let hx = leftMargin;
+  for (const ch of headerStr) {
+    if (hx >= effectiveWidth) break;
+    headerLine[hx] = createStyledCell(ch, { fg: '#1a1a1a', bg: '#4ec9b0', bold: true });
+    hx++;
+  }
+  lines.push(headerLine);
+
+  // Code lines
+  for (let i = 0; i < codeLines.length; i++) {
+    const rawLine = codeLines[i];
+    const lineNum = String(i + 1).padStart(lineNumW);
+
+    // Select token source: tree-sitter (accurate) or regex (fallback)
+    const tokens: SyntaxToken[] =
+      hlLines && i < hlLines.length && hlLines[i].length > 0
+        ? (hlLines[i] as HLToken[])
+        : regexTokenize(rawLine);
+
+    const line: Cell[] = createEmptyLine(width);
+    // Paint only the code-block body band so body rows match the header/footer width.
+    for (let x = leftMargin; x < effectiveWidth; x++) {
+      line[x] = createStyledCell(' ', { bg: BG });
+    }
+
+    let cx = leftMargin;
+    if (showLineNumbers) {
+      for (const ch of lineNum) {
+        if (cx >= contentStartX) break;
+        line[cx++] = createStyledCell(ch, { fg: LINE_NUM_FG, bg: BG, dim: true });
+      }
+      line[cx++] = createStyledCell(' ', { bg: BG });
+    }
+
+    // Syntax tokens
+    for (const token of tokens) {
+      for (const ch of token.text) {
+        if (cx >= effectiveWidth) break;
+        const cw = getDisplayWidth(ch);
+        const code = ch.charCodeAt(0);
+        if (code < 32 || code === 127) {
+          cx++;
+          continue;
+        }
+        line[cx] = createStyledCell(ch, { fg: token.fg, bg: BG, bold: token.bold, italic: token.italic });
+        if (cw === 2 && cx + 1 < width) line[cx + 1] = { ...line[cx], char: '' };
+        cx += cw;
+      }
+    }
+
+    lines.push(line);
+  }
+
+  // Footer line
+  const footerLine = createEmptyLine(width);
+  for (let fx = leftMargin; fx < effectiveWidth; fx++) {
+    footerLine[fx] = createStyledCell(' ', { bg: '#0d0d0d' });
+  }
+  lines.push(footerLine);
+
+  return lines;
+}

package/src/renderer/compositor.ts

@@ -0,0 +1,261 @@
+import { TerminalBuffer } from './buffer.ts';
+import { DiffEngine } from './diff.ts';
+import { type Line, createStyledCell } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { getDisplayWidth } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import type { SearchManager } from '../input/search.ts';
+
+export interface SelectionInfo {
+  isCellSelected: (col: number, absoluteRow: number) => boolean;
+  scrollTop: number;
+  lineCount: number;
+}
+
+export interface SearchInfo {
+  manager: SearchManager;
+  scrollTop: number;
+  viewportStartY: number;
+}
+
+export interface PanelCompositeData {
+  /** Workspace-level tab bar spanning all open panels. */
+  workspaceBar: Line;
+  /** Top pane: tab bar */
+  topTabBar?: Line;
+  /** Top pane: panel content lines */
+  topContent: Line[];
+  /** Whether the top pane is focused (affects separator color) */
+  topFocused: boolean;
+  /** Bottom pane tab bar. Undefined = no bottom pane. */
+  bottomTabBar?: Line;
+  /** 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;
+  header: Line[];
+  viewport: Line[];
+  footer: Line[];
+  selection?: SelectionInfo;
+  search?: SearchInfo;
+  panel?: PanelCompositeData;
+  panelWidth?: number; // width of the right panel area (0 = no panel)
+}
+
+/**
+ * Compositor - Authoritative TUI layout engine with Selection Overlay.
+ * Decoupled from global state — all needed data is passed as parameters.
+ */
+export class Compositor {
+  private lastBuffer: TerminalBuffer | null = null;
+  private diffEngine = new DiffEngine();
+
+  constructor(private stdout: NodeJS.WriteStream) {}
+
+  /** Exposed for unit tests — returns the last composited buffer. */
+  public get lastBufferForTest(): TerminalBuffer | null {
+    return this.lastBuffer;
+  }
+
+  public resetDiff(): void {
+    this.diffEngine.reset();
+    this.lastBuffer = null;
+  }
+
+  public composite(params: CompositeRequest): void {
+    const { width, height, header, viewport, footer, selection, search, panel, panelWidth } = params;
+    const newBuffer = new TerminalBuffer(width, height);
+
+    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 (Rows 0-1) — always full width
+    header.forEach((line, i) => newBuffer.blitLine(i, line));
+
+    // 2. Draw Viewport (Starting at Row 2)
+    const viewportStartY = 2;
+    const vHeight = Math.max(0, height - header.length - footer.length);
+
+    // Calculate the offset for bottom-anchored short history
+    const lineCount = selection?.lineCount ?? 0;
+    const offset = Math.max(0, vHeight - lineCount);
+
+    // --- Pre-compute panel row layout when split pane is active ---
+    // When both top and bottom panes are visible, the panel area is split:
+    //   row 0:              workspace tab bar
+    //   row 1:              top tab bar
+    //   rows 2..topH+1:     top content
+    //   row topH+2:         horizontal separator (───)
+    //   row topH+3:         bottom tab bar
+    //   rows topH+4..end:   bottom content
+    const hasBottomPane = hasPanel && panel!.bottomTabBar !== undefined;
+    let topPaneHeight = 0;   // number of content rows in top pane
+    let bottomPaneHeight = 0;
+    let hSepRow = -1;        // viewport row of the horizontal separator
+    if (hasPanel && hasBottomPane) {
+      const panelAreaRows = Math.max(0, vHeight - 1); // subtract workspace tab bar
+      // top: 1 (tabbar) + topContent rows; bottom: 1 (sep) + 1 (tabbar) + bottomContent
+      const contentRows = Math.max(0, panelAreaRows - 3); // subtract top-tabbar + h-sep + bottom-tabbar
+      topPaneHeight = Math.max(1, Math.floor(contentRows * panel!.verticalSplitRatio));
+      bottomPaneHeight = Math.max(1, contentRows - topPaneHeight);
+      hSepRow = 2 + topPaneHeight; // workspace bar + top tab bar + top content rows
+    }
+
+    const sepFg = hasPanel && panel!.separator
+      ? (panel!.topFocused || panel!.bottomFocused ? '244' : '238')
+      : '238';
+
+    viewport.forEach((line, i) => {
+      const screenY = viewportStartY + i;
+      if (screenY >= height) return;
+
+      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)
+        if (p.separator) {
+          newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: sepFg }));
+        }
+
+        const panelStartX = sepX + 1;
+
+        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];
+          if (panelLine !== undefined) {
+            for (let x = 0; x < panelWidth; x++) {
+              const cell = panelLine[x];
+              if (cell !== undefined) {
+                newBuffer.setCell(panelStartX + x, screenY, cell);
+              }
+            }
+          }
+        } else {
+          // --- Two pane mode ---
+          // Row layout (by viewport row i):
+          //   i = 0:                      workspace tab bar
+          //   i = 1:                      top tab bar
+          //   2 <= i <= topPaneHeight+1:  top content[i-2]
+          //   i = hSepRow:                horizontal separator
+          //   i = hSepRow+1:              bottom tab bar
+          //   i >= hSepRow+2:             bottom content[i - (hSepRow+2)]
+          let panelLine: Line | undefined;
+
+          if (i === 0) {
+            panelLine = p.workspaceBar;
+          } else if (i === 1) {
+            panelLine = p.topTabBar;
+          } else if (i <= topPaneHeight + 1) {
+            panelLine = p.topContent[i - 2];
+          } else if (i === hSepRow) {
+            // Horizontal separator between the two panes
+            // Render ─ chars across the panel width
+            const focusFg = p.bottomFocused ? '36' : '238'; // cyan if bottom pane focused
+            for (let x = 0; x < panelWidth; x++) {
+              newBuffer.setCell(panelStartX + x, screenY, createStyledCell('─', { fg: focusFg }));
+            }
+            // Also update the separator column char to T-junction (├):
+            // ├ connects the vertical left-separator with the horizontal pane divider,
+            // forming a clean T-shaped joint at the split point.
+            if (p.separator) {
+              newBuffer.setCell(sepX, screenY, createStyledCell('├', { fg: focusFg }));
+            }
+          } else if (i === hSepRow + 1) {
+            panelLine = p.bottomTabBar;
+          } else {
+            panelLine = p.bottomContent?.[i - (hSepRow + 2)];
+          }
+
+          if (panelLine !== undefined) {
+            for (let x = 0; x < panelWidth; x++) {
+              const cell = panelLine[x];
+              if (cell !== undefined) {
+                newBuffer.setCell(panelStartX + x, screenY, cell);
+              }
+            }
+          }
+        }
+      }
+
+      // Apply Selection Highlighting Overlay (left side only)
+      // 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++) {
+          if (selection.isCellSelected(x, absoluteRow)) {
+            newBuffer.setCell(x, screenY, { bg: '4', fg: '0', bold: false, dim: false });
+          }
+        }
+      }
+
+      // Apply Search Match Highlighting Overlay (left side only)
+      if (search && search.manager.active && search.manager.query.length > 0 && i >= offset) {
+        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++) {
+            if (isCurrent) {
+              newBuffer.setCell(x, screenY, { bg: '#ffff00', fg: '#000000', bold: true, dim: false });
+            } else {
+              newBuffer.setCell(x, screenY, { bg: '#806600', fg: '#ffffff', bold: false, dim: false });
+            }
+          }
+        }
+      }
+    });
+
+    // Draw separator on remaining viewport rows past content (when panel is active)
+    if (hasPanel && panel!.separator) {
+      for (let i = viewport.length; i < vHeight; i++) {
+        const screenY = viewportStartY + i;
+        if (screenY >= height) break;
+        newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: sepFg }));
+      }
+    }
+
+    // 3. Draw Footer (Pinned to Bottom) — always full width
+    const footerStart = height - footer.length;
+    footer.forEach((line, i) => {
+      const screenY = footerStart + i;
+      if (screenY >= height) return;
+      newBuffer.blitLine(screenY, line);
+    });
+
+    // 4. Diff and Render
+    const diff = this.diffEngine.diff(this.lastBuffer, newBuffer);
+    if (diff) {
+      this.stdout.write(diff);
+    }
+
+    this.lastBuffer = newBuffer.clone();
+  }
+}