Add safe chat reasoning disclosure

src/components/chat/AgentChat.test.tsx

@@ -6,7 +6,7 @@ import {
   AgentPromptInput,
   type AgentChatMessage,
 } from "./AgentChat";
-import { getToolTraceSummary } from "./agentChatModel";
+import { buildReasoningSteps, getToolTraceSummary } from "./agentChatModel";
 
 const assistantMessage: AgentChatMessage = {
   id: "assistant-1",
@@ -111,3 +111,40 @@ describe("AgentChat phase 1 components", () => {
     expect(markup).not.toContain("Werkzeuge verwendet");
   });
 });
+
+describe("AgentChat phase 2 reasoning disclosure", () => {
+  test("builds safe reasoning steps from tool traces without exposing raw inputs", () => {
+    const steps = buildReasoningSteps(assistantMessage.toolTrace);
+
+    expect(steps).toEqual([
+      {
+        label: "summarize_transactions",
+        description: "12 Umsaetze zusammengefasst",
+        status: "complete",
+      },
+      {
+        label: "list_transactions",
+        description: "1 Treffer",
+        status: "complete",
+      },
+    ]);
+    expect(JSON.stringify(steps)).not.toContain("Mai 2026");
+  });
+
+  test("renders an assistant work-progress disclosure from tool traces", () => {
+    const markup = renderToStaticMarkup(<AgentMessage message={assistantMessage} />);
+
+    expect(markup).toContain("So wurde gearbeitet");
+    expect(markup).toContain("summarize_transactions");
+    expect(markup).toContain("12 Umsaetze zusammengefasst");
+  });
+
+  test("marks the current agent step as active while submitting", () => {
+    const markup = renderToStaticMarkup(
+      <AgentConversation messages={[assistantMessage]} isSubmitting />,
+    );
+
+    expect(markup).toContain("Antwort wird vorbereitet");
+    expect(markup).toContain("data-status=\"active\"");
+  });
+});

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>
   );
 }

src/components/chat/agentChatModel.ts

@@ -11,7 +11,23 @@ export type AgentChatMessage = {
   toolTrace?: AgentToolTrace[];
 };
 
+export type AgentReasoningStep = {
+  label: string;
+  description: string;
+  status: "complete" | "active" | "pending";
+};
+
 export function getToolTraceSummary(toolTrace: AgentToolTrace[] | undefined) {
   if (!toolTrace || toolTrace.length === 0) return "Keine Werkzeuge";
   return `${toolTrace.length} ${toolTrace.length === 1 ? "Werkzeug" : "Werkzeuge"} verwendet`;
 }
+
+export function buildReasoningSteps(toolTrace: AgentToolTrace[] | undefined): AgentReasoningStep[] {
+  if (!toolTrace || toolTrace.length === 0) return [];
+
+  return toolTrace.map((tool) => ({
+    label: tool.name,
+    description: tool.resultSummary,
+    status: "complete",
+  }));
+}