@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/token-budget-panel.ts

@@ -8,10 +8,14 @@ import type { SessionMemoryQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
+  buildMeterLine,
   buildStyledPanelLine,
+  buildTable,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 
@@ -32,22 +36,16 @@ interface TurnUsage {
 // Colors
 // ---------------------------------------------------------------------------
 
-const C = {
-  title: '#00ffff',
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  // Token data-series colors (input/output/cache) — categorical, no shared equivalent
   input: '#00ffff',
   output: '#d000ff',
   cacheRead: '#00d700',
   cacheWrite: '#ffaf00',
+  // Progress-bar track shade and per-turn table sub-header gray
   barBg: '236',
-  label: '244',
-  value: '252',
-  sectionHeader: '238',
-  warnYellow: '#ffaf00',
-  warnRed: '#ff5f5f',
-  dim: '240',
-  good: '#5fd700',
   turnHeader: '242',
-} as const;
+});
 
 // Warning thresholds for context window usage
 const WARN_YELLOW = 0.70;
@@ -99,11 +97,17 @@ export class TokenBudgetPanel extends BasePanel {
   private sessionReadModel: UiReadModel<UiSessionSnapshot> | null = null;
   private readonly sessionMemoryStore: SessionMemoryQuery;
   private readonly configManager: Pick<ConfigManager, 'get'>;
+  private readonly requestRender: () => void;
 
-  constructor(sessionMemoryStore: SessionMemoryQuery, configManager: Pick<ConfigManager, 'get'>) {
+  constructor(
+    sessionMemoryStore: SessionMemoryQuery,
+    configManager: Pick<ConfigManager, 'get'>,
+    requestRender: () => void = () => {},
+  ) {
     super('tokens', 'Tokens', 'T', 'monitoring');
     this.sessionMemoryStore = sessionMemoryStore;
     this.configManager = configManager;
+    this.requestRender = requestRender;
   }
 
   // ---------------------------------------------------------------------------
@@ -149,7 +153,7 @@ export class TokenBudgetPanel extends BasePanel {
       this.turnHistory.shift();
     }
 
-    this.refresh();
+    this._refreshAndRender();
   }
 
   // ---------------------------------------------------------------------------
@@ -161,11 +165,17 @@ export class TokenBudgetPanel extends BasePanel {
     this.refresh();
     // Poll every 2 s while active so the context bar stays current during streaming
     if (this.refreshTimer !== null) clearInterval(this.refreshTimer);
-    this.refreshTimer = setInterval(() => this.refresh(), 2_000);
+    this.refreshTimer = setInterval(() => this._refreshAndRender(), 2_000);
   }
 
   override onDeactivate(): void {
     super.onDeactivate();
+    // Stop the off-screen poll so a backgrounded Tokens tab does not keep
+    // refreshing (and, once requestRender is wired, force a repaint) every 2 s.
+    if (this.refreshTimer !== null) {
+      clearInterval(this.refreshTimer);
+      this.refreshTimer = null;
+    }
   }
 
   override onDestroy(): void {
@@ -194,6 +204,15 @@ export class TokenBudgetPanel extends BasePanel {
     this.markDirty();
   }
 
+  /**
+   * Refresh data and request a repaint. Used by the background poll and on
+   * turn completion, where no key event will otherwise drive a render.
+   */
+  private _refreshAndRender(): void {
+    this.refresh();
+    this.requestRender();
+  }
+
   // ---------------------------------------------------------------------------
   // Rendering
   // ---------------------------------------------------------------------------
@@ -221,6 +240,12 @@ export class TokenBudgetPanel extends BasePanel {
       const priorSections = [...sections];
       const turnsSection = resolveScrollablePanelSection(width, height, {
         intro: 'Live context pressure, session token composition, cache usage, and recent turn deltas.',
+        footerLines: [
+          buildKeyboardHints(width, [
+            { keys: '/compact', label: 'compress context' },
+            { keys: '/clear', label: 'reset session' },
+          ], DEFAULT_PANEL_PALETTE),
+        ],
         palette: DEFAULT_PANEL_PALETTE,
         beforeSections: priorSections,
         section: {
@@ -257,6 +282,12 @@ export class TokenBudgetPanel extends BasePanel {
       title: ' Token Budget',
       intro: 'Live context pressure, session token composition, cache usage, and recent turn deltas.',
       sections,
+      footerLines: [
+        buildKeyboardHints(width, [
+          { keys: '/compact', label: 'compress context' },
+          { keys: '/clear', label: 'reset session' },
+        ], DEFAULT_PANEL_PALETTE),
+      ],
       palette: DEFAULT_PANEL_PALETTE,
     });
     });
@@ -369,10 +400,10 @@ export class TokenBudgetPanel extends BasePanel {
     let barColor: string;
     let warnSuffix = '';
     if (pct >= WARN_RED) {
-      barColor = C.warnRed;
+      barColor = C.bad;
       warnSuffix = ' ! CRITICAL';
     } else if (pct >= WARN_YELLOW) {
-      barColor = C.warnYellow;
+      barColor = C.warn;
       warnSuffix = ' ! HIGH';
     } else {
       barColor = C.good;
@@ -382,12 +413,12 @@ export class TokenBudgetPanel extends BasePanel {
     const suffix = ` ${fmtTok(this.lastInputTokens)}/${fmtTok(this.contextWindow)} (${pctInt}%)${warnSuffix}`;
     const BAR_W = Math.max(8, width - label.length - suffix.length - 2);
     const filled = Math.round(pct * BAR_W);
-    lines.push(buildStyledPanelLine(width, [
-      { text: label, fg: C.label },
-      { text: '#'.repeat(filled), fg: barColor, dim: pct < WARN_YELLOW },
-      { text: '.'.repeat(Math.max(0, BAR_W - filled)), fg: C.barBg, dim: pct < WARN_YELLOW },
-      { text: suffix, fg: barColor, dim: pct < WARN_YELLOW },
-    ]));
+    // Context fill is the headline metric — render it with the shared meter
+    // primitive so the bar glyphs and width handling match every other panel.
+    lines.push(buildMeterLine(width, filled, BAR_W,
+      { filled: barColor, empty: C.barBg, label: C.label },
+      { prefix: label, suffix },
+    ));
     return lines;
   }
 
@@ -420,41 +451,37 @@ export class TokenBudgetPanel extends BasePanel {
 
   /** Last N turns table: turn#, in, out, CR, CW, total. */
   private renderTurnHistory(width: number, maxRows: number): Line[] {
-    const lines: Line[] = [];
-
-    // Column headers
-    const colLine = createEmptyLine(width);
-    const headers = ['  #', '    Input', '   Output', '  CR', '  CW', '   Total'];
-    const cols = [3, 9, 9, 6, 6, 9];
-    let hx = 0;
-    for (let i = 0; i < headers.length; i++) {
-      const h = headers[i]!;
-      for (const ch of h.slice(0, cols[i]!)) {
-        if (hx >= width) break;
-        colLine[hx++] = createStyledCell(ch, { fg: C.turnHeader, dim: true });
-      }
-    }
-    lines.push(colLine);
-
     const available = Math.max(0, maxRows - 1); // minus col header
     const toShow = this.turnHistory.slice(-Math.max(0, available));
 
-    toShow.forEach((t, i) => {
-      if (lines.length >= maxRows) return;
-      const turnNum = this.turnHistory.length - toShow.length + i + 1;
-      const total = t.input + t.output + t.cacheRead + t.cacheWrite;
-      const cells: Array<[string, string]> = [
-        [String(turnNum).padStart(3), C.dim],
-        [fmtTok(t.input).padStart(9),      C.input],
-        [fmtTok(t.output).padStart(9),     C.output],
-        [fmtTok(t.cacheRead).padStart(6),  C.cacheRead],
-        [fmtTok(t.cacheWrite).padStart(6), C.cacheWrite],
-        [fmtTok(total).padStart(9),        C.value],
-      ];
-      lines.push(buildStyledPanelLine(width, cells.map(([val, color]) => ({ text: val, fg: color }))));
-    });
-
-    return lines;
+    // Width-aware aligned table via the shared primitive (replaces manual
+    // per-cell column math, which miscounts on wide glyphs).
+    return buildTable(
+      width,
+      [
+        { label: '#', width: 4, align: 'right' },
+        { label: 'Input', width: 9, align: 'right' },
+        { label: 'Output', width: 9, align: 'right' },
+        { label: 'CR', width: 7, align: 'right' },
+        { label: 'CW', width: 7, align: 'right' },
+        { label: 'Total', align: 'right' },
+      ],
+      toShow.map((t, i) => {
+        const turnNum = this.turnHistory.length - toShow.length + i + 1;
+        const total = t.input + t.output + t.cacheRead + t.cacheWrite;
+        return {
+          cells: [
+            { text: String(turnNum), fg: C.dim },
+            { text: fmtTok(t.input), fg: C.input },
+            { text: fmtTok(t.output), fg: C.output },
+            { text: fmtTok(t.cacheRead), fg: C.cacheRead },
+            { text: fmtTok(t.cacheWrite), fg: C.cacheWrite },
+            { text: fmtTok(total), fg: C.value },
+          ],
+        };
+      }),
+      { ...DEFAULT_PANEL_PALETTE, label: C.turnHeader },
+    );
   }
 
   /** Paint a plain text string into a new Line. */

package/src/panels/tool-inspector-panel.ts

@@ -13,26 +13,19 @@ import {
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
+import { formatDuration } from '../utils/format-duration.ts';
 
-const C = {
-  headerBg:    '#1a1a2e',
-  headerFg:    '#ffffff',
-  statusBar:   '#222233',
-  statusFg:    '#aaaaaa',
-  toolFg:      '#00ccff',
-  resultFg:    '#66ddff',
-  errorFg:     '#ff6666',
-  durationFg:  '#aaaa66',
-  argsFg:      '#aaaaaa',
-  dimFg:       '#555566',
-  selected:    '#00ffff',
-  selectedBg:  '#1a2a3a',
-  labelFg:     '#8888bb',
-  filterFg:    '#ffcc44',
-} as const;
+// Panel-specific accents only; shared tones come from DEFAULT_PANEL_PALETTE so
+// theme changes propagate. selectedBg->selectBg, errorFg->bad are shared keys.
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  selected: '#00ffff',
+  toolFg:   '#00ccff',
+  argsFg:   '#aaaaaa',
+});
 
 const MAX_ENTRIES = 500;
 
@@ -64,14 +57,12 @@ function shortTime(ms: number): string {
 }
 
 function formatMs(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
-  return `${Math.floor(ms / 60000)}m${Math.floor((ms % 60000) / 1000)}s`;
+  return formatDuration(ms);
 }
 
 function truncateJson(val: unknown, maxLen = 120): string {
   const s = JSON.stringify(val) ?? 'null';
-  return s.length > maxLen ? s.slice(0, maxLen - 1) + '\u2026' : s;
+  return truncateDisplay(s, maxLen);
 }
 
 function summarizeResult(result: unknown): string | undefined {
@@ -81,7 +72,7 @@ function summarizeResult(result: unknown): string | undefined {
   const record = result as Record<string, unknown>;
   if (typeof record.preview === 'string' && record.preview.trim()) {
     const compact = record.preview.replace(/\s+/g, ' ').trim();
-    return compact.length > 72 ? `${compact.slice(0, 69)}\u2026` : compact;
+    return truncateDisplay(compact, 72);
   }
   if (typeof record.kind === 'string' && typeof record.byteSize === 'number') {
     return `${record.kind} (${record.byteSize}B)`;
@@ -150,22 +141,23 @@ export class ToolInspectorPanel extends BasePanel {
     if (height <= 0 || width <= 0) return [];
 
     const running = this.records.filter(r => r.endMs === undefined).length;
+    const distinctTools = new Set(this.records.map((r) => r.tool)).size;
     const filterLabel = this.filterMode === 'all' ? '' : ` [${this.filterMode}]`;
     const title = ` Tools [${this.records.length} calls${running > 0 ? `, ${running} running` : ''}]${filterLabel}`;
-    const footerLines = [
-      buildPanelLine(width, [
-        [' Up/Down', DEFAULT_PANEL_PALETTE.info],
-        [' scroll', DEFAULT_PANEL_PALETTE.dim],
-        ['   Enter', DEFAULT_PANEL_PALETTE.info],
-        [' expand', DEFAULT_PANEL_PALETTE.dim],
-        ['   f', DEFAULT_PANEL_PALETTE.info],
-        [' filter', DEFAULT_PANEL_PALETTE.dim],
-        ['   c', DEFAULT_PANEL_PALETTE.info],
-        [' clear', DEFAULT_PANEL_PALETTE.dim],
-        ['   g', DEFAULT_PANEL_PALETTE.info],
-        [' end', DEFAULT_PANEL_PALETTE.dim],
-      ]),
+    // Context-aware footer: only advertise keys that do something in the current
+    // state — filter needs >1 tool, clear/end need at least one call.
+    const footerSegments: Array<[string, string, string?]> = [
+      [' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll', DEFAULT_PANEL_PALETTE.dim],
+      ['   Enter', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim],
     ];
+    if (distinctTools > 1) {
+      footerSegments.push(['   f', DEFAULT_PANEL_PALETTE.info], [' filter', DEFAULT_PANEL_PALETTE.dim]);
+    }
+    if (this.records.length > 0) {
+      footerSegments.push(['   c', DEFAULT_PANEL_PALETTE.info], [' clear', DEFAULT_PANEL_PALETTE.dim]);
+      footerSegments.push(['   g', DEFAULT_PANEL_PALETTE.info], [this.autoScroll ? ' end (live)' : ' jump to end', DEFAULT_PANEL_PALETTE.dim]);
+    }
+    const footerLines = [buildPanelLine(width, footerSegments)];
 
     const flat = this._getFlat();
 
@@ -182,9 +174,15 @@ export class ToolInspectorPanel extends BasePanel {
             title: 'Calls',
             lines: buildEmptyState(
               width,
-              ' No tool calls yet',
-              'Tool executions appear here as the agent works. Expand a call to inspect its arguments and result payload.',
-              [],
+              this.records.length > 0 && this.filterMode !== 'all'
+                ? ` No "${this.filterMode}" calls`
+                : ' No tool calls yet',
+              this.records.length > 0 && this.filterMode !== 'all'
+                ? 'The active tool filter hides every recorded call.'
+                : 'Tool executions appear here as the agent works. Expand a call to inspect its arguments and result payload.',
+              this.records.length > 0 && this.filterMode !== 'all'
+                ? [{ command: 'f', summary: 'cycle the tool filter back to all calls' }]
+                : [{ command: '/spawn <task>', summary: 'run an agent to populate the tool-call timeline' }],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -271,7 +269,7 @@ export class ToolInspectorPanel extends BasePanel {
   }
 
   private _renderRow(width: number, row: FlatRow, isCursor: boolean): Line {
-    const bg = isCursor ? C.selectedBg : '';
+    const bg = isCursor ? C.selectBg : '';
     if (row.kind === 'call') {
       return buildStyledPanelLine(width, [
         { text: isCursor ? '▸' : ' ', fg: C.selected, bg, bold: isCursor },
@@ -280,7 +278,7 @@ export class ToolInspectorPanel extends BasePanel {
     }
     return buildStyledPanelLine(width, [
       { text: '  ', fg: C.argsFg, bg },
-      { text: truncateDisplay(row.text, Math.max(0, width - 2)), fg: row.isError ? C.errorFg : C.argsFg, bg },
+      { text: truncateDisplay(row.text, Math.max(0, width - 2)), fg: row.isError ? C.bad : C.argsFg, bg },
     ]);
   }
 

package/src/panels/types.ts

@@ -1,5 +1,20 @@
 import type { Line } from '../types/grid.ts';
+import type { StatusState } from '../renderer/status-glyphs.ts';
 import type { ComponentResourceContract, ComponentHealthState } from '../runtime/perf/panel-contracts.ts';
+// Routed through the `@/` alias (not `./panel-manager.ts`) so this foundational
+// types module stays a leaf in the relative-import graph the architecture
+// cycle-checker walks. Type-only, erased at runtime — no real dependency edge.
+import type { PanelManager } from '@/panels/panel-manager.ts';
+
+/**
+ * Context passed to a panel's `handlePanelIntegrationAction` hook so it can
+ * drive cross-panel behavior (e.g. file-explorer opening the preview panel)
+ * without the input layer needing `instanceof` knowledge of each panel type.
+ */
+export interface PanelIntegrationContext {
+  readonly panelManager: PanelManager;
+  readonly executeCommand?: (name: string, args: string[]) => Promise<unknown>;
+}
 
 /**
  * Named logical key identifiers emitted by the input tokenizer.
@@ -67,6 +82,16 @@ export interface Panel {
   // Scroll input (optional)
   // Positive delta scrolls down; negative delta scrolls up.
   handleScroll?(deltaRows: number): boolean;
+
+  /**
+   * Cross-panel integration hook (optional). Called before the panel's own
+   * `handleInput` when a navigation/confirm key is pressed, so a panel can
+   * drive another panel (e.g. open a file in the preview panel). Return `true`
+   * to consume the key. The legacy `handlePanelIntegrationAction` router in
+   * `src/input/panel-integration-actions.ts` consults this first, then falls
+   * back to its built-in `instanceof` routing.
+   */
+  handlePanelIntegrationAction?(key: string, ctx: PanelIntegrationContext): boolean;
 }
 
 export interface PanelRegistration extends Pick<Panel, 'id' | 'name' | 'icon' | 'category'> {

package/src/panels/watchers-panel.ts

@@ -4,9 +4,11 @@ import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { UiReadModel, UiWatchersSnapshot } from '../runtime/ui-read-models.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
+  buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
@@ -59,10 +61,18 @@ export class WatchersPanel extends ScrollableListPanel<WatcherEntry> {
   public constructor(readModel?: UiReadModel<UiWatchersSnapshot>) {
     super('watchers', 'Watchers', 'W', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter watchers';
     this.readModel = readModel;
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
 
+  protected override filterMatches(watcher: WatcherEntry, q: string): boolean {
+    return watcher.label.toLowerCase().includes(q)
+      || watcher.state.toLowerCase().includes(q)
+      || String(watcher.sourceStatus ?? '').toLowerCase().includes(q);
+  }
+
   public override onDestroy(): void {
     this.unsub?.();
   }
@@ -144,7 +154,7 @@ export class WatchersPanel extends ScrollableListPanel<WatcherEntry> {
     this.clampSelection();
     const selected = watchers[this.selectedIndex]!;
 
-    const footerLines: Line[] = [
+    const detailRows: Line[] = [
       buildPanelLine(width, [
         ['  Watcher: ', C.label],
         [selected.label, C.value],
@@ -171,23 +181,33 @@ export class WatchersPanel extends ScrollableListPanel<WatcherEntry> {
       ]),
     ];
     if (selected.degradedReason) {
-      footerLines.push(buildPanelLine(width, [
+      detailRows.push(buildPanelLine(width, [
         ['  Reason: ', C.label],
         [truncateDisplay(selected.degradedReason, Math.max(0, width - 11)), C.warn],
       ]));
     }
     if (selected.lastError) {
-      footerLines.push(buildPanelLine(width, [
+      detailRows.push(buildPanelLine(width, [
         ['  Error: ', C.label],
         [truncateDisplay(selected.lastError, Math.max(0, width - 10)), C.error],
       ]));
     }
-    footerLines.push(buildPanelLine(width, [['  Up/Down move through watchers', C.dim]]));
+
+    const hints = this.filterActive
+      ? [{ keys: 'type', label: 'filter' }, { keys: 'Enter', label: 'apply' }, { keys: 'Esc', label: 'clear' }]
+      : [
+          { keys: 'Up/Down', label: 'move' },
+          { keys: '/schedule list', label: 'consumers' },
+          { keys: '/', label: 'filter' },
+        ];
 
     return this.renderList(width, height, {
       title: 'Watchers',
       header: headerLines,
-      footer: footerLines,
+      footer: [
+        ...buildDetailBlock(width, `Watcher · ${selected.label}`, detailRows, C),
+        buildKeyboardHints(width, hints, C),
+      ],
     });
   }
 }