feat(ui): Show cost in agent conversation popups

Pass the existing opt-in cost display setting into conversation viewers opened from FleetView and /agents. Read retained lifetime usage so completed agents keep showing their reported cost, and cover enabled and disabled display paths.

Author: daanzu

src/index.ts

@@ -1829,7 +1829,7 @@ Terse command-style prompts produce shallow, generic work.
           if (manager.abort(record.id)) {
             ctx.ui.notify(`Stopped "${record.description}".`, "info");
           }
-        }, keybindings, (message: string) => manager.steer(record.id, message));
+        }, keybindings, (message: string) => manager.steer(record.id, message), isCostDisplayEnabled);
       },
       {
         overlay: true,

src/ui/conversation-viewer.ts

@@ -9,7 +9,7 @@ import type { AgentSession } from "@earendil-works/pi-coding-agent";
 import { type Component, Input, matchesKey, type TUI, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import { extractText } from "../context.js";
 import type { AgentRecord } from "../types.js";
-import { getLifetimeTotal, getSessionContextPercent } from "../usage.js";
+import { formatCost, getLifetimeTotal, getSessionContextPercent } from "../usage.js";
 import type { Theme } from "./agent-widget.js";
 import { type AgentActivity, buildInvocationTags, describeActivity, fgPreservingNestedStyles, formatDuration, formatSessionTokens, getDisplayName, getPromptModeLabel } from "./agent-widget.js";
 import { createViewerKeys, type ViewerKeybindings, type ViewerKeys } from "./viewer-keys.js";
@@ -45,6 +45,8 @@ export class ConversationViewer implements Component {
     keybindings?: ViewerKeybindings,
     /** Send a steering message to the agent. Omitted → no compose affordance. */
     private onSteer?: (message: string) => void,
+    /** Read live cost-display preference. Omitted → hide reported cost. */
+    private showCost: () => boolean = () => false,
   ) {
     this.keys = createViewerKeys(keybindings);
     this.unsubscribe = session.subscribe(() => {
@@ -152,11 +154,15 @@ export class ConversationViewer implements Component {
     const headerParts: string[] = [duration];
     const toolUses = this.activity?.toolUses ?? this.record.toolUses;
     if (toolUses > 0) headerParts.unshift(`${toolUses} tool${toolUses === 1 ? "" : "s"}`);
-    const tokens = getLifetimeTotal(this.activity?.lifetimeUsage);
+    const usage = this.activity?.lifetimeUsage ?? this.record.lifetimeUsage;
+    const tokens = getLifetimeTotal(usage);
     if (tokens > 0) {
       const percent = getSessionContextPercent(this.activity?.session);
       headerParts.push(formatSessionTokens(tokens, percent, th, this.record.compactionCount));
     }
+    if (this.showCost() && usage?.cost !== undefined) {
+      headerParts.push(formatCost(usage.cost));
+    }
 
     lines.push(row(
       `${statusIcon} ${th.bold(name)}${modeTag}  ${th.fg("muted", this.record.description)} ${th.fg("dim", "·")} ${fgPreservingNestedStyles(th, "dim", headerParts.join(" · "))}`,

src/ui/fleet-list.ts

@@ -311,6 +311,7 @@ export class FleetList {
           },
           keybindings,
           (message: string) => this.manager.steer(record.id, message),
+          this.showCost,
         );
       },
       {

test/conversation-viewer.test.ts

@@ -257,6 +257,42 @@ describe("ConversationViewer", () => {
     });
   });
 
+  describe("cost display", () => {
+    it("shows reported lifetime cost when enabled", () => {
+      const viewer = new ConversationViewer(
+        mockTui(),
+        mockSession(),
+        mockRecord({ lifetimeUsage: { input: 1_000, output: 200, cacheWrite: 0, cost: 0.018 } }),
+        undefined,
+        ansiTheme(),
+        vi.fn(),
+        undefined,
+        undefined,
+        undefined,
+        () => true,
+      );
+
+      expect(viewer.render(80).join("\n")).toContain("~$0.018");
+    });
+
+    it("hides reported lifetime cost when disabled", () => {
+      const viewer = new ConversationViewer(
+        mockTui(),
+        mockSession(),
+        mockRecord({ lifetimeUsage: { input: 1_000, output: 200, cacheWrite: 0, cost: 0.018 } }),
+        undefined,
+        ansiTheme(),
+        vi.fn(),
+        undefined,
+        undefined,
+        undefined,
+        () => false,
+      );
+
+      expect(viewer.render(80).join("\n")).not.toContain("~$0.018");
+    });
+  });
+
   describe("safety net against upstream wrapTextWithAnsi bugs", () => {
     // These tests call buildContentLines() directly (via the private method)
     // because render() has its own truncation via row(). The safety net in

test/fleet-list.test.ts

@@ -49,7 +49,7 @@ interface Harness {
   ui: FleetUICtx;
   manager: AgentManager;
   /** The overlay component (a real ConversationViewer) once one is opened. */
-  overlayComponent: () => { handleInput(data: string): void } | undefined;
+  overlayComponent: () => { handleInput(data: string): void; render(width: number): string[] } | undefined;
   /** Feed a key to the registered input handler; returns the consume result. */
   press: (data: string) => { consume?: boolean } | undefined;
   /** Render the currently-registered below-editor widget at the given width. */
@@ -323,6 +323,19 @@ describe("FleetList rendering", () => {
     expect(agentLine).toContain("~$0.018");
   });
 
+  it("passes cost display to the selected agent popup", () => {
+    const h = harness([
+      makeRecord({ lifetimeUsage: { input: 13_100, output: 0, cacheWrite: 0, cost: 0.018 } }),
+    ], true);
+    h.press(DOWN);  // activate (main)
+    h.press(DOWN);  // select the agent
+    h.press(ENTER); // open the conversation popup
+
+    // The harness theme uses visible markup instead of ANSI escapes; use a wide
+    // render width so that markup does not affect the viewer's truncation path.
+    expect(h.overlayComponent()!.render(500).join("\n")).toContain("~$0.018");
+  });
+
   it("hides reported cost when cost display is disabled", () => {
     const h = harness([
       makeRecord({ lifetimeUsage: { input: 13_100, output: 0, cacheWrite: 0, cost: 0.018 } }),