From 8bff03f83302a35decc23a5970c46e45c81f4600 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 12:23:47 +0000
Subject: [PATCH] fix: show number labels consistently for current item in
 variant popover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When an item is the current selection, show the number gutter instead of
replacing it with the ● bullet, so users always see which key to press.

https://claude.ai/code/session_011xS58qyP1BjcuCrJcWPxQB
---
 .../src/cli/cmd/tui/ui/dialog-select.tsx      | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
index 13d8b53030..ece0d59399 100644
--- a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
+++ b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
@@ -321,12 +321,14 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                     const gutter = createMemo(() => {
                       if (numberLabel()) {
                         return (
-                          <text
-                            fg={active() ? selectedForeground(theme) : theme.textMuted}
-                            flexShrink={0}
-                          >
-                            {numberLabel()}
-                          </text>
+                          <box flexDirection="row" flexShrink={0}>
+                            <text
+                              fg={active() ? selectedForeground(theme) : current() ? theme.primary : theme.textMuted}
+                              flexShrink={0}
+                            >
+                              {numberLabel()}
+                            </text>
+                          </box>
                         )
                       }
                       return option.gutter
@@ -407,16 +409,16 @@ function Option(props: {
 
   return (
     <>
-      <Show when={props.current}>
-        <text flexShrink={0} fg={props.active ? fg : props.current ? theme.primary : theme.text} marginRight={0}>
-          ●
-        </text>
-      </Show>
-      <Show when={!props.current && props.gutter}>
+      <Show when={props.gutter}>
         <box flexShrink={0} marginRight={0}>
           {props.gutter}
         </box>
       </Show>
+      <Show when={props.current && !props.gutter}>
+        <text flexShrink={0} fg={props.active ? fg : props.current ? theme.primary : theme.text} marginRight={0}>
+          ●
+        </text>
+      </Show>
       <text
         flexGrow={1}
         fg={props.active ? fg : props.current ? theme.primary : theme.text}