cli: FAST / MAX toggle (shift + tab or click)

Author: jahooma

cli/src/chat.tsx

@@ -2,6 +2,7 @@ import { useRenderer } from '@opentui/react'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 
+import { AgentModeToggle } from './components/agent-mode-toggle'
 import { MultilineInput } from './components/multiline-input'
 import { Separator } from './components/separator'
 import { StatusIndicator, useHasStatus } from './components/status-indicator'
@@ -104,6 +105,8 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
     setActiveSubagents,
     isChainInProgress,
     setIsChainInProgress,
+    agentMode,
+    toggleAgentMode,
   } = useChatStore(
     useShallow((store) => ({
       inputValue: store.inputValue,
@@ -126,6 +129,8 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
       setActiveSubagents: store.setActiveSubagents,
       isChainInProgress: store.isChainInProgress,
       setIsChainInProgress: store.setIsChainInProgress,
+      agentMode: store.agentMode,
+      toggleAgentMode: store.toggleAgentMode,
     })),
   )
 
@@ -397,7 +402,9 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
   )
 
   const sendMessageRef =
-    useRef<(content: string, onComplete?: () => void) => Promise<void>>()
+    useRef<
+      (content: string, params: { agentMode: 'FAST' | 'MAX' }) => Promise<void>
+    >()
 
   const {
     queuedMessages,
@@ -411,7 +418,8 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
     setCanProcessQueue,
     setIsStreaming,
   } = useMessageQueue(
-    (content: string) => sendMessageRef.current?.(content) ?? Promise.resolve(),
+    (content: string) =>
+      sendMessageRef.current?.(content, { agentMode }) ?? Promise.resolve(),
     isChainInProgressRef,
     activeAgentStreamsRef,
   )
@@ -444,14 +452,14 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
       const timeout = setTimeout(() => {
         logger.info({ prompt: initialPrompt }, 'Auto-submitting initial prompt')
         if (sendMessageRef.current) {
-          sendMessageRef.current(initialPrompt)
+          sendMessageRef.current(initialPrompt, { agentMode })
         }
       }, 100)
 
       return () => clearTimeout(timeout)
     }
     return undefined
-  }, [initialPrompt])
+  }, [initialPrompt, agentMode])
 
   const hasStatus = useHasStatus(isWaitingForResponse, clipboardMessage)
 
@@ -473,7 +481,7 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
       return
     }
 
-    sendMessage(trimmed)
+    sendMessage(trimmed, { agentMode })
 
     setTimeout(() => {
       scrollToLatest()
@@ -500,6 +508,7 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
     setCollapsedAgents,
     navigateUp,
     navigateDown,
+    toggleAgentMode,
   })
 
   const { tree: messageTree, topLevelMessages } = useMemo(
@@ -637,6 +646,11 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
             </text>
           </>
         )}
+        <AgentModeToggle
+          mode={agentMode}
+          theme={theme}
+          onToggle={toggleAgentMode}
+        />
         <Separator theme={theme} width={renderer.width} />
         {slashContext.active && slashSuggestionItems.length > 0 ? (
           <SuggestionMenu

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

@@ -0,0 +1,34 @@
+import type { ChatTheme } from '../utils/theme-system'
+
+export const AgentModeToggle = ({
+  mode,
+  theme,
+  onToggle,
+}: {
+  mode: 'FAST' | 'MAX'
+  theme: ChatTheme
+  onToggle: () => void
+}) => {
+  const isFast = mode === 'FAST'
+
+  const bgColor = isFast ? '#12852e' : '#ac1626'
+  const textColor = '#ffffff'
+  const label = isFast ? 'FAST' : '💪 MAX'
+
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        alignSelf: 'flex-end',
+        backgroundColor: bgColor,
+        paddingLeft: isFast ? 2 : 1,
+        paddingRight: isFast ? 2 : 1,
+      }}
+      onMouseDown={onToggle}
+    >
+      <text wrap={false}>
+        <span fg={textColor}>{label}</span>
+      </text>
+    </box>
+  )
+}

cli/src/hooks/use-keyboard-handlers.ts

@@ -14,6 +14,7 @@ interface KeyboardHandlersConfig {
   setCollapsedAgents: React.Dispatch<React.SetStateAction<Set<string>>>
   navigateUp: () => void
   navigateDown: () => void
+  toggleAgentMode: () => void
 }
 
 export const useKeyboardHandlers = ({
@@ -27,6 +28,7 @@ export const useKeyboardHandlers = ({
   setCollapsedAgents,
   navigateUp,
   navigateDown,
+  toggleAgentMode,
 }: KeyboardHandlersConfig) => {
   useKeyboard(
     useCallback(
@@ -150,4 +152,25 @@ export const useKeyboardHandlers = ({
       [navigateUp, navigateDown],
     ),
   )
+
+  useKeyboard(
+    useCallback(
+      (key) => {
+        const isShiftTab =
+          key.shift && key.name === 'tab' && !key.ctrl && !key.meta
+
+        if (!isShiftTab) return
+
+        if (
+          'preventDefault' in key &&
+          typeof key.preventDefault === 'function'
+        ) {
+          key.preventDefault()
+        }
+
+        toggleAgentMode()
+      },
+      [toggleAgentMode],
+    ),
+  )
 }

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

@@ -107,7 +107,6 @@ interface UseSendMessageOptions {
   setIsStreaming: (streaming: boolean) => void
   setCanProcessQueue: (can: boolean) => void
   abortControllerRef: React.MutableRefObject<AbortController | null>
-  agentMode: 'FAST' | 'MAX'
 }
 
 export const useSendMessage = ({
@@ -127,7 +126,6 @@ export const useSendMessage = ({
   setIsStreaming,
   setCanProcessQueue,
   abortControllerRef,
-  agentMode,
 }: UseSendMessageOptions) => {
   const previousRunStateRef = useRef<any>(null)
   const spawnAgentsMapRef = useRef<
@@ -253,7 +251,8 @@ export const useSendMessage = ({
   }, [flushPendingUpdates])
 
   const sendMessage = useCallback(
-    async (content: string) => {
+    async (content: string, params: { agentMode: 'FAST' | 'MAX' }) => {
+      const { agentMode } = params
       const timestamp = formatTimestamp()
       const userMessage: ChatMessage = {
         id: `user-${Date.now()}`,
@@ -557,8 +556,9 @@ export const useSendMessage = ({
         // Load local agent definitions from .agents directory
         const agentDefinitions = loadAgentDefinitions()
 
+        const agent = agentMode === 'FAST' ? 'base2-fast' : 'base2-max'
         const result = await client.run({
-          agent: 'base',
+          agent,
           prompt: content,
           previousRun: previousRunStateRef.current,
           signal: abortController.signal,

cli/src/state/chat-store.ts

@@ -17,6 +17,7 @@ export type ChatStoreState = {
   isChainInProgress: boolean
   slashSelectedIndex: number
   agentSelectedIndex: number
+  agentMode: 'FAST' | 'MAX'
 }
 
 type ChatStoreActions = {
@@ -30,6 +31,8 @@ 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
+  toggleAgentMode: () => void
   reset: () => void
 }
 
@@ -56,6 +59,7 @@ const initialState: ChatStoreState = {
   isChainInProgress: false,
   slashSelectedIndex: 0,
   agentSelectedIndex: 0,
+  agentMode: 'FAST',
 }
 
 export const useChatStore = create<ChatStore>()(immer((set) => ({
@@ -111,6 +115,16 @@ export const useChatStore = create<ChatStore>()(immer((set) => ({
       state.agentSelectedIndex = typeof value === 'function' ? value(state.agentSelectedIndex) : value
     }),
 
+  setAgentMode: (mode) =>
+    set((state) => {
+      state.agentMode = mode
+    }),
+
+  toggleAgentMode: () =>
+    set((state) => {
+      state.agentMode = state.agentMode === 'FAST' ? 'MAX' : 'FAST'
+    }),
+
   reset: () =>
     set((state) => {
       state.messages = initialState.messages.slice()
@@ -123,5 +137,6 @@ export const useChatStore = create<ChatStore>()(immer((set) => ({
       state.isChainInProgress = initialState.isChainInProgress
       state.slashSelectedIndex = initialState.slashSelectedIndex
       state.agentSelectedIndex = initialState.agentSelectedIndex
+      state.agentMode = initialState.agentMode
     }),
 })))