@pellux/goodvibes-tui 0.18.20 → 0.19.0

package/src/panels/control-plane-panel.ts

@@ -1,6 +1,6 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { UiControlPlaneSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
@@ -10,8 +10,7 @@ import {
   buildPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
+  type PanelPalette,
 } from './polish.ts';
 
 const C = {
@@ -37,13 +36,14 @@ function connectionColor(state: string): string {
   return C.dim;
 }
 
-export class ControlPlanePanel extends BasePanel {
+type ControlPlaneClient = UiControlPlaneSnapshot['clients'][number];
+
+export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
   private readonly unsub: (() => void) | null;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
 
   public constructor(private readonly readModel?: UiReadModel<UiControlPlaneSnapshot>) {
     super('control-plane', 'Control Plane', 'C', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
 
@@ -51,29 +51,38 @@ export class ControlPlanePanel extends BasePanel {
     this.unsub?.();
   }
 
-  public handleInput(key: string): boolean {
-    const clients = this.clients();
-    if (clients.length === 0) return false;
-    if (key === 'up' || key === 'k') {
-      this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-      this.markDirty();
-      return true;
-    }
-    if (key === 'down' || key === 'j') {
-      this.selectedIndex = Math.min(clients.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+  protected override getPalette(): PanelPalette {
+    return C;
   }
 
-  private clients() {
+  protected getItems(): readonly ControlPlaneClient[] {
     if (!this.readModel) return [];
-    return [...this.readModel.getSnapshot().clients];
+    return this.readModel.getSnapshot().clients;
+  }
+
+  protected renderItem(client: ControlPlaneClient, _index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [client.kind.padEnd(10), C.info, bg],
+      [` ${truncateDisplay(client.label, 20).padEnd(20)}`, C.value, bg],
+      [` ${client.transport.padEnd(12)}`, C.dim, bg],
+      [` ${truncateDisplay(formatTime(client.lastSeenAt), Math.max(0, width - 46))}`, C.dim, bg],
+    ]);
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No control-plane activity recorded.';
+  }
+
+  protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [
+      { command: '/cockpit', summary: 'watch operator posture from the terminal' },
+      { command: '/schedule list', summary: 'run automation that creates surface and daemon traffic' },
+    ];
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     const intro = 'Shared daemon control plane state, live clients, approval pressure, and recent omnichannel session posture.';
 
     if (!this.readModel) {
@@ -99,168 +108,104 @@ export class ControlPlanePanel extends BasePanel {
     const approvals = snapshot.approvals;
     const sessions = snapshot.sessions;
     const recentEvents = snapshot.recentEvents;
-    const clients = this.clients();
-
-    const summarySection: PanelWorkspaceSection = {
-      title: 'Posture',
-      lines: [
-        buildKeyValueLine(width, [
-          { label: 'state', value: snapshot.connectionState, valueColor: connectionColor(snapshot.connectionState) },
-          { label: 'clients', value: String(snapshot.activeClientIds.length), valueColor: snapshot.activeClientIds.length > 0 ? C.ok : C.dim },
-          { label: 'requests', value: String(snapshot.requestCount), valueColor: snapshot.requestCount > 0 ? C.info : C.dim },
-          { label: 'errors', value: String(snapshot.errorCount), valueColor: snapshot.errorCount > 0 ? C.error : C.dim },
-        ], C),
-        buildKeyValueLine(width, [
-          { label: 'host', value: `${snapshot.host}:${snapshot.port}`, valueColor: C.value },
-          { label: 'approvals', value: String(approvals.filter((entry) => entry.status === 'pending').length), valueColor: approvals.some((entry) => entry.status === 'pending') ? C.warn : C.dim },
-          { label: 'sessions', value: String(sessions.length), valueColor: sessions.length > 0 ? C.info : C.dim },
-          { label: 'events', value: String(recentEvents.length), valueColor: recentEvents.length > 0 ? C.info : C.dim },
-        ], C),
-        buildGuidanceLine(width, '/cockpit', 'use the web operator surface or daemon APIs for direct interventions while this panel tracks overall posture', C),
-      ],
-    };
+    const clients = this.getItems();
+
+    const headerLines: Line[] = [
+      buildKeyValueLine(width, [
+        { label: 'state', value: snapshot.connectionState, valueColor: connectionColor(snapshot.connectionState) },
+        { label: 'clients', value: String(snapshot.activeClientIds.length), valueColor: snapshot.activeClientIds.length > 0 ? C.ok : C.dim },
+        { label: 'requests', value: String(snapshot.requestCount), valueColor: snapshot.requestCount > 0 ? C.info : C.dim },
+        { label: 'errors', value: String(snapshot.errorCount), valueColor: snapshot.errorCount > 0 ? C.error : C.dim },
+      ], C),
+      buildKeyValueLine(width, [
+        { label: 'host', value: `${snapshot.host}:${snapshot.port}`, valueColor: C.value },
+        { label: 'approvals', value: String(approvals.filter((entry) => entry.status === 'pending').length), valueColor: approvals.some((entry) => entry.status === 'pending') ? C.warn : C.dim },
+        { label: 'sessions', value: String(sessions.length), valueColor: sessions.length > 0 ? C.info : C.dim },
+        { label: 'events', value: String(recentEvents.length), valueColor: recentEvents.length > 0 ? C.info : C.dim },
+      ], C),
+      buildGuidanceLine(width, '/cockpit', 'use the web operator surface or daemon APIs for direct interventions while this panel tracks overall posture', C),
+    ];
 
     if (clients.length === 0 && approvals.length === 0 && sessions.length === 0) {
-      const workspace = buildPanelWorkspace(width, height, {
+      return this.renderList(width, height, {
         title: 'Control Plane',
-        intro,
-        sections: [
-          summarySection,
-          {
-            lines: buildEmptyState(
-              width,
-              ' No control-plane activity recorded.',
-              'Start the daemon, connect a surface, or trigger an approval to populate this operator panel.',
-              [
-                { command: '/cockpit', summary: 'watch operator posture from the terminal' },
-                { command: '/schedule list', summary: 'run automation that creates surface and daemon traffic' },
-              ],
-              C,
-            ),
-          },
-        ],
-        palette: C,
+        header: headerLines,
+        emptyMessage: ' No control-plane activity recorded.',
       });
-      while (workspace.length < height) workspace.push(createEmptyLine(width));
-      return workspace;
     }
 
-    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, clients.length - 1));
+    this.clampSelection();
     const selected = clients[this.selectedIndex];
 
-    const detailSection: PanelWorkspaceSection = selected
-      ? {
-          title: 'Selected Client',
-          lines: [
-            buildPanelLine(width, [
-              ['  Client: ', C.label],
-              [selected.label, C.value],
-              ['  Kind: ', C.label],
-              [selected.kind, C.info],
-            ]),
-            buildPanelLine(width, [
-              ['  Transport: ', C.label],
-              [selected.transport, C.value],
-              ['  Connected: ', C.label],
-              [selected.connected ? 'yes' : 'no', selected.connected ? C.ok : C.warn],
-            ]),
-            buildPanelLine(width, [
-              ['  Route: ', C.label],
-              [selected.routeId ?? 'n/a', C.dim],
-              ['  Session: ', C.label],
-              [selected.sessionId ?? 'n/a', C.dim],
-            ]),
-            buildPanelLine(width, [
-              ['  Last seen: ', C.label],
-              [formatTime(selected.lastSeenAt), C.dim],
-              ['  Remote: ', C.label],
-              [truncateDisplay(selected.remoteAddress ?? 'n/a', Math.max(0, width - 36)), C.dim],
-            ]),
-          ],
-        }
-      : {
-          title: 'Selected Client',
-          lines: [buildPanelLine(width, [['  No connected client selected.', C.dim]])],
-        };
-
-    const approvalsSection: PanelWorkspaceSection = {
-      title: 'Approvals',
-      lines: approvals.length > 0
-        ? approvals.slice(0, 6).map((approval) => buildPanelLine(width, [
-            [' ', C.label],
-            [approval.status.padEnd(10), approval.status === 'pending' ? C.warn : approval.status === 'approved' ? C.ok : approval.status === 'denied' ? C.error : C.dim],
-            [` ${truncateDisplay(approval.request.tool, 16).padEnd(16)}`, C.value],
-            [` ${truncateDisplay(approval.sessionId ?? approval.id, Math.max(0, width - 30))}`, C.dim],
-          ]))
-        : [buildPanelLine(width, [['  No recent approvals.', C.dim]])],
-    };
+    const footerLines: Line[] = [];
+    if (selected) {
+      footerLines.push(
+        buildPanelLine(width, [
+          ['  Client: ', C.label],
+          [selected.label, C.value],
+          ['  Kind: ', C.label],
+          [selected.kind, C.info],
+        ]),
+        buildPanelLine(width, [
+          ['  Transport: ', C.label],
+          [selected.transport, C.value],
+          ['  Connected: ', C.label],
+          [selected.connected ? 'yes' : 'no', selected.connected ? C.ok : C.warn],
+        ]),
+        buildPanelLine(width, [
+          ['  Route: ', C.label],
+          [selected.routeId ?? 'n/a', C.dim],
+          ['  Session: ', C.label],
+          [selected.sessionId ?? 'n/a', C.dim],
+        ]),
+        buildPanelLine(width, [
+          ['  Last seen: ', C.label],
+          [formatTime(selected.lastSeenAt), C.dim],
+          ['  Remote: ', C.label],
+          [truncateDisplay(selected.remoteAddress ?? 'n/a', Math.max(0, width - 36)), C.dim],
+        ]),
+      );
+    } else {
+      footerLines.push(buildPanelLine(width, [['  No connected client selected.', C.dim]]));
+    }
 
-    const sessionsSection: PanelWorkspaceSection = {
-      title: 'Sessions',
-      lines: sessions.length > 0
-        ? sessions.slice(0, 6).map((session) => buildPanelLine(width, [
-            [' ', C.label],
-            [session.status.padEnd(10), session.status === 'active' ? C.ok : C.dim],
-            [` ${truncateDisplay(session.title, 20).padEnd(20)}`, C.value],
-            [` ${truncateDisplay(session.activeAgentId ?? session.id, Math.max(0, width - 34))}`, C.dim],
-          ]))
-        : [buildPanelLine(width, [['  No shared sessions recorded.', C.dim]])],
-    };
+    if (approvals.length > 0) {
+      footerLines.push(
+        ...approvals.slice(0, 6).map((approval) => buildPanelLine(width, [
+          [' ', C.label],
+          [approval.status.padEnd(10), approval.status === 'pending' ? C.warn : approval.status === 'approved' ? C.ok : approval.status === 'denied' ? C.error : C.dim],
+          [` ${truncateDisplay(approval.request.tool, 16).padEnd(16)}`, C.value],
+          [` ${truncateDisplay(approval.sessionId ?? approval.id, Math.max(0, width - 30))}`, C.dim],
+        ])),
+      );
+    }
 
-    const eventsSection: PanelWorkspaceSection = {
-      title: 'Recent Events',
-      lines: recentEvents.length > 0
-        ? recentEvents.slice(0, 6).map((event) => buildPanelLine(width, [
-            [' ', C.label],
-            [truncateDisplay(event.event, 16).padEnd(16), C.info],
-            [` ${truncateDisplay(typeof event.payload === 'string' ? event.payload : JSON.stringify(event.payload) ?? '', Math.max(0, width - 19))}`, C.dim],
-          ]))
-        : [buildPanelLine(width, [['  No recent control-plane events.', C.dim]])],
-    };
+    if (sessions.length > 0) {
+      footerLines.push(
+        ...sessions.slice(0, 6).map((session) => buildPanelLine(width, [
+          [' ', C.label],
+          [session.status.padEnd(10), session.status === 'active' ? C.ok : C.dim],
+          [` ${truncateDisplay(session.title, 20).padEnd(20)}`, C.value],
+          [` ${truncateDisplay(session.activeAgentId ?? session.id, Math.max(0, width - 34))}`, C.dim],
+        ])),
+      );
+    }
 
-    const resolvedClients = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]])],
-      palette: C,
-      beforeSections: [summarySection],
-      section: {
-        title: 'Clients',
-        scrollableLines: clients.map((client, absolute) => {
-          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            [' ', C.label, bg],
-            [client.kind.padEnd(10), C.info, bg],
-            [` ${truncateDisplay(client.label, 20).padEnd(20)}`, C.value, bg],
-            [` ${client.transport.padEnd(12)}`, C.dim, bg],
-            [` ${truncateDisplay(formatTime(client.lastSeenAt), Math.max(0, width - 46))}`, C.dim, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [detailSection, approvalsSection, sessionsSection, eventsSection],
-    });
-    this.scrollOffset = resolvedClients.scrollOffset;
+    if (recentEvents.length > 0) {
+      footerLines.push(
+        ...recentEvents.slice(0, 6).map((event) => buildPanelLine(width, [
+          [' ', C.label],
+          [truncateDisplay(event.event, 16).padEnd(16), C.info],
+          [` ${truncateDisplay(typeof event.payload === 'string' ? event.payload : JSON.stringify(event.payload) ?? '', Math.max(0, width - 19))}`, C.dim],
+        ])),
+      );
+    }
+    footerLines.push(buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]]));
 
-    const sections: PanelWorkspaceSection[] = [
-      summarySection,
-      resolvedClients.section,
-      detailSection,
-      approvalsSection,
-      sessionsSection,
-      eventsSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Control Plane',
-      intro,
-      sections,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]])],
-      palette: C,
+      header: headerLines,
+      footer: footerLines,
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }

package/src/panels/diff-panel.ts

@@ -345,6 +345,7 @@ export class DiffPanel extends BasePanel {
   // -------------------------------------------------------------------------
 
   render(width: number, height: number): Line[] {
+    return this.trackedRender(() => {
     if (height <= 0 || width <= 0) return [];
 
     if (this.entries.length === 0) {
@@ -440,6 +441,7 @@ export class DiffPanel extends BasePanel {
       sections,
       footerLines: [this.renderStatusBar(width, entry)],
     });
+    });
   }
 
   // ── Tab bar ──────────────────────────────────────────────────────────────

package/src/panels/file-explorer-panel.ts

@@ -2,7 +2,7 @@
 // FileExplorerPanel — collapsible project tree view
 // ---------------------------------------------------------------------------
 
-import { readdirSync, statSync } from 'node:fs';
+import { promises as fsPromises } from 'node:fs';
 import { join, relative, basename } from 'node:path';
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
@@ -120,6 +120,7 @@ export class FileExplorerPanel extends BasePanel {
   private rootPath: string;
   private readonly workingDirectory: string;
   private cacheValid: boolean = false;
+  private readyPromise: Promise<void> | null = null;
 
   // --- navigation ---
   private cursor: number = 0;
@@ -139,7 +140,9 @@ export class FileExplorerPanel extends BasePanel {
 
   override onActivate(): void {
     super.onActivate();
-    if (!this.cacheValid) this._buildTree();
+    if (!this.cacheValid) {
+      void this._buildTreeAsync();
+    }
   }
 
   override onDestroy(): void {
@@ -153,8 +156,7 @@ export class FileExplorerPanel extends BasePanel {
   /** Force a full tree refresh from disk. */
   refresh(): void {
     this.cacheValid = false;
-    this._buildTree();
-    this.markDirty();
+    void this._buildTreeAsync();
   }
 
   /** Currently focused node (or null). */
@@ -197,7 +199,6 @@ export class FileExplorerPanel extends BasePanel {
   // ── Render ─────────────────────────────────────────────────────────────────
 
   render(width: number, height: number): Line[] {
-    if (!this.cacheValid) this._buildTree();
     this.needsRender = false;
     const searchLine = this.searchMode
       ? `/ ${this.searchQuery}_`
@@ -324,14 +325,29 @@ export class FileExplorerPanel extends BasePanel {
 
   // ── Private: tree building ─────────────────────────────────────────────────
 
-  private _buildTree(): void {
-    this.root = this._scanDir(this.rootPath, 0);
-    this._rebuildFlat();
-    this.cacheValid = true;
-    this.markDirty();
+  private _buildTreeAsync(): Promise<void> {
+    const p = (async () => {
+      try {
+        await this.withLoading('Scanning directory\u2026', async () => {
+          this.root = await this._scanDirAsync(this.rootPath, 0);
+          this._rebuildFlat();
+          this.cacheValid = true;
+        });
+      } catch (err) {
+        this.setError(err instanceof Error ? err.message : String(err));
+      }
+      this.markDirty();
+    })();
+    this.readyPromise = p;
+    return p;
+  }
+
+  /** Resolves when the current tree build has settled. */
+  public awaitReady(): Promise<void> {
+    return this.readyPromise ?? Promise.resolve();
   }
 
-  private _scanDir(dirPath: string, depth: number): TreeNode {
+  private async _scanDirAsync(dirPath: string, depth: number): Promise<TreeNode> {
     const name = basename(dirPath);
     const node: TreeNode = {
       path: dirPath,
@@ -339,7 +355,7 @@ export class FileExplorerPanel extends BasePanel {
       isDir: true,
       depth,
       size: 0,
-      expanded: depth === 0, // root starts expanded
+      expanded: depth === 0,
       children: [],
       loaded: false,
     };
@@ -348,7 +364,7 @@ export class FileExplorerPanel extends BasePanel {
 
     let entries: string[];
     try {
-      entries = readdirSync(dirPath);
+      entries = await fsPromises.readdir(dirPath);
     } catch {
       return node;
     }
@@ -356,31 +372,35 @@ export class FileExplorerPanel extends BasePanel {
     node.loaded = true;
 
     // Sort: dirs first, then files, alphabetically within each group
-    const sorted = entries
-      .filter(e => !shouldSkip(e))
-      .sort((a, b) => {
-        let aIsDir = false;
-        let bIsDir = false;
-        try { aIsDir = statSync(join(dirPath, a)).isDirectory(); } catch { /* ignore */ }
-        try { bIsDir = statSync(join(dirPath, b)).isDirectory(); } catch { /* ignore */ }
-        if (aIsDir !== bIsDir) return aIsDir ? -1 : 1;
-        return a.localeCompare(b);
-      });
+    const filtered = entries.filter(e => !shouldSkip(e));
+    const statResults = await Promise.all(
+      filtered.map(async (e) => {
+        try {
+          const s = await fsPromises.stat(join(dirPath, e));
+          return { name: e, isDir: s.isDirectory(), size: s.size, stat: s };
+        } catch {
+          return { name: e, isDir: false, size: 0, stat: null };
+        }
+      }),
+    );
+
+    const sorted = statResults.sort((a, b) => {
+      if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
 
     for (const entry of sorted) {
-      const fullPath = join(dirPath, entry);
-      let stat;
-      try { stat = statSync(fullPath); } catch { continue; }
-
-      if (stat.isDirectory()) {
-        node.children.push(this._scanDir(fullPath, depth + 1));
+      if (entry.stat === null) continue;
+      const fullPath = join(dirPath, entry.name);
+      if (entry.isDir) {
+        node.children.push(await this._scanDirAsync(fullPath, depth + 1));
       } else {
         node.children.push({
           path: fullPath,
-          name: entry,
+          name: entry.name,
           isDir: false,
           depth: depth + 1,
-          size: stat.size,
+          size: entry.size,
           expanded: false,
           children: [],
           loaded: true,

package/src/panels/file-preview-panel.ts

@@ -1,4 +1,5 @@
-import * as fs from 'node:fs';
+import type { Stats } from 'node:fs';
+import { promises as fsPromises, readFileSync, statSync } from 'node:fs';
 import * as path from 'node:path';
 import type { Line, Cell } from '../types/grid.ts';
 import { createStyledCell, createEmptyLine } from '../types/grid.ts';
@@ -68,7 +69,7 @@ export class FilePreviewPanel extends BasePanel {
   // ─── Public API ─────────────────────────────────────────────────────────────
 
   /**
-   * Load a file into the preview. Reads synchronously (small files only).
+   * Load a file into the preview. Reads asynchronously.
    * Files larger than 100 KB show a warning instead of content.
    */
   openFile(filePath: string): void {
@@ -79,51 +80,72 @@ export class FilePreviewPanel extends BasePanel {
 
     this.filePath = filePath;
     this.oversized = false;
-    this.fileLines = [];
-    this.fenceTag = '';
+    this.fenceTag = extToFenceTag(filePath);
 
     // Restore scroll position for this file, or start at top
     this.scrollOffset = this.scrollMemory.get(filePath) ?? 0;
 
-    let stat: fs.Stats;
+    // Synchronously pre-populate fileLines for small files so that callers
+    // (e.g. syncSymbolOutlineFromPreview) can read getSource() immediately.
     try {
-      stat = fs.statSync(filePath);
+      const stat = statSync(filePath);
+      if (stat.size <= MAX_FILE_SIZE) {
+        const content = readFileSync(filePath, 'utf-8');
+        this.fileLines = content.split('\n');
+      } else {
+        this.fileLines = [];
+        this.oversized = true;
+      }
     } catch {
       this.fileLines = [`(cannot open: ${filePath})`];
-      this.markDirty();
-      return;
     }
 
-    if (stat.size > MAX_FILE_SIZE) {
-      this.oversized = true;
-      this.markDirty();
-      return;
-    }
+    void this._loadFileAsync(filePath);
+  }
 
-    let content: string;
+  private async _loadFileAsync(filePath: string): Promise<void> {
     try {
-      content = fs.readFileSync(filePath, 'utf-8');
-    } catch {
-      this.fileLines = [`(read error: ${filePath})`];
-      this.markDirty();
-      return;
-    }
-
-    this.fileLines = content.split('\n');
-    // Strip trailing empty line from final newline
-    if (this.fileLines.length > 0 && this.fileLines[this.fileLines.length - 1] === '') {
-      this.fileLines.pop();
-    }
-
-    this.fenceTag = extToFenceTag(filePath);
-
-    // Kick off async tree-sitter parse so subsequent renders get highlighting
-    if (this.fenceTag) {
-      this.syntaxHighlighter.highlight(content, this.fenceTag);
+      await this.withLoading('Loading…', async () => {
+        let stat: Stats;
+        try {
+          stat = await fsPromises.stat(filePath);
+        } catch {
+          this.fileLines = [`(cannot open: ${filePath})`];
+          return;
+        }
+
+        if (stat.size > MAX_FILE_SIZE) {
+          this.oversized = true;
+          return;
+        }
+
+        let content: string;
+        try {
+          content = await fsPromises.readFile(filePath, 'utf-8');
+        } catch {
+          this.fileLines = [`(read error: ${filePath})`];
+          return;
+        }
+
+        this.fileLines = content.split('\n');
+        // Strip trailing empty line from final newline
+        if (this.fileLines.length > 0 && this.fileLines[this.fileLines.length - 1] === '') {
+          this.fileLines.pop();
+        }
+
+        this.fenceTag = extToFenceTag(filePath);
+
+        // Kick off async tree-sitter parse so subsequent renders get highlighting
+        if (this.fenceTag) {
+          this.syntaxHighlighter.highlight(content, this.fenceTag);
+        }
+
+        // Clamp scroll in case the new file is shorter
+        this.clampScroll(0);
+      });
+    } catch (err) {
+      this.setError(err instanceof Error ? err.message : String(err));
     }
-
-    // Clamp scroll in case the new file is shorter
-    this.clampScroll(0);
     this.markDirty();
   }