@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -4,6 +4,29 @@ All notable changes to GoodVibes TUI.
 
 ---
 
+## [0.28.0] — 2026-06-30
+
+Panel navigation & UI/UX overhaul, plus the accumulated post-0.27.0 UX fixes.
+
+### Added
+- **Unified panel navigation**: a single consolidated tab bar with a focus-accent border; jump directly to any panel with `Alt+1`–`Alt+9`, click tabs, and toggle the active pane with `Ctrl+G`.
+- **In-panel filtering**: press `/` to filter the list in panels that support it.
+- **Mouse-wheel scrolling** on every panel (via `BasePanel.handleScroll`).
+
+### Changed
+- **Width-aware formatting** across panels: shared toolkit primitives (`fitDisplay`, table/tree/badge/meter helpers) replace hand-rolled `.slice()`/`.padEnd()`, so rows stay aligned across emoji, CJK, and other wide characters.
+- **Scroll-back**: you can scroll up during and after a turn; the view only auto-follows the tail when parked at the bottom.
+- **Auto-compaction is now owned entirely by the SDK** (`@pellux/goodvibes-sdk` 0.35.0 `handlePostTurnContextMaintenance`). The redundant TUI-side trigger was removed to prevent double-compaction; manual `/compact` now builds a richer handoff context (running agents, WRFC chains, active plan, session lineage).
+
+### Fixed
+- Timer/async panels repaint while the main thread is idle instead of looking frozen (repaints gated on panel-active state).
+- Input/keybinding papercuts: reverse-search accept, Home/End, and the command palette.
+- Crash/signal safety net: the terminal is always restored on uncaught exceptions and termination signals.
+- Consolidated number/duration/context-usage formatting and routed the context window through one corrected `getContextWindowForModel` source across every surface.
+
+### Internal
+- Split `polish.ts` into leaf `polish-core.ts` + `polish-tables.ts` and extracted `wrfc-panel-format.ts` to satisfy the 800-line architecture gate; no public API changes (all symbols re-exported).
+
 ## [0.27.0] — 2026-06-30
 
 Full deep-review audit of the TUI (33 findings fixed, each reviewed to a score of 10) and adoption of `@pellux/goodvibes-sdk` 0.35.0.

package/README.md

@@ -2,7 +2,7 @@
 
 [![CI](https://github.com/mgd34msu/goodvibes-tui/actions/workflows/ci.yml/badge.svg)](https://github.com/mgd34msu/goodvibes-tui/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Version](https://img.shields.io/badge/version-0.27.0-blue.svg)](https://github.com/mgd34msu/goodvibes-tui)
+[![Version](https://img.shields.io/badge/version-0.28.0-blue.svg)](https://github.com/mgd34msu/goodvibes-tui)
 
 A terminal-native AI coding, operations, automation, knowledge, and integration console with a typed runtime, omnichannel surfaces, structured memory/knowledge, and a raw ANSI renderer.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pellux/goodvibes-tui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Terminal-native GoodVibes product for coding, operations, automation, knowledge, channels, and daemon-backed control-plane workflows.",
   "type": "module",
   "main": "src/main.ts",

package/src/core/context-usage.ts

@@ -0,0 +1,53 @@
+/**
+ * Shared context-window usage computation.
+ *
+ * Centralises the tokens/contextWindow ratio so all panels, auto-compact,
+ * and session-maintenance read from one formula rather than six diverging
+ * hand-rolled copies.
+ *
+ * IMPORTANT: compaction-preview.ts intentionally displays usage > 100%
+ * ("exceeds window") — callers that need the unclamped value must use
+ * rawRatio, not clampedRatio / pct.
+ */
+
+export interface ContextUsage {
+  /**
+   * Raw (unclamped) ratio: max(0, tokens) / contextWindow.
+   * May exceed 1.0 when token count surpasses the context window.
+   * 0 when contextWindow <= 0.
+   */
+  rawRatio: number;
+  /**
+   * Ratio clamped to [0, 1]. Use for progress-bar fill and color bands.
+   */
+  clampedRatio: number;
+  /**
+   * Integer percentage clamped to [0, 100].
+   * Equivalent to Math.min(100, Math.round(rawRatio * 100)).
+   * Use for numeric displays and threshold comparisons.
+   */
+  pct: number;
+  /**
+   * Remaining tokens: max(0, contextWindow - tokens).
+   * 0 when contextWindow <= 0.
+   */
+  remaining: number;
+}
+
+/**
+ * Compute context-window usage metrics from raw token counts.
+ *
+ * @param tokens        Current input-token count (negative values are treated as 0).
+ * @param contextWindow Model context window size (0 or negative → all fields return 0).
+ */
+export function computeContextUsage(tokens: number, contextWindow: number): ContextUsage {
+  if (contextWindow <= 0) {
+    return { rawRatio: 0, clampedRatio: 0, pct: 0, remaining: 0 };
+  }
+  const safeTokens   = Math.max(0, tokens);
+  const rawRatio     = safeTokens / contextWindow;
+  const clampedRatio = Math.min(1, rawRatio);
+  const pct          = Math.min(100, Math.round(rawRatio * 100));
+  const remaining    = Math.max(0, contextWindow - tokens);
+  return { rawRatio, clampedRatio, pct, remaining };
+}

package/src/core/conversation.ts

@@ -110,7 +110,7 @@ export class ConversationManager extends SdkConversationManager {
    * Message index at the time of the last clearDisplay() call.
    * rebuildHistory() renders only messages at or after this index, so the
    * display stays blank for messages added before the clear while LLM history
-   * is fully preserved. Reset to 0 on resetAll() or rebuildHistory() width change.
+   * is fully preserved. Persists until resetAll(). rebuildHistory() never resets this value.
    */
   private _displayFromMessageIndex = 0;
 
@@ -404,8 +404,6 @@ export class ConversationManager extends SdkConversationManager {
 
     // When _displayFromMessageIndex > 0, clearDisplay() was called. Only render
     // messages added after the clear — the pre-clear history stays off-screen.
-    // On a full rebuild (e.g. width change), reset the display-start to 0 so the
-    // user can scroll back to the full history if needed.
     const displayStart = this._displayFromMessageIndex;
     const visibleSnapshot = displayStart > 0 ? renderSnapshot.slice(displayStart) : renderSnapshot;
 
@@ -662,9 +660,9 @@ export class ConversationManager extends SdkConversationManager {
     // messageKindRegistry is NOT cleared here. The underlying messages array is
     // preserved by clearDisplay(); kind entries for pre-clear messages are harmless
     // because those messages are hidden by _displayFromMessageIndex and never rendered.
-    // Clearing the registry would cause kind loss for pre-clear messages that become
-    // visible again after a subsequent width-change rebuild (which resets displayStart
-    // to 0), incorrectly making operational messages navigable.
+    // Clearing the registry would cause kind loss for pre-clear messages; if
+    // resetAll() later restores displayStart to 0, those messages re-render
+    // and their kind entries must still be present to suppress navigation.
     // Advance _displayFromMessageIndex to exclude all current messages from display.
     // rebuildHistory() will only render messages added AFTER this point.
     this._displayFromMessageIndex = this.getMessageSnapshot().length;

package/src/core/session-recovery.ts

@@ -115,6 +115,8 @@ export function replayJournalIntoConversation(
     conversation.fromJSON({
       ...preserved,
       messages: replayedMessages as never[],
+      title: conversation.title,
+      titleSource: conversation.getTitleSource(),
     });
     conversation.rebuildHistory();
 

package/src/core/turn-event-wiring.ts

@@ -19,6 +19,7 @@ interface TurnOrchestrator {
 /** Minimal provider registry surface required by turn-event wiring. */
 interface TurnProviderRegistry {
   getCurrentModel(): { readonly contextWindow: number };
+  getContextWindowForModel(model: { readonly contextWindow: number }): number;
 }
 
 /** Minimal config manager surface required by turn-event wiring. */

package/src/input/commands/eval.ts

@@ -109,8 +109,9 @@ async function handleCompare(args: string[], context: CommandContext): Promise<v
 // ── /eval gate ────────────────────────────────────────────────────────────────
 
 async function handleGate(args: string[], context: CommandContext): Promise<void> {
-  const suiteName = args[0];
-  const baselineFile = args[1] ?? '.goodvibes/eval/baseline.json';
+  const positionals = args.filter(a => !a.startsWith('--'));
+  const suiteName = positionals[0];
+  const baselineFile = positionals[1] ?? '.goodvibes/eval/baseline.json';
   const saveFlag = args.includes('--save-baseline');
   const projectRoot = requireShellPaths(context).workingDirectory;
 
@@ -141,7 +142,7 @@ async function handleGate(args: string[], context: CommandContext): Promise<void
   context.print(formatGateResult(gate));
 
   if (saveFlag || !baseline) {
-    const label = args[0] ?? 'latest';
+    const label = positionals[0] ?? 'latest';
     const newBaseline = captureBaseline(label, [fresh]);
     try {
       await writeBaseline(baselineFile, newBaseline, projectRoot);

package/src/input/handler-feed-routes.ts

@@ -13,6 +13,8 @@ import {
 } from './handler-prompt-buffer.ts';
 import { cleanupMarkerRegistry, expandPrompt, findMarkerAtPos, registerPaste } from './handler-content-actions.ts';
 import type { PanelManager } from '../panels/panel-manager.ts';
+import { renderPanelWorkspaceBar } from '../renderer/panel-workspace-bar.ts';
+import type { TabHitRegion } from '../renderer/tab-strip.ts';
 import type { KeybindingsManager } from './keybindings.ts';
 import type { KillRing } from './kill-ring.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
@@ -84,6 +86,23 @@ export function handlePanelFocusToken(state: PanelFocusRouteState, token: InputT
       state.cyclePanelTab('prev');
       return { handled: true, panelFocused };
     }
+    if (kb.matches('panel-focus-toggle', token)) {
+      // Switch keyboard focus between the top and bottom panes (no-op when
+      // there is no visible, non-empty bottom pane).
+      state.panelManager.togglePaneFocus();
+      state.requestRender();
+      return { handled: true, panelFocused };
+    }
+    // Alt+1..9 — jump directly to the Nth workspace tab (across both panes).
+    // The tokenizer maps the Alt modifier onto `meta`, so an Alt-held digit
+    // arrives as { logicalName: '1'..'9', meta: true }. Gating on the modifier
+    // keeps plain digits reaching the focused panel.
+    if (token.meta && !token.ctrl && /^[1-9]$/.test(token.logicalName ?? '')) {
+      const index = Number(token.logicalName) - 1;
+      state.panelManager.activateWorkspaceIndex(index);
+      state.requestRender();
+      return { handled: true, panelFocused };
+    }
     if (kb.matches('panel-close-all', token)) {
       const pm = state.panelManager;
       for (const p of pm.getAllOpen()) pm.close(p.id);
@@ -577,18 +596,48 @@ function getPanelUnderMouse(
     return getActivePanelInPane(panelManager, 'top');
   }
 
+  // Single consolidated workspace bar (row 0) + h-separator; the rest splits
+  // between the two panes' content.
   const panelAreaRows = Math.max(0, layout.height - 1);
-  const contentRows = Math.max(0, panelAreaRows - 3);
+  const contentRows = Math.max(0, panelAreaRows - 1);
   const topContentRows = contentRows <= 1
     ? contentRows
     : Math.max(1, Math.floor(contentRows * clampRatio(layout.verticalSplitRatio)));
-  const topLastRow = 2 + topContentRows;
-
-  return panelRow <= topLastRow
+  // panelRow 0 = workspace bar; rows 1..topContentRows = top pane; rest = bottom.
+  return panelRow <= topContentRows
     ? getActivePanelInPane(panelManager, 'top')
     : getActivePanelInPane(panelManager, 'bottom');
 }
 
+/**
+ * If the mouse is over the consolidated workspace tab bar (the first panel
+ * row), return the index of the tab under the cursor, else null. Recomputes the
+ * tab hit regions by rendering the bar with a layout callback — cheap and keeps
+ * the click geometry in lockstep with what was drawn.
+ */
+function workspaceTabAtMouse(
+  panelManager: PanelManager,
+  layout: PanelMouseLayout | null,
+  row: number,
+  col: number,
+): number | null {
+  if (
+    layout === null
+    || !panelManager.isVisible()
+    || panelManager.getAllOpen().length === 0
+    || row !== layout.y // workspace bar is the first panel row
+    || col < layout.x
+    || col >= layout.x + layout.width
+  ) {
+    return null;
+  }
+  let regions: readonly TabHitRegion[] = [];
+  renderPanelWorkspaceBar(panelManager.getWorkspaceTabs(), layout.width, true, (r) => { regions = r; });
+  const relCol = col - layout.x;
+  const hit = regions.find((rg) => relCol >= rg.startCol && relCol < rg.endCol);
+  return hit ? hit.index : null;
+}
+
 function scrollPanelUnderMouse(
   state: MouseRouteState,
   token: Extract<InputToken, { type: 'mouse' }>,
@@ -634,6 +683,14 @@ export function handleMouseToken(state: MouseRouteState, token: InputToken): {
     return { handled: true, mouseDownRow, mouseDownCol };
   }
   if (token.button === 0 && token.action === 'press') {
+    // Click on a workspace tab activates it (checked before starting a text
+    // selection so a tab click doesn't begin a drag-select).
+    const tabIndex = workspaceTabAtMouse(state.panelManager, state.panelMouseLayout, token.row, token.col);
+    if (tabIndex !== null) {
+      state.panelManager.activateWorkspaceIndex(tabIndex);
+      state.requestRender();
+      return { handled: true, mouseDownRow, mouseDownCol };
+    }
     mouseDownRow = token.row;
     mouseDownCol = token.col;
     state.selection.startSelection(token.col, viewportRow, state.scrollTop, state.viewportHeight, state.lineCount);

package/src/input/handler-feed.ts

@@ -296,6 +296,19 @@ export function feedInputTokens(context: InputFeedContext, tokens: readonly Inpu
         context.cursorPos = shortcutState.cursorPos;
         context.commandMode = shortcutState.commandMode;
         context.panelFocused = shortcutState.panelFocused;
+        if (context.commandMode) {
+          if (!context.prompt.startsWith('/')) {
+            context.commandMode = false;
+            context.autocomplete?.reset();
+          } else {
+            const q = context.prompt.slice(1);
+            if (q.indexOf(' ') === -1) {
+              context.autocomplete?.update(q);
+            } else {
+              context.autocomplete?.reset();
+            }
+          }
+        }
         continue;
       }
     }

package/src/input/handler-picker-routes.ts

@@ -98,13 +98,22 @@ export function handleModelPickerToken(state: ModelPickerRouteState, token: Inpu
         if (capModel) {
           const rawInput = state.modelPicker.contextCapQuery.trim();
           const parsedCap = rawInput.length > 0 ? parseInt(rawInput, 10) : null;
-          const validCap = parsedCap !== null && parsedCap > 0 && parsedCap <= 10_000_000 ? parsedCap : null;
-          const effort = state.commandContext?.session.runtime.reasoningEffort ?? 'medium';
-          const handled = state.onModelPickerCommit?.() ?? false;
-          if (!handled) state.commandContext?.completeModelSelection?.({ model: capModel, effort, contextCap: validCap, target: state.modelPicker.target });
+          if (parsedCap !== null && (parsedCap <= 0 || parsedCap > 10_000_000)) {
+            // Non-empty but out of valid range — surface notice; keep picker open for correction.
+            state.modelPicker.contextCapError = 'Context cap must be 1–10,000,000';
+          } else {
+            state.modelPicker.contextCapError = null;
+            const validCap = parsedCap !== null && parsedCap > 0 && parsedCap <= 10_000_000 ? parsedCap : null;
+            const effort = state.commandContext?.session.runtime.reasoningEffort ?? 'medium';
+            const handled = state.onModelPickerCommit?.() ?? false;
+            if (!handled) state.commandContext?.completeModelSelection?.({ model: capModel, effort, contextCap: validCap, target: state.modelPicker.target });
+            state.modelPicker.close();
+            if (state.modalStack[state.modalStack.length - 1] === 'modelPicker') state.modalStack.pop();
+          }
+        } else {
+          state.modelPicker.close();
+          if (state.modalStack[state.modalStack.length - 1] === 'modelPicker') state.modalStack.pop();
         }
-        state.modelPicker.close();
-        if (state.modalStack[state.modalStack.length - 1] === 'modelPicker') state.modalStack.pop();
       }
     } else if (token.logicalName === 'up') {
       if (state.modelPicker.focusPane === 'targets') {
@@ -158,14 +167,10 @@ export function handleModelPickerToken(state: ModelPickerRouteState, token: Inpu
     if (state.modelPicker.mode === 'contextCap') {
       if (token.value.length === 1) state.modelPicker.appendContextCapChar(token.value);
     } else if ((state.modelPicker.mode === 'model' || state.modelPicker.mode === 'provider') && state.modelPicker.searchFocused) {
+      // When search is focused every printable char — including space — goes to the query.
+      // The space=context-cap shortcut remains active only in the non-search branch below.
       const ch = token.value;
-      if (ch === ' ' && state.modelPicker.mode === 'model') {
-        const selected = state.modelPicker.getSelected();
-        if (selected && state.modelPicker.isLocalModel(selected)) state.modelPicker.enterContextCapMode(selected);
-        else if (ch.length === 1 && ch >= ' ') state.modelPicker.appendChar(ch);
-      } else if (ch.length === 1 && ch >= ' ') {
-        state.modelPicker.appendChar(ch);
-      }
+      if (ch.length === 1 && ch >= ' ') state.modelPicker.appendChar(ch);
     } else if (token.value === ' ' && state.modelPicker.mode === 'model') {
       const selected = state.modelPicker.getSelected();
       if (selected && state.modelPicker.isLocalModel(selected)) state.modelPicker.enterContextCapMode(selected);

package/src/input/handler-ui-state.ts

@@ -354,6 +354,10 @@ export function handleHistorySearchToken(state: HistorySearchRouteState, token:
       state.historySearch.stepOlder();
     } else if (token.ctrl && token.logicalName === 's') {
       state.historySearch.stepNewer();
+    } else if (token.logicalName === 'up') {
+      state.historySearch.stepOlder();
+    } else if (token.logicalName === 'down') {
+      state.historySearch.stepNewer();
     }
   }
 

package/src/input/keybindings.ts

@@ -38,6 +38,7 @@ export type KeyAction =
   | 'panel-close-all'
   | 'panel-tab-next'
   | 'panel-tab-prev'
+  | 'panel-focus-toggle'
   | 'history-search'
   | 'search'
   | 'block-copy'
@@ -69,6 +70,7 @@ export const ACTION_DESCRIPTIONS: Record<KeyAction, string> = {
   'panel-close-all':         'Close all open panels',
   'panel-tab-next':        'Next workspace panel tab',
   'panel-tab-prev':        'Previous workspace panel tab',
+  'panel-focus-toggle':    'Switch keyboard focus between top and bottom pane',
   'history-search':        'Reverse input history search',
   'search':                'Toggle conversation search',
   'block-copy':            'Copy nearest block to clipboard',
@@ -101,6 +103,9 @@ export const DEFAULT_KEYBINDINGS: Record<KeyAction, KeyCombo[]> = {
   'panel-close-all':         [{ key: 'x', ctrl: true, shift: true }],
   'panel-tab-next':        [{ key: ']', ctrl: true }],
   'panel-tab-prev':        [{ key: '[', ctrl: true }],
+  // Ctrl+G: toggle keyboard focus between the top and bottom panes. Ctrl+G is
+  // otherwise unbound in the default table.
+  'panel-focus-toggle':    [{ key: 'g', ctrl: true }],
   'history-search':        [{ key: 'r', ctrl: true }],
   'search':                [{ key: 'f', ctrl: true }],
   'block-copy':            [{ key: 'y', ctrl: true }],

package/src/input/model-picker.ts

@@ -92,6 +92,8 @@ export class ModelPickerModal {
   public contextCapPendingModel: ModelDefinition | null = null;
   /** Current input string in contextCap mode. */
   public contextCapQuery = '';
+  /** Validation error from the last context cap commit (e.g. out-of-range value); null when no error. */
+  public contextCapError: string | null = null;
 
   // ── Search / filter ─────────────────────────────────────────────────────────────────────────────
   /** Current search query string (empty = no filter). */
@@ -215,6 +217,7 @@ export class ModelPickerModal {
     this.previousMode = 'model';
     this.contextCapPendingModel = model;
     this.contextCapQuery = '';
+    this.contextCapError = null;
     this.mode = 'contextCap';
   }
 
@@ -245,6 +248,7 @@ export class ModelPickerModal {
     this.query = '';
     this.categoryFilter = 'all';
     this.capabilityFilter = 'none';
+    this.availableOnly = true;
     const filtered = this.getFilteredModels();
     const idx = filtered.findIndex(m => m.id === currentModelId);
     this.selectedIndex = idx >= 0 ? idx : 0;
@@ -310,6 +314,7 @@ export class ModelPickerModal {
     this.pendingModel = null;
     this.contextCapPendingModel = null;
     this.contextCapQuery = '';
+    this.contextCapError = null;
     this.searchFocused = false;
     this.selectedIndex = 0;
     this.scrollOffset = 0;

package/src/input/panel-integration-actions.ts

@@ -41,6 +41,16 @@ export function handlePanelIntegrationAction(
 ): boolean {
   if (!activePanel) return false;
 
+  // Prefer the panel's own integration hook when it provides one. Panels migrated
+  // onto the formal hook opt out of the instanceof routing below.
+  if (activePanel.handlePanelIntegrationAction) {
+    const consumed = activePanel.handlePanelIntegrationAction(key, {
+      panelManager,
+      executeCommand: commandContext?.executeCommand,
+    });
+    if (consumed) return true;
+  }
+
   if ((key === 'enter' || key === 'return' || key === 'right') && activePanel instanceof FileExplorerPanel) {
     const filePath = activePanel.getFocusedFilePath();
     if (!filePath) return false;

package/src/main.ts

@@ -29,7 +29,6 @@ import { applyConversationOverlays } from './renderer/conversation-overlays.ts';
 import { buildPanelCompositeData } from './renderer/panel-composite.ts';
 import { logger } from '@pellux/goodvibes-sdk/platform/utils';
 import { registerBuiltinPanels } from './panels/builtin-panels.ts';
-import { renderPanelTabBar } from './renderer/panel-tab-bar.ts';
 import { bootstrapRuntime } from './runtime/bootstrap.ts';
 import type { BootstrapContext } from './runtime/bootstrap.ts';
 import type { HITLMode } from '@pellux/goodvibes-sdk/platform/state';

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

@@ -77,6 +77,8 @@ const COLOR = {
   selected:    '#ffee88',
   dimmed:      '#555566',
   expandHint:  '#445566',
+  stalled:     '#f59e0b',   // amber — stalled-agent warning
+  cursorBg:    '#1a2233',   // timeline cursor row background
 } as const;
 
 // ---------------------------------------------------------------------------
@@ -256,9 +258,11 @@ export class AgentInspectorPanel extends BasePanel {
               width,
               agents.length === 0 ? ' No agents running' : ' No agent selected',
               agents.length === 0
-                ? 'Spawn an agent to inspect its live and historical timeline.'
+                ? 'Spawn an agent to inspect its live and historical timeline, tool calls, and output.'
                 : 'Press Tab to cycle through available agents and open one in the inspector.',
-              [],
+              agents.length === 0
+                ? [{ command: '/spawn <task>', summary: 'launch an agent, then Tab here to inspect its timeline' }]
+                : [{ command: 'Tab', summary: 'select the first available agent' }],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -274,7 +278,7 @@ export class AgentInspectorPanel extends BasePanel {
     const now = Date.now();
     const isStalled = this._isAgentStalled(rec, now);
     if (isStalled) {
-      summaryLines.push(buildPanelLine(width, [['  STALLED', '#f59e0b'], [' — no activity for 5+ minutes', DEFAULT_PANEL_PALETTE.dim]]));
+      summaryLines.push(buildPanelLine(width, [['  STALLED', COLOR.stalled], [' — no activity for 5+ minutes', DEFAULT_PANEL_PALETTE.dim]]));
     }
     const allRows = this._getCachedRows();
     if (allRows.length === 0) {
@@ -288,8 +292,12 @@ export class AgentInspectorPanel extends BasePanel {
             lines: buildEmptyState(
               width,
               ' No messages yet',
-              'The selected agent has not emitted any visible timeline entries yet.',
-              [],
+              rec.status === 'running'
+                ? 'The selected agent is running but has not emitted visible timeline entries yet — live output streams in as it works.'
+                : 'The selected agent has not emitted any visible timeline entries.',
+              rec.status === 'running'
+                ? [{ command: 'c', summary: 'cancel this running agent if it appears stalled' }]
+                : [{ command: 'Tab', summary: 'cycle to another agent with timeline activity' }],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -397,9 +405,7 @@ export class AgentInspectorPanel extends BasePanel {
     const elapsed = (rec.completedAt ?? now) - rec.startedAt;
     const taskPreview = rec.task.split('\n')[0] ?? '';
     const maxTask = Math.max(0, width - 40);
-    const taskDisplay = taskPreview.length > maxTask
-      ? taskPreview.slice(0, maxTask - 1) + '\u2026'
-      : taskPreview;
+    const taskDisplay = truncateDisplay(taskPreview, maxTask);
     return buildPanelLine(width, [
       [' Status ', DEFAULT_PANEL_PALETTE.label],
       [rec.status.toUpperCase(), rec.status === 'running' ? DEFAULT_PANEL_PALETTE.good : rec.status === 'failed' ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.dim],
@@ -425,7 +431,7 @@ export class AgentInspectorPanel extends BasePanel {
     row: DisplayRow,
     isCursor: boolean,
   ): Line {
-    const bg = isCursor ? '#1a2233' : '';
+    const bg = isCursor ? COLOR.cursorBg : '';
     const ts = shortTime(row.timestamp);
     const { fg, prefix } = agentKindStyle(row.kind, COLOR);
     const hint = row.hasDetail ? (row.expanded ? ' ▾' : ' ▸') : '';
@@ -527,9 +533,7 @@ export class AgentInspectorPanel extends BasePanel {
         kind,
         timestamp: msg.timestamp,
         label: msg.from,
-        content: msg.content.length > 200
-          ? msg.content.slice(0, 197) + '\u2026'
-          : msg.content,
+        content: truncateDisplay(msg.content, 200),
         expanded: false,
       } satisfies TimelineEntry);
     }
@@ -669,7 +673,8 @@ export class AgentInspectorPanel extends BasePanel {
     if (!this.selectedAgentId) return;
     const rec = this.deps.agentManager.getStatus(this.selectedAgentId);
     if (!rec || AGENT_TERMINAL_STATUSES.has(rec.status)) return;
-    const label = rec.task.split('\n')[0]?.slice(0, 40) ?? rec.id.slice(-8);
+    const firstLine = rec.task.split('\n')[0];
+    const label = firstLine ? truncateDisplay(firstLine, 40) : rec.id.slice(-8);
     this.confirmCancel = { subject: rec.id, label };
     this.markDirty();
   }

package/src/panels/agent-inspector-shared.ts

@@ -1,3 +1,5 @@
+import { formatDuration } from '../utils/format-duration.ts';
+
 export type AgentInspectorEntryKind = 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'session' | 'error';
 
 // ---------------------------------------------------------------------------
@@ -61,9 +63,7 @@ export function agentStatusColor(status: string, colors: Record<string, string>)
 }
 
 export function formatAgentDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
-  return `${Math.floor(ms / 60000)}m${Math.floor((ms % 60000) / 1000)}s`;
+  return formatDuration(ms);
 }
 
 export function formatAgentTime(ts: number): string {