feat: ignore repeated clicks on active tabs/nodes and fix active highlight sync

Author: vipmax

anycode/App.tsx

@@ -113,26 +113,28 @@ const App: React.FC = () => {
     }, [editors.flushAllPendingChanges]);
 
     useEffect(() => {
-        if (!editors.activeFileId) {
-            return;
-        }
-
         fileTree.setActiveNode(editors.activeFileId);
     }, [editors.activeFileId, fileTree.setActiveNode]);
 
     useEffect(() => {
         if (!editors.activeFileId) {
+            fileTree.clearFileSelection();
             return;
         }
 
         const node = fileTree.findNodeByPath(fileTree.fileTree, editors.activeFileId);
-        if (!node || node.isSelected) {
+        if (!node) {
+            fileTree.clearFileSelection();
+            return;
+        }
+
+        if (node.isSelected) {
             return;
         }
 
         fileTree.selectNode(node.id);
     }, [editors.activeFileId, fileTree.fileTree,
-        fileTree.findNodeByPath, fileTree.selectNode]);
+        fileTree.findNodeByPath, fileTree.selectNode, fileTree.clearFileSelection]);
 
     useEffect(() => {
         saveItem('terminals', terminals.terminals);
@@ -158,6 +160,7 @@ const App: React.FC = () => {
     const handleSelectFile = useEvent((fileId: string) => {
         const paneId = resolveEditorPaneId();
         if (!paneId) return;
+        if (editors.activeFileId === fileId) return;
         editors.setActiveFileId(fileId, paneId);
     });
 

anycode/components/TreeNodeComponent.tsx

@@ -59,6 +59,7 @@ const TreeNodeComponentImpl: React.FC<TreeNodeComponentProps> = ({
 
     const handleNameClick = (e: React.MouseEvent) => {
         e.stopPropagation();
+        if (isActive) return;
         onActivate(node.id);
 
         if (node.type === 'file') {
@@ -80,6 +81,7 @@ const TreeNodeComponentImpl: React.FC<TreeNodeComponentProps> = ({
         if (e.button !== 0) {
             return;
         }
+        if (isActive) return;
         onActivate(node.id);
     };
 

anycode/components/agent/AcpMessage.css

@@ -120,6 +120,7 @@
     background-color: rgba(127, 127, 127, 0.18);
     border: 1px solid var(--theme-border, var(--border-color, #333));
     color: inherit;
+    overflow: scroll;
 }
 
 .acp-message-markdown pre {

anycode/components/toolbar/Toolbar.tsx

@@ -36,7 +36,11 @@ export const Toolbar = ({
                 <div
                     key={file.id}
                     className={`tab ${activeFileId === file.id ? 'active' : ''}`}
-                    onClick={() => onSelectFile(file.id)}
+                    onClick={() => {
+                        if (activeFileId !== file.id) {
+                            onSelectFile(file.id);
+                        }
+                    }}
                 >
                     <span className="tab-filename" title={file.id}> {file.name} </span>
                     <button
@@ -54,7 +58,11 @@ export const Toolbar = ({
                 <div
                     key={`toolbar-terminal-${terminal.id}`}
                     className={`tab tab-terminal ${activeTerminalIndex === index ? 'active' : ''}`}
-                    onClick={() => onSelectTerminal(index)}
+                    onClick={() => {
+                        if (activeTerminalIndex !== index) {
+                            onSelectTerminal(index);
+                        }
+                    }}
                 >
                     <span className="tab-filename">{`term:${terminal.name}`}</span>
                     <button
@@ -72,7 +80,11 @@ export const Toolbar = ({
                 <div
                     key={`toolbar-agent-${session.agentId}`}
                     className={`tab tab-agent ${activeAgentId === session.agentId ? 'active' : ''}`}
-                    onClick={() => onSelectAgent(session.agentId)}
+                    onClick={() => {
+                        if (activeAgentId !== session.agentId) {
+                            onSelectAgent(session.agentId);
+                        }
+                    }}
                 >
                     <span className="tab-filename">{`${session.agentName || session.agentId}`}</span>
                     <button