Edit, plan, debug subagents

Author: Sg312

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx

@@ -298,6 +298,22 @@ const SUBAGENT_MAX_HEIGHT = 125
  */
 const SUBAGENT_SCROLL_INTERVAL = 100
 
+/**
+ * Get display labels for subagent tools
+ */
+function getSubagentLabels(toolName: string, isStreaming: boolean): string {
+  switch (toolName) {
+    case 'debug':
+      return isStreaming ? 'Debugging' : 'Debugged'
+    case 'apply_edit':
+      return isStreaming ? 'Applying edit' : 'Applied edit'
+    case 'plan':
+      return isStreaming ? 'Planning' : 'Planned'
+    default:
+      return isStreaming ? 'Processing' : 'Processed'
+  }
+}
+
 /**
  * SubAgentContent renders the streamed content and tool calls from a subagent
  * with thinking-style styling (same as ThinkingBlock).
@@ -306,9 +322,11 @@ const SUBAGENT_SCROLL_INTERVAL = 100
 function SubAgentContent({
   blocks,
   isStreaming = false,
+  toolName = 'debug',
 }: {
   blocks?: SubAgentContentBlock[]
   isStreaming?: boolean
+  toolName?: string
 }) {
   const [isExpanded, setIsExpanded] = useState(false)
   const userCollapsedRef = useRef<boolean>(false)
@@ -347,7 +365,7 @@ function SubAgentContent({
   if (!blocks || blocks.length === 0) return null
 
   const hasContent = blocks.length > 0
-  const label = isStreaming ? 'Debugging' : 'Debugged'
+  const label = getSubagentLabels(toolName, isStreaming)
 
   return (
     <div className='mt-1 mb-0'>
@@ -768,13 +786,15 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
   // Skip rendering some internal tools
   if (toolCall.name === 'checkoff_todo' || toolCall.name === 'mark_todo_in_progress') return null
 
-  // Special rendering for debug tool with subagent content - only show the collapsible SubAgentContent
-  if (toolCall.name === 'debug' && toolCall.subAgentBlocks && toolCall.subAgentBlocks.length > 0) {
+  // Special rendering for subagent tools (debug, apply_edit, plan) - only show the collapsible SubAgentContent
+  const isSubagentTool = toolCall.name === 'debug' || toolCall.name === 'apply_edit' || toolCall.name === 'plan'
+  if (isSubagentTool && toolCall.subAgentBlocks && toolCall.subAgentBlocks.length > 0) {
     return (
       <div className='w-full'>
         <SubAgentContent
           blocks={toolCall.subAgentBlocks}
           isStreaming={toolCall.subAgentStreaming}
+          toolName={toolCall.name}
         />
       </div>
     )
@@ -1209,6 +1229,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
           <SubAgentContent
             blocks={toolCall.subAgentBlocks}
             isStreaming={toolCall.subAgentStreaming}
+            toolName={toolCall.name}
           />
         )}
       </div>
@@ -1271,6 +1292,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
           <SubAgentContent
             blocks={toolCall.subAgentBlocks}
             isStreaming={toolCall.subAgentStreaming}
+            toolName={toolCall.name}
           />
         )}
       </div>
@@ -1380,6 +1402,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
         <SubAgentContent
           blocks={toolCall.subAgentBlocks}
           isStreaming={toolCall.subAgentStreaming}
+          toolName={toolCall.name}
         />
       )}
     </div>

apps/sim/lib/copilot/tools/client/other/apply-edit.ts

@@ -0,0 +1,48 @@
+import { Loader2, Pencil, XCircle } from 'lucide-react'
+import {
+  BaseClientTool,
+  type BaseClientToolMetadata,
+  ClientToolCallState,
+} from '@/lib/copilot/tools/client/base-tool'
+
+interface ApplyEditArgs {
+  instruction: string
+}
+
+/**
+ * Apply Edit tool that spawns a subagent to apply code/workflow edits.
+ * This tool auto-executes and the actual work is done by the apply_edit subagent.
+ * The subagent's output is streamed as nested content under this tool call.
+ */
+export class ApplyEditClientTool extends BaseClientTool {
+  static readonly id = 'apply_edit'
+
+  constructor(toolCallId: string) {
+    super(toolCallId, ApplyEditClientTool.id, ApplyEditClientTool.metadata)
+  }
+
+  static readonly metadata: BaseClientToolMetadata = {
+    displayNames: {
+      [ClientToolCallState.generating]: { text: 'Preparing edit', icon: Loader2 },
+      [ClientToolCallState.pending]: { text: 'Applying edit', icon: Loader2 },
+      [ClientToolCallState.executing]: { text: 'Applying edit', icon: Loader2 },
+      [ClientToolCallState.success]: { text: 'Edit applied', icon: Pencil },
+      [ClientToolCallState.error]: { text: 'Failed to apply edit', icon: XCircle },
+      [ClientToolCallState.rejected]: { text: 'Edit skipped', icon: XCircle },
+      [ClientToolCallState.aborted]: { text: 'Edit aborted', icon: XCircle },
+    },
+  }
+
+  /**
+   * Execute the apply_edit tool.
+   * This just marks the tool as executing - the actual edit work is done server-side
+   * by the apply_edit subagent, and its output is streamed as subagent events.
+   */
+  async execute(_args?: ApplyEditArgs): Promise<void> {
+    // Immediately transition to executing state - no user confirmation needed
+    this.setState(ClientToolCallState.executing)
+    // The tool result will come from the server via tool_result event
+    // when the apply_edit subagent completes its work
+  }
+}
+

apps/sim/lib/copilot/tools/client/other/plan.ts

@@ -1,16 +1,19 @@
-import { createLogger } from '@sim/logger'
-import { ListTodo, Loader2, X, XCircle } from 'lucide-react'
+import { ListTodo, Loader2, XCircle } from 'lucide-react'
 import {
   BaseClientTool,
   type BaseClientToolMetadata,
   ClientToolCallState,
 } from '@/lib/copilot/tools/client/base-tool'
 
 interface PlanArgs {
-  objective?: string
-  todoList?: Array<{ id?: string; content: string } | string>
+  request: string
 }
 
+/**
+ * Plan tool that spawns a subagent to plan an approach.
+ * This tool auto-executes and the actual work is done by the plan subagent.
+ * The subagent's output is streamed as nested content under this tool call.
+ */
 export class PlanClientTool extends BaseClientTool {
   static readonly id = 'plan'
 
@@ -20,50 +23,25 @@ export class PlanClientTool extends BaseClientTool {
 
   static readonly metadata: BaseClientToolMetadata = {
     displayNames: {
-      [ClientToolCallState.generating]: { text: 'Planning', icon: Loader2 },
+      [ClientToolCallState.generating]: { text: 'Preparing plan', icon: Loader2 },
       [ClientToolCallState.pending]: { text: 'Planning', icon: Loader2 },
-      [ClientToolCallState.executing]: { text: 'Planning an approach', icon: Loader2 },
-      [ClientToolCallState.success]: { text: 'Finished planning', icon: ListTodo },
-      [ClientToolCallState.error]: { text: 'Failed to plan', icon: X },
-      [ClientToolCallState.aborted]: { text: 'Aborted planning', icon: XCircle },
-      [ClientToolCallState.rejected]: { text: 'Skipped planning approach', icon: XCircle },
+      [ClientToolCallState.executing]: { text: 'Planning', icon: Loader2 },
+      [ClientToolCallState.success]: { text: 'Planned', icon: ListTodo },
+      [ClientToolCallState.error]: { text: 'Failed to plan', icon: XCircle },
+      [ClientToolCallState.rejected]: { text: 'Plan skipped', icon: XCircle },
+      [ClientToolCallState.aborted]: { text: 'Plan aborted', icon: XCircle },
     },
   }
 
-  async execute(args?: PlanArgs): Promise<void> {
-    const logger = createLogger('PlanClientTool')
-    try {
-      this.setState(ClientToolCallState.executing)
-
-      // Update store todos from args if present (client-side only)
-      try {
-        const todoList = args?.todoList
-        if (Array.isArray(todoList)) {
-          const todos = todoList.map((item: any, index: number) => ({
-            id: (item && (item.id || item.todoId)) || `todo-${index}`,
-            content: typeof item === 'string' ? item : item.content,
-            completed: false,
-            executing: false,
-          }))
-          const { useCopilotStore } = await import('@/stores/panel/copilot/store')
-          const store = useCopilotStore.getState()
-          if (store.setPlanTodos) {
-            store.setPlanTodos(todos)
-            useCopilotStore.setState({ showPlanTodos: true })
-          }
-        }
-      } catch (e) {
-        logger.warn('Failed to update plan todos in store', { message: (e as any)?.message })
-      }
-
-      this.setState(ClientToolCallState.success)
-      // Echo args back so store/tooling can parse todoList if needed
-      await this.markToolComplete(200, 'Plan ready', args || {})
-      this.setState(ClientToolCallState.success)
-    } catch (e: any) {
-      logger.error('execute failed', { message: e?.message })
-      this.setState(ClientToolCallState.error)
-      await this.markToolComplete(500, e?.message || 'Failed to plan')
-    }
+  /**
+   * Execute the plan tool.
+   * This just marks the tool as executing - the actual planning work is done server-side
+   * by the plan subagent, and its output is streamed as subagent events.
+   */
+  async execute(_args?: PlanArgs): Promise<void> {
+    // Immediately transition to executing state - no user confirmation needed
+    this.setState(ClientToolCallState.executing)
+    // The tool result will come from the server via tool_result event
+    // when the plan subagent completes its work
   }
 }

apps/sim/stores/panel/copilot/store.ts

@@ -33,6 +33,7 @@ import { PlanClientTool } from '@/lib/copilot/tools/client/other/plan'
 import { RememberDebugClientTool } from '@/lib/copilot/tools/client/other/remember-debug'
 import { SearchDocumentationClientTool } from '@/lib/copilot/tools/client/other/search-documentation'
 import { SearchErrorsClientTool } from '@/lib/copilot/tools/client/other/search-errors'
+import { ApplyEditClientTool } from '@/lib/copilot/tools/client/other/apply-edit'
 import { DebugClientTool } from '@/lib/copilot/tools/client/other/debug'
 import { SearchOnlineClientTool } from '@/lib/copilot/tools/client/other/search-online'
 import { SearchPatternsClientTool } from '@/lib/copilot/tools/client/other/search-patterns'
@@ -79,6 +80,7 @@ try {
 
 // Known class-based client tools: map tool name -> instantiator
 const CLIENT_TOOL_INSTANTIATORS: Record<string, (id: string) => any> = {
+  apply_edit: (id) => new ApplyEditClientTool(id),
   debug: (id) => new DebugClientTool(id),
   run_workflow: (id) => new RunWorkflowClientTool(id),
   get_workflow_console: (id) => new GetWorkflowConsoleClientTool(id),
@@ -122,6 +124,7 @@ const CLIENT_TOOL_INSTANTIATORS: Record<string, (id: string) => any> = {
 
 // Read-only static metadata for class-based tools (no instances)
 export const CLASS_TOOL_METADATA: Record<string, BaseClientToolMetadata | undefined> = {
+  apply_edit: (ApplyEditClientTool as any)?.metadata,
   debug: (DebugClientTool as any)?.metadata,
   run_workflow: (RunWorkflowClientTool as any)?.metadata,
   get_workflow_console: (GetWorkflowConsoleClientTool as any)?.metadata,