Merge pull request #70 from phantom5099/desktop-lag

Desktop Performance Optimization

Author: phantom5099

packages/codingcode/test/client/http/sessions.test.ts

@@ -4,9 +4,9 @@ import { createRequestHelpers } from '../../../src/client/http/request.js';
 
 describe('createHttpSessionClient.setSessionPermissionMode', () => {
   it('calls PUT /api/sessions/:id/permission-mode', async () => {
-    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response(JSON.stringify({}), { status: 200 })
-    );
+    const fetchSpy = vi
+      .spyOn(globalThis, 'fetch')
+      .mockResolvedValue(new Response(JSON.stringify({}), { status: 200 }));
 
     const request = createRequestHelpers('http://localhost:8080');
     const client = createHttpSessionClient(request);

packages/desktop/electron/main.ts

@@ -3,7 +3,7 @@ import { join } from 'path';
 import { createMenu } from './menu';
 import { registerFsHandlers } from './ipc/fs.handler';
 import { registerGitHandlers } from './ipc/git.handler';
-import { startPolling } from './core/git.service';
+import { startPolling, stopPolling } from './core/git.service';
 import { initBackend } from './core/backend';
 import { startHttpServer } from './core/http-server';
 
@@ -15,6 +15,7 @@ process.on('unhandledRejection', (reason) => {
 });
 
 let mainWindow: BrowserWindow | null = null;
+let currentWorkspaceCwd: string = process.cwd();
 
 function createWindow(apiPort: number): BrowserWindow {
   const win = new BrowserWindow({
@@ -54,6 +55,13 @@ function createWindow(apiPort: number): BrowserWindow {
     return { action: 'deny' };
   });
 
+  win.on('closed', () => {
+    stopPolling();
+    if (mainWindow === win) {
+      mainWindow = null;
+    }
+  });
+
   return win;
 }
 
@@ -73,11 +81,16 @@ app.whenReady().then(async () => {
     return result.canceled ? null : (result.filePaths[0] ?? null);
   });
 
+  // Renderer notifies main process of workspace cwd changes
+  ipcMain.on('workspace:setCwd', (_e, cwd: string) => {
+    currentWorkspaceCwd = cwd;
+  });
+
   registerFsHandlers();
   registerGitHandlers();
 
-  // Git polling uses the current project cwd from platform utility
-  startPolling(mainWindow, () => process.cwd());
+  // Git polling uses the workspace cwd from renderer
+  startPolling(mainWindow, () => currentWorkspaceCwd);
 
   app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) {
@@ -87,6 +100,7 @@ app.whenReady().then(async () => {
 });
 
 app.on('window-all-closed', () => {
+  stopPolling();
   if (process.platform !== 'darwin') {
     app.quit();
   }

packages/desktop/electron/preload.ts

@@ -28,6 +28,9 @@ const api = {
   // Folder dialog
   openFolderDialog: (): Promise<string | null> => ipcRenderer.invoke('project:openFolderDialog'),
 
+  // Workspace cwd sync (renderer -> main)
+  setWorkspaceCwd: (cwd: string): void => ipcRenderer.send('workspace:setCwd', cwd),
+
   // Git (explicit cwd)
   gitStatus: (cwd: string): Promise<unknown> => ipcRenderer.invoke('git:status', cwd),
   gitBranches: (cwd: string): Promise<string[]> => ipcRenderer.invoke('git:branches', cwd),

packages/desktop/src/App.tsx

@@ -8,14 +8,24 @@ import ErrorBoundary from './shared/ErrorBoundary';
 export default function App() {
   const mode = useGlobalStore((s) => s.ui.mode);
   const setMode = useGlobalStore((s) => s.setMode);
+  const rootPath = useGlobalStore((s) => s.workspace.rootPath);
+
+  // Sync workspace cwd to main process for git polling
+  useEffect(() => {
+    if (rootPath) {
+      window.electronAPI?.setWorkspaceCwd?.(rootPath);
+    }
+  }, [rootPath]);
 
   useEffect(() => {
     const off = window.electronAPI?.onFsChange?.(() => {});
-    window.addEventListener('menu:switchMode', ((e: CustomEvent<'agent' | 'ide'>) => {
+    const handler = ((e: CustomEvent<'agent' | 'ide'>) => {
       setMode(e.detail);
-    }) as EventListener);
+    }) as EventListener;
+    window.addEventListener('menu:switchMode', handler);
     return () => {
       off?.();
+      window.removeEventListener('menu:switchMode', handler);
     };
   }, [setMode]);
 

packages/desktop/src/agent/AgentSidebar.tsx

@@ -1,7 +1,6 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useGlobalStore } from '../stores/global.store';
-import { API_BASE, api } from '../lib/api';
-import type { Thread } from '@shared/types';
+import { api } from '../lib/api';
 
 function normalizeCwd(p: string): string {
   return p.replace(/\\/g, '/').replace(/^([A-Z]):/, (_, l: string) => `${l.toLowerCase()}:`);
@@ -17,25 +16,24 @@ function relativeTime(ts: number): string {
   return `${Math.floor(days / 7)}周`;
 }
 
-function getProjectThreads(threads: Record<string, Thread>, rootPath: string): Thread[] {
-  const normalizedRoot = normalizeCwd(rootPath);
-  return Object.values(threads)
-    .filter((t) => {
-      const tcwd = normalizeCwd(t.cwd);
-      return tcwd.startsWith(normalizedRoot);
-    })
-    .sort((a, b) => b.updatedAt - a.updatedAt);
-}
-
 export default function AgentSidebar() {
   const sidebarCollapsed = useGlobalStore((s) => s.ui.sidebarCollapsed);
-  const threads = useGlobalStore((s) => s.agent.threads);
   const currentThreadId = useGlobalStore((s) => s.agent.currentThreadId);
+  const rootPath = useGlobalStore((s) => s.workspace.rootPath);
   const workspace = useGlobalStore((s) => s.workspace);
   const setCurrentThread = useGlobalStore((s) => s.setCurrentThread);
   const toggleSidebar = useGlobalStore((s) => s.toggleSidebar);
 
-  const projectThreads = getProjectThreads(threads, workspace.rootPath);
+  // 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(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);
 
   const handleDelete = async (threadId: string) => {
@@ -127,7 +125,7 @@ export default function AgentSidebar() {
             会话
           </span>
         </div>
-        {projectThreads.slice(0, 15).map((t) => (
+        {threadList.slice(0, 15).map((t) => (
           <button
             type="button"
             key={t.id}
@@ -175,15 +173,15 @@ export default function AgentSidebar() {
             )}
           </button>
         ))}
-        {projectThreads.length > 15 && (
+        {threadList.length > 15 && (
           <button
             type="button"
             className="w-full text-left px-4 py-1.5 text-[12px] text-[#3a3a3a] hover:text-[#555] transition-colors"
           >
-            +{projectThreads.length - 15} 条更多
+            +{threadList.length - 15} 条更多
           </button>
         )}
-        {projectThreads.length === 0 && (
+        {threadList.length === 0 && (
           <div className="px-3 py-4 text-[13px] text-[#3a3a3a]">暂无对话</div>
         )}
       </div>

packages/desktop/src/agent/AgentWorkspace.tsx

@@ -209,11 +209,7 @@ function InputBox({
   const [text, setText] = useState('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const currentThreadId = useGlobalStore((s) => s.agent.currentThreadId);
-  const isStreaming = useGlobalStore((s) => {
-    const id = s.agent.currentThreadId;
-    const turns = id ? s.agent.threads[id]?.turns : undefined;
-    return turns ? turns.some((t) => t.status === 'running') : false;
-  });
+  const isStreaming = useGlobalStore((s) => s.agent.hasRunningTurn);
   const approvalPolicy = useGlobalStore((s) => s.agent.approvalPolicy);
   const workspace = useGlobalStore((s) => s.workspace);
   const setApprovalPolicy = useGlobalStore((s) => s.setApprovalPolicy);

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;