perf(ui): coalesce streaming events into one React commit per frame

Pi-agent-core fires one message_update per token and one
tool_execution_update per chunk of streaming tool stdout. A fast
model + long bash output produces 100+ events/sec, each running the
full reducer + React tree diff + Yoga layout. That's the source of
the scroll/render jankiness users complained about — not Ink's
renderer itself.

Throttle to a 16ms (60fps) cap. Each frame, the latest pending
message_update and the latest pending tool_execution_update per tool
id are flushed; intermediates are dropped (they're idempotent state
replacements). Non-coalesceable events (message_start/end,
tool_execution_start/end, turn_*, agent_*) flush the queue first so
event ordering relative to the reducer stays correct.

Author: halfaipg

src/ui/App.tsx

@@ -1,6 +1,7 @@
 import { spawn } from "node:child_process";
 import { Box, Text, useApp } from "ink";
-import { useEffect, useMemo, useReducer, useState } from "react";
+import { useEffect, useMemo, useReducer, useRef, useState } from "react";
+import type { AgentEvent } from "@earendil-works/pi-agent-core";
 import { type AgentBundle, createAgent } from "../agent/agent.js";
 import { ConfigError } from "../agent/config.js";
 import { initialState, reducer } from "../agent/events.js";
@@ -123,11 +124,72 @@ function ChatApp({ bundle, onExit }: ChatAppProps) {
 		return out;
 	}, [state.messages, persistedHistory]);
 
+	// Coalesce high-frequency streaming events (per-token assistant updates
+	// and per-chunk tool stdout) to one React commit per frame instead of
+	// per event. Pi-agent-core emits one message_update per token, and a
+	// fast model + long tool output can fire 100+ Hz — each dispatch runs
+	// the full reducer + React tree diff + Yoga layout for everything on
+	// screen. Throttling here is the single biggest cause of perceived
+	// scroll/render jankiness; everything else (Static for finalized
+	// messages, memoized children) is icing.
+	//
+	// Keyed coalescing: message_update has one slot, tool_execution_update
+	// has one slot per tool id. Latest event wins. Non-coalesceable events
+	// (message_start/end, tool_execution_start/end, turn_*, agent_*) flush
+	// any pending updates first so ordering stays correct.
+	const pendingRef = useRef<Map<string, AgentEvent>>(new Map());
+	const flushTimerRef = useRef<NodeJS.Timeout | null>(null);
+
 	useEffect(() => {
+		const STREAM_FRAME_MS = 16; // ~60fps cap
+
+		const flush = () => {
+			flushTimerRef.current = null;
+			if (pendingRef.current.size === 0) return;
+			const events = [...pendingRef.current.values()];
+			pendingRef.current.clear();
+			for (const event of events) {
+				dispatch({ type: "agent-event", event });
+			}
+		};
+
+		const scheduleFlush = () => {
+			if (flushTimerRef.current != null) return;
+			flushTimerRef.current = setTimeout(flush, STREAM_FRAME_MS);
+		};
+
 		const unsubscribe = bundle.subscribe((event) => {
+			if (event.type === "message_update") {
+				pendingRef.current.set("msg", event);
+				scheduleFlush();
+				return;
+			}
+			if (event.type === "tool_execution_update") {
+				pendingRef.current.set(`tool:${event.toolCallId}`, event);
+				scheduleFlush();
+				return;
+			}
+			// Any other event flushes the queue before dispatching so the
+			// reducer sees pending streaming updates before the terminal
+			// event (message_end, tool_execution_end, etc.).
+			if (pendingRef.current.size > 0) {
+				if (flushTimerRef.current != null) {
+					clearTimeout(flushTimerRef.current);
+					flushTimerRef.current = null;
+				}
+				flush();
+			}
 			dispatch({ type: "agent-event", event });
 		});
-		return unsubscribe;
+
+		return () => {
+			unsubscribe();
+			if (flushTimerRef.current != null) {
+				clearTimeout(flushTimerRef.current);
+				flushTimerRef.current = null;
+			}
+			pendingRef.current.clear();
+		};
 	}, [bundle]);
 
 	useEffect(() => {