Add safe chat reasoning disclosure

src/components/chat/AgentChat.tsx

@@ -2,15 +2,16 @@ import {
   type ChangeEvent,
   type FormEvent,
   type HTMLAttributes,
-  type ReactNode,
   type Ref,
 } from "react";
 import { Loader2, Send, Wrench } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import {
+  buildReasoningSteps,
   getToolTraceSummary,
   type AgentChatMessage,
+  type AgentReasoningStep,
   type AgentToolTrace,
 } from "./agentChatModel";
 export type { AgentChatMessage, AgentToolTrace } from "./agentChatModel";
@@ -89,39 +90,43 @@ export function AgentMessage({ message, className, ...props }: AgentMessageProps
 }
 
 function AgentToolTracePanel({ toolTrace }: { toolTrace: AgentToolTrace[] }) {
+  const steps = buildReasoningSteps(toolTrace);
+
   return (
     <details className="mt-3 rounded-md border bg-muted/30 px-2 py-1.5">
       <summary className="flex cursor-pointer list-none items-center gap-2 text-xs font-medium text-muted-foreground">
         <Wrench className="h-3.5 w-3.5" />
-        {getToolTraceSummary(toolTrace)}
+        So wurde gearbeitet ({getToolTraceSummary(toolTrace)})
       </summary>
       <div className="mt-2 space-y-2">
-        {toolTrace.map((tool, toolIndex) => (
-          <div key={`${tool.name}-${toolIndex}`} className="rounded-md bg-background/80 p-2 text-xs">
-            <p className="font-medium text-foreground">{tool.name}</p>
-            <ToolTraceLine label="Eingabe" value={tool.inputSummary} />
-            <ToolTraceLine label="Ergebnis" value={tool.resultSummary} />
-          </div>
+        {steps.map((step, stepIndex) => (
+          <ReasoningStep key={`${step.label}-${stepIndex}`} step={step} />
         ))}
       </div>
     </details>
   );
 }
 
-function ToolTraceLine({ label, value }: { label: ReactNode; value: ReactNode }) {
+function ReasoningStep({ step }: { step: AgentReasoningStep }) {
   return (
-    <p className="mt-1 text-muted-foreground">
-      <span className="font-medium text-foreground">{label}: </span>
-      {value}
-    </p>
+    <div className="rounded-md bg-background/80 p-2 text-xs" data-status={step.status}>
+      <p className="font-medium text-foreground">{step.label}</p>
+      <p className="mt-1 text-muted-foreground">{step.description}</p>
+    </div>
   );
 }
 
 function AgentThinkingIndicator() {
   return (
-    <div className="flex items-center gap-2 px-1 text-sm text-muted-foreground">
-      <Loader2 className="h-4 w-4 animate-spin" />
-      Denk mit der KI nach...
+    <div className="space-y-2 px-1 text-sm text-muted-foreground">
+      <div className="flex items-center gap-2">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        Denk mit der KI nach...
+      </div>
+      <div className="rounded-md border bg-muted/30 p-2 text-xs" data-status="active">
+        <p className="font-medium text-foreground">Antwort wird vorbereitet</p>
+        <p className="mt-1">Der Agent prueft den aktuellen Finanzkontext.</p>
+      </div>
     </div>
   );
 }