@pellux/goodvibes-tui 0.18.4

package/src/renderer/diff-view.ts

@@ -0,0 +1,132 @@
+import { type Line, type Cell, createStyledCell } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { UIFactory } from './ui-factory.ts';
+import { getDisplayWidth } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+
+/**
+ * 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,122 @@
+import { TerminalBuffer } from './buffer.ts';
+import { type Cell } from '@pellux/goodvibes-sdk/platform/types/grid';
+
+/**
+ * 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++) {
+      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 '@pellux/goodvibes-sdk/platform/types/grid';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+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 '@pellux/goodvibes-sdk/platform/types/grid';
+import { UIFactory } from './ui-factory.ts';
+import { getDisplayWidth } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+
+/** 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/git-status.ts

@@ -0,0 +1,89 @@
+import { GitService } from '../git/service.ts';
+import { logger } from '@pellux/goodvibes-sdk/platform/utils/logger';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils/error-display';
+
+/** Git state shown in the header bar. */
+export interface GitHeaderInfo {
+  branch: string;
+  dirty: boolean;
+  ahead: number;
+  behind: number;
+}
+
+const FALLBACK: GitHeaderInfo = { branch: '?', dirty: false, ahead: 0, behind: 0 };
+
+/**
+ * GitStatusProvider — Fetches git state for the header bar.
+ *
+ * Results are cached for 2 seconds (TTL). The next call after expiry triggers
+ * a fresh fetch and returns the cached value immediately (stale-while-revalidate).
+ * Never throws — returns FALLBACK on any error.
+ */
+export class GitStatusProvider {
+  private cache: GitHeaderInfo = { ...FALLBACK };
+  private lastFetch = 0;
+  private readonly ttlMs = 2000;
+  private fetching = false;
+
+  constructor(private readonly workingDirectory: string) {}
+
+  /** Returns cached info immediately; refreshes in background if TTL expired. */
+  async getStatus(): Promise<GitHeaderInfo> {
+    const now = Date.now();
+    if (now - this.lastFetch < this.ttlMs) {
+      return this.cache;
+    }
+    // Fetch synchronously on first call (no cache yet), otherwise return stale
+    if (this.lastFetch === 0) {
+      await this._fetch().catch(() => {
+        // Ensure fallback is set if _fetch failed before setting lastFetch
+        if (this.lastFetch === 0) {
+          this.lastFetch = Date.now();
+        }
+      });
+    } else if (!this.fetching) {
+      this._fetch().catch(err => { logger.debug('GitStatusProvider: background refresh failed', { error: summarizeError(err) }); });
+    }
+    return this.cache;
+  }
+
+  /** Force a fresh fetch and update the cache. Returns updated info. */
+  async refresh(): Promise<GitHeaderInfo> {
+    await this._fetch();
+    return this.cache;
+  }
+
+  private async _fetch(): Promise<void> {
+    if (this.fetching) return;
+    this.fetching = true;
+    try {
+      const git = new GitService(this.workingDirectory);
+      const [statusResult, branchResult] = await Promise.all([
+        git.status(),
+        git.branch(),
+      ]);
+      const dirty =
+        statusResult.modified.length > 0 ||
+        statusResult.created.length > 0 ||
+        statusResult.deleted.length > 0 ||
+        statusResult.renamed.length > 0 ||
+        statusResult.conflicted.length > 0 ||
+        statusResult.not_added.length > 0;
+      this.cache = {
+        branch: branchResult.current || '?',
+        dirty,
+        ahead: statusResult.ahead ?? 0,
+        behind: statusResult.behind ?? 0,
+      };
+      this.lastFetch = Date.now();
+    } catch {
+      // Never throw — return fallback
+      if (this.lastFetch === 0) {
+        this.cache = { ...FALLBACK };
+        this.lastFetch = Date.now();
+      }
+    } finally {
+      this.fetching = false;
+    }
+  }
+}