web: professional UI overhaul — ink/slate design system, archive+active sections, skeletons, error boundary, conn banner, usage chip, message copy, spawn progress steps; 162 tests ≥95% coverage

web/src/derive.ts

@@ -46,6 +46,7 @@ export interface ChatDerivation {
 	messages: ChatMessage[];
 	tools: Map<string, ToolState>;
 	busy: boolean;
+	usage: { inputTokens: number; outputTokens: number; totalCost: number };
 }
 
 // The plugin mirrors pi extension events verbatim: tool args arrive as a raw
@@ -66,6 +67,7 @@ export function deriveChat(events: EventFrame[]): ChatDerivation {
 	const tools = new Map<string, ToolState>();
 	let stream: { id: string; text: string } | null = null;
 	let busy = false;
+	const usage = { inputTokens: 0, outputTokens: 0, totalCost: 0 };
 
 	for (const e of events) {
 		switch (e.type) {
@@ -95,6 +97,15 @@ export function deriveChat(events: EventFrame[]): ChatDerivation {
 			case "agent_start":
 				busy = true;
 				break;
+			case "agent_end": {
+				const u = e.usage;
+				if (u !== undefined) {
+					usage.inputTokens += u.inputTokens ?? 0;
+					usage.outputTokens += u.outputTokens ?? 0;
+					usage.totalCost += u.totalCost ?? 0;
+				}
+				break;
+			}
 			case "agent_settled":
 				busy = false;
 				break;
@@ -138,7 +149,7 @@ export function deriveChat(events: EventFrame[]): ChatDerivation {
 		});
 	}
 
-	return { messages, tools, busy: busy || stream !== null };
+	return { messages, tools, busy: busy || stream !== null, usage };
 }
 
 // ---------- todo / subagent derivation (client-side, per PROTOCOL.md) ----------