create handleSlashCommands router

Author: charleslien

cli/src/chat.tsx

@@ -1,7 +1,7 @@
-import { TextAttributes } from '@opentui/core'
-import { useRenderer, useTerminalDimensions } from '@opentui/react'
 import os from 'os'
 import path from 'path'
+
+import { useRenderer, useTerminalDimensions } from '@opentui/react'
 import React, {
   type ReactNode,
   useCallback,
@@ -15,14 +15,14 @@ import { useShallow } from 'zustand/react/shallow'
 
 import { AgentModeToggle } from './components/agent-mode-toggle'
 import { LoginModal } from './components/login-modal'
-import { TerminalLink } from './components/terminal-link'
 import {
   MultilineInput,
   type MultilineInputHandle,
 } from './components/multiline-input'
 import { Separator } from './components/separator'
 import { StatusIndicator, useHasStatus } from './components/status-indicator'
 import { SuggestionMenu } from './components/suggestion-menu'
+import { TerminalLink } from './components/terminal-link'
 import { SLASH_COMMANDS } from './data/slash-commands'
 import { useAgentValidation } from './hooks/use-agent-validation'
 import { useAuthQuery, useLogoutMutation } from './hooks/use-auth-query'
@@ -35,30 +35,32 @@ import { useMessageQueue } from './hooks/use-message-queue'
 import { useMessageRenderer } from './hooks/use-message-renderer'
 import { useChatScrollbox } from './hooks/use-scroll-management'
 import { useSendMessage } from './hooks/use-send-message'
-import type { SendMessageTimerEvent } from './hooks/use-send-message'
 import { useSuggestionEngine } from './hooks/use-suggestion-engine'
 import { useSystemThemeDetector } from './hooks/use-system-theme-detector'
 import { useChatStore } from './state/chat-store'
 import { flushAnalytics } from './utils/analytics'
 import { getUserCredentials } from './utils/auth'
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
+import { createValidationErrorBlocks } from './utils/create-validation-error-blocks'
 import { formatQueuedPreview } from './utils/helpers'
 import {
   loadLocalAgents,
   type LocalAgentInfo,
 } from './utils/local-agent-registry'
 import { logger } from './utils/logger'
 import { buildMessageTree } from './utils/message-tree-utils'
+import { openFileAtPath } from './utils/open-file'
+import { handleSlashCommands } from './utils/slash-commands'
 import {
   chatThemes,
   createMarkdownPalette,
   type ChatTheme,
 } from './utils/theme-system'
-import { openFileAtPath } from './utils/open-file'
 import { formatValidationError } from './utils/validation-error-formatting'
-import { createValidationErrorBlocks } from './utils/create-validation-error-blocks'
 
+import type { SendMessageTimerEvent } from './hooks/use-send-message'
 import type { User } from './utils/auth'
+import type { AgentMode } from './utils/constants'
 import type { ToolName } from '@codebuff/sdk'
 import type { ScrollBoxRenderable } from '@opentui/core'
 
@@ -788,7 +790,7 @@ export const App = ({
 
   const sendMessageRef =
     useRef<
-      (content: string, params: { agentMode: 'FAST' | 'MAX' }) => Promise<void>
+      (content: string, params: { agentMode: AgentMode }) => Promise<void>
     >()
 
   const {
@@ -885,86 +887,41 @@ export const App = ({
     mainAgentTimer,
   )
 
-  const handleSubmit = useCallback(() => {
-    const trimmed = inputValue.trim()
-    if (!trimmed) return
-
-    const normalized = trimmed.startsWith('/') ? trimmed.slice(1) : trimmed
-    const cmd = normalized.split(/\s+/)[0].toLowerCase()
-    if (cmd === 'login' || cmd === 'signin') {
-      const msg = {
-        id: `sys-${Date.now()}`,
-        variant: 'ai' as const,
-        content: "You're already in the app. Use /logout to switch accounts.",
-        timestamp: new Date().toISOString(),
-      }
-      setMessages((prev) => [...prev, msg])
-      setInputValue('')
-      return
-    }
-    if (cmd === 'logout' || cmd === 'signout') {
-      abortControllerRef.current?.abort()
-      stopStreaming()
-      setCanProcessQueue(false)
-
-      logoutMutation.mutate(undefined, {
-        onSettled: () => {
-          const msg = {
-            id: `sys-${Date.now()}`,
-            variant: 'ai' as const,
-            content: 'Logged out.',
-            timestamp: new Date().toISOString(),
-          }
-          setMessages((prev) => [...prev, msg])
-          setInputValue('')
-          setTimeout(() => {
-            setUser(null)
-            setIsAuthenticated(false)
-          }, 300)
-        },
-      })
-      return
-    }
-
-    if (cmd === 'exit' || cmd === 'quit') {
-      abortControllerRef.current?.abort()
-      stopStreaming()
-      setCanProcessQueue(false)
-      setInputValue('')
-      handleCtrlC()
-      return
-    }
-
-    saveToHistory(trimmed)
-    setInputValue('')
-
-    if (
-      isStreaming ||
-      streamMessageIdRef.current ||
-      isChainInProgressRef.current
-    ) {
-      addToQueue(trimmed)
-      setInputFocused(true)
-      inputRef.current?.focus()
-      return
-    }
-
-    sendMessage(trimmed, { agentMode })
-
-    setTimeout(() => {
-      scrollToLatest()
-    }, 0)
-  }, [
-    inputValue,
-    isStreaming,
-    sendMessage,
-    saveToHistory,
-    addToQueue,
-    streamMessageIdRef,
-    isChainInProgressRef,
-    scrollToLatest,
-    handleCtrlC,
-  ])
+  const handleSubmit = useCallback(
+    () => handleSlashCommands({
+      abortControllerRef,
+      agentMode,
+      inputRef,
+      inputValue,
+      isChainInProgressRef,
+      isStreaming,
+      logoutMutation,
+      streamMessageIdRef,
+      addToQueue,
+      handleCtrlC,
+      saveToHistory,
+      scrollToLatest,
+      sendMessage,
+      setCanProcessQueue,
+      setInputFocused,
+      setInputValue,
+      setIsAuthenticated,
+      setMessages,
+      setUser,
+      stopStreaming,
+    }),
+    [
+      inputValue,
+      isStreaming,
+      sendMessage,
+      saveToHistory,
+      addToQueue,
+      streamMessageIdRef,
+      isChainInProgressRef,
+      scrollToLatest,
+      handleCtrlC,
+    ],
+  )
 
   useKeyboardHandlers({
     isStreaming,

cli/src/components/agent-mode-toggle.tsx

@@ -1,11 +1,12 @@
+import { AgentMode } from '../utils/constants'
 import type { ChatTheme } from '../utils/theme-system'
 
 export const AgentModeToggle = ({
   mode,
   theme,
   onToggle,
 }: {
-  mode: 'FAST' | 'MAX'
+  mode: AgentMode,
   theme: ChatTheme
   onToggle: () => void
 }) => {

cli/src/hooks/use-send-message.ts

@@ -2,16 +2,17 @@ import { useCallback, useEffect, useRef } from 'react'
 
 import { getCodebuffClient, formatToolOutput } from '../utils/codebuff-client'
 import { shouldHideAgent } from '../utils/constants'
+import { createValidationErrorBlocks } from '../utils/create-validation-error-blocks'
 import { formatTimestamp } from '../utils/helpers'
 import { loadAgentDefinitions } from '../utils/load-agent-definitions'
-import { logger } from '../utils/logger'
 import { getLoadedAgentsData } from '../utils/local-agent-registry'
-import { createValidationErrorBlocks } from '../utils/create-validation-error-blocks'
+import { logger } from '../utils/logger'
 
 import type { ChatMessage, ContentBlock } from '../chat'
+import type { ElapsedTimeTracker } from './use-elapsed-time'
+import type { AgentMode } from '../utils/constants'
 import type { AgentDefinition, ToolName } from '@codebuff/sdk'
 import type { SetStateAction } from 'react'
-import type { ElapsedTimeTracker } from './use-elapsed-time'
 
 const hiddenToolNames = new Set<ToolName | 'spawn_agent_inline'>([
   'spawn_agent_inline',
@@ -350,7 +351,7 @@ export const useSendMessage = ({
   }, [flushPendingUpdates])
 
   const sendMessage = useCallback(
-    async (content: string, params: { agentMode: 'FAST' | 'MAX' }) => {
+    async (content: string, params: { agentMode: AgentMode }) => {
       const { agentMode } = params
       const timestamp = formatTimestamp()
 
@@ -410,7 +411,10 @@ export const useSendMessage = ({
           return
         }
       } catch (error) {
-        logger.error({ error }, 'Validation before message send failed with exception')
+        logger.error(
+          { error },
+          'Validation before message send failed with exception',
+        )
 
         const errorMessage: ChatMessage = {
           id: `error-${Date.now()}`,
@@ -1420,7 +1424,8 @@ export const useSendMessage = ({
 
         const elapsedMs = timerResult?.elapsedMs ?? 0
         const elapsedSeconds = Math.floor(elapsedMs / 1000)
-        const completionTime = elapsedSeconds > 0 ? `${elapsedSeconds}s` : undefined
+        const completionTime =
+          elapsedSeconds > 0 ? `${elapsedSeconds}s` : undefined
 
         applyMessageUpdate((prev) =>
           prev.map((msg) =>

cli/src/state/chat-store.ts

@@ -2,9 +2,8 @@ import { enableMapSet } from 'immer'
 import { create } from 'zustand'
 import { immer } from 'zustand/middleware/immer'
 
-import { formatTimestamp } from '../utils/helpers'
-
 import type { ChatMessage } from '../chat'
+import type { AgentMode } from '../utils/constants'
 
 export type ChatStoreState = {
   messages: ChatMessage[]
@@ -17,7 +16,7 @@ export type ChatStoreState = {
   isChainInProgress: boolean
   slashSelectedIndex: number
   agentSelectedIndex: number
-  agentMode: 'FAST' | 'MAX'
+  agentMode: AgentMode
 }
 
 type ChatStoreActions = {
@@ -41,7 +40,7 @@ type ChatStoreActions = {
   setIsChainInProgress: (active: boolean) => void
   setSlashSelectedIndex: (value: number | ((prev: number) => number)) => void
   setAgentSelectedIndex: (value: number | ((prev: number) => number)) => void
-  setAgentMode: (mode: 'FAST' | 'MAX') => void
+  setAgentMode: (mode: AgentMode) => void
   toggleAgentMode: () => void
   reset: () => void
 }

cli/src/utils/constants.ts

@@ -7,3 +7,6 @@ export const HIDDEN_AGENT_IDS = ['codebuff/context-pruner'] as const
 export const shouldHideAgent = (agentId: string): boolean => {
   return HIDDEN_AGENT_IDS.some((hiddenId) => agentId.includes(hiddenId))
 }
+
+const agentModes = ['FAST', 'MAX'] as const
+export type AgentMode = (typeof agentModes)[number]