From b5abbd8e6f697d2cba1fad221e584d3c7b2481df Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Fri, 10 Apr 2026 10:52:44 +0900
Subject: [PATCH] fix: reduce CPU usage during large XML streaming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Skip Prism syntax highlighting while tool call is streaming — use plain
<pre> during streaming and only run Prism once at completion. Also throttle
scrollIntoView to once per 150ms to avoid layout thrashing.

Profiled with Playwright + CDP: for 200-cell diagrams the longest
browser task dropped from 6.7s to ~450ms and total long-task time
fell from ~10.9s to ~1.1s.
---
 components/chat-message-display.tsx | 10 ++++++++--
 components/chat/ToolCallCard.tsx    | 17 ++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
index 69d5f86..717296d 100644
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -417,6 +417,7 @@ export function ChatMessageDisplay({
 
     // Track previous message count to detect bulk loads vs streaming
     const prevMessageCountRef = useRef(0)
+    const scrollThrottleRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
     useEffect(() => {
         if (messagesEndRef.current && messages.length > 0) {
@@ -430,8 +431,13 @@ export function ChatMessageDisplay({
                 return
             }
 
-            // Single message added - smooth scroll
-            messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+            // Throttle scroll during streaming to avoid layout thrashing
+            if (!scrollThrottleRef.current) {
+                messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+                scrollThrottleRef.current = setTimeout(() => {
+                    scrollThrottleRef.current = null
+                }, 150)
+            }
         }
     }, [messages])
 
diff --git a/components/chat/ToolCallCard.tsx b/components/chat/ToolCallCard.tsx
index 392c60a..ca0a4c1 100644
--- a/components/chat/ToolCallCard.tsx
+++ b/components/chat/ToolCallCard.tsx
@@ -195,7 +195,22 @@ export function ToolCallCard({
             {input && isExpanded && (
                 <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
                     {typeof input === "object" && input.xml ? (
-                        <CodeBlock code={input.xml} language="xml" />
+                        state === "input-streaming" ||
+                        state === "input-available" ? (
+                            <pre
+                                className="text-[11px] leading-relaxed overflow-x-auto overflow-y-auto max-h-48 scrollbar-thin break-all whitespace-pre-wrap"
+                                style={{
+                                    fontFamily:
+                                        "var(--font-mono), ui-monospace, monospace",
+                                    margin: 0,
+                                    padding: 0,
+                                }}
+                            >
+                                {input.xml}
+                            </pre>
+                        ) : (
+                            <CodeBlock code={input.xml} language="xml" />
+                        )
                     ) : typeof input === "object" &&
                       input.operations &&
                       Array.isArray(input.operations) ? (