refactor: optimize rendering performance in multiple places

Author: phantom5099

packages/desktop/src/agent/AgentSidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useGlobalStore } from '../stores/global.store';
 import { api } from '../lib/api';
 
@@ -24,14 +24,15 @@ export default function AgentSidebar() {
   const setCurrentThread = useGlobalStore((s) => s.setCurrentThread);
   const toggleSidebar = useGlobalStore((s) => s.toggleSidebar);
 
-  // Fine-grained selector: only extract thread list metadata, not full thread objects
-  const threadList = useGlobalStore((s) => {
+  // Subscribe to raw threads, derive list with useMemo for stable reference
+  const rawThreads = useGlobalStore((s) => s.agent.threads);
+  const threadList = useMemo(() => {
     const normalizedRoot = normalizeCwd(rootPath);
-    return Object.values(s.agent.threads)
+    return Object.values(rawThreads)
       .filter((t) => normalizeCwd(t.cwd).startsWith(normalizedRoot))
       .map((t) => ({ id: t.id, title: t.title, cwd: t.cwd, updatedAt: t.updatedAt }))
       .sort((a, b) => b.updatedAt - a.updatedAt);
-  });
+  }, [rawThreads, rootPath]);
 
   const [hoveredThreadId, setHoveredThreadId] = useState<string | null>(null);
 

packages/desktop/src/agent/ApprovalPanel.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import type { Item } from '@shared/types';
 import { useGlobalStore } from '../stores/global.store';
-import { useAgent } from '../hooks/useAgent';
+import { useAgentApproval } from '../hooks/useAgent';
 import ToolCallCard from '../shared/ToolCallCard';
 
 interface ApprovalPanelProps {
@@ -10,15 +10,30 @@ interface ApprovalPanelProps {
 
 export default function ApprovalPanel({ threadId }: ApprovalPanelProps) {
   const [collapsed, setCollapsed] = useState(false);
-  const thread = useGlobalStore((s) => s.agent.threads[threadId]);
-  const { approveTool, rejectTool } = useAgent();
+  const { approveTool, rejectTool } = useAgentApproval();
 
-  const pendingItems =
-    thread?.turns.flatMap((turn) =>
+  // Stable string key: only changes when pending item IDs change, not on every content update
+  const pendingKey = useGlobalStore((s) => {
+    const thread = s.agent.threads[threadId];
+    if (!thread) return '';
+    return thread.turns
+      .flatMap((t) => t.items)
+      .filter((i) => i.type === 'tool_call' && i.status === 'pending')
+      .map((i) => i.id)
+      .join(',');
+  });
+
+  // Only compute pending items when the key changes
+  const pendingItems = useMemo(() => {
+    if (!pendingKey) return [];
+    const thread = useGlobalStore.getState().agent.threads[threadId];
+    if (!thread) return [];
+    return thread.turns.flatMap((turn) =>
       turn.items.filter(
         (i): i is Item & { type: 'tool_call' } => i.type === 'tool_call' && i.status === 'pending'
       )
-    ) ?? [];
+    );
+  }, [pendingKey, threadId]);
 
   if (pendingItems.length === 0) return null;
 

packages/desktop/src/agent/MessageStream.tsx

@@ -5,14 +5,16 @@ import MessageItem from '../shared/MessageItem';
 import UnifiedDiffView from '../shared/UnifiedDiffView';
 import type { Item } from '@shared/types';
 import type { CheckpointDiff } from '../lib/core-api';
-import { useAgent } from '../hooks/useAgent';
+import { useAgentApproval, useAgentRollback } from '../hooks/useAgent';
 
 interface MessageStreamProps {
   threadId: string;
 }
 
 // ---- Top-level TurnDiffPanel (avoids unmount/remount on parent re-render) ----
 
+const EMPTY_MAPPING: Record<number, string> = {};
+
 interface TurnDiffPanelProps {
   uiTurnId: string;
   isInterrupted?: boolean;
@@ -205,11 +207,14 @@ function TurnDiffPanel({
 // ---- Main component ----
 
 export default function MessageStream({ threadId }: MessageStreamProps) {
-  const thread = useGlobalStore((s) => s.agent.threads[threadId]);
+  // Fine-grained subscriptions: only subscribe to what we actually use
+  const turns = useGlobalStore((s) => s.agent.threads[threadId]?.turns ?? []);
   const setCurrentThread = useGlobalStore((s) => s.setCurrentThread);
   const {
     approveTool,
     rejectTool,
+  } = useAgentApproval();
+  const {
     loadCheckpointDiff,
     revertFile,
     revertAgentFiles,
@@ -221,68 +226,81 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
     undoCodeRollback,
     forkThread,
     revertedFilesByTurnId,
-  } = useAgent();
+  } = useAgentRollback();
   const virtuosoRef = useRef<VirtuosoHandle>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const wasAtBottomRef = useRef(true);
 
-  // Fine-grained selectors: only subscribe to current thread's data
-  const checkpointDiffs = useGlobalStore((s) => {
+  // Subscribe to raw store data (stable references), derive with useMemo below
+  const rawCheckpointDiffByTurnId = useGlobalStore((s) => s.rollback.checkpointDiffByTurnId);
+  const rawTurnCheckpointMapping = useGlobalStore((s) => s.rollback.turnCheckpointMapping);
+  const markScopeRestored = useGlobalStore((s) => s.markScopeRestored);
+  const markFileRestored = useGlobalStore((s) => s.markFileRestored);
+  const setPendingInput = useGlobalStore((s) => s.setPendingInput);
+
+  // Derive thread-scoped data with useMemo for stable references
+  const checkpointDiffs = useMemo(() => {
     const prefix = `${threadId}:`;
     const result: Record<string, CheckpointDiff> = {};
-    for (const [k, v] of Object.entries(s.rollback.checkpointDiffByTurnId)) {
+    for (const [k, v] of Object.entries(rawCheckpointDiffByTurnId)) {
       if (k.startsWith(prefix)) result[k] = v;
     }
     return result;
-  });
-  const turnCheckpointMapping = useGlobalStore(
-    (s) => s.rollback.turnCheckpointMapping[threadId] ?? {}
-  );
-  const markScopeRestored = useGlobalStore((s) => s.markScopeRestored);
-  const markFileRestored = useGlobalStore((s) => s.markFileRestored);
-  const setPendingInput = useGlobalStore((s) => s.setPendingInput);
+  }, [threadId, rawCheckpointDiffByTurnId]);
+
+  const turnCheckpointMapping = rawTurnCheckpointMapping[threadId] ?? EMPTY_MAPPING;
 
   // Rollback modal state
   const [showRollbackPanel, setShowRollbackPanel] = useState<{
     turnId: string;
     preview: any;
   } | null>(null);
 
+  // ---- Structure signature: only changes when turns structure changes (not content) ----
+  const turnsStructureKey = useMemo(
+    () =>
+      turns
+        .map((t) => `${t.id}:${t.status}:${t.items.length}:${t.items.map((i) => `${i.type}:${i.id}`).join(',')}`)
+        .join('|'),
+    [turns]
+  );
+
   // ---- Memoized rendering data ----
+  // Depends on turnsStructureKey instead of thread, so content updates don't trigger rebuild
 
-  const { renderEntries, callIdToToolName } = useMemo(() => {
+  const { renderEntries, callIdToToolName, entryCountByTurnId, turnById } = useMemo(() => {
     const entries: Array<{
       item: Item;
       turnId: string;
       toolResult?: Item & { type: 'tool_result' };
     }> = [];
     const toolResultByCallId: Record<string, Item & { type: 'tool_result' }> = {};
     const nameMap: Record<string, string> = {};
+    const countMap = new Map<string, number>();
+    const turnMap = new Map<string, (typeof turns)[number]>();
 
-    if (thread) {
-      for (const turn of thread.turns) {
-        for (const item of turn.items) {
-          if (item.type === 'tool_result') {
-            toolResultByCallId[item.callId] = item as any;
-          } else if (item.type === 'tool_call') {
-            nameMap[item.id] = item.name;
-          }
+    for (const turn of turns) {
+      turnMap.set(turn.id, turn);
+      for (const item of turn.items) {
+        if (item.type === 'tool_result') {
+          toolResultByCallId[item.callId] = item as any;
+        } else if (item.type === 'tool_call') {
+          nameMap[item.id] = item.name;
         }
       }
-      for (const turn of thread.turns) {
-        for (const item of turn.items) {
-          if (item.type === 'tool_result') continue;
-          if (item.type === 'tool_call') {
-            entries.push({ item, turnId: turn.id, toolResult: toolResultByCallId[item.id] });
-          } else {
-            entries.push({ item, turnId: turn.id });
-          }
+    }
+    for (const turn of turns) {
+      for (const item of turn.items) {
+        if (item.type === 'tool_result') continue;
+        if (item.type === 'tool_call') {
+          entries.push({ item, turnId: turn.id, toolResult: toolResultByCallId[item.id] });
+        } else {
+          entries.push({ item, turnId: turn.id });
         }
+        countMap.set(turn.id, (countMap.get(turn.id) ?? 0) + 1);
       }
     }
 
-    return { renderEntries: entries, callIdToToolName: nameMap };
-  }, [thread]);
+    return { renderEntries: entries, callIdToToolName: nameMap, entryCountByTurnId: countMap, turnById: turnMap };
+  }, [turnsStructureKey]);
 
   const { turnEndIndices, turnRollbackCallbacks } = useMemo(() => {
     const endIndices = new Set<number>();
@@ -293,10 +311,9 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
         onForkFromHere?: () => void;
       }
     >();
-    const turns = thread?.turns ?? [];
     let idx = 0;
     for (const turn of turns) {
-      const turnEntryCount = renderEntries.filter((e) => e.turnId === turn.id).length;
+      const turnEntryCount = entryCountByTurnId.get(turn.id) ?? 0;
       idx += turnEntryCount - 1;
       if (turn.status === 'completed' || turn.status === 'error') {
         endIndices.add(idx);
@@ -328,32 +345,16 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
       idx++;
     }
     return { turnEndIndices: endIndices, turnRollbackCallbacks: rollbackCbs };
-  }, [thread, renderEntries, threadId, previewRollback, forkThread, setCurrentThread, setPendingInput]);
+  }, [turns, entryCountByTurnId, threadId, previewRollback, forkThread, setCurrentThread, setPendingInput]);
 
   const totalCount = renderEntries.length;
-  const isLargeList = totalCount > 100;
-  const turns = thread?.turns ?? [];
 
   // Memoized turnStatusKey for auto-load diff effect
   const turnStatusKey = useMemo(
     () => turns.map((t) => `${t.id}:${t.status}`).join(','),
     [turns]
   );
 
-  const handleScroll = useCallback(() => {
-    const el = scrollContainerRef.current;
-    if (!el) return;
-    wasAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
-  }, []);
-
-  useEffect(() => {
-    if (totalCount === 0 || isLargeList) return;
-    if (!wasAtBottomRef.current) return;
-    const el = scrollContainerRef.current;
-    if (!el) return;
-    el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
-  }, [totalCount, isLargeList]);
-
   // Auto-load diff when a turn completes or errors
   const handleLoadDiff = useCallback(
     async (uiTurnId: string) => {
@@ -416,7 +417,7 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
       const isLastInTurn = turnEndIndices.has(index);
       const cbs = turnRollbackCallbacks.get(entry.turnId);
       const isUserMsg = entry.item.type === 'message' && entry.item.role === 'user';
-      const turn = turns.find((t) => t.id === entry.turnId);
+      const turn = turnById.get(entry.turnId);
       const isInterrupted = turn?.status === 'error';
 
       return (
@@ -454,7 +455,7 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
       renderEntries,
       turnEndIndices,
       turnRollbackCallbacks,
-      turns,
+      turnById,
       threadId,
       approveTool,
       rejectTool,
@@ -469,7 +470,7 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
 
   // ---- Empty state ----
 
-  if (!thread || renderEntries.length === 0) {
+  if (turns.length === 0 || renderEntries.length === 0) {
     return (
       <div className="flex-1 flex items-center justify-center text-[#444] text-[15px]">
         发送消息开始对话
@@ -521,40 +522,18 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
     </div>
   );
 
-  // ---- Virtuoso path (many items) ----
-
-  if (isLargeList) {
-    return (
-      <div className="flex-1 flex flex-col min-h-0">
-        <Virtuoso
-          ref={virtuosoRef}
-          className="flex-1 select-text"
-          totalCount={totalCount}
-          itemContent={renderItem}
-          followOutput={(isAtBottom: boolean) => (isAtBottom ? 'smooth' : false)}
-          style={{ flex: 1 }}
-        />
-        {rollbackModal}
-      </div>
-    );
-  }
-
-  // ---- Non-Virtuoso path (few items) ----
+  // ---- Unified Virtuoso path ----
 
   return (
     <div className="flex-1 flex flex-col min-h-0">
-      <div
-        ref={scrollContainerRef}
-        onScroll={handleScroll}
-        className="flex-1 overflow-y-auto select-text"
-      >
-        <div className="pt-8 pb-4 max-w-[820px] mx-auto">
-          {renderEntries.map((entry, i) => {
-            const key = entry.item.id + (entry.toolResult ? '-' + entry.toolResult.id : '');
-            return <div key={key}>{renderItem(i)}</div>;
-          })}
-        </div>
-      </div>
+      <Virtuoso
+        ref={virtuosoRef}
+        className="flex-1 select-text"
+        totalCount={totalCount}
+        itemContent={renderItem}
+        followOutput={(isAtBottom: boolean) => (isAtBottom ? 'smooth' : false)}
+        style={{ flex: 1 }}
+      />
       {rollbackModal}
     </div>
   );

packages/desktop/src/agent/ProjectStrip.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useGlobalStore } from '../stores/global.store';
 import { API_BASE, api } from '../lib/api';
 import type { Project, Thread } from '@shared/types';
@@ -119,7 +119,15 @@ function SessionListPopup({
 export default function ProjectStrip() {
   const projects = useGlobalStore((s) => s.workspace.projects);
   const currentProjectId = useGlobalStore((s) => s.workspace.currentProjectId);
-  const threads = useGlobalStore((s) => s.agent.threads);
+  const rawThreads = useGlobalStore((s) => s.agent.threads);
+  const threadMetadata = useMemo(() => {
+    return Object.values(rawThreads).map((t) => ({
+      id: t.id,
+      title: t.title,
+      cwd: t.cwd,
+      updatedAt: t.updatedAt,
+    }));
+  }, [rawThreads]);
   const currentThreadId = useGlobalStore((s) => s.agent.currentThreadId);
   const sidebarCollapsed = useGlobalStore((s) => s.ui.sidebarCollapsed);
   const switchProject = useGlobalStore((s) => s.switchProject);
@@ -169,10 +177,10 @@ export default function ProjectStrip() {
 
   const getThreadsForProject = (rootPath: string): Thread[] => {
     const normalizedRoot = normalizeCwd(rootPath);
-    return Object.values(threads).filter((t) => {
+    return threadMetadata.filter((t) => {
       const tcwd = normalizeCwd(t.cwd);
       return tcwd.startsWith(normalizedRoot);
-    });
+    }) as Thread[];
   };
 
   return (