feat(cli): add click and hover support to suggestion menus

- Make slash command and @ mention menu items clickable
- Add hover highlighting with hasHoveredSinceOpen pattern
- Hover only activates after mouse movement to avoid false highlights
- Reset hover state when menu items change

Author: brandonkachen

cli/src/chat.tsx

@@ -635,6 +635,62 @@ export const Chat = ({
     })
   })
 
+  // Click handlers for suggestion menu items
+  const handleSlashItemClick = useCallback(
+    (index: number) => {
+      const selected = slashMatches[index]
+      if (!selected || slashContext.startIndex < 0) return
+      const before = inputValue.slice(0, slashContext.startIndex)
+      const after = inputValue.slice(
+        slashContext.startIndex + 1 + slashContext.query.length,
+      )
+      const replacement = `/${selected.id} `
+      setInputValue({
+        text: before + replacement + after,
+        cursorPosition: before.length + replacement.length,
+        lastEditDueToNav: false,
+      })
+      setSlashSelectedIndex(0)
+    },
+    [slashMatches, slashContext, inputValue, setInputValue, setSlashSelectedIndex],
+  )
+
+  const handleMentionItemClick = useCallback(
+    (index: number) => {
+      if (mentionContext.startIndex < 0) return
+
+      let replacement: string
+      if (index < agentMatches.length) {
+        const selected = agentMatches[index]
+        if (!selected) return
+        replacement = `@${selected.displayName} `
+      } else {
+        const fileIndex = index - agentMatches.length
+        const selectedFile = fileMatches[fileIndex]
+        if (!selectedFile) return
+        replacement = `@${selectedFile.filePath} `
+      }
+      const before = inputValue.slice(0, mentionContext.startIndex)
+      const after = inputValue.slice(
+        mentionContext.startIndex + 1 + mentionContext.query.length,
+      )
+      setInputValue({
+        text: before + replacement + after,
+        cursorPosition: before.length + replacement.length,
+        lastEditDueToNav: false,
+      })
+      setAgentSelectedIndex(0)
+    },
+    [
+      mentionContext,
+      agentMatches,
+      fileMatches,
+      inputValue,
+      setInputValue,
+      setAgentSelectedIndex,
+    ],
+  )
+
   const { inputWidth, handleBuildFast, handleBuildMax } = useChatInput({
     setInputValue,
     agentMode,
@@ -1228,6 +1284,8 @@ export const Chat = ({
           fileSuggestionItems={fileSuggestionItems}
           slashSelectedIndex={slashSelectedIndex}
           agentSelectedIndex={agentSelectedIndex}
+          onSlashItemClick={handleSlashItemClick}
+          onMentionItemClick={handleMentionItemClick}
           theme={theme}
           terminalHeight={terminalHeight}
           separatorWidth={separatorWidth}

cli/src/components/chat-input-bar.tsx

@@ -44,6 +44,8 @@ interface ChatInputBarProps {
   fileSuggestionItems: SuggestionItem[]
   slashSelectedIndex: number
   agentSelectedIndex: number
+  onSlashItemClick?: (index: number) => void
+  onMentionItemClick?: (index: number) => void
 
   // Layout
   theme: Theme
@@ -82,6 +84,8 @@ export const ChatInputBar = ({
   fileSuggestionItems,
   slashSelectedIndex,
   agentSelectedIndex,
+  onSlashItemClick,
+  onMentionItemClick,
   theme,
   terminalHeight,
   separatorWidth,
@@ -287,6 +291,7 @@ export const ChatInputBar = ({
             selectedIndex={slashSelectedIndex}
             maxVisible={5}
             prefix="/"
+            onItemClick={onSlashItemClick}
           />
         ) : null}
         {hasMentionSuggestions ? (
@@ -295,6 +300,7 @@ export const ChatInputBar = ({
             selectedIndex={agentSelectedIndex}
             maxVisible={5}
             prefix="@"
+            onItemClick={onMentionItemClick}
           />
         ) : null}
         <box
@@ -361,6 +367,7 @@ export const ChatInputBar = ({
             selectedIndex={slashSelectedIndex}
             maxVisible={10}
             prefix="/"
+            onItemClick={onSlashItemClick}
           />
         ) : null}
         {hasMentionSuggestions ? (
@@ -369,6 +376,7 @@ export const ChatInputBar = ({
             selectedIndex={agentSelectedIndex}
             maxVisible={10}
             prefix="@"
+            onItemClick={onMentionItemClick}
           />
         ) : null}
         <box

cli/src/components/suggestion-menu.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
+import { Button } from './button'
 import { HighlightedSubsequenceText } from './highlighted-text'
 import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
 import { useTheme } from '../hooks/use-theme'
@@ -17,19 +18,31 @@ interface SuggestionMenuProps {
   selectedIndex: number
   maxVisible: number
   prefix?: string
+  onItemClick?: (index: number) => void
 }
 
 export const SuggestionMenu = ({
   items,
   selectedIndex,
   maxVisible,
   prefix = '/',
+  onItemClick,
 }: SuggestionMenuProps) => {
   const theme = useTheme()
   const { terminalWidth } = useTerminalDimensions()
   const screenPadding = 4
   const menuWidth = Math.max(10, terminalWidth - screenPadding * 2)
 
+  // Hover state: only highlight on hover after user has moved mouse
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const [hasHoveredSinceOpen, setHasHoveredSinceOpen] = useState(false)
+
+  // Reset hover state when items change (new menu session)
+  useEffect(() => {
+    setHasHoveredSinceOpen(false)
+    setHoveredIndex(null)
+  }, [items])
+
   if (items.length === 0) {
     return null
   }
@@ -66,27 +79,37 @@ export const SuggestionMenu = ({
   const renderSuggestionItem = (item: SuggestionItem, idx: number) => {
     const absoluteIndex = start + idx
     const isSelected = absoluteIndex === clampedSelected
+    const isHovered = hasHoveredSinceOpen && absoluteIndex === hoveredIndex
+    const isHighlighted = isSelected || isHovered
     const labelLength = effectivePrefix.length + item.label.length
-    const textColor = isSelected ? theme.foreground : theme.inputFg
-    const descriptionColor = isSelected ? theme.foreground : theme.muted
+    const textColor = isHighlighted ? theme.foreground : theme.inputFg
+    const descriptionColor = isHighlighted ? theme.foreground : theme.muted
     const highlightColor = theme.primary
 
+    const handleClick = onItemClick ? () => onItemClick(absoluteIndex) : undefined
+    const handleMouseOver = () => {
+      setHoveredIndex(absoluteIndex)
+      setHasHoveredSinceOpen(true)
+    }
+
     if (useSameLine) {
       // Calculate padding to align descriptions
       const paddingLength = maxLabelLength - labelLength
       const padding = ' '.repeat(paddingLength)
       // Wide terminal: description on same line with 2-space gap
       return (
-        <box
+        <Button
           key={item.id}
+          onClick={handleClick}
+          onMouseOver={handleMouseOver}
           style={{
             flexDirection: 'column',
             gap: 0,
             paddingLeft: 1,
             paddingRight: 1,
             paddingTop: 0,
             paddingBottom: 0,
-            backgroundColor: isSelected ? theme.surfaceHover : theme.background,
+            backgroundColor: isHighlighted ? theme.surfaceHover : theme.background,
             width: '100%',
           }}
         >
@@ -111,21 +134,23 @@ export const SuggestionMenu = ({
               highlightColor={highlightColor}
             />
           </text>
-        </box>
+        </Button>
       )
     } else {
       // Narrow terminal: description on next line
       return (
-        <box
+        <Button
           key={item.id}
+          onClick={handleClick}
+          onMouseOver={handleMouseOver}
           style={{
             flexDirection: 'column',
             gap: 0,
             paddingLeft: 1,
             paddingRight: 1,
             paddingTop: 0,
             paddingBottom: 0,
-            backgroundColor: isSelected ? theme.surfaceHover : theme.background,
+            backgroundColor: isHighlighted ? theme.surfaceHover : theme.background,
             width: '100%',
           }}
         >
@@ -157,7 +182,7 @@ export const SuggestionMenu = ({
               highlightColor={highlightColor}
             />
           </text>
-        </box>
+        </Button>
       )
     }
   }
@@ -174,6 +199,7 @@ export const SuggestionMenu = ({
         backgroundColor: theme.surface,
         width: '100%',
       }}
+      onMouseOut={() => setHoveredIndex(null)}
     >
       {visibleItems.map(renderSuggestionItem)}
     </box>