Enhance README and refactor App component

vipmax · vipmax · commit d436f1aa2a62 · 2025-12-16T02:49:20.000+03:00
- Updated README.md to reflect changes in search functionality and added ACP integration details.
- Refactored App.tsx to improve socket handling by extracting connection logic into dedicated functions.
- Introduced utility functions for path manipulation in utils.ts, enhancing code readability and maintainability.
- Removed unused constants related to panel sizes from constants.ts.
- Updated backend terminal handling to utilize a new current_dir utility function for better cross-platform compatibility.
diff --git a/README.md b/README.md
@@ -12,7 +12,8 @@
 - **LSP integration**: LSP support for intelligent code completion, go-to-definition, hover information and real-time diagnostics.
 - **File system integration**: WebSocket-based backend for browsing and editing files from your local filesystem.
 - **Integrated terminal**: Full-featured terminal emulator with WebSocket-based communication, supporting real-time command execution and output.
-- **Search functionality**: Quickly find text within files using `Win + f` (`Command + f` for MacOS).
+- **Search functionality**: Quickly find text within files using `Meta + f`.
+- **ACP integration**: Agent Client Protocol (ACP) support for seamless integration with AI agents. Start, manage, and interact with multiple AI agents directly from the IDE, with support for tool calls, tool results, and real-time message streaming.
 
 ## Architecture
 
diff --git a/anycode-backend/src/handlers/io_handler.rs b/anycode-backend/src/handlers/io_handler.rs
@@ -7,6 +7,7 @@ use crate::utils::{abs_file, is_ignored_path};
 use crate::app_state::*;
 use crate::error_ack;
 use lsp_types::{TextDocumentContentChangeEvent, Range, Position};
+use std::path::PathBuf;
 
 
 #[derive(Debug, Serialize, Deserialize, Clone)]
@@ -64,7 +65,7 @@ pub async fn handle_dir_list(
     info!("Received dir:list: {:?}", request);
 
     let dir = match request.path.as_str().trim() {
-        "" | "." | "./" => crate::utils::current_dir(),
+        "" | "." | "./" => crate::utils::current_dir().to_string_lossy().into_owned(),
         d => d.to_string(),
     };
 
@@ -402,24 +403,26 @@ pub async fn handle_create(
     let name = &request.name;
     let is_file = request.is_file;
     
+    // Build path using PathBuf for cross-platform compatibility
     let full_path = if parent_path.is_empty() || parent_path == "." || parent_path == "./" {
-        name.clone()
+        PathBuf::from(name)
     } else {
-        format!("{}/{}", parent_path, name)
+        PathBuf::from(parent_path).join(name)
     };
 
     // For relative paths, we need to join with current directory
-    let full_path = if full_path.starts_with('/') {
+    let full_path = if full_path.is_absolute() {
         full_path
     } else {
         // Relative path, join with current directory
         let current_dir = std::env::current_dir().unwrap_or_default();
-        current_dir.join(&full_path).to_string_lossy().to_string()
+        current_dir.join(&full_path)
     };
+    
+    let full_path_str = full_path.to_string_lossy().to_string();
 
     // Create parent directories if they don't exist
-    let path_buf = std::path::PathBuf::from(&full_path);
-    if let Some(parent) = path_buf.parent() {
+    if let Some(parent) = full_path.parent() {
         if let Err(e) = std::fs::create_dir_all(parent) {
             error_ack!(ack, &request.name, "Failed to create parent directories: {:?}", e);
         }
@@ -429,15 +432,15 @@ pub async fn handle_create(
         // Create empty file
         match std::fs::File::create(&full_path) {
             Ok(_) => {
-                info!("File created successfully: {}", full_path);
+                info!("File created successfully: {}", full_path_str);
                 let mut f2c = state.file2code.lock().await;
-                let code = f2c.entry(full_path.clone()).or_insert_with(|| {
+                let code = f2c.entry(full_path_str.clone()).or_insert_with(|| {
                     Code::new()
                 });
-                code.set_file_name(full_path.clone());
+                code.set_file_name(full_path_str.clone());
                 
-                socket.broadcast().emit("file:created", &full_path).await.ok();
-                ack.send(&json!({ "success": true, "file": full_path, "is_file": true })).ok();
+                socket.broadcast().emit("file:created", &full_path_str).await.ok();
+                ack.send(&json!({ "success": true, "file": full_path_str, "is_file": true })).ok();
             },
             Err(e) => {
                 error_ack!(ack, &request.name, "Failed to create file: {:?}", e);
@@ -447,9 +450,9 @@ pub async fn handle_create(
         // Create directory
         match std::fs::create_dir(&full_path) {
             Ok(_) => {
-                info!("Directory created successfully: {}", full_path);
-                socket.broadcast().emit("dir:created", &full_path).await.ok();
-                ack.send(&json!({ "success": true, "dir": full_path, "is_file": false })).ok();
+                info!("Directory created successfully: {}", full_path_str);
+                socket.broadcast().emit("dir:created", &full_path_str).await.ok();
+                ack.send(&json!({ "success": true, "dir": full_path_str, "is_file": false })).ok();
             },
             Err(e) => {
                 error_ack!(ack, &request.name, "Failed to create directory: {:?}", e);
diff --git a/anycode-backend/src/terminal.rs b/anycode-backend/src/terminal.rs
@@ -3,6 +3,7 @@ use tokio::sync::mpsc;
 use std::io::{Read, Write};
 use anyhow::Result;
 use std::path::{Path, PathBuf};
+use crate::utils::current_dir;
 
 pub struct Terminal {
     name: String,
@@ -34,7 +35,7 @@ impl Terminal {
         let command_str = cmd.unwrap_or_else(Self::default_shell);
         let mut cmd_builder = CommandBuilder::new(command_str);
 
-        let working_dir = cwd.unwrap_or_else(|| Self::get_current_dir());
+        let working_dir = cwd.unwrap_or_else(|| current_dir());
         cmd_builder.cwd(working_dir);
 
         let child = pair.slave.spawn_command(cmd_builder)?;
@@ -78,13 +79,6 @@ impl Terminal {
             .to_string()
     }
 
-    fn get_current_dir() -> PathBuf {
-        std::env::current_dir().unwrap_or_else(|_| {
-            // Fallback to home directory or root
-            dirs::home_dir().unwrap_or_else(|| PathBuf::from("/"))
-        })
-    }
-
     fn spawn_pty_reader(
         mut reader: Box<dyn Read + Send>,
         pty_output_tx: mpsc::Sender<String>,
diff --git a/anycode-backend/src/utils.rs b/anycode-backend/src/utils.rs
@@ -139,9 +139,17 @@ pub fn relative_to_current_dir(path: &Path) -> Option<PathBuf> {
     path.strip_prefix(&current_dir).ok().map(|p| p.to_path_buf())
 }
 
-pub fn current_dir() -> String {
-    std::env::current_dir().unwrap()
-        .to_string_lossy().into_owned()
+pub fn current_dir() -> PathBuf {
+    std::env::current_dir().unwrap_or_else(|_| {
+        // Fallback to home directory or platform-specific root
+        dirs::home_dir().unwrap_or_else(|| {
+            if cfg!(target_os = "windows") {
+                PathBuf::from("C:\\")
+            } else {
+                PathBuf::from("/")
+            }
+        })
+    })
 }
 
 pub fn get_file_name(input: &str) -> String {
diff --git a/anycode/App.tsx b/anycode/App.tsx
@@ -1,20 +1,32 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { io, Socket } from 'socket.io-client';
-import { AnycodeEditorReact, AnycodeEditor, Edit, Operation } from 'anycode-react';
+import { AnycodeEditorReact, AnycodeEditor } from 'anycode-react';
 import type { Change, Position } from '../anycode-base/src/code';
-import { WatcherCreate, WatcherEdits, WatcherRemove, type Cursor, type CursorHistory, type Terminal, type AcpSession, type AcpMessage, type AcpToolCall, type AcpPromptStateMessage} from './types';
-import { loadTerminals, loadTerminalSelected, loadTerminalVisible, loadLeftPanelVisible, loadAcpPanelVisible } from './storage';
+import { WatcherCreate, WatcherEdits, WatcherRemove, 
+    type CursorHistory, type Terminal, type AcpSession, 
+    type AcpMessage, type AcpPromptStateMessage
+} from './types';
+import { loadTerminals, loadTerminalSelected, loadTerminalVisible, 
+    loadLeftPanelVisible, loadAcpPanelVisible 
+} from './storage';
 import { Allotment } from 'allotment';
 import 'allotment/dist/style.css';
-import { TreeNodeComponent, TreeNode, FileState, TerminalComponent, TerminalTabs, AcpDialog, AgentSettingsDialog } from './components';
-import { getAllAgents, getDefaultAgent, updateAgents, getDefaultAgentId, ensureDefaultAgents } from './agents';
+import { TreeNodeComponent, TreeNode, FileState, TerminalComponent, 
+    TerminalTabs, AcpDialog 
+} from './components';
+import { getAllAgents, getDefaultAgent, updateAgents, getDefaultAgentId,
+    ensureDefaultAgents 
+} from './agents';
 import { AcpAgent } from './types';
-import { DEFAULT_FILE, DEFAULT_FILE_CONTENT, BACKEND_URL, MIN_LEFT_PANEL_SIZE, LANGUAGE_EXTENSIONS } from './constants';
+import { DEFAULT_FILE, DEFAULT_FILE_CONTENT, BACKEND_URL } from './constants';
 import './App.css';
 import { 
     Completion, CompletionRequest, Diagnostic, DiagnosticResponse, 
     DefinitionRequest, DefinitionResponse 
 } from '../anycode-base/src/lsp';
+import { normalizePath, getFileName, getParentPath, joinPath,
+    getLanguageFromFileName 
+} from './utils';
 
 const App: React.FC = () => {
     console.log('App rendered');
@@ -342,36 +354,10 @@ const App: React.FC = () => {
             const ws = io(BACKEND_URL, { transports: ['websocket'] });
             wsRef.current = ws;
 
-            ws.on('connect', () => {
-                console.log('Connected to backend');
-                setIsConnected(true);
-                setConnectionError(null);
-                reconnectAttemptsRef.current = 0;
-                openFolder('.');
-
-                terminals.forEach(term => {
-                    console.log('App: Initializing terminal:', term.name);
-                    initializeTerminal(term);
-                    reattachTerminalListener(term.name);
-                });
-
-                // Reconnect to ACP agents
-                reconnectToAcpAgents();
-            });
-            ws.on('disconnect', (reason) => {
-                console.log('Disconnected from backend', reason);
-                setIsConnected(false);
-                attemptReconnect();
-            });
-            ws.on('connect_error', (error) => {
-                console.error('Socket connect error:', error);
-                setIsConnected(false);
-                setConnectionError('Failed to connect to backend');
-            });
-            ws.on('error', (data) => {
-                console.error('Backend error:', data);
-                setConnectionError(data.message);
-            });
+            ws.on('connect', handleSocketConnect);
+            ws.on('disconnect', handleSocketDisconnect);
+            ws.on('connect_error', handleSocketConnectError);
+            ws.on('error', handleSocketError);
             ws.on("lsp:diagnostics", handleDiagnostics);
             ws.on("watcher:edits", handleWatcherEdits);
             ws.on("watcher:create", handleWatcherCreate);
@@ -384,6 +370,39 @@ const App: React.FC = () => {
         }
     };
 
+    const handleSocketConnect = () => {
+        console.log('Connected to backend');
+        setIsConnected(true);
+        setConnectionError(null);
+        reconnectAttemptsRef.current = 0;
+        openFolder('.');
+
+        terminals.forEach(term => {
+            console.log('App: Initializing terminal:', term.name);
+            initializeTerminal(term);
+            reattachTerminalListener(term.name);
+        });
+
+        reconnectToAcpAgents();
+    };
+
+    const handleSocketDisconnect = (reason: string) => {
+        console.log('Disconnected from backend', reason);
+        setIsConnected(false);
+        attemptReconnect();
+    };
+
+    const handleSocketConnectError = (error: Error) => {
+        console.error('Socket connect error:', error);
+        setIsConnected(false);
+        setConnectionError('Failed to connect to backend');
+    };
+
+    const handleSocketError = (data: { message: string }) => {
+        console.error('Backend error:', data);
+        setConnectionError(data.message);
+    };
+
     const handleDiagnostics = (diagnosticsResponse: DiagnosticResponse) => {
         console.log("lsp:diagnostics", diagnosticsResponse);
 
@@ -644,25 +663,20 @@ const App: React.FC = () => {
     };
 
     const handleOpenFileResponse = (path: string, content: string) => {
-        const fileName = path.split('/').pop() || 'untitled';
+        const fileName = getFileName(path);
         const language = getLanguageFromFileName(fileName);
         savedFileContentsRef.current.set(path, content);
         const newFile: FileState = { id: path, name: fileName, language };
         setFiles(prev => [...prev, newFile]);
         setActiveFileId(newFile.id);
     };
 
-    const getLanguageFromFileName = (fileName: string): string => {
-        const ext = fileName.split('.').pop()?.toLowerCase();
-        return LANGUAGE_EXTENSIONS[ext || ''] || 'javascript';
-    };
-
     const convertToTree = (files: string[], dirs: string[], basePath: string): TreeNode[] => {
         const treeNodes: TreeNode[] = [];
         
         // Add directories first
         dirs.forEach(dirName => {
-            const dirPath = basePath === '.' ? dirName : `${basePath}/${dirName}`;
+            const dirPath = basePath === '.' ? dirName : joinPath(basePath, dirName);
             treeNodes.push({
                 id: dirPath,
                 name: dirName,
@@ -678,7 +692,7 @@ const App: React.FC = () => {
         
         // Add files
         files.forEach(fileName => {
-            const filePath = basePath === '.' ? fileName : `${basePath}/${fileName}`;
+            const filePath = basePath === '.' ? fileName : joinPath(basePath, fileName);
             treeNodes.push({
                 id: filePath,
                 name: fileName,
@@ -793,7 +807,7 @@ const App: React.FC = () => {
                     const line = range.start.line; const column = range.start.character;
                     
                     const filePath = uri.replace('file://', '');
-                    const fileName = filePath.split('/').pop() || '';
+                    const fileName = getFileName(filePath);
 
                     pendingPositions.current.set(filePath, { line, column });
                     
@@ -838,7 +852,7 @@ const App: React.FC = () => {
         
         if (prevPosition && prevPosition.file) {
             const filePath = prevPosition.file;
-            const fileName = filePath.split('/').pop() || '';
+            const fileName = getFileName(filePath);
             const { line, column } = prevPosition.cursor;
 
             pendingPositions.current.set(filePath, { line, column });
@@ -875,7 +889,7 @@ const App: React.FC = () => {
         const nextPosition = cursorHistory.current.redoStack.pop();        
         if (nextPosition && nextPosition.file) {
             const filePath = nextPosition.file;
-            const fileName = filePath.split('/').pop() || '';
+            const fileName = getFileName(filePath);
             const { line, column } = nextPosition.cursor;
 
             pendingPositions.current.set(filePath, { line, column });
@@ -908,9 +922,8 @@ const App: React.FC = () => {
         const { path, isFile } = watcherCreate;
 
         // Extract parent path and filename
-        const parts = path.split('/');
-        const fileName = parts[parts.length - 1];
-        const parentPath = parts.slice(0, -1).join('/') || ".";
+        const fileName = getFileName(path);
+        const parentPath = getParentPath(path);
 
         setFileTree(prevTree => {
             const addNode = (nodes: TreeNode[]): TreeNode[] => {
@@ -1544,7 +1557,6 @@ const App: React.FC = () => {
                     {terminalContentPanel}
                 </Allotment.Pane>
             </Allotment>
-            {/* <div className="terminal-spacer"></div> */}
         </div>
     );
 
@@ -1591,8 +1603,6 @@ const App: React.FC = () => {
                     </div>
                 ))}                    
             </div>
-
-            {/* <span className="language-indicator">{activeFile?.language.toUpperCase()}</span> */}
         </div>
     );
 
@@ -1603,7 +1613,7 @@ const App: React.FC = () => {
                 <Allotment vertical={true} defaultSizes={[70, 30]} separator={true} onVisibleChange={handleTerminalPanelVisibleChange}>
                     <Allotment.Pane >
                         <Allotment vertical={false} defaultSizes={[20,80]} separator={false} onVisibleChange={handleLeftPanelVisibleChange}>
-                            <Allotment.Pane snap visible={leftPanelVisible} minSize={MIN_LEFT_PANEL_SIZE}>
+                            <Allotment.Pane snap visible={leftPanelVisible}>
                                 {fileTreePanel}
                             </Allotment.Pane>
                             <Allotment.Pane snap>
diff --git a/anycode/constants.ts b/anycode/constants.ts
@@ -33,28 +33,3 @@ function hello() {
 // if curent port is 5173 then use 3000 else use current port
 const port = window.location.port === '5173' ? '3000' : window.location.port;
 export const BACKEND_URL = `${window.location.protocol}//${window.location.hostname}:${port}`;
-
-// Default panel sizes
-export const DEFAULT_LEFT_PANEL_SIZE = 30;
-export const DEFAULT_RIGHT_PANEL_SIZE = 70;
-export const MIN_LEFT_PANEL_SIZE = 0;
-
-// File extensions mapping
-export const LANGUAGE_EXTENSIONS: { [key: string]: string } = {
-    'js': 'javascript',
-    'ts': 'typescript',
-    'jsx': 'javascript',
-    'tsx': 'typescript',
-    'py': 'python',
-    'cpp': 'cpp',
-    'c': 'c',
-    'java': 'java',
-    'html': 'html',
-    'css': 'css',
-    'json': 'json',
-    'rs': 'rust',
-    'go': 'go',
-    'rb': 'ruby',
-    'php': 'php',
-    'sh': 'bash'
-};
diff --git a/anycode/imgs/screen.png b/anycode/imgs/screen.png
diff --git a/anycode/utils.ts b/anycode/utils.ts
