From 3b4a7fa8e9e9ce1d7f10b835223cc172ad2a6b1a Mon Sep 17 00:00:00 2001
From: scarf <greenscarf005@gmail.com>
Date: Tue, 6 Jan 2026 17:27:58 +0900
Subject: [PATCH 1/2] feat(tui): add mouse support to menus

---
 .../cli/cmd/tui/component/prompt/index.tsx    | 80 +++++++++++++++----
 1 file changed, 65 insertions(+), 15 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
index 4558914cb7e..8e5680dec8b 100644
--- a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
@@ -1,8 +1,8 @@
-import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, t, dim, fg } from "@opentui/core"
+import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, t, dim, fg, RGBA } from "@opentui/core"
 import { createEffect, createMemo, type JSX, onMount, createSignal, onCleanup, Show, Switch, Match } from "solid-js"
 import "opentui-spinner/solid"
 import { useLocal } from "@tui/context/local"
-import { useTheme } from "@tui/context/theme"
+import { useTheme, selectedForeground } from "@tui/context/theme"
 import { EmptyBorder } from "@tui/component/border"
 import { useSDK } from "@tui/context/sdk"
 import { useRoute } from "@tui/context/route"
@@ -30,6 +30,8 @@ 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"
 
 export type PromptProps = {
   sessionID?: string
@@ -73,6 +75,13 @@ export function Prompt(props: PromptProps) {
   const { theme, syntax } = useTheme()
   const kv = useKV()
 
+  const hoverFg = createMemo(() => selectedForeground(theme))
+
+  const [agentHover, setAgentHover] = createSignal(false)
+  const [modelNameHover, setModelNameHover] = createSignal(false)
+  const [agentCycleHover, setAgentCycleHover] = createSignal(false)
+  const [commandListHover, setCommandListHover] = createSignal(false)
+
   function promptModelWarning() {
     toast.show({
       variant: "warning",
@@ -932,17 +941,42 @@ 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>
+              <box
+                backgroundColor={agentHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
+                onMouseOver={() => {
+                  if (store.mode === "shell") return
+                  setAgentHover(true)
+                }}
+                onMouseOut={() => setAgentHover(false)}
+                onMouseUp={() => {
+                  if (store.mode === "shell") return
+                  dialog.replace(() => <DialogAgent />)
+                }}
+              >
+                <text fg={agentHover() ? hoverFg() : highlight()}>
+                  {store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
+                </text>
+              </box>
               <Show when={store.mode === "normal"}>
-                <box flexDirection="row" gap={1}>
-                  <text flexShrink={0} fg={keybind.leader ? theme.textMuted : theme.text}>
+                <box
+                  flexDirection="row"
+                  gap={1}
+                  backgroundColor={modelNameHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
+                  onMouseOver={() => setModelNameHover(true)}
+                  onMouseOut={() => setModelNameHover(false)}
+                  onMouseUp={() => {
+                    dialog.replace(() => <DialogModel />)
+                  }}
+                >
+                  <text
+                    flexShrink={0}
+                    fg={modelNameHover() ? hoverFg() : keybind.leader ? theme.textMuted : theme.text}
+                  >
                     {local.model.parsed().model}
                   </text>
-                  <text fg={theme.textMuted}>{local.model.parsed().provider}</text>
+                  <text fg={modelNameHover() ? hoverFg() : theme.textMuted}>{local.model.parsed().provider}</text>
                   <Show when={showVariant()}>
-                    <text fg={theme.textMuted}>·</text>
+                    <text fg={modelNameHover() ? hoverFg() : theme.textMuted}>·</text>
                     <text>
                       <span style={{ fg: theme.warning, bold: true }}>{local.model.variant.current()}</span>
                     </text>
@@ -1062,12 +1096,28 @@ 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>
+                  <box
+                    backgroundColor={agentCycleHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
+                    onMouseOver={() => setAgentCycleHover(true)}
+                    onMouseOut={() => setAgentCycleHover(false)}
+                    onMouseUp={() => dialog.replace(() => <DialogAgent />)}
+                  >
+                    <text fg={agentCycleHover() ? hoverFg() : theme.text}>
+                      {keybind.print("agent_cycle")} {" "}
+                      <span style={{ fg: agentCycleHover() ? hoverFg() : theme.textMuted }}>switch agent</span>
+                    </text>
+                  </box>
+                  <box
+                    backgroundColor={commandListHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
+                    onMouseOver={() => setCommandListHover(true)}
+                    onMouseOut={() => setCommandListHover(false)}
+                    onMouseUp={() => command.show()}
+                  >
+                    <text fg={commandListHover() ? hoverFg() : theme.text}>
+                      {keybind.print("command_list")} {" "}
+                      <span style={{ fg: commandListHover() ? hoverFg() : theme.textMuted }}>commands</span>
+                    </text>
+                  </box>
                 </Match>
                 <Match when={store.mode === "shell"}>
                   <text fg={theme.text}>

From ddc8f9e00571d2a4e97a677375067d480b3d1bdf Mon Sep 17 00:00:00 2001
From: scarf <greenscarf005@gmail.com>
Date: Tue, 6 Jan 2026 17:31:31 +0900
Subject: [PATCH 2/2] refactor(tui): create and use `HoverableLabel`

---
 .../cli/cmd/tui/component/hoverable-label.tsx |  51 ++++++++
 .../cli/cmd/tui/component/prompt/index.tsx    | 113 +++++++-----------
 2 files changed, 93 insertions(+), 71 deletions(-)
 create mode 100644 packages/opencode/src/cli/cmd/tui/component/hoverable-label.tsx

diff --git a/packages/opencode/src/cli/cmd/tui/component/hoverable-label.tsx b/packages/opencode/src/cli/cmd/tui/component/hoverable-label.tsx
new file mode 100644
index 00000000000..73944c3adcf
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
index 8e5680dec8b..39fc3e80144 100644
--- a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
@@ -1,8 +1,8 @@
-import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, t, dim, fg, RGBA } from "@opentui/core"
+import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, t, dim, fg } from "@opentui/core"
 import { createEffect, createMemo, type JSX, onMount, createSignal, onCleanup, Show, Switch, Match } from "solid-js"
 import "opentui-spinner/solid"
 import { useLocal } from "@tui/context/local"
-import { useTheme, selectedForeground } from "@tui/context/theme"
+import { useTheme } from "@tui/context/theme"
 import { EmptyBorder } from "@tui/component/border"
 import { useSDK } from "@tui/context/sdk"
 import { useRoute } from "@tui/context/route"
@@ -32,6 +32,7 @@ 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
@@ -75,13 +76,6 @@ export function Prompt(props: PromptProps) {
   const { theme, syntax } = useTheme()
   const kv = useKV()
 
-  const hoverFg = createMemo(() => selectedForeground(theme))
-
-  const [agentHover, setAgentHover] = createSignal(false)
-  const [modelNameHover, setModelNameHover] = createSignal(false)
-  const [agentCycleHover, setAgentCycleHover] = createSignal(false)
-  const [commandListHover, setCommandListHover] = createSignal(false)
-
   function promptModelWarning() {
     toast.show({
       variant: "warning",
@@ -941,47 +935,30 @@ export function Prompt(props: PromptProps) {
               syntaxStyle={syntax()}
             />
             <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1}>
-              <box
-                backgroundColor={agentHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
-                onMouseOver={() => {
-                  if (store.mode === "shell") return
-                  setAgentHover(true)
-                }}
-                onMouseOut={() => setAgentHover(false)}
-                onMouseUp={() => {
-                  if (store.mode === "shell") return
-                  dialog.replace(() => <DialogAgent />)
-                }}
-              >
-                <text fg={agentHover() ? hoverFg() : highlight()}>
-                  {store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
-                </text>
-              </box>
-              <Show when={store.mode === "normal"}>
-                <box
-                  flexDirection="row"
-                  gap={1}
-                  backgroundColor={modelNameHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
-                  onMouseOver={() => setModelNameHover(true)}
-                  onMouseOut={() => setModelNameHover(false)}
-                  onMouseUp={() => {
-                    dialog.replace(() => <DialogModel />)
-                  }}
-                >
-                  <text
-                    flexShrink={0}
-                    fg={modelNameHover() ? hoverFg() : 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={modelNameHover() ? hoverFg() : theme.textMuted}>{local.model.parsed().provider}</text>
-                  <Show when={showVariant()}>
-                    <text fg={modelNameHover() ? hoverFg() : 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>
@@ -1096,28 +1073,22 @@ export function Prompt(props: PromptProps) {
             <box gap={2} flexDirection="row">
               <Switch>
                 <Match when={store.mode === "normal"}>
-                  <box
-                    backgroundColor={agentCycleHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
-                    onMouseOver={() => setAgentCycleHover(true)}
-                    onMouseOut={() => setAgentCycleHover(false)}
-                    onMouseUp={() => dialog.replace(() => <DialogAgent />)}
-                  >
-                    <text fg={agentCycleHover() ? hoverFg() : theme.text}>
-                      {keybind.print("agent_cycle")} {" "}
-                      <span style={{ fg: agentCycleHover() ? hoverFg() : theme.textMuted }}>switch agent</span>
-                    </text>
-                  </box>
-                  <box
-                    backgroundColor={commandListHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
-                    onMouseOver={() => setCommandListHover(true)}
-                    onMouseOut={() => setCommandListHover(false)}
-                    onMouseUp={() => command.show()}
-                  >
-                    <text fg={commandListHover() ? hoverFg() : theme.text}>
-                      {keybind.print("command_list")} {" "}
-                      <span style={{ fg: commandListHover() ? hoverFg() : theme.textMuted }}>commands</span>
-                    </text>
-                  </box>
+                  <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}>