@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/src/panels/debug-panel.ts

@@ -1,5 +1,6 @@
 import { BasePanel } from './base-panel.ts';
 import { createEmptyLine, createStyledCell, type Line } from '../types/grid.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import type { TurnEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { Orchestrator } from '../core/orchestrator';
@@ -14,6 +15,8 @@ import {
   extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
+import { abbreviateCount } from '../utils/format-number.ts';
+import { formatLatencyMs } from '../utils/format-duration.ts';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -68,16 +71,11 @@ const LATENCY_BAD_MS  = 5_000;
 // ---------------------------------------------------------------------------
 
 function fmtTok(n: number): string {
-  if (n < 10_000) return String(n);
-  if (n < 1_000_000) return (n / 1000).toFixed(1) + 'k';
-  return (n / 1_000_000).toFixed(2) + 'M';
+  return abbreviateCount(n, { guard: 10_000, decimals: 1, mDecimals: 2 });
 }
 
 function fmtMs(ms: number): string {
-  if (ms <= 0)       return 'n/a';
-  if (ms >= 10_000)  return `${(ms / 1000).toFixed(1)}s`;
-  if (ms >= 1_000)   return `${(ms / 1000).toFixed(2)}s`;
-  return `${Math.round(ms)}ms`;
+  return formatLatencyMs(ms);
 }
 
 function fmtAgo(ts: number): string {
@@ -315,10 +313,21 @@ export class DebugPanel extends BasePanel {
       }
     }
 
+    const latestError = this._errors[this._errors.length - 1];
+    const footerLines = latestError
+      ? [buildStyledPanelLine(width, [
+          { text: ' ✕ latest error  ', fg: C.bad },
+          { text: truncateDisplay(latestError.errorMessage ?? 'unknown error', Math.max(0, width - 18)), fg: C.dim },
+        ])]
+      : [buildStyledPanelLine(width, [
+          { text: ' Live feed — newest calls at the bottom; auto-follows.', fg: C.dim },
+        ])];
+
     return buildPanelWorkspace(width, height, {
       title: ' API Debug',
       intro: 'Recent provider calls, token deltas, latency, status codes, and error history.',
       sections,
+      footerLines,
       palette: DEFAULT_PANEL_PALETTE,
     });
   }
@@ -330,16 +339,42 @@ export class DebugPanel extends BasePanel {
   private _renderSummary(width: number): Line[] {
     const errCount = this._totalErrors;
     const okCount  = this._totalCalls - this._totalErrors;
-    return [
+    const last = this._calls[this._calls.length - 1];
+    const recent = this._calls.slice(-10);
+    const avgLat = recent.length > 0
+      ? Math.round(recent.reduce((s, c) => s + c.latencyMs, 0) / recent.length)
+      : 0;
+    const sessionTokens = this._calls.reduce((s, c) => s + c.inputTokens + c.outputTokens, 0);
+
+    const lines: Line[] = [
       buildStyledPanelLine(width, [
-        { text: ' Calls: ', fg: C.label },
+        { text: ' Calls ', fg: C.label },
         { text: String(this._totalCalls), fg: C.value },
-        { text: '  OK: ', fg: C.label },
+        { text: '   OK ', fg: C.label },
         { text: String(okCount), fg: C.good },
-        { text: '  Errors: ', fg: C.label },
+        { text: '   Errors ', fg: C.label },
         { text: String(errCount), fg: errCount > 0 ? C.bad : C.dim },
+        { text: '   Avg latency ', fg: C.label },
+        { text: fmtMs(avgLat), fg: avgLat > 0 ? latColor(avgLat) : C.dim },
+        { text: '   Tokens ', fg: C.label },
+        { text: fmtTok(sessionTokens), fg: C.value },
       ]),
     ];
+    // Live status: most recent call (latency / age) or wiring hint.
+    if (last) {
+      lines.push(buildStyledPanelLine(width, [
+        { text: ' Last ', fg: C.label },
+        { text: last.status === 'ok' ? '✓ ' : '✕ ', fg: last.status === 'ok' ? C.good : C.bad },
+        { text: fitDisplay(last.model, 22), fg: C.value },
+        { text: '  ' + fmtMs(last.latencyMs), fg: latColor(last.latencyMs) },
+        { text: '  ' + fmtAgo(last.ts), fg: C.dim },
+      ]));
+    } else if (!this._orchestrator) {
+      lines.push(buildStyledPanelLine(width, [
+        { text: ' Per-call token deltas need the orchestrator wired (wireOrchestrator).', fg: C.dim },
+      ]));
+    }
+    return lines;
   }
 
   private _renderCallLog(width: number): Line[] {
@@ -355,15 +390,15 @@ export class DebugPanel extends BasePanel {
   private _callLogHeader(width: number): Line {
     // Layout: time(8) status(2) provider(12) model(20) in(8) out(8) lat(8)
     const header = '  Time    S Provider     Model               In       Out      Lat';
-    return this._textLine(header.slice(0, width), C.colHdr, width, { dim: true });
+    return this._textLine(truncateDisplay(header, width), C.colHdr, width, { dim: true });
   }
 
   private _callLogRow(e: ApiCallEntry, width: number): Line {
     const timeStr    = fmtAgo(e.ts).padEnd(8);
     const statusChar = e.status === 'ok' ? '✓' : '✕';
     const statusFg   = e.status === 'ok' ? C.good : C.bad;
-    const provStr    = e.provider.slice(0, 11).padEnd(12);
-    const modelStr   = e.model.slice(0, 19).padEnd(20);
+    const provStr    = fitDisplay(e.provider, 12);
+    const modelStr   = fitDisplay(e.model, 20);
     const inStr      = fmtTok(e.inputTokens).padStart(8);
     const outStr     = fmtTok(e.outputTokens).padStart(8);
     const latStr     = fmtMs(e.latencyMs).padStart(8);
@@ -401,9 +436,9 @@ export class DebugPanel extends BasePanel {
   private _errorRow(e: ApiCallEntry, width: number): Line {
     const timeStr  = fmtAgo(e.ts).padEnd(8);
     const codeStr  = e.statusCode > 0 ? `[${e.statusCode}] ` : '';
-    const msgStr   = (e.errorMessage ?? 'unknown error').slice(0, width - 12 - codeStr.length);
+    const msgStr   = truncateDisplay(e.errorMessage ?? 'unknown error', Math.max(0, width - 12 - codeStr.length));
     const full     = `  ${timeStr} ${codeStr}${msgStr}`;
-    return this._textLine(full.slice(0, width), C.bad, width);
+    return this._textLine(truncateDisplay(full, width), C.bad, width);
   }
 
   // -------------------------------------------------------------------------

package/src/panels/diff-panel.ts

@@ -4,6 +4,7 @@
 
 import type { Line } from '../types/grid.ts';
 import { createStyledCell, createEmptyLine } from '../types/grid.ts';
+import { truncateDisplay, getDisplayWidth } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
 import {
   buildBodyText,
@@ -21,14 +22,18 @@ import {
 
 const COLOR = {
   addition:    '#00ff88',
+  additionBg:  '#001a0d',
   deletion:    '#ff4444',
+  deletionBg:  '#1a0000',
   hunk:        '#88aaff',
+  hunkBg:      '#0a0a1a',
   header:      '#aaaaaa',
   lineNum:     '#555555',
   lineNumAdd:  '#00aa55',
   lineNumDel:  '#aa2222',
   filename:    '#ffffff',
   tabActive:   '#ffffff',
+  tabActiveBg: '#333333',
   tabInactive: '#666666',
   tabBg:       '#222222',
   context:     '#888888',
@@ -47,6 +52,17 @@ interface DiffEntry {
   semanticSummary?: string;
 }
 
+/** +added / -removed line counts for a parsed diff entry. */
+function diffStat(entry: DiffEntry): { added: number; removed: number } {
+  let added = 0;
+  let removed = 0;
+  for (const line of entry.lines) {
+    if (line.kind === 'addition') added++;
+    else if (line.kind === 'deletion') removed++;
+  }
+  return { added, removed };
+}
+
 type LineKind = 'addition' | 'deletion' | 'context' | 'hunk' | 'header';
 
 interface ParsedLine {
@@ -147,9 +163,7 @@ function makeLine(
   const LEFT_W = 5;
   const usedForNums = LEFT_W + 1 + LEFT_W + 1 + 2; // 14
   const contentWidth = Math.max(0, width - usedForNums);
-  const truncated = content.length > contentWidth
-    ? content.slice(0, contentWidth)
-    : content;
+  const truncated = truncateDisplay(content, contentWidth);
   return buildStyledPanelLine(width, [
     { text: leftNum.padStart(LEFT_W), fg: numFg, bg, dim: true },
     { text: ' ', fg: '', bg },
@@ -161,8 +175,7 @@ function makeLine(
 }
 
 function renderText(width: number, text: string, fg: string, bg: string, bold = false): Line {
-  const truncated = text.length > width ? text.slice(0, width) : text;
-  return buildStyledPanelLine(width, [{ text: truncated, fg, bg, bold }]);
+  return buildStyledPanelLine(width, [{ text: truncateDisplay(text, width), fg, bg, bold }]);
 }
 
 // ---------------------------------------------------------------------------
@@ -448,44 +461,60 @@ export class DiffPanel extends BasePanel {
 
   private renderTabBar(width: number): Line {
     const cells: Line = [];
+    const push = (ch: string, fg: string, bg: string, bold = false): void => {
+      const cw = getDisplayWidth(ch);
+      if (cells.length + cw > width) return;
+      cells.push(createStyledCell(ch, { fg, bg, bold }));
+      if (cw === 2 && cells.length < width) cells.push(createStyledCell('', { fg, bg }));
+    };
 
     for (let i = 0; i < this.entries.length; i++) {
       const entry = this.entries[i]!;
       const active = i === this.selectedFile;
-      const label = ` ${basename(entry.filePath)} `;
+      const stat = diffStat(entry);
       const fg = active ? COLOR.tabActive : COLOR.tabInactive;
-      const bg = active ? '#333333' : COLOR.tabBg;
-
-      for (const ch of label) {
-        if (cells.length >= width) break;
-        cells.push(createStyledCell(ch, { fg, bg, bold: active }));
-      }
-
-      if (cells.length < width) {
-        cells.push(createStyledCell('│', { fg: COLOR.lineNum, bg: COLOR.tabBg }));
-      }
+      const bg = active ? COLOR.tabActiveBg : COLOR.tabBg;
+      // Active file gets a leading marker; every tab shows +adds/-dels at a glance.
+      const marker = active ? '▸ ' : '  ';
+      const label = `${marker}${basename(entry.filePath)} `;
+      for (const ch of label) push(ch, fg, bg, active);
+      if (stat.added > 0) for (const ch of `+${stat.added}`) push(ch, COLOR.addition, bg, active);
+      if (stat.added > 0 && stat.removed > 0) push(' ', fg, bg);
+      if (stat.removed > 0) for (const ch of `-${stat.removed}`) push(ch, COLOR.deletion, bg, active);
+      push(' ', fg, bg);
+      push('│', COLOR.lineNum, COLOR.tabBg);
     }
 
-    // Fill remaining
     while (cells.length < width) {
       cells.push(createStyledCell(' ', { fg: '', bg: COLOR.tabBg }));
     }
-
     return cells.slice(0, width);
   }
 
   // ── Status bar ───────────────────────────────────────────────────────────
 
   private renderStatusBar(width: number, entry: DiffEntry | null): Line {
-    const fileInfo = entry
-      ? `${entry.filePath} [${this.selectedFile + 1}/${this.entries.length}]`
-      : 'No file';
-    const scroll = entry
-      ? `  L${this.scrollOffset + 1}/${entry.lines.length}  Tab: next file  Up/Down: scroll`
-      : '';
-    const semantic = entry?.semanticSummary ? `  * ${entry.semanticSummary}` : '';
-    const text = ` ${fileInfo}${scroll}${semantic}`;
-    return renderText(width, text, COLOR.tabActive, COLOR.statusBar);
+    if (!entry) {
+      return buildStyledPanelLine(width, [{ text: ' No file', fg: COLOR.tabInactive, bg: COLOR.statusBar }], { fillBg: COLOR.statusBar });
+    }
+    const stat = diffStat(entry);
+    // Keep the file path display-width-aware so a long/wide path can't overflow.
+    const pathBudget = Math.max(8, Math.floor(width / 2));
+    const fileInfo = truncateDisplay(entry.filePath, pathBudget);
+    const segments: Array<{ text: string; fg: string; bg?: string; bold?: boolean }> = [
+      { text: ` ${fileInfo} `, fg: COLOR.filename, bg: COLOR.statusBar, bold: true },
+      { text: `[${this.selectedFile + 1}/${this.entries.length}]`, fg: COLOR.tabInactive, bg: COLOR.statusBar },
+      { text: '  +', fg: COLOR.tabInactive, bg: COLOR.statusBar },
+      { text: String(stat.added), fg: COLOR.addition, bg: COLOR.statusBar },
+      { text: ' -', fg: COLOR.tabInactive, bg: COLOR.statusBar },
+      { text: String(stat.removed), fg: COLOR.deletion, bg: COLOR.statusBar },
+      { text: `  L${this.scrollOffset + 1}/${entry.lines.length}`, fg: COLOR.tabInactive, bg: COLOR.statusBar },
+      { text: '  Tab next  ↑/↓ scroll', fg: COLOR.context, bg: COLOR.statusBar },
+    ];
+    if (entry.semanticSummary) {
+      segments.push({ text: `  ◈ ${entry.semanticSummary}`, fg: COLOR.hunk, bg: COLOR.statusBar });
+    }
+    return buildStyledPanelLine(width, segments, { fillBg: COLOR.statusBar });
   }
 
   // ── Parsed line ──────────────────────────────────────────────────────────
@@ -496,11 +525,11 @@ export class DiffPanel extends BasePanel {
 
     switch (pl.kind) {
       case 'addition':
-        return makeLine(width, left, right, `+ ${pl.text}`, COLOR.addition, '#001a0d', COLOR.lineNumAdd, true);
+        return makeLine(width, left, right, `+ ${pl.text}`, COLOR.addition, COLOR.additionBg, COLOR.lineNumAdd, true);
       case 'deletion':
-        return makeLine(width, left, right, `- ${pl.text}`, COLOR.deletion, '#1a0000', COLOR.lineNumDel, false);
+        return makeLine(width, left, right, `- ${pl.text}`, COLOR.deletion, COLOR.deletionBg, COLOR.lineNumDel, false);
       case 'hunk':
-        return renderText(width, pl.text, COLOR.hunk, '#0a0a1a', false);
+        return renderText(width, pl.text, COLOR.hunk, COLOR.hunkBg, false);
       case 'header':
         return renderText(width, pl.text, COLOR.header, '', false);
       case 'context':

package/src/panels/docs-panel.ts

@@ -4,7 +4,7 @@
 
 import type { Line } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
-import { buildPanelLine, buildPanelWorkspace, buildSearchInputLine, resolveScrollablePanelSection, extendPalette, DEFAULT_PANEL_PALETTE } from './polish.ts';
+import { buildKeyboardHints, buildPanelLine, buildPanelWorkspace, buildSearchInputLine, resolveScrollablePanelSection, extendPalette, DEFAULT_PANEL_PALETTE } from './polish.ts';
 import type { ProviderModelCatalogQuery, ToolCatalogQuery } from '../runtime/ui-service-queries.ts';
 import {
   getPanelSearchFocusTransition,
@@ -152,9 +152,24 @@ export class DocsPanel extends BasePanel {
         buildSearchInputLine(width, '', searchLine.trimStart(), DEFAULT_PANEL_PALETTE, { active: this.searching }),
       ],
     } as const;
+    // Context-aware footer: while searching, surface only the keys that work in
+    // the search field; otherwise surface section + navigation keys.
+    const footerLines = [this.searching
+      ? buildKeyboardHints(width, [
+          { keys: 'type', label: 'filter' },
+          { keys: 'Enter/Esc', label: 'apply / exit search' },
+          { keys: '↓', label: 'back to list' },
+        ], DEFAULT_PANEL_PALETTE)
+      : buildKeyboardHints(width, [
+          { keys: 't/m/k', label: 'tools / models / shortcuts' },
+          { keys: '↑/↓', label: 'navigate' },
+          { keys: '/', label: 'search' },
+        ], DEFAULT_PANEL_PALETTE)];
+
     const sectionWindow = resolveScrollablePanelSection(width, height, {
       intro: 'Browse built-in tool docs, available models, and keyboard shortcuts from one shared reference surface.',
       palette: DEFAULT_PANEL_PALETTE,
+      footerLines,
       beforeSections: [controlsSection],
       section: {
         title: sectionLabel,
@@ -176,6 +191,7 @@ export class DocsPanel extends BasePanel {
         controlsSection,
         sectionWindow.section.lines.length > 0 ? sectionWindow.section : { title: sectionLabel, lines: [buildPanelLine(width, [[' No matching docs', DEFAULT_PANEL_PALETTE.dim]])] },
       ],
+      footerLines,
       palette: DEFAULT_PANEL_PALETTE,
     });
   }
@@ -207,7 +223,7 @@ export class DocsPanel extends BasePanel {
       const tools = this.toolRegistry?.list() ?? [];
       const filtered = q ? tools.filter(t => t.definition.name.toLowerCase().includes(q) || (t.definition.description ?? '').toLowerCase().includes(q)) : tools;
       if (filtered.length === 0) {
-        rows.push({ kind: 'empty', text: ' No tools match.', fg: C.dim, bg: '' });
+        rows.push({ kind: 'empty', text: q ? ` No tools match "${this.searchQuery}". Press Esc to clear the filter.` : ' Tool registry not wired into this session.', fg: C.dim, bg: '' });
       } else {
         rows.push({ kind: 'header', text: ` Tools (${filtered.length})`, fg: C.sectionFg, bg: C.sectionBg, bold: true });
         for (const tool of filtered) {
@@ -237,7 +253,7 @@ export class DocsPanel extends BasePanel {
       const models = this.providerRegistry?.listModels() ?? [];
       const filtered = q ? models.filter(m => m.id.toLowerCase().includes(q) || m.displayName.toLowerCase().includes(q) || m.provider.toLowerCase().includes(q)) : models;
       if (filtered.length === 0) {
-        rows.push({ kind: 'empty', text: ' No models match.', fg: C.dim, bg: '' });
+        rows.push({ kind: 'empty', text: q ? ` No models match "${this.searchQuery}". Press Esc to clear the filter.` : ' Provider registry not wired into this session.', fg: C.dim, bg: '' });
       } else {
         // Group by provider
         const byProvider = new Map<string, typeof filtered>();