@pellux/goodvibes-agent 0.1.0

package/src/renderer/diff-view.ts

@@ -0,0 +1,132 @@
+import { type Line, type Cell, createStyledCell } from '../types/grid.ts';
+import { UIFactory } from './ui-factory.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
+
+/**
+ * renderDiffView - Render a unified diff string as styled Line[].
+ * '+' lines in green, '-' lines in red, '@@' hunks in cyan.
+ */
+export function renderDiffView(diffText: string, width: number, filename?: string): Line[] {
+  const lines: Line[] = [];
+  const BG = '#0a0a0a';
+
+  // Filename header
+  if (filename) {
+    const header = ` ≡ ${filename} `;
+    lines.push(UIFactory.stringToLine(header.padEnd(width), width, { fg: '#1a1a1a', bg: '#569cd6', bold: true }));
+  }
+
+  const diffLines = diffText.split('\n');
+  let oldLineNo = 0;
+  let newLineNo = 0;
+
+  for (const raw of diffLines) {
+    if (raw === '') {
+      const emptyLine = makeFilledLine(width, BG);
+      lines.push(emptyLine);
+      continue;
+    }
+
+    // Hunk header: @@ -old,count +new,count @@
+    if (raw.startsWith('@@')) {
+      const hunkMatch = raw.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+      if (hunkMatch) {
+        oldLineNo = parseInt(hunkMatch[1], 10) - 1;
+        newLineNo = parseInt(hunkMatch[2], 10) - 1;
+      }
+      lines.push(makeStyledLine(raw, width, '#00bcd4', '#0f1f1f', false));
+      continue;
+    }
+
+    // File headers: --- and +++
+    if (raw.startsWith('--- ') || raw.startsWith('+++ ')) {
+      lines.push(makeStyledLine(raw, width, '244', BG, false));
+      continue;
+    }
+
+    // Added line
+    if (raw.startsWith('+')) {
+      newLineNo++;
+      const lineLabel = `${String(newLineNo).padStart(4)} `;
+      const content = raw.slice(1);
+      lines.push(makeGutterLine('+', lineLabel, content, width, '#22c55e', '#0a1a0a'));
+      continue;
+    }
+
+    // Removed line
+    if (raw.startsWith('-')) {
+      oldLineNo++;
+      const lineLabel = `${String(oldLineNo).padStart(4)} `;
+      const content = raw.slice(1);
+      lines.push(makeGutterLine('-', lineLabel, content, width, '#ef4444', '#1a0a0a'));
+      continue;
+    }
+
+    // Context line
+    if (raw.startsWith(' ') || (!raw.startsWith('\\') && raw.length > 0)) {
+      oldLineNo++;
+      newLineNo++;
+      const lineLabel = `${String(oldLineNo).padStart(4)} `;
+      const content = raw.startsWith(' ') ? raw.slice(1) : raw;
+      lines.push(makeGutterLine(' ', lineLabel, content, width, '244', BG));
+    }
+  }
+
+  return lines;
+}
+
+/** Build a line with gutter indicator, line number, and content. */
+function makeGutterLine(
+  gutter: string,
+  lineLabel: string,
+  content: string,
+  width: number,
+  fg: string,
+  bg: string
+): Line {
+  const line = makeFilledLine(width, bg);
+  let cx = 0;
+
+  // Gutter char
+  line[cx++] = createStyledCell(gutter, { fg, bg, bold: gutter !== ' ' });
+
+  // Line number
+  for (const ch of lineLabel) {
+    if (cx >= width) break;
+    line[cx++] = createStyledCell(ch, { fg: '238', bg, dim: true });
+  }
+
+  // Content
+  for (const ch of content) {
+    if (cx >= width) break;
+    const cw = getDisplayWidth(ch);
+    const code = ch.charCodeAt(0);
+    if (code < 32) { cx++; continue; }
+    line[cx] = createStyledCell(ch, { fg, bg });
+    if (cw === 2 && cx + 1 < width) line[cx + 1] = { ...line[cx], char: '' };
+    cx += cw;
+  }
+
+  return line;
+}
+
+/** Build a simple styled line from text. */
+function makeStyledLine(text: string, width: number, fg: string, bg: string, bold: boolean): Line {
+  const line = makeFilledLine(width, bg);
+  let cx = 0;
+  for (const ch of text) {
+    if (cx >= width) break;
+    const cw = getDisplayWidth(ch);
+    const code = ch.charCodeAt(0);
+    if (code < 32) { cx++; continue; }
+    line[cx] = createStyledCell(ch, { fg, bg, bold });
+    if (cw === 2 && cx + 1 < width) line[cx + 1] = { ...line[cx], char: '' };
+    cx += cw;
+  }
+  return line;
+}
+
+/** Create a line filled with bg color. */
+function makeFilledLine(width: number, bg: string): Cell[] {
+  return Array.from({ length: width }, () => createStyledCell(' ', { bg }));
+}

package/src/renderer/diff.ts

@@ -0,0 +1,130 @@
+import { TerminalBuffer } from './buffer.ts';
+import { type Cell } from '../types/grid.ts';
+
+/**
+ * DiffEngine - Generates minimal ANSI updates between two buffers.
+ */
+export class DiffEngine {
+  private lastFg = '';
+  private lastBg = '';
+  private lastBold = false;
+  private lastDim = false;
+  private lastUnderline = false;
+  private lastItalic = false;
+  private lastStrikethrough = false;
+  private lastLink = '';
+
+  public reset(): void {
+    this.lastFg = '';
+    this.lastBg = '';
+    this.lastBold = false;
+    this.lastDim = false;
+    this.lastUnderline = false;
+    this.lastItalic = false;
+    this.lastStrikethrough = false;
+    this.lastLink = '';
+  }
+
+  public diff(oldBuffer: TerminalBuffer | null, newBuffer: TerminalBuffer): string {
+    let output = '';
+
+    for (let y = 0; y < newBuffer.height; y++) {
+      // Skip rows that were not written in either the old or new buffer.
+      // If neither side touched the row, both must match the prior frame:
+      // old row was never written this frame (clean) and new row is also
+      // clean, so the on-screen content is still correct. No diff needed.
+      const newDirty = newBuffer.dirtyRows[y] ?? false;
+      const oldDirty = oldBuffer ? (oldBuffer.dirtyRows[y] ?? false) : true;
+      if (!newDirty && !oldDirty) continue;
+
+      for (let x = 0; x < newBuffer.width; x++) {
+        const oldCell = oldBuffer?.getCell(x, y);
+        const newCell = newBuffer.cells[y]?.[x];
+        if (!newCell || newCell.char === '') continue;
+
+        if (this.isCellDifferent(oldCell, newCell)) {
+          output += `\x1b[${y + 1};${x + 1}H`;
+          output += this.applyStyles(newCell);
+          output += newCell.char;
+        }
+      }
+    }
+
+    // Close any open OSC 8 hyperlink at end of frame
+    if (this.lastLink) {
+      output += '\x1b]8;;\x1b\\';
+      this.lastLink = '';
+    }
+
+    return output;
+  }
+
+  private isCellDifferent(a: Cell | undefined, b: Cell): boolean {
+    if (!a) return true;
+    return a.char !== b.char || a.fg !== b.fg || a.bg !== b.bg || a.bold !== b.bold || a.dim !== b.dim ||
+      a.underline !== b.underline || a.italic !== b.italic || a.strikethrough !== b.strikethrough ||
+      (a.link ?? '') !== (b.link ?? '');
+  }
+
+  private sanitizeColor(color: string): string {
+    if (color.startsWith('#')) {
+      const r = parseInt(color.slice(1, 3), 16);
+      const g = parseInt(color.slice(3, 5), 16);
+      const b = parseInt(color.slice(5, 7), 16);
+      return `${r};${g};${b}`;
+    }
+    return color;
+  }
+
+  private applyStyles(cell: Cell): string {
+    let style = '';
+    const fg = this.sanitizeColor(cell.fg);
+    const bg = this.sanitizeColor(cell.bg);
+    const link = cell.link ?? '';
+
+    const changed = fg !== this.lastFg || bg !== this.lastBg ||
+      cell.bold !== this.lastBold || cell.dim !== this.lastDim ||
+      cell.underline !== this.lastUnderline || cell.italic !== this.lastItalic ||
+      cell.strikethrough !== this.lastStrikethrough;
+
+    if (changed) {
+      style += '\x1b[0m'; // Reset all attributes
+      if (cell.bold) style += '\x1b[1m';
+      if (cell.dim) style += '\x1b[2m';
+      if (cell.italic) style += '\x1b[3m';
+      if (cell.underline) style += '\x1b[4m';
+      if (cell.strikethrough) style += '\x1b[9m';
+
+      if (fg) {
+        const isRgb = fg.includes(';');
+        style += isRgb ? `\x1b[38;2;${fg}m` : `\x1b[38;5;${fg}m`;
+      }
+      if (bg) {
+        const isRgb = bg.includes(';');
+        style += isRgb ? `\x1b[48;2;${bg}m` : `\x1b[48;5;${bg}m`;
+      }
+
+      this.lastFg = fg;
+      this.lastBg = bg;
+      this.lastBold = cell.bold;
+      this.lastDim = cell.dim;
+      this.lastUnderline = cell.underline;
+      this.lastItalic = cell.italic;
+      this.lastStrikethrough = cell.strikethrough;
+    }
+
+    // OSC 8 hyperlink: emit open/close/change sequences only when link changes
+    if (link !== this.lastLink) {
+      if (link) {
+        // Open new hyperlink (close previous if any was open)
+        style += `\x1b]8;;${link}\x1b\\`;
+      } else {
+        // Close hyperlink
+        style += `\x1b]8;;\x1b\\`;
+      }
+      this.lastLink = link;
+    }
+
+    return style;
+  }
+}

package/src/renderer/file-picker-overlay.ts

@@ -0,0 +1,101 @@
+import { type Line } from '../types/grid.ts';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
+import type { FilePickerModal } from '../input/file-picker.ts';
+import {
+  createOverlayBoxLayout,
+  createOverlayContentLine,
+  createOverlayFilledBorderLine,
+  DEFAULT_OVERLAY_PALETTE,
+  OVERLAY_GLYPHS,
+  putOverlayText,
+} from './overlay-box.ts';
+import { getOverlaySurfaceMetrics } from './overlay-viewport.ts';
+
+/**
+ * Render the file picker modal as Line[] for overlay in the viewport.
+ * Shows a bordered box with fuzzy-matched file results.
+ */
+export function renderFilePickerOverlay(
+  picker: FilePickerModal,
+  width: number,
+  viewportHeight = 24,
+): Line[] {
+  const lines: Line[] = [];
+  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
+    chromeRows: 4,
+    maxWidth: 70,
+    minContentRows: 6,
+    maxContentRows: 10,
+  });
+  const layout = createOverlayBoxLayout(width, metrics.margin, metrics.boxWidth);
+  const contentW = layout.innerWidth;
+  const borderFg = DEFAULT_OVERLAY_PALETTE.borderFg;
+  const titleFg = DEFAULT_OVERLAY_PALETTE.titleFg;
+  const bodyFg = DEFAULT_OVERLAY_PALETTE.bodyFg;
+  const mutedFg = DEFAULT_OVERLAY_PALETTE.mutedFg;
+  const selectedBg = DEFAULT_OVERLAY_PALETTE.selectedBg;
+
+  // Title bar
+  const titleLine = createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.topLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.topRight, borderFg, DEFAULT_OVERLAY_PALETTE.titleBg);
+  putOverlayText(titleLine, layout.margin + 2, layout.width - 4, 'Select File', { fg: titleFg, bold: true });
+  lines.push(titleLine);
+
+  // Search input
+  const queryDisplay = picker.query || '';
+  const searchLine = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.inputBg);
+  const searchPrefix = '@ ';
+  const queryText = fitDisplay(`${queryDisplay}${picker.searchFocused ? OVERLAY_GLYPHS.cursor : ''}`, Math.max(0, contentW - getDisplayWidth(searchPrefix)));
+  putOverlayText(searchLine, layout.margin + 2, getDisplayWidth(searchPrefix), searchPrefix, { fg: picker.searchFocused ? bodyFg : mutedFg });
+  putOverlayText(searchLine, layout.margin + 2 + getDisplayWidth(searchPrefix), contentW - getDisplayWidth(searchPrefix), queryText, { fg: picker.query.length > 0 || picker.searchFocused ? bodyFg : mutedFg });
+  lines.push(searchLine);
+
+  // Separator
+  lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.teeLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.teeRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg));
+
+  // Results
+  if (picker.results.length === 0) {
+      const noResults = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
+    putOverlayText(noResults, layout.margin + 2, contentW, fitDisplay('No matching files', contentW), { fg: '244', dim: true });
+    lines.push(noResults);
+  } else {
+    const maxVisible = metrics.contentRows;
+    let startIdx = 0;
+    if (picker.results.length > maxVisible) {
+      startIdx = Math.max(0, Math.min(
+        picker.selectedIndex - Math.floor(maxVisible / 2),
+        picker.results.length - maxVisible,
+      ));
+    }
+    const endIdx = Math.min(startIdx + maxVisible, picker.results.length);
+
+    for (let i = startIdx; i < endIdx; i++) {
+      const file = picker.results[i];
+      const isSelected = i === picker.selectedIndex;
+      const indicator = isSelected ? `${OVERLAY_GLYPHS.selected} ` : '  ';
+      const displayFile = getDisplayWidth(file) > contentW - 2
+        ? truncateDisplay(file, contentW - 2)
+        : file;
+      const line = createOverlayContentLine(width, layout, borderFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg);
+      putOverlayText(
+        line,
+        layout.margin + 2,
+        contentW,
+        fitDisplay(indicator + fitDisplay(displayFile, contentW - 2), contentW),
+        {
+          fg: isSelected ? titleFg : file.endsWith('/') ? titleFg : bodyFg,
+          bg: isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg,
+          bold: isSelected,
+        },
+      );
+      lines.push(line);
+    }
+  }
+
+  // Bottom border with hints
+  const hints = '[Up/Down] Navigate  [/] Search  [Enter] Select  [Esc] Cancel';
+  const bottomLine = createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.bottomLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.bottomRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg);
+  putOverlayText(bottomLine, layout.margin + 2, layout.width - 4, truncateDisplay(hints, layout.width - 4), { fg: mutedFg, dim: true });
+  lines.push(bottomLine);
+
+  return lines;
+}

package/src/renderer/file-tree.ts

@@ -0,0 +1,153 @@
+import { type Line, createStyledCell } from '../types/grid.ts';
+import { UIFactory } from './ui-factory.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
+
+/** Color by file extension category. */
+function getFileColor(name: string): string {
+  if (name.endsWith('/')) return '#00ffff'; // directory
+  const ext = name.split('.').pop()?.toLowerCase() ?? '';
+  if (['ts', 'tsx', 'js', 'jsx', 'mjs'].includes(ext)) return '#dcdcaa';
+  if (['json', 'yaml', 'yml', 'toml'].includes(ext)) return '#ce9178';
+  if (['md', 'txt', 'rst'].includes(ext)) return '252';
+  if (['sh', 'bash', 'zsh'].includes(ext)) return '#22c55e';
+  if (['css', 'scss', 'less'].includes(ext)) return '#569cd6';
+  if (['html', 'htm', 'xml', 'svg'].includes(ext)) return '#f97316';
+  if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'ico'].includes(ext)) return '#a855f7';
+  if (['lock', 'env', 'gitignore'].includes(name)) return '238';
+  return '252';
+}
+
+export interface FileTreeEntry {
+  name: string;
+  isDir: boolean;
+  size?: number;
+  depth: number;
+  isLast: boolean;
+  isLastAtDepth: boolean[]; // tracks if each ancestor was last child
+}
+
+/**
+ * renderFileTree - Render a directory listing as a tree with colored file types.
+ * Returns Line[] for the cell-based pipeline.
+ */
+export function renderFileTree(
+  entries: FileTreeEntry[],
+  width: number,
+  title?: string
+): Line[] {
+  const lines: Line[] = [];
+
+  // Optional header
+  if (title) {
+    lines.push(UIFactory.stringToLine(` [dir] ${title}`, width, { fg: '#00ffff', bold: true }));
+    lines.push(UIFactory.stringToLine(' ' + '-'.repeat(width - 2), width, { fg: '240' }));
+  }
+
+  for (const entry of entries) {
+    const { name, isDir, size, depth, isLast, isLastAtDepth } = entry;
+
+    // Build tree prefix
+    let prefix = '';
+    for (let d = 0; d < depth; d++) {
+      if (d < depth - 1) {
+        prefix += isLastAtDepth[d] ? '   ' : '|  ';
+      }
+    }
+    if (depth > 0) {
+      prefix += isLast ? '`-- ' : '|-- ';
+    } else {
+      prefix += '';
+    }
+
+    const displayName = isDir ? name + '/' : name;
+    const fg = getFileColor(isDir ? displayName : name);
+
+    // Size info (dimmed)
+    let sizeStr = '';
+    if (size !== undefined && !isDir) {
+      if (size < 1024) sizeStr = ` ${size}B`;
+      else if (size < 1024 * 1024) sizeStr = ` ${(size / 1024).toFixed(1)}K`;
+      else sizeStr = ` ${(size / (1024 * 1024)).toFixed(1)}M`;
+    }
+
+    const fullText = prefix + displayName;
+    const sizeW = getDisplayWidth(sizeStr);
+    const nameW = getDisplayWidth(fullText);
+    const maxNameW = width - sizeW - 1;
+
+    const truncated = nameW > maxNameW ? fullText.slice(0, Math.max(0, maxNameW - 3)) + '...' : fullText;
+
+    // Compose: name + padding + size
+    const paddingW = Math.max(0, width - getDisplayWidth(truncated) - sizeW);
+    const fullLine = truncated + ' '.repeat(paddingW);
+
+    // Build the line with per-character styles
+    const line = UIFactory.stringToLine(fullLine, width, { fg });
+
+    // Dim the size info
+    if (sizeStr && sizeW > 0) {
+      const sizeStartX = width - sizeW;
+      let cx = sizeStartX;
+      for (const ch of sizeStr) {
+        if (cx >= width) break;
+        const cw = getDisplayWidth(ch);
+        line[cx] = createStyledCell(ch, { fg: '240', dim: true });
+        if (cw === 2 && cx + 1 < width) line[cx + 1] = { ...line[cx], char: '' };
+        cx += cw;
+      }
+    }
+
+    lines.push(line);
+  }
+
+  return lines;
+}
+
+/**
+ * parseListDirOutput - Convert a simple list directory output string to FileTreeEntry[].
+ * Expects one path per line, relative paths with '/' for directories.
+ */
+export function parseListDirOutput(output: string, rootDir: string): FileTreeEntry[] {
+  const rawLines = output.trim().split('\n').filter(Boolean);
+  const entries: FileTreeEntry[] = [];
+
+  for (const line of rawLines) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    const isDir = trimmed.endsWith('/');
+    const name = isDir ? trimmed.slice(0, -1).split('/').pop() + '/' : trimmed.split('/').pop() ?? trimmed;
+    const depth = (trimmed.match(/\//g) ?? []).length - (isDir ? 1 : 0);
+
+    entries.push({
+      name: name || trimmed,
+      isDir,
+      depth: Math.max(0, depth),
+      isLast: false,
+      isLastAtDepth: [],
+    });
+  }
+
+  // Mark isLast for each entry (last sibling at same depth under same parent)
+  for (let i = 0; i < entries.length; i++) {
+    const nextSameOrLower = entries.slice(i + 1).findIndex(
+      e => e.depth <= entries[i].depth
+    );
+    entries[i].isLast = nextSameOrLower === 0 || nextSameOrLower === -1;
+
+    // Build isLastAtDepth[d] = true if the ancestor at depth d was the last child
+    // of its parent. This governs whether to draw '|  ' or '   ' vertical bars.
+    const isLastAtDepth: boolean[] = new Array(entries[i].depth).fill(false);
+    for (let d = 0; d < entries[i].depth; d++) {
+      // Walk backwards to find the most recent ancestor at depth d
+      for (let j = i - 1; j >= 0; j--) {
+        if (entries[j].depth === d) {
+          isLastAtDepth[d] = entries[j].isLast;
+          break;
+        }
+      }
+    }
+    entries[i].isLastAtDepth = isLastAtDepth;
+  }
+
+  return entries;
+}

package/src/renderer/fullscreen-primitives.ts

@@ -0,0 +1,130 @@
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine, createStyledCell } from '../types/grid.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
+import { GLYPHS, UI_TONES } from './ui-primitives.ts';
+
+export const FULLSCREEN_PALETTE = {
+  border: '#64748b',
+  title: '#67e8f9',
+  subtitle: '#93c5fd',
+  text: '#e2e8f0',
+  muted: '#94a3b8',
+  dim: '#64748b',
+  selectedBg: '#223049',
+  categoryBg: '#141b25',
+  contextBg: '#121923',
+  controlsBg: '#0f141d',
+  footerBg: '#111827',
+  good: UI_TONES.state.good,
+  warn: UI_TONES.state.warn,
+  bad: UI_TONES.state.bad,
+  info: UI_TONES.state.info,
+} as const;
+
+export type FullscreenTextStyle = Partial<Omit<Line[number], 'char'>>;
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function fillRange(line: Line, startX: number, endX: number, bg: string): void {
+  for (let x = Math.max(0, startX); x <= Math.min(line.length - 1, endX); x += 1) {
+    const cell = line[x] ?? createStyledCell(' ');
+    line[x] = createStyledCell(cell.char, {
+      fg: cell.fg,
+      bg,
+      bold: cell.bold,
+      dim: cell.dim,
+      underline: cell.underline,
+      italic: cell.italic,
+      strikethrough: cell.strikethrough,
+      link: cell.link,
+    });
+  }
+}
+
+export function fillWidth(line: Line, startX: number, width: number, bg: string): void {
+  if (width <= 0) return;
+  fillRange(line, startX, startX + width - 1, bg);
+}
+
+export function writeText(
+  line: Line,
+  startX: number,
+  maxWidth: number,
+  text: string,
+  style: FullscreenTextStyle = {},
+): void {
+  let x = startX;
+  let used = 0;
+  for (const ch of text) {
+    const width = getDisplayWidth(ch);
+    if (width <= 0) continue;
+    if (used + width > maxWidth || x >= line.length) break;
+    line[x] = createStyledCell(ch, style);
+    if (width > 1 && x + 1 < line.length) line[x + 1] = createStyledCell(' ', style);
+    x += width;
+    used += width;
+  }
+}
+
+export function makeLine(width: number, bg = ''): Line {
+  const line = createEmptyLine(width);
+  if (bg) fillRange(line, 0, width - 1, bg);
+  return line;
+}
+
+export function borderLine(width: number, left: string, fill: string, right: string, fg: string = FULLSCREEN_PALETTE.border): Line {
+  const line = makeLine(width);
+  if (width <= 0) return line;
+  line[0] = createStyledCell(left, { fg });
+  for (let x = 1; x < width - 1; x += 1) line[x] = createStyledCell(fill, { fg });
+  if (width > 1) line[width - 1] = createStyledCell(right, { fg });
+  return line;
+}
+
+export function contentLine(width: number, bg: string, borderFg: string = FULLSCREEN_PALETTE.border): Line {
+  const line = makeLine(width, bg);
+  if (width > 0) line[0] = createStyledCell(GLYPHS.frame.vertical, { fg: borderFg });
+  if (width > 1) line[width - 1] = createStyledCell(GLYPHS.frame.vertical, { fg: borderFg });
+  return line;
+}
+
+export function drawVerticalRule(line: Line, x: number, fg: string = FULLSCREEN_PALETTE.border, bg = ''): void {
+  if (x < 0 || x >= line.length) return;
+  line[x] = createStyledCell(GLYPHS.frame.vertical, { fg, bg });
+}
+
+export function drawHorizontalRule(line: Line, startX: number, endX: number, fg: string = FULLSCREEN_PALETTE.border, bg = ''): void {
+  for (let x = Math.max(0, startX); x <= Math.min(line.length - 1, endX); x += 1) {
+    line[x] = createStyledCell(GLYPHS.frame.horizontal, { fg, bg });
+  }
+}
+
+export function clipDisplay(text: string, width: number): string {
+  if (width <= 0) return '';
+  let used = 0;
+  let output = '';
+  for (const ch of text) {
+    const chWidth = getDisplayWidth(ch);
+    if (chWidth <= 0) continue;
+    if (used + chWidth > width) break;
+    output += ch;
+    used += chWidth;
+  }
+  return output;
+}
+
+export function padDisplay(text: string, width: number): string {
+  const clipped = clipDisplay(text, width);
+  return `${clipped}${' '.repeat(Math.max(0, width - getDisplayWidth(clipped)))}`;
+}
+
+export function stableWindow(total: number, selectedIndex: number, visibleCount: number): { start: number; end: number } {
+  if (total <= 0 || visibleCount <= 0) return { start: 0, end: 0 };
+  if (total <= visibleCount) return { start: 0, end: total };
+  const selected = clamp(selectedIndex, 0, total - 1);
+  const half = Math.floor(visibleCount / 2);
+  const start = clamp(selected - half, 0, total - visibleCount);
+  return { start, end: start + visibleCount };
+}