fix(pico): separate thought and normal messages

web/frontend/src/components/chat/assistant-message.tsx

@@ -1,5 +1,6 @@
-import { IconCheck, IconCopy } from "@tabler/icons-react"
+import { IconBrain, IconCheck, IconCopy } from "@tabler/icons-react"
 import { useState } from "react"
+import { useTranslation } from "react-i18next"
 import ReactMarkdown from "react-markdown"
 import rehypeRaw from "rehype-raw"
 import rehypeSanitize from "rehype-sanitize"
@@ -7,16 +8,20 @@ import remarkGfm from "remark-gfm"
 
 import { Button } from "@/components/ui/button"
 import { formatMessageTime } from "@/hooks/use-pico-chat"
+import { cn } from "@/lib/utils"
 
 interface AssistantMessageProps {
   content: string
+  isThought?: boolean
   timestamp?: string | number
 }
 
 export function AssistantMessage({
   content,
+  isThought = false,
   timestamp = "",
 }: AssistantMessageProps) {
+  const { t } = useTranslation()
   const [isCopied, setIsCopied] = useState(false)
   const formattedTimestamp =
     timestamp !== "" ? formatMessageTime(timestamp) : ""
@@ -33,6 +38,12 @@ export function AssistantMessage({
       <div className="text-muted-foreground flex items-center justify-between gap-2 px-1 text-xs opacity-70">
         <div className="flex items-center gap-2">
           <span>PicoClaw</span>
+          {isThought && (
+            <span className="inline-flex items-center gap-1 rounded-full border border-amber-300/80 bg-amber-100/80 px-2 py-0.5 text-[11px] font-medium text-amber-800">
+              <IconBrain className="size-3" />
+              <span>{t("chat.reasoningLabel")}</span>
+            </span>
+          )}
           {formattedTimestamp && (
             <>
               <span className="opacity-50">•</span>
@@ -42,8 +53,22 @@ export function AssistantMessage({
         </div>
       </div>
 
-      <div className="bg-card text-card-foreground relative overflow-hidden rounded-xl border">
-        <div className="prose dark:prose-invert prose-p:my-2 prose-pre:my-2 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:p-3 max-w-none p-4 text-[15px] leading-relaxed [overflow-wrap:anywhere] break-words">
+      <div
+        className={cn(
+          "relative overflow-hidden rounded-xl border",
+          isThought
+            ? "border-amber-200/90 bg-amber-50/70 text-amber-950"
+            : "bg-card text-card-foreground",
+        )}
+      >
+        <div
+          className={cn(
+            "prose dark:prose-invert prose-pre:my-2 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:p-3 max-w-none [overflow-wrap:anywhere] break-words",
+            isThought
+              ? "prose-p:my-1.5 p-3 text-[13px] leading-relaxed opacity-90"
+              : "prose-p:my-2 p-4 text-[15px] leading-relaxed",
+          )}
+        >
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             rehypePlugins={[rehypeRaw, rehypeSanitize]}
@@ -54,7 +79,12 @@ export function AssistantMessage({
         <Button
           variant="ghost"
           size="icon"
-          className="bg-background/50 hover:bg-background/80 absolute top-2 right-2 h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100"
+          className={cn(
+            "absolute top-2 right-2 h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100",
+            isThought
+              ? "bg-amber-100/70 hover:bg-amber-200/80"
+              : "bg-background/50 hover:bg-background/80",
+          )}
           onClick={handleCopy}
         >
           {isCopied ? (

web/frontend/src/components/chat/chat-page.tsx

@@ -247,6 +247,7 @@ export function ChatPage() {
               {msg.role === "assistant" ? (
                 <AssistantMessage
                   content={msg.content}
+                  isThought={msg.kind === "thought"}
                   timestamp={msg.timestamp}
                 />
               ) : (