@pellux/goodvibes-tui 0.20.3 → 0.22.0

package/src/panels/cockpit-panel.ts

@@ -2,6 +2,7 @@ import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { UiCockpitSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
+import type { CockpitRosterReadModel } from './cockpit-read-model.ts';
 import {
   buildGuidanceLine,
   buildKeyValueLine,
@@ -11,6 +12,7 @@ import {
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
+import { agentStatusColor } from './agent-inspector-shared.ts';
 
 const C = {
   ...DEFAULT_PANEL_PALETTE,
@@ -24,45 +26,160 @@ function pickColor(value: number, warnAt = 1, badAt = 3): string {
   return C.good;
 }
 
-const WORKSPACE_IDS = ['flow', 'governance', 'health', 'domains'] as const;
+export interface CockpitPanelActionCallbacks {
+  readonly openAgentDetail: (agentId: string) => void;
+  readonly cancelAgent: (agentId: string) => boolean;
+}
+
+const WORKSPACE_IDS = ['flow', 'governance', 'health', 'domains', 'agents'] as const;
+type WorkspaceId = (typeof WORKSPACE_IDS)[number];
+
+function formatCost(cost: number | null): string {
+  if (cost === null) return 'n/a';
+  return cost < 0.01 ? '<$0.01' : `$${cost.toFixed(2)}`;
+}
 
 export class CockpitPanel extends BasePanel {
   private readonly unsub: (() => void) | null;
+  private readonly rosterUnsub: (() => void) | null;
+  private readonly actionCallbacks: CockpitPanelActionCallbacks;
   private selectedWorkspaceIndex = 0;
+  private agentCursorIndex = 0;
+  private pendingCancelId: string | null = null;
 
-  public constructor(private readonly readModel?: UiReadModel<UiCockpitSnapshot>) {
+  public constructor(
+    private readonly readModel?: UiReadModel<UiCockpitSnapshot>,
+    private readonly rosterReadModel?: CockpitRosterReadModel,
+    actionCallbacks?: Partial<CockpitPanelActionCallbacks>,
+  ) {
     super('cockpit', 'Cockpit', 'O', 'monitoring');
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
+    this.rosterUnsub = rosterReadModel ? rosterReadModel.subscribe(() => this.markDirty()) : null;
+    this.actionCallbacks = {
+      openAgentDetail: actionCallbacks?.openAgentDetail ?? ((_id: string) => { /* noop */ }),
+      cancelAgent: actionCallbacks?.cancelAgent ?? ((_id: string) => false),
+    };
   }
 
   public override onDestroy(): void {
     this.unsub?.();
+    this.rosterUnsub?.();
+  }
+
+  private get selectedWorkspace(): WorkspaceId {
+    return WORKSPACE_IDS[this.selectedWorkspaceIndex] ?? 'flow';
   }
 
   public handleInput(key: string): boolean {
+    // Confirm-cancel absorb: when a cancel is pending, only y/enter confirm, escape/n dismiss, everything else is consumed
+    if (this.pendingCancelId !== null) {
+      if (key === 'y' || key === 'enter' || key === 'return') {
+        this.actionCallbacks.cancelAgent(this.pendingCancelId);
+        this.pendingCancelId = null;
+        this.markDirty();
+      } else if (key === 'escape' || key === 'n') {
+        this.pendingCancelId = null;
+        this.markDirty();
+      }
+      // All other keys are consumed while confirm is pending
+      return true;
+    }
     if (key === 'left' || key === 'h') {
       this.selectedWorkspaceIndex = Math.max(0, this.selectedWorkspaceIndex - 1);
+      this.agentCursorIndex = 0;
       this.markDirty();
       return true;
     }
     if (key === 'right' || key === 'l') {
       this.selectedWorkspaceIndex = Math.min(WORKSPACE_IDS.length - 1, this.selectedWorkspaceIndex + 1);
+      this.agentCursorIndex = 0;
       this.markDirty();
       return true;
     }
     if (key === 'home') {
       this.selectedWorkspaceIndex = 0;
+      this.agentCursorIndex = 0;
       this.markDirty();
       return true;
     }
     if (key === 'end') {
       this.selectedWorkspaceIndex = WORKSPACE_IDS.length - 1;
+      this.agentCursorIndex = 0;
       this.markDirty();
       return true;
     }
+    // Agents workspace: cursor movement, inspect, and cancel-initiation
+    if (this.selectedWorkspace === 'agents') {
+      const roster = this.rosterReadModel?.getSnapshot().roster ?? [];
+      if (key === 'up' || key === 'k') {
+        this.agentCursorIndex = Math.max(0, this.agentCursorIndex - 1);
+        this.markDirty();
+        return true;
+      }
+      if (key === 'down' || key === 'j') {
+        this.agentCursorIndex = Math.min(Math.max(0, roster.length - 1), this.agentCursorIndex + 1);
+        this.markDirty();
+        return true;
+      }
+      if (key === 'i' || key === 'enter' || key === 'return') {
+        const entry = roster[this.agentCursorIndex];
+        if (entry) {
+          this.actionCallbacks.openAgentDetail(entry.id);
+        }
+        return true;
+      }
+      if (key === 'c') {
+        const entry = roster[this.agentCursorIndex];
+        if (entry && !this.isTerminal(entry.status)) {
+          this.pendingCancelId = entry.id;
+          this.markDirty();
+        }
+        return true;
+      }
+    }
     return false;
   }
 
+  private isTerminal(status: string): boolean {
+    return status === 'completed' || status === 'failed' || status === 'cancelled';
+  }
+
+  private renderAgentsWorkspace(width: number): Line[] {
+    const lines: Line[] = [];
+    if (!this.rosterReadModel) {
+      lines.push(buildPanelLine(width, [[' Agent roster read model not wired.', C.empty]]));
+      return lines;
+    }
+    const { roster, stalledAgentCount, totalCost } = this.rosterReadModel.getSnapshot();
+    lines.push(buildPanelLine(width, [
+      [` ${roster.length} agent${roster.length !== 1 ? 's' : ''}`, C.label],
+      stalledAgentCount > 0 ? [`  ${stalledAgentCount} stalled`, C.bad] : ['', C.dim],
+      [`  cost: ${formatCost(totalCost)}`, C.dim],
+    ]));
+    const colors: Record<string, string> = {
+      pending: C.dim, running: C.value, completed: C.good, failed: C.bad, cancelled: C.dim, system: C.dim,
+    };
+    for (let i = 0; i < roster.length; i++) {
+      const entry = roster[i]!;
+      const cursor = i === this.agentCursorIndex ? '>' : ' ';
+      const shortId = entry.id.length > 8 ? entry.id.slice(-8) : entry.id;
+      const statusColor = agentStatusColor(entry.status, colors);
+      const stalledBadge: [string, string] = entry.stalled ? [' STALLED', C.bad] : ['', C.dim];
+      lines.push(buildPanelLine(width, [
+        [cursor, i === this.agentCursorIndex ? C.value : C.dim],
+        [` ${shortId} `, C.dim],
+        [entry.status, statusColor],
+        stalledBadge,
+        ['  ', C.dim],
+        [entry.task.slice(0, Math.max(0, width - 30)), C.label],
+      ]));
+    }
+    if (roster.length === 0) {
+      lines.push(buildPanelLine(width, [[' No agents tracked yet.', C.empty]]));
+    }
+    return lines;
+  }
+
   public render(width: number, height: number): Line[] {
     this.needsRender = false;
 
@@ -153,7 +270,7 @@ export class CockpitPanel extends BasePanel {
       ], C));
       workspaceLines.push(buildGuidanceLine(width, '/incident latest', 'inspect the latest incident bundle and replay fallout', C));
       workspaceLines.push(buildGuidanceLine(width, '/plugins', 'review errored plugins and provenance posture', C));
-    } else {
+    } else if (selectedWorkspace === 'domains') {
       workspaceLines.push(buildKeyValueLine(width, [
         { label: 'tasks', value: String(snapshot.taskCount), valueColor: C.value },
         { label: 'comms', value: String(snapshot.communicationCount), valueColor: C.value },
@@ -161,6 +278,9 @@ export class CockpitPanel extends BasePanel {
       ], C));
       workspaceLines.push(buildGuidanceLine(width, '/mcp', 'inspect trust, quarantine, and risky server posture', C));
       workspaceLines.push(buildGuidanceLine(width, '/communication', 'review blocked lanes and agent message flow', C));
+    } else {
+      // 'agents' workspace — roster from rosterReadModel
+      workspaceLines.push(...this.renderAgentsWorkspace(width));
     }
 
     const sections: PanelWorkspaceSection[] = [

package/src/panels/cockpit-read-model.ts

@@ -0,0 +1,232 @@
+// ---------------------------------------------------------------------------
+// cockpit-read-model.ts
+//
+// TASK-046: Cockpit agent roster slice + cost/token aggregates + stalledAgentCount
+//
+// Provides a thin read-model over AgentManager.list() / getStatus() so the
+// CockpitPanel can display an agent roster without depending on the full
+// AgentInspectorPanel object.
+//
+// Design notes:
+//   - Per-agent cost delegates to calcSessionCost() from cost-utils.ts (canonical
+//     billing formula) and requires real usage data from AgentRecord.usage.  When
+//     usage is absent (agent spawned but not yet completed), cost/tokens show as n/a
+//     rather than fabricated values (39327f86 honest-UX standard).
+//   - stalledAgentCount delegates to countStalledAgents() from agent-inspector-shared.ts
+//     (canonical stall-count function extracted from TASK-046 review) — no reimplementation.
+//   - The read-model is a plain object (snapshot + subscribe) so it can be
+//     wired in tests without a full runtime.
+// ---------------------------------------------------------------------------
+
+import type { AgentRecord } from '@pellux/goodvibes-sdk/platform/tools';
+import { calcSessionCost } from '../export/cost-utils.ts';
+import {
+  AGENT_TERMINAL_STATUSES,
+  AGENT_STALL_THRESHOLD_MS,
+  countStalledAgents,
+} from './agent-inspector-shared.ts';
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+/** Status of a single agent in the cockpit roster. */
+export type CockpitAgentStatus = 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+
+/** A single row in the cockpit agent roster. */
+export interface CockpitAgentRosterEntry {
+  /** Full agent id. */
+  readonly id: string;
+  /** Short task description (truncated at 50 chars). */
+  readonly task: string;
+  /** Model identifier, or 'unknown' when not yet resolved. */
+  readonly model: string;
+  /** Agent lifecycle status. */
+  readonly status: CockpitAgentStatus;
+  /** True when the agent is non-terminal and has exceeded AGENT_STALL_THRESHOLD_MS. */
+  readonly stalled: boolean;
+  /** Input tokens consumed (including cache read+write), or null when unavailable. */
+  readonly inputTokens: number | null;
+  /** Output tokens produced, or null when unavailable. */
+  readonly outputTokens: number | null;
+  /** Estimated cost in USD, or null when token data is unavailable. */
+  readonly cost: number | null;
+}
+
+/** Aggregate snapshot produced by the cockpit roster read-model. */
+export interface CockpitRosterSnapshot {
+  /** All agents in the manager, newest-first by startedAt. */
+  readonly roster: readonly CockpitAgentRosterEntry[];
+  /** Number of non-terminal agents running past AGENT_STALL_THRESHOLD_MS. */
+  readonly stalledAgentCount: number;
+  /**
+   * Sum of all input tokens across agents with real usage data.
+   * null when NO agent has usage data yet (avoids showing 0 when data is simply absent).
+   */
+  readonly totalInputTokens: number | null;
+  /**
+   * Sum of all output tokens across agents with real usage data.
+   * null when NO agent has usage data yet.
+   */
+  readonly totalOutputTokens: number | null;
+  /**
+   * Total estimated cost in USD across agents with real pricing data.
+   * null when NO agent has priceable data yet.
+   */
+  readonly totalCost: number | null;
+}
+
+// ---------------------------------------------------------------------------
+// AgentManager minimal interface (subset used here)
+// ---------------------------------------------------------------------------
+
+export interface CockpitRosterAgentManager {
+  list(): AgentRecord[];
+}
+
+// ---------------------------------------------------------------------------
+// Snapshot builder — pure, testable
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a CockpitRosterSnapshot from a raw AgentRecord list.
+ * Exported so unit tests can drive it directly without a manager stub.
+ */
+export function buildCockpitRosterSnapshot(
+  records: AgentRecord[],
+  now: number = Date.now(),
+): CockpitRosterSnapshot {
+  // Sort newest-first by startedAt
+  const sorted = [...records].sort((a, b) => b.startedAt - a.startedAt);
+
+  let hasUsage = false;
+  let totalInputTokens = 0;
+  let totalOutputTokens = 0;
+  let totalCost = 0;
+
+  const roster: CockpitAgentRosterEntry[] = sorted.map((rec) => {
+    const isTerminal = AGENT_TERMINAL_STATUSES.has(rec.status);
+    const elapsed = now - rec.startedAt;
+    const stalled = !isTerminal && elapsed >= AGENT_STALL_THRESHOLD_MS;
+
+    let inputTokens: number | null = null;
+    let outputTokens: number | null = null;
+    let cost: number | null = null;
+
+    if (rec.usage) {
+      hasUsage = true;
+      const inp =
+        rec.usage.inputTokens +
+        (rec.usage.cacheReadTokens ?? 0) +
+        (rec.usage.cacheWriteTokens ?? 0);
+      const out = rec.usage.outputTokens;
+      const agentCost = calcSessionCost(
+        rec.usage.inputTokens,
+        rec.usage.outputTokens,
+        rec.usage.cacheReadTokens ?? 0,
+        rec.usage.cacheWriteTokens ?? 0,
+        rec.model ?? 'unknown',
+      );
+
+      inputTokens = inp;
+      outputTokens = out;
+      cost = agentCost;
+
+      totalInputTokens += inp;
+      totalOutputTokens += out;
+      totalCost += agentCost;
+    }
+
+    const task = rec.task.length > 50 ? rec.task.slice(0, 47) + '...' : rec.task;
+
+    return {
+      id: rec.id,
+      task,
+      model: rec.model ?? 'unknown',
+      status: rec.status,
+      stalled,
+      inputTokens,
+      outputTokens,
+      cost,
+    };
+  });
+
+  return {
+    roster,
+    stalledAgentCount: countStalledAgents(sorted, now),
+    totalInputTokens: hasUsage ? totalInputTokens : null,
+    totalOutputTokens: hasUsage ? totalOutputTokens : null,
+    totalCost: hasUsage ? totalCost : null,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Read-model factory
+// ---------------------------------------------------------------------------
+
+/** Minimal read-model interface matching the existing UiReadModel shape. */
+export interface CockpitRosterReadModel {
+  getSnapshot(): CockpitRosterSnapshot;
+  /**
+   * Notify all subscribers that the roster has changed and the cockpit panel
+   * should re-render.  Wire this to an AgentManager event feed so live agent
+   * state changes propagate:
+   *
+   *   const roster = createCockpitRosterReadModel(agentManager);
+   *   agentEvents.subscribe(() => roster.markDirty());
+   *
+   * For static/test fixtures the implementation is a no-op.
+   */
+  markDirty(): void;
+  /**
+   * Subscribe to changes.  The listener is called whenever markDirty() is
+   * invoked.  Returns an unsubscribe function.
+   *
+   * For static/test fixtures, returns a no-op unsubscribe.
+   */
+  subscribe(listener: () => void): () => void;
+}
+
+/**
+ * Create a live CockpitRosterReadModel backed by an AgentManager.
+ *
+ * The returned read-model re-derives its snapshot on every getSnapshot() call
+ * so it always reflects the current agent state without needing an event bus.
+ * Callers that want reactive updates should poll or wire in their own
+ * event-driven markDirty() path.
+ */
+export function createCockpitRosterReadModel(
+  agentManager: CockpitRosterAgentManager,
+): CockpitRosterReadModel {
+  const listeners = new Set<() => void>();
+
+  function markDirty(): void {
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+
+  return {
+    getSnapshot(): CockpitRosterSnapshot {
+      return buildCockpitRosterSnapshot(agentManager.list());
+    },
+    markDirty,
+    subscribe(listener: () => void): () => void {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+/**
+ * Create a static CockpitRosterReadModel for testing.
+ */
+export function createStaticCockpitRosterReadModel(
+  snapshot: CockpitRosterSnapshot,
+): CockpitRosterReadModel {
+  return {
+    getSnapshot: () => snapshot,
+    markDirty: () => {},
+    subscribe: () => () => {},
+  };
+}

package/src/panels/confirm-state.ts

@@ -1,12 +1,22 @@
 // ---------------------------------------------------------------------------
-// useConfirmState<T> — reusable inline y/n confirmation helper
+// useConfirmState<T> — reusable inline confirm/cancel helper
 //
-// Pattern (chosen over ConfirmableListPanel base class):
-//   - Composable: any panel holds a ConfirmState field, not a new base class
-//   - Identical y/n UX everywhere: y confirms, n/Esc cancels, any other key
-//     is absorbed (does nothing) while confirm is active
-//   - Render: caller calls renderConfirmLines(width, state) to get the two
-//     lines that replace the normal content area when confirming
+// ── Project-standard confirm contract (all panels must match) ──────────────
+//
+// CONFIRM:  Enter, Return, or y
+// CANCEL:   Esc or n
+// ABSORBED: any other key while confirm is active (keeps confirm pending)
+//
+// Implementation:
+//   - Composable: any panel holds a ConfirmState<T> field; no new base class
+//   - Call handleConfirmInput(confirm, key) BEFORE normal key dispatch.
+//     It handles all four outcomes and returns one of the four result tokens.
+//   - Call renderConfirmLines(width, state) to render the two-line overlay
+//     that replaces normal content while a confirm is pending.
+//
+// ── This file is the canonical contract for all confirm flows ─────────────
+// Any new panel confirm flow must use ConfirmState<T> and handleConfirmInput;
+// do not implement a bespoke two-press or Enter-only variant.
 // ---------------------------------------------------------------------------
 
 import type { Line } from '../types/grid.ts';
@@ -23,9 +33,14 @@ export interface ConfirmState<T = string> {
 /**
  * Call this from a panel's handleInput() BEFORE any other key handling.
  *
+ * Project-standard confirm contract:
+ *   - CONFIRM:  Enter, Return, or y
+ *   - CANCEL:   Esc or n
+ *   - ABSORBED: any other key while confirm is active (keeps confirm pending)
+ *
  * Returns:
- *   - `'confirmed'` — user pressed y; caller must execute the action and
- *     clear state (set confirm to null)
+ *   - `'confirmed'` — user pressed Enter, Return, or y; caller must execute
+ *     the action and clear state (set confirm to null)
  *   - `'cancelled'` — user pressed n or Esc; caller must clear state
  *   - `'absorbed'`  — any other key while confirm is active; caller returns true
  *   - `'inactive'`  — no confirm pending; caller continues normal dispatch
@@ -35,7 +50,7 @@ export function handleConfirmInput<T = string>(
   key: string,
 ): 'confirmed' | 'cancelled' | 'absorbed' | 'inactive' {
   if (!confirm) return 'inactive';
-  if (key === 'y') return 'confirmed';
+  if (key === 'y' || key === 'enter' || key === 'return') return 'confirmed';
   if (key === 'n' || key === 'escape') return 'cancelled';
   return 'absorbed';
 }
@@ -52,8 +67,8 @@ export function renderConfirmLines<T = string>(width: number, state: ConfirmStat
       palette.warn,
     ]]),
     buildPanelLine(width, [
-      [' y', palette.info],
-      ['  confirm delete', palette.dim],
+      [' Enter / y', palette.info],
+      ['  confirm', palette.dim],
       ['   n / Esc', palette.info],
       ['  cancel', palette.dim],
     ]),

package/src/panels/cost-tracker-panel.ts

@@ -7,6 +7,7 @@ import { createStyledCell, createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { AgentEvent, TurnEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
+import type { AgentRecord } from '@pellux/goodvibes-sdk/platform/tools';
 import {
   buildEmptyState,
   buildPanelLine,
@@ -16,68 +17,9 @@ import {
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
+import { getPricing } from '../export/cost-utils.ts';
 
-// ---------------------------------------------------------------------------
-// Pricing table  (USD per 1M tokens)
-// ---------------------------------------------------------------------------
-
-interface ModelPricing {
-  input: number;
-  output: number;
-}
-
-const MODEL_PRICING: Record<string, ModelPricing> = {
-  // Free tier
-  'openrouter/free': { input: 0, output: 0 },
-
-  // InceptionLabs
-  'mercury-2':    { input: 0.50, output: 1.50 },
-  'mercury-edit': { input: 0.50, output: 1.50 },
-
-  // OpenAI
-  'gpt-5.4':              { input: 5,    output: 15 },
-  'gpt-5.3-chat-latest':  { input: 3,    output: 10 },
-  'gpt-5-mini':           { input: 0.15, output: 0.60 },
-  'gpt-5-nano':           { input: 0.05, output: 0.20 },
-  'gpt-oss-120b':         { input: 0,    output: 0 },
-
-  // Anthropic (correct registry IDs)
-  'claude-opus-4-6':   { input: 15,   output: 75 },
-  'claude-sonnet-4-6': { input: 3,    output: 15 },
-  'claude-haiku-4-5':  { input: 0.80, output: 4 },
-
-  // Google
-  'gemini-3.1-pro':        { input: 1.25,  output: 5 },
-  'gemini-3-flash':        { input: 0.075, output: 0.30 },
-  'gemini-3.1-flash-lite': { input: 0.02,  output: 0.10 },
-  'gemini-2.5-pro':        { input: 1.25,  output: 5 },
-};
-
-/**
- * Look up pricing from the model catalog.
- * Returns { input: 0, output: 0 } for free models and unknown models.
- */
-function getCostFromCatalogForPanel(modelId: string): ModelPricing {
-  if (modelId.endsWith(':free')) return { input: 0, output: 0 };
-  return { input: 0, output: 0 };
-}
-
-function getPricing(modelId: string): ModelPricing {
-  // 2. Hardcoded table — exact match
-  if (MODEL_PRICING[modelId]) return MODEL_PRICING[modelId]!;
-  // 1. OpenRouter :free suffix — treat as free
-  if (modelId.endsWith(':free')) return { input: 0, output: 0 };
-  // 2. Prefix match (e.g. "openrouter/free:..." or "claude-sonnet-4-6-20..")
-  for (const [key, pricing] of Object.entries(MODEL_PRICING)) {
-    if (modelId.startsWith(key) || modelId.includes(key)) return pricing;
-  }
-  // 3. Unknown model — default to free-ish safe fallback
-  return getCostFromCatalogForPanel(modelId);
-}
-
-function calcCost(inputTokens: number, outputTokens: number, pricing: ModelPricing): number {
-  return (inputTokens * pricing.input + outputTokens * pricing.output) / 1_000_000;
-}
+// Pricing lookups are provided by ../export/cost-utils.ts (single source of truth).
 
 function formatCost(usd: number): string {
   if (usd === 0) return '$0.00';
@@ -176,14 +118,19 @@ export class CostTrackerPanel extends BasePanel {
   // Getter for live orchestrator usage
   private readonly getOrchestratorUsage: () => UsageSnapshot & { model?: string };
 
+  // Optional resolver for agent usage on completion — enables real cost attribution.
+  // When omitted, completed agents show $0 (honest: data unavailable).
+  private readonly getAgentStatus: ((agentId: string) => AgentRecord | null) | undefined;
+
   constructor(
     turnEvents: UiEventFeed<TurnEvent>,
     agentEvents: UiEventFeed<AgentEvent>,
     getOrchestratorUsage: () => UsageSnapshot & { model?: string },
-    opts: { budgetThreshold?: number } = {},
+    opts: { budgetThreshold?: number; getAgentStatus?: (agentId: string) => AgentRecord | null } = {},
   ) {
     super('cost', 'Cost', '$', 'monitoring');
     this.getOrchestratorUsage = getOrchestratorUsage;
+    this.getAgentStatus = opts.getAgentStatus;
     this.budgetThreshold = opts.budgetThreshold ?? 0;
     this.attachEvents(turnEvents, agentEvents);
   }
@@ -214,12 +161,22 @@ export class CostTrackerPanel extends BasePanel {
       }),
     );
 
-    // Agent completed — capture token data from result if available
+    // Agent completed — capture real token usage via AgentRecord when available
     this.unsubs.push(
       agentEvents.on('AGENT_COMPLETED', (payload) => {
         const entry = this.agents.get(payload.agentId);
         if (entry) {
           entry.status = 'done';
+          if (this.getAgentStatus) {
+            const rec = this.getAgentStatus(payload.agentId);
+            if (rec?.usage) {
+              entry.inputTokens = rec.usage.inputTokens + (rec.usage.cacheReadTokens ?? 0) + (rec.usage.cacheWriteTokens ?? 0);
+              entry.outputTokens = rec.usage.outputTokens;
+              const pricing = getPricing(rec.model ?? 'unknown');
+              entry.cost = (entry.inputTokens * pricing.input + entry.outputTokens * pricing.output) / 1_000_000;
+              if (rec.model && rec.model !== 'unknown') entry.model = rec.model;
+            }
+          }
           this.markDirty();
         }
       }),
@@ -248,9 +205,9 @@ export class CostTrackerPanel extends BasePanel {
     if (usage.model) this.sessionModel = usage.model;
 
     // Record cost delta for sparkline
-    const sessionProvider = this.sessionModel.includes('/') ? this.sessionModel.split('/')[0]! : '';
     const pricing = getPricing(this.sessionModel);
-    const totalCost = calcCost(usage.input + usage.cacheRead + usage.cacheWrite, usage.output, pricing);
+    const billableInput = usage.input + usage.cacheRead + usage.cacheWrite;
+    const totalCost = (billableInput * pricing.input + usage.output * pricing.output) / 1_000_000;
     const delta = Math.max(0, totalCost - this.lastSessionCost);
     this.lastSessionCost = totalCost;
     this.costHistory.push(delta);
@@ -310,10 +267,9 @@ export class CostTrackerPanel extends BasePanel {
   render(width: number, height: number): Line[] {
     if (height <= 0 || width <= 0) return [];
 
-    const sessionProvider = this.sessionModel.includes('/') ? this.sessionModel.split('/')[0]! : '';
     const pricing = getPricing(this.sessionModel);
     const totalInputTokens = this.sessionUsage.input + this.sessionUsage.cacheRead + this.sessionUsage.cacheWrite;
-    const sessionCost = calcCost(this.sessionUsage.input + this.sessionUsage.cacheRead + this.sessionUsage.cacheWrite, this.sessionUsage.output, pricing);
+    const sessionCost = (totalInputTokens * pricing.input + this.sessionUsage.output * pricing.output) / 1_000_000;
     const overBudget = this.budgetThreshold > 0 && sessionCost > this.budgetThreshold;
     const sparkline = buildSparkline(this.costHistory);
     const costStr = formatCost(sessionCost);