feat(question): support multi-select questions (#7386)

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

@@ -1840,6 +1840,12 @@ function TodoWrite(props: ToolProps<typeof TodoWriteTool>) {
 function Question(props: ToolProps<typeof QuestionTool>) {
   const { theme } = useTheme()
   const count = createMemo(() => props.input.questions?.length ?? 0)
+
+  function format(answer?: string[]) {
+    if (!answer?.length) return "(no answer)"
+    return answer.join(", ")
+  }
+
   return (
     <Switch>
       <Match when={props.metadata.answers}>
@@ -1849,7 +1855,7 @@ function Question(props: ToolProps<typeof QuestionTool>) {
               {(q, i) => (
                 <box flexDirection="row" gap={1}>
                   <text fg={theme.textMuted}>{q.question}</text>
-                  <text fg={theme.text}>{props.metadata.answers?.[i()] || "(no answer)"}</text>
+                  <text fg={theme.text}>{format(props.metadata.answers?.[i()])}</text>
                 </box>
               )}
             </For>

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

@@ -4,7 +4,7 @@ import { useKeyboard } from "@opentui/solid"
 import type { TextareaRenderable } from "@opentui/core"
 import { useKeybind } from "../../context/keybind"
 import { useTheme } from "../../context/theme"
-import type { QuestionRequest } from "@opencode-ai/sdk/v2"
+import type { QuestionAnswer, QuestionRequest } from "@opencode-ai/sdk/v2"
 import { useSDK } from "../../context/sdk"
 import { SplitBorder } from "../../component/border"
 import { useTextareaKeybindings } from "../../component/textarea-keybindings"
@@ -17,11 +17,11 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
   const bindings = useTextareaKeybindings()
 
   const questions = createMemo(() => props.request.questions)
-  const single = createMemo(() => questions().length === 1)
-  const tabs = createMemo(() => (single() ? 1 : questions().length + 1)) // questions + confirm tab (no confirm for single)
+  const single = createMemo(() => questions().length === 1 && questions()[0]?.multiple !== true)
+  const tabs = createMemo(() => (single() ? 1 : questions().length + 1)) // questions + confirm tab (no confirm for single select)
   const [store, setStore] = createStore({
     tab: 0,
-    answers: [] as string[],
+    answers: [] as QuestionAnswer[],
     custom: [] as string[],
     selected: 0,
     editing: false,
@@ -34,10 +34,15 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
   const options = createMemo(() => question()?.options ?? [])
   const other = createMemo(() => store.selected === options().length)
   const input = createMemo(() => store.custom[store.tab] ?? "")
+  const multi = createMemo(() => question()?.multiple === true)
+  const customPicked = createMemo(() => {
+    const value = input()
+    if (!value) return false
+    return store.answers[store.tab]?.includes(value) ?? false
+  })
 
   function submit() {
-    // Fill in empty answers with empty strings
-    const answers = questions().map((_, i) => store.answers[i] ?? "")
+    const answers = questions().map((_, i) => store.answers[i] ?? [])
     sdk.client.question.reply({
       requestID: props.request.id,
       answers,
@@ -52,7 +57,7 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
 
   function pick(answer: string, custom: boolean = false) {
     const answers = [...store.answers]
-    answers[store.tab] = answer
+    answers[store.tab] = [answer]
     setStore("answers", answers)
     if (custom) {
       const inputs = [...store.custom]
@@ -62,7 +67,7 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
     if (single()) {
       sdk.client.question.reply({
         requestID: props.request.id,
-        answers: [answer],
+        answers: [[answer]],
       })
       return
     }
@@ -70,6 +75,17 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
     setStore("selected", 0)
   }
 
+  function toggle(answer: string) {
+    const existing = store.answers[store.tab] ?? []
+    const next = [...existing]
+    const index = next.indexOf(answer)
+    if (index === -1) next.push(answer)
+    if (index !== -1) next.splice(index, 1)
+    const answers = [...store.answers]
+    answers[store.tab] = next
+    setStore("answers", answers)
+  }
+
   const dialog = useDialog()
 
   useKeyboard((evt) => {
@@ -82,11 +98,49 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
       }
       if (evt.name === "return") {
         evt.preventDefault()
-        const text = textarea?.plainText?.trim()
-        if (text) {
-          pick(text, true)
+        const text = textarea?.plainText?.trim() ?? ""
+        const prev = store.custom[store.tab]
+
+        if (!text) {
+          if (prev) {
+            const inputs = [...store.custom]
+            inputs[store.tab] = ""
+            setStore("custom", inputs)
+          }
+
+          const answers = [...store.answers]
+          if (prev) {
+            answers[store.tab] = (answers[store.tab] ?? []).filter((x) => x !== prev)
+          }
+          if (!prev) {
+            answers[store.tab] = []
+          }
+          setStore("answers", answers)
           setStore("editing", false)
+          return
         }
+
+        if (multi()) {
+          const inputs = [...store.custom]
+          inputs[store.tab] = text
+          setStore("custom", inputs)
+
+          const existing = store.answers[store.tab] ?? []
+          const next = [...existing]
+          if (prev) {
+            const index = next.indexOf(prev)
+            if (index !== -1) next.splice(index, 1)
+          }
+          if (!next.includes(text)) next.push(text)
+          const answers = [...store.answers]
+          answers[store.tab] = next
+          setStore("answers", answers)
+          setStore("editing", false)
+          return
+        }
+
+        pick(text, true)
+        setStore("editing", false)
         return
       }
       // Let textarea handle all other keys
@@ -133,13 +187,25 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
       if (evt.name === "return") {
         evt.preventDefault()
         if (other()) {
-          setStore("editing", true)
-        } else {
-          const opt = opts[store.selected]
-          if (opt) {
-            pick(opt.label)
+          if (!multi()) {
+            setStore("editing", true)
+            return
           }
+          const value = input()
+          if (value && customPicked()) {
+            toggle(value)
+            return
+          }
+          setStore("editing", true)
+          return
         }
+        const opt = opts[store.selected]
+        if (!opt) return
+        if (multi()) {
+          toggle(opt.label)
+          return
+        }
+        pick(opt.label)
       }
 
       if (evt.name === "escape" || keybind.match("app_exit", evt)) {
@@ -162,7 +228,9 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
             <For each={questions()}>
               {(q, index) => {
                 const isActive = () => index() === store.tab
-                const isAnswered = () => store.answers[index()] !== undefined
+                const isAnswered = () => {
+                  return (store.answers[index()]?.length ?? 0) > 0
+                }
                 return (
                   <box
                     paddingLeft={1}
@@ -185,13 +253,16 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
         <Show when={!confirm()}>
           <box paddingLeft={1} gap={1}>
             <box>
-              <text fg={theme.text}>{question()?.question}</text>
+              <text fg={theme.text}>
+                {question()?.question}
+                {multi() ? " (select all that apply)" : ""}
+              </text>
             </box>
             <box>
               <For each={options()}>
                 {(opt, i) => {
                   const active = () => i() === store.selected
-                  const picked = () => store.answers[store.tab] === opt.label
+                  const picked = () => store.answers[store.tab]?.includes(opt.label) ?? false
                   return (
                     <box>
                       <box flexDirection="row" gap={1}>
@@ -212,17 +283,18 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
               <box>
                 <box flexDirection="row" gap={1}>
                   <box backgroundColor={other() ? theme.backgroundElement : undefined}>
-                    <text fg={other() ? theme.secondary : input() ? theme.success : theme.text}>
+                    <text fg={other() ? theme.secondary : customPicked() ? theme.success : theme.text}>
                       {options().length + 1}. Type your own answer
                     </text>
                   </box>
-                  <text fg={theme.success}>{input() ? "✓" : ""}</text>
+                  <text fg={theme.success}>{customPicked() ? "✓" : ""}</text>
                 </box>
                 <Show when={store.editing}>
                   <box paddingLeft={3}>
                     <textarea
                       ref={(val: TextareaRenderable) => (textarea = val)}
                       focused
+                      initialValue={input()}
                       placeholder="Type your own answer"
                       textColor={theme.text}
                       focusedTextColor={theme.text}
@@ -247,11 +319,12 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
           </box>
           <For each={questions()}>
             {(q, index) => {
-              const answer = () => store.answers[index()]
+              const value = () => store.answers[index()]?.join(", ") ?? ""
+              const answered = () => Boolean(value())
               return (
                 <box flexDirection="row" gap={1} paddingLeft={1}>
                   <text fg={theme.textMuted}>{q.header}:</text>
-                  <text fg={answer() ? theme.text : theme.error}>{answer() ?? "(not answered)"}</text>
+                  <text fg={answered() ? theme.text : theme.error}>{answered() ? value() : "(not answered)"}</text>
                 </box>
               )
             }}
@@ -279,8 +352,12 @@ export function QuestionPrompt(props: { request: QuestionRequest }) {
             </text>
           </Show>
           <text fg={theme.text}>
-            enter <span style={{ fg: theme.textMuted }}>{confirm() ? "submit" : single() ? "submit" : "confirm"}</span>
+            enter{" "}
+            <span style={{ fg: theme.textMuted }}>
+              {confirm() ? "submit" : multi() ? "toggle" : single() ? "submit" : "confirm"}
+            </span>
           </text>
+
           <text fg={theme.text}>
             esc <span style={{ fg: theme.textMuted }}>dismiss</span>
           </text>