From 586f16ebf26e831d6f3e4c7eed02225199d82a8b Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@localhost.localdomain>
Date: Mon, 23 Mar 2026 03:01:58 +0800
Subject: [PATCH 1/2] Render question tool text with markdown

---
 web/src/components/ToolCard/AskUserQuestionFooter.tsx     | 8 +++-----
 web/src/components/ToolCard/RequestUserInputFooter.tsx    | 5 +++--
 web/src/components/ToolCard/views/AskUserQuestionView.tsx | 5 +++--
 .../components/ToolCard/views/RequestUserInputView.tsx    | 5 +++--
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/web/src/components/ToolCard/AskUserQuestionFooter.tsx b/web/src/components/ToolCard/AskUserQuestionFooter.tsx
index a8164711f..83da547a2 100644
--- a/web/src/components/ToolCard/AskUserQuestionFooter.tsx
+++ b/web/src/components/ToolCard/AskUserQuestionFooter.tsx
@@ -3,6 +3,7 @@ import type { ApiClient } from '@/api/client'
 import type { ChatToolCall } from '@/chat/types'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import { MarkdownRenderer } from '@/components/MarkdownRenderer'
 import { isAskUserQuestionToolName, parseAskUserQuestionInput, type AskUserQuestionQuestion } from '@/components/ToolCard/askUserQuestion'
 import { cn } from '@/lib/utils'
 import { usePlatform } from '@/hooks/usePlatform'
@@ -303,11 +304,8 @@ export function AskUserQuestionFooter(props: {
                                 </div>
                             ) : null}
                             {questions[clampedStep]?.question ? (
-                                <div className={cn(
-                                    "text-sm text-[var(--app-fg)] break-words",
-                                    questions[clampedStep]?.header ? "mt-2" : ""
-                                )}>
-                                    {questions[clampedStep].question}
+                                <div className={cn(questions[clampedStep]?.header ? "mt-2" : "")}>
+                                    <MarkdownRenderer content={questions[clampedStep].question} />
                                 </div>
                             ) : null}
                         </div>
diff --git a/web/src/components/ToolCard/RequestUserInputFooter.tsx b/web/src/components/ToolCard/RequestUserInputFooter.tsx
index 8498de277..56ce602ed 100644
--- a/web/src/components/ToolCard/RequestUserInputFooter.tsx
+++ b/web/src/components/ToolCard/RequestUserInputFooter.tsx
@@ -3,6 +3,7 @@ import type { ApiClient } from '@/api/client'
 import type { ChatToolCall } from '@/chat/types'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import { MarkdownRenderer } from '@/components/MarkdownRenderer'
 import {
     isRequestUserInputToolName,
     parseRequestUserInputInput,
@@ -205,8 +206,8 @@ export function RequestUserInputFooter(props: {
             {currentQuestion ? (
                 <div className="mt-3">
                     {currentQuestion.question ? (
-                        <div className="text-sm text-[var(--app-fg)] break-words">
-                            {currentQuestion.question}
+                        <div>
+                            <MarkdownRenderer content={currentQuestion.question} />
                         </div>
                     ) : null}
 
diff --git a/web/src/components/ToolCard/views/AskUserQuestionView.tsx b/web/src/components/ToolCard/views/AskUserQuestionView.tsx
index c7fbc5fc0..efb9cf854 100644
--- a/web/src/components/ToolCard/views/AskUserQuestionView.tsx
+++ b/web/src/components/ToolCard/views/AskUserQuestionView.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import type { ToolViewProps } from '@/components/ToolCard/views/_all'
 import { parseAskUserQuestionInput } from '@/components/ToolCard/askUserQuestion'
+import { MarkdownRenderer } from '@/components/MarkdownRenderer'
 import { cn } from '@/lib/utils'
 
 type AnswersFormat = Record<string, string[]> | Record<string, { answers: string[] }>
@@ -134,8 +135,8 @@ export function AskUserQuestionView(props: ToolViewProps) {
                 return (
                     <div key={idx} className="rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] p-3">
                         {q.question ? (
-                            <div className="text-sm text-[var(--app-fg)] break-words">
-                                {q.question}
+                            <div>
+                                <MarkdownRenderer content={q.question} />
                             </div>
                         ) : null}
 
diff --git a/web/src/components/ToolCard/views/RequestUserInputView.tsx b/web/src/components/ToolCard/views/RequestUserInputView.tsx
index 5aafc689a..44c9b9738 100644
--- a/web/src/components/ToolCard/views/RequestUserInputView.tsx
+++ b/web/src/components/ToolCard/views/RequestUserInputView.tsx
@@ -3,6 +3,7 @@ import {
     parseRequestUserInputInput,
     parseRequestUserInputAnswers
 } from '@/components/ToolCard/requestUserInput'
+import { MarkdownRenderer } from '@/components/MarkdownRenderer'
 import { cn } from '@/lib/utils'
 
 function getSelectionMark(isSelected: boolean): string {
@@ -42,8 +43,8 @@ export function RequestUserInputView(props: ToolViewProps) {
                 return (
                     <div key={q.id} className="rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] p-3">
                         {q.question ? (
-                            <div className="text-sm text-[var(--app-fg)] break-words">
-                                {q.question}
+                            <div>
+                                <MarkdownRenderer content={q.question} />
                             </div>
                         ) : null}
 

From 22c55678b5c1d3166f0ded085884238c65b2b255 Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@localhost.localdomain>
Date: Mon, 23 Mar 2026 03:10:20 +0800
Subject: [PATCH 2/2] Render question options with markdown

---
 .../components/ToolCard/AskUserQuestionFooter.tsx    |  8 +++++---
 .../components/ToolCard/RequestUserInputFooter.tsx   |  8 +++++---
 .../ToolCard/views/AskUserQuestionView.tsx           | 12 ++++++------
 .../ToolCard/views/RequestUserInputView.tsx          | 12 ++++++------
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/web/src/components/ToolCard/AskUserQuestionFooter.tsx b/web/src/components/ToolCard/AskUserQuestionFooter.tsx
index 83da547a2..cadd3b0ba 100644
--- a/web/src/components/ToolCard/AskUserQuestionFooter.tsx
+++ b/web/src/components/ToolCard/AskUserQuestionFooter.tsx
@@ -41,10 +41,12 @@ function OptionRow(props: {
         >
             <SelectionMark checked={props.checked} mode={props.mode} />
             <span className="min-w-0 flex-1">
-                <div className="font-medium text-[var(--app-fg)] break-words">{props.title}</div>
+                <div className="[&_.aui-md]:font-medium [&_.aui-md]:text-sm [&_.aui-md]:text-[var(--app-fg)]">
+                    <MarkdownRenderer content={props.title} />
+                </div>
                 {props.description ? (
-                    <div className="mt-0.5 text-xs text-[var(--app-hint)] break-words">
-                        {props.description}
+                    <div className="mt-0.5 [&_.aui-md]:text-xs [&_.aui-md]:text-[var(--app-hint)]">
+                        <MarkdownRenderer content={props.description} />
                     </div>
                 ) : null}
             </span>
diff --git a/web/src/components/ToolCard/RequestUserInputFooter.tsx b/web/src/components/ToolCard/RequestUserInputFooter.tsx
index 56ce602ed..4942a5e50 100644
--- a/web/src/components/ToolCard/RequestUserInputFooter.tsx
+++ b/web/src/components/ToolCard/RequestUserInputFooter.tsx
@@ -43,10 +43,12 @@ function OptionRow(props: {
         >
             <SelectionMark checked={props.checked} />
             <span className="min-w-0 flex-1">
-                <div className="font-medium text-[var(--app-fg)] break-words">{props.title}</div>
+                <div className="[&_.aui-md]:font-medium [&_.aui-md]:text-sm [&_.aui-md]:text-[var(--app-fg)]">
+                    <MarkdownRenderer content={props.title} />
+                </div>
                 {props.description ? (
-                    <div className="mt-0.5 text-xs text-[var(--app-hint)] break-words">
-                        {props.description}
+                    <div className="mt-0.5 [&_.aui-md]:text-xs [&_.aui-md]:text-[var(--app-hint)]">
+                        <MarkdownRenderer content={props.description} />
                     </div>
                 ) : null}
             </span>
diff --git a/web/src/components/ToolCard/views/AskUserQuestionView.tsx b/web/src/components/ToolCard/views/AskUserQuestionView.tsx
index efb9cf854..521a69dbe 100644
--- a/web/src/components/ToolCard/views/AskUserQuestionView.tsx
+++ b/web/src/components/ToolCard/views/AskUserQuestionView.tsx
@@ -167,16 +167,16 @@ export function AskUserQuestionView(props: ToolViewProps) {
                                                 )}
                                                 <div className="min-w-0 flex-1">
                                                     <div className={cn(
-                                                        "text-sm break-words",
+                                                        "[&_.aui-md]:text-sm",
                                                         isSelected
-                                                            ? "text-emerald-700 dark:text-emerald-300 font-medium"
-                                                            : "text-[var(--app-fg)]"
+                                                            ? "[&_.aui-md]:text-emerald-700 dark:[&_.aui-md]:text-emerald-300 [&_.aui-md]:font-medium"
+                                                            : "[&_.aui-md]:text-[var(--app-fg)]"
                                                     )}>
-                                                        {opt.label}
+                                                        <MarkdownRenderer content={opt.label} />
                                                     </div>
                                                     {opt.description ? (
-                                                        <div className="mt-0.5 text-xs text-[var(--app-hint)] break-words">
-                                                            {opt.description}
+                                                        <div className="mt-0.5 [&_.aui-md]:text-xs [&_.aui-md]:text-[var(--app-hint)]">
+                                                            <MarkdownRenderer content={opt.description} />
                                                         </div>
                                                     ) : null}
                                                 </div>
diff --git a/web/src/components/ToolCard/views/RequestUserInputView.tsx b/web/src/components/ToolCard/views/RequestUserInputView.tsx
index 44c9b9738..45e1eb017 100644
--- a/web/src/components/ToolCard/views/RequestUserInputView.tsx
+++ b/web/src/components/ToolCard/views/RequestUserInputView.tsx
@@ -93,16 +93,16 @@ export function RequestUserInputView(props: ToolViewProps) {
                                                 )}
                                                 <div className="min-w-0 flex-1">
                                                     <div className={cn(
-                                                        "text-sm break-words",
+                                                        "[&_.aui-md]:text-sm",
                                                         isSelected
-                                                            ? "text-emerald-700 dark:text-emerald-300 font-medium"
-                                                            : "text-[var(--app-fg)]"
+                                                            ? "[&_.aui-md]:text-emerald-700 dark:[&_.aui-md]:text-emerald-300 [&_.aui-md]:font-medium"
+                                                            : "[&_.aui-md]:text-[var(--app-fg)]"
                                                     )}>
-                                                        {opt.label}
+                                                        <MarkdownRenderer content={opt.label} />
                                                     </div>
                                                     {opt.description ? (
-                                                        <div className="mt-0.5 text-xs text-[var(--app-hint)] break-words">
-                                                            {opt.description}
+                                                        <div className="mt-0.5 [&_.aui-md]:text-xs [&_.aui-md]:text-[var(--app-hint)]">
+                                                            <MarkdownRenderer content={opt.description} />
                                                         </div>
                                                     ) : null}
                                                 </div>