Optimize agent/editor UI updates and simplify runnable initialization

Author: vipmax

anycode-base/src/code.ts

@@ -155,9 +155,9 @@ export class Code {
             let q = this.getQuery();
             if (q) this.query = lang.query(q);
             if (this.query) await this.initInjections();
-            let tq = this.getRunnablesQuery();
-            if (tq) this.runnablesQuery = lang.query(tq);
-            if (this.runnablesQuery || this.isExecutable()) this.updateRunnables();
+            // let tq = this.getRunnablesQuery();
+            // if (tq) this.runnablesQuery = lang.query(tq);
+            // if (this.runnablesQuery || this.isExecutable()) this.updateRunnables();
         }
     }
 

anycode/App.tsx

@@ -143,23 +143,23 @@ const App: React.FC = () => {
         search.startSearch(pattern);
     };
 
-    const resolveEditorPaneId = useCallback(() => {
+    const resolveEditorPaneId = useEvent(() => {
         return layoutActionsRef.current?.ensureEditorPanel(editors.activeEditorPaneId);
-    }, [editors]);
+    });
 
-    const handleOpenFile = useCallback((
+    const handleOpenFile = useEvent((
         path: string, line?: number, column?: number, mode?: DiffMode,
     ) => {
         const paneId = resolveEditorPaneId();
         if (!paneId) return;
         editors.openFile(path, line, column, paneId, mode);
-    }, [editors, resolveEditorPaneId]);
+    });
 
-    const handleSelectFile = useCallback((fileId: string) => {
+    const handleSelectFile = useEvent((fileId: string) => {
         const paneId = resolveEditorPaneId();
         if (!paneId) return;
         editors.setActiveFileId(fileId, paneId);
-    }, [editors, resolveEditorPaneId]);
+    });
 
     const handleSearchResultClick = (filePath: string, match: SearchMatch) => {
         handleOpenFile(filePath, match.line, match.column);
@@ -186,7 +186,10 @@ const App: React.FC = () => {
     }, [editors]);
 
     const handleCycleEditorDiffMode = useCallback((panelKey: string) => {
-        editors.cycleEditorDiffMode(panelKey);
+        const changed = editors.cycleEditorDiffMode(panelKey);
+        if (changed) {
+            editors.focusEditorInPane(panelKey);
+        }
     }, [editors]);
 
     const sessionsArray = useMemo(() => Array.from(agents.acpSessions.values()), [agents.acpSessions]);
@@ -415,7 +418,7 @@ const App: React.FC = () => {
         }
     };
 
-    const handlePanelAdded = useCallback((panelId: PanelId, panelKey: string) => {
+    const handlePanelAdded = useEvent((panelId: PanelId, panelKey: string) => {
         layout.handlePanelAdded(panelId, panelKey);
 
         if (panelId === 'changes') {
@@ -435,9 +438,9 @@ const App: React.FC = () => {
         if (panelId === 'terminal') {
             terminalPanes.registerPane(panelKey);
         }
-    }, [agentPanes, editors, git.fetchGitStatus, git.fetchBranches, layout, terminalPanes]);
+    });
 
-    const handlePanelRemoved = useCallback((panelId: PanelId, panelKey: string) => {
+    const handlePanelRemoved = useEvent((panelId: PanelId, panelKey: string) => {
         layout.handlePanelRemoved(panelId, panelKey);
 
         if (panelId === 'editor') {
@@ -451,9 +454,9 @@ const App: React.FC = () => {
         if (panelId === 'terminal') {
             terminalPanes.unregisterPane(panelKey);
         }
-    }, [agentPanes, editors, layout, terminalPanes]);
+    });
 
-    const handlePanelActivated = useCallback((panelId: PanelId, panelKey: string) => {
+    const handlePanelActivated = useEvent((panelId: PanelId, panelKey: string) => {
         layout.handlePanelActivated(panelId, panelKey);
 
         if (panelId === 'editor') {
@@ -478,7 +481,7 @@ const App: React.FC = () => {
         if (panelId === 'terminal') {
             terminalPanes.setActivePaneId(panelKey);
         }
-    }, [agentPanes, editors, layout, terminalPanes]);
+    });
 
     return (
         <div className="app-container toolbar-header-compact">

anycode/components/agent/AcpMessage.tsx

@@ -1077,7 +1077,7 @@ const PermissionRequestMessage: React.FC<{
   );
 };
 
-export const AcpMessage: React.FC<AcpMessageProps> = ({
+const AcpMessageComponent: React.FC<AcpMessageProps> = ({
   message,
   toolResult,
   toolUpdates,
@@ -1165,3 +1165,5 @@ export const AcpMessage: React.FC<AcpMessageProps> = ({
       return null;
   }
 };
+
+export const AcpMessage = React.memo(AcpMessageComponent);

anycode/components/agent/AcpSession.tsx

@@ -13,6 +13,7 @@ import { AcpIcons } from './AcpIcons';
 import { loadItem, saveItem } from '../../storage';
 
 const ACP_INPUT_DRAFTS_STORAGE_KEY = 'acpInputDrafts';
+const EMPTY_ARRAY: any[] = [];
 
 const useAutoScroll = (messages: AcpMessage[], isProcessing: boolean) => {
   const contentRef = useRef<HTMLDivElement>(null);
@@ -201,7 +202,7 @@ interface AcpSessionProps {
   onOpenFileDiff?: (path: string, line?: number, column?: number) => void;
 }
 
-export const AcpSession: React.FC<AcpSessionProps> = ({
+const AcpSessionComponent: React.FC<AcpSessionProps> = ({
   agentId,
   title,
   isConnected,
@@ -298,7 +299,7 @@ export const AcpSession: React.FC<AcpSessionProps> = ({
           <div className="acp-messages-inner" ref={innerRef}>
             <AcpMessages
               messages={messages}
-              toolCalls={[]}
+              toolCalls={EMPTY_ARRAY}
               expandedToolCalls={expandedToolCalls}
               expandedToolResults={expandedToolResults}
               expandedThoughts={expandedThoughts}
@@ -344,3 +345,5 @@ export const AcpSession: React.FC<AcpSessionProps> = ({
     </div>
   );
 };
+
+export const AcpSession = React.memo(AcpSessionComponent);

anycode/features/agents/AgentPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { AcpSettings } from '../../components/agent/AcpSettings';
 import { AcpSession } from '../../components/agent/AcpSession';
 import { AcpEmptyPane } from '../../components/agent/AcpEmptyPane';
@@ -42,7 +42,7 @@ type AgentPanelProps = {
     onOpenFileDiff: (path: string, line?: number, column?: number) => void;
 };
 
-export const AgentPanel = ({
+const AgentPanelComponent = ({
     panelKey,
     focusRequestToken,
     isConnected,
@@ -145,3 +145,5 @@ export const AgentPanel = ({
         </div>
     );
 };
+
+export const AgentPanel = React.memo(AgentPanelComponent);

anycode/hooks/useEditors.ts

@@ -417,17 +417,10 @@ export const useEditors = ({ wsRef, isConnected, onFileClosed }: UseEditorsParam
 
     const focusEditorInPane = useCallback((paneId: string) => {
         setActiveEditorPaneId(paneId);
-
         const fileId = getActiveFileIdForPane(paneId);
-        if (!fileId) {
-            return;
-        }
-
+        if (!fileId) return;
         const editor = editorRefs.current.get(fileId);
-        if (!editor) {
-            return;
-        }
-
+        if (!editor) return;
         const cursor = editor.getCursor();
         editor.requestFocus(cursor.line, cursor.column);
     }, [getActiveFileIdForPane]);