@pellux/goodvibes-tui 0.26.0 → 0.27.0

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

@@ -36,6 +36,7 @@ import {
   buildPanelWorkspace,
   buildSummaryBlock,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   resolvePrimaryScrollableSection,
   type PanelWorkspaceSection,
 } from './polish.ts';
@@ -62,22 +63,10 @@ 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',
+});
 
 const LATENCY_WARN_MS = 2_000;
 const LATENCY_BAD_MS  = 5_000;
@@ -88,11 +77,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,9 +98,9 @@ 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 {
@@ -154,11 +143,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 +173,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 +189,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 +541,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 +570,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[] = [];
@@ -605,16 +594,16 @@ export class ProviderHealthPanel extends BasePanel {
     })) {
       domainLines.push(buildPanelLine(width, [
         ['  ', C.label],
-        [domain.name.padEnd(14), C.provName],
+        [domain.name.padEnd(14), C.value],
         [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],
       ]));
       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,61 +621,61 @@ 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 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' },
+      palette: { ...DEFAULT_PANEL_PALETTE, header: C.title },
       beforeSections: [postureSection, domainsSection, ...maintenanceSections],
       section: {
         title: 'Providers',
@@ -696,13 +685,13 @@ export class ProviderHealthPanel extends BasePanel {
           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: name.padEnd(16), fg: C.value },
             { 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' });
+          ], { ...DEFAULT_PANEL_PALETTE, header: C.title }, { selected: absolute === this._selectedIndex, selectedBg: '#111827' });
         }),
         selectedIndex: this._selectedIndex,
         scrollOffset: this._scrollOffset,
@@ -725,7 +714,7 @@ export class ProviderHealthPanel extends BasePanel {
       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' },
+      palette: { ...DEFAULT_PANEL_PALETTE, header: C.title },
     });
   }
 }

package/src/panels/schedule-panel.ts

@@ -8,6 +8,7 @@ import {
   buildEmptyState,
   buildPanelLine,
   buildPanelWorkspace,
+  extendPalette,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
@@ -17,12 +18,9 @@ import {
 // Colors
 // ---------------------------------------------------------------------------
 
-const C = {
-  header: '#00d7ff',
-  sectionHeader: '244',
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   enabled: '#5fd700',
   disabled: '#6c6c6c',
-  selected: '#1c1c1c',
   selectedFg: '#ffffff',
   id: '238',
   cron: '#af87ff',
@@ -32,8 +30,7 @@ const C = {
   runCount: '#ffaf00',
   statusRunning: '#5fd700',
   statusFailed: '#ff5f5f',
-  hint: '240',
-} as const;
+});
 
 // ---------------------------------------------------------------------------
 // View items
@@ -289,7 +286,7 @@ export class SchedulePanel extends BasePanel {
    *   Row 3:          prompt preview  [history]
    */
   private renderTask(task: AutomationJob, history: AutomationRun[], selected: boolean, width: number): Line[] {
-    const bg = selected ? C.selected : undefined;
+    const bg = selected ? C.selectBg : undefined;
     const fgBase = selected ? C.selectedFg : undefined;
 
     const bullet = task.enabled ? '* ' : 'o ';

package/src/panels/session-browser-panel.ts

@@ -15,6 +15,7 @@ import {
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
@@ -28,24 +29,15 @@ import {
 } from './search-focus.ts';
 import { type ConfirmState, handleConfirmInput } from './confirm-state.ts';
 
-const C = {
-  headerBg:   '#1a1a2e',
-  headerFg:   '#ffffff',
-  statusBar:  '#222233',
-  statusFg:   '#aaaaaa',
-  selected:   '#00ffff',
-  selectedBg: '#1a2a3a',
-  normal:     '#ccccdd',
-  dim:        '#555566',
-  label:      '#8888bb',
-  value:      '#ccccdd',
-  dateFg:     '#6699aa',
-  modelFg:    '#99aacc',
-  countFg:    '#88bbcc',
-  warnFg:     '#ffcc44',
-  errorFg:    '#ff6666',
-  separator:  '#333355',
-} as const;
+// Panel-specific extras only; shared tones come from DEFAULT_PANEL_PALETTE so
+// theme changes propagate. `selected` is a deliberate bright-cyan cursor accent
+// and the date/model/count column tints have no clean shared equivalent.
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  selected: '#00ffff',
+  dateFg:   '#6699aa',
+  modelFg:  '#99aacc',
+  countFg:  '#88bbcc',
+});
 
 function shortDate(ts: number): string {
   const d = new Date(ts);
@@ -308,7 +300,7 @@ export class SessionBrowserPanel extends BasePanel {
   }
 
   private _renderSession(width: number, sess: SessionInfo, isCursor: boolean): Line {
-    const bg = isCursor ? C.selectedBg : '';
+    const bg = isCursor ? C.selectBg : '';
     const date = shortDate(sess.timestamp);
     const cnt = String(sess.messageCount).padStart(3) + 'm ';
     const model = (sess.model || 'unknown').slice(0, 18).padEnd(18) + ' ';
@@ -317,10 +309,10 @@ export class SessionBrowserPanel extends BasePanel {
     return buildStyledPanelLine(width, [
       { text: isCursor ? '▸' : ' ', fg: C.selected, bg, bold: isCursor },
       { text: date, fg: C.dateFg, bg },
-      { text: ' ', fg: C.normal, bg },
+      { text: ' ', fg: C.value, bg },
       { text: cnt, fg: C.countFg, bg },
       { text: model, fg: C.modelFg, bg },
-      { text: title, fg: isCursor ? C.selected : C.normal, bg, bold: isCursor },
+      { text: title, fg: isCursor ? C.selected : C.value, bg, bold: isCursor },
     ]);
   }
 

package/src/panels/skills-panel.ts

@@ -16,6 +16,7 @@ import {
   getPanelSearchFocusTransition,
   isPanelSearchCancel,
 } from './search-focus.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
 const C = {
   ...DEFAULT_PANEL_PALETTE,
@@ -259,7 +260,7 @@ export class SkillsPanel extends SearchableListPanel<SkillRecord> {
           this.invalidateFilter();
         });
       } catch (err) {
-        this.setError(err instanceof Error ? err.message : String(err));
+        this.setError(summarizeError(err));
       }
       this.markDirty();
     })();

package/src/panels/tasks-panel.ts

@@ -14,6 +14,7 @@ import {
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
+import { formatElapsed } from '../utils/format-elapsed.ts';
 
 const C = {
   ...DEFAULT_PANEL_PALETTE,
@@ -35,13 +36,7 @@ function formatWhen(value?: number): string {
 
 function formatDuration(startedAt?: number, endedAt?: number): string {
   if (!startedAt) return 'n/a';
-  const end = endedAt ?? Date.now();
-  const ms = Math.max(0, end - startedAt);
-  if (ms < 1_000) return `${ms}ms`;
-  if (ms < 60_000) return `${(ms / 1_000).toFixed(ms < 10_000 ? 1 : 0)}s`;
-  const mins = Math.floor(ms / 60_000);
-  const secs = Math.floor((ms % 60_000) / 1_000);
-  return `${mins}m ${secs}s`;
+  return formatElapsed(Math.max(0, (endedAt ?? Date.now()) - startedAt));
 }
 
 function kindLabel(kind: RuntimeTask['kind']): string {

package/src/panels/thinking-panel.ts

@@ -12,25 +12,20 @@ import {
   buildStyledPanelLine,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
+  extendPalette,
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 
-const C = {
-  headerBg:    '#1a1a2e',
-  headerFg:    '#ffffff',
-  statusBar:   '#222233',
-  statusFg:    '#aaaaaa',
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  // Domain-specific reasoning tones (purples) and the active-stream cyan have no
+  // clean shared equivalent; selection background maps to the shared selectBg.
   reasoningFg: '#aa88ff',
   activeFg:    '#cc99ff',
-  dimFg:       '#555566',
   turnLabel:   '#7766bb',
   activeLabel: '#00ffff',
-  collapsedFg: '#888899',
-  selected:    '#00ffff',
-  selectedBg:  '#1a2a3a',
-} as const;
+});
 
 interface ReasoningBlock {
   turnId: number;
@@ -195,7 +190,7 @@ export class ThinkingPanel extends BasePanel {
   }
 
   private _renderRow(width: number, row: FlatRow, isCursor: boolean): Line {
-    const bg = isCursor ? C.selectedBg : '';
+    const bg = isCursor ? C.selectBg : '';
     if (row.kind === 'header') {
       const indicator = this.blocks[row.blockIndex]?.collapsed ? '▸' : '▾';
       const active = this.blocks[row.blockIndex]?.active;

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

@@ -12,6 +12,7 @@ import {
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 
@@ -32,22 +33,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 +94,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 +150,7 @@ export class TokenBudgetPanel extends BasePanel {
       this.turnHistory.shift();
     }
 
-    this.refresh();
+    this._refreshAndRender();
   }
 
   // ---------------------------------------------------------------------------
@@ -161,11 +162,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 +201,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
   // ---------------------------------------------------------------------------
@@ -369,10 +385,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;

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

@@ -13,26 +13,18 @@ import {
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 import { truncateDisplay } from '../utils/terminal-width.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;
 
@@ -271,7 +263,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 +272,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/work-plan-panel.ts

@@ -2,6 +2,7 @@ import type { Line } from '../types/grid.ts';
 import { UIFactory } from '../renderer/ui-factory.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { WorkPlanItem, WorkPlanItemStatus, WorkPlanStore } from '../work-plans/work-plan-store.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
 const STATUS_LABEL: Record<WorkPlanItemStatus, string> = {
   pending: '[ ]',
@@ -98,7 +99,7 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
           return super.handleInput(key);
       }
     } catch (error) {
-      this.setError(error instanceof Error ? error.message : String(error));
+      this.setError(summarizeError(error));
       return true;
     }
   }