@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/wrfc-panel.ts

@@ -1,11 +1,11 @@
 import type { Line } from '../types/grid.ts';
 import type { WrfcChain, WrfcState, QualityGateResult } from '@pellux/goodvibes-sdk/platform/agents';
-import type { Constraint, ConstraintFinding } from '@pellux/goodvibes-sdk/platform/agents';
 import type { WrfcController } from '@pellux/goodvibes-sdk/platform/agents';
 import { BasePanel } from './base-panel.ts';
 import type { WorkflowEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import {
+  buildMeterLine,
   buildPanelLine,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
@@ -20,6 +20,7 @@ import {
   type ConfirmState,
   handleConfirmInput,
 } from './confirm-state.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -31,145 +32,33 @@ const STALL_THRESHOLD_MS = 5 * 60 * 1000;
 /** Terminal states — chains in these states cannot be resumed or cancelled. */
 const TERMINAL_STATES: readonly WrfcState[] = ['passed', 'failed'];
 
-/** States from which resume is permitted (pending = chain is awaiting retry). */
-const RESUMABLE_STATES: readonly WrfcState[] = ['pending'];
-
-// ---------------------------------------------------------------------------
-// Colour palette
-// ---------------------------------------------------------------------------
-const C = {
-  // states
-  passed:     '#22c55e', // green
-  failed:     '#ef4444', // red
-  reviewing:  '#eab308', // yellow
-  engineering:'#22d3ee', // cyan
-  fixing:     '#f97316', // orange
-  pending:    '#6b7280', // grey
-  gating:     '#a78bfa', // violet
-  committing: '#38bdf8', // sky
-
-  // UI chrome
-  header:     '#94a3b8',
-  headerBold: '#e2e8f0',
-  dim:        '#4b5563',
-  label:      '#64748b',
-  value:      '#cbd5e1',
-  selected:   '#1e40af', // selection bg
-  selectedFg: '#f8fafc',
-  border:     '#334155',
-  spark:      '#38bdf8',
-  sparkLow:   '#ef4444',
-  sparkHigh:  '#22c55e',
-  issueCrit:  '#ef4444',
-  issueMaj:   '#f97316',
-  issueMin:   '#eab308',
-  issueSug:   '#6b7280',
-  gatePass:   '#22c55e',
-  gateFail:   '#ef4444',
-  // constraint status
-  constraintSat:  '#22c55e', // green — satisfied
-  constraintUnsat:'#ef4444', // red — unsatisfied
-  constraintUnv:  '#4b5563', // grey — unverified (no finding yet)
-  stalled:        '#f59e0b', // amber — stalled / no recent event
-} as const;
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-const SPARKLINE_CHARS = '._-:=+*#';
-
-export function sparkline(scores: number[], maxScore = 10): string {
-  if (scores.length === 0) return '';
-  return scores
-    .map(s => {
-      const ratio = Math.max(0, Math.min(1, s / maxScore));
-      const idx   = Math.round(ratio * (SPARKLINE_CHARS.length - 1));
-      return SPARKLINE_CHARS[idx];
-    })
-    .join('');
-}
-
-export function stateColor(state: WrfcState): string {
-  switch (state) {
-    case 'passed':          return C.passed;
-    case 'failed':          return C.failed;
-    case 'reviewing':       return C.reviewing;
-    case 'engineering':     return C.engineering;
-    case 'fixing':          return C.fixing;
-    case 'gating':
-    case 'awaiting_gates':  return C.gating;
-    case 'committing':      return C.committing;
-    default:                return C.pending;
-  }
-}
-
-export function stateLabel(state: WrfcState): string {
-  switch (state) {
-    case 'engineering':    return 'ENG';
-    case 'reviewing':      return 'REV';
-    case 'fixing':         return 'FIX';
-    case 'gating':         return 'GATE';
-    case 'awaiting_gates': return 'WAIT';
-    case 'committing':     return 'COMMIT';
-    case 'passed':         return 'PASS';
-    case 'failed':         return 'FAIL';
-    default:               return 'PEND';
-  }
-}
-
-function issueColor(severity: string): string {
-  switch (severity) {
-    case 'critical': return C.issueCrit;
-    case 'major':    return C.issueMaj;
-    case 'minor':    return C.issueMin;
-    default:         return C.issueSug;
-  }
-}
-
-function issuePrefix(severity: string): string {
-  switch (severity) {
-    case 'critical': return '[CRIT] ';
-    case 'major':    return '[MAJR] ';
-    case 'minor':    return '[MINR] ';
-    default:         return '[SUGG] ';
-  }
-}
-
-export function truncate(s: string, max: number): string {
-  if (s.length <= max) return s;
-  return s.slice(0, max - 3) + '...';
-}
+/**
+ * States from which resume is permitted. These mirror the states
+ * WrfcController.resumeChain() actually recovers from: 'pending' (awaiting
+ * retry / start engineering), 'reviewing' and 'fixing' (re-spawn the
+ * interrupted child), and 'awaiting_gates' (re-run gates). resumeChain no-ops
+ * safely when a child is still running, so offering resume for these states is
+ * always safe — it is exactly the set an operator needs after a restart or a
+ * STALLED chain.
+ */
+const RESUMABLE_STATES: readonly WrfcState[] = ['pending', 'reviewing', 'fixing', 'awaiting_gates'];
 
 // ---------------------------------------------------------------------------
-// Constraint helpers
+// Colour palette + formatting helpers live in ./wrfc-panel-format.ts (extracted
+// to keep this module under the architecture line-count cap). Re-exported here
+// so ./wrfc-panel.ts remains their public import site.
 // ---------------------------------------------------------------------------
-
-/**
- * Returns display tag, foreground colour, and dim flag for a single constraint
- * based on whether a reviewer finding exists for it.
- */
-export function constraintStatusMarker(
-  constraint: Constraint,
-  findings: ConstraintFinding[] | undefined,
-): { tag: string; fg: string; dim: boolean } {
-  const finding = findings?.find(f => f.constraintId === constraint.id);
-  if (!finding) {
-    return { tag: '[UNV]', fg: C.constraintUnv, dim: true };
-  }
-  if (finding.satisfied) {
-    return { tag: '[SAT]', fg: C.constraintSat, dim: false };
-  }
-  // Unsatisfied — use severity to pick colour and tag text
-  const sev = finding.severity ?? 'major';
-  let sevTag: string;
-  let fg: string;
-  switch (sev) {
-    case 'critical': sevTag = '[UNS CRIT]';  fg = C.issueCrit; break;
-    case 'minor':    sevTag = '[UNS MINOR]'; fg = C.issueMin;  break;
-    default:         sevTag = '[UNS MAJOR]'; fg = C.issueMaj;  break;
-  }
-  return { tag: sevTag, fg, dim: false };
-}
+import {
+  C,
+  sparkline,
+  stateColor,
+  stateLabel,
+  issueColor,
+  issuePrefix,
+  truncate,
+  constraintStatusMarker,
+} from './wrfc-panel-format.ts';
+export { sparkline, stateColor, stateLabel, truncate, constraintStatusMarker } from './wrfc-panel-format.ts';
 
 // ---------------------------------------------------------------------------
 // Panel
@@ -269,7 +158,9 @@ export class WrfcPanel extends BasePanel {
             width,
             ' No WRFC chains yet',
             'WRFC chains appear here as review/fix cycles execute. Expanded rows show scores, gates, issues, and failure detail.',
-            [],
+            [
+              { command: '/wrfc run <task>', summary: 'start a write-review-fix-commit chain for a task' },
+            ],
             DEFAULT_PANEL_PALETTE,
           ),
         },
@@ -334,7 +225,7 @@ export class WrfcPanel extends BasePanel {
               const satisfied = findings ? findings.filter(f => f.satisfied).length : 0;
               const satFg = !findings || findings.length === 0
                 ? DEFAULT_PANEL_PALETTE.dim
-                : satisfied === total ? C.constraintSat : C.constraintUnsat;
+                : satisfied === total ? C.good : C.bad;
               return [
                 [' Constraints ', DEFAULT_PANEL_PALETTE.label],
                 [`${satisfied} sat / ${total} total`, satFg],
@@ -344,6 +235,10 @@ export class WrfcPanel extends BasePanel {
         ]
       : [];
 
+    const totalChains = this.chains.length;
+    const stalledCount = this.chains.filter((c) => this.isStalled(c, now)).length;
+    const completedChains = passedCount + failedCount;
+    const meterWidth = Math.max(10, Math.min(24, width - 34));
     const summarySection: PanelWorkspaceSection = {
       title: 'Summary',
       lines: [
@@ -354,7 +249,16 @@ export class WrfcPanel extends BasePanel {
           [String(passedCount), DEFAULT_PANEL_PALETTE.good],
           ['   Failed ', DEFAULT_PANEL_PALETTE.label],
           [String(failedCount), failedCount > 0 ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.dim],
+          ['   Stalled ', DEFAULT_PANEL_PALETTE.label],
+          [String(stalledCount), stalledCount > 0 ? C.warn : DEFAULT_PANEL_PALETTE.dim],
         ]),
+        buildMeterLine(
+          width,
+          totalChains > 0 ? Math.round((completedChains / totalChains) * meterWidth) : 0,
+          meterWidth,
+          { filled: failedCount > 0 ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.good, empty: C.border, label: DEFAULT_PANEL_PALETTE.label },
+          { prefix: ' Resolved ', suffix: ` ${completedChains}/${totalChains} ` },
+        ),
       ],
     };
     const selectedSection: PanelWorkspaceSection = {
@@ -450,7 +354,7 @@ export class WrfcPanel extends BasePanel {
     fg: string,
     stalled = false,
   ): Line[] {
-    const stateCol   = stalled ? C.stalled : stateColor(chain.state);
+    const stateCol   = stalled ? C.warn : stateColor(chain.state);
     const stateTag   = stalled
       ? ` STALLED`
       : ` ${stateLabel(chain.state).padEnd(6)}`;
@@ -483,7 +387,7 @@ export class WrfcPanel extends BasePanel {
     const remaining  = width - usedWidth;
 
     const segments = [
-      { text: prefix,   fg: isSelected ? fg : C.header },
+      { text: prefix,   fg: isSelected ? fg : C.label },
       { text: stateTag, fg: stateCol, bold: true },
       { text: ' ',      fg: '' },
       { text: taskText, fg: isSelected ? fg : C.value },
@@ -498,11 +402,11 @@ export class WrfcPanel extends BasePanel {
         // Determine badge colour
         let badgeFg: string;
         if (!findings || findings.length === 0) {
-          badgeFg = C.constraintUnv;
+          badgeFg = C.dim;
         } else if (satisfied === total) {
-          badgeFg = C.constraintSat;
+          badgeFg = C.good;
         } else if (findings.some(f => !f.satisfied)) {
-          badgeFg = C.constraintUnsat;
+          badgeFg = C.bad;
         } else {
           badgeFg = C.reviewing; // some unverified but none failed
         }
@@ -536,7 +440,7 @@ export class WrfcPanel extends BasePanel {
     if (chain.reviewScores.length > 0) {
       const spark = sparkline(chain.reviewScores);
       const latestScore = chain.reviewScores[chain.reviewScores.length - 1];
-      const sparkColor  = latestScore >= 8 ? C.sparkHigh : latestScore >= 5 ? C.spark : C.sparkLow;
+      const sparkColor  = latestScore >= 8 ? C.good : latestScore >= 5 ? C.info : C.bad;
       lines.push(buildStyledPanelLine(width, [
         { text: `${indent}Scores  `, fg: C.label },
         { text: spark,               fg: sparkColor },
@@ -648,7 +552,7 @@ export class WrfcPanel extends BasePanel {
 
   private renderGateResult(gate: QualityGateResult, width: number, indent: string): Line {
     const icon   = gate.passed ? '✓' : '✕';
-    const iconFg = gate.passed ? C.gatePass : C.gateFail;
+    const iconFg = gate.passed ? C.good : C.bad;
     const dur    = `${gate.durationMs}ms`;
     const nameMax = width - indent.length - 2 - dur.length - 4;
     const name   = truncate(gate.gate, Math.max(8, nameMax));
@@ -740,7 +644,7 @@ export class WrfcPanel extends BasePanel {
       if (hadChains) {
         // Post-init error: the controller was working and now throws.  Surface
         // a faint diagnostic rather than silently preserving stale state.
-        const msg = err instanceof Error ? err.message : String(err);
+        const msg = summarizeError(err);
         this.controllerError = msg;
         console.debug('[WrfcPanel] controller.listChains() error post-init:', msg);
       }
@@ -773,6 +677,8 @@ export class WrfcPanel extends BasePanel {
     if (!chain) return;
     if (!RESUMABLE_STATES.includes(chain.state)) return;
     this.deps.controller.resumeChain(chain.id);
+    // Re-sync so the rows/footer reflect the state resumeChain transitioned to.
+    this.syncFromController();
     this.markDirty();
   }
 

package/src/renderer/agent-detail-modal.ts

@@ -4,7 +4,7 @@ import { ModalFactory } from './modal-factory.ts';
 import type { AgentManager } from '@pellux/goodvibes-sdk/platform/tools';
 import type { AgentMessageBus } from '@pellux/goodvibes-sdk/platform/agents';
 import type { WrfcController } from '@pellux/goodvibes-sdk/platform/agents';
-import { formatDuration } from './modal-utils.ts';
+import { formatElapsed } from '../utils/format-elapsed.ts';
 import { logger } from '@pellux/goodvibes-sdk/platform/utils';
 import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
@@ -249,7 +249,7 @@ export function renderAgentDetailModal(
   sections.push({ type: 'text', content: `Model    : ${modelStr}` });
   const isStalled = !MODAL_TERMINAL_STATUSES.has(rec.status) && (now - rec.startedAt) >= MODAL_STALL_THRESHOLD_MS;
   sections.push({ type: 'text', content: `Status   : ${rec.status}${isStalled ? '  [STALLED — 5+ min no activity]' : ''}` });
-  sections.push({ type: 'text', content: `Duration : ${formatDuration(elapsedMs)}` });
+  sections.push({ type: 'text', content: `Duration : ${formatElapsed(elapsedMs)}` });
   sections.push({ type: 'separator' });
 
   // Metrics

package/src/renderer/compaction-preview.ts

@@ -17,6 +17,7 @@
  */
 
 import { estimateConversationTokens } from '@pellux/goodvibes-sdk/platform/core';
+import { computeContextUsage } from '../core/context-usage.ts';
 import type { CompactionEvent } from '@pellux/goodvibes-sdk/platform/core';
 import type { ProviderMessage } from '@pellux/goodvibes-sdk/platform/providers';
 
@@ -58,7 +59,7 @@ export function buildCompactionPreview(opts: CompactionPreviewOptions): string {
   const tokensAfterEstimate = COMPACTION_OUTPUT_CEILING_ESTIMATE;
 
   const contextStr = contextWindow > 0
-    ? ` (${Math.round((tokensBefore / contextWindow) * 100)}% of ${fmtN(contextWindow)} context window)`
+    ? ` (${Math.round(computeContextUsage(tokensBefore, contextWindow).rawRatio * 100)}% of ${fmtN(contextWindow)} context window)`
     : '';
 
   const pinStr = pinnedMemoryCount > 0

package/src/renderer/compositor.ts

@@ -6,9 +6,15 @@ import type { SearchManager } from '../input/search.ts';
 import { allowTerminalWrite } from '../runtime/terminal-output-guard.ts';
 import { probeTermCaps, type TermColorCaps } from './term-caps.ts';
 import { DARK_THEME } from './theme.ts';
+import { UI_TONES } from './ui-primitives.ts';
 
 const T = DARK_THEME;
 
+// Accent / dim colors for the panel focus border. The focused pane's left
+// border column is drawn in the accent tone; the unfocused pane stays dim.
+const PANEL_FOCUS_ACCENT = UI_TONES.state.active; // bright blue
+const PANEL_BORDER_DIM = '238';
+
 export interface SelectionInfo {
   isCellSelected: (col: number, absoluteRow: number) => boolean;
   scrollTop: number;
@@ -22,16 +28,18 @@ export interface SearchInfo {
 }
 
 export interface PanelCompositeData {
-  /** Workspace-level tab bar spanning all open panels. */
+  /**
+   * The single consolidated workspace tab bar spanning all open panels across
+   * both panes. There are no per-pane tab bars — pane focus is shown by the
+   * accent border (see `topFocused`/`bottomFocused`).
+   */
   workspaceBar: Line;
-  /** Top pane: tab bar */
-  topTabBar?: Line;
   /** Top pane: panel content lines */
   topContent: Line[];
-  /** Whether the top pane is focused (affects separator color) */
+  /** Whether the top pane is focused (drives the accent border) */
   topFocused: boolean;
-  /** Bottom pane tab bar. Undefined = no bottom pane. */
-  bottomTabBar?: Line;
+  /** Whether a bottom pane is present (splits the panel area). */
+  hasBottomPane: boolean;
   /** Bottom pane content lines. Undefined = no bottom pane. */
   bottomContent?: Line[];
   /** Whether the bottom pane is focused */
@@ -113,29 +121,31 @@ export class Compositor {
     const offset = Math.max(0, vHeight - lineCount);
 
     // --- Pre-compute panel row layout when split pane is active ---
-    // When both top and bottom panes are visible, the panel area is split:
+    // A single consolidated workspace bar heads the panel area; there are no
+    // per-pane tab bars. When both panes are visible the layout is:
     //   row 0:              workspace tab bar
-    //   row 1:              top tab bar
-    //   rows 2..topH+1:     top content
-    //   row topH+2:         horizontal separator (───)
-    //   row topH+3:         bottom tab bar
-    //   rows topH+4..end:   bottom content
-    const hasBottomPane = hasPanel && panel!.bottomTabBar !== undefined;
+    //   rows 1..topH:       top content
+    //   row topH+1:         horizontal separator (───)
+    //   rows topH+2..end:   bottom content
+    const hasBottomPane = hasPanel && panel!.hasBottomPane;
     let topPaneHeight = 0;   // number of content rows in top pane
-    let bottomPaneHeight = 0;
     let hSepRow = -1;        // viewport row of the horizontal separator
     if (hasPanel && hasBottomPane) {
-      const panelAreaRows = Math.max(0, vHeight - 1); // subtract workspace tab bar
-      // top: 1 (tabbar) + topContent rows; bottom: 1 (sep) + 1 (tabbar) + bottomContent
-      const contentRows = Math.max(0, panelAreaRows - 3); // subtract top-tabbar + h-sep + bottom-tabbar
+      const panelAreaRows = Math.max(0, vHeight - 1); // subtract workspace bar
+      const contentRows = Math.max(0, panelAreaRows - 1); // subtract h-separator
       topPaneHeight = Math.max(1, Math.floor(contentRows * panel!.verticalSplitRatio));
-      bottomPaneHeight = Math.max(1, contentRows - topPaneHeight);
-      hSepRow = 2 + topPaneHeight; // workspace bar + top tab bar + top content rows
+      hSepRow = 1 + topPaneHeight; // workspace bar + top content rows
     }
 
-    const sepFg = hasPanel && panel!.separator
-      ? (panel!.topFocused || panel!.bottomFocused ? '244' : '238')
-      : '238';
+    const panelFocused = hasPanel && (panel!.topFocused || panel!.bottomFocused);
+    // Per-row left-border color: the focused pane's rows get the accent tone.
+    const borderFgForRow = (i: number): string => {
+      if (!hasPanel || !panel!.separator || !panelFocused) return PANEL_BORDER_DIM;
+      if (!hasBottomPane) return panel!.topFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
+      if (i === 0) return PANEL_FOCUS_ACCENT; // workspace bar — panel is focused
+      if (i <= topPaneHeight) return panel!.topFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
+      return panel!.bottomFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
+    };
 
     viewport.forEach((line, i) => {
       const screenY = viewportStartY + i;
@@ -163,9 +173,10 @@ export class Compositor {
 
         const p = panel!;
 
-        // Separator column (vertical bar between left and panel area)
+        // Separator column (vertical bar between left and panel area).
+        // Colored per-row so the focused pane shows a bright accent border.
         if (p.separator) {
-          newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: sepFg }));
+          newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: borderFgForRow(i) }));
         }
 
         const panelStartX = sepX + 1;
@@ -195,39 +206,31 @@ export class Compositor {
           const panelLine = i === 0 ? p.workspaceBar : p.topContent[i - 1];
           drawPanelLine(panelLine);
         } else {
-          // --- Two pane mode ---
+          // --- Two pane mode (single consolidated workspace bar) ---
           // Row layout (by viewport row i):
           //   i = 0:                      workspace tab bar
-          //   i = 1:                      top tab bar
-          //   2 <= i <= topPaneHeight+1:  top content[i-2]
+          //   1 <= i <= topPaneHeight:    top content[i-1]
           //   i = hSepRow:                horizontal separator
-          //   i = hSepRow+1:              bottom tab bar
-          //   i >= hSepRow+2:             bottom content[i - (hSepRow+2)]
+          //   i >= hSepRow+1:             bottom content[i - (hSepRow+1)]
           let panelLine: Line | undefined;
 
           if (i === 0) {
             panelLine = p.workspaceBar;
-          } else if (i === 1) {
-            panelLine = p.topTabBar;
-          } else if (i <= topPaneHeight + 1) {
-            panelLine = p.topContent[i - 2];
+          } else if (i <= topPaneHeight) {
+            panelLine = p.topContent[i - 1];
           } else if (i === hSepRow) {
-            // Horizontal separator between the two panes
-            // Render ─ chars across the panel width
-            const focusFg = p.bottomFocused ? '36' : '238'; // cyan if bottom pane focused
+            // Horizontal separator between the two panes. Accent when the bottom
+            // pane has focus so the divider reinforces the focus border.
+            const focusFg = p.bottomFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
             for (let x = 0; x < panelWidth; x++) {
               newBuffer.setCell(panelStartX + x, screenY, createStyledCell('─', { fg: focusFg }));
             }
-            // Also update the separator column char to T-junction (├):
-            // ├ connects the vertical left-separator with the horizontal pane divider,
-            // forming a clean T-shaped joint at the split point.
+            // T-junction (├) joins the vertical left-border with the pane divider.
             if (p.separator) {
               newBuffer.setCell(sepX, screenY, createStyledCell('├', { fg: focusFg }));
             }
-          } else if (i === hSepRow + 1) {
-            panelLine = p.bottomTabBar;
           } else {
-            panelLine = p.bottomContent?.[i - (hSepRow + 2)];
+            panelLine = p.bottomContent?.[i - (hSepRow + 1)];
           }
 
           if (i !== hSepRow) {
@@ -269,7 +272,7 @@ export class Compositor {
       for (let i = viewport.length; i < vHeight; i++) {
         const screenY = viewportStartY + i;
         if (screenY >= height) break;
-        newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: sepFg }));
+        newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: borderFgForRow(i) }));
       }
     }
 

package/src/renderer/modal-utils.ts

@@ -2,16 +2,6 @@
  * Shared rendering utilities for modal components.
  */
 
-/** Format elapsed milliseconds as a compact duration string. */
-export function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  const secs = Math.floor(ms / 1000);
-  if (secs < 60) return `${secs}s`;
-  const mins = Math.floor(secs / 60);
-  const remSecs = secs % 60;
-  return `${mins}m${remSecs}s`;
-}
-
 /**
  * Format a Unix millisecond timestamp as YYYY-MM-DD HH:MM.
  * Returns '(unknown)' for falsy timestamps.

package/src/renderer/model-picker-overlay.ts

@@ -1,5 +1,6 @@
 import { type Line } from '../types/grid.ts';
 import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
+import { abbreviateCount } from '../utils/format-number.ts';
 import type { ModelPickerModal } from '../input/model-picker.ts';
 import { EFFORT_DESCRIPTIONS } from '@pellux/goodvibes-sdk/platform/providers';
 import { getQualityTier, getQualityTierFromScore } from '@pellux/goodvibes-sdk/platform/providers';
@@ -15,9 +16,7 @@ import { getOverlaySurfaceMetrics } from './overlay-viewport.ts';
 
 /** Format a context window number into a short human-readable string. */
 function fmtContext(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)}M`;
-  if (n >= 1000) return `${Math.round(n / 1000)}k`;
-  return String(n);
+  return abbreviateCount(n, { rounding: 'round', decimals: 0 });
 }
 
 /** Title text per picker mode. */
@@ -360,6 +359,12 @@ export function renderModelPickerOverlay(
     putRowText(promptRow, layout.margin + 2, contentW, fitDisplay(`${promptLabel} ${inputDisplay}`, contentW), '#ffffff');
     lines.push(promptRow);
 
+    if (picker.contextCapError) {
+      const errRow = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
+      putRowText(errRow, layout.margin + 2, contentW, fitDisplay(picker.contextCapError, contentW), '#ff6666');
+      lines.push(errRow);
+    }
+
     lines.push(createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg));
 
     const hintText = `Leave blank to use default (current: ${currentCtx}, source: ${provenance})`;
@@ -458,7 +463,7 @@ function getRenderCacheKey(
   } else if (picker.mode === 'effort') {
     base.push(objectId(picker.effortLevels), picker.effortLevels.join('\u001f'), picker.pendingModel?.registryKey ?? picker.pendingModel?.id ?? '');
   } else if (picker.mode === 'contextCap') {
-    base.push(picker.contextCapQuery, picker.contextCapPendingModel?.registryKey ?? picker.contextCapPendingModel?.id ?? '');
+    base.push(picker.contextCapQuery, picker.contextCapPendingModel?.registryKey ?? picker.contextCapPendingModel?.id ?? '', picker.contextCapError ?? '');
   }
 
   return base.join('\u001e');

package/src/renderer/model-workspace.ts

@@ -11,6 +11,7 @@ import type { ModelPickerTargetInfo } from '../input/model-picker.ts';
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine, createStyledCell } from '../types/grid.ts';
 import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
+import { abbreviateCount } from '../utils/format-number.ts';
 import { GLYPHS, UI_TONES } from './ui-primitives.ts';
 
 const PALETTE = {
@@ -129,9 +130,7 @@ function stableWindow(total: number, selected: number, visible: number): { start
 
 function formatContext(value: number | undefined): string {
   if (!value) return '-';
-  if (value >= 1_000_000) return `${Math.round(value / 1_000_000)}M`;
-  if (value >= 1000) return `${Math.round(value / 1000)}k`;
-  return String(value);
+  return abbreviateCount(value, { rounding: 'round', decimals: 0 });
 }
 
 function modelKey(model: ModelDefinition): string {

package/src/renderer/panel-composite.ts

@@ -4,7 +4,6 @@ import type { InputHandler } from '../input/handler.ts';
 import type { PanelManager } from '../panels/panel-manager.ts';
 import type { PanelCompositeData } from './compositor.ts';
 import { createSplitPaneLayout } from './layout-engine.ts';
-import { renderPanelTabBar } from './panel-tab-bar.ts';
 import { renderPanelWorkspaceBar } from './panel-workspace-bar.ts';
 
 /**
@@ -108,33 +107,22 @@ export function buildPanelCompositeData(
   const workspaceBar = renderPanelWorkspaceBar(workspaceTabs, panelWidth, input.panelFocused);
 
   let topContent: Line[];
-  let topTabBar: Line | undefined;
-  let bottomTabBar: Line | undefined;
   let bottomContent: Line[] | undefined;
 
   const topActivePanel = topPane.panels[topPane.activeIndex] ?? null;
 
   if (hasBottom) {
-    topTabBar = renderPanelTabBar(
-      topPane.panels,
-      topPane.activeIndex,
-      panelWidth,
-      input.panelFocused && focusedPane === 'top',
-      'top',
-    );
-    const paneLayout = createSplitPaneLayout(Math.max(0, panelHeight - 1), verticalSplitRatio);
+    // Single consolidated workspace bar (1 row) + h-separator (1 row); the rest
+    // splits between the two panes' content.
+    const paneLayout = createSplitPaneLayout(Math.max(0, panelHeight - 1), verticalSplitRatio, {
+      topTabRows: 0,
+      bottomTabRows: 0,
+    });
     const topH = paneLayout.topContentRows;
     const bottomH = paneLayout.bottomContentRows;
     topContent = topActivePanel ? renderPanel(topActivePanel, panelWidth, topH) : [];
 
     const bottomActivePanel = bottomPane.panels[bottomPane.activeIndex] ?? null;
-    bottomTabBar = renderPanelTabBar(
-      bottomPane.panels,
-      bottomPane.activeIndex,
-      panelWidth,
-      input.panelFocused && focusedPane === 'bottom',
-      'bottom',
-    );
     bottomContent = bottomActivePanel ? renderPanel(bottomActivePanel, panelWidth, bottomH) : [];
   } else {
     const topH = Math.max(0, panelHeight - 1);
@@ -144,10 +132,9 @@ export function buildPanelCompositeData(
   return {
     panelData: {
       workspaceBar,
-      topTabBar,
       topContent,
       topFocused: input.panelFocused && focusedPane === 'top',
-      bottomTabBar,
+      hasBottomPane: hasBottom,
       bottomContent,
       bottomFocused: input.panelFocused && focusedPane === 'bottom',
       separator: true,