feat(tui): add mouse support to menus

packages/opencode/src/cli/cmd/tui/component/hoverable-label.tsx

@@ -0,0 +1,51 @@
+import { RGBA } from "@opentui/core"
+import { createSignal, createUniqueId, onCleanup, type JSX } from "solid-js"
+import { useTheme, selectedForeground } from "@tui/context/theme"
+
+const [activeId, setActiveId] = createSignal<string | null>(null)
+
+type HoverableLabelProps = {
+  children: (hover: boolean, hoverFg: () => RGBA) => JSX.Element
+  onClick?: () => void
+  disabled?: boolean
+}
+
+export function HoverableLabel(props: HoverableLabelProps) {
+  const id = createUniqueId()
+  const { theme } = useTheme()
+  const hoverFg = () => selectedForeground(theme)
+
+  const isHovered = () => activeId() === id && !props.disabled
+
+  onCleanup(() => {
+    if (activeId() !== id) return
+    setActiveId(null)
+  })
+
+  const handleMouseOver = () => {
+    if (props.disabled) return
+    setActiveId(id)
+  }
+
+  const handleMouseOut = () => {
+    if (activeId() !== id) return
+    setActiveId(null)
+  }
+
+  const handleClick = () => {
+    if (props.disabled) return
+    setActiveId(null)
+    props.onClick?.()
+  }
+
+  return (
+    <box
+      backgroundColor={isHovered() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onMouseUp={handleClick}
+    >
+      {props.children(isHovered(), hoverFg)}
+    </box>
+  )
+}

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -30,6 +30,9 @@ import { DialogAlert } from "../../ui/dialog-alert"
 import { useToast } from "../../ui/toast"
 import { useKV } from "../../context/kv"
 import { useTextareaKeybindings } from "../textarea-keybindings"
+import { DialogAgent } from "../dialog-agent"
+import { DialogModel } from "../dialog-model"
+import { HoverableLabel } from "../hoverable-label"
 
 export type PromptProps = {
   sessionID?: string
@@ -932,22 +935,30 @@ export function Prompt(props: PromptProps) {
               syntaxStyle={syntax()}
             />
             <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1}>
-              <text fg={highlight()}>
-                {store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
-              </text>
-              <Show when={store.mode === "normal"}>
-                <box flexDirection="row" gap={1}>
-                  <text flexShrink={0} fg={keybind.leader ? theme.textMuted : theme.text}>
-                    {local.model.parsed().model}
+              <HoverableLabel disabled={store.mode === "shell"} onClick={() => dialog.replace(() => <DialogAgent />)}>
+                {(hover, hoverFg) => (
+                  <text fg={hover ? hoverFg() : highlight()}>
+                    {store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
                   </text>
-                  <text fg={theme.textMuted}>{local.model.parsed().provider}</text>
-                  <Show when={showVariant()}>
-                    <text fg={theme.textMuted}>·</text>
-                    <text>
-                      <span style={{ fg: theme.warning, bold: true }}>{local.model.variant.current()}</span>
-                    </text>
-                  </Show>
-                </box>
+                )}
+              </HoverableLabel>
+              <Show when={store.mode === "normal"}>
+                <HoverableLabel onClick={() => dialog.replace(() => <DialogModel />)}>
+                  {(hover, hoverFg) => (
+                    <box flexDirection="row" gap={1}>
+                      <text flexShrink={0} fg={hover ? hoverFg() : keybind.leader ? theme.textMuted : theme.text}>
+                        {local.model.parsed().model}
+                      </text>
+                      <text fg={hover ? hoverFg() : theme.textMuted}>{local.model.parsed().provider}</text>
+                      <Show when={showVariant()}>
+                        <text fg={hover ? hoverFg() : theme.textMuted}>·</text>
+                        <text>
+                          <span style={{ fg: theme.warning, bold: true }}>{local.model.variant.current()}</span>
+                        </text>
+                      </Show>
+                    </box>
+                  )}
+                </HoverableLabel>
               </Show>
             </box>
           </box>
@@ -1062,12 +1073,22 @@ export function Prompt(props: PromptProps) {
             <box gap={2} flexDirection="row">
               <Switch>
                 <Match when={store.mode === "normal"}>
-                  <text fg={theme.text}>
-                    {keybind.print("agent_cycle")} <span style={{ fg: theme.textMuted }}>switch agent</span>
-                  </text>
-                  <text fg={theme.text}>
-                    {keybind.print("command_list")} <span style={{ fg: theme.textMuted }}>commands</span>
-                  </text>
+                  <HoverableLabel onClick={() => dialog.replace(() => <DialogAgent />)}>
+                    {(hover, hoverFg) => (
+                      <text fg={hover ? hoverFg() : theme.text}>
+                        {keybind.print("agent_cycle")} {" "}
+                        <span style={{ fg: hover ? hoverFg() : theme.textMuted }}>switch agent</span>
+                      </text>
+                    )}
+                  </HoverableLabel>
+                  <HoverableLabel onClick={() => command.show()}>
+                    {(hover, hoverFg) => (
+                      <text fg={hover ? hoverFg() : theme.text}>
+                        {keybind.print("command_list")} {" "}
+                        <span style={{ fg: hover ? hoverFg() : theme.textMuted }}>commands</span>
+                      </text>
+                    )}
+                  </HoverableLabel>
                 </Match>
                 <Match when={store.mode === "shell"}>
                   <text fg={theme.text}>