feat(cli): selection menu for agent modes

Author: brandonkachen

cli/src/chat.tsx

@@ -1280,7 +1280,11 @@ export const App = ({
               paddingLeft: 2,
             }}
           >
-            <AgentModeToggle mode={agentMode} onToggle={toggleAgentMode} />
+            <AgentModeToggle
+              mode={agentMode}
+              onToggle={toggleAgentMode}
+              onSelectMode={setAgentMode}
+            />
           </box>
         </box>
         <Separator width={separatorWidth} />

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

@@ -1,4 +1,5 @@
-import { RaisedPill } from './raised-pill'
+import React, { useState } from 'react'
+import stringWidth from 'string-width'
 import { useTheme } from '../hooks/use-theme'
 
 import type { AgentMode } from '../utils/constants'
@@ -14,32 +15,171 @@ const getModeConfig = (theme: ChatTheme) =>
     MAX: {
       frameColor: theme.modeMaxBg,
       textColor: theme.modeMaxText,
-      label: '💪 MAX',
+      label: 'MAX',
     },
     PLAN: {
       frameColor: theme.modePlanBg,
       textColor: theme.modePlanText,
-      label: '📋 PLAN',
+      label: 'PLAN',
     },
   }) as const
 
+const ALL_MODES: AgentMode[] = ['FAST', 'MAX', 'PLAN']
+
 export const AgentModeToggle = ({
   mode,
   onToggle,
+  onSelectMode,
 }: {
   mode: AgentMode
   onToggle: () => void
+  onSelectMode?: (mode: AgentMode) => void
 }) => {
   const theme = useTheme()
   const config = getModeConfig(theme)
-  const { frameColor, textColor, label } = config[mode]
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handlePress = (selectedMode: AgentMode) => {
+    if (selectedMode === mode) {
+      // Toggle collapsed/expanded when clicking current mode
+      setIsOpen(!isOpen)
+    } else {
+      // Switch to different mode and close the toggle
+      if (onSelectMode) {
+        onSelectMode(selectedMode)
+      } else {
+        onToggle()
+      }
+      setIsOpen(false)
+    }
+  }
+
+  if (!isOpen) {
+    // Collapsed state: show only current mode
+    const { frameColor, textColor, label } = config[mode]
+    const arrow = ' <'
+    const contentText = ` ${label}${arrow} `
+    const contentWidth = stringWidth(contentText)
+    const horizontal = '─'.repeat(contentWidth)
+
+    return (
+      <box
+        style={{
+          flexDirection: 'column',
+          gap: 0,
+          backgroundColor: 'transparent',
+        }}
+        onMouseDown={() => handlePress(mode)}
+      >
+        <text>
+          <span fg={frameColor}>{`╭${horizontal}╮`}</span>
+        </text>
+        <text>
+          <span fg={frameColor}>│</span>
+          <span fg={textColor}>{contentText}</span>
+          <span fg={frameColor}>│</span>
+        </text>
+        <text>
+          <span fg={frameColor}>{`╰${horizontal}╯`}</span>
+        </text>
+      </box>
+    )
+  }
+
+  // Expanded state: show all modes with current mode rightmost
+  const orderedModes = [
+    ...ALL_MODES.filter((m) => m !== mode),
+    mode,
+  ]
+
+  // Calculate widths for each segment
+  const segmentWidths = orderedModes.map((m) => {
+    const label = config[m].label
+    if (m === mode) {
+      // Active mode shows label with collapse arrow
+      return stringWidth(` ${label} > `)
+    }
+    return stringWidth(` ${label} `)
+  })
+
+  const buildSegment = (
+    modeItem: AgentMode,
+    index: number,
+    isLast: boolean,
+  ) => {
+    const { frameColor, textColor, label } = config[modeItem]
+    const isActive = modeItem === mode
+    const width = segmentWidths[index]
+    const content = isActive ? ` ${label} > ` : ` ${label} `
+    const horizontal = '─'.repeat(width)
+
+    return {
+      topBorder: isLast ? `${horizontal}╮` : `${horizontal}┬`,
+      content,
+      bottomBorder: isLast ? `${horizontal}╯` : `${horizontal}┴`,
+      frameColor,
+      textColor,
+    }
+  }
+
+  const segments = orderedModes.map((m, idx) =>
+    buildSegment(m, idx, idx === orderedModes.length - 1),
+  )
 
   return (
-    <RaisedPill
-      segments={[{ text: label, fg: textColor }]}
-      frameColor={frameColor}
-      textColor={textColor}
-      onPress={onToggle}
-    />
+    <box
+      style={{
+        flexDirection: 'column',
+        gap: 0,
+        backgroundColor: 'transparent',
+      }}
+    >
+      {/* Top border */}
+      <text>
+        <span fg={segments[0].frameColor}>╭</span>
+        {segments.map((seg, idx) => (
+          <span key={`top-${idx}`} fg={seg.frameColor}>
+            {seg.topBorder}
+          </span>
+        ))}
+      </text>
+
+      {/* Content row with clickable segments */}
+      <box
+        style={{
+          flexDirection: 'row',
+          gap: 0,
+        }}
+      >
+        <text>
+          <span fg={segments[0].frameColor}>│</span>
+        </text>
+        {segments.map((seg, idx) => {
+          const modeItem = orderedModes[idx]
+          return (
+            <React.Fragment key={`content-${idx}`}>
+              <box onMouseDown={() => handlePress(modeItem)}>
+                <text>
+                  <span fg={seg.textColor}>{seg.content}</span>
+                </text>
+              </box>
+              <text>
+                <span fg={seg.frameColor}>│</span>
+              </text>
+            </React.Fragment>
+          )
+        })}
+      </box>
+
+      {/* Bottom border */}
+      <text>
+        <span fg={segments[0].frameColor}>╰</span>
+        {segments.map((seg, idx) => (
+          <span key={`bottom-${idx}`} fg={seg.frameColor}>
+            {seg.bottomBorder}
+          </span>
+        ))}
+      </text>
+    </box>
   )
 }