From df02b7cdca12de759ea5e2f61d0c4981eb66dd13 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Wed, 4 Feb 2026 00:14:50 +0000
Subject: [PATCH] fix(ui): repair question tool styling

Use token-backed surface/background classes for the question tool cards and ensure radio/checkbox inputs use accent-color so the view renders correctly in both light and dark themes.
---
 .../components/tool-call/question-block.tsx   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/tool-call/question-block.tsx b/packages/ui/src/components/tool-call/question-block.tsx
index 7e273fac..215f48aa 100644
--- a/packages/ui/src/components/tool-call/question-block.tsx
+++ b/packages/ui/src/components/tool-call/question-block.tsx
@@ -199,7 +199,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                 const customChecked = () => customValue().length > 0
 
                 return (
-                  <div class="rounded-md border border-base/60 bg-surface/30 p-3">
+                  <div class="rounded-md border border-base bg-surface-secondary p-3">
                     <div class="flex items-baseline justify-between gap-2">
                       <div class="text-xs">
                         {t("toolCall.question.number", { number: i() + 1 })} <span class="font-semibold">{q?.header}</span>
@@ -226,6 +226,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                                 }}
                                 type={inputType()}
                                 name={groupName()}
+                                class="mt-0.5 accent-[var(--accent-primary)]"
                                 checked={checked()}
                                 disabled={!props.active() || props.submitting()}
                                 onChange={() => toggleOption(i(), opt.label)}
@@ -249,6 +250,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                           }}
                           type={inputType()}
                           name={groupName()}
+                          class="mt-0.5 accent-[var(--accent-primary)]"
                           checked={customChecked()}
                           disabled={!props.active() || props.submitting()}
                           onChange={(e) => {
@@ -265,14 +267,14 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                             toggleFromCustomInput(i(), input)
                           }}
                         />
-                        <div class="flex flex-1 flex-col gap-2">
-                          <div class="text-sm leading-tight">{t("toolCall.question.custom.label")}</div>
-                          <input
-                            class="w-full rounded-md border border-base/50 bg-surface px-2 py-1 text-sm"
-                            type="text"
-                            placeholder={t("toolCall.question.custom.placeholder")}
-                            disabled={!props.active() || props.submitting()}
-                            value={customValue()}
+                          <div class="flex flex-1 flex-col gap-2">
+                            <div class="text-sm leading-tight">{t("toolCall.question.custom.label")}</div>
+                            <input
+                            class="w-full rounded-md border border-base bg-surface-base px-2 py-1 text-sm text-primary"
+                              type="text"
+                              placeholder={t("toolCall.question.custom.placeholder")}
+                              disabled={!props.active() || props.submitting()}
+                              value={customValue()}
                             onFocus={(e) => {
                               if (!props.active()) return
                               // Keep the radio/checkbox selected while editing.