From e721d8e8e1497cf373f31542a3ef08b4bfbc46ea Mon Sep 17 00:00:00 2001
From: HUQIANTAO <HUQIANTAO@users.noreply.github.com>
Date: Wed, 3 Jun 2026 22:24:59 +0800
Subject: [PATCH] perf(desktop): use useDeferredValue for Transcript items to
 keep input responsive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

During streaming, every text/reasoning delta triggers a state update that
re-renders the entire Transcript. If the user is typing in the Composer at
the same time, the transcript re-render can block the keystroke from being
processed — causing visible input lag.

Wrap state.items in useDeferredValue before passing to Transcript. This
tells React to treat transcript updates as low-priority: when a keystroke
and a transcript update collide, the keystroke is processed immediately
and the transcript re-render is deferred to idle time.
---
 desktop/frontend/src/App.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/desktop/frontend/src/App.tsx b/desktop/frontend/src/App.tsx
index 35e193000..9c4a45d0a 100644
--- a/desktop/frontend/src/App.tsx
+++ b/desktop/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import type { CSSProperties, KeyboardEvent, PointerEvent as ReactPointerEvent } from "react";
 import {
   SquarePen,
@@ -257,6 +257,12 @@ export default function App() {
     todos.length > 0 &&
     todos.some((t) => t.status !== "completed");
 
+  // useDeferredValue lets React prioritise Composer input (high-priority) over
+  // Transcript re-renders (low-priority) during streaming. When a keystroke
+  // and a transcript update collide, the keystroke is processed immediately
+  // and the transcript re-render is deferred to idle time.
+  const deferredItems = useDeferredValue(state.items);
+
   useEffect(() => {
     if (!pendingPlanRevision || state.running) return;
     const text = pendingPlanRevision;
@@ -927,7 +933,7 @@ export default function App() {
                 <span className="loading-screen__text">{t("common.loading")}</span>
               </div>
             ) : (
-              <Transcript items={state.items} live={state.live} footerHeight={footerHeight} onPrompt={send} onRewind={rewind} />
+              <Transcript items={deferredItems} live={state.live} footerHeight={footerHeight} onPrompt={send} onRewind={rewind} />
             )}
           </main>