@pellux/goodvibes-tui 0.20.3 → 0.22.0

package/src/panels/wrfc-panel.ts

@@ -16,6 +16,23 @@ import {
   buildEmptyState,
 } from './polish.ts';
 import { getDisplayWidth } from '../utils/terminal-width.ts';
+import {
+  type ConfirmState,
+  handleConfirmInput,
+} from './confirm-state.ts';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+/** Chains in non-terminal state with no event for this long are shown as STALLED. */
+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
@@ -53,6 +70,7 @@ const C = {
   constraintSat:  '#22c55e', // green — satisfied
   constraintUnsat:'#ef4444', // red — unsatisfied
   constraintUnv:  '#4b5563', // grey — unverified (no finding yet)
+  stalled:        '#f59e0b', // amber — stalled / no recent event
 } as const;
 
 // ---------------------------------------------------------------------------
@@ -157,7 +175,9 @@ export function constraintStatusMarker(
 // Panel
 // ---------------------------------------------------------------------------
 export interface WrfcPanelDeps {
-  readonly controller: Pick<WrfcController, 'listChains'>;
+  readonly controller: Pick<WrfcController, 'listChains' | 'resumeChain'>;
+  /** Cancel the active agent for a chain by its ownerAgentId. Returns true if cancelled. */
+  readonly cancelChain: (agentId: string) => boolean;
 }
 
 export class WrfcPanel extends BasePanel {
@@ -166,6 +186,12 @@ export class WrfcPanel extends BasePanel {
   private scrollOffset = 0;
   private expandedChainIds = new Set<string>();
   private unsubscribers: Array<() => void> = [];
+  /** Last event timestamp per chain id, for stall detection. */
+  private lastEventAt = new Map<string, number>();
+  /** Pending cancel confirmation: subject is the chain id to cancel. */
+  private confirmCancel: ConfirmState<string> | null = null;
+  /** Controller error seen after initialization (distinct from pre-init silence). */
+  private controllerError: string | null = null;
 
   constructor(
     private readonly workflowEvents: UiEventFeed<WorkflowEvent>,
@@ -193,11 +219,35 @@ export class WrfcPanel extends BasePanel {
   // Input
   // -------------------------------------------------------------------------
   handleInput(key: string): boolean {
+    // Confirm-cancel flow takes priority over all other keys.
+    // Enter and y both confirm; n, escape both cancel; any other key is absorbed.
+    if (this.confirmCancel) {
+      const confirmResult = handleConfirmInput(this.confirmCancel, key);
+      if (confirmResult === 'confirmed') {
+        const chain = this.chains.find(c => c.id === this.confirmCancel!.subject);
+        if (chain && !TERMINAL_STATES.includes(chain.state)) {
+          this.deps.cancelChain(chain.ownerAgentId);
+        }
+        this.confirmCancel = null;
+        this.markDirty();
+        return true;
+      }
+      if (confirmResult === 'cancelled') {
+        this.confirmCancel = null;
+        this.markDirty();
+      }
+      // absorbed: confirm stays pending, key swallowed
+      return true;
+    }
+
+    // Normal key dispatch.
     switch (key) {
       case 'up':    this.moveSelection(-1); return true;
       case 'down':  this.moveSelection(1);  return true;
       case 'return':
       case 'enter': this.toggleExpanded();  return true;
+      case 'c':     this.beginCancelConfirm(); return true;
+      case 'r':     this.doResume();           return true;
       default:      return false;
     }
   }
@@ -207,25 +257,37 @@ export class WrfcPanel extends BasePanel {
   // -------------------------------------------------------------------------
   render(width: number, height: number): Line[] {
     return this.trackedRender(() => {
-    const activeCount  = this.chains.filter(c => !['passed', 'failed'].includes(c.state)).length;
+    const now = Date.now();
+    const activeCount  = this.chains.filter(c => !TERMINAL_STATES.includes(c.state)).length;
     const passedCount  = this.chains.filter(c => c.state === 'passed').length;
     const failedCount  = this.chains.filter(c => c.state === 'failed').length;
 
     if (this.chains.length === 0) {
+      const emptySections: PanelWorkspaceSection[] = [
+        {
+          lines: buildEmptyState(
+            width,
+            ' No WRFC chains yet',
+            'WRFC chains appear here as review/fix cycles execute. Expanded rows show scores, gates, issues, and failure detail.',
+            [],
+            DEFAULT_PANEL_PALETTE,
+          ),
+        },
+      ];
+      if (this.controllerError) {
+        emptySections.push({
+          lines: [
+            buildPanelLine(width, [
+              [' controller: ', DEFAULT_PANEL_PALETTE.dim],
+              [truncate(this.controllerError, width - 16), DEFAULT_PANEL_PALETTE.warn],
+            ]),
+          ],
+        });
+      }
       return buildPanelWorkspace(width, height, {
         title: ' WRFC Chain Monitor',
         intro: 'Track WRFC engineering, review, fixing, gating, and final chain outcomes.',
-        sections: [
-          {
-            lines: buildEmptyState(
-              width,
-              ' No WRFC chains yet',
-              'WRFC chains appear here as review/fix cycles execute. Expanded rows show scores, gates, issues, and failure detail.',
-              [],
-              DEFAULT_PANEL_PALETTE,
-            ),
-          },
-        ],
+        sections: emptySections,
         palette: DEFAULT_PANEL_PALETTE,
       });
     }
@@ -238,9 +300,10 @@ export class WrfcPanel extends BasePanel {
       const isExpanded = this.expandedChainIds.has(chain.id);
       const rowBg      = isSelected ? C.selected : '';
       const rowFg      = isSelected ? C.selectedFg : '';
+      const stalled    = this.isStalled(chain, now);
 
       if (isSelected) selectedLineIndex = chainLines.length;
-      chainLines.push(...this.renderChainRow(chain, width, isSelected, isExpanded, rowBg, rowFg));
+      chainLines.push(...this.renderChainRow(chain, width, isSelected, isExpanded, rowBg, rowFg, stalled));
 
       if (isExpanded) {
         chainLines.push(...this.renderChainDetail(chain, width, 12));
@@ -298,11 +361,39 @@ export class WrfcPanel extends BasePanel {
       title: 'Selected',
       lines: selectedLines,
     };
+    // Confirm-cancel overlay section.
+    const confirmSection: PanelWorkspaceSection | null = this.confirmCancel ? {
+      title: 'Confirm Cancel',
+      lines: [
+        buildPanelLine(width, [
+          [' Cancel chain "', DEFAULT_PANEL_PALETTE.warn],
+          [truncate(this.confirmCancel.label, Math.max(8, width - 32)), DEFAULT_PANEL_PALETTE.value],
+          ['"?', DEFAULT_PANEL_PALETTE.warn],
+        ]),
+        buildPanelLine(width, [
+          [' y', DEFAULT_PANEL_PALETTE.info], ['  confirm', DEFAULT_PANEL_PALETTE.dim],
+          ['   Enter', DEFAULT_PANEL_PALETTE.info], ['  confirm', DEFAULT_PANEL_PALETTE.dim],
+          ['   n / Esc', DEFAULT_PANEL_PALETTE.info], ['  cancel', DEFAULT_PANEL_PALETTE.dim],
+        ]),
+      ],
+    } : null;
+
+    // Footer: show resume-disabled reason for the selected chain.
+    const selectedForFooter = this.chains[this.selectedIndex];
+    const resumeReason = selectedForFooter ? this.resumeDisabledReason(selectedForFooter) : null;
+    const footerLines: Line[] = [
+      buildPanelLine(width, [
+        [' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim],
+        ['   Enter', DEFAULT_PANEL_PALETTE.info],  [' expand',   DEFAULT_PANEL_PALETTE.dim],
+        ['   c', DEFAULT_PANEL_PALETTE.info],      [' cancel',   DEFAULT_PANEL_PALETTE.dim],
+        ['   r', resumeReason ? DEFAULT_PANEL_PALETTE.dim : DEFAULT_PANEL_PALETTE.info],
+        [resumeReason ? ` resume (${resumeReason})` : ' resume', DEFAULT_PANEL_PALETTE.dim],
+      ]),
+    ];
+
     const chainsSection = resolveScrollablePanelSection(width, height, {
       intro: 'Track WRFC engineering, review, fixing, gating, and final chain outcomes.',
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
+      footerLines,
       palette: DEFAULT_PANEL_PALETTE,
       beforeSections: [summarySection],
       section: {
@@ -312,23 +403,41 @@ export class WrfcPanel extends BasePanel {
         scrollOffset: this.scrollOffset,
         minRows: 8,
       },
-      afterSections: [selectedSection],
+      afterSections: confirmSection
+        ? [selectedSection, confirmSection]
+        : [selectedSection],
     });
     this.scrollOffset = chainsSection.scrollOffset;
-    const sections: PanelWorkspaceSection[] = [summarySection, chainsSection.section, selectedSection];
+    const sections: PanelWorkspaceSection[] = [
+      summarySection,
+      chainsSection.section,
+      selectedSection,
+      ...(confirmSection ? [confirmSection] : []),
+    ];
+
+    // Controller error section (post-init only).
+    if (this.controllerError) {
+      sections.push({
+        lines: [
+          buildPanelLine(width, [
+            [' controller: ', DEFAULT_PANEL_PALETTE.dim],
+            [truncate(this.controllerError, width - 16), DEFAULT_PANEL_PALETTE.warn],
+          ]),
+        ],
+      });
+    }
 
     return buildPanelWorkspace(width, height, {
       title: ' WRFC Chain Monitor',
       intro: 'Track WRFC engineering, review, fixing, gating, and final chain outcomes.',
       sections,
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
+      footerLines,
       palette: DEFAULT_PANEL_PALETTE,
     });
     });
   }
 
+
   // -------------------------------------------------------------------------
   // Rendering helpers
   // -------------------------------------------------------------------------
@@ -339,9 +448,12 @@ export class WrfcPanel extends BasePanel {
     isExpanded: boolean,
     bg: string,
     fg: string,
+    stalled = false,
   ): Line[] {
-    const stateCol   = stateColor(chain.state);
-    const stateTag   = ` ${stateLabel(chain.state).padEnd(6)}`;
+    const stateCol   = stalled ? C.stalled : stateColor(chain.state);
+    const stateTag   = stalled
+      ? ` STALLED`
+      : ` ${stateLabel(chain.state).padEnd(6)}`;
     const arrow      = isExpanded ? '▾' : '▸';
     const chainIdShort = chain.id.slice(-6);
     const prefix     = ` ${arrow} [${chainIdShort}] `;
@@ -350,6 +462,7 @@ export class WrfcPanel extends BasePanel {
     const latestScore = chain.reviewScores.length > 0
       ? ` ${chain.reviewScores[chain.reviewScores.length - 1].toFixed(1)}/10`
       : '';
+    const stalledBadge = stalled ? ' [STALLED]' : '';
     // Constraint badge: c:sat/total — only when constraints exist
     let constraintBadge = '';
     if (chain.constraints.length > 0) {
@@ -358,7 +471,7 @@ export class WrfcPanel extends BasePanel {
       const satisfied = findings ? findings.filter(f => f.satisfied).length : 0;
       constraintBadge = ` c:${satisfied}/${total}`;
     }
-    const rightInfo  = `${latestScore}${fixes}${cycles}${constraintBadge} `;
+    const rightInfo  = `${stalledBadge}${latestScore}${fixes}${cycles}${constraintBadge} `;
 
     // Compute how much space the task text can use, then check if rightInfo fits.
     // If the terminal is narrow and rightInfo would overflow, omit it entirely
@@ -572,28 +685,49 @@ export class WrfcPanel extends BasePanel {
   // Event subscriptions
   // -------------------------------------------------------------------------
   private subscribeToEvents(): void {
-    const refresh = () => { this.syncFromController(); this.markDirty(); };
+    const refreshWithTimestamp = (chainId?: string) => {
+      if (chainId) this.lastEventAt.set(chainId, Date.now());
+      this.syncFromController();
+      this.markDirty();
+    };
+
+    // Each workflow event carries the chainId in its payload — record it for
+    // stall tracking.  The handler signature is (event) => void; we extract
+    // chainId where present using a narrow type guard so we never guess.
+    const timestamped = (e: WorkflowEvent) => {
+      const chainId = 'chainId' in e && typeof e.chainId === 'string' ? e.chainId : undefined;
+      refreshWithTimestamp(chainId);
+    };
 
     this.unsubscribers.push(
-      this.workflowEvents.on('WORKFLOW_CHAIN_CREATED', refresh),
-      this.workflowEvents.on('WORKFLOW_STATE_CHANGED', refresh),
-      this.workflowEvents.on('WORKFLOW_REVIEW_COMPLETED', refresh),
-      this.workflowEvents.on('WORKFLOW_FIX_ATTEMPTED', refresh),
-      this.workflowEvents.on('WORKFLOW_GATE_RESULT', refresh),
-      this.workflowEvents.on('WORKFLOW_CHAIN_PASSED', refresh),
-      this.workflowEvents.on('WORKFLOW_CHAIN_FAILED', refresh),
-      this.workflowEvents.on('WORKFLOW_AUTO_COMMITTED', refresh),
-      this.workflowEvents.on('WORKFLOW_CASCADE_ABORTED', refresh),
-      this.workflowEvents.on('WORKFLOW_CONSTRAINTS_ENUMERATED', refresh),
+      this.workflowEvents.on('WORKFLOW_CHAIN_CREATED',         timestamped),
+      this.workflowEvents.on('WORKFLOW_STATE_CHANGED',         timestamped),
+      this.workflowEvents.on('WORKFLOW_REVIEW_COMPLETED',      timestamped),
+      this.workflowEvents.on('WORKFLOW_FIX_ATTEMPTED',         timestamped),
+      this.workflowEvents.on('WORKFLOW_GATE_RESULT',           timestamped),
+      this.workflowEvents.on('WORKFLOW_CHAIN_PASSED',          timestamped),
+      this.workflowEvents.on('WORKFLOW_CHAIN_FAILED',          timestamped),
+      this.workflowEvents.on('WORKFLOW_AUTO_COMMITTED',        timestamped),
+      this.workflowEvents.on('WORKFLOW_CASCADE_ABORTED',       timestamped),
+      this.workflowEvents.on('WORKFLOW_CONSTRAINTS_ENUMERATED', timestamped),
     );
   }
 
   private syncFromController(): void {
+    // Distinguish two failure modes:
+    //   1. Controller not yet initialized — chains is empty Map, listChains
+    //      returns [] with no error.  This is the normal pre-ready path.
+    //   2. Controller throws after initialization — an actual error we surface.
+    // We detect (2) by checking whether we previously had chains: if chains
+    // were present and listChains now throws, that is a post-init error.
+    const hadChains = this.chains.length > 0;
     try {
-      // Sort: active first (by createdAt desc), then completed
       const all = this.deps.controller.listChains();
-      const active   = all.filter(c => !['passed', 'failed'].includes(c.state));
-      const done     = all.filter(c =>  ['passed', 'failed'].includes(c.state));
+      this.controllerError = null;
+
+      // Sort: active first (by createdAt desc), then completed
+      const active = all.filter(c => !TERMINAL_STATES.includes(c.state));
+      const done   = all.filter(c =>  TERMINAL_STATES.includes(c.state));
       active.sort((a, b) => b.createdAt - a.createdAt);
       done.sort(  (a, b) => (b.completedAt ?? 0) - (a.completedAt ?? 0));
       this.chains = [...active, ...done];
@@ -602,8 +736,57 @@ export class WrfcPanel extends BasePanel {
       if (this.chains.length > 0) {
         this.selectedIndex = Math.min(this.selectedIndex, this.chains.length - 1);
       }
-    } catch {
-      // WrfcController not yet initialized — leave chain list empty
+    } catch (err) {
+      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);
+        this.controllerError = msg;
+        console.debug('[WrfcPanel] controller.listChains() error post-init:', msg);
+      }
+      // Pre-init: controller not ready yet, leave chain list empty (no error).
     }
   }
+
+  // -------------------------------------------------------------------------
+  // Cancel / resume actions
+  // -------------------------------------------------------------------------
+
+  /** Initiate cancel-confirm flow for the selected chain (noop if terminal). */
+  private beginCancelConfirm(): void {
+    const chain = this.chains[this.selectedIndex];
+    if (!chain || TERMINAL_STATES.includes(chain.state)) return;
+    this.confirmCancel = {
+      subject: chain.id,
+      label: truncate(chain.task, 40),
+    };
+    this.markDirty();
+  }
+
+  /**
+   * Resume the selected chain via the controller.
+   * Only permitted when the chain state is in RESUMABLE_STATES.
+   * Emits a visible noop reason when the chain is not resumable.
+   */
+  private doResume(): void {
+    const chain = this.chains[this.selectedIndex];
+    if (!chain) return;
+    if (!RESUMABLE_STATES.includes(chain.state)) return;
+    this.deps.controller.resumeChain(chain.id);
+    this.markDirty();
+  }
+
+  /** Returns a human-readable reason why resume is disabled for a chain, or null if it is allowed. */
+  private resumeDisabledReason(chain: WrfcChain): string | null {
+    if (TERMINAL_STATES.includes(chain.state)) return 'chain is complete';
+    if (!RESUMABLE_STATES.includes(chain.state)) return `active (${stateLabel(chain.state)})`;
+    return null;
+  }
+
+  /** Returns whether a chain is considered stalled (non-terminal, no recent event). */
+  private isStalled(chain: WrfcChain, now: number): boolean {
+    if (TERMINAL_STATES.includes(chain.state)) return false;
+    const last = this.lastEventAt.get(chain.id) ?? chain.createdAt;
+    return (now - last) >= STALL_THRESHOLD_MS;
+  }
 }

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

@@ -8,19 +8,25 @@ import { formatDuration } from './modal-utils.ts';
 import { logger } from '@pellux/goodvibes-sdk/platform/utils';
 import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
+import { handleConfirmInput, type ConfirmState } from '../panels/confirm-state.ts';
+import { AGENT_TERMINAL_STATUSES as MODAL_TERMINAL_STATUSES, AGENT_STALL_THRESHOLD_MS as MODAL_STALL_THRESHOLD_MS } from '../panels/agent-inspector-shared.ts';
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
-const TOKENS_PER_TOOL_CALL = 400;
 const MAX_LOG_ENTRIES = 10;
 const AGENT_ID_DISPLAY_LENGTH = 16;
 
+// MODAL_TERMINAL_STATUSES and MODAL_STALL_THRESHOLD_MS are re-exported aliases
+// from agent-inspector-shared.ts (imported above alongside ConfirmState).
+
 export interface AgentDetailModalDeps {
-  readonly agentManager: Pick<AgentManager, 'getStatus'>;
+  readonly agentManager: Pick<AgentManager, 'getStatus' | 'list'>;
   readonly agentMessageBus: Pick<AgentMessageBus, 'getMessages'>;
   readonly sessionLogPathResolver: (agentId: string) => string;
   /** Optional — when supplied, constraint data from the agent's WRFC chain is shown (SDK 0.23.0). */
   readonly wrfcController?: Pick<WrfcController, 'getChain'>;
+  /** Cancel the agent by id using the same orphan-free path as WRFC. Returns true if cancelled. */
+  readonly cancelAgent: (agentId: string) => boolean;
 }
 
 // ─── AgentDetailModal ─────────────────────────────────────────────────────────
@@ -40,6 +46,9 @@ export class AgentDetailModal {
   public logEntries: Record<string, unknown>[] = [];
   public logTotal = 0;
 
+  /** Pending cancel confirmation. Subject is the agent id to cancel. */
+  public confirmCancel: ConfirmState<string> | null = null;
+
   private refreshTimer: ReturnType<typeof setInterval> | null = null;
   private onRefresh: (() => void) | null = null;
 
@@ -68,12 +77,88 @@ export class AgentDetailModal {
     this.agentId = null;
     this.logEntries = [];
     this.logTotal = 0;
+    this.confirmCancel = null;
     if (this.refreshTimer) {
       clearInterval(this.refreshTimer);
       this.refreshTimer = null;
     }
   }
 
+  /**
+   * Handle a key press while the modal is active.
+   * Must be called BEFORE the Esc handler closes the modal.
+   *
+   * Routes:
+   *   - 'c' initiates cancel confirm (if agent is non-terminal)
+   *   - confirm keys (Enter/y/n/Esc) are forwarded to handleConfirmInput
+   *
+   * Returns true when the key was consumed (caller should NOT propagate).
+   */
+  handleKey(key: string): boolean {
+    if (!this.active) return false;
+
+    if (this.confirmCancel) {
+      const result = handleConfirmInput(this.confirmCancel, key);
+      if (result === 'confirmed') {
+        if (this.agentId) {
+          const rec = this.deps.agentManager.getStatus(this.agentId);
+          if (rec && !MODAL_TERMINAL_STATUSES.has(rec.status)) {
+            this.deps.cancelAgent(rec.id);
+          }
+        }
+        this.confirmCancel = null;
+        this.onRefresh?.();
+        return true;
+      }
+      if (result === 'cancelled') {
+        this.confirmCancel = null;
+        this.onRefresh?.();
+        return true;
+      }
+      // absorbed — key swallowed while confirm is pending
+      return true;
+    }
+
+    if (key === 'c') {
+      if (this.agentId) {
+        const rec = this.deps.agentManager.getStatus(this.agentId);
+        if (rec && !MODAL_TERMINAL_STATUSES.has(rec.status)) {
+          const label = rec.task.split('\n')[0]?.slice(0, 40) ?? rec.id.slice(-8);
+          this.confirmCancel = { subject: rec.id, label };
+          this.onRefresh?.();
+          return true;
+        }
+      }
+      // Non-cancellable — absorb key silently
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Returns whether the current agent is considered stalled.
+   * Non-terminal agent with elapsed time exceeding MODAL_STALL_THRESHOLD_MS.
+   */
+  isCurrentAgentStalled(): boolean {
+    if (!this.agentId) return false;
+    const rec = this.deps.agentManager.getStatus(this.agentId);
+    if (!rec || MODAL_TERMINAL_STATUSES.has(rec.status)) return false;
+    return (Date.now() - rec.startedAt) >= MODAL_STALL_THRESHOLD_MS;
+  }
+
+  /**
+   * Count of all stalled agents across the agentManager list.
+   * Non-terminal agents with elapsed time >= MODAL_STALL_THRESHOLD_MS.
+   */
+  getStalledAgentCount(): number {
+    const now = Date.now();
+    return this.deps.agentManager.list().filter(rec => {
+      if (MODAL_TERMINAL_STATUSES.has(rec.status)) return false;
+      return (now - rec.startedAt) >= MODAL_STALL_THRESHOLD_MS;
+    }).length;
+  }
+
   async loadLog(): Promise<void> {
     if (!this.agentId) { this.logEntries = []; this.logTotal = 0; return; }
     try {
@@ -100,13 +185,6 @@ export class AgentDetailModal {
   }
 }
 
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-/** Rough token estimate: toolCallCount * avg tokens per tool exchange. */
-function estimateTokens(toolCallCount: number): number {
-  return toolCallCount * TOKENS_PER_TOOL_CALL;
-}
-
 // ─── renderAgentDetailModal ───────────────────────────────────────────────────
 
 /**
@@ -150,7 +228,6 @@ export function renderAgentDetailModal(
 
   const now = Date.now();
   const elapsedMs = (rec.completedAt ?? now) - rec.startedAt;
-  const tokenEst = estimateTokens(rec.toolCallCount);
 
   // ── Build sections ────────────────────────────────────────────────────────
 
@@ -170,13 +247,24 @@ export function renderAgentDetailModal(
   const modelStr = rec.model ? `${rec.provider ?? ''}/${rec.model}` : (rec.provider ?? '(default)');
   sections.push({ type: 'text', content: `Template : ${rec.template}` });
   sections.push({ type: 'text', content: `Model    : ${modelStr}` });
-  sections.push({ type: 'text', content: `Status   : ${rec.status}` });
+  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: 'separator' });
 
   // Metrics
   sections.push({ type: 'text', content: `Tool calls : ${rec.toolCallCount}` });
-  sections.push({ type: 'text', content: `Est tokens : ~${tokenEst.toLocaleString()}` });
+  if (rec.usage) {
+    const totalIn = rec.usage.inputTokens + (rec.usage.cacheReadTokens ?? 0) + (rec.usage.cacheWriteTokens ?? 0);
+    sections.push({ type: 'text', content: `Tokens in  : ${totalIn.toLocaleString()}` });
+    sections.push({ type: 'text', content: `Tokens out : ${rec.usage.outputTokens.toLocaleString()}` });
+  } else {
+    sections.push({
+      type: 'text',
+      content: 'Tokens     : n/a (agent running)',
+      style: { dim: true },
+    });
+  }
 
   // SDK 0.23.0: systemPromptAddendum indicator — confirms WRFC constraint addendum was injected
   if (rec.systemPromptAddendum) {
@@ -320,12 +408,29 @@ export function renderAgentDetailModal(
     }
   }
 
+  // Cancel confirm overlay (when pending)
+  const cancellable = !MODAL_TERMINAL_STATUSES.has(rec.status);
+  if (modal.confirmCancel) {
+    sections.push({ type: 'separator' });
+    sections.push({
+      type: 'text',
+      content: `Cancel agent "${modal.confirmCancel.label}"?`,
+      style: { fg: '#f59e0b' },
+    });
+    sections.push({
+      type: 'text',
+      content: 'y / Enter  confirm     n / Esc  cancel',
+      style: { dim: true },
+    });
+  }
+
+  const cancelHint = cancellable ? '[c] Cancel  ' : '';
   return ModalFactory.createModal({
     title: `Agent: ${rec.id.slice(0, AGENT_ID_DISPLAY_LENGTH)}`,
     width: metrics.boxWidth,
     margin: metrics.margin,
     targetContentRows,
     sections,
-    hints: ['[Esc] Close'],
+    hints: [cancelHint + '[Esc] Close'],
   }, width);
 }

package/src/renderer/code-block.ts

@@ -268,6 +268,14 @@ function tokenizePlain(line: string): SyntaxToken[] {
 
 // ─── Main Renderer ───────────────────────────────────────────────────────────
 
+/**
+ * Module-level SyntaxHighlighter singleton.
+ * Shared across all renderCodeBlock calls so the parse cache and pending-dedup
+ * set persist between renders. Creating a new instance per call was throwing away
+ * cached results and defeating the FIFO-200 cache.
+ */
+const _sharedHighlighter = new SyntaxHighlighter();
+
 /**
  * renderCodeBlock - Render lines of code with syntax highlighting and line numbers.
  * Returns Line[] for the cell-based pipeline.
@@ -276,7 +284,7 @@ export function renderCodeBlock(
   codeLines: string[],
   lang: string,
   width: number,
-  opts: { showLineNumbers?: boolean } = {},
+  opts: { showLineNumbers?: boolean; isStreaming?: boolean } = {},
 ): Line[] {
   const lines: Line[] = [];
   const language = detectLanguage(lang);
@@ -291,7 +299,7 @@ export function renderCodeBlock(
   // Try tree-sitter highlight cache first (populated asynchronously).
   // Falls back to regex tokenizer when parser not yet ready or language unsupported.
   const fullCode = codeLines.join('\n');
-  const hlLines = lang ? new SyntaxHighlighter().highlight(fullCode, lang) : null;
+  const hlLines = lang ? _sharedHighlighter.highlight(fullCode, lang, opts.isStreaming ?? false) : null;
 
   // Regex tokenizer fallback (used when tree-sitter not ready)
   const regexTokenize = (line: string): SyntaxToken[] => {

package/src/renderer/compositor.ts

@@ -4,6 +4,10 @@ import { type Line, createEmptyCell, createStyledCell } from '../types/grid.ts';
 import { getDisplayWidth } from '../utils/terminal-width.ts';
 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';
+
+const T = DARK_THEME;
 
 export interface SelectionInfo {
   isCellSelected: (col: number, absoluteRow: number) => boolean;
@@ -58,9 +62,19 @@ export class Compositor {
   /** Double-buffer reuse: back is written, front is the last-rendered reference. */
   private frontBuffer: TerminalBuffer | null = null;
   private backBuffer: TerminalBuffer | null = null;
-  private diffEngine = new DiffEngine();
+  private readonly caps: TermColorCaps;
+  private diffEngine: DiffEngine;
+
+  constructor(private stdout: NodeJS.WriteStream) {
+    // Probe terminal capabilities once at construction time.
+    this.caps = probeTermCaps(stdout);
+    this.diffEngine = new DiffEngine(this.caps);
+  }
 
-  constructor(private stdout: NodeJS.WriteStream) {}
+  /** Exposed for unit tests — returns the detected color capability. */
+  public get termCapsForTest(): TermColorCaps {
+    return this.caps;
+  }
 
   /** Exposed for unit tests — returns the last composited buffer. */
   public get lastBufferForTest(): TerminalBuffer | null {
@@ -241,9 +255,9 @@ export class Compositor {
           const isCurrent = search.manager.isCurrentMatch(absoluteRow, match.col);
           for (let x = match.col; x < match.col + match.length && x < leftWidth; x++) {
             if (isCurrent) {
-              newBuffer.setCell(x, screenY, { bg: '#ffff00', fg: '#000000', bold: true, dim: false });
+              newBuffer.setCell(x, screenY, { bg: T.searchCurrentBg, fg: T.searchCurrentFg, bold: true, dim: false });
             } else {
-              newBuffer.setCell(x, screenY, { bg: '#806600', fg: '#ffffff', bold: false, dim: false });
+              newBuffer.setCell(x, screenY, { bg: T.searchMatchBg, fg: T.searchMatchFg, bold: false, dim: false });
             }
           }
         }