Add tool update streaming and improve ACP message rendering

add tool_update messages in backend and frontend types
stream intermediate tool updates without persisting to history
merge tool result/update into tool call display to reduce noise
refine tool result parsing and thought rendering UX
tweak ACP dialog/message styles and icons

Author: vipmax

anycode-backend/src/acp.rs

@@ -60,6 +60,12 @@ pub struct AcpToolResult {
     pub result: Value,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct AcpToolUpdate {
+    pub id: String,
+    pub update: Value,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct AcpPromptState {
     pub is_processing: bool,
@@ -103,6 +109,8 @@ pub enum AcpMessage {
     ToolCall(AcpToolCall),
     #[serde(rename = "tool_result")]
     ToolResult(AcpToolResult),
+    #[serde(rename = "tool_update")]
+    ToolUpdate(AcpToolUpdate),
     #[serde(rename = "prompt_state")]
     PromptState(AcpPromptState),
     #[serde(rename = "permission_request")]
@@ -521,27 +529,35 @@ impl AcpClientImpl {
         info!("ToolCallUpdate received for agent {}: tool_call_id={:?}, status={:?}", 
             self.agent_id, update.tool_call_id, update.fields.status);
 
-        // If tool call is completed, send tool result
-        if let Some(acp::ToolCallStatus::Completed) = update.fields.status {
-            let tool_call_id = update.tool_call_id.to_string();
-            
-            // Serialize entire update to JSON string and put in result
-            let result = serde_json::to_value(&update)
-                .unwrap_or_else(|_| serde_json::json!({}));
-            
-            let acp_tool_result = AcpToolResult {
-                id: tool_call_id,
-                result: result,
-            };
-            
-            // Add to history
-            {
-                let mut history = self.history.lock().await;
-                history.push(AcpMessage::ToolResult(acp_tool_result.clone()));
+        let tool_call_id = update.tool_call_id.to_string();
+
+        // Serialize entire update to JSON string and put in payload
+        let payload = serde_json::to_value(&update)
+            .unwrap_or_else(|_| serde_json::json!({}));
+
+        match update.fields.status {
+            Some(acp::ToolCallStatus::Completed) => {
+                let acp_tool_result = AcpToolResult {
+                    id: tool_call_id,
+                    result: payload,
+                };
+
+                // Add to history only when completed
+                {
+                    let mut history = self.history.lock().await;
+                    history.push(AcpMessage::ToolResult(acp_tool_result.clone()));
+                }
+                self.send_message(AcpMessage::ToolResult(acp_tool_result)).await;
+            }
+            Some(_) => {
+                let acp_tool_update = AcpToolUpdate {
+                    id: tool_call_id,
+                    update: payload,
+                };
+                // Stream intermediate updates without persisting
+                self.send_message(AcpMessage::ToolUpdate(acp_tool_update)).await;
             }
-            
-            // Send to frontend
-            self.send_message(AcpMessage::ToolResult(acp_tool_result)).await;
+            None => {}
         }
     }
 

anycode/App.tsx

@@ -1078,8 +1078,8 @@ const App: React.FC = () => {
             return;
         }
 
-        // Handle tool_call, tool_result, and permission_request messages
-        if (data.item.role === 'tool_call' || data.item.role === 'tool_result' || data.item.role === 'permission_request') {
+        // Handle tool_call, tool_result, tool_update, and permission_request messages
+        if (data.item.role === 'tool_call' || data.item.role === 'tool_result' || data.item.role === 'tool_update' || data.item.role === 'permission_request') {
             // Follow mode: open file when tool_call has locations
             if (data.item.role === 'tool_call' && followEnabledRef.current) {
                 const toolCall = data.item as AcpToolCallMessage;

anycode/components/agent/AcpDialog.css

@@ -185,7 +185,7 @@
 
 .acp-diff-btn svg,
 .acp-follow-btn svg {
-    width: 20px;
+    width: 15px;
     height: 20px;
 }
 

anycode/components/agent/AcpMessage.css

@@ -91,9 +91,9 @@
 }
 
 .acp-message-thought .acp-message-content {
-    background-color: var(--assistant-message-bg, #2a2a2a);
+    /* background-color: var(--assistant-message-bg, #2a2a2a); */
     color: var(--text-color-secondary, #888);
-    border: 1px solid var(--border-color, #333);
+    /* border: 1px solid var(--border-color, #333); */
     font-size: 11px;
     font-style: normal;
 }
@@ -105,7 +105,7 @@
 .acp-message-tool_call .acp-message-content {
     background-color: var(--assistant-message-bg, #2a2a2a);
     /* color: var(--text-color, #ccc); */
-    border: 1px solid var(--border-color, #333);
+    /* border: 1px solid var(--border-color, #333); */
     max-width: 100%;
     box-sizing: border-box;
     overflow-x: hidden;
@@ -124,25 +124,34 @@
     overflow-x: hidden;
 }
 
+.acp-message-tool_update {
+    align-items: flex-start;
+}
+
+.acp-message-tool_update .acp-message-content {
+    background-color: var(--assistant-message-bg, #2a2a2a);
+    color: var(--text-color, #ccc);
+    border: 1px solid var(--border-color, #333);
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow-x: hidden;
+}
+
 .acp-tool-call-indicator,
-.acp-tool-result-indicator {
+.acp-tool-result-indicator,
+.acp-tool-update-indicator {
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     user-select: none;
 }
 
 .acp-tool-call-indicator:hover,
-.acp-tool-result-indicator:hover {
+.acp-tool-result-indicator:hover,
+.acp-tool-update-indicator:hover {
     color: var(--text-color, #ccc);
 }
 
-.acp-tool-call-header {
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-}
-
 .acp-tool-call-name {
     font-size: 11px;
     font-weight: 400;
@@ -172,7 +181,8 @@
 
 .acp-tool-call-command,
 .acp-tool-call-args,
-.acp-tool-result-content {
+.acp-tool-result-content,
+.acp-tool-update-content {
     margin: 0;
     border-radius: 4px;
     font-size: 12px;
@@ -184,24 +194,63 @@
     white-space: pre-wrap;
 }
 
+.acp-tool-result-details {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.acp-tool-result-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    font-size: 12px;
+}
+
+.acp-tool-result-title {
+    font-weight: 600;
+    color: var(--text-color, #ccc);
+}
+
+.acp-tool-result-status {
+    font-size: 11px;
+    color: var(--text-color-secondary, #888);
+    text-transform: uppercase;
+}
+
+.acp-tool-result-text {
+    font-size: 12px;
+    color: var(--text-color, #ccc);
+    white-space: pre-wrap;
+}
+
 .acp-tool-call-command {
     white-space: pre-wrap;
     word-break: break-all;
 }
 
-.acp-thought-indicator {
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--text-color-secondary, #888);
-    margin-bottom: 4px;
-    font-style: normal;
+.acp-tool-call-indicator,
+.acp-permission-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
 }
 
-.acp-thought-content {
-    margin-top: 8px;
+.acp-thought-text {
     font-size: 11px;
     color: var(--text-color-secondary, #888);
     line-height: 1.4;
+    white-space: pre-wrap;
+}
+
+.acp-thought-text-collapsed {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.acp-thought-toggle-inline {
+    margin-right: 6px;
 }
 
 /* Permission Request Styles */