From 2d312b0d82b449a3aa0b1e3f63207adad9316da0 Mon Sep 17 00:00:00 2001
From: scarf <greenscarf005@gmail.com>
Date: Wed, 24 Dec 2025 23:16:18 +0900
Subject: [PATCH 1/2] feat(tui): add mouse support to menus

---
 .../cli/cmd/tui/component/prompt/index.tsx    | 161 +++++++++++++++---
 1 file changed, 133 insertions(+), 28 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 9494b81cb10..07c76d520c1 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,18 @@
-import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, t, dim, fg, type KeyBinding } from "@opentui/core"
+import {
+  BoxRenderable,
+  TextareaRenderable,
+  MouseEvent,
+  PasteEvent,
+  t,
+  dim,
+  fg,
+  type KeyBinding,
+  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"
@@ -16,7 +26,7 @@ import { usePromptStash } from "./stash"
 import { DialogStash } from "../dialog-stash"
 import { type AutocompleteRef, Autocomplete } from "./autocomplete"
 import { useCommandDialog } from "../dialog-command"
-import { useRenderer } from "@opentui/solid"
+import { useRenderer, useTerminalDimensions } from "@opentui/solid"
 import { Editor } from "@tui/util/editor"
 import { useExit } from "../../context/exit"
 import { Clipboard } from "../../util/clipboard"
@@ -29,6 +39,8 @@ import { useDialog } from "@tui/ui/dialog"
 import { DialogProvider as DialogProviderConnect } from "../dialog-provider"
 import { DialogAlert } from "../../ui/dialog-alert"
 import { useToast } from "../../ui/toast"
+import { DialogAgent } from "../dialog-agent"
+import { DialogModel } from "../dialog-model"
 
 export type PromptProps = {
   sessionID?: string
@@ -123,7 +135,11 @@ export function Prompt(props: PromptProps) {
   const stash = usePromptStash()
   const command = useCommandDialog()
   const renderer = useRenderer()
+  const dimensions = useTerminalDimensions()
+  const tall = createMemo(() => dimensions().height > 40)
+  const wide = createMemo(() => dimensions().width > 120)
   const { theme, syntax } = useTheme()
+  const hoverFg = createMemo(() => selectedForeground(theme))
 
   function promptModelWarning() {
     toast.show({
@@ -182,6 +198,11 @@ export function Prompt(props: PromptProps) {
     interrupt: 0,
   })
 
+  const [agentHover, setAgentHover] = createSignal(false)
+  const [modelNameHover, setModelNameHover] = createSignal(false)
+  const [agentCycleHover, setAgentCycleHover] = createSignal(false)
+  const [commandListHover, setCommandListHover] = createSignal(false)
+
   command.register(() => {
     return [
       {
@@ -946,19 +967,43 @@ export function Prompt(props: PromptProps) {
               cursorColor={theme.text}
               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}
+            <Show when={tall()}>
+              <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1}>
+                <box
+                  backgroundColor={agentHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
+                  onMouseOver={() => 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>
-                  <text fg={theme.textMuted}>{local.model.parsed().provider}</text>
                 </box>
-              </Show>
-            </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}
+                    </text>
+                    <text fg={modelNameHover() ? hoverFg() : theme.textMuted}>{local.model.parsed().provider}</text>
+                  </box>
+                </Show>
+              </box>
+            </Show>
           </box>
         </box>
         <box
@@ -1064,25 +1109,85 @@ export function Prompt(props: PromptProps) {
               </text>
             </box>
           </Show>
-          <Show when={status().type !== "retry"}>
-            <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>
+          <Switch>
+            <Match when={status().type !== "retry" && !tall()}>
+              <box flexDirection="row" gap={1}>
+                <box
+                  backgroundColor={agentHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
+                  onMouseOver={() => 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}
+                    </text>
+                    <text fg={modelNameHover() ? hoverFg() : theme.textMuted}>{local.model.parsed().provider}</text>
+                  </box>
+                </Show>
+              </box>
+            </Match>
+          </Switch>
+          <box gap={2} flexDirection="row" marginLeft="auto">
+            <Switch>
+              <Match when={store.mode === "normal"}>
+                <Show when={wide()}>
+                  <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>
+                </Show>
+                <Show when={!wide()}>
                   <text fg={theme.text}>
                     {keybind.print("command_list")} <span style={{ fg: theme.textMuted }}>commands</span>
                   </text>
-                </Match>
-                <Match when={store.mode === "shell"}>
-                  <text fg={theme.text}>
-                    esc <span style={{ fg: theme.textMuted }}>exit shell mode</span>
+                </Show>
+                <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>
-                </Match>
-              </Switch>
-            </box>
-          </Show>
+                </box>
+              </Match>
+              <Match when={store.mode === "shell"}>
+                <text fg={theme.text}>
+                  esc <span style={{ fg: theme.textMuted }}>exit shell mode</span>
+                </text>
+              </Match>
+            </Switch>
+          </box>
         </box>
       </box>
     </>

From 7664d0eca23dd80147b2f7a7941dd1b807a98394 Mon Sep 17 00:00:00 2001
From: scarf <greenscarf005@gmail.com>
Date: Wed, 24 Dec 2025 23:36:16 +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    | 157 ++++++------------
 2 files changed, 105 insertions(+), 103 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 07c76d520c1..fc9c696ef75 100644
--- a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
@@ -1,18 +1,8 @@
-import {
-  BoxRenderable,
-  TextareaRenderable,
-  MouseEvent,
-  PasteEvent,
-  t,
-  dim,
-  fg,
-  type KeyBinding,
-  RGBA,
-} from "@opentui/core"
+import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, type KeyBinding } 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"
@@ -41,6 +31,7 @@ import { DialogAlert } from "../../ui/dialog-alert"
 import { useToast } from "../../ui/toast"
 import { DialogAgent } from "../dialog-agent"
 import { DialogModel } from "../dialog-model"
+import { HoverableLabel } from "../hoverable-label"
 
 export type PromptProps = {
   sessionID?: string
@@ -139,7 +130,6 @@ export function Prompt(props: PromptProps) {
   const tall = createMemo(() => dimensions().height > 40)
   const wide = createMemo(() => dimensions().width > 120)
   const { theme, syntax } = useTheme()
-  const hoverFg = createMemo(() => selectedForeground(theme))
 
   function promptModelWarning() {
     toast.show({
@@ -198,11 +188,6 @@ export function Prompt(props: PromptProps) {
     interrupt: 0,
   })
 
-  const [agentHover, setAgentHover] = createSignal(false)
-  const [modelNameHover, setModelNameHover] = createSignal(false)
-  const [agentCycleHover, setAgentCycleHover] = createSignal(false)
-  const [commandListHover, setCommandListHover] = createSignal(false)
-
   command.register(() => {
     return [
       {
@@ -969,38 +954,24 @@ export function Prompt(props: PromptProps) {
             />
             <Show when={tall()}>
               <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1}>
-                <box
-                  backgroundColor={agentHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
-                  onMouseOver={() => 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>
-                  </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>
+                      </box>
+                    )}
+                  </HoverableLabel>
                 </Show>
               </box>
             </Show>
@@ -1112,38 +1083,24 @@ export function Prompt(props: PromptProps) {
           <Switch>
             <Match when={status().type !== "retry" && !tall()}>
               <box flexDirection="row" gap={1}>
-                <box
-                  backgroundColor={agentHover() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
-                  onMouseOver={() => 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>
-                  </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>
+                      </box>
+                    )}
+                  </HoverableLabel>
                 </Show>
               </box>
             </Match>
@@ -1152,34 +1109,28 @@ export function Prompt(props: PromptProps) {
             <Switch>
               <Match when={store.mode === "normal"}>
                 <Show when={wide()}>
-                  <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>
+                  <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>
                 </Show>
                 <Show when={!wide()}>
                   <text fg={theme.text}>
-                    {keybind.print("command_list")} <span style={{ fg: theme.textMuted }}>commands</span>
+                    {keybind.print("sidebar_toggle")} <span style={{ fg: theme.textMuted }}>sidebar</span>
                   </text>
                 </Show>
-                <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={() => 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}>