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

package/src/modes/components/chat-transcript-builder.ts

@@ -51,7 +51,7 @@ import {
 import { CustomMessageComponent } from "./custom-message";
 import { EvalExecutionComponent } from "./eval-execution";
 import { type LateDiagnosticsFile, LateDiagnosticsMessageComponent } from "./late-diagnostics-message";
-import { ReadToolGroupComponent, readArgsCollapseIntoGroup } from "./read-tool-group";
+import { groupedReadUsageCallIds, ReadToolGroupComponent, readArgsCollapseIntoGroup } from "./read-tool-group";
 import { SkillMessageComponent } from "./skill-message";
 import { ToolExecutionComponent } from "./tool-execution";
 import { TranscriptContainer } from "./transcript-container";
@@ -86,6 +86,7 @@ export class ChatTranscriptBuilder {
 	#pendingUsageDuration: number | undefined;
 	#pendingUsageTtft: number | undefined;
 	#pendingUsageTimestamp: number | undefined;
+	#pendingReadUsageCallIds: string[] | undefined;
 	#lastAssistantUsage: Usage | undefined;
 	#waitingPoll: ToolExecutionComponent | null = null;
 	#todoSnapshot: ToolExecutionComponent | null = null;
@@ -135,6 +136,7 @@ export class ChatTranscriptBuilder {
 		this.#pendingUsageDuration = undefined;
 		this.#pendingUsageTtft = undefined;
 		this.#pendingUsageTimestamp = undefined;
+		this.#pendingReadUsageCallIds = undefined;
 		this.#lastAssistantUsage = undefined;
 		this.#waitingPoll = null;
 		this.#todoSnapshot = null;
@@ -194,30 +196,46 @@ export class ChatTranscriptBuilder {
 		return this.#readGroup;
 	}
 
-	// The per-turn token-usage row must land below the turn's tool blocks, but
-	// normal `read` calls only materialize their group in #appendToolResult. Defer
-	// the row: stash it on the assistant message and flush once the turn's tools
-	// are placed, sealing the read run so the row sits under it.
+	// Defer per-turn metrics until the turn's tool results have materialized.
+	// Read-only invisible turns attach the metrics to their shared compact
+	// group; every other turn keeps the standalone row below its tool blocks.
 	#flushPendingUsage(): void {
 		if (!this.#pendingUsage) return;
-		this.#readGroup?.seal();
-		this.#readGroup = null;
-		this.container.addChild(
-			createUsageRowBlock(
+		const usageAttached =
+			this.#pendingReadUsageCallIds !== undefined &&
+			(this.#readGroup?.attachUsage(
+				this.#pendingReadUsageCallIds,
 				this.#pendingUsage,
 				this.#pendingUsageDuration,
 				this.#pendingUsageTtft,
 				this.#pendingUsageTimestamp,
-			),
-		);
+			) ??
+				false);
+		if (!usageAttached) {
+			this.#readGroup?.seal();
+			this.#readGroup = null;
+			this.container.addChild(
+				createUsageRowBlock(
+					this.#pendingUsage,
+					this.#pendingUsageDuration,
+					this.#pendingUsageTtft,
+					this.#pendingUsageTimestamp,
+				),
+			);
+		}
 		this.#pendingUsage = undefined;
 		this.#pendingUsageDuration = undefined;
 		this.#pendingUsageTtft = undefined;
 		this.#pendingUsageTimestamp = undefined;
+		this.#pendingReadUsageCallIds = undefined;
 	}
 
 	#appendChatMessage(message: AgentMessage): void {
 		if (message.role !== "toolResult") this.#flushPendingUsage();
+		if (message.role !== "assistant" && message.role !== "toolResult") {
+			this.#readGroup?.seal();
+			this.#readGroup = null;
+		}
 		switch (message.role) {
 			case "assistant":
 				this.#appendAssistantMessage(message);
@@ -403,6 +421,7 @@ export class ChatTranscriptBuilder {
 		this.#pendingUsageDuration = message.duration;
 		this.#pendingUsageTtft = message.ttft;
 		this.#pendingUsageTimestamp = message.timestamp;
+		this.#pendingReadUsageCallIds = this.#pendingUsage ? groupedReadUsageCallIds(message) : undefined;
 	}
 
 	#appendToolResult(message: Extract<AgentMessage, { role: "toolResult" }>): void {

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();
+	}
+}