@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/provider-health-panel.ts

@@ -1,4 +1,5 @@
 import type { ConfigManager } from '@pellux/goodvibes-sdk/platform/config';
+import { formatLatencyMs } from '../utils/format-duration.ts';
 import { BasePanel } from './base-panel.ts';
 import { createEmptyLine, createStyledCell, type Line } from '../types/grid.ts';
 import type { ProviderAuthRouteDescriptor } from '@pellux/goodvibes-sdk/platform/providers';
@@ -26,16 +27,17 @@ import type {
 } from '../runtime/ui-read-models.ts';
 import { evaluateSessionMaintenance } from '@/runtime/index.ts';
 import {
+  buildAlignedRow,
   buildBodyText,
   buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildKeyValueLine,
-  buildPanelListRow,
-  buildPanelLine,
   buildPanelWorkspace,
   buildSummaryBlock,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   resolvePrimaryScrollableSection,
   type PanelWorkspaceSection,
 } from './polish.ts';
@@ -62,22 +64,11 @@ export interface ProviderHealthPanelDeps {
 // Colors
 // ---------------------------------------------------------------------------
 
-const C = {
-  title:       '#00ffff',
-  online:      '#5fd700',
-  rateLimit:   '#ffaf00',
-  error:       '#ff5f5f',
-  unknown:     '244',
-  label:       '244',
-  value:       '252',
-  dim:         '240',
-  provName:    '#e2e8f0',
-  errMsg:      '#ff5f5f',
-  latGood:     '#5fd700',
-  latWarn:     '#ffaf00',
-  latBad:      '#ff5f5f',
-  separator:   '#374151',
-} as const;
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  title:   '#00ffff',
+  unknown: '244',
+  rowSelectBg: '#111827',
+});
 
 const LATENCY_WARN_MS = 2_000;
 const LATENCY_BAD_MS  = 5_000;
@@ -88,11 +79,11 @@ const LATENCY_BAD_MS  = 5_000;
 
 function statusDot(status: ProviderStatus): { char: string; color: string } {
   switch (status) {
-    case 'healthy':      return { char: '●', color: C.online };
-    case 'degraded':     return { char: '◑', color: C.rateLimit };
-    case 'rate_limited': return { char: '◐', color: C.rateLimit };
-    case 'auth_error':   return { char: '✕', color: C.error };
-    case 'unavailable':  return { char: '✕', color: C.error };
+    case 'healthy':      return { char: '●', color: C.good };
+    case 'degraded':     return { char: '◑', color: C.warn };
+    case 'rate_limited': return { char: '◐', color: C.warn };
+    case 'auth_error':   return { char: '✕', color: C.bad };
+    case 'unavailable':  return { char: '✕', color: C.bad };
     default:             return { char: '○', color: C.unknown };
   }
 }
@@ -109,16 +100,13 @@ function statusLabel(status: ProviderStatus): string {
 }
 
 function latencyColor(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 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 | undefined): string {
@@ -154,11 +142,11 @@ interface ProviderRuntimeRecord {
 function domainColor(level: HealthDomainSummary['level']): string {
   switch (level) {
     case 'good':
-      return C.online;
+      return C.good;
     case 'warn':
-      return C.rateLimit;
+      return C.warn;
     case 'bad':
-      return C.error;
+      return C.bad;
     default:
       return C.value;
   }
@@ -184,9 +172,9 @@ function routeColor(route: ProviderPanelAuthRoute): string {
     case 'subscription-oauth':
       return C.title;
     case 'service-oauth':
-      return C.online;
+      return C.good;
     case 'api-key':
-      return C.rateLimit;
+      return C.warn;
     case 'secret-ref':
       return C.value;
     case 'anonymous':
@@ -200,12 +188,12 @@ function routeColor(route: ProviderPanelAuthRoute): string {
 function freshnessColor(freshness: ProviderPanelAuthFreshness): string {
   switch (freshness) {
     case 'expired':
-      return C.error;
+      return C.bad;
     case 'expiring':
     case 'pending':
-      return C.rateLimit;
+      return C.warn;
     case 'healthy':
-      return C.online;
+      return C.good;
     default:
       return C.dim;
   }
@@ -552,10 +540,10 @@ export class ProviderHealthPanel extends BasePanel {
               { command: '/provider', summary: 'review current provider and model selection' },
               { command: '/subscription', summary: 'review provider login and subscription state' },
             ],
-            { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' },
+            { ...DEFAULT_PANEL_PALETTE, header: C.title },
           ),
         }],
-        palette: { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' },
+        palette: { ...DEFAULT_PANEL_PALETTE, header: C.title },
       });
     }
 
@@ -581,14 +569,14 @@ export class ProviderHealthPanel extends BasePanel {
     const postureLines = [
       buildKeyValueLine(width, [
         { label: 'providers', value: String(providers.length), valueColor: C.value },
-        { label: 'online', value: String(online), valueColor: C.online },
-        { label: 'rate-limited', value: String(rateLimited), valueColor: C.rateLimit },
-        { label: 'error', value: String(errored), valueColor: C.error },
-        { label: 'auth alerts', value: String(expiringAuth), valueColor: expiringAuth > 0 ? C.rateLimit : C.dim },
-        { label: 'account issues', value: String(accountIssues), valueColor: accountIssues > 0 ? C.error : C.dim },
-      ], { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }),
-      buildGuidanceLine(width, '/provider', 'review provider selection and routing if health posture degrades', { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }),
-      buildGuidanceLine(width, '/accounts', 'inspect auth routes, fallback posture, and billing-path safety', { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }),
+        { label: 'online', value: String(online), valueColor: C.good },
+        { label: 'rate-limited', value: String(rateLimited), valueColor: C.warn },
+        { label: 'error', value: String(errored), valueColor: C.bad },
+        { label: 'auth alerts', value: String(expiringAuth), valueColor: expiringAuth > 0 ? C.warn : C.dim },
+        { label: 'account issues', value: String(accountIssues), valueColor: accountIssues > 0 ? C.bad : C.dim },
+      ], { ...DEFAULT_PANEL_PALETTE, header: C.title }),
+      buildGuidanceLine(width, '/provider', 'review provider selection and routing if health posture degrades', { ...DEFAULT_PANEL_PALETTE, header: C.title }),
+      buildGuidanceLine(width, '/accounts', 'inspect auth routes, fallback posture, and billing-path safety', { ...DEFAULT_PANEL_PALETTE, header: C.title }),
     ];
 
     const domainLines: Line[] = [];
@@ -603,18 +591,24 @@ export class ProviderHealthPanel extends BasePanel {
       worktrees: this.deps.worktrees.getSnapshot(),
       session: this.deps.session.getSnapshot(),
     })) {
-      domainLines.push(buildPanelLine(width, [
-        ['  ', C.label],
-        [domain.name.padEnd(14), C.provName],
-        [domain.summary.slice(0, Math.max(0, width - 36)).padEnd(Math.max(0, width - 36)), domainColor(domain.level)],
-        [' ', C.label],
-        [domain.next.slice(0, 20), C.dim],
-      ]));
+      domainLines.push(buildAlignedRow(
+        width,
+        [
+          { text: domain.name, fg: C.value, bold: true },
+          { text: domain.summary, fg: domainColor(domain.level) },
+          { text: domain.next, fg: C.dim },
+        ],
+        [
+          { width: 14 },
+          { width: Math.max(10, width - 38) },
+          { width: 20 },
+        ],
+      ));
       for (const detail of domain.details.slice(0, 2)) {
-        domainLines.push(...buildBodyText(width, `    ${detail}`, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.dim));
+        domainLines.push(...buildBodyText(width, `    ${detail}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.dim));
       }
       if (domain.nextSteps.length > 1) {
-        domainLines.push(...buildBodyText(width, `    next: ${domain.nextSteps.join('  |  ')}`, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.title));
+        domainLines.push(...buildBodyText(width, `    next: ${domain.nextSteps.join('  |  ')}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.title));
       }
     }
 
@@ -632,77 +626,114 @@ export class ProviderHealthPanel extends BasePanel {
       session: session.session,
     });
     maintenanceLines.push(buildKeyValueLine(width, [
-      { label: 'level', value: maintenance.level, valueColor: maintenance.level === 'needs-repair' ? C.error : maintenance.level === 'suggest-compact' || maintenance.level === 'watch' ? C.rateLimit : C.online },
+      { label: 'level', value: maintenance.level, valueColor: maintenance.level === 'needs-repair' ? C.bad : maintenance.level === 'suggest-compact' || maintenance.level === 'watch' ? C.warn : C.good },
       { label: 'guidance', value: maintenance.guidanceMode, valueColor: C.value },
-      { label: 'usage', value: `${maintenance.usagePct}%`, valueColor: maintenance.usagePct >= 80 ? C.error : maintenance.usagePct >= 70 ? C.rateLimit : C.value },
+      { label: 'usage', value: `${maintenance.usagePct}%`, valueColor: maintenance.usagePct >= 80 ? C.bad : maintenance.usagePct >= 70 ? C.warn : C.value },
       { label: 'remaining', value: maintenance.remainingTokens.toLocaleString(), valueColor: C.value },
-    ], { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }));
+    ], { ...DEFAULT_PANEL_PALETTE, header: C.title }));
     for (const reason of maintenance.reasons.slice(0, 3)) {
-      maintenanceLines.push(...buildBodyText(width, reason, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.dim));
+      maintenanceLines.push(...buildBodyText(width, reason, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.dim));
     }
     if (maintenance.nextSteps.length > 0) {
-      maintenanceLines.push(...buildBodyText(width, `Next: ${maintenance.nextSteps.join('  |  ')}`, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.title));
+      maintenanceLines.push(...buildBodyText(width, `Next: ${maintenance.nextSteps.join('  |  ')}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.title));
     }
     if (selectedName) {
       const status = selectedHealth?.status ?? 'unknown';
       selectedLines.push(buildKeyValueLine(width, [
-        { label: 'provider', value: selectedName, valueColor: C.provName },
+        { label: 'provider', value: selectedName, valueColor: C.value },
         { label: 'status', value: statusLabel(status), valueColor: statusDot(status).color },
         { label: 'last ok', value: fmtAgo(selectedHealth?.lastSuccessAt), valueColor: C.value },
-      ], { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }));
+      ], { ...DEFAULT_PANEL_PALETTE, header: C.title }));
       if (selectedHealth?.rateLimitExpiresAt && selectedHealth.rateLimitExpiresAt > Date.now()) {
-        selectedLines.push(...buildBodyText(width, `Cooldown: ${fmtCooldown(selectedHealth.rateLimitExpiresAt)}`, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.rateLimit));
+        selectedLines.push(...buildBodyText(width, `Cooldown: ${fmtCooldown(selectedHealth.rateLimitExpiresAt)}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.warn));
       }
       if (selectedHealth?.lastErrorMessage) {
-        selectedLines.push(...buildBodyText(width, `Last error: ${selectedHealth.lastErrorMessage}`, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.errMsg));
+        selectedLines.push(...buildBodyText(width, `Last error: ${selectedHealth.lastErrorMessage}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.bad));
       }
       if (selectedAccount) {
         selectedLines.push(buildKeyValueLine(width, [
           { label: 'route', value: selectedAccount.activeRoute, valueColor: routeColor(selectedAccount.activeRoute) },
           { label: 'preferred', value: selectedAccount.preferredRoute, valueColor: C.dim },
           { label: 'freshness', value: selectedAccount.authFreshness, valueColor: freshnessColor(selectedAccount.authFreshness) },
-        ], { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }));
+        ], { ...DEFAULT_PANEL_PALETTE, header: C.title }));
         selectedLines.push(buildKeyValueLine(width, [
           { label: 'models', value: String(selectedAccount.modelCount), valueColor: C.value },
-          { label: 'active', value: selectedAccount.active ? 'yes' : 'no', valueColor: selectedAccount.active ? C.online : C.dim },
-        ], { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }));
-        selectedLines.push(...buildBodyText(width, `Auth route: ${selectedAccount.activeRouteReason}`, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.dim));
+          { label: 'active', value: selectedAccount.active ? 'yes' : 'no', valueColor: selectedAccount.active ? C.good : C.dim },
+        ], { ...DEFAULT_PANEL_PALETTE, header: C.title }));
+        selectedLines.push(...buildBodyText(width, `Auth route: ${selectedAccount.activeRouteReason}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.dim));
         if (selectedAccount.fallbackRisk) {
-          selectedLines.push(...buildBodyText(width, `Fallback: ${selectedAccount.fallbackRisk}`, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.rateLimit));
+          selectedLines.push(...buildBodyText(width, `Fallback: ${selectedAccount.fallbackRisk}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.warn));
         }
         if (selectedAccount.issues.length > 0) {
-          selectedLines.push(...buildBodyText(width, `Issue: ${selectedAccount.issues[0]!}`, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.errMsg));
+          selectedLines.push(...buildBodyText(width, `Issue: ${selectedAccount.issues[0]!}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.bad));
         }
         if (selectedAccount.recommendedActions.length > 0) {
-          selectedLines.push(...buildBodyText(width, `Next: ${selectedAccount.recommendedActions[0]!}`, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, C.title));
+          selectedLines.push(...buildBodyText(width, `Next: ${selectedAccount.recommendedActions[0]!}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.title));
         }
       }
     }
 
-    const postureSection: PanelWorkspaceSection = { lines: buildSummaryBlock(width, 'Health posture', postureLines, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }) };
+    const postureSection: PanelWorkspaceSection = { lines: buildSummaryBlock(width, 'Health posture', postureLines, { ...DEFAULT_PANEL_PALETTE, header: C.title }) };
     const domainsSection: PanelWorkspaceSection = { title: 'Repair Domains', lines: domainLines };
     const maintenanceSections = maintenanceLines.length > 0 ? [{ title: 'Session Maintenance', lines: maintenanceLines } satisfies PanelWorkspaceSection] : [];
-    const selectedSections = selectedLines.length > 0 ? [{ lines: buildDetailBlock(width, 'Selected provider', selectedLines, { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }) } satisfies PanelWorkspaceSection] : [];
+    const selectedSections = selectedLines.length > 0 ? [{ lines: buildDetailBlock(width, 'Selected provider', selectedLines, { ...DEFAULT_PANEL_PALETTE, header: C.title }) } satisfies PanelWorkspaceSection] : [];
+    const footerHint = buildKeyboardHints(width, [
+      { keys: 'j/k or Up/Down', label: 'select provider' },
+      { keys: '/provider', label: 'switch model' },
+      { keys: '/accounts', label: 'auth routes' },
+    ], { ...DEFAULT_PANEL_PALETTE, header: C.title });
+    const providerColumnHeader = buildAlignedRow(
+      width,
+      [
+        { text: 'provider', fg: C.label, bold: true },
+        { text: 'status', fg: C.label, bold: true },
+        { text: 'lat', fg: C.label, bold: true },
+        { text: 'last ok', fg: C.label, bold: true },
+        { text: 'auth', fg: C.label, bold: true },
+      ],
+      [
+        { width: 18 },
+        { width: 13 },
+        { width: 8, align: 'right' },
+        { width: 10, align: 'right' },
+        { width: 12 },
+      ],
+      { marker: '▸' },
+    );
     const resolvedProvidersSection = resolvePrimaryScrollableSection(width, height, {
       intro,
-      footerLines: [buildPanelLine(width, [['  j/k or Up/Down move  live cooldowns refresh while active', C.dim]])],
-      palette: { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' },
+      footerLines: [footerHint],
+      palette: { ...DEFAULT_PANEL_PALETTE, header: C.title },
       beforeSections: [postureSection, domainsSection, ...maintenanceSections],
       section: {
         title: 'Providers',
+        fixedLines: [providerColumnHeader],
         scrollableLines: providers.map((name, absolute) => {
           const health = this.providerHealthTracker.get(name);
           const status = health?.status ?? 'unknown';
+          const dot = statusDot(status);
           const latency = health?.lastLatencyMs !== undefined ? fmtMs(health.lastLatencyMs) : 'n/a';
           const latencyFg = health?.lastLatencyMs !== undefined ? latencyColor(health.lastLatencyMs) : C.dim;
-          return buildPanelListRow(width, [
-            { text: name.padEnd(16), fg: C.provName },
-            { text: statusLabel(status).padEnd(14), fg: statusDot(status).color },
-            { text: ' lat ', fg: C.label },
-            { text: latency.padEnd(8), fg: latencyFg },
-            { text: ' ok ', fg: C.label },
-            { text: fmtAgo(health?.lastSuccessAt).padEnd(10), fg: C.value },
-          ], { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' }, { selected: absolute === this._selectedIndex, selectedBg: '#111827' });
+          const account = this._accountRecords.get(name);
+          const authFg = account ? freshnessColor(account.authFreshness) : C.dim;
+          return buildAlignedRow(
+            width,
+            [
+              { text: `${dot.char} ${name}`, fg: C.value, bold: absolute === this._selectedIndex },
+              { text: statusLabel(status), fg: dot.color },
+              { text: latency, fg: latencyFg },
+              { text: fmtAgo(health?.lastSuccessAt), fg: C.value },
+              { text: account ? account.authFreshness : '-', fg: authFg },
+            ],
+            [
+              { width: 18 },
+              { width: 13 },
+              { width: 8, align: 'right' },
+              { width: 10, align: 'right' },
+              { width: 12 },
+            ],
+            { selected: absolute === this._selectedIndex, selectedBg: C.rowSelectBg, marker: '▸' },
+          );
         }),
         selectedIndex: this._selectedIndex,
         scrollOffset: this._scrollOffset,
@@ -724,8 +755,8 @@ export class ProviderHealthPanel extends BasePanel {
       title: 'Health',
       intro,
       sections,
-      footerLines: [buildPanelLine(width, [['  j/k or Up/Down move  live cooldowns refresh while active', C.dim]])],
-      palette: { ...DEFAULT_PANEL_PALETTE, header: C.title, headerBg: '#0f172a' },
+      footerLines: [footerHint],
+      palette: { ...DEFAULT_PANEL_PALETTE, header: C.title },
     });
   }
 }

package/src/panels/provider-stats-panel.ts

@@ -5,18 +5,31 @@ import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { UiProvidersSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildKeyValueLine,
+  buildPanelLine,
   buildStyledPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
+import { formatLatencyMs } from '../utils/format-duration.ts';
 
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
 
+// Domain-specific tones not covered by the base palette (latency/token greys).
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  muted2:    '#6b7280', // secondary dim grey for unit labels
+  sep:       '#374151', // inline separator grey
+  tokenDim:  '#64748b', // token-count grey
+  p95:       '#a78bfa', // p95 latency accent
+  latYellow: '#eab308', // mid-latency warning
+});
+
 const SPARKLINE_CHARS = '._-:=+*#';
 const LATENCY_RING_SIZE = 20;
 
@@ -202,7 +215,10 @@ export class ProviderStatsPanel extends BasePanel {
               width,
               ' No providers registered',
               'Load or configure a provider to begin collecting per-provider latency and error metrics.',
-              [],
+              [
+                { command: '/provider', summary: 'review current provider and model selection' },
+                { command: '/subscription', summary: 'sign in to a subscription-backed provider' },
+              ],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -245,6 +261,18 @@ export class ProviderStatsPanel extends BasePanel {
       title: ' Provider Stats',
       intro: 'Per-provider request performance, latency distribution, error pressure, and session totals.',
       sections: providerSections,
+      footerLines: [
+        buildPanelLine(width, [
+          ['  sparkline ', C.muted2],
+          ['low', C.good],
+          [' → ', C.muted2],
+          ['high latency', C.bad],
+        ]),
+        buildKeyboardHints(width, [
+          { keys: '/provider', label: 'switch provider/model' },
+          { keys: '/health', label: 'live provider health' },
+        ], DEFAULT_PANEL_PALETTE),
+      ],
       palette: DEFAULT_PANEL_PALETTE,
     });
   }
@@ -262,7 +290,7 @@ export class ProviderStatsPanel extends BasePanel {
 
     // Determine health
     const hasErrors = rec !== undefined && rec.errors > 0;
-    const dotColor = hasErrors ? '#ef4444' : '#22c55e';
+    const dotColor = hasErrors ? C.bad : C.good;
 
     // Model ID (truncated)
     const modelId = rec?.lastModelId ?? 'n/a';
@@ -271,18 +299,18 @@ export class ProviderStatsPanel extends BasePanel {
     // Header row: * provider  model
     // Build as segments to avoid multi-byte char indexing issues
     const headerLine = buildStyledPanelLine(width, [
-      { text: '  ', fg: '#94a3b8' },
+      { text: '  ', fg: C.label },
       { text: '●', fg: dotColor },
-      { text: ' ', fg: '#94a3b8' },
-      { text: `${truncateDisplay(provName, 14).padEnd(14)} `, fg: '#e2e8f0', bold: true },
-      { text: modelDisplay, fg: '#cbd5e1' },
+      { text: ' ', fg: C.label },
+      { text: `${truncateDisplay(provName, 14).padEnd(14)} `, fg: C.value, bold: true },
+      { text: modelDisplay, fg: C.accent },
     ]);
 
     rows.push(headerLine);
 
     if (rec === undefined || rec.requests === 0) {
       rows.push(buildStyledPanelLine(width, [
-        { text: '    No requests yet.', fg: '#6b7280' },
+        { text: '    No requests yet.', fg: C.muted2 },
       ]));
     } else {
       const avgLatency = this._avg(rec.latencies);
@@ -291,24 +319,24 @@ export class ProviderStatsPanel extends BasePanel {
       const sparkline = this._sparkline(rec.latencies);
 
       const latFg = avgLatency < LATENCY_GREEN
-        ? '#22c55e'
+        ? C.good
         : avgLatency < LATENCY_YELLOW
-          ? '#eab308'
-          : '#ef4444';
+          ? C.latYellow
+          : C.bad;
 
       const segments = [
-        { text: '    avg ', fg: '#6b7280' },
+        { text: '    avg ', fg: C.muted2 },
         { text: this._fmtMs(avgLatency).padStart(6), fg: latFg, bold: true },
-        { text: '  p95 ', fg: '#6b7280' },
-        { text: this._fmtMs(p95Latency).padStart(6), fg: '#a78bfa' },
-        { text: '  ', fg: '#374151' },
+        { text: '  p95 ', fg: C.muted2 },
+        { text: this._fmtMs(p95Latency).padStart(6), fg: C.p95 },
+        { text: '  ', fg: C.sep },
         { text: sparkline, fg: latFg },
-        { text: '  err ', fg: '#6b7280' },
-        { text: `${errRate.toFixed(0).padStart(3)}%`, fg: errRate > 0 ? '#ef4444' : '#22c55e' },
-        { text: `  ${rec.requests.toString().padStart(4)}r`, fg: '#94a3b8' },
+        { text: '  err ', fg: C.muted2 },
+        { text: `${errRate.toFixed(0).padStart(3)}%`, fg: errRate > 0 ? C.bad : C.good },
+        { text: `  ${rec.requests.toString().padStart(4)}r`, fg: C.label },
       ] as const;
       const tokenSegment = rec.totalTokens > 0
-        ? [{ text: `  ${rec.totalTokens.toString().padStart(6)}tok`, fg: '#64748b' }]
+        ? [{ text: `  ${rec.totalTokens.toString().padStart(6)}tok`, fg: C.tokenDim }]
         : [];
       rows.push(buildStyledPanelLine(width, [...segments, ...tokenSegment]));
     }
@@ -351,10 +379,7 @@ export class ProviderStatsPanel extends BasePanel {
   }
 
   private _fmtMs(ms: number): string {
-    if (ms <= 0) return 'n/a';
-    if (ms >= 10000) return `${(ms / 1000).toFixed(1)}s`;
-    if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
-    return `${Math.round(ms)}ms`;
+    return formatLatencyMs(ms);
   }
 
   private _latencyColor(ms: number): string {

package/src/panels/qr-panel.ts

@@ -2,9 +2,12 @@ import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import {
+  buildKeyboardHints,
   buildPanelLine,
+  buildPanelTitle,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { renderQrMatrix, generateQrMatrix } from '../renderer/qr-renderer.ts';
 import { encodeConnectionPayload } from '@pellux/goodvibes-sdk/platform/pairing';
 
@@ -101,32 +104,41 @@ export class QrPanel extends BasePanel {
     const lines: Line[] = [];
 
     const { url, token, username, password } = this.connectionInfo;
+    const valueWidth = Math.max(0, width - 12);
+
+    // ── Title + purpose: tell the operator exactly what this code is for ────
+    lines.push(buildPanelTitle(width, 'Companion Pairing', C));
+    lines.push(
+      buildPanelLine(width, [
+        [' Scan with the GoodVibes companion app to pair this session.', C.hint],
+      ]),
+    );
 
     // ── Connection info header ─────────────────────────────────────────────
     lines.push(createEmptyLine(width));
     lines.push(
       buildPanelLine(width, [
         [' URL      ', C.label],
-        [url.slice(0, Math.max(0, width - 12)), C.url],
+        [truncateDisplay(url, valueWidth), C.url],
       ]),
     );
     lines.push(
       buildPanelLine(width, [
         [' Token    ', C.label],
-        [token, C.token],
+        [truncateDisplay(token, valueWidth), C.token],
       ]),
     );
     lines.push(
       buildPanelLine(width, [
         [' Username ', C.label],
-        [username.slice(0, Math.max(0, width - 12)), C.value],
+        [truncateDisplay(username, valueWidth), C.value],
       ]),
     );
     if (password !== undefined) {
       lines.push(
         buildPanelLine(width, [
           [' Password ', C.label],
-          [password, C.value],
+          [truncateDisplay(password, valueWidth), C.value],
         ]),
       );
     }
@@ -158,13 +170,13 @@ export class QrPanel extends BasePanel {
       );
     }
 
-    // ── Hints ──────────────────────────────────────────────────────────────
-    const hintsLine = buildPanelLine(width, [
-      [' r ', C.hint],
-      ['regenerate  ', C.dim],
-      [' c ', C.hint],
-      ['copy token', C.dim],
-    ]);
+    // ── Hints ── only advertise actions that are actually wired ─────────────
+    const hints: Array<{ keys: string; label: string }> = [];
+    if (this.regenerateToken) hints.push({ keys: 'r', label: 'regenerate token' });
+    if (this.copyToClipboard) hints.push({ keys: 'c', label: 'copy token' });
+    const hintsLine = hints.length > 0
+      ? buildKeyboardHints(width, hints, C)
+      : buildPanelLine(width, [[' Pairing is read-only in this surface.', C.dim]]);
 
     // Push hints at the bottom if we have room, otherwise append after QR
     const remaining = height - lines.length;

package/src/panels/remote-panel.ts

@@ -200,7 +200,7 @@ export class RemotePanel extends BasePanel {
     if (daemon.lastError) {
       postureLines.push(buildPanelLine(width, [
         [' daemon error ', C.label],
-        [daemon.lastError.slice(0, Math.max(0, width - 14)), C.error],
+        [truncateDisplay(daemon.lastError, Math.max(0, width - 14)), C.error],
       ]));
     }
     postureLines.push(
@@ -208,9 +208,16 @@ export class RemotePanel extends BasePanel {
       buildGuidanceLine(width, '/remote capabilities', 'inspect transport support before routing remote work or reattaching a session', C),
     );
 
+    const canBrowse = activeConnections.length > 0 || contracts.length > 0;
+    const canSwitch = contracts.length > 0 && activeConnections.length > 0;
+    const navHint = !canBrowse
+      ? `  focus=${this.browseMode}  idle - no connections or contracts to browse`
+      : canSwitch
+        ? `  focus=${this.browseMode}  Up/Down move  Tab switch connections/contracts`
+        : `  focus=${this.browseMode}  Up/Down move`;
     const footerLines = [
       buildGuidanceLine(width, '/remote setup', 'review bridge, tunnel, env, and bootstrap flows for self-hosted remote work', C),
-      buildPanelLine(width, [[`  focus=${this.browseMode}  Up/Down move  Tab switch connections/contracts`, C.dim]]),
+      buildPanelLine(width, [[navHint, C.dim]]),
     ] as const;
 
     if (activeConnections.length === 0 && contracts.length === 0) {
@@ -318,7 +325,7 @@ export class RemotePanel extends BasePanel {
           ['  Review: ', C.label],
           [supervisorEntry.negotiation.reviewMode, supervisorEntry.negotiation.reviewMode === 'wrfc' ? C.ok : C.dim],
         ]));
-        detailRows.push(buildPanelLine(width, [[`  ${supervisorEntry.heartbeat.detail}`.slice(0, width), C.dim]]));
+        detailRows.push(buildPanelLine(width, [[truncateDisplay(`  ${supervisorEntry.heartbeat.detail}`, width), C.dim]]));
       }
 
       const recentArtifact = snapshot.artifacts.find((artifact) => artifact.runnerId === selected.agentId);
@@ -400,7 +407,7 @@ export class RemotePanel extends BasePanel {
             { text: ` ${connection.transportState.padEnd(18)}`, fg: stateColor(connection.transportState) },
             { text: ` msgs=${String(connection.messageCount).padEnd(6)}`, fg: C.info },
             { text: ` errs=${String(connection.errorCount).padEnd(4)}`, fg: connection.errorCount > 0 ? C.warn : C.dim },
-            { text: ` ${connection.label}`.slice(0, Math.max(0, width - 56)), fg: C.dim },
+            { text: truncateDisplay(` ${connection.label}`, Math.max(0, width - 56)), fg: C.dim },
           ], C, { selected: absolute === this.selectedIndex, selectedBg: C.headerBg });
         })
       : [
@@ -408,7 +415,7 @@ export class RemotePanel extends BasePanel {
             return buildPanelListRow(width, [
               { text: contract.runnerId.padEnd(18), fg: C.value },
               { text: ` ${contract.transport.state.padEnd(18)}`, fg: stateColor(contract.transport.state) },
-              { text: ` ${contract.template}`.slice(0, Math.max(0, width - 42)), fg: C.dim },
+              { text: truncateDisplay(` ${contract.template}`, Math.max(0, width - 42)), fg: C.dim },
             ], C, { selected: absolute === this.selectedIndex, selectedBg: C.headerBg });
           }),
           buildPanelLine(width, [[' No active connection is currently attached to these contracts.', C.dim]]),