diff --git a/ui/src/components/ToolDisplay.stories.tsx b/ui/src/components/ToolDisplay.stories.tsx
index 63d389a0f..998192d63 100644
--- a/ui/src/components/ToolDisplay.stories.tsx
+++ b/ui/src/components/ToolDisplay.stories.tsx
@@ -73,6 +73,22 @@ export const VeryLongUrl: Story = {
   },
 };
 
+export const VeryLongToolId: Story = {
+  args: {
+    call: {
+      id: "call_super_duper_long_tool_identifier_that_goes_on_and_on_and_on_and_will_surely_overflow_if_not_truncated_properly_abc123_def456_ghi789",
+      name: "some_function",
+      args: {
+        path: "/src/components/App.tsx",
+      },
+    },
+    result: {
+      content: "Result text here",
+    },
+    status: "completed",
+  },
+};
+
 export const LongUnbreakableString: Story = {
   args: {
     call: {
@@ -134,6 +150,13 @@ export const InChatLayoutLongUrl: Story = {
   },
 };
 
+export const InChatLayoutLongToolId: Story = {
+  decorators: [ChatLayoutDecorator],
+  args: {
+    ...VeryLongToolId.args,
+  },
+};
+
 export const InChatLayoutUnbreakable: Story = {
   decorators: [ChatLayoutDecorator],
   args: {
diff --git a/ui/src/components/ToolDisplay.tsx b/ui/src/components/ToolDisplay.tsx
index 1fd6ef81a..b8cd18fae 100644
--- a/ui/src/components/ToolDisplay.tsx
+++ b/ui/src/components/ToolDisplay.tsx
@@ -1,12 +1,13 @@
 import { useState } from "react";
 import { FunctionCall, TokenStats } from "@/types";
-import { ScrollArea } from "@radix-ui/react-scroll-area";
-import { FunctionSquare, CheckCircle, Clock, Code, ChevronUp, ChevronDown, Loader2, Text, Check, Copy, AlertCircle, ShieldAlert } from "lucide-react";
+import { FunctionSquare, CheckCircle, Clock, Code, Loader2, Text, AlertCircle, ShieldAlert } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import TokenStatsTooltip from "@/components/chat/TokenStatsTooltip";
 import { convertToUserFriendlyName } from "@/lib/utils";
+import { SmartContent, parseJsonOrString } from "@/components/chat/SmartContent";
+import { CollapsibleSection } from "@/components/chat/CollapsibleSection";
 
 export type ToolCallStatus = "requested" | "executing" | "completed" | "pending_approval" | "approved" | "rejected";
 
@@ -27,25 +28,17 @@ interface ToolDisplayProps {
   tokenStats?: TokenStats;
 }
 
+
+// ── Main component ─────────────────────────────────────────────────────────
 const ToolDisplay = ({ call, result, status = "requested", isError = false, isDecided = false, subagentName, onApprove, onReject, tokenStats }: ToolDisplayProps) => {
   const [areArgumentsExpanded, setAreArgumentsExpanded] = useState(status === "pending_approval");
   const [areResultsExpanded, setAreResultsExpanded] = useState(false);
-  const [isCopied, setIsCopied] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showRejectForm, setShowRejectForm] = useState(false);
   const [rejectionReason, setRejectionReason] = useState("");
 
   const hasResult = result !== undefined;
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(result?.content || "");
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text:", err);
-    }
-  };
+  const parsedResult = hasResult ? parseJsonOrString(result.content) : null;
 
   const handleApprove = async () => {
     if (!onApprove) {
@@ -143,53 +136,49 @@ const ToolDisplay = ({ call, result, status = "requested", isError = false, isDe
     }
   };
 
+  const argsContent = <SmartContent data={call.args} />;
+  const resultContent = parsedResult !== null
+      ? <SmartContent data={parsedResult} className={isError ? "text-red-600 dark:text-red-400" : ""} />
+      : null;
+
   const borderClass = status === "pending_approval"
-    ? 'border-amber-300 dark:border-amber-700'
-    : status === "rejected"
-      ? 'border-red-300 dark:border-red-700'
-      : status === "approved"
-        ? 'border-green-300 dark:border-green-700'
-        : isError
-          ? 'border-red-300'
-          : '';
+      ? 'border-amber-300 dark:border-amber-700'
+      : status === "rejected"
+          ? 'border-red-300 dark:border-red-700'
+          : status === "approved"
+              ? 'border-green-300 dark:border-green-700'
+              : isError
+                  ? 'border-red-300'
+                  : '';
 
   return (
     <Card className={`w-full mx-auto my-1 min-w-full ${borderClass}`}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-xs flex space-x-5">
-          <div className="flex items-center font-medium">
+        <CardTitle className="text-xs flex space-x-5 min-w-0">
+          <div className="flex items-center font-medium shrink-0">
             <FunctionSquare className="w-4 h-4 mr-2" />
             {call.name}
           </div>
           {subagentName && (
-            <div className="flex items-center text-muted-foreground font-normal">
+            <div className="flex items-center text-muted-foreground font-normal shrink-0">
               via {convertToUserFriendlyName(subagentName)} subagent
             </div>
           )}
-          <div className="font-light">{call.id}</div>
+          <div className="font-light truncate min-w-0">{call.id}</div>
         </CardTitle>
-        <div className="flex items-center gap-2 text-xs">
+        <div className="flex items-center gap-2 text-xs shrink-0 pl-2">
           {tokenStats && <TokenStatsTooltip stats={tokenStats} />}
           {getStatusDisplay()}
         </div>
       </CardHeader>
       <CardContent>
-        <div className="space-y-2 mt-4">
-          <Button variant="ghost" size="sm" className="p-0 h-auto justify-start" onClick={() => setAreArgumentsExpanded(!areArgumentsExpanded)}>
-            <Code className="w-4 h-4 mr-2" />
-            <span className="mr-2">Arguments</span>
-            {areArgumentsExpanded ? <ChevronUp className="w-4 h-4 ml-auto" /> : <ChevronDown className="w-4 h-4 ml-auto" />}
-          </Button>
-          {areArgumentsExpanded && (
-            <div className="relative">
-              <ScrollArea className="max-h-96 overflow-y-auto p-4 w-full mt-2 bg-muted/50">
-                <pre className="text-sm whitespace-pre-wrap break-words">
-                  {JSON.stringify(call.args, null, 2)}
-                </pre>
-              </ScrollArea>
-            </div>
-          )}
-        </div>
+        <CollapsibleSection
+            icon={Code}
+            expanded={areArgumentsExpanded}
+            onToggle={() => setAreArgumentsExpanded(!areArgumentsExpanded)}
+            previewContent={argsContent}
+            expandedContent={argsContent}
+        />
 
         {/* Approval buttons — hidden when decided (batch) or submitting */}
         {status === "pending_approval" && !isSubmitting && !isDecided && !showRejectForm && (
@@ -253,32 +242,20 @@ const ToolDisplay = ({ call, result, status = "requested", isError = false, isDe
 
         <div className="mt-4 w-full">
           {status === "executing" && !hasResult && (
-            <div className="flex items-center gap-2 py-2">
+            <div className="flex items-center gap-2 py-1">
               <Loader2 className="h-4 w-4 animate-spin" />
               <span className="text-sm">Executing...</span>
             </div>
           )}
-          {hasResult && (
-            <>
-              <Button variant="ghost" size="sm" className="p-0 h-auto justify-start" onClick={() => setAreResultsExpanded(!areResultsExpanded)}>
-                <Text className="w-4 h-4 mr-2" />
-                <span className="mr-2">{isError ? "Error" : "Results"}</span>
-                {areResultsExpanded ? <ChevronUp className="w-4 h-4 ml-auto" /> : <ChevronDown className="w-4 h-4 ml-auto" />}
-              </Button>
-              {areResultsExpanded && (
-                <div className="relative">
-                  <ScrollArea className={`max-h-96 overflow-y-auto p-4 w-full mt-2 ${isError ? 'bg-red-50 dark:bg-red-950/10' : ''}`}>
-                    <pre className={`text-sm whitespace-pre-wrap break-words ${isError ? 'text-red-600 dark:text-red-400' : ''}`}>
-                      {result.content}
-                    </pre>
-                  </ScrollArea>
-
-                  <Button variant="ghost" size="sm" className="absolute top-2 right-2 p-2" onClick={handleCopy}>
-                    {isCopied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
-                  </Button>
-                </div>
-              )}
-            </>
+          {hasResult && resultContent && (
+            <CollapsibleSection
+              icon={Text}
+              expanded={areResultsExpanded}
+              onToggle={() => setAreResultsExpanded(!areResultsExpanded)}
+              previewContent={resultContent}
+              expandedContent={resultContent}
+              errorStyle={isError}
+            />
           )}
         </div>
       </CardContent>
diff --git a/ui/src/components/chat/AgentCallDisplay.tsx b/ui/src/components/chat/AgentCallDisplay.tsx
index 0c8dcd1be..52dda24ba 100644
--- a/ui/src/components/chat/AgentCallDisplay.tsx
+++ b/ui/src/components/chat/AgentCallDisplay.tsx
@@ -1,7 +1,7 @@
 import { createContext, useContext, useMemo, useState, useEffect } from "react";
 import { FunctionCall, TokenStats } from "@/types";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { convertToUserFriendlyName } from "@/lib/utils";
+import { convertToUserFriendlyName, isAgentToolName } from "@/lib/utils";
 import { ChevronDown, ChevronUp, MessageSquare, Loader2, AlertCircle, CheckCircle, Activity } from "lucide-react";
 import KagentLogo from "../kagent-logo";
 import TokenStatsTooltip from "@/components/chat/TokenStatsTooltip";
@@ -9,6 +9,8 @@ import { getSubagentSessionWithEvents } from "@/app/actions/sessions";
 import { Message, Task } from "@a2a-js/sdk";
 import { extractMessagesFromTasks } from "@/lib/messageHandlers";
 import ChatMessage from "@/components/chat/ChatMessage";
+import { SmartContent, parseJsonOrString } from "./SmartContent";
+import { CollapsibleSection } from "./CollapsibleSection";
 
 // Track and avoid too deep nested agent viewing to avoid UI issues
 // In theory this works for infinite depth
@@ -132,7 +134,9 @@ const AgentCallDisplay = ({ call, result, status = "requested", isError = false,
   const activityDepth = useContext(ActivityDepthContext);
   const agentDisplay = useMemo(() => convertToUserFriendlyName(call.name), [call.name]);
   const hasResult = result !== undefined;
-  const showActivitySection = !!subagentSessionId && !isError && activityDepth < MAX_ACTIVITY_DEPTH;
+const showActivitySection = !!subagentSessionId && !isError && activityDepth < MAX_ACTIVITY_DEPTH;
+
+  const isAgent = isAgentToolName(call.name);
 
   const getStatusDisplay = () => {
     if (isError && status === "executing") {
@@ -178,6 +182,12 @@ const AgentCallDisplay = ({ call, result, status = "requested", isError = false,
     }
   };
 
+  const parsedResult = hasResult && result?.content ? parseJsonOrString(result.content) : null;
+  const argsContent = <SmartContent data={call.args} />;
+  const resultContent = parsedResult !== null
+    ? <SmartContent data={parsedResult} className={isError ? "text-red-600 dark:text-red-400" : ""} />
+    : null;
+
   return (
     <Card className={`w-full mx-auto my-1 min-w-full ${isError ? 'border-red-300' : ''}`}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -186,51 +196,39 @@ const AgentCallDisplay = ({ call, result, status = "requested", isError = false,
             <KagentLogo className="w-4 h-4 mr-2" />
             {agentDisplay}
           </div>
-          <div className="font-light">{call.id}</div>
+          <div className="font-light">
+            {call.id}
+          </div>
         </CardTitle>
         <div className="flex items-center gap-2 text-xs">
           {tokenStats && <TokenStatsTooltip stats={tokenStats} />}
           {getStatusDisplay()}
         </div>
       </CardHeader>
-      <CardContent>
-        <div className="space-y-2 mt-2">
-          <button className="text-xs flex items-center gap-2" onClick={() => setAreInputsExpanded(!areInputsExpanded)}>
-            <MessageSquare className="w-4 h-4" />
-            <span>Input</span>
-            {areInputsExpanded ? <ChevronUp className="w-4 h-4 ml-1" /> : <ChevronDown className="w-4 h-4 ml-1" />}
-          </button>
-          {areInputsExpanded && (
-            <div className="mt-2 bg-muted/50 p-3 rounded">
-              <pre className="text-sm whitespace-pre-wrap break-words">{JSON.stringify(call.args, null, 2)}</pre>
-            </div>
-          )}
-        </div>
-
-        <div className="mt-4 w-full">
-          {status === "executing" && !hasResult && (
-            <div className="flex items-center gap-2 py-2">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm">{agentDisplay} is responding...</span>
-            </div>
-          )}
-          {hasResult && result?.content && (
-            <div className="space-y-2">
-              <button className="text-xs flex items-center gap-2" onClick={() => setAreResultsExpanded(!areResultsExpanded)}>
-                <MessageSquare className="w-4 h-4" />
-                <span>Output</span>
-                {areResultsExpanded ? <ChevronUp className="w-4 h-4 ml-1" /> : <ChevronDown className="w-4 h-4 ml-1" />}
-              </button>
-              {areResultsExpanded && (
-                <div className={`mt-2 ${isError ? 'bg-red-50 dark:bg-red-950/10' : 'bg-muted/50'} p-3 rounded`}>
-                  <pre className={`text-sm whitespace-pre-wrap break-words ${isError ? 'text-red-600 dark:text-red-400' : ''}`}>
-                    {result?.content}
-                  </pre>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
+      <CardContent className="space-y-1 pt-0">
+        <CollapsibleSection
+          icon={MessageSquare}
+          expanded={areInputsExpanded}
+          onToggle={() => setAreInputsExpanded(!areInputsExpanded)}
+          previewContent={argsContent}
+          expandedContent={argsContent}
+        />
+        {status === "executing" && !hasResult && (
+          <div className="flex items-center gap-2 py-1">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className="text-sm">{agentDisplay} is responding...</span>
+          </div>
+        )}
+        {hasResult && resultContent && (
+          <CollapsibleSection
+            icon={MessageSquare}
+            expanded={areResultsExpanded}
+            onToggle={() => setAreResultsExpanded(!areResultsExpanded)}
+            previewContent={resultContent}
+            expandedContent={resultContent}
+            errorStyle={isError}
+          />
+        )}
 
         {showActivitySection && (
           <div className="mt-4 border-t pt-3">
diff --git a/ui/src/components/chat/ChatMessage.tsx b/ui/src/components/chat/ChatMessage.tsx
index cf71a65b6..8b6304c85 100644
--- a/ui/src/components/chat/ChatMessage.tsx
+++ b/ui/src/components/chat/ChatMessage.tsx
@@ -3,7 +3,7 @@ import { TruncatableText } from "@/components/chat/TruncatableText";
 import ToolCallDisplay from "@/components/chat/ToolCallDisplay";
 import AskUserDisplay, { AskUserQuestion } from "@/components/chat/AskUserDisplay";
 import KagentLogo from "../kagent-logo";
-import { ThumbsUp, ThumbsDown } from "lucide-react";
+import { ThumbsUp, ThumbsDown, Copy, Check } from "lucide-react";
 import TokenStatsTooltip from "@/components/chat/TokenStatsTooltip";
 import type { TokenStats } from "@/types";
 import { useState } from "react";
@@ -29,6 +29,7 @@ interface ChatMessageProps {
 export default function ChatMessage({ message, allMessages, agentContext, onApprove, onReject, onAskUserSubmit, pendingDecisions }: ChatMessageProps) {
   const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
   const [isPositiveFeedback, setIsPositiveFeedback] = useState(true);
+  const [copied, setCopied] = useState(false);
 
   if (!message) return null;
 
@@ -150,6 +151,16 @@ export default function ChatMessage({ message, allMessages, agentContext, onAppr
   }
 
 
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(String(content));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
   const handleFeedback = (isPositive: boolean) => {
     if (!messageId) {
       console.error("Message ID is undefined, cannot submit feedback.");
@@ -172,6 +183,13 @@ export default function ChatMessage({ message, allMessages, agentContext, onAppr
       {source !== "user" && (
         <div className="flex mt-2 justify-end items-center gap-2">
           {tokenStats && <TokenStatsTooltip stats={tokenStats} />}
+          <button
+            onClick={handleCopy}
+            className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+            aria-label="Copy to clipboard"
+          >
+            {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+          </button>
           {messageId !== undefined && (
             <>
               <button
diff --git a/ui/src/components/chat/CollapsibleSection.tsx b/ui/src/components/chat/CollapsibleSection.tsx
new file mode 100644
index 000000000..4de8bc9d6
--- /dev/null
+++ b/ui/src/components/chat/CollapsibleSection.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { ChevronUp, ChevronDown } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface CollapsibleSectionProps {
+  icon: React.ComponentType<{ className?: string }>;
+  expanded: boolean;
+  onToggle: () => void;
+  previewContent: React.ReactNode;
+  expandedContent: React.ReactNode;
+  errorStyle?: boolean;
+}
+
+export function CollapsibleSection({
+  icon: Icon,
+  expanded,
+  onToggle,
+  previewContent,
+  expandedContent,
+  errorStyle,
+}: CollapsibleSectionProps) {
+  if (!expanded) {
+    return (
+      <button
+        type="button"
+        onClick={onToggle}
+        className="block w-full text-left cursor-pointer rounded-md hover:bg-muted/40 transition-colors"
+      >
+        <div className="flex items-start gap-1.5">
+          <Icon className="w-3.5 h-3.5 shrink-0 mt-0.5 text-muted-foreground" />
+          <div className="flex-1 min-w-0">
+            <div className="relative max-h-20 overflow-hidden">
+              {previewContent}
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-center pt-0.5 text-muted-foreground">
+          <ChevronDown className="w-3.5 h-3.5" aria-label="Expand section" />
+        </div>
+      </button>
+    );
+  }
+
+  return (
+    <div className="rounded-md">
+      <div className="flex items-start gap-1.5">
+        <Icon className="w-3.5 h-3.5 shrink-0 mt-0.5 text-muted-foreground" />
+        <div className="flex-1 min-w-0">
+          <div className={`relative rounded-md ${errorStyle ? "bg-red-50 dark:bg-red-950/10" : ""}`}>
+            <ScrollArea className="max-h-96 overflow-y-auto p-2 w-full rounded-md bg-muted/50">
+              {expandedContent}
+            </ScrollArea>
+          </div>
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex justify-center w-full pt-0.5 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+        aria-label="Collapse section"
+      >
+        <ChevronUp className="w-3.5 h-3.5" />
+      </button>
+    </div>
+  );
+}
diff --git a/ui/src/components/chat/SmartContent.stories.tsx b/ui/src/components/chat/SmartContent.stories.tsx
new file mode 100644
index 000000000..3d740cd81
--- /dev/null
+++ b/ui/src/components/chat/SmartContent.stories.tsx
@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { SmartContent } from "./SmartContent";
+
+const meta = {
+  title: "Chat/SmartContent",
+  component: SmartContent,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SmartContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PlainString: Story = {
+  args: {
+    data: "Hello, this is a plain text string.",
+  },
+};
+
+export const MarkdownString: Story = {
+  args: {
+    data: `# Heading 1
+## Heading 2
+This is a paragraph with **bold** and *italic* text.
+
+- Item 1
+- Item 2
+- Item 3
+
+\`\`\`javascript
+const x = 42;
+console.log(x);
+\`\`\``,
+  },
+};
+
+export const SimpleJsonObject: Story = {
+  args: {
+    data: {
+      name: "John Doe",
+      age: 30,
+      email: "john@example.com",
+      active: true,
+    },
+  },
+};
+
+export const NestedJsonObject: Story = {
+  args: {
+    data: {
+      user: {
+        id: 123,
+        profile: {
+          firstName: "Jane",
+          lastName: "Smith",
+          contact: {
+            email: "jane@example.com",
+            phone: "+1-555-0123",
+          },
+        },
+      },
+      settings: {
+        theme: "dark",
+        notifications: true,
+      },
+    },
+  },
+};
+
+export const JsonWithJsonInString: Story = {
+  args: {
+    data: {
+      message: "User data",
+      payload: '{"nested": "json", "value": 42}',
+      timestamp: 1234567890,
+    },
+  },
+};
+
+export const ArrayOfItems: Story = {
+  args: {
+    data: [
+      { id: 1, name: "Item 1", status: "active" },
+      { id: 2, name: "Item 2", status: "inactive" },
+      { id: 3, name: "Item 3", status: "pending" },
+    ],
+  },
+};
+
+export const NullValue: Story = {
+  args: {
+    data: null,
+  },
+};
+
+export const UndefinedValue: Story = {
+  args: {
+    data: undefined,
+  },
+};
+
+export const DeeplyNestedObject: Story = {
+  args: {
+    data: {
+      level1: {
+        level2: {
+          level3: {
+            level4: {
+              level5: {
+                value: "deeply nested",
+                count: 5,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export const EmptyObject: Story = {
+  args: {
+    data: {},
+  },
+};
+
+export const EmptyArray: Story = {
+  args: {
+    data: [],
+  },
+};
+
+export const WithErrorClassName: Story = {
+  args: {
+    data: "Error message displayed in red",
+    className: "text-red-500",
+  },
+};
+
+export const MixedTypes: Story = {
+  args: {
+    data: {
+      string: "text value",
+      number: 42,
+      boolean: true,
+      null: null,
+      array: [1, 2, 3],
+      object: { nested: "value" },
+    },
+  },
+};
diff --git a/ui/src/components/chat/SmartContent.tsx b/ui/src/components/chat/SmartContent.tsx
new file mode 100644
index 000000000..9e39b74df
--- /dev/null
+++ b/ui/src/components/chat/SmartContent.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import React, { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
+import rehypeExternalLinks from "rehype-external-links";
+import CodeBlock from "./CodeBlock";
+import { Braces, Brackets, Type, Hash, ToggleLeft, Ban, Check, Copy, Code, Eye } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+// ── Markdown plumbing (shared with TruncatableText) ────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const markdownComponents: Record<string, React.ComponentType<any>> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  code: (props: any) => {
+    const { children, className } = props;
+    if (className) return <CodeBlock className={className}>{[children]}</CodeBlock>;
+    return <code className={className}>{children}</code>;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  table: (props: any) => (
+    <table className="min-w-full divide-y divide-gray-300 table-fixed">{props.children}</table>
+  ),
+};
+
+function MarkdownBlock({ content, className }: { content: string; className?: string }) {
+  return (
+    <div className={`prose-md prose max-w-none dark:prose-invert text-sm ${className ?? ""}`}>
+      <ReactMarkdown
+        components={markdownComponents}
+        remarkPlugins={[gfm]}
+        rehypePlugins={[[rehypeExternalLinks, { target: "_blank" }]]}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function tryParseJson(s: string): unknown | null {
+  const trimmed = s.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return null;
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    return null;
+  }
+}
+
+const MARKDOWN_RE = /^#{1,6}\s|^\s*[-*+]\s|\*\*|__|\[[^\]]+\]\([^)]+\)|```|^\s*\d+\.\s|^\s*>/m;
+
+function looksLikeMarkdown(s: string): boolean {
+  return MARKDOWN_RE.test(s);
+}
+
+function isInlineValue(value: unknown): boolean {
+  if (value === null || value === undefined) return true;
+  if (typeof value === "boolean" || typeof value === "number") return true;
+  if (typeof value === "string") {
+    if (value.length > 80 || value.includes("\n")) return false;
+    if (tryParseJson(value) !== null) return false;
+    return true;
+  }
+  return false;
+}
+
+function rawSource(data: unknown): string {
+  if (typeof data === "string") return data;
+  return JSON.stringify(data, null, 2);
+}
+
+// ── Type icons ──────────────────────────────────────────────────────────────
+
+function TypeIcon({ value }: { value: unknown }) {
+  const cls = "w-3 h-3 shrink-0";
+  if (value === null || value === undefined) return <Ban className={cls} />;
+  if (typeof value === "boolean") return <ToggleLeft className={cls} />;
+  if (typeof value === "number") return <Hash className={cls} />;
+  if (typeof value === "string") return <Type className={cls} />;
+  if (Array.isArray(value)) return <Brackets className={cls} />;
+  if (typeof value === "object") return <Braces className={cls} />;
+  return null;
+}
+
+// ── Recursive value renderer ────────────────────────────────────────────────
+
+const MAX_RENDER_DEPTH = 10;
+
+interface RendererProps {
+  className?: string;
+  depth?: number;
+}
+
+function ValueRenderer({ value, className, depth = 0 }: RendererProps & { value: unknown }) {
+  if (depth >= MAX_RENDER_DEPTH) {
+    return <pre className="text-xs text-muted-foreground whitespace-pre-wrap">{JSON.stringify(value, null, 2)}</pre>;
+  }
+
+  if (value === null || value === undefined) {
+    return <span className="text-xs text-muted-foreground italic">null</span>;
+  }
+
+  if (typeof value === "boolean") {
+    return <span className={`text-sm ${className ?? ""}`}>{value ? "true" : "false"}</span>;
+  }
+
+  if (typeof value === "number") {
+    return <span className={`text-sm ${className ?? ""}`}>{String(value)}</span>;
+  }
+
+  if (typeof value === "string") {
+    return <StringRenderer content={value} className={className} depth={depth} />;
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) return <span className="text-xs text-muted-foreground italic">{"[]"}</span>;
+    return (
+      <div className={`space-y-1 ${className ?? ""}`}>
+        {value.map((item, i) => {
+          const isPrimitive = typeof item === "string" || typeof item === "number" || typeof item === "boolean";
+          const itemKey = isPrimitive ? `${typeof item}:${String(item)}` : i;
+          return (
+            <div key={itemKey} className="ml-1 pl-2 border-l border-border">
+              <ValueRenderer value={item} depth={depth + 1} />
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  if (typeof value === "object") {
+    return <ObjectRenderer obj={value as Record<string, unknown>} className={className} depth={depth} />;
+  }
+
+  return <span className="text-sm">{String(value)}</span>;
+}
+
+function StringRenderer({ content, className, depth = 0 }: RendererProps & { content: string }) {
+  const parsed = tryParseJson(content);
+  if (parsed !== null && typeof parsed === "object") {
+    return <ValueRenderer value={parsed} className={className} depth={depth + 1} />;
+  }
+
+  if (content.includes("\n") || looksLikeMarkdown(content)) {
+    return <MarkdownBlock content={content} className={className} />;
+  }
+
+  return <span className={`text-sm break-words ${className ?? ""}`}>{content}</span>;
+}
+
+function ObjectRenderer({ obj, className, depth = 0 }: RendererProps & { obj: Record<string, unknown> }) {
+  const entries = Object.entries(obj);
+  if (entries.length === 0) {
+    return <span className="text-xs text-muted-foreground italic">{"{}"}</span>;
+  }
+
+  return (
+    <div className={`space-y-1 ${className ?? ""}`}>
+      {entries.map(([key, val]) => {
+        const inline = isInlineValue(val);
+        if (inline) {
+          return (
+            <div key={key} className="flex items-baseline gap-1.5 min-w-0">
+              <div className="flex items-center gap-1 text-muted-foreground shrink-0">
+                <TypeIcon value={val} />
+                <span className="text-xs font-medium">{key}</span>
+              </div>
+              <div className="min-w-0 break-words">
+                <ValueRenderer value={val} depth={depth + 1} />
+              </div>
+            </div>
+          );
+        }
+        return (
+          <div key={key}>
+            <div className="flex items-center gap-1 text-muted-foreground mb-0.5">
+              <TypeIcon value={val} />
+              <span className="text-xs font-medium">{key}</span>
+            </div>
+            <div className="ml-1 pl-2 border-l border-border">
+              <ValueRenderer value={val} depth={depth + 1} />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Public API ──────────────────────────────────────────────────────────────
+
+export function SmartContent({ data, className }: { data: unknown; className?: string }) {
+  const [viewSource, setViewSource] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const source = rawSource(data);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(source);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch { /* clipboard unavailable */ }
+  };
+
+  const handleToggleSource = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setViewSource(v => !v);
+  };
+
+  return (
+    <div className="relative overflow-hidden">
+      <div className="absolute top-0 right-0 flex items-center gap-0.5 z-10">
+        <Button variant="ghost" size="icon" className="h-5 w-5" onClick={handleToggleSource} title={viewSource ? "Formatted view" : "View source"} aria-label={viewSource ? "Formatted view" : "View source"}>
+          {viewSource ? <Eye className="w-3 h-3" /> : <Code className="w-3 h-3" />}
+        </Button>
+        <Button variant="ghost" size="icon" className="h-5 w-5" onClick={handleCopy} title={copied ? "Copied!" : "Copy to clipboard"} aria-label={copied ? "Copied!" : "Copy to clipboard"}>
+          {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+        </Button>
+      </div>
+      {viewSource ? (
+        <pre className={`text-sm whitespace-pre-wrap break-words ${className ?? ""}`}>{source}</pre>
+      ) : (
+        <ValueRenderer value={data} className={className} />
+      )}
+    </div>
+  );
+}
+
+export function parseJsonOrString(content: string): unknown {
+  const trimmed = content.trim();
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    try { return JSON.parse(trimmed); } catch { /* fall through */ }
+  }
+  return trimmed;
+}