@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/cost-tracker-panel.ts

@@ -4,20 +4,26 @@
 
 import type { Line } from '../types/grid.ts';
 import { createStyledCell, createEmptyLine } from '../types/grid.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
 import type { AgentEvent, TurnEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { AgentRecord } from '@pellux/goodvibes-sdk/platform/tools';
 import {
   buildEmptyState,
+  buildKeyboardHints,
+  buildMeterLine,
   buildPanelLine,
   buildStyledPanelLine,
+  buildTable,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
+  extendPalette,
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { getPricing } from '../export/cost-utils.ts';
+import { calcSessionCost } from '../export/cost-utils.ts';
+import { abbreviateCount } from '../utils/format-number.ts';
 
 // Pricing lookups are provided by ../export/cost-utils.ts (single source of truth).
 
@@ -29,9 +35,7 @@ function formatCost(usd: number): string {
 }
 
 function formatTokens(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
-  return String(n);
+  return abbreviateCount(n);
 }
 
 // ---------------------------------------------------------------------------
@@ -75,20 +79,13 @@ function buildSparkline(history: number[]): string {
 // Colour palette
 // ---------------------------------------------------------------------------
 
-const C = {
-  header:    '#ffffff',
-  label:     '#aaaaaa',
-  value:     '#00ff88',
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   cost:      '#ffdd44',
-  alert:     '#ff4444',
-  dim:       '#555555',
   model:     '#88aaff',
   running:   '#88aaff',
-  done:      '#00ff88',
-  failed:    '#ff4444',
   separator: '#333333',
   bg:        '',
-} as const;
+});
 
 // ---------------------------------------------------------------------------
 // CostTrackerPanel
@@ -150,7 +147,7 @@ export class CostTrackerPanel extends BasePanel {
       agentEvents.on('AGENT_SPAWNING', (payload) => {
         this.agents.set(payload.agentId, {
           id: payload.agentId.slice(0, 8),
-          task: payload.task.length > 40 ? payload.task.slice(0, 37) + '...' : payload.task,
+          task: truncateDisplay(payload.task, 40),
           model: 'unknown',
           inputTokens: 0,
           outputTokens: 0,
@@ -172,8 +169,7 @@ export class CostTrackerPanel extends BasePanel {
             if (rec?.usage) {
               entry.inputTokens = rec.usage.inputTokens + (rec.usage.cacheReadTokens ?? 0) + (rec.usage.cacheWriteTokens ?? 0);
               entry.outputTokens = rec.usage.outputTokens;
-              const pricing = getPricing(rec.model ?? 'unknown');
-              entry.cost = (entry.inputTokens * pricing.input + entry.outputTokens * pricing.output) / 1_000_000;
+              entry.cost = calcSessionCost(rec.usage.inputTokens, rec.usage.outputTokens, rec.usage.cacheReadTokens ?? 0, rec.usage.cacheWriteTokens ?? 0, rec.model ?? 'unknown');
               if (rec.model && rec.model !== 'unknown') entry.model = rec.model;
             }
           }
@@ -205,9 +201,7 @@ export class CostTrackerPanel extends BasePanel {
     if (usage.model) this.sessionModel = usage.model;
 
     // Record cost delta for sparkline
-    const pricing = getPricing(this.sessionModel);
-    const billableInput = usage.input + usage.cacheRead + usage.cacheWrite;
-    const totalCost = (billableInput * pricing.input + usage.output * pricing.output) / 1_000_000;
+    const totalCost = calcSessionCost(usage.input, usage.output, usage.cacheRead, usage.cacheWrite, this.sessionModel);
     const delta = Math.max(0, totalCost - this.lastSessionCost);
     this.lastSessionCost = totalCost;
     this.costHistory.push(delta);
@@ -267,13 +261,12 @@ export class CostTrackerPanel extends BasePanel {
   render(width: number, height: number): Line[] {
     if (height <= 0 || width <= 0) return [];
 
-    const pricing = getPricing(this.sessionModel);
     const totalInputTokens = this.sessionUsage.input + this.sessionUsage.cacheRead + this.sessionUsage.cacheWrite;
-    const sessionCost = (totalInputTokens * pricing.input + this.sessionUsage.output * pricing.output) / 1_000_000;
+    const sessionCost = calcSessionCost(this.sessionUsage.input, this.sessionUsage.output, this.sessionUsage.cacheRead, this.sessionUsage.cacheWrite, this.sessionModel);
     const overBudget = this.budgetThreshold > 0 && sessionCost > this.budgetThreshold;
     const sparkline = buildSparkline(this.costHistory);
     const costStr = formatCost(sessionCost);
-    const costFg = overBudget ? C.alert : C.cost;
+    const costFg = overBudget ? C.bad : C.cost;
     const budgetStr = this.budgetThreshold > 0
       ? ` / ${formatCost(this.budgetThreshold)}`
       : '';
@@ -281,7 +274,21 @@ export class CostTrackerPanel extends BasePanel {
     const sessionLines: Line[] = [
       this.renderKeyValue(width, ' Total', `${costStr}${budgetStr}${alertStr}`, costFg),
     ];
-    if (sparkline.length > 0) sessionLines.push(this.renderLabeledLine(width, ' Trend', sparkline, C.value));
+    // Budget meter — the single most important glance for this panel: how much
+    // of the configured budget the session has consumed. Only shown when a
+    // budget is set (otherwise the bar would be meaningless).
+    if (this.budgetThreshold > 0) {
+      const ratio = sessionCost / this.budgetThreshold;
+      const BAR_W = 24;
+      const filled = Math.max(0, Math.min(BAR_W, Math.round(ratio * BAR_W)));
+      const meterFg = overBudget ? C.bad : ratio >= 0.8 ? C.warn : C.good;
+      const pctStr = `${Math.round(ratio * 100)}%`;
+      sessionLines.push(buildMeterLine(width, filled, BAR_W,
+        { filled: meterFg, empty: C.separator, label: C.label },
+        { prefix: ' Budget [', suffix: `] ${pctStr}` },
+      ));
+    }
+    if (sparkline.length > 0) sessionLines.push(this.renderLabeledLine(width, ' Trend', sparkline, C.good));
     sessionLines.push(this.renderKeyValue(width, ' Input',  formatTokens(this.sessionUsage.input),  C.label));
     sessionLines.push(this.renderKeyValue(width, ' Output', formatTokens(this.sessionUsage.output), C.label));
     if (this.sessionUsage.cacheRead > 0 || this.sessionUsage.cacheWrite > 0) {
@@ -299,35 +306,63 @@ export class CostTrackerPanel extends BasePanel {
     ];
 
     const agentList = Array.from(this.agents.values());
+    const scrollableAgents = agentList.length > 5;
+    // Footer hints adapt to whether the agent list is long enough to scroll.
+    const hintRow = scrollableAgents
+      ? buildKeyboardHints(width, [
+          { keys: 'Up/Down', label: 'scroll agents' },
+          { keys: 'PgUp/PgDn', label: 'page' },
+        ], DEFAULT_PANEL_PALETTE)
+      : buildKeyboardHints(width, [
+          { keys: '/cost budget <usd>', label: 'set budget alert' },
+        ], DEFAULT_PANEL_PALETTE);
     if (agentList.length > 0) {
       const planCost = agentList.reduce((sum, a) => sum + a.cost, 0);
+      const running = agentList.filter((a) => a.status === 'running').length;
+      const failed = agentList.filter((a) => a.status === 'failed').length;
       const agentRows: Line[] = [
-        this.renderKeyValue(width, ' Plan total', formatCost(planCost + sessionCost), C.cost),
-        this.renderDivider(width),
+        buildStyledPanelLine(width, [
+          { text: ' Plan total ', fg: C.label },
+          { text: formatCost(planCost + sessionCost), fg: C.cost, bold: true },
+          { text: `  ${agentList.length} agent${agentList.length === 1 ? '' : 's'}`, fg: C.dim },
+          ...(running > 0 ? [{ text: `  ${running} running`, fg: C.running }] : []),
+          ...(failed > 0 ? [{ text: `  ${failed} failed`, fg: C.bad }] : []),
+        ]),
+        // Per-agent cost ledger as an aligned table — agent, model, tokens, cost
+        // line up in columns instead of wrapping across two ragged rows.
+        ...buildTable(
+          width,
+          [
+            { label: 'Agent', width: 14 },
+            { label: 'Model', width: 18 },
+            { label: 'In', width: 7, align: 'right' },
+            { label: 'Out', width: 7, align: 'right' },
+            { label: 'Cost', align: 'right' },
+          ],
+          agentList.map((agent) => {
+            const statusFg = agent.status === 'running' ? C.running
+              : agent.status === 'failed' ? C.bad
+              : C.good;
+            const statusIcon = agent.status === 'running' ? '…'
+              : agent.status === 'failed' ? '✕'
+              : '✓';
+            return {
+              cells: [
+                { text: `${statusIcon} ${agent.id}`, fg: statusFg },
+                { text: agent.model, fg: C.model },
+                { text: agent.inputTokens > 0 ? formatTokens(agent.inputTokens) : '-', fg: C.dim },
+                { text: agent.outputTokens > 0 ? formatTokens(agent.outputTokens) : '-', fg: C.dim },
+                { text: agent.cost > 0 ? formatCost(agent.cost) : '-', fg: agent.cost > 0 ? C.cost : C.dim },
+              ],
+            };
+          }),
+          DEFAULT_PANEL_PALETTE,
+        ),
       ];
-      for (const agent of agentList) {
-        const statusFg = agent.status === 'running' ? C.running
-          : agent.status === 'failed' ? C.failed
-          : C.done;
-        const statusIcon = agent.status === 'running' ? '…'
-          : agent.status === 'failed' ? '✕'
-          : '✓';
-
-        const agentLabel = `${statusIcon} ${agent.id}`;
-        const taskText = agent.task;
-        agentRows.push(this.renderAgent(width, agentLabel, taskText, statusFg));
-
-        if (agent.inputTokens > 0 || agent.outputTokens > 0) {
-          const tokenInfo = `  in:${formatTokens(agent.inputTokens)} out:${formatTokens(agent.outputTokens)} ${formatCost(agent.cost)}`;
-          agentRows.push(this.renderLabeledLine(width, '', tokenInfo, C.dim));
-        }
-      }
       const sessionSection: PanelWorkspaceSection = sections[0]!;
       const agentsSection = resolveScrollablePanelSection(width, height, {
         intro: 'Track per-session and per-agent token spend using model pricing and live usage snapshots.',
-        footerLines: [
-          buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll agents', DEFAULT_PANEL_PALETTE.dim]]),
-        ],
+        footerLines: [hintRow],
         palette: DEFAULT_PANEL_PALETTE,
         beforeSections: [sessionSection],
         section: {
@@ -335,6 +370,7 @@ export class CostTrackerPanel extends BasePanel {
           scrollableLines: agentRows,
           scrollOffset: this.scrollOffset,
           minRows: 4,
+          appendWindowSummary: scrollableAgents ? { dimColor: DEFAULT_PANEL_PALETTE.dim } : undefined,
         },
       });
       this.scrollOffset = agentsSection.scrollOffset;
@@ -346,7 +382,9 @@ export class CostTrackerPanel extends BasePanel {
           width,
           ' No agents spawned this session',
           'Agent-level cost estimates appear here once delegated or background agents start running.',
-          [],
+          [
+            { command: '/cost budget <usd>', summary: 'set a session budget alert to track spend against a cap' },
+          ],
           DEFAULT_PANEL_PALETTE,
         ),
       });
@@ -356,9 +394,7 @@ export class CostTrackerPanel extends BasePanel {
       title: ' Cost Tracker',
       intro: 'Track per-session and per-agent token spend using model pricing and live usage snapshots.',
       sections,
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll agents', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
+      footerLines: [hintRow],
       palette: DEFAULT_PANEL_PALETTE,
     });
   }
@@ -370,7 +406,7 @@ export class CostTrackerPanel extends BasePanel {
   private renderKeyValue(width: number, label: string, value: string, valueFg: string): Line {
     const LABEL_W = 10;
     return buildStyledPanelLine(width, [
-      { text: label.padEnd(LABEL_W).slice(0, LABEL_W), fg: C.label, bg: C.bg },
+      { text: fitDisplay(label, LABEL_W), fg: C.label, bg: C.bg },
       { text: ': ', fg: C.dim, bg: C.bg },
       { text: value, fg: valueFg, bg: C.bg, bold: true },
     ]);
@@ -378,23 +414,9 @@ export class CostTrackerPanel extends BasePanel {
 
   private renderLabeledLine(width: number, label: string, value: string, valueFg: string): Line {
     return buildStyledPanelLine(width, [
-      ...(label.length > 0 ? [{ text: `${label.slice(0, 10).padEnd(10)} `, fg: C.label }] : []),
+      ...(label.length > 0 ? [{ text: `${fitDisplay(label, 10)} `, fg: C.label }] : []),
       { text: value, fg: valueFg },
     ]);
   }
 
-  private renderAgent(width: number, label: string, task: string, fg: string): Line {
-    const LABEL_W = 12;
-    const remaining = width - LABEL_W - 1;
-    const trimmed = task.length > remaining ? task.slice(0, remaining - 3) + '...' : task;
-    return buildStyledPanelLine(width, [
-      { text: `${label.padEnd(LABEL_W).slice(0, LABEL_W)} `, fg, bold: true },
-      { text: trimmed, fg: C.label },
-    ]);
-  }
-
-  private renderDivider(width: number): Line {
-    return buildStyledPanelLine(width, [{ text: '─'.repeat(width), fg: C.separator }]);
-  }
-
 }

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';
@@ -11,8 +12,11 @@ import {
   resolveScrollablePanelSection,
   resolveStackedScrollableSections,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
+import { abbreviateCount } from '../utils/format-number.ts';
+import { formatLatencyMs } from '../utils/format-duration.ts';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -52,24 +56,12 @@ const MAX_ERROR_LOG  = 20;
 // Colors
 // ---------------------------------------------------------------------------
 
-const C = {
-  title:      '#00ffff',
-  ok:         '#5fd700',
-  error:      '#ff5f5f',
-  warn:       '#ffaf00',
-  label:      '244',
-  value:      '252',
-  dim:        '240',
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   provName:   '#e2e8f0',
-  separator:  '#374151',
   input:      '#00ffff',
   output:     '#d000ff',
-  latGood:    '#5fd700',
-  latWarn:    '#ffaf00',
-  latBad:     '#ff5f5f',
-  sectionHdr: '238',
   colHdr:     '242',
-} as const;
+});
 
 const LATENCY_WARN_MS = 2_000;
 const LATENCY_BAD_MS  = 5_000;
@@ -79,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 {
@@ -99,9 +86,9 @@ function fmtAgo(ts: number): string {
 }
 
 function latColor(ms: number): string {
-  if (ms >= LATENCY_BAD_MS)  return C.latBad;
-  if (ms >= LATENCY_WARN_MS) return C.latWarn;
-  return C.latGood;
+  if (ms >= LATENCY_BAD_MS)  return C.bad;
+  if (ms >= LATENCY_WARN_MS) return C.warn;
+  return C.good;
 }
 
 function statusCodeFromError(msg: string): number {
@@ -326,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,
     });
   }
@@ -341,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: String(okCount), fg: C.ok },
-        { text: '  Errors: ', fg: C.label },
-        { text: String(errCount), fg: errCount > 0 ? C.error : C.dim },
+        { text: '   OK ', fg: C.label },
+        { text: String(okCount), fg: C.good },
+        { 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[] {
@@ -366,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.ok : C.error;
-    const provStr    = e.provider.slice(0, 11).padEnd(12);
-    const modelStr   = e.model.slice(0, 19).padEnd(20);
+    const statusFg   = e.status === 'ok' ? C.good : C.bad;
+    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);
@@ -391,7 +415,7 @@ export class DebugPanel extends BasePanel {
 
     // Append status code for errors
     if (e.status === 'error' && e.statusCode > 0) {
-      segments.push({ text: ` [${e.statusCode}]`, fg: C.error });
+      segments.push({ text: ` [${e.statusCode}]`, fg: C.bad });
     }
 
     return buildStyledPanelLine(
@@ -412,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.error, 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':