feat(ai): show live turn usage and elapsed time

Author: auberginewly

electron/ai-edition/chat-persistence.test.ts

@@ -96,6 +96,7 @@ describe("local Agent chat history", () => {
 		const messages = selectSession("proj_usage", session.id)?.messages ?? [];
 		expect(messages).toHaveLength(success ? 2 : 1);
 		expect(messages.at(-1)?.usage).toEqual(reportedUsage);
+		expect(messages.at(-1)?.durationMs).toEqual(expect.any(Number));
 		if (success) expect(messages[0]?.usage).toBeUndefined();
 		expect(readFileSync(path.join(root, "proj_usage.chat.json"), "utf8")).not.toContain(key);
 	});
@@ -184,14 +185,10 @@ describe("local Agent chat history", () => {
 		expect(result.document).toBeUndefined();
 		expect(result.assistantMessage).toBeUndefined();
 		expect(result.userMessage).toBeUndefined();
-		expect(selectSession(projectId, session.id)?.messages).toEqual([
-			{ ...user, checkpointId: null },
-		]);
+		expect(selectSession(projectId, session.id)?.messages).toEqual([]);
 		await restart();
 		const restored = selectSession(projectId, session.id)?.messages;
-		expect(restored).toHaveLength(1);
-		expect(restored?.[0]).toMatchObject({ id: user.id, content: "pending question" });
-		expect(restored?.[0].usage).toBeUndefined();
+		expect(restored).toEqual([]);
 	});
 
 	it("uses the actual session created for a stale id", async () => {

electron/ai-edition/chat-persistence.ts

@@ -61,6 +61,7 @@ const messageSchema = z.object({
 	createdAt: z.string().min(1),
 	toolCalls: z.array(toolCallSchema).optional(),
 	usage: optionalUsageSchema.optional(),
+	durationMs: tokenCountSchema.optional().catch(undefined),
 });
 const sessionSchema = z.object({
 	id: z.string().min(1),

electron/ai-edition/chat-service.toolloop.test.ts

@@ -241,6 +241,7 @@ describe("runChat tool loop", () => {
 		invokeMock.mockImplementationOnce(async (args) => ({
 			text: "",
 			document: args.document,
+			usage: createTurnUsageAccumulator().snapshot(),
 			mutated: false,
 		}));
 		const session = createSession("proj_empty_reply");

electron/ai-edition/chat-service.ts

@@ -18,6 +18,7 @@ import {
 } from "../../src/lib/ai-edition/schema";
 import type { ShaderEffectChecker } from "../../src/lib/ai-edition/shaderEffects";
 import type {
+	AgentTurnUsage,
 	AiEditionChatMessage,
 	AiEditionChatResult,
 	AiEditionToolCallSummary,
@@ -297,6 +298,7 @@ export function deleteSession(projectId: string, sessionId: string): boolean {
 }
 
 export interface ChatEventSink {
+	usage?: (usage: AgentTurnUsage) => void;
 	/** Streamed text delta from the model. */
 	text?: (delta: string) => void;
 	/** Streamed delta from the model's reasoning block (Anthropic/MiniMax
@@ -329,6 +331,7 @@ const noop = () => undefined;
 
 /** ponytail: zero-config sink that swallows every event. */
 const NOOP_SINK: Required<ChatEventSink> = {
+	usage: noop,
 	text: noop,
 	thinking: noop,
 	toolStart: noop,
@@ -434,6 +437,7 @@ export async function runChat(
 	const appliedToolCalls: AiEditionToolCallSummary[] = [];
 
 	const agentSink = {
+		usage: (usage: AgentTurnUsage) => emit.usage(usage),
 		text: (delta: string) => emit.text(delta),
 		thinking: (delta: string) => emit.thinking(delta),
 		toolStart: (name: string, args: unknown) => {
@@ -450,6 +454,7 @@ export async function runChat(
 
 	const { invokeOpenScreenAgent } = await import("./deep-agent/service");
 
+	const startedAt = performance.now();
 	const result = await invokeOpenScreenAgent({
 		document: workingDocument ?? emptyDocumentForTextOnly(projectId),
 		model: {
@@ -469,6 +474,8 @@ export async function runChat(
 		checkShaderEffect: env.checkShaderEffect,
 	});
 
+	const durationMs = Math.max(0, Math.round(performance.now() - startedAt));
+
 	// The project was deleted while the agent ran: its sessions are gone, so a
 	// reply recorded now would be reported as sent and then never be seen again.
 	if (sessionsByProject.get(projectId) !== sessions) {
@@ -494,6 +501,7 @@ export async function runChat(
 		// missed). Falls back to the generic message when the agent didn't
 		// provide a reason.
 		originatingMessage.usage = result.usage;
+		originatingMessage.durationMs = durationMs;
 		persistProject(projectId);
 		return {
 			success: false,
@@ -510,6 +518,7 @@ export async function runChat(
 		role: "assistant",
 		content: result.text,
 		usage: result.usage,
+		durationMs,
 		createdAt: new Date().toISOString(),
 		toolCalls: appliedToolCalls.length ? appliedToolCalls : undefined,
 	};

electron/ai-edition/deep-agent/service.ts

@@ -110,6 +110,8 @@ import {
 import { createTurnUsageAccumulator } from "./usage";
 
 export interface OpenScreenAgentSink {
+	/** Latest cumulative usage from completed model calls; never sum stream chunks. */
+	usage?: (usage: AgentTurnUsage) => void;
 	text: (delta: string) => void;
 	/** Streaming delta from the model's reasoning block (Anthropic/MiniMax
 	 * thinking). Provider-agnostic — for providers without thinking this is
@@ -733,6 +735,9 @@ export async function invokeOpenScreenAgent(args: InvokeArgs): Promise<InvokeRes
 
 		for await (const event of stream) {
 			usage.observe(event);
+			if (event.event === "on_chat_model_end" || event.event === "on_chat_model_error") {
+				sink.usage?.(usage.snapshot());
+			}
 			const eventType = typeof event.event === "string" ? event.event : "";
 			const data = event.data as Record<string, unknown> | undefined;
 			const name = typeof event.name === "string" ? (event.name as string) : "";

electron/ai-edition/deep-agent/usage.integration.test.ts

@@ -241,6 +241,7 @@ it.each([
 		});
 		if (mode === "anthropic") expect(accumulator.snapshot().cacheCreationInputTokens).toBe(3);
 		requests = 0;
+		const usageUpdates = vi.fn();
 		const result = await invokeOpenScreenAgent({
 			document: createEmptyDocument({ projectId: "usage", title: "usage" }),
 			model: {
@@ -263,13 +264,19 @@ it.each([
 			history: [],
 			userMessage: "Read",
 			sink: {
+				usage: usageUpdates,
 				text: vi.fn(),
 				thinking: vi.fn(),
 				toolStart: vi.fn(),
 				toolEnd: vi.fn(),
 				error: vi.fn(),
 			},
 		});
+		expect(usageUpdates).toHaveBeenCalled();
+		expect(usageUpdates.mock.lastCall?.[0].totalTokens).toBe(result.usage.totalTokens);
+		if (mode === "chat") {
+			expect(usageUpdates.mock.calls.map(([value]) => value.totalTokens)).toEqual([15, 30]);
+		}
 		if (mode === "empty") expect(result.reason).toContain("Empty response");
 		expect(result.usage).toMatchObject({
 			inputTokens: mode === "anthropic" ? 17 : mode === "chat" ? 20 : 10,

electron/ipc/nativeBridge.ts

@@ -194,6 +194,7 @@ function buildChatEventSink(sender: Electron.WebContents, sessionId: string): Ch
 	return {
 		text: (delta) => send({ kind: "text", sessionId, delta }),
 		thinking: (delta) => send({ kind: "thinking", sessionId, delta }),
+		usage: (usage) => send({ kind: "usage", sessionId, usage }),
 		toolStart: (name, args) => send({ kind: "toolStart", sessionId, name, args }),
 		toolEnd: (name, ok, summary) => send({ kind: "toolEnd", sessionId, name, ok, summary }),
 		error: (message) => send({ kind: "error", sessionId, message }),

src/components/ai-edition/ChatUsageSummary.test.tsx

@@ -16,22 +16,22 @@ const complete: AgentTurnUsage = {
 	countedCallCount: 3,
 	status: "complete",
 };
-const show = (usage?: AgentTurnUsage) =>
+const show = (usage?: AgentTurnUsage, durationMs?: number, running = false) =>
 	render(
 		<I18nProvider>
 			<TooltipProvider>
-				<ChatUsageSummary usage={usage} />
+				<ChatUsageSummary usage={usage} durationMs={durationMs} running={running} />
 			</TooltipProvider>
 		</I18nProvider>,
 	);
 describe("ChatUsageSummary", () => {
-	it("shows totals and model calls with accessible accounting details", () => {
+	it("shows a concise total with accounting details in the tooltip", () => {
 		const view = show(complete);
-		expect(view.getByText("660 tokens · 3 model calls")).toHaveAttribute(
+		expect(view.getByText("660 tokens")).toHaveAttribute(
 			"aria-label",
 			expect.stringContaining("Input: 500"),
 		);
-		expect(view.getByText("660 tokens · 3 model calls")).toHaveAttribute(
+		expect(view.getByText("660 tokens")).toHaveAttribute(
 			"aria-label",
 			expect.stringContaining("3 of 3 model calls counted"),
 		);
@@ -53,22 +53,40 @@ describe("ChatUsageSummary", () => {
 	});
 	it("shows explicitly reported zero", () => {
 		expect(
-			show({ ...complete, inputTokens: 0, outputTokens: 0, totalTokens: 0 }).getByText(
-				"0 tokens · 3 model calls",
-			),
+			show({ ...complete, inputTokens: 0, outputTokens: 0, totalTokens: 0 }).getByText("0 tokens"),
 		).toBeInTheDocument();
 	});
 	it("labels optional details as reported counts and omits missing details", () => {
 		const view = show({ ...complete, cachedInputTokens: 0, reasoningOutputTokens: 12 });
-		const label = view.getByText("660 tokens · 3 model calls").getAttribute("aria-label");
+		const label = view.getByText("660 tokens").getAttribute("aria-label");
 		expect(label).toContain("Reported cached input: 0");
 		expect(label).toContain("Reported reasoning output: 12");
 		expect(label).not.toContain("cache creation");
 	});
 	it("formats counts for the selected locale", () => {
 		localStorage.setItem("openscreen-locale", "de");
-		const view = show({ ...complete, totalTokens: 1234 });
-		expect(view.getByText(/1.234/)).toBeInTheDocument();
+		const view = show({ ...complete, totalTokens: 12340 });
+		expect(view.getByText(/12,3k/)).toBeInTheDocument();
 		localStorage.clear();
 	});
+	it("shows compact totals and elapsed time, with no visible breakdown or model-call count", () => {
+		const view = show({ ...complete, totalTokens: 12340 }, 45000);
+		expect(view.getByText("12.3k tokens · 45s")).toBeInTheDocument();
+		expect(view.container.textContent).not.toMatch(/Input:|Output:|model calls/);
+	});
+	it("keeps elapsed time on unavailable usage without claiming zero tokens", () => {
+		const view = show(
+			{ ...complete, status: "unavailable", countedCallCount: 0, totalTokens: 0 },
+			1200,
+		);
+		expect(view.getByText("Token usage unavailable · 1s")).toBeInTheDocument();
+	});
+	it("shows reported running counts as a lower bound and hides unavailable running usage", () => {
+		const view = show(complete, undefined, true);
+		expect(view.getByText("≥660 tokens")).toBeInTheDocument();
+		view.unmount();
+		expect(
+			show({ ...complete, status: "unavailable" }, undefined, true).container,
+		).toBeEmptyDOMElement();
+	});
 });

src/components/ai-edition/ChatUsageSummary.tsx

@@ -3,22 +3,41 @@ import { useI18n, useScopedT } from "@/contexts/I18nContext";
 import type { AgentTurnUsage } from "@/native/contracts";
 
 /** Provider-reported usage for this turn, separate from the context-window budget. */
-export function ChatUsageSummary({ usage }: { usage?: AgentTurnUsage }) {
+export function ChatUsageSummary({
+	usage,
+	durationMs,
+	running = false,
+}: {
+	usage?: AgentTurnUsage;
+	durationMs?: number;
+	running?: boolean;
+}) {
 	const { locale } = useI18n();
 	const t = useScopedT("editor");
-	if (!usage) return null;
+	if (!usage || (running && usage.status === "unavailable")) return null;
 	const format = (value: number) => new Intl.NumberFormat(locale).format(value);
+	const tokens =
+		usage.totalTokens >= 1000
+			? `${new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(usage.totalTokens / 1000)}k`
+			: format(usage.totalTokens);
+	const summaryTokens = running ? `≥${tokens}` : tokens;
 	const summary =
 		usage.status === "unavailable"
 			? t("chat.usageUnavailable")
-			: usage.status === "partial"
-				? t("chat.usagePartial", { tokens: format(usage.totalTokens) })
-				: t("chat.usageComplete", {
-						tokens: format(usage.totalTokens),
-						calls: format(usage.modelCallCount),
-					});
+			: !running && usage.status === "partial"
+				? t("chat.usagePartial", { tokens: summaryTokens })
+				: t("chat.usageComplete", { tokens: summaryTokens });
+	const duration =
+		!running && durationMs !== undefined
+			? ` · ${new Intl.NumberFormat(locale, {
+					style: "unit",
+					unit: "second",
+					unitDisplay: "narrow",
+					maximumFractionDigits: 0,
+				}).format(Math.round(durationMs / 1000))}`
+			: "";
 	const details = [
-		summary,
+		`${summary}${duration}`,
 		t("chat.usageCoverage", {
 			counted: format(usage.countedCallCount),
 			calls: format(usage.modelCallCount),
@@ -50,6 +69,7 @@ export function ChatUsageSummary({ usage }: { usage?: AgentTurnUsage }) {
 				}}
 			>
 				{summary}
+				{duration}
 			</span>
 		</Tooltip>
 	);