@pellux/goodvibes-tui 0.28.0 → 1.0.0

package/src/renderer/tool-call.ts

@@ -4,6 +4,7 @@ import { getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
 import type { ToolCall } from '@pellux/goodvibes-sdk/platform/types';
 import { stripDangerousAnsi } from './ansi-sanitize.ts';
 import { formatElapsed } from '../utils/format-elapsed.ts';
+import { UI_TONES } from './ui-primitives.ts';
 
 const TOOL_NAME_MIN_WIDTH = 8;
 const TOOL_NAME_MAX_WIDTH = 20;
@@ -73,14 +74,14 @@ function buildLeftSegments(
     segments.push({ text: toolNameDisplay, fg: '#00ffcc', bold: true });
   }
   if (keyArgDisplay) {
-    segments.push({ text: '  ', fg: '#e2e8f0' });
+    segments.push({ text: '  ', fg: UI_TONES.fg.primary });
     segments.push({ text: keyArgDisplay, fg: '252' });
   }
   if (suffixDisplay) {
-    segments.push({ text: '  ', fg: '#e2e8f0' });
+    segments.push({ text: '  ', fg: UI_TONES.fg.primary });
     segments.push({
       text: suffixDisplay,
-      fg: suffixText.startsWith('- ') ? '#ef4444' : '244',
+      fg: suffixText.startsWith('- ') ? UI_TONES.state.bad : '244',
       dim: true,
     });
   }
@@ -171,8 +172,8 @@ export function renderToolCallBlock(
   const icon = status === 'done' ? TOOL_STATUS.SUCCESS_ICON
     : status === 'error' ? TOOL_STATUS.FAIL_ICON
     : TOOL_STATUS.SPINNER_FRAMES[(frameIndex ?? 0) % TOOL_STATUS.SPINNER_FRAMES.length];
-  const iconColor = status === 'done' ? '#22c55e'
-    : status === 'error' ? '#ef4444'
+  const iconColor = status === 'done' ? UI_TONES.state.good
+    : status === 'error' ? UI_TONES.state.bad
     : '244';
   const rightText = (() => {
     if (durationMs !== undefined && status === 'done') {
@@ -227,18 +228,3 @@ export function renderToolCallBlock(
 
   return [line];
 }
-
-/**
- * Render a list of tool calls. All calls are treated as completed (done).
- * Used for historical message rendering where status/timing is unavailable.
- */
-export function renderToolCallList(
-  toolCalls: ToolCall[],
-  width: number,
-): Line[] {
-  const lines: Line[] = [];
-  for (const tc of toolCalls) {
-    lines.push(...renderToolCallBlock(tc, 'done', undefined, width));
-  }
-  return lines;
-}

package/src/renderer/ui-factory.ts

@@ -4,10 +4,12 @@ import { VERSION } from '../version.ts';
 import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText, interpolateColor } from '../utils/terminal-width.ts';
 import type { GitHeaderInfo } from './git-status.ts';
 import { renderConversationFragment, renderConversationStatusLine, type ConversationStatusSegment } from './conversation-surface.ts';
-import { GLYPHS } from './ui-primitives.ts';
+import { GLYPHS, UI_TONES } from './ui-primitives.ts';
 import { formatElapsed } from '../utils/format-elapsed.ts';
 import { abbreviateCount } from '../utils/format-number.ts';
 import { computeContextUsage } from '../core/context-usage.ts';
+import { calcSessionCost } from '../export/cost-utils.ts';
+import { buildFooterTip, isAgentActive } from './footer-tips.ts';
 
 /** Number of frames before the animated gradient completes one full cycle. */
 const GRADIENT_CYCLE_FRAMES = 50;
@@ -35,15 +37,23 @@ function fmtNum(n: number): string {
   return abbreviateCount(n, { bSuffix: true });
 }
 
+/** Format a running USD cost estimate with a precision that suits its magnitude. */
+function fmtCost(usd: number): string {
+  if (!(usd > 0)) return '0.00';
+  if (usd < 0.01) return usd.toFixed(4);
+  if (usd < 1) return usd.toFixed(3);
+  return usd.toFixed(2);
+}
+
 /**
  * UIFactory - Generates standard UI fragments without needing Ink/React overhead.
  */
 export class UIFactory {
   public static createHeader(width: number, model: string, provider: string, title?: string, gitInfo?: GitHeaderInfo): Line[] {
     const lines: Line[] = [];
-    const CYAN = '#00ffff';
-    const GREY = '244';
-    const TITLE_COLOR = '250';
+    const CYAN = UI_TONES.accent.brand;
+    const GREY = UI_TONES.fg.dim;
+    const TITLE_COLOR = UI_TONES.fg.muted;
     const brand = ` GoodVibes `;
     const ver = `v${VERSION} `;
     const stats = ` ${model} `;
@@ -77,11 +87,11 @@ export class UIFactory {
     }
     // Build git info segment
     let gitStr = '';
-    let gitFg = '238';
+    let gitFg: string = UI_TONES.fg.dim;
     if (gitInfo) {
       gitStr = buildGitSegment(gitInfo).text;
       if (gitInfo.dirty || gitInfo.ahead > 0 || gitInfo.behind > 0) {
-        gitFg = '220'; // yellow when dirty or out-of-sync
+        gitFg = UI_TONES.state.warn; // yellow when dirty or out-of-sync
       }
     }
     const rightSideText = stats + prov;
@@ -91,7 +101,7 @@ export class UIFactory {
     for (const char of stats) { if (rightX < width) line[rightX++] = { char, fg: CYAN, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false }; }
     for (const char of prov) { if (rightX < width) line[rightX++] = { char, fg: GREY, bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false }; }
     lines.push(line);
-    lines.push(this.stringToLine('━'.repeat(width), width, { fg: '244' }));
+    lines.push(this.stringToLine('━'.repeat(width), width, { fg: UI_TONES.fg.dim }));
     return lines;
   }
 
@@ -101,12 +111,12 @@ export class UIFactory {
    */
   public static createMessageBar(
     width: number, text: string,
-    bgColor = '#2a2a2a', textColor = '252', prefixStr = ' › ',
+    bgColor: string = '#2a2a2a', textColor: string = UI_TONES.fg.secondary, prefixStr: string = ' › ',
     strikethrough = false
   ): Line[] {
     return renderConversationFragment(text, width, {
       prefix: prefixStr,
-      prefixFg: '135',
+      prefixFg: UI_TONES.state.reasoning,
       text: textColor,
       bodyBg: bgColor,
       strikethrough,
@@ -119,8 +129,8 @@ export class UIFactory {
   public static createQueuedMessageFragment(width: number, text: string): Line[] {
     return renderConversationFragment(text, width, {
       prefix: ' (...) ',
-      prefixFg: '135',
-      text: '240',
+      prefixFg: UI_TONES.state.reasoning,
+      text: UI_TONES.fg.dim,
       bodyBg: '#1a1a1a',
       dim: true,
     });
@@ -148,6 +158,7 @@ export class UIFactory {
     composerStatus?: string,
     composerFlags?: readonly string[],
     composerPendingRisk?: 'none' | 'approval-wait' | 'shell' | 'command' | 'remote',
+    compact: boolean = false,
   ): Line[] {
     const lines: Line[] = [];
     const promptLines = prompt.split('\n');
@@ -253,22 +264,24 @@ export class UIFactory {
       }
     }
     lines.push(bottomLine);
-    lines.push(createBaseLine());
+    // --- Composer posture block (mode / risk / status / flags) ------------
+    // Suppressed in compact mode; the ctx-info line no longer duplicates these
+    // tokens, so this block is the single home for mode/status/flags.
     const composerTokens: Array<{ text: string; fg: string; bold?: boolean; dim?: boolean }> = [];
-    if (composerMode) composerTokens.push({ text: ` ${GLYPHS.status.active} ${composerMode} `, fg: '#38bdf8', bold: true });
+    if (composerMode) composerTokens.push({ text: ` ${GLYPHS.status.active} ${composerMode} `, fg: UI_TONES.state.info, bold: true });
     if (composerPendingRisk && composerPendingRisk !== 'none') {
       const riskColor = composerPendingRisk === 'approval-wait'
-        ? '#f59e0b'
+        ? UI_TONES.state.warn
         : composerPendingRisk === 'shell'
-          ? '#ef4444'
+          ? UI_TONES.state.bad
           : composerPendingRisk === 'remote'
             ? '#a78bfa'
-            : '#f59e0b';
+            : UI_TONES.state.warn;
       composerTokens.push({ text: ` risk:${composerPendingRisk} `, fg: riskColor, bold: true });
     }
     if (composerStatus && composerStatus !== 'idle') composerTokens.push({ text: ` state:${composerStatus} `, fg: '244', dim: true });
     if (composerFlags && composerFlags.length > 0) composerTokens.push({ text: ` flags:${composerFlags.join(',')} `, fg: '244', dim: true });
-    if (composerTokens.length > 0) {
+    if (!compact && composerTokens.length > 0) {
       const postureLine = createBaseLine();
       let px = 2;
       for (const token of composerTokens) {
@@ -289,10 +302,10 @@ export class UIFactory {
         if (px >= width) break;
       }
       lines.push(postureLine);
-      lines.push(createBaseLine());
     }
     const isRecentlyCopied = Date.now() - lastCopyTime < 2000;
-    // Token usage line
+    // Token usage line + running ~$ cost estimate (derived from the usage
+    // object and the active model via cost-utils).
     const u = usage as { input?: number; output?: number; cacheRead?: number; cacheWrite?: number; up?: number; down?: number };
     const inp = u.input ?? u.up ?? 0;
     const out = u.output ?? u.down ?? 0;
@@ -300,12 +313,13 @@ export class UIFactory {
     const cw = u.cacheWrite ?? 0;
     const total = inp + out + cr + cw;
     const tokenSep = ` ${GLYPHS.navigation.pipeSeparator} `;
-    const tokenLine = ` Token Usage [ Input: ${fmtNum(inp)}${tokenSep}Output: ${fmtNum(out)}${tokenSep}Cache Read: ${fmtNum(cr)}${tokenSep}Cache Write: ${fmtNum(cw)}${tokenSep}Total: ${fmtNum(total)} ]`;
+    const costSegment = model ? `${tokenSep}~$${fmtCost(calcSessionCost(inp, out, cr, cw, model))}` : '';
+    const tokenLine = ` Token Usage [ Input: ${fmtNum(inp)}${tokenSep}Output: ${fmtNum(out)}${tokenSep}Cache Read: ${fmtNum(cr)}${tokenSep}Cache Write: ${fmtNum(cw)}${tokenSep}Total: ${fmtNum(total)}${costSegment} ]`;
     const copiedNotice = isRecentlyCopied ? ` [COPIED] ` : '';
     const statsLine = '  ' + tokenLine + ' '.repeat(Math.max(0, width - 4 - getDisplayWidth(tokenLine) - getDisplayWidth(copiedNotice))) + copiedNotice;
     lines.push(this.stringToLine(statsLine, width, { fg: isRecentlyCopied ? '81' : '244', bold: isRecentlyCopied }));
-    // Context usage progress bar
-    if (contextWindow && contextWindow > 0) {
+    // Context usage progress bar — suppressed in compact mode.
+    if (!compact && contextWindow && contextWindow > 0) {
       const ctxTokens = lastInputTokens ?? 0;
       const label = '   Context Usage: ';
       const suffix = ` [ ${fmtNum(ctxTokens)} / ${fmtNum(contextWindow)} ]`;
@@ -315,11 +329,12 @@ export class UIFactory {
       const thresholdFraction = (compactThreshold !== undefined && compactThreshold > 0)
         ? Math.min(1, compactThreshold)
         : undefined;
-      lines.push(createBaseLine());
       lines.push(this.createProgressBarLine(label, ctxPct, barWidth, width, suffix, thresholdFraction));
     }
-    // Context info line (working dir, model+provider, tools)
-    if (workingDir || model) {
+    // Context info line (working dir, model+provider, tools, hitl).
+    // Suppressed in compact mode. mode/status/flags are intentionally omitted —
+    // the posture block above owns them, so they are not duplicated here.
+    if (!compact && (workingDir || model)) {
       const home = typeof process !== 'undefined' ? process.env.HOME ?? '' : '';
       const displayDir = workingDir && home && workingDir.startsWith(home)
         ? '~' + workingDir.slice(home.length)
@@ -331,19 +346,16 @@ export class UIFactory {
       }
       if (toolCount) ctxParts.push(`${toolCount} tools`);
       if (hitlMode) ctxParts.push(`hitl:${hitlMode}`);
-      if (composerMode) ctxParts.push(`mode:${composerMode}`);
-      if (composerStatus && composerStatus !== 'idle') ctxParts.push(`status:${composerStatus}`);
-      if (composerFlags && composerFlags.length > 0) ctxParts.push(composerFlags.join(','));
       const ctxLine = '   ' + ctxParts.join(`  ${GLYPHS.navigation.pipeSeparator}  `);
-      lines.push(createBaseLine());
       lines.push(this.stringToLine(truncateDisplay(ctxLine, width), width, { fg: '240', dim: true }));
-      lines.push(createBaseLine());
     }
     if (showExitNotice) {
       const notice = `   !!! Press Ctrl+C again to exit !!! `;
       lines.push(this.stringToLine(fitDisplay(notice, width), width, { fg: '196', bold: true }));
     } else {
-      const help = `   /help for commands  -  Ctrl+C to quit `;
+      // Persistent discoverability tip. Rotates by context (agent-aware): the
+      // process-monitor tip leads while a turn is in flight. See footer-tips.ts.
+      const help = `   ${buildFooterTip({ agentActive: isAgentActive(composerStatus) })} `;
       const dangerWarn = dangerMode ? `! DANGER MODE - ALL CHANGES AUTO-APPROVED ` : '';
       const helpW = getDisplayWidth(help);
       const dangerW = getDisplayWidth(dangerWarn);
@@ -356,14 +368,13 @@ export class UIFactory {
         for (const ch of dangerWarn) {
           if (col >= width) break;
           const cw = getDisplayWidth(ch);
-          line[col] = { char: ch, fg: '#ef4444', bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false };
+          line[col] = { char: ch, fg: UI_TONES.state.bad, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false };
           if (cw === 2 && col + 1 < width) line[col + 1] = { ...line[col], char: '' };
           col += cw;
         }
       }
       lines.push(line);
     }
-    lines.push(createBaseLine());
     return lines;
   }
 
@@ -392,8 +403,8 @@ export class UIFactory {
   ];
 
   /** Gradient colors for thinking text — cyan to purple (matches splash). */
-  private static readonly THINK_GRADIENT_START = '#00ffff';
-  private static readonly THINK_GRADIENT_END = '#d000ff';
+  private static readonly THINK_GRADIENT_START = UI_TONES.accent.gradientStart;
+  private static readonly THINK_GRADIENT_END = UI_TONES.accent.gradientEnd;
 
   public static createThinkingFragment(width: number, spinner: string, frame: number = 0, tokenSpeed?: number, toolPreview?: string, inputTokens?: number, outputTokens?: number, elapsedMs?: number, ttftMs?: number): Line[] {
     // Rotate phrase every ~30 seconds (frame ticks at 80ms, so ~375 frames)
@@ -419,7 +430,7 @@ export class UIFactory {
       const inTok = inputTokens ?? 0;
       const outTok = outputTokens ?? 0;
       segments.push({ text: ` in ${fmtNum(inTok)} `, fg: '243', dim: true });
-      segments.push({ text: `out ${fmtNum(outTok)}`, fg: '#00ffff' });
+      segments.push({ text: `out ${fmtNum(outTok)}`, fg: UI_TONES.accent.brand });
     }
     const line = createEmptyLine(width);
     let col = 1;
@@ -459,7 +470,7 @@ export class UIFactory {
         if (px >= width) break;
         previewLine[px] = {
           char: ch,
-          fg: '#38bdf8',
+          fg: UI_TONES.state.info,
           bg: '',
           bold: true,
           dim: false,

package/src/renderer/ui-primitives.ts

@@ -35,8 +35,9 @@ export const GLYPHS = {
     failure: '✕',
     pending: '•',
     active: '●',
-    idle: '○',
-    info: '•',
+    idle: '◌',
+    info: '○',
+    warn: '⚠',
     blocked: '⊘',
     skipped: '◇',
     review: '◈',
@@ -56,6 +57,11 @@ export const GLYPHS = {
   },
 } as const;
 
+/**
+ * UI_TONES — the single chrome/color-token source for src/renderer and
+ * src/panels. Concrete (dark-mode) values; resolveUiTones(mode) in theme.ts
+ * is the single mode-resolved read path — this object is the 'dark' entry.
+ */
 export const UI_TONES = {
   fg: {
     primary: '#e2e8f0',
@@ -63,6 +69,8 @@ export const UI_TONES = {
     muted: '#94a3b8',
     dim: '#475569',
     inverse: '#0f172a',
+    /** Empty-state / placeholder foreground (formerly DEFAULT_PANEL_PALETTE.empty literal). */
+    empty: '#334155',
   },
   bg: {
     base: '#11131a',
@@ -75,6 +83,8 @@ export const UI_TONES = {
     warning: '#2b2116',
     error: '#2a161b',
     success: '#14241b',
+    /** Fullscreen/shell footer background. */
+    footer: '#111827',
   },
   state: {
     info: '#38bdf8',
@@ -83,6 +93,8 @@ export const UI_TONES = {
     bad: '#ef4444',
     blocked: '#f97316',
     active: '#60a5fa',
+    /** Single canonical reasoning/thinking purple (replaces #9945FF and ad-hoc purples). */
+    reasoning: '#a855f7',
   },
   accent: {
     browser: '#7dd3fc',
@@ -90,7 +102,33 @@ export const UI_TONES = {
     inspector: '#c4b5fd',
     workflow: '#fbbf24',
     conversation: '#93c5fd',
+    /** Neon brand accent — header/splash/thinking gradient only. */
+    brand: '#00ffff',
+    gradientStart: '#00ffff',
+    gradientEnd: '#d000ff',
   },
+  /** Canonical border stroke color for fullscreen/panel chrome. */
+  border: '#64748b',
 } as const;
 
-export type UiGlyphRegistry = typeof GLYPHS;
+/**
+ * Diff surface accent color shared across the three diff-rendering surfaces —
+ * the conversation diff view (diff-view.ts), the file diff panel
+ * (diff-panel.ts), and the git panel's inline diff (git-panel.ts). Hunk-header
+ * blue has no matching UI_TONES.state/accent role, so WO-204 gives it one
+ * named token here (value converged on diff-panel.ts's pre-existing hunk
+ * color, the only one of the three surfaces that predates this token; add/del
+ * on all three surfaces already converge on UI_TONES.state.good/bad).
+ */
+export const DIFF_TONES = {
+  // add/del carry diff-panel.ts's shipped colors: the diff panel is the only
+  // diff surface users have ever seen (diff-view.ts was unwired from v0.9.6
+  // until WO-204), so its look is the reference — the conversation surface
+  // adopts it, never the other way around.
+  add: '#00ff88',
+  del: '#ff4444',
+  hunk: '#88aaff',
+} as const;
+
+/** Single spinner-frame source — layout.ts and progress.ts both re-export this. */
+export const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const;

package/src/runtime/bootstrap-shell.ts

@@ -109,12 +109,41 @@ export function createBootstrapShell(options: BootstrapShellOptions): BootstrapS
     homeDirectory: services.homeDirectory,
   });
 
+  const foundationClients = createRuntimeFoundationClients({
+    runtimeServices: services,
+    tasksReadModel: uiServices.readModels.tasks,
+    taskManager,
+    opsControlPlane,
+  });
+  const {
+    directTransport,
+    hookApi,
+    knowledgeApi,
+    mcpApi,
+    opsApi,
+    providerApi,
+  } = foundationClients;
+  const planRuntime = createShellPlanRuntime({
+    adaptivePlanner: services.adaptivePlanner,
+    runtimeBus,
+  });
+
   const openAgentDetailRef: { fn: (agentId: string) => void } = { fn: (_agentId: string) => {} };
 
+  // WO-139: initial cost-budget alert threshold (USD; 0/unset = disabled).
+  // Once the session starts, the real control surface is the CostTrackerPanel
+  // itself — the in-panel 'b' key and /cost budget <usd> both call
+  // CostTrackerPanel.setBudgetThreshold() directly on the live panel instance.
+  const parsedBudgetThreshold = Number(process.env.GOODVIBES_COST_BUDGET_USD);
+  const initialCostBudgetThreshold = Number.isFinite(parsedBudgetThreshold) && parsedBudgetThreshold > 0
+    ? parsedBudgetThreshold
+    : 0;
+
   let commandContextRef: CommandContext | null = null;
   registerBuiltinPanels(services.panelManager, {
     configManager,
     getOrchestratorUsage: () => orchestrator.usage as { input: number; output: number; cacheRead: number; cacheWrite: number; model?: string },
+    budgetThreshold: initialCostBudgetThreshold,
     toolRegistry,
     providerRegistry: services.providerRegistry,
     contextWindow: services.providerRegistry.getContextWindowForModel(services.providerRegistry.getCurrentModel()),
@@ -153,6 +182,12 @@ export function createBootstrapShell(options: BootstrapShellOptions): BootstrapS
     mcpRegistry: services.mcpRegistry,
     openAgentDetail: (agentId: string) => openAgentDetailRef.fn(agentId),
     daemonHomeDir: join(services.homeDirectory, '.goodvibes', 'daemon'),
+    opsApi,
+    planRuntime,
+    watcherRegistry: services.watcherRegistry,
+    runtimeStore,
+    openPanel: (panelId: string) => { services.panelManager.open(panelId); },
+    knowledgeApi,
   });
   services.panelManager.prewarmRegistered();
 
@@ -170,29 +205,11 @@ export function createBootstrapShell(options: BootstrapShellOptions): BootstrapS
 
   const commandRegistry = new CommandRegistry();
   registerBuiltinCommands(commandRegistry);
-  const foundationClients = createRuntimeFoundationClients({
-    runtimeServices: services,
-    tasksReadModel: uiServices.readModels.tasks,
-    taskManager,
-    opsControlPlane,
-  });
-  const {
-    directTransport,
-    hookApi,
-    knowledgeApi,
-    mcpApi,
-    opsApi,
-    providerApi,
-  } = foundationClients;
   const remoteRuntime = createShellRemoteCommandService({
     readModels: uiServices.readModels,
     remoteRunnerRegistry: services.remoteRunnerRegistry,
     runtimeStore,
   });
-  const planRuntime = createShellPlanRuntime({
-    adaptivePlanner: services.adaptivePlanner,
-    runtimeBus,
-  });
 
   const commandContext: CommandContext = createBootstrapCommandContext({
     configManager,

package/src/runtime/diagnostics/panels/index.ts

@@ -12,13 +12,10 @@ export type { InspectableDomain } from '@/runtime/index.ts';
 export { HealthPanel } from '@/runtime/index.ts';
 export { DivergencePanel } from '@/runtime/index.ts';
 export { ReplayPanel } from '@/runtime/index.ts';
-export { PolicyPanel } from './policy.ts';
-export type { PolicyPanelSnapshot } from './policy.ts';
 export { ToolContractsPanel } from '@/runtime/index.ts';
 export { TransportPanel } from '@/runtime/index.ts';
 export type { TransportPanelSnapshot } from '@/runtime/index.ts';
 export { OpsPanel } from './ops.ts';
 export type { OpsAuditEntry } from './ops.ts';
-export { PanelResourcesPanel } from './panel-resources.ts';
 export { SecurityPanel } from '@/runtime/index.ts';
 export type { SecurityPanelSnapshot } from '@/runtime/index.ts';

package/src/runtime/render-scheduler.ts

@@ -0,0 +1,80 @@
+/**
+ * render-scheduler.ts — same-tick render coalescing for the TUI shell (WO-208).
+ *
+ * main.ts fans out its own direct render() calls across turn/stream/input wiring
+ * (~14 direct invocation contexts). Each one previously ran a full synchronous
+ * Compositor.composite() the instant it was called. When several fire within a
+ * single event-loop tick — a streaming burst is the canonical case — only the
+ * LAST frame is ever visible; the earlier composites are immediately overwritten.
+ * This scheduler collapses every schedule() call made within one tick into a
+ * single composite flushed on the microtask queue, so the tick produces exactly
+ * one frame. That frame is byte-identical to what the last synchronous render()
+ * would have produced, because the coalesced flush runs after all of the tick's
+ * synchronous state mutations, reading the same final state the last direct
+ * render() would have read.
+ *
+ * This is deliberately SEPARATE from bootstrap-core's requestRender(), which is a
+ * cross-tick, 16ms-throttled (~60fps) coalescer for the panel/input/runtime
+ * fan-out — that one caps repaint RATE across ticks. This one collapses the
+ * WITHIN-tick burst with no added latency: a microtask flushes at the tail of the
+ * current tick, before the event loop yields to I/O, so the frame still lands in
+ * the same turn it was requested in.
+ *
+ * flushNow() preserves a synchronous immediate path for callers that genuinely
+ * need the frame composited before they return. Terminal resize is the known
+ * case: the resize handler resets the compositor diff and must repaint against
+ * the new dimensions synchronously rather than waiting for the microtask.
+ * flushNow() also clears any pending coalesced flush, so a resize (or any
+ * immediate paint) followed by an already-queued microtask never double-composites.
+ */
+
+export interface RenderScheduler {
+  /**
+   * Coalesced request: schedule a composite for the current tick. N calls within
+   * one tick collapse into exactly one composite, flushed on the microtask queue.
+   */
+  readonly schedule: () => void;
+  /**
+   * Immediate request: run the composite synchronously right now, and cancel any
+   * pending coalesced flush so the tick still composites only once. Use only where
+   * a caller genuinely requires synchronous output (terminal resize).
+   */
+  readonly flushNow: () => void;
+}
+
+/**
+ * Build a render scheduler around `renderNow` (the synchronous composite closure).
+ *
+ * `scheduleFlush` is the deferral primitive; it defaults to `queueMicrotask` so
+ * bursts coalesce within the current tick. Tests and benchmarks inject a manual
+ * queue to flush deterministically.
+ */
+export function createRenderScheduler(
+  renderNow: () => void,
+  scheduleFlush: (flush: () => void) => void = queueMicrotask,
+): RenderScheduler {
+  let scheduled = false;
+
+  const flush = (): void => {
+    // A synchronous flushNow() (or a superseding immediate paint) before this
+    // microtask ran clears `scheduled`, turning this into a no-op so a single
+    // tick never composites twice.
+    if (!scheduled) return;
+    scheduled = false;
+    renderNow();
+  };
+
+  const schedule = (): void => {
+    if (scheduled) return;
+    scheduled = true;
+    scheduleFlush(flush);
+  };
+
+  const flushNow = (): void => {
+    // Satisfy any pending coalesced flush, then composite synchronously.
+    scheduled = false;
+    renderNow();
+  };
+
+  return { schedule, flushNow };
+}

package/src/shell/ui-openers.ts

@@ -253,6 +253,7 @@ export function wireShellUiOpeners(options: WireShellUiOpenersOptions): void {
     if (!input.helpOverlayActive) input.modalOpened('help');
     input.helpOverlayActive = !input.helpOverlayActive;
     input.helpScrollOffset = 0;
+    render();
   };
 
   commandContext.openShortcutsOverlay = () => {
@@ -292,19 +293,16 @@ export function wireShellUiOpeners(options: WireShellUiOpenersOptions): void {
   };
 
   commandContext.openPanelPicker = () => {
-    if (!panelManager.isVisible()) {
-      if (panelManager.getAllOpen().length === 0) {
-        try {
-          panelManager.open('panel-list');
-        } catch {
-          // non-fatal
-        }
-      }
-      panelManager.show();
-      input.panelFocused = true;
-      conversation.setSplashSuppressed(true);
+    // Focus ownership lives in PanelManager (focusTarget); read it there rather
+    // than tracking a parallel input.panelFocused flag. Toggle semantics: if the
+    // workspace is visible AND already focused, hide it; otherwise reveal and
+    // focus it (opening the panel list when nothing is open yet).
+    if (panelManager.isVisible() && panelManager.getFocusTarget() === 'panel') {
+      panelManager.hide();
+      panelManager.focusPrompt();
+      conversation.setSplashSuppressed(false);
       conversation.rebuildHistory();
-    } else if (!input.panelFocused) {
+    } else {
       if (panelManager.getAllOpen().length === 0) {
         try {
           panelManager.open('panel-list');
@@ -313,26 +311,20 @@ export function wireShellUiOpeners(options: WireShellUiOpenersOptions): void {
         }
       }
       panelManager.show();
-      input.panelFocused = true;
+      panelManager.focusPanels();
       conversation.setSplashSuppressed(true);
       conversation.rebuildHistory();
-    } else {
-      panelManager.hide();
-      input.panelFocused = false;
-      conversation.setSplashSuppressed(false);
-      conversation.rebuildHistory();
     }
     render();
   };
 
   commandContext.focusPanels = () => {
-    if (!panelManager.isVisible() || panelManager.getAllOpen().length === 0) return;
-    input.panelFocused = true;
+    panelManager.focusPanels();
     render();
   };
 
   commandContext.focusPrompt = () => {
-    input.panelFocused = false;
+    panelManager.focusPrompt();
     input.indicatorFocused = false;
     render();
   };
@@ -340,7 +332,7 @@ export function wireShellUiOpeners(options: WireShellUiOpenersOptions): void {
   commandContext.showPanel = (panelId, pane) => {
     panelManager.open(panelId, pane);
     panelManager.show();
-    input.panelFocused = true;
+    panelManager.focusPanels();
     conversation.setSplashSuppressed(true);
     conversation.rebuildHistory();
     render();

package/src/utils/format-duration.ts

@@ -10,7 +10,7 @@
 /**
  * Format a latency value in milliseconds with sub-second precision.
  *
- * Used by: debug-panel, provider-health-panel, provider-stats-panel
+ * Used by: debug-panel, provider-health-panel
  *
  *   ms <= 0     → 'n/a'
  *   ms >= 10000 → '12.3s'    (one decimal)
@@ -42,7 +42,7 @@ export function formatDuration(ms: number): string {
 /**
  * Format a short eval/forensics duration; treats undefined as '?ms'.
  *
- * Used by: forensics-panel, eval-panel
+ * Used by: incident-review-panel, eval-panel
  *
  *   undefined → '?ms'
  *   ms < 1000 → '500ms'