@oh-my-pi/pi-coding-agent 17.1.8 → 17.2.0

package/src/modes/components/codex-reset-fireworks.ts

@@ -0,0 +1,369 @@
+import {
+	type Component,
+	getSegmenter,
+	matchesKey,
+	type OverlayHandle,
+	type OverlayOptions,
+	truncateToWidth,
+	visibleWidth,
+} from "@oh-my-pi/pi-tui";
+import { type ThemeColor, theme } from "../theme/theme";
+
+const FRAME_INTERVAL_MS = 85;
+const FRAME_COUNT = 34;
+
+const FIREWORK_THEME_COLORS = {
+	cyan: "mdLink",
+	dim: "dim",
+	gold: "warning",
+	green: "success",
+	pink: "accent",
+	violet: "thinkingXhigh",
+	white: "text",
+} as const satisfies Record<string, ThemeColor>;
+
+type FireworkColor = keyof typeof FIREWORK_THEME_COLORS;
+
+/** The active Codex account fields retained between status refreshes. */
+export interface CodexResetUsageSnapshot {
+	/** When this usage report was observed, if supplied by the provider. */
+	observedAt?: number;
+	/** Weekly usage, its quota identity, and its previously scheduled reset deadline. */
+	sevenDay?: { percent: number; resetsAt?: number; tier?: string; plan?: string };
+	savedResets?: number;
+}
+
+/** A detected Codex quota event that can trigger the fireworks presentation. */
+export type CodexResetFireworksEvent =
+	| { kind: "unscheduled-weekly-reset" }
+	| { kind: "saved-reset-banked"; added: number; available: number };
+
+interface CanvasCell {
+	glyph: string;
+	color: FireworkColor;
+	priority: number;
+}
+
+interface FireworkBurst {
+	x: number;
+	y: number;
+	start: number;
+	color: FireworkColor;
+}
+
+interface ActiveFireworks {
+	component: CodexResetFireworksComponent;
+	overlay: OverlayHandle;
+}
+
+interface CodexResetFireworksHost {
+	ui: {
+		showOverlay(component: Component, options?: OverlayOptions): OverlayHandle;
+		setFocus(component: Component): void;
+		requestRender(): void;
+		readonly terminal: { readonly rows: number };
+	};
+}
+
+const BURSTS: readonly FireworkBurst[] = [
+	{ x: 0.17, y: 0.46, start: 5, color: "pink" },
+	{ x: 0.48, y: 0.2, start: 9, color: "cyan" },
+	{ x: 0.78, y: 0.42, start: 13, color: "gold" },
+	{ x: 0.31, y: 0.24, start: 17, color: "violet" },
+	{ x: 0.65, y: 0.28, start: 21, color: "green" },
+	{ x: 0.88, y: 0.18, start: 25, color: "pink" },
+];
+
+/**
+ * Compare consecutive reports for one Codex account. A saved-reset grant takes
+ * precedence when both changes arrive in the same report. A verified decrease,
+ * or a prior positive balance becoming unavailable, suppresses the weekly event
+ * because the user may have redeemed a credit. Other weekly usage drops are
+ * celebrated only before the previously scheduled reset deadline.
+ */
+export function detectCodexResetFireworks(
+	previous: CodexResetUsageSnapshot,
+	current: CodexResetUsageSnapshot,
+): CodexResetFireworksEvent | undefined {
+	const previousSavedResets = previous.savedResets;
+	const currentSavedResets = current.savedResets;
+	if (previousSavedResets !== undefined) {
+		if (currentSavedResets === undefined) {
+			if (previousSavedResets > 0) return undefined;
+		} else {
+			if (currentSavedResets > previousSavedResets) {
+				return {
+					kind: "saved-reset-banked",
+					added: currentSavedResets - previousSavedResets,
+					available: currentSavedResets,
+				};
+			}
+			if (currentSavedResets < previousSavedResets) return undefined;
+		}
+	}
+
+	if (!previous.sevenDay || !current.sevenDay) return undefined;
+	if (previous.sevenDay.tier !== current.sevenDay.tier || previous.sevenDay.plan !== current.sevenDay.plan) {
+		return undefined;
+	}
+	const previousWeeklyPercent = Math.round(Math.max(0, Math.min(100, previous.sevenDay.percent)));
+	const currentWeeklyPercent = Math.round(Math.max(0, Math.min(100, current.sevenDay.percent)));
+	if (previousWeeklyPercent === 0 || currentWeeklyPercent >= previousWeeklyPercent) return undefined;
+
+	const scheduledResetAt = previous.sevenDay.resetsAt;
+	if (
+		scheduledResetAt === undefined ||
+		!Number.isFinite(scheduledResetAt) ||
+		typeof current.observedAt !== "number" ||
+		!Number.isFinite(current.observedAt) ||
+		current.observedAt >= scheduledResetAt
+	) {
+		return undefined;
+	}
+	return { kind: "unscheduled-weekly-reset" };
+}
+
+function setCell(
+	canvas: Array<Array<CanvasCell | undefined>>,
+	x: number,
+	y: number,
+	glyph: string,
+	color: FireworkColor,
+	priority: number,
+): void {
+	const row = canvas[y];
+	if (!row || x < 0 || x >= row.length) return;
+	const current = row[x];
+	if (!current || priority >= current.priority) row[x] = { glyph, color, priority };
+}
+
+function drawText(
+	canvas: Array<Array<CanvasCell | undefined>>,
+	x: number,
+	y: number,
+	text: string,
+	color: FireworkColor,
+	priority: number,
+): void {
+	let column = x;
+	for (const { segment } of getSegmenter().segment(text)) {
+		const width = visibleWidth(segment);
+		if (width <= 0) continue;
+		setCell(canvas, column, y, segment, color, priority);
+		for (let continuation = 1; continuation < width; continuation++) {
+			setCell(canvas, column + continuation, y, "", color, priority);
+		}
+		column += width;
+	}
+}
+
+function drawBanner(
+	canvas: Array<Array<CanvasCell | undefined>>,
+	left: number,
+	artWidth: number,
+	height: number,
+	event: CodexResetFireworksEvent,
+): void {
+	if (height < 3 || artWidth < 8) return;
+	const panelWidth = Math.min(62, artWidth);
+	const panelLeft = left + Math.floor((artWidth - panelWidth) / 2);
+	const top = height - 3;
+	const innerWidth = panelWidth - 2;
+	const titleText =
+		event.kind === "unscheduled-weekly-reset" ? " O P E N A I   R E S E T " : " S A V E D   R E S E T ";
+	const subtitleText =
+		event.kind === "unscheduled-weekly-reset"
+			? "Weekly usage cleared early · ESC to return"
+			: event.added === 1
+				? `New reset banked · ${event.available} available · ESC to return`
+				: `${event.added} resets banked · ${event.available} available · ESC to return`;
+	const title = truncateToWidth(titleText, innerWidth, "");
+	const subtitle = truncateToWidth(subtitleText, innerWidth, "");
+	const titleOffset = Math.floor((innerWidth - visibleWidth(title)) / 2);
+	const subtitleOffset = Math.floor((innerWidth - visibleWidth(subtitle)) / 2);
+
+	drawText(canvas, panelLeft, top, `╭${"─".repeat(innerWidth)}╮`, "violet", 20);
+	drawText(canvas, panelLeft + 1 + titleOffset, top, title, "gold", 21);
+	drawText(canvas, panelLeft, top + 1, `│${" ".repeat(innerWidth)}│`, "violet", 20);
+	drawText(canvas, panelLeft + 1 + subtitleOffset, top + 1, subtitle, "cyan", 21);
+	drawText(canvas, panelLeft, top + 2, `╰${"─".repeat(innerWidth)}╯`, "violet", 20);
+}
+
+function drawStars(
+	canvas: Array<Array<CanvasCell | undefined>>,
+	left: number,
+	artWidth: number,
+	skyHeight: number,
+	frame: number,
+): void {
+	if (skyHeight <= 0) return;
+	const count = Math.min(26, Math.max(5, Math.floor(artWidth / 3)));
+	for (let index = 0; index < count; index++) {
+		const x = left + ((index * 37 + 11) % artWidth);
+		const y = (index * 7 + 2) % skyHeight;
+		const bright = (index + Math.floor(frame / 3)) % 5 === 0;
+		setCell(canvas, x, y, bright ? "+" : ".", bright ? "white" : "dim", bright ? 2 : 1);
+	}
+}
+
+function drawBurst(
+	canvas: Array<Array<CanvasCell | undefined>>,
+	burst: FireworkBurst,
+	left: number,
+	artWidth: number,
+	skyHeight: number,
+	frame: number,
+): void {
+	if (skyHeight <= 1) return;
+	const centerX = left + Math.round((artWidth - 1) * burst.x);
+	const centerY = Math.max(0, Math.min(skyHeight - 2, Math.round((skyHeight - 1) * burst.y)));
+	const age = frame - burst.start;
+
+	if (age >= -6 && age < 0) {
+		const progress = (age + 6) / 6;
+		const y = skyHeight - 1 - Math.round(progress * (skyHeight - 1 - centerY));
+		setCell(canvas, centerX, y, "^", "white", 8);
+		setCell(canvas, centerX, y + 1, "|", burst.color, 7);
+		setCell(canvas, centerX, y + 2, ".", "gold", 6);
+		return;
+	}
+	if (age < 0 || age > 8) return;
+
+	const radius = age === 0 ? 0 : 0.8 + age * 0.92;
+	const gravity = Math.floor((age * age) / 22);
+	const glyphs = ["@", "*", "*", "+", "o", "o", ".", ".", "."] as const;
+	const particleColor: FireworkColor = age <= 5 ? burst.color : age <= 7 ? "gold" : "dim";
+
+	for (let particle = 0; particle < 20; particle++) {
+		const angle = (particle / 20) * Math.PI * 2 + burst.start * 0.17;
+		const x = centerX + Math.round(Math.cos(angle) * radius * 1.75);
+		const y = centerY + Math.round(Math.sin(angle) * radius * 0.58 + gravity);
+		setCell(canvas, x, y, glyphs[age], particleColor, 10);
+		if (age >= 2 && age <= 6) {
+			const trailRadius = Math.max(0, radius - 1.4);
+			const trailX = centerX + Math.round(Math.cos(angle) * trailRadius * 1.75);
+			const trailY = centerY + Math.round(Math.sin(angle) * trailRadius * 0.58 + gravity);
+			setCell(canvas, trailX, trailY, ".", "dim", 5);
+		}
+	}
+	if (age <= 2) setCell(canvas, centerX, centerY, age === 0 ? "@" : "+", "white", 12);
+}
+
+function renderCanvas(canvas: Array<Array<CanvasCell | undefined>>): string[] {
+	return canvas.map(row => {
+		let output = "";
+		let run = "";
+		let runColor: FireworkColor | undefined;
+		for (const cell of row) {
+			if (cell && cell.color !== runColor) {
+				if (run) output += runColor ? theme.fg(FIREWORK_THEME_COLORS[runColor], run) : run;
+				run = "";
+				runColor = cell.color;
+			}
+			run += cell?.glyph ?? " ";
+		}
+		if (run) output += runColor ? theme.fg(FIREWORK_THEME_COLORS[runColor], run) : run;
+		return output;
+	});
+}
+
+/** Render one deterministic animation frame for the top-third overlay. */
+function renderCodexResetFireworks(
+	width: number,
+	height: number,
+	frame: number,
+	event: CodexResetFireworksEvent,
+): string[] {
+	const safeWidth = Math.max(1, Math.floor(width));
+	const safeHeight = Math.max(1, Math.floor(height));
+	const artWidth = Math.min(96, safeWidth);
+	const left = Math.floor((safeWidth - artWidth) / 2);
+	const skyHeight = Math.max(0, safeHeight - 3);
+	const canvas = Array.from({ length: safeHeight }, () => new Array<CanvasCell | undefined>(safeWidth));
+
+	drawStars(canvas, left, artWidth, skyHeight, frame);
+	for (const burst of BURSTS) drawBurst(canvas, burst, left, artWidth, skyHeight, frame);
+	drawBanner(canvas, left, artWidth, safeHeight, event);
+	return renderCanvas(canvas);
+}
+
+class CodexResetFireworksComponent implements Component {
+	#timer: NodeJS.Timeout | undefined;
+	#done = Promise.withResolvers<void>();
+	#frame = 0;
+	#disposed = false;
+
+	constructor(
+		readonly host: CodexResetFireworksHost,
+		readonly event: CodexResetFireworksEvent,
+	) {}
+
+	run(): Promise<void> {
+		this.#timer ??= setInterval(() => {
+			if (this.#disposed) return;
+			this.#frame = (this.#frame + 1) % FRAME_COUNT;
+			this.host.ui.requestRender();
+		}, FRAME_INTERVAL_MS);
+		this.host.ui.requestRender();
+		return this.#done.promise;
+	}
+
+	dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		if (this.#timer) {
+			clearInterval(this.#timer);
+			this.#timer = undefined;
+		}
+		this.#done.resolve();
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "esc")) this.#done.resolve();
+	}
+
+	render(width: number): readonly string[] {
+		const height = Math.max(1, Math.floor(this.host.ui.terminal.rows * 0.33));
+		return renderCodexResetFireworks(width, height, this.#frame, this.event);
+	}
+}
+
+/** Owns the at-most-one modal celebration lifecycle for an interactive session. */
+export class CodexResetFireworksController {
+	#active: ActiveFireworks | undefined;
+
+	constructor(private readonly host: CodexResetFireworksHost) {}
+
+	/** Present a celebration unless another one already owns the modal overlay. */
+	show(event: CodexResetFireworksEvent): boolean {
+		if (this.#active) return false;
+		const component = new CodexResetFireworksComponent(this.host, event);
+		const overlay = this.host.ui.showOverlay(component, {
+			anchor: "top-center",
+			width: "100%",
+			maxHeight: "33%",
+			margin: 0,
+		});
+		this.#active = { component, overlay };
+		this.host.ui.setFocus(component);
+		void component.run().then(() => this.#finish(component));
+		return true;
+	}
+
+	/** Stop the active celebration and release its overlay, if present. */
+	dispose(): void {
+		const active = this.#active;
+		if (!active) return;
+		this.#active = undefined;
+		active.component.dispose();
+		active.overlay.hide();
+	}
+
+	#finish(component: CodexResetFireworksComponent): void {
+		const active = this.#active;
+		if (!active || active.component !== component) return;
+		this.#active = undefined;
+		component.dispose();
+		active.overlay.hide();
+	}
+}

package/src/modes/components/read-tool-group.ts

@@ -1,4 +1,5 @@
 import * as path from "node:path";
+import type { AssistantMessage, Usage } from "@oh-my-pi/pi-ai";
 import type { Component } from "@oh-my-pi/pi-tui";
 import { Container, Text } from "@oh-my-pi/pi-tui";
 import { InternalUrlRouter, XD_URL_PREFIX } from "../../internal-urls";
@@ -6,7 +7,9 @@ import { getLanguageFromPath, theme } from "../../modes/theme/theme";
 import { parseLineRanges, selectorLineRanges, splitPathAndSel } from "../../tools/path-utils";
 import { PREVIEW_LIMITS, shortenPath } from "../../tools/render-utils";
 import { fileHyperlink, renderCodeCell, tryResolveInternalUrlSync } from "../../tui";
+import { canonicalizeMessage } from "../../utils/thinking-display";
 import type { ToolExecutionHandle } from "./tool-execution";
+import { formatUsageRow } from "./usage-row";
 
 /**
  * Extract the read call's target path. `path` is the canonical arg; `file_path`
@@ -39,6 +42,33 @@ export function readArgsCollapseIntoGroup(args: unknown): boolean {
 	return target.startsWith(XD_URL_PREFIX) || !InternalUrlRouter.instance().canHandle(target);
 }
 
+/**
+ * Return the collapsed read calls that can own a turn's usage row. Mixed-tool
+ * turns and visible content after a read keep the standalone row so request
+ * metrics retain their transcript ordering.
+ */
+export function groupedReadUsageCallIds(message: AssistantMessage): string[] | undefined {
+	const toolCallIds: string[] = [];
+	let sawToolCall = false;
+	for (const content of message.content) {
+		if (content.type === "toolCall") {
+			if (content.name !== "read" || !readArgsCollapseIntoGroup(content.arguments)) return undefined;
+			sawToolCall = true;
+			toolCallIds.push(content.id);
+			continue;
+		}
+		if (
+			sawToolCall &&
+			(content.type === "image" ||
+				(content.type === "text" && canonicalizeMessage(content.text)) ||
+				(content.type === "thinking" && canonicalizeMessage(content.thinking)))
+		) {
+			return undefined;
+		}
+	}
+	return toolCallIds.length > 0 ? toolCallIds : undefined;
+}
+
 type ReadRenderArgs = {
 	path?: string;
 	file_path?: string;
@@ -94,6 +124,14 @@ type ReadEntry = {
 	codeLineNumbers?: Array<number | null>;
 };
 
+type ReadUsageRow = {
+	toolCallIds: readonly string[];
+	usage: Usage;
+	durationMs?: number;
+	ttftMs?: number;
+	timestamp?: number;
+};
+
 /** Number of code lines to show in collapsed preview mode */
 const COLLAPSED_PREVIEW_LINES = PREVIEW_LIMITS.OUTPUT_COLLAPSED;
 
@@ -290,6 +328,8 @@ function formatMergedSelectorParts(selectors: string[]): string {
 
 export class ReadToolGroupComponent extends Container implements ToolExecutionHandle {
 	#entries = new Map<string, ReadEntry>();
+	#usageRows = new Map<string, ReadUsageRow>();
+	#usageBatchByToolCallId = new Map<string, string>();
 	#text: Text;
 	#expanded = false;
 	#showContentPreview: boolean;
@@ -394,6 +434,33 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		this.#updateDisplay();
 	}
 
+	/**
+	 * Nest one request's usage beneath the last visible read call from that
+	 * request. Parallel reads share one row rather than duplicating request totals.
+	 */
+	attachUsage(
+		toolCallIds: readonly string[],
+		usage: Usage,
+		durationMs?: number,
+		ttftMs?: number,
+		timestamp?: number,
+	): boolean {
+		const attachedToolCallIds: string[] = [];
+		let anchorId: string | undefined;
+		for (const toolCallId of toolCallIds) {
+			if (!this.#entries.has(toolCallId)) continue;
+			attachedToolCallIds.push(toolCallId);
+			anchorId = toolCallId;
+		}
+		if (!anchorId) return false;
+		for (const toolCallId of attachedToolCallIds) {
+			this.#usageBatchByToolCallId.set(toolCallId, anchorId);
+		}
+		this.#usageRows.set(anchorId, { toolCallIds: attachedToolCallIds, usage, durationMs, ttftMs, timestamp });
+		this.#updateDisplay();
+		return true;
+	}
+
 	setArgsComplete(_toolCallId?: string): void {
 		this.#updateDisplay();
 	}
@@ -427,13 +494,15 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 			if (!this.#shouldRenderPreviewRow(row)) {
 				const statusSymbol = this.#formatStatus(this.#statusForTargets(row.targets));
 				const pathDisplay = this.#formatRowPath(row);
-				this.#text.setText(
-					` ${statusSymbol} ${theme.fg("toolTitle", theme.bold("Read"))} ${pathDisplay}`.trimEnd(),
-				);
+				const lines = [` ${statusSymbol} ${theme.fg("toolTitle", theme.bold("Read"))} ${pathDisplay}`.trimEnd()];
+				const usageRows = this.#usageRowsBySummaryRow(displayRows).get(0) ?? [];
+				this.#appendUsageRows(lines, usageRows, "   ");
+				this.#text.setText(lines.join("\n"));
 				this.addChild(this.#text);
 			}
 			for (const entry of this.#previewEntriesForRow(row)) {
 				this.#addContentPreview(entry);
+				this.#addPreviewUsage(entry);
 			}
 			return;
 		}
@@ -443,8 +512,9 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		const entriesWithoutPreview = entries.filter(entry => !this.#shouldRenderPreview(entry));
 		const summaryTargets = this.#displayTargetsForEntries(entriesWithoutPreview);
 		const rows = this.#buildSummaryRows(summaryTargets);
+		const usageRowsBySummaryRow = this.#usageRowsBySummaryRow(rows);
 		for (const [index, row] of rows.entries()) {
-			this.#appendSummaryRow(lines, row, index, rows.length);
+			this.#appendSummaryRow(lines, row, index, rows.length, usageRowsBySummaryRow.get(index) ?? []);
 		}
 
 		this.#text.setText(lines.join("\n"));
@@ -453,6 +523,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		for (const entry of entries) {
 			if (this.#shouldRenderPreview(entry)) {
 				this.#addContentPreview(entry);
+				this.#addPreviewUsage(entry);
 			}
 		}
 	}
@@ -480,27 +551,37 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	}
 
 	#buildSummaryRows(targets: ReadDisplayTarget[]): ReadSummaryRow[] {
-		const selectorTargetsByBasePath = new Map<string, ReadDisplayTarget[]>();
+		const selectorTargetsByBasePathAndBatch = new Map<string, Map<string | undefined, ReadDisplayTarget[]>>();
 		for (const target of targets) {
 			if (!target.selector) continue;
-			const existing = selectorTargetsByBasePath.get(target.basePath);
+			let targetsByBatch = selectorTargetsByBasePathAndBatch.get(target.basePath);
+			if (!targetsByBatch) {
+				targetsByBatch = new Map<string | undefined, ReadDisplayTarget[]>();
+				selectorTargetsByBasePathAndBatch.set(target.basePath, targetsByBatch);
+			}
+			const batchId = this.#usageBatchByToolCallId.get(target.entry.toolCallId);
+			const existing = targetsByBatch.get(batchId);
 			if (existing) existing.push(target);
-			else selectorTargetsByBasePath.set(target.basePath, [target]);
+			else targetsByBatch.set(batchId, [target]);
 		}
 
-		const mergeableBasePaths = new Set<string>();
-		for (const [basePath, baseTargets] of selectorTargetsByBasePath) {
-			if (basePath && baseTargets.length > 1) {
-				mergeableBasePaths.add(basePath);
+		const mergedTargetsByTarget = new Map<ReadDisplayTarget, ReadDisplayTarget[]>();
+		for (const [basePath, targetsByBatch] of selectorTargetsByBasePathAndBatch) {
+			if (!basePath) continue;
+			for (const groupedTargets of targetsByBatch.values()) {
+				if (groupedTargets.length <= 1) continue;
+				for (const target of groupedTargets) {
+					mergedTargetsByTarget.set(target, groupedTargets);
+				}
 			}
 		}
 
-		const emittedMergedRows = new Set<string>();
+		const emittedMergedTargets = new Set<ReadDisplayTarget[]>();
 		const rows: ReadSummaryRow[] = [];
 		for (const target of targets) {
-			if (target.selector && mergeableBasePaths.has(target.basePath)) {
-				if (!emittedMergedRows.has(target.basePath)) {
-					const mergedTargets = selectorTargetsByBasePath.get(target.basePath) ?? [target];
+			const mergedTargets = mergedTargetsByTarget.get(target);
+			if (mergedTargets) {
+				if (!emittedMergedTargets.has(mergedTargets)) {
 					rows.push({
 						targetPath: `${target.basePath}:${formatMergedSelectorParts(
 							mergedTargets
@@ -510,7 +591,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 						basePath: target.basePath,
 						targets: mergedTargets,
 					});
-					emittedMergedRows.add(target.basePath);
+					emittedMergedTargets.add(mergedTargets);
 				}
 				continue;
 			}
@@ -519,9 +600,58 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		return rows;
 	}
 
-	#appendSummaryRow(lines: string[], row: ReadSummaryRow, index: number, total: number): void {
+	#appendSummaryRow(
+		lines: string[],
+		row: ReadSummaryRow,
+		index: number,
+		total: number,
+		usageRows: ReadUsageRow[],
+	): void {
 		const connector = index === total - 1 ? theme.tree.last : theme.tree.branch;
 		lines.push(`   ${theme.fg("dim", connector)} ${this.#formatRow(row)}`.trimEnd());
+
+		const connectorWidth = Bun.stringWidth(connector);
+		const continuation =
+			index === total - 1
+				? " ".repeat(connectorWidth)
+				: `${theme.tree.vertical}${" ".repeat(Math.max(0, connectorWidth - Bun.stringWidth(theme.tree.vertical)))}`;
+		this.#appendUsageRows(lines, usageRows, `   ${continuation} `);
+	}
+
+	#usageRowsBySummaryRow(rows: ReadSummaryRow[]): Map<number, ReadUsageRow[]> {
+		const lastRowIndexByToolCallId = new Map<string, number>();
+		for (const [index, row] of rows.entries()) {
+			for (const target of row.targets) {
+				lastRowIndexByToolCallId.set(target.entry.toolCallId, index);
+			}
+		}
+
+		const usageRowsByIndex = new Map<number, ReadUsageRow[]>();
+		for (const usageRow of this.#usageRows.values()) {
+			let lastRowIndex: number | undefined;
+			for (const toolCallId of usageRow.toolCallIds) {
+				const index = lastRowIndexByToolCallId.get(toolCallId);
+				if (index !== undefined && (lastRowIndex === undefined || index > lastRowIndex)) {
+					lastRowIndex = index;
+				}
+			}
+			if (lastRowIndex === undefined) continue;
+			const usageRows = usageRowsByIndex.get(lastRowIndex);
+			if (usageRows) usageRows.push(usageRow);
+			else usageRowsByIndex.set(lastRowIndex, [usageRow]);
+		}
+		return usageRowsByIndex;
+	}
+
+	#appendUsageRows(lines: string[], usageRows: ReadUsageRow[], prefix: string): void {
+		for (const usageRow of usageRows) {
+			lines.push(
+				theme.fg(
+					"dim",
+					`${prefix}${formatUsageRow(usageRow.usage, usageRow.durationMs, usageRow.ttftMs, usageRow.timestamp)}`,
+				),
+			);
+		}
 	}
 
 	#formatRow(row: ReadSummaryRow): string {
@@ -659,6 +789,18 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		this.addChild(component);
 	}
 
+	#addPreviewUsage(entry: ReadEntry): void {
+		const usageRow = this.#usageRows.get(entry.toolCallId);
+		if (!usageRow) return;
+		this.addChild(
+			new Text(
+				theme.fg("dim", formatUsageRow(usageRow.usage, usageRow.durationMs, usageRow.ttftMs, usageRow.timestamp)),
+				3,
+				0,
+			),
+		);
+	}
+
 	#shouldRenderPreview(entry: ReadEntry): boolean {
 		return this.#showContentPreview && entry.contentText !== undefined;
 	}