fix(tui): dim question option prefixes (#8776)

packages/opencode/src/cli/cmd/tui/routes/session/question.tsx

@@ -3,7 +3,7 @@ import { createMemo, For, Show } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 import type { TextareaRenderable } from "@opentui/core"
 import { useKeybind } from "../../context/keybind"
-import { useTheme } from "../../context/theme"
+import { tint, useTheme } from "../../context/theme"
 import type { QuestionAnswer, QuestionRequest } from "@opencode-ai/sdk/v2"
 import { useSDK } from "../../context/sdk"
 import { SplitBorder } from "../../component/border"
@@ -125,7 +125,7 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
     // Skip processing if a dialog (e.g., command palette) is open
     if (dialog.stack.length > 0) return
 
-    // When editing "Other" textarea
+    // When editing custom answer textarea
     if (store.editing && !confirm()) {
       if (evt.name === "escape") {
         evt.preventDefault()
@@ -305,12 +305,15 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
                   const picked = () => store.answers[store.tab]?.includes(opt.label) ?? false
                   return (
                     <box onMouseOver={() => moveTo(i())} onMouseUp={() => selectOption()}>
-                      <box flexDirection="row" gap={1}>
+                      <box flexDirection="row">
+                        <box backgroundColor={active() ? theme.backgroundElement : undefined} paddingRight={1}>
+                          <text fg={active() ? tint(theme.textMuted, theme.secondary, 0.6) : theme.textMuted}>
+                            {`${i() + 1}.`}
+                          </text>
+                        </box>
                         <box backgroundColor={active() ? theme.backgroundElement : undefined}>
                           <text fg={active() ? theme.secondary : picked() ? theme.success : theme.text}>
-                            {multi()
+                            {multi() ? `[${picked() ? "✓" : " "}] ${opt.label}` : opt.label}
-                              ? `${i() + 1}. [${picked() ? "✓" : " "}] ${opt.label}`
-                              : `${i() + 1}. ${opt.label}`}
                           </text>
                         </box>
                         <Show when={!multi()}>
@@ -327,14 +330,18 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
               </For>
               <Show when={custom()}>
                 <box onMouseOver={() => moveTo(options().length)} onMouseUp={() => selectOption()}>
-                  <box flexDirection="row" gap={1}>
+                  <box flexDirection="row">
-                    <box backgroundColor={other() ? theme.backgroundElement : undefined}>
+                    <box backgroundColor={other() ? theme.backgroundElement : undefined} paddingRight={1}>
-                      <text fg={other() ? theme.secondary : customPicked() ? theme.success : theme.text}>
+                      <text fg={other() ? tint(theme.textMuted, theme.secondary, 0.6) : theme.textMuted}>
-                        {multi()
+                        {`${options().length + 1}.`}
-                          ? `${options().length + 1}. [${customPicked() ? "✓" : " "}] Type your own answer`
-                          : `${options().length + 1}. Type your own answer`}
                       </text>
                     </box>
+                    <box backgroundColor={other() ? theme.backgroundElement : undefined}>
+                      <text fg={other() ? theme.secondary : customPicked() ? theme.success : theme.text}>
+                        {multi() ? `[${customPicked() ? "✓" : " "}] Type your own answer` : "Type your own answer"}
+                      </text>
+                    </box>
+
                     <Show when={!multi()}>
                       <text fg={theme.success}>{customPicked() ? "✓" : ""}</text>
                     </Show>