Plan mode: Build Fast & Build Max buttons!

Author: jahooma

cli/src/chat.tsx

@@ -8,6 +8,7 @@ import { useShallow } from 'zustand/react/shallow'
 
 import { routeUserPrompt } from './commands/router'
 import { AgentModeToggle } from './components/agent-mode-toggle'
+import { BuildModeButtons } from './components/build-mode-buttons'
 import { LoginModal } from './components/login-modal'
 import {
   MultilineInput,
@@ -302,7 +303,10 @@ export const App = ({
     isChainInProgress,
     setIsChainInProgress,
     agentMode,
+    setAgentMode,
     toggleAgentMode,
+    hasReceivedPlanResponse,
+    setHasReceivedPlanResponse,
     resetChatStore,
   } = useChatStore(
     useShallow((store) => ({
@@ -327,7 +331,10 @@ export const App = ({
       isChainInProgress: store.isChainInProgress,
       setIsChainInProgress: store.setIsChainInProgress,
       agentMode: store.agentMode,
+      setAgentMode: store.setAgentMode,
       toggleAgentMode: store.toggleAgentMode,
+      hasReceivedPlanResponse: store.hasReceivedPlanResponse,
+      setHasReceivedPlanResponse: store.setHasReceivedPlanResponse,
       resetChatStore: store.reset,
     })),
   )
@@ -555,7 +562,7 @@ export const App = ({
 
       const hasModifier = Boolean(key.ctrl || key.meta || key.alt || key.option)
 
-      function selectCurrent() {
+      function selectCurrent(): boolean {
         const selected = slashMatches[slashSelectedIndex] ?? slashMatches[0]
         if (!selected) {
           return
@@ -574,6 +581,7 @@ export const App = ({
         helpers.setValue(newValue)
         helpers.setCursorPosition(before.length + replacement.length)
         setSlashSelectedIndex(0)
+        return true
       }
 
       if (key.name === 'down' && !hasModifier) {
@@ -640,7 +648,7 @@ export const App = ({
 
       const hasModifier = Boolean(key.ctrl || key.meta || key.alt || key.option)
 
-      function selectCurrent() {
+      function selectCurrent(): boolean {
         const selected = agentMatches[agentSelectedIndex] ?? agentMatches[0]
         if (!selected) {
           return
@@ -660,6 +668,7 @@ export const App = ({
         helpers.setValue(newValue)
         helpers.setCursorPosition(before.length + replacement.length)
         setAgentSelectedIndex(0)
+        return true
       }
 
       if (key.name === 'down' && !hasModifier) {
@@ -806,6 +815,7 @@ export const App = ({
     scrollToLatest,
     availableWidth: separatorWidth,
     onTimerEvent: handleTimerEvent,
+    setHasReceivedPlanResponse,
   })
 
   sendMessageRef.current = sendMessage
@@ -872,6 +882,28 @@ export const App = ({
     ],
   )
 
+  const handleBuildFast = useCallback(() => {
+    setAgentMode('FAST')
+    setInputValue('Build it!')
+    setTimeout(() => {
+      if (sendMessageRef.current) {
+        sendMessageRef.current({ content: 'Build it!', agentMode: 'FAST' })
+      }
+      setInputValue('')
+    }, 0)
+  }, [setAgentMode, setInputValue])
+
+  const handleBuildMax = useCallback(() => {
+    setAgentMode('MAX')
+    setInputValue('Build it!')
+    setTimeout(() => {
+      if (sendMessageRef.current) {
+        sendMessageRef.current({ content: 'Build it!', agentMode: 'MAX' })
+      }
+      setInputValue('')
+    }, 0)
+  }, [setAgentMode, setInputValue])
+
   useKeyboardHandlers({
     isStreaming,
     isWaitingForResponse,
@@ -1154,6 +1186,13 @@ export const App = ({
           </box>
         )}
         <Separator theme={theme} width={separatorWidth} />
+        {agentMode === 'PLAN' && hasReceivedPlanResponse && (
+          <BuildModeButtons
+            theme={theme}
+            onBuildFast={handleBuildFast}
+            onBuildMax={handleBuildMax}
+          />
+        )}
         {slashContext.active && slashSuggestionItems.length > 0 ? (
           <SuggestionMenu
             items={slashSuggestionItems}

cli/src/components/build-mode-buttons.tsx

@@ -0,0 +1,52 @@
+import type { ChatTheme } from '../types/theme-system'
+
+export const BuildModeButtons = ({
+  theme,
+  onBuildFast,
+  onBuildMax,
+}: {
+  theme: ChatTheme
+  onBuildFast: () => void
+  onBuildMax: () => void
+}) => {
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        gap: 2,
+        paddingTop: 1,
+        paddingBottom: 1,
+        paddingLeft: 1,
+      }}
+    >
+      <box
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: '#0a6515',
+          paddingLeft: 2,
+          paddingRight: 2,
+        }}
+        onMouseDown={onBuildFast}
+      >
+        <text wrap={false}>
+          <span fg="#ffffff">Build Fast</span>
+        </text>
+      </box>
+      <box
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: '#ac1626',
+          paddingLeft: 2,
+          paddingRight: 2,
+        }}
+        onMouseDown={onBuildMax}
+      >
+        <text wrap={false}>
+          <span fg="#ffffff">Build Max</span>
+        </text>
+      </box>
+    </box>
+  )
+}

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

@@ -164,6 +164,7 @@ interface UseSendMessageOptions {
   scrollToLatest: () => void
   availableWidth?: number
   onTimerEvent?: (event: SendMessageTimerEvent) => void
+  setHasReceivedPlanResponse: (value: boolean) => void
 }
 
 export const useSendMessage = ({
@@ -189,6 +190,7 @@ export const useSendMessage = ({
   scrollToLatest,
   availableWidth = 80,
   onTimerEvent = () => {},
+  setHasReceivedPlanResponse,
 }: UseSendMessageOptions): {
   sendMessage: SendMessageFn
   clearMessages: () => void
@@ -325,6 +327,10 @@ export const useSendMessage = ({
       const { content, agentMode, postUserMessage } = params
       const timestamp = formatTimestamp()
 
+      if (agentMode !== 'PLAN') {
+        setHasReceivedPlanResponse(false)
+      }
+
       const timerController = createSendMessageTimerController({
         mainAgentTimer,
         onTimerEvent,
@@ -1373,6 +1379,10 @@ export const useSendMessage = ({
         setIsWaitingForResponse(false)
         const timerResult = timerController.stop('success')
 
+        if (agentMode === 'PLAN') {
+          setHasReceivedPlanResponse(true)
+        }
+
         if ((result as any)?.credits !== undefined) {
           actualCredits = (result as any).credits
         }
@@ -1486,6 +1496,7 @@ export const useSendMessage = ({
       mainAgentTimer,
       scrollToLatest,
       availableWidth,
+      setHasReceivedPlanResponse,
     ],
   )
 

cli/src/state/chat-store.ts

@@ -17,6 +17,7 @@ export type ChatStoreState = {
   slashSelectedIndex: number
   agentSelectedIndex: number
   agentMode: AgentMode
+  hasReceivedPlanResponse: boolean
 }
 
 type ChatStoreActions = {
@@ -42,6 +43,7 @@ type ChatStoreActions = {
   setAgentSelectedIndex: (value: number | ((prev: number) => number)) => void
   setAgentMode: (mode: AgentMode) => void
   toggleAgentMode: () => void
+  setHasReceivedPlanResponse: (value: boolean) => void
   reset: () => void
 }
 
@@ -61,6 +63,7 @@ const initialState: ChatStoreState = {
   slashSelectedIndex: 0,
   agentSelectedIndex: 0,
   agentMode: 'FAST',
+  hasReceivedPlanResponse: false,
 }
 
 export const useChatStore = create<ChatStore>()(
@@ -141,6 +144,11 @@ export const useChatStore = create<ChatStore>()(
         }
       }),
 
+    setHasReceivedPlanResponse: (value) =>
+      set((state) => {
+        state.hasReceivedPlanResponse = value
+      }),
+
     reset: () =>
       set((state) => {
         state.messages = initialState.messages.slice()
@@ -154,6 +162,7 @@ export const useChatStore = create<ChatStore>()(
         state.slashSelectedIndex = initialState.slashSelectedIndex
         state.agentSelectedIndex = initialState.agentSelectedIndex
         state.agentMode = initialState.agentMode
+        state.hasReceivedPlanResponse = initialState.hasReceivedPlanResponse
       }),
   })),
 )