From b8f9678d074fb382d308aa257a446f339dfaff8b Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Mon, 19 Jan 2026 21:59:23 +0800
Subject: [PATCH] feat: use code block to display bash commands

---
 frontend/src/components/ai-elements/code-block.tsx        | 4 ++--
 .../src/components/workspace/messages/message-group.tsx   | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ai-elements/code-block.tsx b/frontend/src/components/ai-elements/code-block.tsx
index 68d562a..c046023 100644
--- a/frontend/src/components/ai-elements/code-block.tsx
+++ b/frontend/src/components/ai-elements/code-block.tsx
@@ -109,12 +109,12 @@ export const CodeBlock = ({
       >
         <div className="relative size-full">
           <div
-            className="[&>pre]:bg-background! [&>pre]:text-foreground! size-full overflow-auto dark:hidden [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:p-4 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
+            className="[&>pre]:bg-background! [&>pre]:text-foreground! size-full overflow-auto dark:hidden [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: html }}
           />
           <div
-            className="[&>pre]:bg-background! [&>pre]:text-foreground! hidden size-full overflow-auto dark:block [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:p-4 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
+            className="[&>pre]:bg-background! [&>pre]:text-foreground! hidden size-full overflow-auto dark:block [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: darkHtml }}
           />
diff --git a/frontend/src/components/workspace/messages/message-group.tsx b/frontend/src/components/workspace/messages/message-group.tsx
index cdf918b..f6dc51a 100644
--- a/frontend/src/components/workspace/messages/message-group.tsx
+++ b/frontend/src/components/workspace/messages/message-group.tsx
@@ -33,6 +33,7 @@ import { cn } from "@/lib/utils";
 
 import { useArtifacts } from "../artifacts";
 import { FlipDisplay } from "../flip-display";
+import { CodeBlock } from "@/components/ai-elements/code-block";
 
 export function MessageGroup({
   className,
@@ -300,7 +301,12 @@ function ToolCall({
         icon={SquareTerminalIcon}
       >
         {command && (
-          <ChainOfThoughtSearchResult>{command}</ChainOfThoughtSearchResult>
+          <CodeBlock
+            className="mx-0 border-none px-0"
+            showLineNumbers={false}
+            language="bash"
+            code={command}
+          />
         )}
       </ChainOfThoughtStep>
     );