@pellux/goodvibes-tui 0.18.4

package/src/renderer/selection-modal-overlay.ts

@@ -0,0 +1,214 @@
+import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import type { SelectionModal } from '../input/selection-modal.ts';
+import {
+  createOverlayBoxLayout,
+  createOverlayContentLine,
+  createOverlayFilledBorderLine,
+  DEFAULT_OVERLAY_PALETTE,
+  OVERLAY_GLYPHS,
+  putOverlayText,
+} from './overlay-box.ts';
+import { getOverlaySurfaceMetrics } from './overlay-viewport.ts';
+import { fitLabelDetailColumns, wrapWithHangingIndent } from './text-layout.ts';
+
+const BORDER_FG = DEFAULT_OVERLAY_PALETTE.borderFg;
+const TITLE_FG = DEFAULT_OVERLAY_PALETTE.titleFg;
+const BODY_FG = DEFAULT_OVERLAY_PALETTE.bodyFg;
+const MUTED_FG = DEFAULT_OVERLAY_PALETTE.mutedFg;
+const CATEGORY_FG = '#4488cc';
+const SELECTED_BG = DEFAULT_OVERLAY_PALETTE.selectedBg;
+
+interface CellStyle {
+  fg: string;
+  bg?: string;
+  bold?: boolean;
+  dim?: boolean;
+}
+
+function putText(line: Line, startX: number, maxWidth: number, text: string, style: CellStyle): void {
+  putOverlayText(line, startX, maxWidth, text, style);
+}
+
+/**
+ * Render the selection modal as Line[] for overlay in the viewport.
+ */
+export function renderSelectionModalOverlay(
+  modal: SelectionModal,
+  width: number,
+  viewportHeight = 24,
+): Line[] {
+  const lines: Line[] = [];
+  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
+    margin: 4,
+    maxWidth: 72,
+    chromeRows: modal.allowSearch ? 5 : 4,
+    minContentRows: 6,
+    maxContentRows: 10,
+  });
+  const layout = createOverlayBoxLayout(width, metrics.margin, metrics.boxWidth);
+
+  lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.topLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.topRight, BORDER_FG, DEFAULT_OVERLAY_PALETTE.titleBg));
+
+  const titleLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.titleBg);
+  putText(
+    titleLine,
+    layout.margin + 2,
+    layout.innerWidth,
+    fitDisplay(truncateDisplay(modal.title, layout.innerWidth), layout.innerWidth),
+    { fg: TITLE_FG, bold: true },
+  );
+  lines.push(titleLine);
+
+  if (modal.allowSearch) {
+    const labelLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+    putText(labelLine, layout.margin + 2, layout.innerWidth, fitDisplay(' Search', layout.innerWidth), {
+      fg: CATEGORY_FG,
+      dim: true,
+    });
+    lines.push(labelLine);
+    const searchLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.inputBg);
+    const prefix = '/ ';
+    const queryAreaWidth = layout.innerWidth - getDisplayWidth(prefix);
+    const queryValue = modal.query + (modal.searchFocused ? OVERLAY_GLYPHS.cursor : '');
+    const queryText = fitDisplay(
+      truncateDisplay(queryValue, queryAreaWidth),
+      queryAreaWidth,
+    );
+    putText(searchLine, layout.margin + 2, getDisplayWidth(prefix), prefix, { fg: modal.searchFocused ? BODY_FG : MUTED_FG });
+    putText(searchLine, layout.margin + 2 + getDisplayWidth(prefix), queryAreaWidth, queryText, {
+      fg: modal.query.length > 0 || modal.searchFocused ? BODY_FG : MUTED_FG,
+    });
+    lines.push(searchLine);
+    lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.teeLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.teeRight, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg));
+  } else {
+    lines.push(createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg));
+  }
+
+  const listTitle = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+  putText(listTitle, layout.margin + 2, layout.innerWidth, fitDisplay(' Results', layout.innerWidth), {
+    fg: CATEGORY_FG,
+    dim: true,
+  });
+  lines.push(listTitle);
+
+  const items = modal.filteredItems;
+  if (items.length === 0) {
+    const line = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.bodyBg);
+    const message = modal.query ? 'No matching items' : 'No items';
+    putText(line, layout.margin + 2, layout.innerWidth, fitDisplay(message, layout.innerWidth), { fg: MUTED_FG, dim: true });
+    lines.push(line);
+  } else {
+    const maxVisible = metrics.contentRows;
+    let startIdx = 0;
+    if (items.length > maxVisible) {
+      startIdx = Math.max(0, Math.min(
+        modal.selectedIndex - Math.floor(maxVisible / 2),
+        items.length - maxVisible,
+      ));
+    }
+    const endIdx = Math.min(startIdx + maxVisible, items.length);
+    let lastCategory: string | undefined;
+
+    for (let i = startIdx; i < endIdx; i++) {
+      const item = items[i];
+      const isSelected = i === modal.selectedIndex;
+
+      if (item.category && item.category !== lastCategory) {
+        lastCategory = item.category;
+        const categoryLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+        putText(categoryLine, layout.margin + 2, layout.innerWidth, fitDisplay(`  ${item.category}`, layout.innerWidth), {
+          fg: CATEGORY_FG,
+          dim: true,
+        });
+        lines.push(categoryLine);
+      }
+
+      const indicator = isSelected ? `${OVERLAY_GLYPHS.selected} ` : '  ';
+      const indicatorWidth = 2;
+      const remaining = layout.innerWidth - indicatorWidth;
+      const labelColor = isSelected ? TITLE_FG : (item.fg ?? BODY_FG);
+      const detailColor = isSelected ? BODY_FG : MUTED_FG;
+      const labelWidth = item.detail
+        ? fitLabelDetailColumns(item.label, item.detail, remaining).labelWidth
+        : remaining;
+      const labelLine = createOverlayContentLine(width, layout, BORDER_FG, isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg);
+        putText(labelLine, layout.margin + 2, indicatorWidth, indicator, {
+          fg: isSelected ? TITLE_FG : MUTED_FG,
+          bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+          bold: isSelected,
+        });
+      putText(labelLine, layout.margin + 2 + indicatorWidth, labelWidth, fitDisplay(truncateDisplay(item.label, labelWidth), labelWidth), {
+        fg: labelColor,
+        bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+        bold: isSelected,
+      });
+      if (item.detail) {
+          const detailWidth = fitLabelDetailColumns(item.label, item.detail, remaining).detailWidth;
+        if (detailWidth >= 12) {
+          putText(labelLine, layout.margin + 2 + indicatorWidth + labelWidth, 2, '  ', {
+            fg: BODY_FG,
+            bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+          });
+          putText(labelLine, layout.margin + 2 + indicatorWidth + labelWidth + 2, detailWidth, fitDisplay(truncateDisplay(item.detail, detailWidth), detailWidth), {
+            fg: detailColor,
+            bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+          });
+          lines.push(labelLine);
+        } else {
+          lines.push(labelLine);
+          const wrappedDetails = wrapWithHangingIndent(item.detail, Math.max(8, remaining), '', 2);
+          for (const detailLineText of wrappedDetails) {
+            const detailLine = createOverlayContentLine(width, layout, BORDER_FG, isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg);
+            putText(detailLine, layout.margin + 2 + indicatorWidth, remaining, fitDisplay(truncateDisplay(detailLineText, remaining), remaining), {
+              fg: detailColor,
+              bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+              dim: !isSelected,
+            });
+            lines.push(detailLine);
+          }
+        }
+      } else {
+        lines.push(labelLine);
+      }
+    }
+
+    if (items.length > maxVisible) {
+      const above = startIdx;
+      const below = items.length - endIdx;
+      const scrollHint = above > 0 && below > 0
+        ? `(${above} above, ${below} below)`
+        : below > 0
+        ? `(${below} below)`
+        : `(${above} above)`;
+      const hintLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+      putText(hintLine, layout.margin + 2, layout.innerWidth, fitDisplay(scrollHint, layout.innerWidth), { fg: MUTED_FG, dim: true });
+      lines.push(hintLine);
+    }
+  }
+
+  const footerLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+  const selectedItem = modal.getSelected();
+  const primaryVerb = selectedItem?.primaryAction === 'toggle'
+    ? '[Enter] Toggle'
+    : selectedItem?.primaryAction === 'edit'
+    ? '[Enter] Edit'
+    : selectedItem?.primaryAction === 'delete'
+    ? '[Enter] Delete'
+    : '[Enter] Select';
+  let hints = `[Up/Down] Navigate  ${primaryVerb}  [Esc] Close`;
+  if (modal.allowSearch) hints += '  [/] Search';
+  if (selectedItem?.primaryAction === 'toggle' && !selectedItem.actions) hints += '  [Space] Toggle';
+  if (selectedItem?.actions) hints += `  ${selectedItem.actions}`;
+  putText(
+    footerLine,
+    layout.margin + 2,
+    layout.innerWidth,
+    fitDisplay(truncateDisplay(hints, layout.innerWidth), layout.innerWidth),
+    { fg: MUTED_FG, dim: true },
+  );
+  lines.push(footerLine);
+  lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.bottomLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.bottomRight, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg));
+
+  return lines;
+}

package/src/renderer/semantic-diff.ts

@@ -0,0 +1,369 @@
+/**
+ * semantic-diff.ts — Functional change summary after file edits.
+ *
+ * Compares AST before/after an edit and extracts:
+ *   - Added / removed / modified functions, methods, classes, etc.
+ *   - Changed import specifiers
+ *   - New / removed exports
+ *
+ * Returns a compact SemanticDiff that can be rendered alongside a regular diff.
+ * Gracefully returns null when tree-sitter is unavailable or the language is
+ * unsupported — callers should treat null as "no semantic info available".
+ */
+
+import { TreeSitterService } from '@pellux/goodvibes-sdk/platform/intelligence/tree-sitter/service';
+import { extractSymbols } from '@pellux/goodvibes-sdk/platform/intelligence/tree-sitter/queries';
+import type { SymbolInfo } from '@pellux/goodvibes-sdk/platform/intelligence/tree-sitter/queries';
+import { detectLanguage } from '@pellux/goodvibes-sdk/platform/intelligence/tree-sitter/languages';
+import { logger } from '@pellux/goodvibes-sdk/platform/utils/logger';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils/error-display';
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+export type ChangeKind = 'added' | 'removed' | 'modified';
+
+export interface SymbolChange {
+  kind: ChangeKind;
+  symbolKind: SymbolInfo['kind'];
+  name: string;
+  /** Present for 'modified' — the old signature. */
+  oldSignature?: string;
+  /** Present for 'added' or 'modified' — the new signature. */
+  newSignature?: string;
+}
+
+export interface ImportChange {
+  kind: ChangeKind;
+  specifier: string; // the module path, e.g. './utils'
+  /** Specific named imports that changed, if determinable. */
+  names?: string[];
+}
+
+export interface SemanticDiff {
+  symbols: SymbolChange[];
+  imports: ImportChange[];
+  /** Convenience: total number of changes across all categories. */
+  totalChanges: number;
+}
+
+// ---------------------------------------------------------------------------
+// Import extraction (regex-based — fast, no grammar needed)
+// ---------------------------------------------------------------------------
+
+interface ParsedImport {
+  specifier: string;
+  names: string[];
+}
+
+/**
+ * Extract import specifiers and named imports from source text using a regex
+ * scan. Covers `import ... from '...'` and `import('...')` dynamic imports.
+ * Does not require tree-sitter.
+ */
+function extractImports(source: string): Map<string, ParsedImport> {
+  const map = new Map<string, ParsedImport>();
+
+  // Static imports: import { A, B } from './foo'
+  //                 import Foo from './foo'
+  //                 import * as Foo from './foo'
+  //                 import './side-effect'
+  const staticRe = /import\s+(?:([\s\S]*?)\s+from\s+)?['"]([^'"]+)['"]/g;
+  let m: RegExpExecArray | null;
+
+  while ((m = staticRe.exec(source)) !== null) {
+    const clause = (m[1] ?? '').trim();
+    const specifier = m[2]!;
+    const names = parseNamedImports(clause);
+    const existing = map.get(specifier);
+    if (existing) {
+      for (const n of names) existing.names.push(n);
+    } else {
+      map.set(specifier, { specifier, names });
+    }
+  }
+
+  return map;
+}
+
+/** Parse `{ A, B as C }` or `* as Ns` or `Default` clauses into name strings. */
+function parseNamedImports(clause: string): string[] {
+  if (!clause) return [];
+  // Namespace import: * as Foo
+  if (clause.startsWith('*')) return [clause];
+  // Named imports: { A, B as C }
+  const braceMatch = clause.match(/\{([^}]*)\}/);
+  if (braceMatch) {
+    return braceMatch[1]!
+      .split(',')
+      .map(s => s.trim())
+      .filter(Boolean);
+  }
+  // Default import: Foo
+  return clause ? [clause] : [];
+}
+
+// ---------------------------------------------------------------------------
+// Symbol comparison
+// ---------------------------------------------------------------------------
+
+function diffSymbols(
+  before: SymbolInfo[],
+  after: SymbolInfo[],
+): SymbolChange[] {
+  const changes: SymbolChange[] = [];
+
+  // Key by qualified name (container.name or name)
+  const key = (s: SymbolInfo): string =>
+    s.container ? `${s.container}.${s.name}` : s.name;
+
+  const beforeMap = new Map<string, SymbolInfo>();
+  const afterMap = new Map<string, SymbolInfo>();
+
+  for (const s of before) beforeMap.set(key(s), s);
+  for (const s of after) afterMap.set(key(s), s);
+
+  // Removed or modified
+  for (const [k, bSym] of beforeMap) {
+    const aSym = afterMap.get(k);
+    if (!aSym) {
+      changes.push({
+        kind: 'removed',
+        symbolKind: bSym.kind,
+        name: k,
+        oldSignature: bSym.signature,
+      });
+    } else if (
+      bSym.signature !== aSym.signature ||
+      bSym.exported !== aSym.exported
+    ) {
+      changes.push({
+        kind: 'modified',
+        symbolKind: aSym.kind,
+        name: k,
+        oldSignature: bSym.signature,
+        newSignature: aSym.signature,
+      });
+    }
+  }
+
+  // Added
+  for (const [k, aSym] of afterMap) {
+    if (!beforeMap.has(k)) {
+      changes.push({
+        kind: 'added',
+        symbolKind: aSym.kind,
+        name: k,
+        newSignature: aSym.signature,
+      });
+    }
+  }
+
+  return changes;
+}
+
+// ---------------------------------------------------------------------------
+// Import comparison
+// ---------------------------------------------------------------------------
+
+function diffImports(
+  before: Map<string, ParsedImport>,
+  after: Map<string, ParsedImport>,
+): ImportChange[] {
+  const changes: ImportChange[] = [];
+
+  // Removed or modified
+  for (const [spec, bImp] of before) {
+    const aImp = after.get(spec);
+    if (!aImp) {
+      changes.push({ kind: 'removed', specifier: spec, names: bImp.names });
+    } else {
+      // Check if named imports changed
+      const bSet = new Set(bImp.names);
+      const aSet = new Set(aImp.names);
+      const added = aImp.names.filter(n => !bSet.has(n));
+      const removed = bImp.names.filter(n => !aSet.has(n));
+      if (added.length > 0 || removed.length > 0) {
+        const names: string[] = [
+          ...added.map(n => `+${n}`),
+          ...removed.map(n => `-${n}`),
+        ];
+        changes.push({ kind: 'modified', specifier: spec, names });
+      }
+    }
+  }
+
+  // Added
+  for (const [spec, aImp] of after) {
+    if (!before.has(spec)) {
+      changes.push({ kind: 'added', specifier: spec, names: aImp.names });
+    }
+  }
+
+  return changes;
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Compare `beforeContent` and `afterContent` for the given `filePath` and
+ * return a SemanticDiff describing functional changes.
+ *
+ * Returns null when:
+ *   - The language is not supported by tree-sitter
+ *   - Tree-sitter is not initialized
+ *   - Parsing fails
+ *
+ * Import changes are always returned (regex-based, no grammar required).
+ */
+export async function computeSemanticDiff(
+  filePath: string,
+  beforeContent: string,
+  afterContent: string,
+): Promise<SemanticDiff | null> {
+  // Import diff is always available (regex-based)
+  const beforeImports = extractImports(beforeContent);
+  const afterImports = extractImports(afterContent);
+  const imports = diffImports(beforeImports, afterImports);
+
+  const langId = detectLanguage(filePath);
+  if (!langId) {
+    // No language support — return import changes only if any
+    if (imports.length === 0) return null;
+    return { symbols: [], imports, totalChanges: imports.length };
+  }
+
+  const svc = new TreeSitterService();
+
+  try {
+    await svc.initialize();
+  } catch {
+    logger.debug('computeSemanticDiff: tree-sitter init failed', { filePath });
+    if (imports.length === 0) return null;
+    return { symbols: [], imports, totalChanges: imports.length };
+  }
+
+  // Use a temporary key so we don't pollute the service cache with diff content.
+  // Include a nonce so concurrent calls for the same filePath don't collide.
+  const nonce = Math.random().toString(36).slice(2);
+  const beforeKey = `__semantic_diff_before__${nonce}_${filePath}`;
+  const afterKey = `__semantic_diff_after__${nonce}_${filePath}`;
+
+  try {
+    const [beforeTree, afterTree] = await Promise.all([
+      svc.parse(beforeKey, beforeContent, langId),
+      svc.parse(afterKey, afterContent, langId),
+    ]);
+
+    if (!beforeTree || !afterTree) {
+      if (imports.length === 0) return null;
+      return { symbols: [], imports, totalChanges: imports.length };
+    }
+
+    // loadLanguage returns from cache since parse() already loaded it
+    const lang = await svc.loadLanguage(langId);
+    if (!lang) {
+      if (imports.length === 0) return null;
+      return { symbols: [], imports, totalChanges: imports.length };
+    }
+
+    const beforeSymbols = extractSymbols(beforeTree, lang, langId);
+    const afterSymbols = extractSymbols(afterTree, lang, langId);
+    const symbols = diffSymbols(beforeSymbols, afterSymbols);
+
+    // Clean up temporary cache entries
+    svc.invalidate(beforeKey);
+    svc.invalidate(afterKey);
+
+    const totalChanges = symbols.length + imports.length;
+    if (totalChanges === 0) return null;
+
+    return { symbols, imports, totalChanges };
+  } catch (err) {
+    logger.error('computeSemanticDiff: comparison failed', {
+      filePath,
+      error: summarizeError(err),
+    });
+    svc.invalidate(beforeKey);
+    svc.invalidate(afterKey);
+    if (imports.length === 0) return null;
+    return { symbols: [], imports, totalChanges: imports.length };
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Display formatting
+// ---------------------------------------------------------------------------
+
+const KIND_ICON: Record<SymbolInfo['kind'], string> = {
+  function:  'fn',
+  method:    'method',
+  class:     'class',
+  interface: 'iface',
+  type:      'type',
+  variable:  'var',
+  constant:  'const',
+  enum:      'enum',
+  property:  'prop',
+  namespace: 'ns',
+};
+
+const CHANGE_GLYPH: Record<ChangeKind, string> = {
+  added:    '+',
+  removed:  '-',
+  modified: '~',
+};
+
+/**
+ * Render a SemanticDiff as an array of compact summary strings, one change
+ * per line. Suitable for display in the diff panel status area or a tooltip.
+ *
+ * Format examples:
+ *   +  fn  renderDiffView
+ *   ~  method  DiffPanel.showDiff  (signature changed)
+ *   -  class  OldWidget
+ *   +  import  ./utils  { A, B }
+ *   ~  import  ./types  (+NewType, -OldType)
+ */
+export function formatSemanticDiff(diff: SemanticDiff): string[] {
+  const lines: string[] = [];
+
+  // Symbol changes first
+  for (const sc of diff.symbols) {
+    const glyph = CHANGE_GLYPH[sc.kind];
+    const icon = KIND_ICON[sc.symbolKind];
+    let line = `${glyph}  ${icon}  ${sc.name}`;
+    if (sc.kind === 'modified') {
+      line += '  (signature changed)';
+    }
+    lines.push(line);
+  }
+
+  // Import changes
+  for (const ic of diff.imports) {
+    const glyph = CHANGE_GLYPH[ic.kind];
+    let line = `${glyph}  import  ${ic.specifier}`;
+    if (ic.names && ic.names.length > 0) {
+      const nameList = ic.names.slice(0, 4).join(', ');
+      const overflow = ic.names.length > 4 ? ` +${ic.names.length - 4} more` : '';
+      line += `  { ${nameList}${overflow} }`;
+    }
+    lines.push(line);
+  }
+
+  return lines;
+}
+
+/**
+ * Render a one-line summary suitable for a status bar.
+ * Example: "3 changes: +fn renderX  ~method Foo.bar  -import ./old"
+ */
+export function formatSemanticDiffSummary(diff: SemanticDiff): string {
+  if (diff.totalChanges === 0) return '';
+  const parts = formatSemanticDiff(diff).slice(0, 3);
+  const overflow = diff.totalChanges > 3 ? `  +${diff.totalChanges - 3} more` : '';
+  return `${diff.totalChanges} semantic change${diff.totalChanges !== 1 ? 's' : ''}: ${parts.join('  ')}${overflow}`;
+}