@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/symbol-outline-panel.ts

@@ -1,15 +1,18 @@
 import { BasePanel } from './base-panel.ts';
-import { createEmptyLine } from '../types/grid.ts';
 import type { Line } from '../types/grid.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelLine,
-  buildSelectablePanelLine,
+  buildTreeRow,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
 } from './polish.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
+import { TreeSitterService } from '@pellux/goodvibes-sdk/platform/intelligence';
+import type { Node, Tree, Language } from 'web-tree-sitter';
+import { logger, summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
 // ── Symbol types ────────────────────────────────────────────────────────────
 
@@ -25,6 +28,10 @@ export interface SymbolEntry {
 
 // ── Rendering constants ──────────────────────────────────────────────────────
 
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  selectedBg: '236',
+});
+
 /** ANSI 256-color fg codes per symbol kind. */
 const KIND_COLORS: Record<SymbolKind, string> = {
   function:  '87',   // cyan
@@ -36,43 +43,209 @@ const KIND_COLORS: Record<SymbolKind, string> = {
   const:     '245',  // grey
 };
 
-/** Short type indicator labels. */
-const KIND_LABELS: Record<SymbolKind, string> = {
-  function:  'fn ',
-  method:    'fn ',
-  class:     'cls',
-  namespace: 'ns ',
-  interface: 'int',
-  type:      'typ',
-  const:     'cst',
+/** Single-char type icon for the tree row (kept ASCII for column safety). */
+const KIND_ICONS: Record<SymbolKind, string> = {
+  function:  'ƒ',
+  method:    'ƒ',
+  class:     'C',
+  namespace: 'N',
+  interface: 'I',
+  type:      'T',
+  const:     'k',
 };
 
-/** Regex patterns to extract symbols. Each produces named groups: kind, name, line. */
-const SYMBOL_PATTERNS: Array<{ re: RegExp; kind: SymbolKind; isContainer?: boolean }> = [
-  // export class Foo / abstract class Foo
-  { re: /^(?:export\s+)?(?:abstract\s+)?class\s+(\w+)/,          kind: 'class',     isContainer: true },
-  // export namespace Foo
-  { re: /^(?:export\s+)?namespace\s+(\w+)/,                       kind: 'namespace', isContainer: true },
-  // export interface Foo
-  { re: /^(?:export\s+)?interface\s+(\w+)/,                       kind: 'interface' },
-  // export type Foo =
-  { re: /^(?:export\s+)?type\s+(\w+)\s*[=<{]/,                   kind: 'type' },
-  // export function foo / export async function foo
-  { re: /^(?:export\s+)?(?:async\s+)?function\s+(\w+)/,          kind: 'function' },
-  // export const foo = ... (function expressions / arrow fns / values)
-  { re: /^(?:export\s+)?const\s+(\w+)\s*(?::[^=]*)?=\s*(?:async\s+)?(?:function|\(|\w+\s*=>)/, kind: 'function' },
-  // export const foo = <non-function>
-  { re: /^(?:export\s+)?const\s+(\w+)\s*(?::[^=]*)?=/,            kind: 'const' },
-  // methods inside class: indented  methodName(...)
-  { re: /^\s{2,}(?:(?:public|private|protected|static|async|override|readonly|abstract)\s+)*(\w+)\s*\(/, kind: 'method' },
-];
+// ── Tree-sitter symbol extraction ────────────────────────────────────────────
+
+type LangId = 'typescript' | 'tsx' | 'javascript';
+
+/** Map a file extension to the tree-sitter grammar id used to parse it. */
+function detectLangId(filePath: string): LangId | null {
+  const dot = filePath.lastIndexOf('.');
+  const ext = dot >= 0 ? filePath.slice(dot + 1).toLowerCase() : '';
+  if (ext === 'ts' || ext === 'mts' || ext === 'cts') return 'typescript';
+  if (ext === 'tsx') return 'tsx';
+  if (ext === 'js' || ext === 'mjs' || ext === 'cjs' || ext === 'jsx') return 'javascript';
+  return null;
+}
+
+// Tree-sitter queries capturing the declaration shapes the outline surfaces.
+// Class members (methods, getters/setters, decorated members, and
+// arrow-function class fields) are captured structurally rather than by
+// indentation, so decorators and modifiers never throw off matching.
+const TS_QUERY = `
+(class_declaration name: (type_identifier) @class.name) @class.def
+(abstract_class_declaration name: (type_identifier) @class.name) @class.def
+(interface_declaration name: (type_identifier) @interface.name) @interface.def
+(type_alias_declaration name: (type_identifier) @type.name) @type.def
+(internal_module name: (identifier) @namespace.name) @namespace.def
+(function_declaration name: (identifier) @function.name) @function.def
+(method_definition name: (property_identifier) @method.name) @method.def
+(public_field_definition
+  name: (property_identifier) @field.name
+  value: (arrow_function)) @field.def
+(lexical_declaration
+  (variable_declarator name: (identifier) @const.name) @const.declarator) @const.def
+`;
+
+const JS_QUERY = `
+(class_declaration name: (identifier) @class.name) @class.def
+(function_declaration name: (identifier) @function.name) @function.def
+(method_definition name: (property_identifier) @method.name) @method.def
+(field_definition
+  property: (property_identifier) @field.name
+  value: (arrow_function)) @field.def
+(lexical_declaration
+  (variable_declarator name: (identifier) @const.name) @const.declarator) @const.def
+`;
+
+const QUERY_BY_LANG: Record<LangId, string> = {
+  typescript: TS_QUERY,
+  tsx: TS_QUERY,
+  javascript: JS_QUERY,
+};
+
+const CLASS_NODE_TYPES = new Set(['class_declaration', 'abstract_class_declaration', 'class_expression']);
+
+/** True when `node` sits directly at module scope (optionally wrapped in `export`). */
+function isTopLevelDeclaration(node: Node): boolean {
+  const parent = node.parent;
+  if (!parent) return true;
+  if (parent.type === 'program') return true;
+  if (parent.type === 'export_statement') return parent.parent?.type === 'program';
+  return false;
+}
+
+/**
+ * Walk up from a class member to its nearest enclosing class. Returns the
+ * class name only when that class is itself a top-level declaration — this
+ * keeps the outline to a class + its direct members (no deep nesting), the
+ * same depth the previous regex-based parser supported.
+ */
+function findEnclosingClassName(node: Node): string | null {
+  let cursor: Node | null = node.parent;
+  while (cursor) {
+    if (CLASS_NODE_TYPES.has(cursor.type)) {
+      if (!isTopLevelDeclaration(cursor)) return null;
+      const nameNode = cursor.childForFieldName('name');
+      return nameNode ? nameNode.text : null;
+    }
+    cursor = cursor.parent;
+  }
+  return null;
+}
+
+/**
+ * Extract a flat, line-ordered list of symbols from a parsed tree using a
+ * tree-sitter query over the real AST (no regex heuristics). Class members
+ * (methods, getters/setters, decorated members, arrow-function fields) carry
+ * `parentName` so the renderer can group them under their class header.
+ */
+function extractSymbolsFromTree(tree: Tree, language: Language, langId: LangId, service: TreeSitterService): SymbolEntry[] {
+  const query = QUERY_BY_LANG[langId];
+  const matches = service.query(tree, language, query);
+  const result: SymbolEntry[] = [];
+
+  for (const match of matches) {
+    const captures = new Map<string, Node>(match.captures.map((c) => [c.name, c.node]));
+
+    const classDef = captures.get('class.def');
+    if (classDef) {
+      const nameNode = captures.get('class.name');
+      if (nameNode && isTopLevelDeclaration(classDef)) {
+        result.push({ kind: 'class', name: nameNode.text, line: classDef.startPosition.row + 1 });
+      }
+      continue;
+    }
+
+    const interfaceDef = captures.get('interface.def');
+    if (interfaceDef) {
+      const nameNode = captures.get('interface.name');
+      if (nameNode && isTopLevelDeclaration(interfaceDef)) {
+        result.push({ kind: 'interface', name: nameNode.text, line: interfaceDef.startPosition.row + 1 });
+      }
+      continue;
+    }
+
+    const typeDef = captures.get('type.def');
+    if (typeDef) {
+      const nameNode = captures.get('type.name');
+      if (nameNode && isTopLevelDeclaration(typeDef)) {
+        result.push({ kind: 'type', name: nameNode.text, line: typeDef.startPosition.row + 1 });
+      }
+      continue;
+    }
+
+    const namespaceDef = captures.get('namespace.def');
+    if (namespaceDef) {
+      const nameNode = captures.get('namespace.name');
+      if (nameNode && isTopLevelDeclaration(namespaceDef)) {
+        result.push({ kind: 'namespace', name: nameNode.text, line: namespaceDef.startPosition.row + 1 });
+      }
+      continue;
+    }
+
+    const functionDef = captures.get('function.def');
+    if (functionDef) {
+      const nameNode = captures.get('function.name');
+      if (nameNode && isTopLevelDeclaration(functionDef)) {
+        result.push({ kind: 'function', name: nameNode.text, line: functionDef.startPosition.row + 1 });
+      }
+      continue;
+    }
+
+    // Methods, getters/setters, and constructors — all `method_definition`
+    // regardless of decorators (decorators are preceding siblings, not
+    // wrappers, so they never block the match).
+    const methodDef = captures.get('method.def');
+    if (methodDef) {
+      const nameNode = captures.get('method.name');
+      const parentName = findEnclosingClassName(methodDef);
+      if (nameNode && parentName) {
+        result.push({ kind: 'method', name: nameNode.text, line: methodDef.startPosition.row + 1, parentName });
+      }
+      continue;
+    }
+
+    // Arrow-function class fields (`onClick = () => {...}`), decorated or not.
+    const fieldDef = captures.get('field.def');
+    if (fieldDef) {
+      const nameNode = captures.get('field.name');
+      const parentName = findEnclosingClassName(fieldDef);
+      if (nameNode && parentName) {
+        result.push({ kind: 'method', name: nameNode.text, line: fieldDef.startPosition.row + 1, parentName });
+      }
+      continue;
+    }
+
+    const constDef = captures.get('const.def');
+    if (constDef) {
+      const nameNode = captures.get('const.name');
+      const declarator = captures.get('const.declarator');
+      if (nameNode && isTopLevelDeclaration(constDef)) {
+        const valueNode = declarator?.childForFieldName('value') ?? null;
+        const isFunctionValued = valueNode?.type === 'arrow_function' || valueNode?.type === 'function_expression';
+        result.push({
+          kind: isFunctionValued ? 'function' : 'const',
+          name: nameNode.text,
+          line: constDef.startPosition.row + 1,
+        });
+      }
+      continue;
+    }
+  }
+
+  result.sort((a, b) => a.line - b.line);
+  return result;
+}
 
 // ── Panel ────────────────────────────────────────────────────────────────────
 
 /**
  * SymbolOutlinePanel — renders a hierarchical symbol outline of the current
- * file. Symbols are parsed from source text using lightweight regex heuristics
- * (no tree-sitter or LSP required).
+ * file. Symbols are parsed from the real AST via a tree-sitter query (the
+ * same parser infrastructure syntax-highlighter.ts uses), not regex
+ * heuristics — so class fields assigned arrow functions, getters/setters,
+ * and decorated members all appear correctly.
  */
 export class SymbolOutlinePanel extends BasePanel {
   /** Flat list of parsed symbols (methods nested after their parent class). */
@@ -81,6 +254,17 @@ export class SymbolOutlinePanel extends BasePanel {
   /** Index of the currently highlighted row in the visible flat list. */
   private selectedIndex: number = 0;
 
+  /**
+   * The row under the cursor. This panel owns its own selection state
+   * (`selectedIndex` navigates the filtered `_visibleRows()` flat list), so
+   * every selected-row read routes through this one accessor — indexing the
+   * `_visibleRows()` list by the cursor directly is banned by the
+   * no-raw-selectedindex-read architecture rule.
+   */
+  private selectedRow(): VisibleRow | undefined {
+    return this._visibleRows().at(this.selectedIndex);
+  }
+
   /** Set of container names (class/namespace) that are collapsed. */
   private collapsed: Set<string> = new Set();
 
@@ -90,23 +274,40 @@ export class SymbolOutlinePanel extends BasePanel {
   /** Path of the file currently loaded. */
   private currentPath: string = '';
 
+  /** Shared tree-sitter service for this panel instance (mirrors syntax-highlighter.ts). */
+  private readonly treeSitter = new TreeSitterService();
+
+  /** Bumped on every loadFile() call so a superseded async parse is discarded. */
+  private parseGeneration: number = 0;
+
   constructor() {
     super('symbols', 'Symbols', 'S', 'development');
+    this.treeSitter.initialize().catch((err: unknown) => {
+      logger.warn('SymbolOutlinePanel: tree-sitter init failed', { error: summarizeError(err) });
+    });
   }
 
   // ── Public API ─────────────────────────────────────────────────────────────
 
   /**
-   * Load and parse symbols from the given file source text.
-   * Call this when the active file changes in the file-preview panel.
+   * Load and parse symbols from the given file source text via tree-sitter.
+   * Call this when the active file changes in the file-preview panel, and
+   * again whenever the preview reloads the same file so the outline re-syncs
+   * with on-disk edits.
    */
   loadFile(path: string, source: string): void {
     this.currentPath = path;
-    this.symbols = parseSymbols(source);
+    this.symbols = [];
     this.selectedIndex = 0;
     this.scrollOffset = 0;
     this.collapsed.clear();
     this.markDirty();
+
+    const generation = ++this.parseGeneration;
+    const langId = detectLangId(path);
+    if (!langId) return; // unsupported language — honest "no symbols" empty state
+
+    void this._parseAndSync(path, source, langId, generation);
   }
 
   /**
@@ -114,8 +315,7 @@ export class SymbolOutlinePanel extends BasePanel {
    * caller can jump to it in the file-preview panel.
    */
   getSelectedLocation(): { path: string; line: number } | null {
-    const visible = this._visibleRows();
-    const row = visible[this.selectedIndex];
+    const row = this.selectedRow();
     if (!row || row.kind === 'header') return null;
     return { path: this.currentPath, line: row.symbol.line };
   }
@@ -144,12 +344,13 @@ export class SymbolOutlinePanel extends BasePanel {
     }
 
     if (key === 'return' || key === 'enter') {
-      // Caller should call getSelectedLocation() after this returns true.
-      return true;
+      // Only consume Enter when there is a real symbol to jump to — otherwise
+      // let the key fall through instead of swallowing it for nothing.
+      return this.getSelectedLocation() !== null;
     }
 
     if (key === 'space' || key === 'right' || key === 'left') {
-      const row = visible[this.selectedIndex];
+      const row = this.selectedRow();
       if (row?.kind === 'header') {
         const name = row.name;
         if (this.collapsed.has(name)) {
@@ -186,10 +387,12 @@ export class SymbolOutlinePanel extends BasePanel {
               width,
               this.currentPath ? ' No symbols found' : ' No file loaded',
               this.currentPath
-                ? 'The current file did not produce outline entries with the lightweight parser heuristics.'
+                ? 'The current file did not produce outline entries from the tree-sitter parse.'
                 : 'Load a file in the preview panel to populate its outline here.',
-              [],
-              DEFAULT_PANEL_PALETTE,
+              this.currentPath
+                ? []
+                : [{ command: '/panel open explorer', summary: 'pick a file in the explorer, then Enter to preview and outline it' }],
+              C,
             ),
           },
         ],
@@ -201,7 +404,7 @@ export class SymbolOutlinePanel extends BasePanel {
     const outlineSection = resolveScrollablePanelSection(width, height, {
       intro: this.currentPath ? this.currentPath : 'Outline the current file into navigable symbols and lightweight parent/child structure.',
       footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Space', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' jump target', DEFAULT_PANEL_PALETTE.dim]]),
+        buildKeyboardHints(width, [{ keys: '↑/↓', label: 'navigate' }, { keys: 'Space/←/→', label: 'collapse' }, { keys: 'Enter', label: 'jump to source →' }], DEFAULT_PANEL_PALETTE),
       ],
       palette: DEFAULT_PANEL_PALETTE,
       beforeSections: [
@@ -234,7 +437,7 @@ export class SymbolOutlinePanel extends BasePanel {
         {
           title: 'Selected',
           lines: (() => {
-            const selected = visible[this.selectedIndex];
+            const selected = this.selectedRow();
             return selected
               ? [
                   buildPanelLine(width, [
@@ -255,7 +458,7 @@ export class SymbolOutlinePanel extends BasePanel {
     });
     this.scrollOffset = outlineSection.scrollOffset;
 
-    const selected = visible[this.selectedIndex];
+    const selected = this.selectedRow();
     return buildPanelWorkspace(width, height, {
       title: ' Symbols',
       intro: this.currentPath ? this.currentPath : 'Outline the current file into navigable symbols and lightweight parent/child structure.',
@@ -291,7 +494,7 @@ export class SymbolOutlinePanel extends BasePanel {
         },
       ],
       footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Space', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' jump target', DEFAULT_PANEL_PALETTE.dim]]),
+        buildKeyboardHints(width, [{ keys: '↑/↓', label: 'navigate' }, { keys: 'Space/←/→', label: 'collapse' }, { keys: 'Enter', label: 'jump to source →' }], DEFAULT_PANEL_PALETTE),
       ],
       palette: DEFAULT_PANEL_PALETTE,
     });
@@ -299,6 +502,24 @@ export class SymbolOutlinePanel extends BasePanel {
 
   // ── Private helpers ────────────────────────────────────────────────────────
 
+  private async _parseAndSync(path: string, source: string, langId: LangId, generation: number): Promise<void> {
+    try {
+      await this.treeSitter.initialize();
+      const language = await this.treeSitter.loadLanguage(langId);
+      if (!language) return;
+      const tree = await this.treeSitter.parse(path, source, langId);
+      if (!tree) return;
+      // A newer loadFile() call superseded this one — discard the stale result.
+      if (generation !== this.parseGeneration) return;
+      this.symbols = extractSymbolsFromTree(tree, language, langId, this.treeSitter);
+      this.selectedIndex = 0;
+      this.scrollOffset = 0;
+      this.markDirty();
+    } catch (err) {
+      logger.warn('SymbolOutlinePanel: tree-sitter parse failed', { path, error: summarizeError(err) });
+    }
+  }
+
   private _clampScroll(totalRows: number): void {
     // Ensure selected is within scroll view (assumes last known height ~ 20)
     // We keep a conservative viewport window; render() uses this.scrollOffset.
@@ -322,80 +543,6 @@ type VisibleRow =
 
 // ── Pure helpers ─────────────────────────────────────────────────────────────
 
-/**
- * Parse symbols from source text. Returns a flat list ordered by line number.
- * Methods are tagged with their parent class name so the renderer can group them.
- */
-function parseSymbols(source: string): SymbolEntry[] {
-  const lines = source.split('\n');
-  const result: SymbolEntry[] = [];
-  let currentContainer: string | undefined;
-  let containerKind: SymbolKind | undefined;
-  let containerBraceDepth = 0;
-  let braceDepth = 0;
-
-  for (let i = 0; i < lines.length; i++) {
-    const raw = lines[i];
-    const trimmed = raw.trimStart();
-    const lineNo = i + 1; // 1-based
-
-    // Strip string literals before counting braces to avoid false positives
-    const rawNoBraceStrings = raw.replace(/("|\'|\`)(?:(?!\1|\\).|\\[\s\S])*\1/g, '');
-
-    // Track brace depth for container scoping
-    for (const ch of rawNoBraceStrings) {
-      if (ch === '{') braceDepth++;
-      else if (ch === '}') {
-        braceDepth--;
-        if (currentContainer !== undefined && braceDepth <= containerBraceDepth) {
-          currentContainer = undefined;
-          containerKind = undefined;
-          containerBraceDepth = 0;
-        }
-      }
-    }
-
-    // Skip comment lines and blank lines
-    if (trimmed.startsWith('//') || trimmed.startsWith('*') || trimmed.startsWith('/*') || trimmed === '') continue;
-
-    // Check container-level patterns first (class/namespace)
-    let matched = false;
-    for (const { re, kind, isContainer } of SYMBOL_PATTERNS) {
-      const m = trimmed.match(re);
-      if (!m) continue;
-      const name = m[1];
-      if (!name) continue;
-
-      const entry: SymbolEntry = { kind, name, line: lineNo };
-
-      if (currentContainer && kind === 'method') {
-        entry.parentName = currentContainer;
-      }
-
-      // Don't add methods as top-level if they're inside a container
-      if (kind === 'method' && !currentContainer) {
-        // standalone function-like at wrong indent — skip
-        matched = true;
-        break;
-      }
-
-      result.push(entry);
-
-      if (isContainer) {
-        currentContainer = name;
-        containerKind = kind;
-        // Opening brace may be on this line or a subsequent line — track from current depth
-        containerBraceDepth = braceDepth - (raw.includes('{') ? 1 : 0);
-      }
-
-      matched = true;
-      break;
-    }
-  }
-
-  return result;
-}
-
 /**
  * Build the flat list of rows to render, respecting collapse state.
  * Container symbols become header rows; their children are indented below.
@@ -434,10 +581,7 @@ function buildVisibleRows(symbols: SymbolEntry[], collapsed: Set<string>): Visib
   return rows;
 }
 
-/**
- * Write a string into a Line starting at column x, applying fg/bg/style.
- */
-/** Render a container header row (class / namespace). */
+/** Render a container header row (class / namespace) via the shared tree row. */
 function _renderHeader(
   width: number,
   row: Extract<VisibleRow, { kind: 'header' }>,
@@ -445,24 +589,19 @@ function _renderHeader(
   bgColor: string,
   collapsed: Set<string>,
 ): Line {
-  // Collapse indicator
   const isCollapsed = collapsed.has(row.name);
-  const chevron = row.hasChildren ? (isCollapsed ? '▸ ' : '▾ ') : '  ';
-  const lineNumStr = `:${row.line}`;
-  const kindLabel = KIND_LABELS[row.symbolKind];
-  const leadingWidth = 1 + getDisplayWidth(chevron) + getDisplayWidth(kindLabel) + 1 + getDisplayWidth(row.name);
-  const gap = Math.max(1, width - leadingWidth - getDisplayWidth(lineNumStr) - 1);
-  return buildSelectablePanelLine(width, [
-    { text: ` ${chevron}`, fg: '245' },
-    { text: kindLabel, fg: KIND_COLORS[row.symbolKind], bold: true },
-    { text: ' ', fg: isSelected ? '255' : '252' },
-    { text: row.name, fg: isSelected ? '255' : '252', bold: isSelected },
-    { text: ' '.repeat(gap), fg: DEFAULT_PANEL_PALETTE.dim },
-    { text: lineNumStr, fg: DEFAULT_PANEL_PALETTE.dim },
-  ], { selected: isSelected, selectedBg: bgColor, fillFg: isSelected ? '255' : '' });
+  return buildTreeRow(width, {
+    depth: 0,
+    label: row.name,
+    icon: KIND_ICONS[row.symbolKind],
+    expandable: row.hasChildren,
+    expanded: !isCollapsed,
+    labelColor: KIND_COLORS[row.symbolKind],
+    metadata: [{ text: `:${row.line}`, fg: DEFAULT_PANEL_PALETTE.dim }],
+  }, C, { selected: isSelected, selectedBg: bgColor || C.selectedBg });
 }
 
-/** Render a regular symbol row. */
+/** Render a regular symbol row via the shared tree row. */
 function _renderSymbol(
   width: number,
   row: Extract<VisibleRow, { kind: 'symbol' }>,
@@ -470,17 +609,11 @@ function _renderSymbol(
   bgColor: string,
 ): Line {
   const { symbol, depth } = row;
-  const indent = depth === 0 ? 1 : 3; // children indented by 3 (chevron + space)
-  const kindLabel = KIND_LABELS[symbol.kind];
-  const lineNumStr = `:${symbol.line}`;
-  const leadingWidth = indent + getDisplayWidth(kindLabel) + 1 + getDisplayWidth(symbol.name);
-  const gap = Math.max(1, width - leadingWidth - getDisplayWidth(lineNumStr) - 1);
-  return buildSelectablePanelLine(width, [
-    { text: ' '.repeat(indent), fg: DEFAULT_PANEL_PALETTE.dim },
-    { text: kindLabel, fg: KIND_COLORS[symbol.kind] },
-    { text: ' ', fg: isSelected ? '255' : '251' },
-    { text: symbol.name, fg: isSelected ? '255' : '251', bold: isSelected },
-    { text: ' '.repeat(gap), fg: DEFAULT_PANEL_PALETTE.dim },
-    { text: lineNumStr, fg: DEFAULT_PANEL_PALETTE.dim },
-  ], { selected: isSelected, selectedBg: bgColor, fillFg: isSelected ? '255' : '' });
+  return buildTreeRow(width, {
+    depth,
+    label: symbol.name,
+    icon: KIND_ICONS[symbol.kind],
+    labelColor: KIND_COLORS[symbol.kind],
+    metadata: [{ text: `:${symbol.line}`, fg: DEFAULT_PANEL_PALETTE.dim }],
+  }, C, { selected: isSelected, selectedBg: bgColor || C.selectedBg });
 }