@pellux/goodvibes-tui 0.18.23 → 0.19.1

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();
   }
 

package/src/panels/git-panel.ts

@@ -103,7 +103,7 @@ export class GitPanel extends BasePanel {
   /** Scroll offset for both main view and diff view. */
   private scrollOffset = 0;
 
-  private refreshTimer: ReturnType<typeof setInterval> | null = null;
+  private refreshTimerId: ReturnType<typeof setInterval> | null = null;
   private loading = true;
   private error: string | null = null;
 
@@ -119,20 +119,21 @@ export class GitPanel extends BasePanel {
   override onActivate(): void {
     super.onActivate();
     void this.refresh();
-    this.refreshTimer = setInterval(() => {
+    this.refreshTimerId = this.registerTimer(setInterval(() => {
       void this.refresh();
-    }, 5_000);
+    }, 5_000));
   }
 
   override onDeactivate(): void {
-    if (this.refreshTimer !== null) {
-      clearInterval(this.refreshTimer);
-      this.refreshTimer = null;
+    if (this.refreshTimerId !== null) {
+      this.clearTimer(this.refreshTimerId);
+      this.refreshTimerId = null;
     }
   }
 
   override onDestroy(): void {
     this.onDeactivate();
+    super.onDestroy();
   }
 
   // ---------------------------------------------------------------------------
@@ -326,18 +327,16 @@ export class GitPanel extends BasePanel {
     const item = this.items[this.selectedIndex];
     if (!item || item.kind !== 'file') return;
 
-    // I3: show base-class spinner while awaiting diff
-    this.startLoading('Loading diff...');
-    this.markDirty();
+    // I3: withLoading guarantees spinner is cleared even if diffFile throws
     try {
-      const git = new GitService(this.workingDirectory);
-      const raw = await git.diffFile(item.entry.path, item.entry.staged);
-      this.stopLoading();
+      const raw = await this.withLoading('Loading diff…', async () => {
+        const git = new GitService(this.workingDirectory);
+        return git.diffFile(item.entry.path, item.entry.staged);
+      });
       this.expandedDiff = raw ? raw.split('\n') : ['(no diff available)'];
       this.scrollOffset = 0;
       this.markDirty();
     } catch (err) {
-      this.stopLoading();
       this.expandedDiff = [`Error: ${summarizeError(err)}`];
       this.scrollOffset = 0;
       this.markDirty();

package/src/panels/hooks-panel.ts

@@ -10,6 +10,7 @@ import type { HookWorkbench } from '@pellux/goodvibes-sdk/platform/hooks/workben
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
   buildPanelLine,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
 
@@ -66,6 +67,7 @@ export class HooksPanel extends ScrollableListPanel<HookEntry> {
     dataSource: HooksPanelDataSource = createDefaultDataSource(hookDispatcher, hookWorkbench, hookActivityTracker),
   ) {
     super('hooks', 'Hooks', 'H', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.dataSource = dataSource;
   }
 
@@ -88,7 +90,7 @@ export class HooksPanel extends ScrollableListPanel<HookEntry> {
       [' ', C.label, bg],
       [truncateDisplay(entry.hook.name ?? '(unnamed)', 20).padEnd(20), C.value, bg],
       [` ${truncateDisplay(entry.pattern, 28).padEnd(28)}`, C.info, bg],
-      [` ${(entry.hook.enabled === false ? 'DISABLED' : 'ENABLED').padEnd(8)}`, entry.hook.enabled === false ? C.warn : C.ok, bg],
+      ...buildStatusPill(entry.hook.enabled === false ? 'warn' : 'good', ` ${(entry.hook.enabled === false ? 'DISABLED' : 'ENABLED').padEnd(8)}`, { bg }),
       [` ${entry.hook.type}`, C.dim, bg],
     ]);
   }

package/src/panels/incident-review-panel.ts

@@ -8,6 +8,7 @@ import {
   buildKeyValueLine,
   buildPanelLine,
   buildPanelWorkspace,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
 } from './polish.ts';
@@ -40,6 +41,7 @@ export class IncidentReviewPanel extends ScrollableListPanel<FailureReport> {
 
   public constructor(registry?: ForensicsRegistry) {
     super('incident', 'Incident Review', 'N', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.registry = registry;
     this.unsub = registry ? registry.subscribe(() => this.markDirty()) : null;
   }
@@ -137,7 +139,7 @@ export class IncidentReviewPanel extends ScrollableListPanel<FailureReport> {
       if (bundle.evidence.slowPhases.length > 0) {
         footerLines.push(buildPanelLine(width, [
           ['  Slow phases: ', C.label],
-          [bundle.evidence.slowPhases.join(', ').slice(0, Math.max(0, width - 15)), C.warn],
+          ...buildStatusPill('warn', bundle.evidence.slowPhases.join(', ').slice(0, Math.max(0, width - 15))),
         ]));
       }
       const rootCause = selected.causalChain.find((entry) => entry.isRootCause);
@@ -166,7 +168,7 @@ export class IncidentReviewPanel extends ScrollableListPanel<FailureReport> {
           : `Replay link: ${mismatch.kind}${mismatch.ownerDomain ? `/${mismatch.ownerDomain}` : ''} - ${mismatch.description}`;
         footerLines.push(buildPanelLine(width, [
           ['  ', C.label],
-          [replayDetail.slice(0, Math.max(0, width - 2)), C.bad],
+          ...buildStatusPill('bad', replayDetail.slice(0, Math.max(0, width - 2))),
         ]));
       } else {
         const ownerBreakdown = Object.entries(bundle.replay.mismatchBreakdown.byOwnerDomain)