From a6b1f4ba190a763775cf093ab6ad05cdb8288dcb Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Wed, 4 Feb 2026 00:20:19 +0000
Subject: [PATCH] fix(ui): improve question tool contrast

Make question tool prompt, labels, and the type pill use primary text color for readability in light mode, and bump the Q header line to text-sm.
---
 .../components/tool-call/question-block.tsx    | 18 +++++++++---------
 packages/ui/src/styles/messaging/tool-call.css |  1 +
 2 files changed, 10 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 215f48aa..bea2aa97 100644
--- a/packages/ui/src/components/tool-call/question-block.tsx
+++ b/packages/ui/src/components/tool-call/question-block.tsx
@@ -199,9 +199,9 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                 const customChecked = () => customValue().length > 0
 
                 return (
-                  <div class="rounded-md border border-base bg-surface-secondary p-3">
+                  <div class="rounded-md border border-base bg-surface-secondary p-3 text-primary">
                     <div class="flex items-baseline justify-between gap-2">
-                      <div class="text-xs">
+                      <div class="text-sm text-primary">
                         {t("toolCall.question.number", { number: i() + 1 })} <span class="font-semibold">{q?.header}</span>
                       </div>
                       <Show when={multi()}>
@@ -209,7 +209,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                       </Show>
                     </div>
 
-                    <div class="mt-1 text-sm font-medium">{q?.question}</div>
+                    <div class="mt-1 text-sm font-medium text-primary">{q?.question}</div>
 
                     <div class="mt-3 flex flex-col gap-1">
                       <For each={q?.options ?? []}>
@@ -232,7 +232,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                                 onChange={() => toggleOption(i(), opt.label)}
                               />
                               <div class="flex flex-col">
-                                <div class="text-sm leading-tight">{opt.label}</div>
+                                <div class="text-sm leading-tight text-primary">{opt.label}</div>
                                 <div class="text-xs text-muted leading-tight">{opt.description}</div>
                               </div>
                             </label>
@@ -267,12 +267,12 @@ 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
+                        <div class="flex flex-1 flex-col gap-2">
+                          <div class="text-sm leading-tight text-primary">{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")}
+                            type="text"
+                            placeholder={t("toolCall.question.custom.placeholder")}
                               disabled={!props.active() || props.submitting()}
                               value={customValue()}
                             onFocus={(e) => {
diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css
index 6270e536..67c6de3c 100644
--- a/packages/ui/src/styles/messaging/tool-call.css
+++ b/packages/ui/src/styles/messaging/tool-call.css
@@ -322,6 +322,7 @@
   border-radius: 0.375rem;
   border: 1px solid var(--tool-call-border-color, var(--border-base));
   background-color: var(--surface-code);
+  color: var(--text-primary);
 }
 
 .tool-call-permission-title code {