Fix popover

apps/sim/app/api/copilot/chat/route.ts

@@ -96,6 +96,7 @@ const ChatMessageSchema = z.object({
       })
     )
     .optional(),
+  commands: z.array(z.string()).optional(),
 })
 
 /**
@@ -131,6 +132,7 @@ export async function POST(req: NextRequest) {
       provider,
       conversationId,
       contexts,
+      commands,
     } = ChatMessageSchema.parse(body)
     // Ensure we have a consistent user message ID for this request
     const userMessageIdToUse = userMessageId || crypto.randomUUID()
@@ -458,6 +460,7 @@ export async function POST(req: NextRequest) {
       ...(integrationTools.length > 0 && { tools: integrationTools }),
       ...(baseTools.length > 0 && { baseTools }),
       ...(credentials && { credentials }),
+      ...(commands && commands.length > 0 && { commands }),
     }
 
     try {

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

@@ -346,14 +346,18 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                     const contexts: any[] = Array.isArray((message as any).contexts)
                       ? ((message as any).contexts as any[])
                       : []
-                    const labels = contexts
-                      .filter((c) => c?.kind !== 'current_workflow')
-                      .map((c) => c?.label)
-                      .filter(Boolean) as string[]
-                    if (!labels.length) return text
+
+                    // Build tokens with their prefixes (@ for mentions, / for commands)
+                    const tokens = contexts
+                      .filter((c) => c?.kind !== 'current_workflow' && c?.label)
+                      .map((c) => {
+                        const prefix = c?.kind === 'slash_command' ? '/' : '@'
+                        return `${prefix}${c.label}`
+                      })
+                    if (!tokens.length) return text
 
                     const escapeRegex = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-                    const pattern = new RegExp(`@(${labels.map(escapeRegex).join('|')})`, 'g')
+                    const pattern = new RegExp(`(${tokens.map(escapeRegex).join('|')})`, 'g')
 
                     const nodes: React.ReactNode[] = []
                     let lastIndex = 0

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

@@ -2595,16 +2595,23 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
     }
   }
 
+  // For edit_workflow, hide text display when we have operations (WorkflowEditSummary replaces it)
+  const isEditWorkflow = toolCall.name === 'edit_workflow'
+  const hasOperations = Array.isArray(params.operations) && params.operations.length > 0
+  const hideTextForEditWorkflow = isEditWorkflow && hasOperations
+
   return (
     <div className='w-full'>
-      <div className={isToolNameClickable ? 'cursor-pointer' : ''} onClick={handleToolNameClick}>
-        <ShimmerOverlayText
-          text={displayName}
-          active={isLoadingState}
-          isSpecial={isSpecial}
-          className='font-[470] font-season text-[var(--text-secondary)] text-sm dark:text-[var(--text-muted)]'
-        />
-      </div>
+      {!hideTextForEditWorkflow && (
+        <div className={isToolNameClickable ? 'cursor-pointer' : ''} onClick={handleToolNameClick}>
+          <ShimmerOverlayText
+            text={displayName}
+            active={isLoadingState}
+            isSpecial={isSpecial}
+            className='font-[470] font-season text-[var(--text-secondary)] text-sm dark:text-[var(--text-muted)]'
+          />
+        </div>
+      )}
       {isExpandableTool && expanded && <div className='mt-1.5'>{renderPendingDetails()}</div>}
       {showRemoveAutoAllow && isAutoAllowed && (
         <div className='mt-1.5'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/index.ts

@@ -3,3 +3,4 @@ export { ContextPills } from './context-pills/context-pills'
 export { MentionMenu } from './mention-menu/mention-menu'
 export { ModeSelector } from './mode-selector/mode-selector'
 export { ModelSelector } from './model-selector/model-selector'
+export { SlashMenu } from './slash-menu/slash-menu'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/slash-menu/slash-menu.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import { useMemo } from 'react'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverBackButton,
+  PopoverContent,
+  PopoverFolder,
+  PopoverItem,
+  PopoverScrollArea,
+} from '@/components/emcn'
+import type { useMentionMenu } from '../../hooks/use-mention-menu'
+
+/**
+ * Top-level slash command options
+ */
+const TOP_LEVEL_COMMANDS = [
+  { id: 'plan', label: 'plan' },
+  { id: 'debug', label: 'debug' },
+  { id: 'fast', label: 'fast' },
+  { id: 'superagent', label: 'superagent' },
+  { id: 'deploy', label: 'deploy' },
+] as const
+
+/**
+ * Web submenu commands
+ */
+const WEB_COMMANDS = [
+  { id: 'search', label: 'search' },
+  { id: 'research', label: 'research' },
+  { id: 'crawl', label: 'crawl' },
+  { id: 'read', label: 'read' },
+  { id: 'scrape', label: 'scrape' },
+] as const
+
+/**
+ * All command labels for filtering
+ */
+const ALL_COMMANDS = [...TOP_LEVEL_COMMANDS, ...WEB_COMMANDS]
+
+interface SlashMenuProps {
+  mentionMenu: ReturnType<typeof useMentionMenu>
+  message: string
+  onSelectCommand: (command: string) => void
+}
+
+/**
+ * SlashMenu component for slash command dropdown.
+ * Shows command options when user types '/'.
+ *
+ * @param props - Component props
+ * @returns Rendered slash menu
+ */
+export function SlashMenu({ mentionMenu, message, onSelectCommand }: SlashMenuProps) {
+  const {
+    mentionMenuRef,
+    menuListRef,
+    getActiveSlashQueryAtPosition,
+    getCaretPos,
+    submenuActiveIndex,
+    mentionActiveIndex,
+    openSubmenuFor,
+    setOpenSubmenuFor,
+  } = mentionMenu
+
+  /**
+   * Get the current query string after /
+   */
+  const currentQuery = useMemo(() => {
+    const caretPos = getCaretPos()
+    const active = getActiveSlashQueryAtPosition(caretPos, message)
+    return active?.query.trim().toLowerCase() || ''
+  }, [message, getCaretPos, getActiveSlashQueryAtPosition])
+
+  /**
+   * Filter commands based on query (search across all commands when there's a query)
+   */
+  const filteredCommands = useMemo(() => {
+    if (!currentQuery) return null // Show folder view when no query
+    return ALL_COMMANDS.filter((cmd) => cmd.label.toLowerCase().includes(currentQuery))
+  }, [currentQuery])
+
+  // Show aggregated view when there's a query
+  const showAggregatedView = currentQuery.length > 0
+
+  // Compute caret viewport position via mirror technique for precise anchoring
+  const textareaEl = mentionMenu.textareaRef.current
+  if (!textareaEl) return null
+
+  const getCaretViewport = (textarea: HTMLTextAreaElement, caretPosition: number, text: string) => {
+    const textareaRect = textarea.getBoundingClientRect()
+    const style = window.getComputedStyle(textarea)
+
+    const mirrorDiv = document.createElement('div')
+    mirrorDiv.style.position = 'absolute'
+    mirrorDiv.style.visibility = 'hidden'
+    mirrorDiv.style.whiteSpace = 'pre-wrap'
+    mirrorDiv.style.wordWrap = 'break-word'
+    mirrorDiv.style.font = style.font
+    mirrorDiv.style.padding = style.padding
+    mirrorDiv.style.border = style.border
+    mirrorDiv.style.width = style.width
+    mirrorDiv.style.lineHeight = style.lineHeight
+    mirrorDiv.style.boxSizing = style.boxSizing
+    mirrorDiv.style.letterSpacing = style.letterSpacing
+    mirrorDiv.style.textTransform = style.textTransform
+    mirrorDiv.style.textIndent = style.textIndent
+    mirrorDiv.style.textAlign = style.textAlign
+
+    mirrorDiv.textContent = text.substring(0, caretPosition)
+
+    const caretMarker = document.createElement('span')
+    caretMarker.style.display = 'inline-block'
+    caretMarker.style.width = '0px'
+    caretMarker.style.padding = '0'
+    caretMarker.style.border = '0'
+    mirrorDiv.appendChild(caretMarker)
+
+    document.body.appendChild(mirrorDiv)
+    const markerRect = caretMarker.getBoundingClientRect()
+    const mirrorRect = mirrorDiv.getBoundingClientRect()
+    document.body.removeChild(mirrorDiv)
+
+    const leftOffset = markerRect.left - mirrorRect.left - textarea.scrollLeft
+    const topOffset = markerRect.top - mirrorRect.top - textarea.scrollTop
+
+    return {
+      left: textareaRect.left + leftOffset,
+      top: textareaRect.top + topOffset,
+    }
+  }
+
+  const caretPos = getCaretPos()
+  const caretViewport = getCaretViewport(textareaEl, caretPos, message)
+
+  // Decide preferred side based on available space
+  const margin = 8
+  const spaceAbove = caretViewport.top - margin
+  const spaceBelow = window.innerHeight - caretViewport.top - margin
+  const side: 'top' | 'bottom' = spaceBelow >= spaceAbove ? 'bottom' : 'top'
+
+  // Check if we're in folder navigation mode (no query, not in submenu)
+  const isInFolderNavigationMode = !openSubmenuFor && !showAggregatedView
+
+  return (
+    <Popover
+      open={true}
+      onOpenChange={() => {
+        /* controlled externally */
+      }}
+    >
+      <PopoverAnchor asChild>
+        <div
+          style={{
+            position: 'fixed',
+            top: `${caretViewport.top}px`,
+            left: `${caretViewport.left}px`,
+            width: '1px',
+            height: '1px',
+            pointerEvents: 'none',
+          }}
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        ref={mentionMenuRef}
+        side={side}
+        align='start'
+        collisionPadding={6}
+        maxHeight={360}
+        className='pointer-events-auto'
+        style={{
+          width: `180px`,
+        }}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onCloseAutoFocus={(e) => e.preventDefault()}
+      >
+        <PopoverBackButton />
+        <PopoverScrollArea ref={menuListRef} className='space-y-[2px]'>
+          {openSubmenuFor === 'Web' ? (
+            // Web submenu view
+            <>
+              {WEB_COMMANDS.map((cmd, index) => (
+                <PopoverItem
+                  key={cmd.id}
+                  onClick={() => onSelectCommand(cmd.label)}
+                  data-idx={index}
+                  active={index === submenuActiveIndex}
+                >
+                  <span className='truncate capitalize'>{cmd.label}</span>
+                </PopoverItem>
+              ))}
+            </>
+          ) : showAggregatedView ? (
+            // Aggregated filtered view
+            <>
+              {filteredCommands && filteredCommands.length === 0 ? (
+                <div className='px-[8px] py-[8px] text-[12px] text-[var(--text-muted)]'>
+                  No commands found
+                </div>
+              ) : (
+                filteredCommands?.map((cmd, index) => (
+                  <PopoverItem
+                    key={cmd.id}
+                    onClick={() => onSelectCommand(cmd.label)}
+                    data-idx={index}
+                    active={index === submenuActiveIndex}
+                  >
+                    <span className='truncate capitalize'>{cmd.label}</span>
+                  </PopoverItem>
+                ))
+              )}
+            </>
+          ) : (
+            // Folder navigation view
+            <>
+              {TOP_LEVEL_COMMANDS.map((cmd, index) => (
+                <PopoverItem
+                  key={cmd.id}
+                  onClick={() => onSelectCommand(cmd.label)}
+                  data-idx={index}
+                  active={isInFolderNavigationMode && index === mentionActiveIndex}
+                >
+                  <span className='truncate capitalize'>{cmd.label}</span>
+                </PopoverItem>
+              ))}
+
+              <PopoverFolder
+                id='web'
+                title='Web'
+                onOpen={() => setOpenSubmenuFor('Web')}
+                active={isInFolderNavigationMode && mentionActiveIndex === TOP_LEVEL_COMMANDS.length}
+                data-idx={TOP_LEVEL_COMMANDS.length}
+              >
+                {WEB_COMMANDS.map((cmd) => (
+                  <PopoverItem key={cmd.id} onClick={() => onSelectCommand(cmd.label)}>
+                    <span className='truncate capitalize'>{cmd.label}</span>
+                  </PopoverItem>
+                ))}
+              </PopoverFolder>
+            </>
+          )}
+        </PopoverScrollArea>
+      </PopoverContent>
+    </Popover>
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-context-management.ts

@@ -63,6 +63,9 @@ export function useContextManagement({ message }: UseContextManagementProps) {
           if (c.kind === 'docs') {
             return true // Only one docs context allowed
           }
+          if (c.kind === 'slash_command' && 'command' in context && 'command' in c) {
+            return c.command === (context as any).command
+          }
         }
 
         return false
@@ -103,6 +106,8 @@ export function useContextManagement({ message }: UseContextManagementProps) {
             return (c as any).executionId !== (contextToRemove as any).executionId
           case 'docs':
             return false // Remove docs (only one docs context)
+          case 'slash_command':
+            return (c as any).command !== (contextToRemove as any).command
           default:
             return c.label !== contextToRemove.label
         }
@@ -118,7 +123,7 @@ export function useContextManagement({ message }: UseContextManagementProps) {
   }, [])
 
   /**
-   * Synchronizes selected contexts with inline @label tokens in the message.
+   * Synchronizes selected contexts with inline @label or /label tokens in the message.
    * Removes contexts whose labels are no longer present in the message.
    */
   useEffect(() => {
@@ -130,17 +135,14 @@ export function useContextManagement({ message }: UseContextManagementProps) {
     setSelectedContexts((prev) => {
       if (prev.length === 0) return prev
 
-      const presentLabels = new Set<string>()
-      const labels = prev.map((c) => c.label).filter(Boolean)
-
-      for (const label of labels) {
-        const token = ` @${label} `
-        if (message.includes(token)) {
-          presentLabels.add(label)
-        }
-      }
-
-      const filtered = prev.filter((c) => !!c.label && presentLabels.has(c.label))
+      const filtered = prev.filter((c) => {
+        if (!c.label) return false
+        // Check for slash command tokens or mention tokens based on kind
+        const isSlashCommand = c.kind === 'slash_command'
+        const prefix = isSlashCommand ? '/' : '@'
+        const token = ` ${prefix}${c.label} `
+        return message.includes(token)
+      })
       return filtered.length === prev.length ? prev : filtered
     })
   }, [message])

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-menu.ts

@@ -113,6 +113,62 @@ export function useMentionMenu({
     [message, selectedContexts]
   )
 
+  /**
+   * Finds active slash command query at the given position
+   *
+   * @param pos - Position in the text to check
+   * @param textOverride - Optional text override (for checking during input)
+   * @returns Active slash query object or null if no active slash command
+   */
+  const getActiveSlashQueryAtPosition = useCallback(
+    (pos: number, textOverride?: string) => {
+      const text = textOverride ?? message
+      const before = text.slice(0, pos)
+      const slashIndex = before.lastIndexOf('/')
+      if (slashIndex === -1) return null
+
+      // Ensure '/' starts a token (start or whitespace before)
+      if (slashIndex > 0 && !/\s/.test(before.charAt(slashIndex - 1))) return null
+
+      // Check if this '/' is part of a completed slash token ( /command )
+      if (selectedContexts.length > 0) {
+        const labels = selectedContexts.map((c) => c.label).filter(Boolean) as string[]
+        for (const label of labels) {
+          // Space-wrapped token: " /label "
+          const token = ` /${label} `
+          let fromIndex = 0
+          while (fromIndex <= text.length) {
+            const idx = text.indexOf(token, fromIndex)
+            if (idx === -1) break
+
+            const tokenStart = idx
+            const tokenEnd = idx + token.length
+            const slashPositionInToken = idx + 1 // position of / in " /label "
+
+            if (slashIndex === slashPositionInToken) {
+              return null
+            }
+
+            if (pos > tokenStart && pos < tokenEnd) {
+              return null
+            }
+
+            fromIndex = tokenEnd
+          }
+        }
+      }
+
+      const segment = before.slice(slashIndex + 1)
+      // Close the popup if user types space immediately after /
+      if (segment.length > 0 && /^\s/.test(segment)) {
+        return null
+      }
+
+      return { query: segment, start: slashIndex, end: pos }
+    },
+    [message, selectedContexts]
+  )
+
   /**
    * Gets the submenu query text
    *
@@ -217,6 +273,40 @@ export function useMentionMenu({
     [message, getActiveMentionQueryAtPosition, onMessageChange]
   )
 
+  /**
+   * Replaces active slash command with a label
+   *
+   * @param label - Label to replace the slash command with
+   * @returns True if replacement was successful, false if no active slash command found
+   */
+  const replaceActiveSlashWith = useCallback(
+    (label: string) => {
+      const textarea = textareaRef.current
+      if (!textarea) return false
+      const pos = textarea.selectionStart ?? message.length
+      const active = getActiveSlashQueryAtPosition(pos)
+      if (!active) return false
+
+      const before = message.slice(0, active.start)
+      const after = message.slice(active.end)
+
+      // Always include leading space, avoid duplicate if one exists
+      const needsLeadingSpace = !before.endsWith(' ')
+      const insertion = `${needsLeadingSpace ? ' ' : ''}/${label} `
+
+      const next = `${before}${insertion}${after}`
+      onMessageChange(next)
+
+      setTimeout(() => {
+        const cursorPos = before.length + insertion.length
+        textarea.setSelectionRange(cursorPos, cursorPos)
+        textarea.focus()
+      }, 0)
+      return true
+    },
+    [message, getActiveSlashQueryAtPosition, onMessageChange]
+  )
+
   /**
    * Scrolls active item into view in the menu
    *
@@ -304,10 +394,12 @@ export function useMentionMenu({
     // Operations
     getCaretPos,
     getActiveMentionQueryAtPosition,
+    getActiveSlashQueryAtPosition,
     getSubmenuQuery,
     resetActiveMentionQuery,
     insertAtCursor,
     replaceActiveMentionWith,
+    replaceActiveSlashWith,
     scrollActiveItemIntoView,
     closeMentionMenu,
   }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-tokens.ts

@@ -39,7 +39,7 @@ export function useMentionTokens({
   setSelectedContexts,
 }: UseMentionTokensProps) {
   /**
-   * Computes all mention ranges in the message
+   * Computes all mention ranges in the message (both @mentions and /commands)
    *
    * @returns Array of mention ranges sorted by start position
    */
@@ -55,8 +55,13 @@ export function useMentionTokens({
     const uniqueLabels = Array.from(new Set(labels))
 
     for (const label of uniqueLabels) {
-      // Space-wrapped token: " @label " (search from start)
-      const token = ` @${label} `
+      // Find matching context to determine if it's a slash command
+      const matchingContext = selectedContexts.find((c) => c.label === label)
+      const isSlashCommand = matchingContext?.kind === 'slash_command'
+      const prefix = isSlashCommand ? '/' : '@'
+
+      // Space-wrapped token: " @label " or " /label " (search from start)
+      const token = ` ${prefix}${label} `
       let fromIndex = 0
       while (fromIndex <= message.length) {
         const idx = message.indexOf(token, fromIndex)

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

@@ -21,6 +21,7 @@ import {
   MentionMenu,
   ModelSelector,
   ModeSelector,
+  SlashMenu,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components'
 import { NEAR_TOP_THRESHOLD } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants'
 import {
@@ -123,6 +124,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     const [isNearTop, setIsNearTop] = useState(false)
     const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
     const [inputContainerRef, setInputContainerRef] = useState<HTMLDivElement | null>(null)
+    const [showSlashMenu, setShowSlashMenu] = useState(false)
 
     // Controlled vs uncontrolled message state
     const message = controlledValue !== undefined ? controlledValue : internalMessage
@@ -370,20 +372,113 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }, [onAbort, isLoading])
 
+    const handleSlashCommandSelect = useCallback(
+      (command: string) => {
+        // Capitalize the command for display
+        const capitalizedCommand = command.charAt(0).toUpperCase() + command.slice(1)
+
+        // Replace the active slash query with the capitalized command
+        mentionMenu.replaceActiveSlashWith(capitalizedCommand)
+
+        // Add as a context so it gets highlighted
+        contextManagement.addContext({
+          kind: 'slash_command',
+          command,
+          label: capitalizedCommand,
+        })
+
+        setShowSlashMenu(false)
+        mentionMenu.textareaRef.current?.focus()
+      },
+      [mentionMenu, contextManagement]
+    )
+
     const handleKeyDown = useCallback(
       (e: KeyboardEvent<HTMLTextAreaElement>) => {
         // Escape key handling
-        if (e.key === 'Escape' && mentionMenu.showMentionMenu) {
+        if (e.key === 'Escape' && (mentionMenu.showMentionMenu || showSlashMenu)) {
           e.preventDefault()
           if (mentionMenu.openSubmenuFor) {
             mentionMenu.setOpenSubmenuFor(null)
             mentionMenu.setSubmenuQueryStart(null)
           } else {
             mentionMenu.closeMentionMenu()
+            setShowSlashMenu(false)
           }
           return
         }
 
+        // Arrow navigation in slash menu
+        if (showSlashMenu) {
+          const TOP_LEVEL_COMMANDS = ['plan', 'debug', 'fast', 'superagent', 'deploy']
+          const WEB_COMMANDS = ['search', 'research', 'crawl', 'read', 'scrape']
+          const ALL_COMMANDS = [...TOP_LEVEL_COMMANDS, ...WEB_COMMANDS]
+
+          const caretPos = mentionMenu.getCaretPos()
+          const activeSlash = mentionMenu.getActiveSlashQueryAtPosition(caretPos, message)
+          const query = activeSlash?.query.trim().toLowerCase() || ''
+          const showAggregatedView = query.length > 0
+
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault()
+
+            if (mentionMenu.openSubmenuFor === 'Web') {
+              // Navigate in Web submenu
+              const last = WEB_COMMANDS.length - 1
+              mentionMenu.setSubmenuActiveIndex((prev) => {
+                const next =
+                  e.key === 'ArrowDown' ? (prev >= last ? 0 : prev + 1) : prev <= 0 ? last : prev - 1
+                requestAnimationFrame(() => mentionMenu.scrollActiveItemIntoView(next))
+                return next
+              })
+            } else if (showAggregatedView) {
+              // Navigate in filtered view
+              const filtered = ALL_COMMANDS.filter((cmd) => cmd.includes(query))
+              const last = Math.max(0, filtered.length - 1)
+              mentionMenu.setSubmenuActiveIndex((prev) => {
+                if (filtered.length === 0) return 0
+                const next =
+                  e.key === 'ArrowDown' ? (prev >= last ? 0 : prev + 1) : prev <= 0 ? last : prev - 1
+                requestAnimationFrame(() => mentionMenu.scrollActiveItemIntoView(next))
+                return next
+              })
+            } else {
+              // Navigate in folder view (top-level + Web folder)
+              const totalItems = TOP_LEVEL_COMMANDS.length + 1 // +1 for Web folder
+              const last = totalItems - 1
+              mentionMenu.setMentionActiveIndex((prev) => {
+                const next =
+                  e.key === 'ArrowDown' ? (prev >= last ? 0 : prev + 1) : prev <= 0 ? last : prev - 1
+                requestAnimationFrame(() => mentionMenu.scrollActiveItemIntoView(next))
+                return next
+              })
+            }
+            return
+          }
+
+          // Arrow right to enter Web submenu
+          if (e.key === 'ArrowRight') {
+            e.preventDefault()
+            if (!showAggregatedView && !mentionMenu.openSubmenuFor) {
+              // Check if Web folder is selected (it's after all top-level commands)
+              if (mentionMenu.mentionActiveIndex === TOP_LEVEL_COMMANDS.length) {
+                mentionMenu.setOpenSubmenuFor('Web')
+                mentionMenu.setSubmenuActiveIndex(0)
+              }
+            }
+            return
+          }
+
+          // Arrow left to exit submenu
+          if (e.key === 'ArrowLeft') {
+            e.preventDefault()
+            if (mentionMenu.openSubmenuFor) {
+              mentionMenu.setOpenSubmenuFor(null)
+            }
+            return
+          }
+        }
+
         // Arrow navigation in mention menu
         if (mentionKeyboard.handleArrowNavigation(e)) return
         if (mentionKeyboard.handleArrowRight(e)) return
@@ -392,6 +487,41 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         // Enter key handling
         if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
           e.preventDefault()
+          if (showSlashMenu) {
+            const TOP_LEVEL_COMMANDS = ['plan', 'debug', 'fast', 'superagent', 'deploy']
+            const WEB_COMMANDS = ['search', 'research', 'crawl', 'read', 'scrape']
+            const ALL_COMMANDS = [...TOP_LEVEL_COMMANDS, ...WEB_COMMANDS]
+
+            const caretPos = mentionMenu.getCaretPos()
+            const activeSlash = mentionMenu.getActiveSlashQueryAtPosition(caretPos, message)
+            const query = activeSlash?.query.trim().toLowerCase() || ''
+            const showAggregatedView = query.length > 0
+
+            if (mentionMenu.openSubmenuFor === 'Web') {
+              // Select from Web submenu
+              const selectedCommand = WEB_COMMANDS[mentionMenu.submenuActiveIndex] || WEB_COMMANDS[0]
+              handleSlashCommandSelect(selectedCommand)
+            } else if (showAggregatedView) {
+              // Select from filtered view
+              const filtered = ALL_COMMANDS.filter((cmd) => cmd.includes(query))
+              if (filtered.length > 0) {
+                const selectedCommand = filtered[mentionMenu.submenuActiveIndex] || filtered[0]
+                handleSlashCommandSelect(selectedCommand)
+              }
+            } else {
+              // Folder navigation view
+              const selectedIndex = mentionMenu.mentionActiveIndex
+              if (selectedIndex < TOP_LEVEL_COMMANDS.length) {
+                // Top-level command selected
+                handleSlashCommandSelect(TOP_LEVEL_COMMANDS[selectedIndex])
+              } else if (selectedIndex === TOP_LEVEL_COMMANDS.length) {
+                // Web folder selected - open it
+                mentionMenu.setOpenSubmenuFor('Web')
+                mentionMenu.setSubmenuActiveIndex(0)
+              }
+            }
+            return
+          }
           if (!mentionMenu.showMentionMenu) {
             handleSubmit()
           } else {
@@ -469,7 +599,15 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           }
         }
       },
-      [mentionMenu, mentionKeyboard, handleSubmit, message.length, mentionTokensWithContext]
+      [
+        mentionMenu,
+        mentionKeyboard,
+        handleSubmit,
+        handleSlashCommandSelect,
+        message,
+        mentionTokensWithContext,
+        showSlashMenu,
+      ]
     )
 
     const handleInputChange = useCallback(
@@ -481,9 +619,14 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         if (disableMentions) return
 
         const caret = e.target.selectionStart ?? newValue.length
-        const active = mentionMenu.getActiveMentionQueryAtPosition(caret, newValue)
 
-        if (active) {
+        // Check for @ mention trigger
+        const activeMention = mentionMenu.getActiveMentionQueryAtPosition(caret, newValue)
+        // Check for / slash command trigger
+        const activeSlash = mentionMenu.getActiveSlashQueryAtPosition(caret, newValue)
+
+        if (activeMention) {
+          setShowSlashMenu(false)
           mentionMenu.setShowMentionMenu(true)
           mentionMenu.setInAggregated(false)
           if (mentionMenu.openSubmenuFor) {
@@ -492,10 +635,17 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             mentionMenu.setMentionActiveIndex(0)
             mentionMenu.setSubmenuActiveIndex(0)
           }
+        } else if (activeSlash) {
+          mentionMenu.setShowMentionMenu(false)
+          mentionMenu.setOpenSubmenuFor(null)
+          mentionMenu.setSubmenuQueryStart(null)
+          setShowSlashMenu(true)
+          mentionMenu.setSubmenuActiveIndex(0)
         } else {
           mentionMenu.setShowMentionMenu(false)
           mentionMenu.setOpenSubmenuFor(null)
           mentionMenu.setSubmenuQueryStart(null)
+          setShowSlashMenu(false)
         }
       },
       [setMessage, mentionMenu, disableMentions]
@@ -542,6 +692,32 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       mentionMenu.setSubmenuActiveIndex(0)
     }, [disabled, isLoading, mentionMenu, message, setMessage])
 
+    const handleOpenSlashMenu = useCallback(() => {
+      if (disabled || isLoading) return
+      const textarea = mentionMenu.textareaRef.current
+      if (!textarea) return
+      textarea.focus()
+      const pos = textarea.selectionStart ?? message.length
+      const needsSpaceBefore = pos > 0 && !/\s/.test(message.charAt(pos - 1))
+
+      const insertText = needsSpaceBefore ? ' /' : '/'
+      const start = textarea.selectionStart ?? message.length
+      const end = textarea.selectionEnd ?? message.length
+      const before = message.slice(0, start)
+      const after = message.slice(end)
+      const next = `${before}${insertText}${after}`
+      setMessage(next)
+
+      setTimeout(() => {
+        const newPos = before.length + insertText.length
+        textarea.setSelectionRange(newPos, newPos)
+        textarea.focus()
+      }, 0)
+
+      setShowSlashMenu(true)
+      mentionMenu.setSubmenuActiveIndex(0)
+    }, [disabled, isLoading, mentionMenu, message, setMessage])
+
     const canSubmit = message.trim().length > 0 && !disabled && !isLoading
     const showAbortButton = isLoading && onAbort
 
@@ -643,6 +819,18 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                     <AtSign className='h-3 w-3' strokeWidth={1.75} />
                   </Badge>
 
+                  <Badge
+                    variant='outline'
+                    onClick={handleOpenSlashMenu}
+                    title='Insert /'
+                    className={cn(
+                      'cursor-pointer rounded-[6px] p-[4.5px]',
+                      (disabled || isLoading) && 'cursor-not-allowed'
+                    )}
+                  >
+                    <span className='flex h-3 w-3 items-center justify-center text-[11px] font-medium leading-none'>/</span>
+                  </Badge>
+
                   {/* Selected Context Pills */}
                   <ContextPills
                     contexts={contextManagement.selectedContexts}
@@ -717,6 +905,18 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                 />,
                 document.body
               )}
+
+            {/* Slash Menu Portal */}
+            {!disableMentions &&
+              showSlashMenu &&
+              createPortal(
+                <SlashMenu
+                  mentionMenu={mentionMenu}
+                  message={message}
+                  onSelectCommand={handleSlashCommandSelect}
+                />,
+                document.body
+              )}
           </div>
 
           {/* Bottom Row: Mode Selector + Model Selector + Attach Button + Send Button */}

apps/sim/lib/copilot/api.ts

@@ -99,6 +99,7 @@ export interface SendMessageRequest {
     workflowId?: string
     executionId?: string
   }>
+  commands?: string[]
 }
 
 /**

apps/sim/lib/copilot/tools/client/other/crawl-website.ts

@@ -0,0 +1,54 @@
+import { Globe, Loader2, MinusCircle, XCircle } from 'lucide-react'
+import {
+  BaseClientTool,
+  type BaseClientToolMetadata,
+  ClientToolCallState,
+} from '@/lib/copilot/tools/client/base-tool'
+
+export class CrawlWebsiteClientTool extends BaseClientTool {
+  static readonly id = 'crawl_website'
+
+  constructor(toolCallId: string) {
+    super(toolCallId, CrawlWebsiteClientTool.id, CrawlWebsiteClientTool.metadata)
+  }
+
+  static readonly metadata: BaseClientToolMetadata = {
+    displayNames: {
+      [ClientToolCallState.generating]: { text: 'Crawling website', icon: Loader2 },
+      [ClientToolCallState.pending]: { text: 'Crawling website', icon: Loader2 },
+      [ClientToolCallState.executing]: { text: 'Crawling website', icon: Loader2 },
+      [ClientToolCallState.success]: { text: 'Crawled website', icon: Globe },
+      [ClientToolCallState.error]: { text: 'Failed to crawl website', icon: XCircle },
+      [ClientToolCallState.aborted]: { text: 'Aborted crawling website', icon: MinusCircle },
+      [ClientToolCallState.rejected]: { text: 'Skipped crawling website', icon: MinusCircle },
+    },
+    interrupt: undefined,
+    getDynamicText: (params, state) => {
+      if (params?.url && typeof params.url === 'string') {
+        const url = params.url
+        const truncated = url.length > 50 ? `${url.slice(0, 50)}...` : url
+
+        switch (state) {
+          case ClientToolCallState.success:
+            return `Crawled ${truncated}`
+          case ClientToolCallState.executing:
+          case ClientToolCallState.generating:
+          case ClientToolCallState.pending:
+            return `Crawling ${truncated}`
+          case ClientToolCallState.error:
+            return `Failed to crawl ${truncated}`
+          case ClientToolCallState.aborted:
+            return `Aborted crawling ${truncated}`
+          case ClientToolCallState.rejected:
+            return `Skipped crawling ${truncated}`
+        }
+      }
+      return undefined
+    },
+  }
+
+  async execute(): Promise<void> {
+    return
+  }
+}
+

apps/sim/lib/copilot/tools/client/other/get-page-contents.ts

@@ -0,0 +1,55 @@
+import { FileText, Loader2, MinusCircle, XCircle } from 'lucide-react'
+import {
+  BaseClientTool,
+  type BaseClientToolMetadata,
+  ClientToolCallState,
+} from '@/lib/copilot/tools/client/base-tool'
+
+export class GetPageContentsClientTool extends BaseClientTool {
+  static readonly id = 'get_page_contents'
+
+  constructor(toolCallId: string) {
+    super(toolCallId, GetPageContentsClientTool.id, GetPageContentsClientTool.metadata)
+  }
+
+  static readonly metadata: BaseClientToolMetadata = {
+    displayNames: {
+      [ClientToolCallState.generating]: { text: 'Getting page contents', icon: Loader2 },
+      [ClientToolCallState.pending]: { text: 'Getting page contents', icon: Loader2 },
+      [ClientToolCallState.executing]: { text: 'Getting page contents', icon: Loader2 },
+      [ClientToolCallState.success]: { text: 'Retrieved page contents', icon: FileText },
+      [ClientToolCallState.error]: { text: 'Failed to get page contents', icon: XCircle },
+      [ClientToolCallState.aborted]: { text: 'Aborted getting page contents', icon: MinusCircle },
+      [ClientToolCallState.rejected]: { text: 'Skipped getting page contents', icon: MinusCircle },
+    },
+    interrupt: undefined,
+    getDynamicText: (params, state) => {
+      if (params?.urls && Array.isArray(params.urls) && params.urls.length > 0) {
+        const firstUrl = String(params.urls[0])
+        const truncated = firstUrl.length > 40 ? `${firstUrl.slice(0, 40)}...` : firstUrl
+        const count = params.urls.length
+
+        switch (state) {
+          case ClientToolCallState.success:
+            return count > 1 ? `Retrieved ${count} pages` : `Retrieved ${truncated}`
+          case ClientToolCallState.executing:
+          case ClientToolCallState.generating:
+          case ClientToolCallState.pending:
+            return count > 1 ? `Getting ${count} pages` : `Getting ${truncated}`
+          case ClientToolCallState.error:
+            return count > 1 ? `Failed to get ${count} pages` : `Failed to get ${truncated}`
+          case ClientToolCallState.aborted:
+            return count > 1 ? `Aborted getting ${count} pages` : `Aborted getting ${truncated}`
+          case ClientToolCallState.rejected:
+            return count > 1 ? `Skipped getting ${count} pages` : `Skipped getting ${truncated}`
+        }
+      }
+      return undefined
+    },
+  }
+
+  async execute(): Promise<void> {
+    return
+  }
+}
+

apps/sim/lib/copilot/tools/client/other/scrape-page.ts

@@ -0,0 +1,54 @@
+import { Globe, Loader2, MinusCircle, XCircle } from 'lucide-react'
+import {
+  BaseClientTool,
+  type BaseClientToolMetadata,
+  ClientToolCallState,
+} from '@/lib/copilot/tools/client/base-tool'
+
+export class ScrapePageClientTool extends BaseClientTool {
+  static readonly id = 'scrape_page'
+
+  constructor(toolCallId: string) {
+    super(toolCallId, ScrapePageClientTool.id, ScrapePageClientTool.metadata)
+  }
+
+  static readonly metadata: BaseClientToolMetadata = {
+    displayNames: {
+      [ClientToolCallState.generating]: { text: 'Scraping page', icon: Loader2 },
+      [ClientToolCallState.pending]: { text: 'Scraping page', icon: Loader2 },
+      [ClientToolCallState.executing]: { text: 'Scraping page', icon: Loader2 },
+      [ClientToolCallState.success]: { text: 'Scraped page', icon: Globe },
+      [ClientToolCallState.error]: { text: 'Failed to scrape page', icon: XCircle },
+      [ClientToolCallState.aborted]: { text: 'Aborted scraping page', icon: MinusCircle },
+      [ClientToolCallState.rejected]: { text: 'Skipped scraping page', icon: MinusCircle },
+    },
+    interrupt: undefined,
+    getDynamicText: (params, state) => {
+      if (params?.url && typeof params.url === 'string') {
+        const url = params.url
+        const truncated = url.length > 50 ? `${url.slice(0, 50)}...` : url
+
+        switch (state) {
+          case ClientToolCallState.success:
+            return `Scraped ${truncated}`
+          case ClientToolCallState.executing:
+          case ClientToolCallState.generating:
+          case ClientToolCallState.pending:
+            return `Scraping ${truncated}`
+          case ClientToolCallState.error:
+            return `Failed to scrape ${truncated}`
+          case ClientToolCallState.aborted:
+            return `Aborted scraping ${truncated}`
+          case ClientToolCallState.rejected:
+            return `Skipped scraping ${truncated}`
+        }
+      }
+      return undefined
+    },
+  }
+
+  async execute(): Promise<void> {
+    return
+  }
+}
+

apps/sim/lib/copilot/tools/client/other/search-online.ts

@@ -1,19 +1,9 @@
-import { createLogger } from '@sim/logger'
 import { Globe, Loader2, MinusCircle, XCircle } from 'lucide-react'
 import {
   BaseClientTool,
   type BaseClientToolMetadata,
   ClientToolCallState,
 } from '@/lib/copilot/tools/client/base-tool'
-import { ExecuteResponseSuccessSchema } from '@/lib/copilot/tools/shared/schemas'
-
-interface SearchOnlineArgs {
-  query: string
-  num?: number
-  type?: string
-  gl?: string
-  hl?: string
-}
 
 export class SearchOnlineClientTool extends BaseClientTool {
   static readonly id = 'search_online'
@@ -32,6 +22,7 @@ export class SearchOnlineClientTool extends BaseClientTool {
       [ClientToolCallState.rejected]: { text: 'Skipped online search', icon: MinusCircle },
       [ClientToolCallState.aborted]: { text: 'Aborted online search', icon: XCircle },
     },
+    interrupt: undefined,
     getDynamicText: (params, state) => {
       if (params?.query && typeof params.query === 'string') {
         const query = params.query
@@ -56,28 +47,7 @@ export class SearchOnlineClientTool extends BaseClientTool {
     },
   }
 
-  async execute(args?: SearchOnlineArgs): Promise<void> {
-    const logger = createLogger('SearchOnlineClientTool')
-    try {
-      this.setState(ClientToolCallState.executing)
-      const res = await fetch('/api/copilot/execute-copilot-server-tool', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ toolName: 'search_online', payload: args || {} }),
-      })
-      if (!res.ok) {
-        const txt = await res.text().catch(() => '')
-        throw new Error(txt || `Server error (${res.status})`)
-      }
-      const json = await res.json()
-      const parsed = ExecuteResponseSuccessSchema.parse(json)
-      this.setState(ClientToolCallState.success)
-      await this.markToolComplete(200, 'Online search complete', parsed.result)
-      this.setState(ClientToolCallState.success)
-    } catch (e: any) {
-      logger.error('execute failed', { message: e?.message })
-      this.setState(ClientToolCallState.error)
-      await this.markToolComplete(500, e?.message || 'Search failed')
-    }
+  async execute(): Promise<void> {
+    return
   }
 }

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

@@ -43,6 +43,9 @@ import { ResearchClientTool } from '@/lib/copilot/tools/client/other/research'
 import { SearchDocumentationClientTool } from '@/lib/copilot/tools/client/other/search-documentation'
 import { SearchErrorsClientTool } from '@/lib/copilot/tools/client/other/search-errors'
 import { SearchLibraryDocsClientTool } from '@/lib/copilot/tools/client/other/search-library-docs'
+import { CrawlWebsiteClientTool } from '@/lib/copilot/tools/client/other/crawl-website'
+import { GetPageContentsClientTool } from '@/lib/copilot/tools/client/other/get-page-contents'
+import { ScrapePageClientTool } from '@/lib/copilot/tools/client/other/scrape-page'
 import { SearchOnlineClientTool } from '@/lib/copilot/tools/client/other/search-online'
 import { SearchPatternsClientTool } from '@/lib/copilot/tools/client/other/search-patterns'
 import { SleepClientTool } from '@/lib/copilot/tools/client/other/sleep'
@@ -120,6 +123,9 @@ const CLIENT_TOOL_INSTANTIATORS: Record<string, (id: string) => any> = {
   search_library_docs: (id) => new SearchLibraryDocsClientTool(id),
   search_patterns: (id) => new SearchPatternsClientTool(id),
   search_errors: (id) => new SearchErrorsClientTool(id),
+  scrape_page: (id) => new ScrapePageClientTool(id),
+  get_page_contents: (id) => new GetPageContentsClientTool(id),
+  crawl_website: (id) => new CrawlWebsiteClientTool(id),
   remember_debug: (id) => new RememberDebugClientTool(id),
   set_environment_variables: (id) => new SetEnvironmentVariablesClientTool(id),
   get_credentials: (id) => new GetCredentialsClientTool(id),
@@ -179,6 +185,9 @@ export const CLASS_TOOL_METADATA: Record<string, BaseClientToolMetadata | undefi
   search_library_docs: (SearchLibraryDocsClientTool as any)?.metadata,
   search_patterns: (SearchPatternsClientTool as any)?.metadata,
   search_errors: (SearchErrorsClientTool as any)?.metadata,
+  scrape_page: (ScrapePageClientTool as any)?.metadata,
+  get_page_contents: (GetPageContentsClientTool as any)?.metadata,
+  crawl_website: (CrawlWebsiteClientTool as any)?.metadata,
   remember_debug: (RememberDebugClientTool as any)?.metadata,
   set_environment_variables: (SetEnvironmentVariablesClientTool as any)?.metadata,
   get_credentials: (GetCredentialsClientTool as any)?.metadata,
@@ -2515,6 +2524,13 @@ export const useCopilotStore = create<CopilotStore>()(
         // Call copilot API
         const apiMode: 'ask' | 'agent' | 'plan' =
           mode === 'ask' ? 'ask' : mode === 'plan' ? 'plan' : 'agent'
+
+        // Extract slash commands from contexts (lowercase) and filter them out from contexts
+        const commands = contexts
+          ?.filter((c) => c.kind === 'slash_command' && 'command' in c)
+          .map((c) => (c as any).command.toLowerCase()) as string[] | undefined
+        const filteredContexts = contexts?.filter((c) => c.kind !== 'slash_command')
+
         const result = await sendStreamingMessage({
           message: messageToSend,
           userMessageId: userMessage.id,
@@ -2526,7 +2542,8 @@ export const useCopilotStore = create<CopilotStore>()(
           createNewChat: !currentChat,
           stream,
           fileAttachments,
-          contexts,
+          contexts: filteredContexts,
+          commands: commands?.length ? commands : undefined,
           abortSignal: abortController.signal,
         })
 

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

@@ -85,6 +85,7 @@ export type ChatContext =
   | { kind: 'knowledge'; knowledgeId?: string; label: string }
   | { kind: 'templates'; templateId?: string; label: string }
   | { kind: 'docs'; label: string }
+  | { kind: 'slash_command'; command: string; label: string }
 
 import type { CopilotChat as ApiCopilotChat } from '@/lib/copilot/api'