feat: add ACP multi-pane agent workspace

Author: vipmax

README.md

@@ -3,6 +3,7 @@
 **anycode** is a lightning-fast web-based IDE that allows you to write, edit, and manage code directly from your browser. Built for speed and performance, anycode supports a wide range of programming languages and provides an intuitive interface with powerful features for a seamless development experience.
 
 ![editor](anycode/imgs/screen.png)
+![editor](anycode/imgs/screen_agents.png)
 
 ## Mobile Previews
 

anycode-base/src/styles.css

@@ -298,4 +298,4 @@
 
 .highlight.selected {
   background: rgba(210, 210, 210, 0.9);
-}
+}

anycode/App.css

@@ -114,6 +114,7 @@
     background: rgba(45, 45, 45, 0.5);
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
     /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
     padding: 6px 16px;
     gap: 8px;

anycode/App.tsx

@@ -18,7 +18,7 @@ import {
     ensureDefaultAgents,
     updateAgents,
 } from './agents';
-import { AcpAgent, type AcpMessage, type AcpToolCall, type SearchMatch } from './types';
+import { AcpAgent, type SearchMatch } from './types';
 import './App.css';
 import {
     loadBottomVisible,
@@ -54,9 +54,6 @@ const App: React.FC = () => {
     const { wsRef, isConnected } = useSocket({});
 
     const fileTree = useFileTree();
-    const emptyToolCalls = useMemo<AcpToolCall[]>(() => [], []);
-    const emptyMessages = useMemo<AcpMessage[]>(() => [], []);
-
     const editors = useEditors({
         wsRef,
         isConnected,
@@ -265,10 +262,7 @@ const App: React.FC = () => {
     // }, []);
 
     const sessionsArray = useMemo(() => Array.from(agents.acpSessions.values()), [agents.acpSessions]);
-    const currentSession = useMemo(
-        () => (agents.selectedAgentId ? agents.acpSessions.get(agents.selectedAgentId) ?? null : null),
-        [agents.acpSessions, agents.selectedAgentId],
-    );
+    const availableAgents = useMemo<AcpAgent[]>(() => getAllAgents(), [agents.agentsVersion]);
     const defaultAgent = useMemo(() => getDefaultAgent(), [agents.agentsVersion]);
     const settingsAgents = useMemo<AcpAgent[]>(() => (
         agents.isAgentSettingsOpen ? getAllAgents() : []
@@ -279,15 +273,15 @@ const App: React.FC = () => {
     );
     const handleAddAgent = useCallback(() => {
         if (!defaultAgent) return;
-        agents.startAgent(defaultAgent);
+        return agents.startAgent(defaultAgent);
     }, [agents.startAgent, defaultAgent]);
+    const handleStartSpecificAgent = useCallback((agent: AcpAgent) => {
+        return agents.startAgent(agent);
+    }, [agents.startAgent]);
     const handleOpenAgentSettings = useCallback(() => {
         ensureDefaultAgents();
         agents.setIsAgentSettingsOpen(true);
     }, [agents.setIsAgentSettingsOpen]);
-    const handleCloseAgentPanel = useCallback(() => {
-        setRightPanelVisible(false);
-    }, []);
     const handleCloseAgentSettings = useCallback(() => {
         agents.setIsAgentSettingsOpen(false);
     }, [agents.setIsAgentSettingsOpen]);
@@ -403,24 +397,18 @@ const App: React.FC = () => {
         <AcpDialog
             key={`acp-${agents.agentsVersion}`}
             agents={sessionsArray}
+            availableAgents={availableAgents}
             selectedAgentId={agents.selectedAgentId}
             onSelectAgent={agents.setSelectedAgentId}
             onCloseAgent={agents.closeAgent}
             onAddAgent={handleAddAgent}
+            onStartAgent={handleStartSpecificAgent}
             onOpenSettings={handleOpenAgentSettings}
-            agentId={currentSession?.agentId || defaultAgent?.id || 'gemini'}
             isOpen={true}
-            onClose={handleCloseAgentPanel}
             onSendPrompt={agents.sendPrompt}
             onCancelPrompt={agents.cancelPrompt}
             onUndoPrompt={agents.undoPrompt}
-            messages={currentSession?.messages || emptyMessages}
-            toolCalls={emptyToolCalls}
-            isConnected={currentSession ? (currentSession.isActive && isConnected) : false}
-            isProcessing={currentSession?.isProcessing || false}
-            modelSelector={currentSession?.modelSelector}
-            reasoningSelector={currentSession?.reasoningSelector}
-            contextUsage={currentSession?.contextUsage}
+            isConnected={isConnected}
             onSelectModel={agents.setSessionModel}
             onSelectReasoning={agents.setSessionReasoning}
             showSettings={agents.isAgentSettingsOpen}

anycode/components/agent/AcpDialog.css

@@ -115,6 +115,37 @@
     height: 25px;
 }
 
+.acp-split-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-color, #ccc);
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 26px;
+    flex-shrink: 0;
+    transition: background-color 0.2s;
+    outline: none;
+}
+
+.acp-split-btn:hover {
+    background-color: var(--hover-bg, #2a2a2a);
+}
+
+.acp-split-btn:focus,
+.acp-split-btn:active {
+    outline: none;
+    border: none;
+}
+
+.acp-split-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
 .acp-settings-btn {
     background: transparent;
     border: none;
@@ -213,6 +244,17 @@
         height: 20px;
     }
 
+    .acp-split-btn {
+        height: 36px;
+        min-width: 36px;
+        padding: 6px;
+    }
+
+    .acp-split-btn svg {
+        width: 20px;
+        height: 20px;
+    }
+
     .acp-diff-btn,
     .acp-follow-btn {
         height: 36px;
@@ -233,6 +275,128 @@
     min-height: 0;
 }
 
+.acp-workspace-content {
+    overflow: hidden;
+}
+
+.acp-workspace-content .sash,
+.acp-workspace-content .sash-module_sash__K-9lB {
+    background: transparent;
+}
+
+.acp-workspace-content .sash::after,
+.acp-workspace-content .sash-module_sash__K-9lB::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+}
+
+.acp-workspace-content .sash.sash-vertical::after,
+.acp-workspace-content .sash-module_sash__K-9lB.sash-module_vertical__pB-rs::after {
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    transform: translateX(-50%);
+    background: linear-gradient(to bottom, transparent, #555, transparent);
+}
+
+.acp-workspace-content .sash.sash-horizontal::after,
+.acp-workspace-content .sash-module_sash__K-9lB.sash-module_horizontal__kFbiw::after {
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 2px;
+    transform: translateY(-50%);
+    background: linear-gradient(to right, transparent, #555, transparent);
+}
+
+.acp-pane-session,
+.acp-pane-empty {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    position: relative;
+}
+
+.acp-pane-session {
+    box-shadow: inset 0 0 0 1px transparent;
+}
+
+.acp-pane-session.active,
+.acp-pane-empty.active {
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+    background: transparent;
+}
+
+.acp-pane-session.active::before,
+.acp-pane-empty.active::before {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 0;
+    right: 0;
+    height: 18px;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 45%, transparent);
+    pointer-events: none;
+    z-index: 1;
+}
+
+.acp-dialog-single-pane .acp-pane-session.active {
+    box-shadow: inset 0 0 0 1px transparent;
+}
+
+.acp-dialog-single-pane .acp-pane-session.active::before {
+    content: none;
+}
+
+.acp-pane-empty-subtitle {
+    font-size: 11px;
+    line-height: 1.2;
+    color: #888;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.acp-pane-empty {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 16px;
+}
+
+.acp-pane-empty-title {
+    font-size: 14px;
+    color: var(--text-color, #ccc);
+    margin-bottom: 4px;
+}
+
+.acp-pane-empty-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 12px;
+    max-width: 100%;
+}
+
+.acp-pane-empty-action {
+    background: transparent;
+    border: none;
+    color: var(--text-color, #ccc);
+    cursor: pointer;
+    font-size: 12px;
+    padding: 6px 10px;
+    border-radius: 8px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.acp-pane-empty-action:hover {
+    background-color: var(--hover-bg, #2a2a2a);
+}
+
 .acp-scroll-to-bottom-btn {
     position: absolute;
     right: 16px;