brainbank 0.1.0-beta.1

package/src/cli/tui/stats-tui.tsx

@@ -0,0 +1,1465 @@
+/**
+ * stats-tui.tsx — Interactive Ink TUI for `brainbank stats`.
+ *
+ * Split-panel layout with 5 views:
+ *   1. Dashboard — overview, language bars, directory list
+ *   2. File Explorer — drill into directory, file list + detail
+ *   3. Chunk Viewer — browse chunks, preview content
+ *   4. Call Graph — interactive call tree
+ *   5. Semantic Search — full pipeline (vector → prune → expand)
+ *
+ * Reuses patterns & colors from index-tui.tsx.
+ */
+
+import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { render, Box, Text, useApp, useInput, useStdout } from 'ink';
+import {
+    fetchOverview, fetchLanguageBreakdown, fetchDirectories,
+    fetchFilesInDir, fetchFileDetail, fetchChunksForFile, fetchCallTree,
+    searchSymbols,
+} from './stats-data.ts';
+import type {
+    StatsOverview, LanguageStat, DirectoryStat,
+    FileStat, FileDetailInfo, ChunkInfo, CallTreeNode,
+} from './stats-data.ts';
+import { BrainSearchSession } from './stats-search.ts';
+import type { SearchPipelineResult, SourceOption } from './stats-search.ts';
+import type { SearchResult } from '@/types.ts';
+
+
+// ── Colors (Aurora palette — same as index-tui) ───────
+
+const C = {
+    aurora:  '#7AA2F7',
+    success: '#9ECE6A',
+    error:   '#F7768E',
+    warning: '#E0AF68',
+    dim:     '#565F89',
+    text:    '#C0CAF5',
+    border:  '#3B4261',
+    cyan:    '#7DCFFF',
+    purple:  '#BB9AF7',
+    orange:  '#FF9E64',
+    dir:     '#E0AF68',
+} as const;
+
+// Use 90% of terminal — cleared on launch for full-screen feel.
+
+// ── Language colors / badges ──────────────────────
+
+const LANG_COLORS: Record<string, string> = {
+    python:     '#4B8BBE',
+    typescript: '#519ABA',
+    javascript: '#CBCB41',
+    css:        '#42A5F5',
+    go:         '#7FD5EA',
+    rust:       '#DEA584',
+    ruby:       '#CC3E44',
+    java:       '#CC3E44',
+    c:          '#599EFF',
+    cpp:        '#599EFF',
+};
+
+const LANG_BADGES: Record<string, string> = {
+    python: 'PY', typescript: 'TS', javascript: 'JS', css: 'CS',
+    go: 'GO', rust: 'RS', ruby: 'RB', java: 'JV', c: 'C ', cpp: 'C+',
+};
+
+function langColor(lang: string): string { return LANG_COLORS[lang] ?? C.text; }
+function langBadge(lang: string): string { return LANG_BADGES[lang] ?? lang.slice(0, 2).toUpperCase(); }
+
+
+// ── Utilities ───────────────────────────────────────
+
+function centerScroll(cursor: number, total: number, viewH: number): number {
+    if (total <= viewH) return 0;
+    const half = Math.floor(viewH / 2);
+    const offset = Math.max(0, cursor - half);
+    return Math.min(offset, total - viewH);
+}
+
+function bar(percent: number, width: number): string {
+    const filled = Math.round(percent / 100 * width);
+    return '█'.repeat(filled) + '░'.repeat(Math.max(0, width - filled));
+}
+
+function truncate(str: string, max: number): string {
+    return str.length > max ? str.slice(0, max - 1) + '…' : str;
+}
+
+// ── Syntax Highlighting ───────────────────────────
+
+/** A colored segment of a syntax-highlighted line. */
+interface SyntaxSegment {
+    text: string;
+    color: string;
+}
+
+// Keyword sets for common languages
+const KEYWORDS = new Set([
+    // JS/TS
+    'async', 'await', 'break', 'case', 'catch', 'class', 'const', 'continue',
+    'default', 'delete', 'do', 'else', 'enum', 'export', 'extends', 'false',
+    'finally', 'for', 'from', 'function', 'if', 'implements', 'import', 'in',
+    'instanceof', 'interface', 'let', 'new', 'null', 'of', 'return', 'static',
+    'super', 'switch', 'this', 'throw', 'true', 'try', 'type', 'typeof',
+    'undefined', 'var', 'void', 'while', 'yield',
+    // Python
+    'def', 'class', 'self', 'None', 'True', 'False', 'and', 'or', 'not',
+    'is', 'lambda', 'with', 'as', 'pass', 'raise', 'global', 'nonlocal',
+    'elif', 'except', 'assert',
+]);
+
+const TYPE_WORDS = new Set([
+    'string', 'number', 'boolean', 'any', 'void', 'never', 'unknown',
+    'object', 'Promise', 'Array', 'Map', 'Set', 'Record', 'Partial',
+    'Readonly', 'Required', 'Pick', 'Omit', 'int', 'float', 'str',
+    'list', 'dict', 'tuple', 'bool', 'Optional',
+]);
+
+/** Tokenize a line of code into colored segments. Simple regex-based. */
+function highlightLine(line: string, maxW: number): SyntaxSegment[] {
+    const trimmed = line.length > maxW ? line.slice(0, maxW - 1) + '…' : line;
+    if (trimmed.length === 0) return [{ text: '', color: C.text }];
+
+    const segments: SyntaxSegment[] = [];
+    // Single-line comment check
+    const commentIdx = findCommentStart(trimmed);
+    const codePart = commentIdx >= 0 ? trimmed.slice(0, commentIdx) : trimmed;
+    const commentPart = commentIdx >= 0 ? trimmed.slice(commentIdx) : '';
+
+    // Tokenize code part
+    if (codePart.length > 0) {
+        // Match patterns: strings, numbers, keywords, decorators, rest
+        const pattern = /(@\w+)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b\d+(?:\.\d+)?\b)|(\b[A-Za-z_]\w*\b)|([^A-Za-z_@'"\d`]+)/g;
+        let m: RegExpExecArray | null;
+        while ((m = pattern.exec(codePart)) !== null) {
+            const [full, decorator, str, num, word, other] = m;
+            if (decorator) {
+                segments.push({ text: decorator, color: C.warning });
+            } else if (str) {
+                segments.push({ text: str, color: C.success });
+            } else if (num) {
+                segments.push({ text: num, color: C.orange });
+            } else if (word) {
+                if (KEYWORDS.has(word)) {
+                    segments.push({ text: word, color: C.purple });
+                } else if (TYPE_WORDS.has(word)) {
+                    segments.push({ text: word, color: C.cyan });
+                } else if (word[0] === word[0].toUpperCase() && word[0] !== word[0].toLowerCase()) {
+                    // PascalCase → likely a class/type
+                    segments.push({ text: word, color: C.cyan });
+                } else {
+                    segments.push({ text: word, color: C.text });
+                }
+            } else if (other) {
+                segments.push({ text: other, color: C.dim });
+            } else {
+                segments.push({ text: full, color: C.text });
+            }
+        }
+    }
+
+    // Comment part
+    if (commentPart) {
+        segments.push({ text: commentPart, color: C.dim });
+    }
+
+    return segments.length > 0 ? segments : [{ text: trimmed, color: C.text }];
+}
+
+/** Find the start of a single-line comment, avoiding matches inside strings. */
+function findCommentStart(line: string): number {
+    let inString: string | null = null;
+    for (let i = 0; i < line.length; i++) {
+        const ch = line[i];
+        if (inString) {
+            if (ch === '\\') { i++; continue; }
+            if (ch === inString) inString = null;
+        } else {
+            if (ch === '"' || ch === "'" || ch === '`') { inString = ch; continue; }
+            if (ch === '/' && line[i + 1] === '/') return i;
+            if (ch === '#' && (i === 0 || /\s/.test(line[i - 1]))) return i;
+        }
+    }
+    return -1;
+}
+
+/** Render a syntax-highlighted code line as Ink <Text> elements. */
+function HighlightedLine({ segments }: { segments: SyntaxSegment[] }): React.ReactNode {
+    return (
+        <>
+            {segments.map((seg, i) => (
+                <Text key={i} color={seg.color}>{seg.text}</Text>
+            ))}
+        </>
+    );
+}
+
+type View = 'dashboard' | 'files' | 'chunks' | 'callgraph' | 'search';
+
+
+// ── Dashboard View ────────────────────────────────
+
+function DashboardView({ overview, languages, dirs, width, height, onDrillDir, onCallGraph, onSearch }: {
+    overview: StatsOverview;
+    languages: LanguageStat[];
+    dirs: DirectoryStat[];
+    width: number;
+    height: number;
+    onDrillDir: (dir: string) => void;
+    onCallGraph: () => void;
+    onSearch: () => void;
+}): React.ReactNode {
+    const [cursor, setCursor] = useState(0);
+
+    useInput((input, key) => {
+        if (key.downArrow) setCursor(c => Math.min(c + 1, dirs.length - 1));
+        if (key.upArrow) setCursor(c => Math.max(c - 1, 0));
+        if (key.return && dirs[cursor]) onDrillDir(dirs[cursor].dir);
+        if (input === 'g') onCallGraph();
+        if (input === '/') onSearch();
+    });
+
+    const leftW = 30;
+    const rightW = Math.max(40, width - leftW - 5);
+    const barW = Math.max(10, rightW - 35);
+
+    return (
+        <Box flexDirection="row" width={width} height={height - 4}>
+            {/* Left: Overview */}
+            <Box flexDirection="column" width={leftW} paddingX={1}>
+                <Box marginBottom={1}>
+                    <Text color={C.aurora} bold>Overview</Text>
+                </Box>
+                <Text color={C.text}>  📁 <Text bold>{overview.files}</Text> files</Text>
+                <Text color={C.text}>  🧩 <Text bold>{overview.chunks}</Text> chunks</Text>
+                <Text color={C.text}>  🔗 <Text bold>{overview.callEdges}</Text> call edges</Text>
+                <Text color={C.text}>  📥 <Text bold>{overview.importEdges}</Text> imports</Text>
+                <Text color={C.text}>  🏷  <Text bold>{overview.symbols}</Text> symbols</Text>
+                <Text color={C.text}>  📊 <Text bold>{overview.dbSizeMB}</Text> MB db</Text>
+                <Text color={C.text}>  🔍 <Text bold>{overview.hnswSize}</Text> vectors</Text>
+                <Box marginTop={1}>
+                    <Text color={C.dim}>Embedding:</Text>
+                </Box>
+                <Text color={C.cyan}>  {overview.embeddingModel}</Text>
+                <Text color={C.dim}>  Pruner: <Text color={C.text}>{overview.pruner}</Text></Text>
+                <Text color={C.dim}>  Expander: <Text color={C.text}>{overview.expander}</Text></Text>
+            </Box>
+
+            {/* Right: Languages + Directories */}
+            <Box flexDirection="column" width={rightW} paddingX={1}>
+                <Box marginBottom={1}>
+                    <Text color={C.aurora} bold>Language Breakdown</Text>
+                </Box>
+                {languages.map(lang => (
+                    <Box key={lang.language} height={1}>
+                        <Text wrap="truncate">
+                            <Text color={langColor(lang.language)} bold>{langBadge(lang.language)}</Text>
+                            <Text> </Text>
+                            <Text color={langColor(lang.language)}>{bar(lang.percent, barW)}</Text>
+                            <Text color={C.dim}> {String(lang.chunks).padStart(4)} </Text>
+                            <Text color={C.dim}>{lang.percent.toFixed(1).padStart(5)}%</Text>
+                        </Text>
+                    </Box>
+                ))}
+
+                <Box marginTop={1} marginBottom={1}>
+                    <Text color={C.aurora} bold>Directories</Text>
+                    <Text color={C.dim}> ─── files ── chunks</Text>
+                </Box>
+                {dirs.map((d, i) => {
+                    const isCursor = i === cursor;
+                    const ptr = isCursor ? '▸ ' : '  ';
+                    const dirBarW = Math.max(5, Math.min(15, Math.round(d.percent / 100 * 15)));
+                    return (
+                        <Box key={d.dir} height={1}>
+                            <Text wrap="truncate">
+                                <Text color={isCursor ? C.aurora : C.dim}>{ptr}</Text>
+                                <Text color={isCursor ? C.aurora : C.dir} bold={isCursor}>
+                                    {truncate(d.dir + '/', 20).padEnd(20)}
+                                </Text>
+                                <Text color={C.dim}>{String(d.files).padStart(5)}  {String(d.chunks).padStart(5)}  </Text>
+                                <Text color={isCursor ? C.aurora : C.success}>{bar(d.percent, dirBarW)}</Text>
+                            </Text>
+                        </Box>
+                    );
+                })}
+            </Box>
+        </Box>
+    );
+}
+
+
+// ── File Explorer View ────────────────────────────
+
+function FileExplorerView({ dbPath, dir, width, height, onDrillFile, onBack }: {
+    dbPath: string;
+    dir: string;
+    width: number;
+    height: number;
+    onDrillFile: (filePath: string) => void;
+    onBack: () => void;
+}): React.ReactNode {
+    const files = useMemo(() => fetchFilesInDir(dbPath, dir), [dbPath, dir]);
+    const [cursor, setCursor] = useState(0);
+    const [sortMode, setSortMode] = useState<'chunks' | 'name' | 'symbols'>('chunks');
+
+    // Filter mode
+    const [filterText, setFilterText] = useState('');
+    const isFilteringRef = useRef(false);
+    const [isFiltering, setIsFiltering] = useState(false);
+
+    const sorted = useMemo(() => {
+        const s = [...files];
+        if (sortMode === 'name') s.sort((a, b) => a.fileName.localeCompare(b.fileName));
+        else if (sortMode === 'symbols') s.sort((a, b) => b.symbols - a.symbols);
+        return s;
+    }, [files, sortMode]);
+
+    const filtered = useMemo(() => {
+        if (!filterText) return sorted;
+        const lower = filterText.toLowerCase();
+        return sorted.filter(f => f.fileName.toLowerCase().includes(lower));
+    }, [sorted, filterText]);
+
+    const detail: FileDetailInfo | null = useMemo(() => {
+        if (!filtered[cursor]) return null;
+        return fetchFileDetail(dbPath, filtered[cursor].filePath);
+    }, [dbPath, filtered, cursor]);
+
+    const listH = Math.max(5, height - 6);
+    const scrollOff = centerScroll(cursor, filtered.length, listH);
+
+    useInput((input, key) => {
+        const filtering = isFilteringRef.current;
+
+        if (key.escape) {
+            if (filtering || filterText) {
+                isFilteringRef.current = false;
+                setIsFiltering(false);
+                setFilterText('');
+                setCursor(0);
+                return;
+            }
+            onBack();
+            return;
+        }
+
+        // Filter mode typing
+        if (filtering) {
+            if (key.return) {
+                isFilteringRef.current = false;
+                setIsFiltering(false);
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setFilterText(prev => prev.slice(0, -1));
+                setCursor(0);
+                return;
+            }
+            if (input && !key.upArrow && !key.downArrow) {
+                setFilterText(prev => prev + input);
+                setCursor(0);
+                return;
+            }
+        }
+
+        // '/' to start filtering
+        if (input === '/' && !filtering) {
+            isFilteringRef.current = true;
+            setIsFiltering(true);
+            setFilterText('');
+            setCursor(0);
+            return;
+        }
+
+        if (key.downArrow) setCursor(c => Math.min(c + 1, filtered.length - 1));
+        if (key.upArrow) setCursor(c => Math.max(c - 1, 0));
+        if (key.return && filtered[cursor]) onDrillFile(filtered[cursor].filePath);
+        if (!filtering && input === 's') setSortMode(m => m === 'chunks' ? 'name' : m === 'name' ? 'symbols' : 'chunks');
+    });
+
+    const leftW = Math.min(40, Math.floor(width * 0.4));
+    const rightW = width - leftW - 3;
+    const visible = filtered.slice(scrollOff, scrollOff + listH);
+
+    return (
+        <Box flexDirection="row" width={width} height={height - 4}>
+            {/* Left: File list */}
+            <Box flexDirection="column" width={leftW} paddingX={1}>
+                <Box marginBottom={1}>
+                    <Text color={C.aurora} bold>Files</Text>
+                    <Text color={C.dim}> ({filtered.length}{filterText ? `/${files.length}` : ''})</Text>
+                    <Text color={C.dim}> sort: </Text>
+                    <Text color={C.cyan}>{sortMode}</Text>
+                </Box>
+                {/* Filter bar */}
+                {(isFiltering || filterText) && (
+                    <Box height={1} marginBottom={0}>
+                        <Text color={C.aurora} bold>/ </Text>
+                        <Text color={C.text}>{filterText}</Text>
+                        <Text color={C.aurora}>▎</Text>
+                    </Box>
+                )}
+                {visible.map((f, vi) => {
+                    const idx = scrollOff + vi;
+                    const isCursor = idx === cursor;
+                    const ptr = isCursor ? '▸ ' : '  ';
+                    return (
+                        <Box key={f.filePath} height={1}>
+                            <Text wrap="truncate">
+                                <Text color={isCursor ? C.aurora : C.dim}>{ptr}</Text>
+                                <Text color={langColor(f.language)} bold>{langBadge(f.language)}</Text>
+                                <Text> </Text>
+                                <Text color={isCursor ? C.text : C.dim}>
+                                    {truncate(f.fileName, leftW - 12)}
+                                </Text>
+                                <Text color={C.dim}> {String(f.chunks).padStart(3)}ch</Text>
+                            </Text>
+                        </Box>
+                    );
+                })}
+            </Box>
+
+            {/* Right: File detail */}
+            <Box flexDirection="column" width={rightW} paddingX={1}>
+                {detail && (
+                    <>
+                        <Box marginBottom={1}>
+                            <Text color={C.aurora} bold>File Detail</Text>
+                        </Box>
+                        <Text color={C.dim}>📄 <Text color={C.text}>{detail.filePath}</Text></Text>
+                        <Text color={C.dim}>   Language: <Text color={langColor(detail.language)}>{detail.language}</Text></Text>
+                        <Text color={C.dim}>   Chunks: <Text color={C.text}>{detail.chunks}</Text></Text>
+                        <Text color={C.dim}>   Symbols: <Text color={C.text}>{detail.symbols.length}</Text></Text>
+                        <Text color={C.dim}>   Imports: <Text color={C.success}>{detail.importsIn.length} in</Text>, <Text color={C.orange}>{detail.importsOut.length} out</Text></Text>
+                        <Text color={C.dim}>   Call edges: <Text color={C.success}>{detail.callEdgesIn} in</Text>, <Text color={C.orange}>{detail.callEdgesOut} out</Text></Text>
+
+                        {detail.symbols.length > 0 && (
+                            <Box flexDirection="column" marginTop={1}>
+                                <Text color={C.purple} bold>Symbols</Text>
+                                {detail.symbols.slice(0, Math.max(5, height - 15)).map((sym, i) => (
+                                    <Box key={`${sym.name}-${i}`} height={1}>
+                                        <Text wrap="truncate">
+                                            <Text color={C.dim}>  {sym.kind === 'class' || sym.kind === 'Class' ? 'C' : 'ƒ'} </Text>
+                                            <Text color={C.text}>{truncate(sym.name, rightW - 10)}</Text>
+                                            <Text color={C.dim}> L{sym.line}</Text>
+                                        </Text>
+                                    </Box>
+                                ))}
+                                {detail.symbols.length > height - 15 && (
+                                    <Text color={C.dim}>  … {detail.symbols.length - (height - 15)} more</Text>
+                                )}
+                            </Box>
+                        )}
+
+                        {detail.importsIn.length > 0 && (
+                            <Box flexDirection="column" marginTop={1}>
+                                <Text color={C.cyan} bold>Imported by</Text>
+                                {detail.importsIn.slice(0, 5).map((imp, i) => (
+                                    <Text key={i} color={C.dim}>  ← {truncate(imp, rightW - 6)}</Text>
+                                ))}
+                            </Box>
+                        )}
+                    </>
+                )}
+            </Box>
+        </Box>
+    );
+}
+
+
+// ── Chunk Viewer ──────────────────────────────────
+
+function ChunkViewerView({ dbPath, filePath, width, height, onBack }: {
+    dbPath: string;
+    filePath: string;
+    width: number;
+    height: number;
+    onBack: () => void;
+}): React.ReactNode {
+    const chunks = useMemo(() => fetchChunksForFile(dbPath, filePath), [dbPath, filePath]);
+    const [cursor, setCursor] = useState(0);
+    const [contentScroll, setContentScroll] = useState(0);
+    const [focusPanel, setFocusPanel] = useState<'list' | 'content'>('list');
+
+    const listH = Math.max(5, height - 6);
+    const scrollOff = centerScroll(cursor, chunks.length, listH);
+
+    const leftW = Math.min(26, Math.floor(width * 0.28));
+    const rightW = width - leftW - 3;
+    const activeChunk = chunks[cursor] ?? null;
+    const visible = chunks.slice(scrollOff, scrollOff + listH);
+    // Preview fills to footer: height - 4 (outer margin) - 2 (header) - 3 (calls+meta) = usable
+    const previewH = Math.max(3, height - 9);
+    const contentLines = useMemo(() => activeChunk?.content.split('\n') ?? [], [activeChunk]);
+    const maxContentScroll = Math.max(0, contentLines.length - previewH);
+
+    // Reset content scroll when switching chunks
+    useEffect(() => { setContentScroll(0); }, [cursor]);
+
+    useInput((input, key) => {
+        if (key.escape) {
+            if (focusPanel === 'content') { setFocusPanel('list'); return; }
+            onBack();
+        }
+        if (key.tab || (input === 'l' && focusPanel === 'list') || (input === 'h' && focusPanel === 'content')
+            || (key.rightArrow && focusPanel === 'list') || (key.leftArrow && focusPanel === 'content')) {
+            setFocusPanel(p => p === 'list' ? 'content' : 'list');
+            return;
+        }
+        if (focusPanel === 'list') {
+            if (key.downArrow) setCursor(c => Math.min(c + 1, chunks.length - 1));
+            if (key.upArrow) setCursor(c => Math.max(c - 1, 0));
+            if (input === '}') setCursor(c => Math.min(c + 10, chunks.length - 1));
+            if (input === '{') setCursor(c => Math.max(c - 10, 0));
+            if (key.return) setFocusPanel('content');
+        } else {
+            // Content panel scrolling
+            if (key.downArrow) setContentScroll(s => Math.min(s + 1, maxContentScroll));
+            if (key.upArrow) setContentScroll(s => Math.max(s - 1, 0));
+            if (input === '}') setContentScroll(s => Math.min(s + 10, maxContentScroll));
+            if (input === '{') setContentScroll(s => Math.max(s - 10, 0));
+            if (input === 'd') setContentScroll(s => Math.min(s + 15, maxContentScroll));
+            if (input === 'u') setContentScroll(s => Math.max(s - 15, 0));
+        }
+    });
+
+    const visibleLines = contentLines.slice(contentScroll, contentScroll + previewH);
+    const scrollPct = maxContentScroll > 0 ? Math.round(contentScroll / maxContentScroll * 100) : 100;
+
+    return (
+        <Box flexDirection="row" width={width} height={height - 4}>
+            {/* Left: Chunk list */}
+            <Box flexDirection="column" width={leftW} paddingX={1}>
+                <Box marginBottom={1}>
+                    <Text color={focusPanel === 'list' ? C.aurora : C.dim} bold>Chunks</Text>
+                    <Text color={C.dim}> ({chunks.length})</Text>
+                </Box>
+                {visible.map((ch, vi) => {
+                    const idx = scrollOff + vi;
+                    const isCursor = idx === cursor;
+                    const ptr = isCursor ? '▸ ' : '  ';
+                    const hasSym = ch.name !== null && ch.name !== '';
+                    const active = focusPanel === 'list' && isCursor;
+                    return (
+                        <Box key={ch.id} height={1}>
+                            <Text wrap="truncate">
+                                <Text color={active ? C.aurora : isCursor ? C.cyan : C.dim}>{ptr}</Text>
+                                <Text color={active ? C.text : isCursor ? C.cyan : C.dim}>
+                                    #{String(idx + 1).padStart(2)} L{ch.startLine}-{ch.endLine}
+                                </Text>
+                                {hasSym && <Text color={C.warning}> ★</Text>}
+                            </Text>
+                        </Box>
+                    );
+                })}
+                <Box marginTop={1}>
+                    <Text color={C.dim}>★ = named symbol</Text>
+                </Box>
+            </Box>
+
+            {/* Right: Chunk preview (scrollable with syntax highlighting) */}
+            <Box flexDirection="column" width={rightW} paddingX={1}>
+                {activeChunk && (
+                    <>
+                        <Box marginBottom={0} justifyContent="space-between">
+                            <Text>
+                                <Text color={focusPanel === 'content' ? C.aurora : C.dim} bold>Preview</Text>
+                                <Text color={C.dim}> #{cursor + 1} L{activeChunk.startLine}-{activeChunk.endLine}</Text>
+                                {activeChunk.name ? <Text color={C.purple}> {activeChunk.name}</Text> : null}
+                            </Text>
+                            <Text>
+                                {focusPanel === 'list' && <Text color={C.dim} italic>Enter to scroll </Text>}
+                                {contentLines.length > previewH && (
+                                    <Text color={focusPanel === 'content' ? C.cyan : C.dim}>{scrollPct}%</Text>
+                                )}
+                            </Text>
+                        </Box>
+                        <Box flexDirection="column">
+                            {visibleLines.map((line, i) => {
+                                const segs = highlightLine(line, rightW - 6);
+                                return (
+                                    <Box key={contentScroll + i} height={1}>
+                                        <Text wrap="truncate">
+                                            <Text color={C.dim}>{String(activeChunk.startLine + contentScroll + i).padStart(4)}│</Text>
+                                            <HighlightedLine segments={segs} />
+                                        </Text>
+                                    </Box>
+                                );
+                            })}
+                        </Box>
+
+                        <Box marginTop={1} flexDirection="column">
+                            {activeChunk.callsOut.length > 0 && (
+                                <Text color={C.dim}>→ <Text color={C.orange}>{activeChunk.callsOut.slice(0, 8).join(', ')}</Text></Text>
+                            )}
+                            {activeChunk.calledBy.length > 0 && (
+                                <Text color={C.dim}>← <Text color={C.success}>{activeChunk.calledBy.slice(0, 8).join(', ')}</Text></Text>
+                            )}
+                        </Box>
+                    </>
+                )}
+            </Box>
+        </Box>
+    );
+}
+
+
+// ── Semantic Search View ──────────────────────────
+
+type SearchState = 'idle' | 'initializing' | 'searching' | 'done' | 'error';
+type SearchFocus = 'input' | 'sources' | 'raw' | 'final' | 'preview' | 'fullpreview';
+
+/** Extract display info from a SearchResult. */
+function resultLabel(r: SearchResult): { name: string; path: string; score: number; line: number } {
+    const meta = r.metadata as Record<string, unknown> | undefined;
+    return {
+        name: (meta?.name as string) ?? r.type,
+        path: r.filePath ?? 'unknown',
+        score: r.score,
+        line: (meta?.startLine as number) ?? 0,
+    };
+}
+
+function SemanticSearchView({ repoPath, width, height, onBack, session }: {
+    repoPath: string;
+    width: number;
+    height: number;
+    onBack: () => void;
+    session: BrainSearchSession;
+}): React.ReactNode {
+    // Session — owned by StatsApp, shared across view transitions
+    const sessionRef = useRef<BrainSearchSession>(session);
+
+    // State
+    const [query, setQuery] = useState('');
+    const [state, setState] = useState<SearchState>(() =>
+        session.initialized ? 'idle' : 'initializing',
+    );
+    const [stateMsg, setStateMsg] = useState(() =>
+        session.initialized ? '' : 'Loading search index...',
+    );
+    const [focus, setFocus] = useState<SearchFocus>('input');
+    const [pipeline, setPipeline] = useState<SearchPipelineResult | null>(null);
+    const [sourceOpts, setSourceOpts] = useState<SourceOption[]>(() =>
+        session.initialized ? [...session.sources] : [],
+    );
+    const [rawCursor, setRawCursor] = useState(0);
+    const [finalCursor, setFinalCursor] = useState(0);
+    const [previewScroll, setPreviewScroll] = useState(0);
+    const [errorMsg, setErrorMsg] = useState('');
+    const [sourceCursor, setSourceCursor] = useState(0);
+    const [usePruner, setUsePruner] = useState(true);
+    const [useExpander, setUseExpander] = useState(true);
+
+    // Init session on mount — skip if already initialized (re-entry)
+    useEffect(() => {
+        sessionRef.current = session;
+
+        if (session.initialized) {
+            setSourceOpts([...session.sources]);
+            setState('idle');
+            setStateMsg('');
+            return;
+        }
+
+        setState('initializing');
+        setStateMsg('Loading search index...');
+
+        // Defer to next tick so React paints the loading modal before heavy sync work
+        const timer = setTimeout(() => {
+            session.init()
+                .then(() => {
+                    setSourceOpts([...session.sources]);
+                    setState('idle');
+                    setStateMsg('');
+                })
+                .catch((err: unknown) => {
+                    setState('error');
+                    setErrorMsg(err instanceof Error ? err.message : String(err));
+                });
+        }, 50);
+
+        return () => { clearTimeout(timer); };
+    }, [session]);
+
+    // Column sizing — preview gets most space for code readability
+    const rawW = Math.max(20, Math.floor(width * 0.22));
+    const prunedW = Math.max(20, Math.floor(width * 0.22));
+    const previewW = width - rawW - prunedW - 4;
+    const listH = Math.max(3, height - 12);
+    const previewH = Math.max(3, height - 12);
+
+    // Active result for preview — each column independently controls what's shown
+    const activeResult = useMemo(() => {
+        if (!pipeline) return null;
+        if (focus === 'final') {
+            const combined = [...pipeline.pruned, ...pipeline.expanded];
+            return combined[finalCursor] ?? null;
+        }
+        // raw, input, sources, preview all show the raw cursor's item
+        return pipeline.raw[rawCursor] ?? null;
+    }, [focus, rawCursor, finalCursor, pipeline]);
+
+    const previewLines = useMemo(() => activeResult?.content.split('\n') ?? [], [activeResult]);
+    const maxPreviewScroll = Math.max(0, previewLines.length - previewH);
+
+    // Reset preview scroll when result changes
+    useEffect(() => { setPreviewScroll(0); }, [activeResult]);
+
+    // Toggle source
+    const toggleSource = useCallback((key: string) => {
+        setSourceOpts(prev => {
+            const next = prev.map(s => ({ ...s }));
+            const target = next.find(s => s.key === key);
+            if (target) target.enabled = !target.enabled;
+            return next;
+        });
+    }, []);
+
+    // Run search
+    const doSearch = useCallback(async () => {
+        const session = sessionRef.current;
+        if (!session?.initialized || !query.trim()) return;
+        setState('searching');
+        setStateMsg('Searching...');
+        setRawCursor(0);
+        setFinalCursor(0);
+        try {
+            const activeKeys = new Set(
+                sourceOpts.filter(s => s.enabled).map(s => s.key),
+            );
+            const allEnabled = sourceOpts.every(s => s.enabled);
+            const result = await session.search(query, allEnabled ? undefined : activeKeys, usePruner, useExpander);
+            setPipeline(result);
+            setState('done');
+            setStateMsg('');
+            setFocus('raw');
+        } catch (err: unknown) {
+            setState('error');
+            setErrorMsg(err instanceof Error ? err.message : String(err));
+        }
+    }, [query, sourceOpts, usePruner, useExpander]);
+
+    // Input handling
+    useInput((input, key) => {
+        // Esc — back out
+        if (key.escape) {
+            if (focus === 'fullpreview') { setFocus('final'); return; }
+            if (focus !== 'input' && pipeline) { setFocus('input'); return; }
+            onBack();
+            return;
+        }
+
+        // Source toggles removed from input mode — now handled in 'sources' focus
+
+        // Input mode — typing query
+        if (focus === 'input') {
+            if (key.return && query.trim()) {
+                doSearch();
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setQuery(q => q.slice(0, -1));
+                return;
+            }
+            if (key.tab) {
+                setFocus('sources');
+                return;
+            }
+            if (input && input.length === 1 && !key.ctrl && !key.meta) {
+                setQuery(q => q + input);
+            }
+            return;
+        }
+
+        // Sources mode — ←→ to move cursor, space to toggle
+        // Combined list: [sources...] | [Pruner] [Expander]
+        if (focus === 'sources') {
+            const totalOpts = sourceOpts.length + 2; // +2 for pruner, expander
+            if (key.rightArrow) setSourceCursor(c => Math.min(c + 1, totalOpts - 1));
+            if (key.leftArrow) setSourceCursor(c => Math.max(c - 1, 0));
+            if (input === ' ') {
+                if (sourceCursor < sourceOpts.length) {
+                    toggleSource(sourceOpts[sourceCursor].key);
+                } else if (sourceCursor === sourceOpts.length) {
+                    setUsePruner(p => !p);
+                } else {
+                    setUseExpander(e => !e);
+                }
+                return;
+            }
+            // ↑↓ adjust K for the focused source
+            if (key.upArrow && sourceCursor < sourceOpts.length) {
+                setSourceOpts(prev => {
+                    const next = prev.map(s => ({ ...s }));
+                    const target = next[sourceCursor];
+                    if (target) target.k = Math.min(target.k + 5, 50);
+                    return next;
+                });
+                return;
+            }
+            if (key.downArrow && sourceCursor < sourceOpts.length) {
+                setSourceOpts(prev => {
+                    const next = prev.map(s => ({ ...s }));
+                    const target = next[sourceCursor];
+                    if (target) target.k = Math.max(target.k - 5, 5);
+                    return next;
+                });
+                return;
+            }
+            if (key.tab) {
+                setFocus(pipeline ? 'raw' : 'input');
+                return;
+            }
+            if (key.return && query.trim()) {
+                doSearch();
+                return;
+            }
+            return;
+        }
+
+        // 'P' — toggle full context preview (what the agent sees)
+        if (input === 'p' && focus !== 'input') {
+            if (focus === 'fullpreview') { setFocus('final'); }
+            else { setFocus('fullpreview'); setPreviewScroll(0); }
+            return;
+        }
+
+        // Tab — cycle focus
+        if (key.tab) {
+            const order: SearchFocus[] = ['raw', 'final', 'preview', 'input'];
+            const idx = order.indexOf(focus);
+            setFocus(order[(idx + 1) % order.length]);
+            return;
+        }
+
+        // Column navigation
+        if (focus === 'raw') {
+            if (key.downArrow) setRawCursor(c => Math.min(c + 1, (pipeline?.raw.length ?? 1) - 1));
+            if (key.upArrow) setRawCursor(c => Math.max(c - 1, 0));
+            if (input === '}') setRawCursor(c => Math.min(c + 10, (pipeline?.raw.length ?? 1) - 1));
+            if (input === '{') setRawCursor(c => Math.max(c - 10, 0));
+            if (input === 'h' || key.leftArrow) setFocus('sources');
+            if (input === 'l' || key.rightArrow) setFocus('final');
+            if (key.return) { setFocus('preview'); setPreviewScroll(0); }
+            return;
+        }
+
+        if (focus === 'final') {
+            const combined = pipeline ? [...pipeline.pruned, ...pipeline.expanded] : [];
+            if (key.downArrow) setFinalCursor(c => Math.min(c + 1, combined.length - 1));
+            if (key.upArrow) setFinalCursor(c => Math.max(c - 1, 0));
+            if (input === '}') setFinalCursor(c => Math.min(c + 10, combined.length - 1));
+            if (input === '{') setFinalCursor(c => Math.max(c - 10, 0));
+            if (input === 'h' || key.leftArrow) setFocus('raw');
+            if (input === 'l' || key.rightArrow) setFocus('preview');
+            if (key.return) { setFocus('preview'); setPreviewScroll(0); }
+            return;
+        }
+
+        if (focus === 'preview') {
+            if (key.downArrow) setPreviewScroll(s => Math.min(s + 1, maxPreviewScroll));
+            if (key.upArrow) setPreviewScroll(s => Math.max(s - 1, 0));
+            if (input === '}') setPreviewScroll(s => Math.min(s + 10, maxPreviewScroll));
+            if (input === '{') setPreviewScroll(s => Math.max(s - 10, 0));
+            if (input === 'd') setPreviewScroll(s => Math.min(s + 15, maxPreviewScroll));
+            if (input === 'u') setPreviewScroll(s => Math.max(s - 15, 0));
+            if (input === 'h' || key.leftArrow) setFocus('final');
+            return;
+        }
+
+        if (focus === 'fullpreview') {
+            if (key.downArrow) setPreviewScroll(s => Math.min(s + 1, maxPreviewScroll));
+            if (key.upArrow) setPreviewScroll(s => Math.max(s - 1, 0));
+            if (input === '}') setPreviewScroll(s => Math.min(s + 10, maxPreviewScroll));
+            if (input === '{') setPreviewScroll(s => Math.max(s - 10, 0));
+            if (input === 'd') setPreviewScroll(s => Math.min(s + 15, maxPreviewScroll));
+            if (input === 'u') setPreviewScroll(s => Math.max(s - 15, 0));
+            return;
+        }
+    });
+
+    // Combined pruned+expanded list
+    const combinedResults = useMemo(() => {
+        if (!pipeline) return [];
+        return [
+            ...pipeline.pruned.map(r => ({ r, type: 'kept' as const })),
+            ...pipeline.expanded.map(r => ({ r, type: 'expanded' as const })),
+        ];
+    }, [pipeline]);
+
+    // Set of dropped filePaths for dimming in raw column
+    const droppedPaths = useMemo(() => {
+        if (!pipeline) return new Set<string>();
+        return new Set(pipeline.dropped.map(r => r.filePath ?? ''));
+    }, [pipeline]);
+
+    const rawScrollOff = centerScroll(rawCursor, pipeline?.raw.length ?? 0, listH);
+    const finalScrollOff = centerScroll(finalCursor, combinedResults.length, listH);
+
+    // Full context preview: all final results concatenated
+    const fullContextLines = useMemo(() => {
+        if (!pipeline) return [];
+        const final = [...pipeline.pruned, ...pipeline.expanded];
+        const lines: string[] = [];
+        for (const r of final) {
+            const info = resultLabel(r);
+            lines.push(`━━━ ${info.path} L${info.line} ━━━`);
+            lines.push(...r.content.split('\n'));
+            lines.push('');
+        }
+        return lines;
+    }, [pipeline]);
+
+    const currentPreviewLines = focus === 'fullpreview' ? fullContextLines : previewLines;
+    const currentMaxScroll = Math.max(0, currentPreviewLines.length - previewH);
+    const visiblePreview = currentPreviewLines.slice(previewScroll, previewScroll + previewH);
+    const scrollPct = currentMaxScroll > 0 ? Math.round(previewScroll / currentMaxScroll * 100) : 100;
+    // Clamp preview scroll to current max
+    useEffect(() => {
+        setPreviewScroll(s => Math.min(s, currentMaxScroll));
+    }, [currentMaxScroll]);
+
+    // Animated spinner during init
+    const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+    const [spinIdx, setSpinIdx] = useState(0);
+    useEffect(() => {
+        if (state !== 'initializing') return;
+        const timer = setInterval(() => setSpinIdx(i => (i + 1) % spinnerFrames.length), 80);
+        return () => clearInterval(timer);
+    }, [state]);
+
+    // Show loading modal if still initializing
+    if (state === 'initializing') {
+        return (
+            <Box flexDirection="column" width={width} height={height - 4}
+                 justifyContent="center" alignItems="center">
+                <Box flexDirection="column" alignItems="center" borderStyle="round"
+                     borderColor={C.border} paddingX={6} paddingY={2}>
+                    <Text color={C.aurora} bold>
+                        {spinnerFrames[spinIdx]} Loading Search Engine
+                    </Text>
+                    <Text color={C.dim}> </Text>
+                    <Text color={C.dim}>Initializing HNSW indices and plugins...</Text>
+                    <Text color={C.dim}>This only happens once per session</Text>
+                </Box>
+                <Box marginTop={1}>
+                    <Text color={C.dim}>Esc to go back</Text>
+                </Box>
+            </Box>
+        );
+    }
+
+    return (
+        <Box flexDirection="column" width={width} height={height - 4}>
+            {/* Search bar */}
+            <Box paddingX={1} flexDirection="column" marginBottom={1}>
+                <Box>
+                    <Text color={C.aurora} bold>🔍 </Text>
+                    <Text color={focus === 'input' ? C.text : C.dim}>
+                        {query}<Text color={focus === 'input' ? C.aurora : C.dim}>▎</Text>
+                    </Text>
+                    <Text color={C.dim}>
+                        {'  '}{state === 'initializing' ? '⟳ ' + stateMsg
+                            : state === 'searching' ? '⟳ Searching...'
+                            : state === 'error' ? '✗ ' + errorMsg
+                            : state === 'done' ? `${pipeline?.raw.length ?? 0} results`
+                            : 'Enter to search'}
+                    </Text>
+                </Box>
+                {/* Source filter tabs + pipeline toggles */}
+                <Box marginTop={1}>
+                    <Text color={focus === 'sources' ? C.aurora : C.dim}>Sources: </Text>
+                    {sourceOpts.map((s, i) => {
+                        const isFocused = focus === 'sources' && i === sourceCursor;
+                        return (
+                            <Text key={s.key}>
+                                <Text color={isFocused ? C.text : (s.enabled ? C.aurora : C.dim)}
+                                      bold={isFocused}
+                                      underline={isFocused}>
+                                    [{s.enabled ? '■' : '□'}] {s.label}
+                                </Text>
+                                <Text color={isFocused ? C.cyan : C.dim}>:{s.k}</Text>
+                                <Text color={C.dim}>  </Text>
+                            </Text>
+                        );
+                    })}
+                    <Text color={C.dim}>│ </Text>
+                    {/* Pruner toggle */}
+                    <Text color={focus === 'sources' && sourceCursor === sourceOpts.length
+                        ? C.text
+                        : (usePruner ? C.purple : C.dim)}
+                          bold={focus === 'sources' && sourceCursor === sourceOpts.length}
+                          underline={focus === 'sources' && sourceCursor === sourceOpts.length}>
+                        [{usePruner ? '■' : '□'}] Pruner
+                    </Text>
+                    <Text color={C.dim}>  </Text>
+                    {/* Expander toggle */}
+                    <Text color={focus === 'sources' && sourceCursor === sourceOpts.length + 1
+                        ? C.text
+                        : (useExpander ? C.purple : C.dim)}
+                          bold={focus === 'sources' && sourceCursor === sourceOpts.length + 1}
+                          underline={focus === 'sources' && sourceCursor === sourceOpts.length + 1}>
+                        [{useExpander ? '■' : '□'}] Expander
+                    </Text>
+                    <Text color={C.dim}>  (←→ move, Space toggle, ↑↓ adjust K)</Text>
+                </Box>
+            </Box>
+
+            {/* Full context preview mode */}
+            {focus === 'fullpreview' ? (
+                <Box flexDirection="column" width={width} height={listH + 2} marginTop={1} paddingX={1}>
+                    <Box marginBottom={0} justifyContent="space-between">
+                        <Text color={C.aurora} bold>Full Context Preview</Text>
+                        <Text>
+                            <Text color={C.dim} italic>What the agent sees  </Text>
+                            <Text color={C.cyan}>{scrollPct}%</Text>
+                            <Text color={C.dim}>  P to close</Text>
+                        </Text>
+                    </Box>
+                    <Box flexDirection="column">
+                        {visiblePreview.map((line, i) => {
+                            const isHeader = line.startsWith('━━━');
+                            if (isHeader) {
+                                return (
+                                    <Box key={previewScroll + i} height={1}>
+                                        <Text color={C.purple} bold wrap="truncate">{truncate(line, width - 4)}</Text>
+                                    </Box>
+                                );
+                            }
+                            const segs = highlightLine(line, width - 8);
+                            return (
+                                <Box key={previewScroll + i} height={1}>
+                                    <Text wrap="truncate">
+                                        <Text color={C.dim}>{String(previewScroll + i + 1).padStart(4)}│</Text>
+                                        <HighlightedLine segments={segs} />
+                                    </Text>
+                                </Box>
+                            );
+                        })}
+                    </Box>
+                </Box>
+            ) : (
+            /* Two result columns + wide preview */
+            <Box flexDirection="row" width={width} height={listH} marginTop={1}>
+                {/* Column 1: Raw results */}
+                <Box flexDirection="column" width={rawW} paddingX={1}>
+                    <Box marginBottom={0}>
+                        <Text color={focus === 'raw' ? C.aurora : C.dim} bold>
+                            Raw ({pipeline?.raw.length ?? 0})
+                        </Text>
+                    </Box>
+                    {pipeline && pipeline.raw.slice(rawScrollOff, rawScrollOff + listH - 1).map((r, vi) => {
+                        const idx = rawScrollOff + vi;
+                        const isCursor = focus === 'raw' && idx === rawCursor;
+                        const info = resultLabel(r);
+                        const isDimmed = droppedPaths.has(r.filePath ?? '');
+                        const ptr = isCursor ? '▸' : ' ';
+                        const scorePct = Math.round(info.score * 100);
+                        return (
+                            <Box key={idx} height={1}>
+                                <Text wrap="truncate">
+                                    <Text color={isCursor ? C.aurora : C.dim}>{ptr} </Text>
+                                    <Text color={isDimmed ? C.error : (isCursor ? C.text : C.dim)}
+                                          strikethrough={isDimmed}>
+                                        {truncate(info.name, rawW - 10)}
+                                    </Text>
+                                    <Text color={isDimmed ? C.error : C.dim}> {scorePct}%</Text>
+                                </Text>
+                            </Box>
+                        );
+                    })}
+                </Box>
+
+                {/* Column 2: Final = pruned survivors + expanded discoveries */}
+                <Box flexDirection="column" width={prunedW} paddingX={1}>
+                    <Box marginBottom={0}>
+                        <Text color={focus === 'final' ? C.aurora : C.dim} bold>
+                            Final ({combinedResults.length})
+                        </Text>
+                        {(pipeline?.expanded.length ?? 0) > 0 && (
+                            <Text color={C.success}> +{pipeline?.expanded.length}◆</Text>
+                        )}
+                        {pipeline && pipeline.dropped.length > 0 && (
+                            <Text color={C.error}> -{pipeline.dropped.length}</Text>
+                        )}
+                    </Box>
+                    {combinedResults.slice(finalScrollOff, finalScrollOff + listH - 1).map((item, vi) => {
+                        const idx = finalScrollOff + vi;
+                        const isCursor = focus === 'final' && idx === finalCursor;
+                        const info = resultLabel(item.r);
+                        const isExpanded = item.type === 'expanded';
+                        const ptr = isCursor ? '▸' : (isExpanded ? '◆' : ' ');
+                        // Show rerank position# + shortened file path (visually distinct from raw column)
+                        const shortFile = info.path.split('/').pop() ?? info.path;
+                        return (
+                            <Box key={idx} height={1}>
+                                <Text wrap="truncate">
+                                    <Text color={isCursor ? C.aurora : (isExpanded ? C.success : C.dim)}>
+                                        {ptr}
+                                    </Text>
+                                    <Text color={C.dim}>{String(idx + 1).padStart(2)} </Text>
+                                    <Text color={isCursor ? C.text : (isExpanded ? C.success : C.dim)}>
+                                        {truncate(shortFile, prunedW - 8)}
+                                    </Text>
+                                </Text>
+                            </Box>
+                        );
+                    })}
+                </Box>
+
+                {/* Column 3: Preview */}
+                <Box flexDirection="column" width={previewW} paddingX={1}>
+                    <Box marginBottom={0} justifyContent="space-between">
+                        <Text color={focus === 'preview' ? C.aurora : C.dim} bold>Preview</Text>
+                        <Text>
+                            {focus !== 'preview' && <Text color={C.dim} italic>Enter/→ to scroll </Text>}
+                            {currentPreviewLines.length > previewH && (
+                                <Text color={focus === 'preview' ? C.cyan : C.dim}>{scrollPct}%</Text>
+                            )}
+                        </Text>
+                    </Box>
+                    {activeResult && (
+                        <Box flexDirection="column">
+                            <Text color={C.dim} wrap="truncate">
+                                {truncate(resultLabel(activeResult).path, previewW - 4)} L{resultLabel(activeResult).line}
+                            </Text>
+                            {visiblePreview.map((line, i) => {
+                                const segs = highlightLine(line, previewW - 5);
+                                return (
+                                    <Box key={previewScroll + i} height={1}>
+                                        <Text wrap="truncate">
+                                            <Text color={C.dim}>{String(previewScroll + i + 1).padStart(3)}│</Text>
+                                            <HighlightedLine segments={segs} />
+                                        </Text>
+                                    </Box>
+                                );
+                            })}
+                        </Box>
+                    )}
+                </Box>
+            </Box>
+            )}
+
+            {/* Timings bar */}
+            {pipeline && (
+                <Box paddingX={1} marginTop={0}>
+                    <Text color={C.dim}>
+                        ⏱ search: {pipeline.timings.search}ms
+                        {pipeline.prunerName && (
+                            <Text>{'  '}prune: {pipeline.timings.prune}ms ({pipeline.prunerName}, -{pipeline.dropped.length})</Text>
+                        )}
+                        {pipeline.expanderName && pipeline.expanded.length > 0 && (
+                            <Text>{'  '}expand: {pipeline.timings.expand}ms ({pipeline.expanderName}, +{pipeline.expanded.length})</Text>
+                        )}
+                        {'  '}total: {pipeline.timings.total}ms
+                    </Text>
+                </Box>
+            )}
+        </Box>
+    );
+}
+
+
+// ── Call Graph View ───────────────────────────────
+
+function CallGraphView({ dbPath, width, height, onBack }: {
+    dbPath: string;
+    width: number;
+    height: number;
+    onBack: () => void;
+}): React.ReactNode {
+    // Start with a top-level symbol search
+    const [searchQuery, setSearchQuery] = useState('');
+    const [rootNodes, setRootNodes] = useState<CallTreeNode[]>([]);
+    const [cursor, setCursor] = useState(0);
+
+    // Flatten tree for display
+    const flatNodes = useMemo(() => {
+        interface FlatNode { node: CallTreeNode; depth: number }
+        const flat: FlatNode[] = [];
+        function walk(nodes: CallTreeNode[], d: number): void {
+            for (const n of nodes) {
+                flat.push({ node: n, depth: d });
+                walk(n.children, d + 1);
+            }
+        }
+        walk(rootNodes, 0);
+        return flat;
+    }, [rootNodes]);
+
+    useInput((input, key) => {
+        if (key.escape) {
+            if (rootNodes.length > 0) { setRootNodes([]); setSearchQuery(''); }
+            else onBack();
+        }
+        if (key.downArrow) setCursor(c => Math.min(c + 1, flatNodes.length - 1));
+        if (key.upArrow) setCursor(c => Math.max(c - 1, 0));
+        if (key.return && flatNodes[cursor]) {
+            // Drill into this node
+            const tree = fetchCallTree(dbPath, flatNodes[cursor].node.chunkId, 3);
+            if (tree.children.length > 0) {
+                setRootNodes([tree]);
+                setCursor(0);
+            }
+        }
+        if (key.backspace || key.delete) {
+            setSearchQuery(q => q.slice(0, -1));
+        }
+        if (input && input.length === 1 && !key.ctrl && !key.meta) {
+            setSearchQuery(q => q + input);
+        }
+    });
+
+    // Search for matching chunks when query changes
+    useEffect(() => {
+        if (searchQuery.length < 2) { setRootNodes([]); return; }
+        try {
+            const rows = searchSymbols(dbPath, searchQuery, 10);
+            const trees = rows.map(r => fetchCallTree(dbPath, r.id, 2));
+            setRootNodes(trees);
+            setCursor(0);
+        } catch { /* ignore */ }
+    }, [searchQuery, dbPath]);
+
+    const listH = Math.max(5, height - 8);
+    const scrollOff = centerScroll(cursor, flatNodes.length, listH);
+    const visible = flatNodes.slice(scrollOff, scrollOff + listH);
+
+    return (
+        <Box flexDirection="column" width={width} height={height - 4} paddingX={1}>
+            <Box marginBottom={1}>
+                <Text color={C.aurora} bold>Call Graph</Text>
+            </Box>
+            <Box marginBottom={1}>
+                <Text color={C.dim}>🔍 Search: </Text>
+                <Text color={C.text}>{searchQuery || '(type to search symbols…)'}</Text>
+            </Box>
+
+            {flatNodes.length === 0 && searchQuery.length >= 2 && (
+                <Text color={C.dim}>No matching symbols found.</Text>
+            )}
+
+            {visible.map((item, vi) => {
+                const idx = scrollOff + vi;
+                const isCursor = idx === cursor;
+                const indent = '  '.repeat(item.depth);
+                const prefix = item.depth > 0 ? '├── ' : '';
+                return (
+                    <Box key={`${item.node.chunkId}-${vi}`} height={1}>
+                        <Text wrap="truncate">
+                            <Text color={isCursor ? C.aurora : C.dim}>{isCursor ? '▸ ' : '  '}</Text>
+                            <Text color={C.dim}>{indent}{prefix}</Text>
+                            <Text color={isCursor ? C.aurora : C.purple} bold={isCursor}>{item.node.symbol}</Text>
+                            <Text color={C.dim}> </Text>
+                            <Text color={C.dim}>{truncate(item.node.filePath, width - indent.length * 2 - item.node.symbol.length - 12)}</Text>
+                            {item.node.children.length > 0 && (
+                                <Text color={C.dim}> ({item.node.children.length})</Text>
+                            )}
+                        </Text>
+                    </Box>
+                );
+            })}
+        </Box>
+    );
+}
+
+
+// ── Header / Footer ───────────────────────────────
+
+function Header({ repoPath, dbSizeMB, view, breadcrumb, width }: {
+    repoPath: string; dbSizeMB: number; view: View; breadcrumb: string[];
+    width: number;
+}): React.ReactNode {
+    const crumb = breadcrumb.length > 0 ? '  ▸ ' + breadcrumb.join(' ▸ ') : '';
+    const right = `${repoPath}  ${dbSizeMB}MB`;
+    return (
+        <Box width={width} height={2} paddingX={1} flexDirection="column">
+            <Box justifyContent="space-between">
+                <Text>
+                    <Text color={C.aurora} bold>⚡ BrainBank Explorer</Text>
+                    <Text color={C.dim}>{crumb}</Text>
+                </Text>
+                <Text color={C.dim}>{truncate(right, Math.max(10, width - 40))}</Text>
+            </Box>
+            <Text color={C.border}>{'─'.repeat(width - 2)}</Text>
+        </Box>
+    );
+}
+
+function Footer({ view, width }: { view: View; width: number }): React.ReactNode {
+    const hints: Record<View, string> = {
+        dashboard: '↑↓ navigate   Enter drill in   / search   g call graph   q quit',
+        files:     '↑↓ navigate   Enter view chunks   s sort   / filter   Esc back   q quit',
+        chunks:    'Tab focus   ↑↓ scroll   {/} jump 10   u/d page   Enter preview   Esc back',
+        callgraph: 'type to search   ↑↓ navigate   Enter expand   Esc back   q quit',
+        search:    'type query → Enter   ←→ panels   {/} jump 10   P full context   Tab sources   Space toggle   Esc back',
+    };
+
+    return (
+        <Box width={width} height={2} paddingX={1} flexDirection="column">
+            <Text color={C.border}>{'─'.repeat(width - 2)}</Text>
+            <Text color={C.dim}>
+                {hints[view].split(/(\S+:)/).map((part, i) =>
+                    part.endsWith(':') ? (
+                        <Text key={i} color={C.aurora}>{part} </Text>
+                    ) : (
+                        <Text key={i}>{part}</Text>
+                    )
+                )}
+            </Text>
+        </Box>
+    );
+}
+
+
+// ── App Root ──────────────────────────────────────
+
+function StatsApp({ dbPath, repoPath, configPath }: {
+    dbPath: string;
+    repoPath: string;
+    configPath: string;
+}): React.ReactNode {
+    const { exit } = useApp();
+    const { stdout } = useStdout();
+    const [rawW, setRawW] = useState(stdout?.columns || 100);
+    const [rawH, setRawH] = useState(stdout?.rows || 30);
+    const [view, setView] = useState<View>('dashboard');
+    const [breadcrumb, setBreadcrumb] = useState<string[]>([]);
+    const [currentDir, setCurrentDir] = useState('');
+    const [currentFile, setCurrentFile] = useState('');
+
+    // Persistent search session — survives view transitions
+    const searchSessionRef = useRef<BrainSearchSession | null>(null);
+    const getSearchSession = useCallback(() => {
+        if (!searchSessionRef.current) {
+            searchSessionRef.current = new BrainSearchSession(repoPath);
+        }
+        return searchSessionRef.current;
+    }, [repoPath]);
+    // Clean up on unmount
+    useEffect(() => {
+        return () => { searchSessionRef.current?.close(); };
+    }, []);
+
+    const width = Math.floor(rawW * 0.9);
+    const height = Math.floor(rawH * 0.9);
+
+    useEffect(() => {
+        if (!stdout) return;
+        const onResize = () => { setRawW(stdout.columns); setRawH(stdout.rows); };
+        stdout.on('resize', onResize);
+        return () => { stdout.off('resize', onResize); };
+    }, [stdout]);
+
+    // Global quit — skip in text-input views (search, callgraph)
+    useInput((input) => {
+        if (input === 'q' && view !== 'search' && view !== 'callgraph') { exit(); }
+    });
+
+    // Fetch data
+    const overview = useMemo(() => fetchOverview(dbPath, repoPath, configPath), [dbPath, repoPath, configPath]);
+    const languages = useMemo(() => fetchLanguageBreakdown(dbPath), [dbPath]);
+    const dirs = useMemo(() => fetchDirectories(dbPath), [dbPath]);
+
+    // Navigation handlers
+    const drillDir = (dir: string) => {
+        setCurrentDir(dir);
+        setBreadcrumb([dir + '/']);
+        setView('files');
+    };
+
+    const drillFile = (filePath: string) => {
+        setCurrentFile(filePath);
+        const fileName = filePath.split('/').pop() || filePath;
+        setBreadcrumb([currentDir + '/', fileName]);
+        setView('chunks');
+    };
+
+    const goBack = () => {
+        if (view === 'chunks') {
+            setBreadcrumb([currentDir + '/']);
+            setView('files');
+        } else if (view === 'files') {
+            setBreadcrumb([]);
+            setView('dashboard');
+        } else if (view === 'callgraph' || view === 'search') {
+            setBreadcrumb([]);
+            setView('dashboard');
+        }
+    };
+
+    const goCallGraph = () => {
+        setBreadcrumb(['Call Graph']);
+        setView('callgraph');
+    };
+
+    const goSearch = () => {
+        setBreadcrumb(['Search']);
+        setView('search');
+    };
+
+    return (
+        <Box flexDirection="column" width={width} height={height}>
+            <Header repoPath={overview.repoPath} dbSizeMB={overview.dbSizeMB} view={view} breadcrumb={breadcrumb} width={width} />
+
+            {view === 'dashboard' && (
+                <DashboardView
+                    overview={overview} languages={languages} dirs={dirs}
+                    width={width} height={height}
+                    onDrillDir={drillDir} onCallGraph={goCallGraph} onSearch={goSearch}
+                />
+            )}
+            {view === 'files' && (
+                <FileExplorerView
+                    dbPath={dbPath} dir={currentDir}
+                    width={width} height={height}
+                    onDrillFile={drillFile} onBack={goBack}
+                />
+            )}
+            {view === 'chunks' && (
+                <ChunkViewerView
+                    dbPath={dbPath} filePath={currentFile}
+                    width={width} height={height}
+                    onBack={goBack}
+                />
+            )}
+            {view === 'callgraph' && (
+                <CallGraphView
+                    dbPath={dbPath}
+                    width={width} height={height}
+                    onBack={goBack}
+                />
+            )}
+            {view === 'search' && (
+                <SemanticSearchView
+                    repoPath={repoPath}
+                    width={width} height={height}
+                    onBack={goBack}
+                    session={getSearchSession()}
+                />
+            )}
+
+            <Footer view={view} width={width} />
+        </Box>
+    );
+}
+
+
+// ── Public API ────────────────────────────────────
+
+export async function runStatsTui(dbPath: string, repoPath: string, configPath: string): Promise<void> {
+    // Clear screen + hide cursor for full-screen feel
+    process.stdout.write('\x1b[2J\x1b[H\x1b[?25l');
+
+    const instance = render(
+        <StatsApp dbPath={dbPath} repoPath={repoPath} configPath={configPath} />
+    );
+    await instance.waitUntilExit();
+
+    // Restore: show cursor + clear screen
+    process.stdout.write('\x1b[?25h\x1b[2J\x1b[H');
+}