[codecane] feat(cli): add agent status line and hover delay to mode toggle

- Add status line below input showing current agent display name
- Look up agent name from loadedAgentsData based on mode
- Map modes to default agent IDs (base2-fast, base2-max, base2-plan)
- Add 250ms hover delay before opening toggle menu
- Right-align agent status under toggle
- Refactor agent ID lookup with object mapping

Author: brandonkachen

cli/src/chat.tsx

@@ -57,6 +57,12 @@ import type { ScrollBoxRenderable } from '@opentui/core'
 const MAX_VIRTUALIZED_TOP_LEVEL = 60
 const VIRTUAL_OVERSCAN = 12
 
+const DEFAULT_AGENT_IDS = {
+  FAST: 'base2-fast',
+  MAX: 'base2-max',
+  PLAN: 'base2-plan',
+} as const
+
 export const App = ({
   initialPrompt,
   agentId,
@@ -198,10 +204,6 @@ export const App = ({
       ? repoRoot
       : `~/${relativePath}`
 
-    const agentSectionHeader = agentId
-      ? `**Active agent: ${agentId}**`
-      : undefined
-
     const buildBlocks = (listId: string): ContentBlock[] => {
       const blocks: ContentBlock[] = [
         {
@@ -244,16 +246,6 @@ export const App = ({
         agentsDir: loadedAgentsData.agentsDir,
       })
 
-      if (agentSectionHeader) {
-        blocks.push({
-          type: 'text',
-          content: agentSectionHeader,
-          marginTop: 1,
-          marginBottom: 0,
-          color: baseTextColor,
-        })
-      }
-
       return blocks
     }
 
@@ -390,6 +382,15 @@ export const App = ({
     })),
   )
 
+  // Get current agent display name based on mode
+  const agentDisplayName = useMemo(() => {
+    if (!loadedAgentsData) return null
+
+    const currentAgentId = agentId || DEFAULT_AGENT_IDS[agentMode]
+    const agent = loadedAgentsData.agents.find((a) => a.id === currentAgentId)
+    return agent?.displayName || currentAgentId
+  }, [loadedAgentsData, agentId, agentMode])
+
   // Handle successful login
   const handleLoginSuccess = useCallback(
     (loggedInUser: User) => {
@@ -1288,6 +1289,21 @@ export const App = ({
           </box>
         </box>
         <Separator width={separatorWidth} />
+        {/* Agent status line - right-aligned under toggle */}
+        {loadedAgentsData && (
+          <box
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'flex-end',
+              paddingRight: 1,
+              paddingTop: 0,
+            }}
+          >
+            <text>
+              <span fg={theme.muted}>Agent: {agentDisplayName}</span>
+            </text>
+          </box>
+        )}
       </box>
 
       {/* Login Modal Overlay - show when not authenticated and done checking */}

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

@@ -39,6 +39,7 @@ export const AgentModeToggle = ({
   const config = getModeConfig(theme)
   const [isOpen, setIsOpen] = useState(false)
   const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const openTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
   const handlePress = (selectedMode: AgentMode) => {
     if (selectedMode === mode) {
@@ -61,10 +62,24 @@ export const AgentModeToggle = ({
       clearTimeout(closeTimeoutRef.current)
       closeTimeoutRef.current = null
     }
-    setIsOpen(true)
+
+    // If already open, do nothing
+    if (isOpen) return
+
+    // Delay opening by 500ms
+    openTimeoutRef.current = setTimeout(() => {
+      setIsOpen(true)
+      openTimeoutRef.current = null
+    }, 250)
   }
 
   const handleMouseOut = () => {
+    // Cancel any pending open
+    if (openTimeoutRef.current) {
+      clearTimeout(openTimeoutRef.current)
+      openTimeoutRef.current = null
+    }
+
     // Delay closing by 1 second
     closeTimeoutRef.current = setTimeout(() => {
       setIsOpen(false)
@@ -111,10 +126,7 @@ export const AgentModeToggle = ({
   }
 
   // Expanded state: show all modes with current mode rightmost
-  const orderedModes = [
-    ...ALL_MODES.filter((m) => m !== mode),
-    mode,
-  ]
+  const orderedModes = [...ALL_MODES.filter((m) => m !== mode), mode]
 
   // Calculate widths for each segment
   const segmentWidths = orderedModes.map((m) => {