perf: batch streaming history updates to animation frames

Decouple data ingestion from rendering during streaming. Socket events
still accumulate content on every token (cheap mutation), but the
Svelte reactivity trigger (history.messages assignment) now fires at
most once per requestAnimationFrame (~60fps).

This prevents main thread saturation on high-throughput models (400+
tok/s) and adapts automatically to device capability. Non-streaming
events (done, error, status) flush immediately.

Author: Algorithm5838

src/lib/components/chat/Chat.svelte

@@ -381,6 +381,40 @@
 		saveChatHandler(_chatId, history);
 	};
 
+	// Batch reactive history updates to animation frames during streaming.
+	// Data is accumulated on every socket event (cheap mutation), but the
+	// Svelte reactivity trigger fires at most once per frame.
+	let _pendingFlushFrame = null;
+	let _pendingFlushIds = new Set();
+
+	const scheduleHistoryFlush = (messageId) => {
+		_pendingFlushIds.add(messageId);
+		if (!_pendingFlushFrame) {
+			_pendingFlushFrame = requestAnimationFrame(() => {
+				for (const id of _pendingFlushIds) {
+					history.messages[id] = history.messages[id];
+				}
+				_pendingFlushIds.clear();
+				_pendingFlushFrame = null;
+
+				if (autoScroll) {
+					scrollToBottom();
+				}
+			});
+		}
+	};
+
+	const flushHistoryNow = () => {
+		if (_pendingFlushFrame) {
+			cancelAnimationFrame(_pendingFlushFrame);
+			_pendingFlushFrame = null;
+		}
+		for (const id of _pendingFlushIds) {
+			history.messages[id] = history.messages[id];
+		}
+		_pendingFlushIds.clear();
+	};
+
 	const chatEventHandler = async (event, cb) => {
 		console.log(event);
 
@@ -508,7 +542,7 @@
 					console.log('Unknown message type', data);
 				}
 
-				history.messages[event.message_id] = message;
+				scheduleHistoryFlush(event.message_id);
 			}
 		}
 	};
@@ -1546,8 +1580,6 @@
 			message.usage = usage;
 		}
 
-		history.messages[message.id] = message;
-
 		if (done) {
 			message.done = true;
 
@@ -1582,6 +1614,7 @@
 				})
 			);
 
+			flushHistoryNow();
 			history.messages[message.id] = message;
 
 			await tick();