perf: batch streaming updates to rAF

Accumulate tokens and flush history once per animation frame instead of on every socket event.

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