feat(copilot): add commands

[Sg312]

Summary

Adds slash commands, cleans up some ui for the copilot, fixes superagent

Type of Change

• Bug fix
• New feature

Testing

Manual

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 14, 2026 0:12am

[greptile-apps]

Greptile Summary

This PR adds slash command functionality to the copilot interface, enabling users to invoke special modes and web tools using /command syntax. The implementation includes a new SlashMenu component with folder navigation, keyboard shortcuts, and integration with the existing @mention system.

Key Changes:

• Added slash command menu (/fast, /plan, /debug, /research, /deploy, /superagent) with a nested Web submenu (/search, /read, /scrape, /crawl)
• Implemented new client tools: superagent, crawl_website, get_page_contents, and scrape_page
• Extended context system to support slash_command type, which gets extracted and sent as commands array to the API
• Updated useMentionMenu hook to detect and handle both @mentions and /slash commands
• Changed subagent tool execution in store from blocking (await) to non-blocking (Promise.resolve().then()) for parallel execution
• Refactored UI components for better subagent content rendering with nested thinking blocks and tool calls

Issues Found:

• Critical bug: TOP_LEVEL_COMMANDS array has inconsistent ordering in user-input.tsx (lines 416 vs 512), causing wrong command selection when Enter is pressed after arrow navigation

Confidence Score: 2/5

• Not safe to merge - contains a critical command order bug that will cause incorrect behavior
• The PR implements a substantial new feature with generally clean architecture, but has a critical logic error where TOP_LEVEL_COMMANDS array ordering is inconsistent between arrow navigation and Enter key handling. This causes users to select one command visually but execute a different one, which is a serious UX bug. The rest of the implementation is solid with proper separation of concerns, type safety, and follows the codebase patterns.
• Pay close attention to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx - fix the command order mismatch at line 512

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx	Added slash command menu with navigation logic, but has critical command order mismatch causing incorrect selection behavior
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/slash-menu/slash-menu.tsx	New slash command menu component with proper structure, constants, and keyboard navigation logic
apps/sim/lib/copilot/tools/client/other/superagent.ts	New superagent client tool implementation with proper metadata and state handling
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-menu.ts	Added slash command detection and replacement logic mirroring existing mention functionality
apps/sim/stores/panel/copilot/store.ts	Registered new web tools, extracted slash commands from contexts, and changed subagent tool execution to non-blocking

Sequence Diagram

sequenceDiagram
    participant User
    participant UserInput
    participant SlashMenu
    participant MentionMenu
    participant Store
    participant API
    participant ClientTools

    User->>UserInput: Types "/" character
    UserInput->>MentionMenu: getActiveSlashQueryAtPosition()
    MentionMenu-->>UserInput: Returns active slash query
    UserInput->>SlashMenu: Shows slash menu
    
    User->>SlashMenu: Types to filter or navigates with arrows
    SlashMenu->>SlashMenu: Filters TOP_LEVEL_COMMANDS + WEB_COMMANDS
    
    alt User selects Web folder
        User->>SlashMenu: Presses Enter/ArrowRight on Web
        SlashMenu->>SlashMenu: Opens Web submenu
        User->>SlashMenu: Selects web command
    else User selects top-level command
        User->>SlashMenu: Presses Enter on command
    end
    
    SlashMenu->>MentionMenu: replaceActiveSlashWith(command)
    SlashMenu->>UserInput: onSelectCommand(command)
    UserInput->>UserInput: addContext({kind: 'slash_command'})
    
    User->>UserInput: Presses Enter to submit
    UserInput->>Store: sendMessage(message, contexts)
    
    Store->>Store: Extract slash commands from contexts
    Store->>Store: Filter out slash_command contexts
    Store->>API: POST /api/copilot/chat {commands, contexts}
    
    API->>API: Forward commands to backend
    API-->>Store: Stream response with tool calls
    
    Store->>Store: Handle tool_call events
    Store->>ClientTools: Instantiate client tools (superagent, scrape, crawl, etc)
    
    alt Tool is superagent
        ClientTools->>ClientTools: Auto-execute superagent
        API-->>Store: Stream subagent_text/subagent_tool_call
        Store->>Store: Update subAgentBlocks
    else Tool is web tool (scrape/crawl/read)
        ClientTools->>ClientTools: Execute web tool
    end
    
    Store-->>UserInput: Update UI with streaming results
    UserInput-->>User: Display results

Loading

[greptile-apps]

_{24 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: Command order mismatch: this array has a different order than line 512's array and the slash-menu.tsx component. Line 416 has ['fast', 'plan', 'debug', 'research', 'deploy', 'superagent'] while line 512 has ['plan', 'debug', 'fast', 'superagent', 'deploy', 'research']. This inconsistency causes arrow navigation to select the wrong command when Enter is pressed.

Suggested change

	const TOP_LEVEL_COMMANDS = ['fast', 'plan', 'debug', 'research', 'deploy', 'superagent']
	const TOP_LEVEL_COMMANDS = ['fast', 'plan', 'debug', 'research', 'deploy', 'superagent']

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
Line: 416:416

Comment:
**logic:** Command order mismatch: this array has a different order than line 512's array and the `slash-menu.tsx` component. Line 416 has `['fast', 'plan', 'debug', 'research', 'deploy', 'superagent']` while line 512 has `['plan', 'debug', 'fast', 'superagent', 'deploy', 'research']`. This inconsistency causes arrow navigation to select the wrong command when Enter is pressed.

```suggestion
          const TOP_LEVEL_COMMANDS = ['fast', 'plan', 'debug', 'research', 'deploy', 'superagent']
```

How can I resolve this? If you propose a fix, please make it concise.