@pellux/goodvibes-tui 0.20.3 → 0.22.0

package/src/main.ts

@@ -33,12 +33,10 @@ 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';
-import type { HookPhase, HookCategory, HookEventPath } from '@pellux/goodvibes-sdk/platform/hooks';
 import {
   checkRecoveryFile,
   deleteRecoveryFile,
   loadRecoveryConversation,
-  persistConversation,
   writeRecoveryFile,
 } from '@/runtime/index.ts';
 import { handleBlockingShellInput, type PendingPermissionState } from './shell/blocking-input.ts';
@@ -48,12 +46,18 @@ import { buildPersistedSessionContext, formatReturnContextForDisplay, getReturnC
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 import { prepareShellCliRuntime } from './cli/entrypoint.ts';
 import { applyInitialTuiCliState } from './cli/tui-startup.ts';
+import { applyRuntimeConfigDefault, applyRuntimeConfigValue } from './cli/config-overrides.ts';
+import { renderToolCallBlock } from './renderer/tool-call.ts';
 import { wireSpokenTurnRuntime } from './audio/spoken-turn-wiring.ts';
 import { attachSpokenTurnModelRouting, createSpokenTurnInputOptions } from './audio/spoken-turn-model-routing.ts';
 import { allowTerminalWrite, installTuiTerminalOutputGuard } from './runtime/terminal-output-guard.ts';
-import { ProjectPlanningCoordinator } from './planning/project-planning-coordinator.ts';
 import { buildCommandArgsHint } from './input/command-args-hint.ts';
 import { summarizeRunningAgents } from './renderer/process-summary.ts';
+import { formatUserFacingErrorLine } from './core/format-user-error.ts';
+import { wireStreamEventMetrics, type StreamMetrics } from './core/stream-event-wiring.ts';
+import { wireTurnEventHandlers } from './core/turn-event-wiring.ts';
+import { buildContextStatusHint } from './renderer/context-status-hint.ts';
+import { evaluateSessionMaintenance } from './panels/session-maintenance.ts';
 
 const ALT_SCREEN_ENTER = '\x1b[?1049h';
 const ALT_SCREEN_EXIT  = '\x1b[?1049l';
@@ -101,6 +105,7 @@ async function main() {
     permissionPromptRef,
     _writeLastSessionPointer: writeLastSessionPointer,
     systemMessageRouter,
+    setOpenAgentDetail,
   } = ctx;
   const workingDir = ctx.services.workingDirectory;
   const homeDirectory = ctx.services.homeDirectory;
@@ -127,6 +132,15 @@ async function main() {
     }
   }
 
+  // TUI default: show token speed ON. The SDK schema default is false;
+  // applyRuntimeConfigDefault reads both the global settings file and the project
+  // settings file from disk before deciding whether to apply the default. If the
+  // user has explicitly set this key to false in EITHER their global or project
+  // persisted config, their value is respected and the default is NOT applied.
+  // Only when the key is absent from both files (e.g. a new install) does the
+  // TUI default of true take effect in-memory — no disk write occurs either way.
+  applyRuntimeConfigDefault(configManager, 'display.showTokenSpeed', true);
+
   const panelManager = ctx.services.panelManager;
   const buildSessionContinuityHints = () => {
     const sessionSnapshot = uiServices.readModels.session.getSnapshot();
@@ -154,12 +168,18 @@ async function main() {
     render();
   });
 
-  let streamStartTime = 0;
-  let streamDeltaCount = 0;
-  let streamTokenSpeed = 0;
-
   let scrollTop = 0;
   let scrollLocked = true;
+  // Stream and tool-timer state; mutated by wireStreamEventMetrics handlers, read during render.
+  const streamMetrics: StreamMetrics = {
+    startTime: 0,
+    deltaCount: 0,
+    tokenSpeed: 0,
+    ttftMs: undefined,
+    ttftRecorded: false,
+    activeToolStartedAtMs: undefined,
+    activeToolName: undefined,
+  };
 
   const getPromptContentWidth = () => {
     const w = stdout.columns || 80;
@@ -213,7 +233,8 @@ async function main() {
         `[Critical] Multiple errors detected (${_unhandledRejectionCount} in 10s). If the issue persists, please restart. Latest: ${msg}`
       );
     } else {
-      systemMessageRouter.high(`[Error] ${msg}`);
+      const formatted = formatUserFacingErrorLine(reason);
+      systemMessageRouter.high(`[Error] ${formatted}`);
       logger.error('unhandledRejection', { error: String(reason) });
     }
     render();
@@ -260,18 +281,6 @@ async function main() {
     configManager,
     notify: (message) => { systemMessageRouter.high(message); render(); },
   }));
-  const projectPlanningCoordinator = new ProjectPlanningCoordinator({
-    service: ctx.services.projectPlanningService,
-    projectId: ctx.services.projectPlanningProjectId,
-    workingDirectory: workingDir,
-    notify: (message) => { systemMessageRouter.high(message); render(); },
-    openPanel: () => {
-      panelManager.open('project-planning');
-      panelManager.show();
-      render();
-    },
-  });
-
   const submitInput = (text: string, content?: ContentPart[], options: { readonly spokenOutput?: boolean } = {}) => {
     input.clearModalStack();
     scrollLocked = true; // Re-lock on any user input
@@ -307,32 +316,6 @@ async function main() {
     if (processedText || content) {
       void (async () => {
         let inputOptions = options.spokenOutput ? createSpokenTurnInputOptions() : undefined;
-        if (!options.spokenOutput && processedText) {
-          try {
-            const planning = await projectPlanningCoordinator.prepareTurn(processedText);
-            if (planning) {
-              if (planning.handledLocally) {
-                systemMessageRouter.high(planning.statusMessage);
-                render();
-                return;
-              }
-              conversation.addSystemMessage(planning.systemMessage);
-              inputOptions = {
-                origin: {
-                  source: 'project-planning',
-                  surface: 'tui',
-                  metadata: {
-                    projectId: ctx.services.projectPlanningProjectId,
-                    knowledgeSpaceId: planning.state.knowledgeSpaceId,
-                    readiness: planning.evaluation.readiness,
-                  },
-                },
-              };
-            }
-          } catch (err) {
-            systemMessageRouter.high(`[Planning] ${summarizeError(err)}`);
-          }
-        }
         if (options.spokenOutput && processedText) {
           spokenTurns.submitNextTurn(processedText);
         }
@@ -458,6 +441,7 @@ async function main() {
   input.filePicker.setOnUpdate(() => render());
   input.agentDetailModal.setOnRefresh(() => render());
   input.processModal.setOnRefresh(() => render());
+  setOpenAgentDetail((id) => input.agentDetailModal.open(id));
 
   // Model picker callback is handled in bootstrap.ts — do not duplicate here.
   input.setHistory(inputHistory);
@@ -498,6 +482,17 @@ async function main() {
       hasAttachments: input.getImageAttachments().size > 0,
       turnState: sessionSnapshot.turnState,
     });
+    const maintenanceStatus = evaluateSessionMaintenance({
+      configManager,
+      currentTokens: orchestrator.lastInputTokens,
+      contextWindow: currentModel.contextWindow,
+      sessionMemoryCount: ctx.services.sessionMemoryStore.list().length,
+    });
+    const contextStatusHint = buildContextStatusHint({
+      level: maintenanceStatus.level,
+      autoCompactEnabled: maintenanceStatus.autoCompactEnabled,
+      usagePct: maintenanceStatus.usagePct,
+    });
     const footerLines = buildShellFooter({
       width,
       promptText: promptInfo.visibleLines.join('\n'),
@@ -515,7 +510,10 @@ async function main() {
       workingDir,
       provider: runtime.provider,
       contextWindow: currentModel.contextWindow,
-      compactThreshold: configManager.get('behavior.autoCompactThreshold') as number,
+      contextStatusHint,
+      // behavior.autoCompactThreshold is stored as a percent integer (e.g. 80);
+      // the meter expects a fraction [0..1]. Clamp to [0,1] to guard nonsense values.
+      compactThreshold: Math.min(1, Math.max(0, (configManager.get('behavior.autoCompactThreshold') as number) / 100)),
       dangerMode: (() => {
         if (configManager.get('behavior.autoApprove')) return true;
         const permMode = configManager.get('permissions.mode');
@@ -598,16 +596,25 @@ async function main() {
       const showSpeed = configManager.get('display.showTokenSpeed') as boolean;
       const showPreview = configManager.get('display.showToolPreview') as boolean;
       const partialToolPreview = showPreview ? sessionSnapshot.streamToolPreview : undefined;
+      // Elapsed from turn start (stream or tool execution), used for the thinking indicator timer.
+      const turnElapsedMs = streamMetrics.startTime > 0 ? Date.now() - streamMetrics.startTime : undefined;
       const thinking = UIFactory.createThinkingFragment(
         conversationWidth,
         orchestrator.getSpinner(),
         orchestrator.thinkingFrame,
-        showSpeed ? streamTokenSpeed : undefined,
+        showSpeed ? streamMetrics.tokenSpeed : undefined,
         showPreview ? partialToolPreview : undefined,
         orchestrator.streamingInputTokens > 0 ? orchestrator.streamingInputTokens : undefined,
         orchestrator.streamingOutputTokens > 0 ? orchestrator.streamingOutputTokens : undefined,
+        turnElapsedMs,
+        streamMetrics.ttftMs,
       );
       viewport.push(...thinking);
+      // Live tool timer: render the currently executing tool row with ticking elapsed.
+      if (streamMetrics.activeToolName !== undefined && streamMetrics.activeToolStartedAtMs !== undefined) {
+        const liveToolCall = { id: 'live', name: streamMetrics.activeToolName, arguments: {} };
+        viewport.push(...renderToolCallBlock(liveToolCall, 'executing', undefined, conversationWidth, undefined, undefined, undefined, streamMetrics.activeToolStartedAtMs));
+      }
     }
 
     if (pendingPermission) {
@@ -682,44 +689,36 @@ async function main() {
     render,
   });
 
-  // --- Streaming speed + tool preview wiring ---
-  const refreshGit = () => gitStatusProvider.refresh().then((info) => { lastGitInfoRef.value = info; render(); }).catch(() => { /* non-fatal */ });
-  // Refresh git status after each turn completes or after tool results arrive
-  unsubs.push(uiServices.events.turns.on('TURN_COMPLETED', () => {
-    // Auto-save after every LLM turn so kills don't lose the session
-    try {
-      const snapshot = conversation.toJSON() as { messages: Array<import('./core/conversation.ts').ConversationMessageSnapshot>; timestamp?: number };
-      const persisted = buildPersistedSessionContext(snapshot.messages, conversation.getTitleSource(), buildSessionContinuityHints());
-      persistConversation(
-        runtime.sessionId,
-        { ...snapshot, ...persisted },
-        runtime.model,
-        runtime.provider,
-        conversation.title || '',
-        { workingDirectory: workingDir, homeDirectory, sessionManager: ctx.services.sessionManager },
-      );
-      hookDispatcher.fire({ path: 'Lifecycle:session:save' as HookEventPath, phase: 'Lifecycle' as HookPhase, category: 'session' as HookCategory, specific: 'save', sessionId: runtime.sessionId, timestamp: Date.now(), payload: { sessionId: runtime.sessionId } }).catch((err: unknown) => logger.debug('hook fire error', { error: summarizeError(err) }));
-    } catch (e) { logger.debug('auto-save on turn:complete failed', { error: summarizeError(e) }); }
-    refreshGit();
-  }));
-  unsubs.push(uiServices.events.tools.on('TOOL_SUCCEEDED', () => {
-    refreshGit();
-  }));
-  unsubs.push(uiServices.events.tools.on('TOOL_FAILED', () => {
-    refreshGit();
-  }));
+  // --- Turn-completed / git-refresh event wiring ---
+  const { refreshGit, unsubs: turnUnsubs } = wireTurnEventHandlers({
+    events: uiServices.events,
+    conversation,
+    runtime,
+    orchestrator,
+    configManager,
+    providerRegistry,
+    systemMessageRouter,
+    hookDispatcher,
+    workingDir,
+    homeDirectory,
+    sessionManager: ctx.services.sessionManager,
+    gitStatusProvider,
+    lastGitInfoRef,
+    buildSessionContinuityHints,
+    render,
+  });
+  unsubs.push(...turnUnsubs);
 
-  unsubs.push(uiServices.events.turns.on('STREAM_START', () => {
-    streamStartTime = Date.now();
-    streamDeltaCount = 0;
-    streamTokenSpeed = 0;
-  }));
-  unsubs.push(uiServices.events.turns.on('STREAM_DELTA', () => {
-    streamDeltaCount++;
-    const elapsed = (Date.now() - streamStartTime) / 1000;
-    // Note: counts stream deltas, not actual tokens. ~1 delta per token for most providers.
-    streamTokenSpeed = elapsed > 0 ? streamDeltaCount / elapsed : 0;
-  }));
+  // --- Stream metrics + tool-timer event wiring ---
+  const streamUnsubs = wireStreamEventMetrics({
+    events: uiServices.events,
+    orchestrator,
+    providerRegistry,
+    systemMessageRouter,
+    render,
+    metrics: streamMetrics,
+  });
+  unsubs.push(...streamUnsubs);
 
   // --- Terminal setup ---
   stdin.setRawMode(true);
@@ -747,6 +746,15 @@ async function main() {
       render,
       loadRecoveryConversation: () => loadRecoveryConversation({ homeDirectory }),
       deleteRecoveryFile: () => deleteRecoveryFile({ homeDirectory }),
+      reopenPanels: (snapshot) => {
+        const panels = snapshot.returnContext?.openPanels;
+        if (!panels || panels.length === 0) return;
+        for (const panelId of panels.slice(0, 4)) {
+          try { panelManager.open(panelId); } catch { /* unknown panel id — skip */ }
+        }
+        panelManager.show();
+        render();
+      },
     });
     pendingPermission = blocking.pendingPermission;
     recoveryPending = blocking.recoveryPending;

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

@@ -21,6 +21,10 @@ import {
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
+import {
+  type ConfirmState,
+  handleConfirmInput,
+} from './confirm-state.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 import {
@@ -32,6 +36,8 @@ import {
   formatAgentDuration as formatMs,
   formatAgentTime as shortTime,
   jsonlToTimeline,
+  AGENT_TERMINAL_STATUSES,
+  AGENT_STALL_THRESHOLD_MS,
 } from './agent-inspector-shared.ts';
 
 // ---------------------------------------------------------------------------
@@ -77,10 +83,14 @@ const COLOR = {
 // AgentInspectorPanel
 // ---------------------------------------------------------------------------
 
+// AGENT_TERMINAL_STATUSES and AGENT_STALL_THRESHOLD_MS imported from agent-inspector-shared.ts
+
 export interface AgentInspectorPanelDeps {
-  readonly agentManager: Pick<AgentManager, 'list' | 'getStatus'>;
+  readonly agentManager: Pick<AgentManager, 'list' | 'getStatus' | 'cancel'>;
   readonly agentMessageBus: Pick<AgentMessageBus, 'getMessages'>;
   readonly workingDirectory: string;
+  /** Cancel the agent by id. Uses the same orphan-free path as WRFC. Returns true if cancelled. */
+  readonly cancelAgent: (agentId: string) => boolean;
 }
 
 export class AgentInspectorPanel extends BasePanel {
@@ -102,6 +112,9 @@ export class AgentInspectorPanel extends BasePanel {
   // Row cache — cleared on markDirty(), computed once per render cycle
   private _cachedRows: DisplayRow[] | null = null;
 
+  /** Pending cancel confirmation — subject is the agent id to cancel. */
+  private confirmCancel: ConfirmState<string> | null = null;
+
   constructor(private readonly deps: AgentInspectorPanelDeps) {
     super('inspector', 'Inspector', 'I', 'agent');
   }
@@ -157,13 +170,36 @@ export class AgentInspectorPanel extends BasePanel {
   // -------------------------------------------------------------------------
 
   handleInput(key: string): boolean {
+    // Confirm-cancel flow takes priority — same contract as WRFC panel.
+    if (this.confirmCancel) {
+      const result = handleConfirmInput(this.confirmCancel, key);
+      if (result === 'confirmed') {
+        const rec = this.selectedAgentId
+          ? this.deps.agentManager.getStatus(this.selectedAgentId)
+          : null;
+        if (rec && !AGENT_TERMINAL_STATUSES.has(rec.status)) {
+          this.deps.cancelAgent(rec.id);
+        }
+        this.confirmCancel = null;
+        this.markDirty();
+        return true;
+      }
+      if (result === 'cancelled') {
+        this.confirmCancel = null;
+        this.markDirty();
+      }
+      // absorbed: confirm stays pending
+      return true;
+    }
+
     switch (key) {
-      case 'up':       this._moveCursor(-1); return true;
-      case 'down':     this._moveCursor(1);  return true;
-      case 'pageup':   this._scroll(-10);    return true;
-      case 'pagedown': this._scroll(10);     return true;
-      case 'return':   this._toggleExpand(); return true;
-      case 'tab':      this._nextAgent();    return true;
+      case 'up':       this._moveCursor(-1);         return true;
+      case 'down':     this._moveCursor(1);           return true;
+      case 'pageup':   this._scroll(-10);             return true;
+      case 'pagedown': this._scroll(10);              return true;
+      case 'return':   this._toggleExpand();          return true;
+      case 'tab':      this._nextAgent();             return true;
+      case 'c':        this._beginCancelConfirm();    return true;
       default:         return false;
     }
   }
@@ -217,6 +253,11 @@ export class AgentInspectorPanel extends BasePanel {
     }
 
     summaryLines.push(this._renderAgentInfoSummary(width, rec));
+    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]]));
+    }
     const allRows = this._getCachedRows();
     if (allRows.length === 0) {
       return buildPanelWorkspace(width, height, {
@@ -243,13 +284,42 @@ export class AgentInspectorPanel extends BasePanel {
     }
 
     this.cursorIndex = Math.max(0, Math.min(this.cursorIndex, allRows.length - 1));
+    const selectedRec = this.selectedAgentId
+      ? this.deps.agentManager.getStatus(this.selectedAgentId)
+      : null;
+    const cancellable = selectedRec && !AGENT_TERMINAL_STATUSES.has(selectedRec.status);
     const summarySection = { title: 'Summary', lines: summaryLines } as const;
     const agentsSection = { title: 'Agents', lines: [selectorLine] } as const;
+
+    // Confirm-cancel overlay section.
+    const confirmSection = this.confirmCancel ? {
+      title: 'Confirm Cancel',
+      lines: [
+        buildPanelLine(width, [
+          [' Cancel agent "', DEFAULT_PANEL_PALETTE.warn],
+          [this.confirmCancel.label, 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;
+
+    const cancelHintFg = cancellable ? DEFAULT_PANEL_PALETTE.info : DEFAULT_PANEL_PALETTE.dim;
+    const footerLine = buildPanelLine(width, [
+      [` L${this.cursorIndex + 1}/${allRows.length}`, DEFAULT_PANEL_PALETTE.dim],
+      ['   Tab', DEFAULT_PANEL_PALETTE.info], [' cycle agents', DEFAULT_PANEL_PALETTE.dim],
+      ['   Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim],
+      ['   Enter', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim],
+      ['   c', cancelHintFg], [cancellable ? ' cancel' : ' cancel (n/a)', DEFAULT_PANEL_PALETTE.dim],
+    ]);
+
     const timelineSection = resolveScrollablePanelSection(width, height, {
       intro: 'Inspect a selected agent timeline, tool activity, expanded details, and live/historical message flow.',
-      footerLines: [
-        buildPanelLine(width, [[` L${this.cursorIndex + 1}/${allRows.length}`, DEFAULT_PANEL_PALETTE.dim], ['   Tab', DEFAULT_PANEL_PALETTE.info], [' cycle agents', DEFAULT_PANEL_PALETTE.dim], ['   Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
+      footerLines: [footerLine],
       palette: DEFAULT_PANEL_PALETTE,
       beforeSections: [summarySection, agentsSection],
       section: {
@@ -259,20 +329,22 @@ export class AgentInspectorPanel extends BasePanel {
         scrollOffset: this.scrollOffset,
         minRows: 8,
       },
+      afterSections: confirmSection ? [confirmSection] : undefined,
     });
     this.scrollOffset = timelineSection.scrollOffset;
 
+    const sections = [
+      summarySection,
+      agentsSection,
+      timelineSection.section,
+      ...(confirmSection ? [confirmSection] : []),
+    ];
+
     return buildPanelWorkspace(width, height, {
       title: ` Inspector [${agents.length} agent${agents.length !== 1 ? 's' : ''}]`,
       intro: 'Inspect a selected agent timeline, tool activity, expanded details, and live/historical message flow.',
-      sections: [
-        summarySection,
-        agentsSection,
-        timelineSection.section,
-      ],
-      footerLines: [
-        buildPanelLine(width, [[` L${this.cursorIndex + 1}/${allRows.length}`, DEFAULT_PANEL_PALETTE.dim], ['   Tab', DEFAULT_PANEL_PALETTE.info], [' cycle agents', DEFAULT_PANEL_PALETTE.dim], ['   Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
+      sections,
+      footerLines: [footerLine],
       palette: DEFAULT_PANEL_PALETTE,
     });
   }
@@ -517,4 +589,34 @@ export class AgentInspectorPanel extends BasePanel {
       this.inspectAgent(next.id);
     }
   }
+
+  // -------------------------------------------------------------------------
+  // Private — cancel + stall
+  // -------------------------------------------------------------------------
+
+  /** Initiate cancel-confirm flow for the selected agent (noop if terminal or none selected). */
+  private _beginCancelConfirm(): void {
+    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);
+    this.confirmCancel = { subject: rec.id, label };
+    this.markDirty();
+  }
+
+  /** Returns whether an agent is considered stalled (non-terminal, running past threshold). */
+  private _isAgentStalled(rec: AgentRecord, now: number): boolean {
+    if (AGENT_TERMINAL_STATUSES.has(rec.status)) return false;
+    return (now - rec.startedAt) >= AGENT_STALL_THRESHOLD_MS;
+  }
+
+  /**
+   * Count of all tracked agents that are stalled (non-terminal, no activity
+   * for AGENT_STALL_THRESHOLD_MS). Exposed so callers can aggregate a
+   * stalledAgentCount for cockpit / roster read-models.
+   */
+  getStalledAgentCount(): number {
+    const now = Date.now();
+    return this.deps.agentManager.list().filter(rec => this._isAgentStalled(rec, now)).length;
+  }
 }

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

@@ -1,5 +1,34 @@
 export type AgentInspectorEntryKind = 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'session' | 'error';
 
+// ---------------------------------------------------------------------------
+// Shared agent status / stall constants
+// Used by AgentInspectorPanel, AgentDetailModal, and cockpit read-model consumers.
+// ---------------------------------------------------------------------------
+
+/** Terminal statuses — cancel not offered; stall check skipped. */
+export const AGENT_TERMINAL_STATUSES = new Set(['completed', 'failed', 'cancelled']);
+
+/** Agents in a non-terminal state for longer than this are considered STALLED. */
+export const AGENT_STALL_THRESHOLD_MS = 5 * 60 * 1000;
+
+/**
+ * Count stalled agents from a raw record list.
+ * An agent is stalled when it is non-terminal and has been running for at
+ * least AGENT_STALL_THRESHOLD_MS without completing.
+ *
+ * Extracted as a standalone export so read-models and panels can share the
+ * canonical stall-count logic (TASK-046).
+ */
+export function countStalledAgents(
+  records: ReadonlyArray<{ status: string; startedAt: number }>,
+  now: number = Date.now(),
+): number {
+  return records.filter(
+    (r) => !AGENT_TERMINAL_STATUSES.has(r.status) && (now - r.startedAt) >= AGENT_STALL_THRESHOLD_MS,
+  ).length;
+}
+
+
 export interface AgentTimelineEntry {
   kind: AgentInspectorEntryKind;
   timestamp: number;

package/src/panels/builtin/agent.ts

@@ -76,7 +76,10 @@ export function registerAgentPanels(manager: PanelManager, deps: ResolvedBuiltin
     preload: true,
     factory: () => {
       const ui = requireUiServices(deps);
-      return new WrfcPanel(ui.events.workflows, { controller: ui.agents.wrfcController });
+      return new WrfcPanel(ui.events.workflows, {
+        controller: ui.agents.wrfcController,
+        cancelChain: (agentId: string) => ui.agents.agentManager.cancel(agentId),
+      });
     },
   });
 

package/src/panels/builtin/development.ts

@@ -51,6 +51,7 @@ export function registerDevelopmentPanels(manager: PanelManager, deps: ResolvedB
         agentManager: ui.agents.agentManager,
         agentMessageBus: ui.agents.agentMessageBus,
         workingDirectory: ui.environment.workingDirectory,
+        cancelAgent: (agentId: string) => ui.agents.agentManager.cancel(agentId),
       });
     },
   });
@@ -65,7 +66,10 @@ export function registerDevelopmentPanels(manager: PanelManager, deps: ResolvedB
       description: 'Estimated costs per session, agent, and plan with budget alerts',
       factory: () => {
         const ui = requireUiServices(deps);
-        return new CostTrackerPanel(ui.events.turns, ui.events.agents, getOrchestratorUsage, { budgetThreshold });
+        return new CostTrackerPanel(ui.events.turns, ui.events.agents, getOrchestratorUsage, {
+          budgetThreshold,
+          getAgentStatus: (id) => ui.agents.agentManager.getStatus(id),
+        });
       },
     });
   }

package/src/panels/builtin/knowledge.ts

@@ -1,26 +1,27 @@
 import type { PanelManager } from '../panel-manager.ts';
 import { MemoryPanel } from '../memory-panel.ts';
-import { KnowledgePanel } from '../knowledge-panel.ts';
+import { KnowledgeGraphPanel } from '../knowledge-graph-panel.ts';
 import type { ResolvedBuiltinPanelDeps } from './shared.ts';
 
 export function registerKnowledgePanels(manager: PanelManager, deps: ResolvedBuiltinPanelDeps): void {
-  if (!deps.memoryRegistry) return;
-
-  const { memoryRegistry } = deps;
+  // KnowledgeGraphPanel is a no-arg panel — always register it regardless of memoryRegistry.
   manager.registerType({
     id: 'knowledge',
     name: 'Knowledge',
     icon: 'K',
     category: 'agent',
     description: 'Structured project knowledge: risks, runbooks, architecture notes, incidents, and durable facts',
-    factory: () => new KnowledgePanel(memoryRegistry),
-  });
-  manager.registerType({
-    id: 'memory',
-    name: 'Memory',
-    icon: 'M',
-    category: 'agent',
-    description: 'Project memory: decisions, constraints, incidents, and patterns with provenance links',
-    factory: () => new MemoryPanel(memoryRegistry),
+    factory: () => new KnowledgeGraphPanel(),
   });
+  if (deps.memoryRegistry) {
+    const { memoryRegistry } = deps;
+    manager.registerType({
+      id: 'memory',
+      name: 'Memory',
+      icon: 'M',
+      category: 'agent',
+      description: 'Project memory: decisions, constraints, incidents, and patterns with provenance links',
+      factory: () => new MemoryPanel(memoryRegistry),
+    });
+  }
 }

package/src/panels/builtin/operations.ts

@@ -37,6 +37,7 @@ import {
 import { createRuntimeProviderApi } from '@/runtime/index.ts';
 import type { ResolvedBuiltinPanelDeps } from './shared.ts';
 import { requireAutomationManager, requireControlPlanePanelDeps, requireHookPanelDeps, requirePluginManager, requireUiServices } from './shared.ts';
+import { createCockpitRosterReadModel } from '../cockpit-read-model.ts';
 
 export function registerOperationsPanels(manager: PanelManager, deps: ResolvedBuiltinPanelDeps): void {
   const ui = requireUiServices(deps);
@@ -52,13 +53,33 @@ export function registerOperationsPanels(manager: PanelManager, deps: ResolvedBu
     environment: createEnvironmentVariableQuery(process.env),
   });
 
+  const rosterReadModel = createCockpitRosterReadModel(ui.agents.agentManager);
+  // Subscribe to agent lifecycle events so the roster re-renders on state changes.
+  // AGENT_RUNNING covers status transitions; AGENT_CANCELLED covers the cancellation
+  // terminal state not emitted by AGENT_FAILED. Noisy mid-run events (STREAM_DELTA,
+  // AWAITING_TOOL, etc.) are intentionally excluded — they don't affect roster fields.
+  // Note: stall detection is time-based, so stalled/stalledAgentCount will only refresh
+  // on the next lifecycle event; a periodic tick would be needed for real-time stall display.
+  ui.events.agents.on('AGENT_SPAWNING', () => rosterReadModel.markDirty());
+  ui.events.agents.on('AGENT_RUNNING', () => rosterReadModel.markDirty());
+  ui.events.agents.on('AGENT_COMPLETED', () => rosterReadModel.markDirty());
+  ui.events.agents.on('AGENT_FAILED', () => rosterReadModel.markDirty());
+  ui.events.agents.on('AGENT_CANCELLED', () => rosterReadModel.markDirty());
+
   manager.registerType({
     id: 'cockpit',
     name: 'Cockpit',
     icon: 'O',
     category: 'monitoring',
     description: 'Unified operator summary for orchestration, permissions, communication, MCP, plugins, and integrations',
-    factory: () => new CockpitPanel(ui.readModels.cockpit),
+    factory: () => new CockpitPanel(
+      ui.readModels.cockpit,
+      rosterReadModel,
+      {
+        openAgentDetail: (agentId: string) => deps.openAgentDetail?.(agentId),
+        cancelAgent: (agentId: string) => ui.agents.agentManager.cancel(agentId),
+      },
+    ),
   });
 
   manager.registerType({

package/src/panels/builtin/shared.ts

@@ -114,6 +114,13 @@ export interface BuiltinPanelDeps {
   hookActivityTracker?: Pick<HookActivityTracker, 'listRecent'>;
   /** Shared MCP registry for security panels and MCP workspace commands. */
   mcpRegistry?: McpRegistry;
+  /**
+   * Open the agent detail modal for the given agent id.  Wired from
+   * InputHandler.agentDetailModal.open() at bootstrap — passed to the
+   * CockpitPanel factory so the agents workspace inspect key (i) works
+   * without the panel depending on the modal directly.
+   */
+  openAgentDetail?: (agentId: string) => void;
 }
 
 export type ResolvedBuiltinPanelDeps = Omit<