@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

package/src/features/agent/chat/ModernAgentOutput/ToolCallGroup.tsx

@@ -1,5 +1,5 @@
-import { AgentMessage } from "@vertesia/common";
-import { Button, useToast } from "@vertesia/ui/core";
+import { AgentMessage, AgentMessageType } from "@vertesia/common";
+import { Button, cn, useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { MarkdownRenderer } from "@vertesia/ui/widgets";
 import dayjs from "dayjs";
@@ -10,11 +10,80 @@ import { useImageLightbox } from "../ImageLightbox";
 import { useArtifactUrlCache, getArtifactCacheKey } from "../useArtifactUrlCache.js";
 import { ToolExecutionStatus } from "./utils";
 
-interface ToolCallGroupProps {
+/** Keys that are internal metadata and not interesting to display */
+const META_KEYS = new Set([
+    'tool', 'tool_run_id', 'activity_group_id', 'event_class',
+    'tool_iteration', 'tool_status', 'tools', 'streamed',
+    'files', 'outputFiles',
+]);
+
+/** Filter out internal metadata keys, return user-facing detail entries */
+function extractInterestingDetails(
+    details: Record<string, unknown> | undefined
+): Array<[string, unknown]> {
+    if (!details) return [];
+    return Object.entries(details).filter(
+        ([key, value]) => !META_KEYS.has(key) && value !== undefined && value !== null && value !== ''
+    );
+}
+
+/** Convert snake_case or camelCase key to a readable label */
+function formatDetailKey(key: string): string {
+    return key
+        .replace(/_/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/^./, c => c.toUpperCase());
+}
+
+/** Badge color per status */
+function statusBadgeClass(status?: ToolExecutionStatus): string {
+    switch (status) {
+        case 'completed':
+            return 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800';
+        case 'running':
+            return 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800';
+        case 'error':
+            return 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800';
+        case 'warning':
+            return 'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800';
+        default:
+            return '';
+    }
+}
+
+export interface ToolCallGroupProps {
     messages: AgentMessage[];
     showPulsatingCircle?: boolean;
     toolRunId?: string;
     toolStatus?: ToolExecutionStatus;
+    /** Additional className for the root container */
+    rootClassName?: string;
+    /** Additional className for the header row */
+    headerClassName?: string;
+    /** Additional className for the sender label */
+    senderClassName?: string;
+    /** Additional className for the tool summary text */
+    toolSummaryClassName?: string;
+    /** Additional className for the tool name badge */
+    toolBadgeClassName?: string;
+    /** Additional className for individual item wrappers */
+    itemClassName?: string;
+    /** Additional className for item header rows */
+    itemHeaderClassName?: string;
+    /** Additional className for expanded item content */
+    itemContentClassName?: string;
+}
+
+/** className overrides for ToolCallGroup — subset of ToolCallGroupProps containing only className props. */
+export type ToolCallGroupClassNames = Partial<Pick<ToolCallGroupProps,
+    'rootClassName' | 'headerClassName' | 'senderClassName' | 'toolSummaryClassName' |
+    'toolBadgeClassName' | 'itemClassName' | 'itemHeaderClassName' | 'itemContentClassName'>>;
+
+interface ToolCallItemClassNames {
+    toolBadgeClassName?: string;
+    itemClassName?: string;
+    itemHeaderClassName?: string;
+    itemContentClassName?: string;
 }
 
 interface ToolCallItemProps {
@@ -22,19 +91,20 @@ interface ToolCallItemProps {
     isExpanded: boolean;
     onToggle: () => void;
     artifactRunId?: string;
+    classNames?: ToolCallItemClassNames;
 }
 
 // Helper to check if URL is an image
 const isImageUrl = (url: string) => /\.(png|jpg|jpeg|gif|webp|svg)(\?|$)/i.test(url);
 
 // Component to render files (images inline, others as links)
-function FileDisplay({ files }: { files: string[] }) {
+function FileDisplay({ files, className: fileClassName }: { files: string[]; className?: string }) {
     const { openImage } = useImageLightbox();
 
     if (!files || files.length === 0) return null;
 
     return (
-        <div className="mt-2 flex flex-wrap gap-2">
+        <div className={cn("mt-2 flex flex-wrap gap-2", fileClassName)}>
             {files.map((file, idx) => {
                 const fileName = file.split('/').pop()?.split('?')[0] || 'file';
                 if (isImageUrl(file)) {
@@ -76,14 +146,37 @@ const getFilesFromDetails = (details: { files?: string[]; outputFiles?: string[]
     return Array.isArray(files) ? files : undefined;
 };
 
-function ToolCallItem({ message, isExpanded, onToggle, artifactRunId }: ToolCallItemProps) {
+const getMessageActivityLabel = (message: AgentMessage): string => {
+    const details = message.details as { tool?: string } | undefined;
+    if (details?.tool) return details.tool;
+
+    switch (message.type) {
+        case AgentMessageType.UPDATE:
+            return "update";
+        case AgentMessageType.WARNING:
+            return "warning";
+        case AgentMessageType.ERROR:
+            return "error";
+        case AgentMessageType.SYSTEM:
+            return "system";
+        default:
+            return "activity";
+    }
+};
+
+function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames = {} }: ToolCallItemProps) {
     const [resolvedFiles, setResolvedFiles] = useState<string[]>([]);
     const toast = useToast();
     const { client } = useUserSession();
     const urlCache = useArtifactUrlCache();
+    // PERFORMANCE: Use refs to avoid triggering effect re-runs when these stable values change identity
+    const clientRef = useRef(client);
+    clientRef.current = client;
+    const urlCacheRef = useRef(urlCache);
+    urlCacheRef.current = urlCache;
 
     const details = message.details as { tool?: string; files?: string[]; outputFiles?: string[]; [key: string]: unknown } | undefined;
-    const toolName = details?.tool || "Tool";
+    const toolName = getMessageActivityLabel(message);
     const files = getFilesFromDetails(details);
     const messageContent = typeof message.message === "string" ? message.message : "";
 
@@ -96,6 +189,8 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId }: ToolCall
 
         let cancelled = false;
         const resolveFiles = async () => {
+            const currentClient = clientRef.current;
+            const currentUrlCache = urlCacheRef.current;
             const resolved = await Promise.all(
                 files.map(async (file) => {
                     if (!file || typeof file !== "string") return null;
@@ -103,10 +198,8 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId }: ToolCall
                     if (file.startsWith("http://") || file.startsWith("https://")) {
                         return file;
                     }
-                    // Resolve artifact path to signed URL
-                    const artifactPath = file.startsWith("out/") || file.startsWith("files/") || file.startsWith("scripts/")
-                        ? file
-                        : `out/${file}`;
+                    // Strip artifact: protocol prefix to get the artifact-relative path
+                    const artifactPath = file.startsWith("artifact:") ? file.slice(9) : file;
                     const ext = artifactPath.split(".").pop()?.toLowerCase() || "";
                     const imageExtensions = new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"]);
                     const isImage = imageExtensions.has(ext);
@@ -114,13 +207,13 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId }: ToolCall
 
                     try {
                         const cacheKey = getArtifactCacheKey(artifactRunId, artifactPath, disposition);
-                        if (urlCache) {
-                            return await urlCache.getOrFetch(cacheKey, async () => {
-                                const result = await client.files.getArtifactDownloadUrl(artifactRunId, artifactPath, disposition);
+                        if (currentUrlCache) {
+                            return await currentUrlCache.getOrFetch(cacheKey, async () => {
+                                const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, disposition);
                                 return result.url;
                             });
                         } else {
-                            const result = await client.files.getArtifactDownloadUrl(artifactRunId, artifactPath, disposition);
+                            const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, disposition);
                             return result.url;
                         }
                     } catch (err) {
@@ -135,7 +228,7 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId }: ToolCall
         };
         resolveFiles();
         return () => { cancelled = true; };
-    }, [files, artifactRunId, client, urlCache]);
+    }, [files, artifactRunId]);
 
     // Separate image files from other files for inline preview
     const imageFiles = resolvedFiles.filter(f => isImageUrl(f));
@@ -157,10 +250,10 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId }: ToolCall
     };
 
     return (
-        <div className="border-b border-gray-100 dark:border-gray-800 last:border-b-0">
+        <div className={cn("border-b border-gray-100 dark:border-gray-800 last:border-b-0", classNames.itemClassName)}>
             {/* Collapsed header - always visible */}
             <div
-                className="flex items-start justify-between px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                className={cn("flex items-start justify-between px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors", classNames.itemHeaderClassName)}
                 onClick={onToggle}
             >
                 <div className="flex items-start gap-2 flex-1 min-w-0">
@@ -178,14 +271,14 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId }: ToolCall
                                 {messageContent}
                             </span>
                         ) : (
-                            <span className="text-xs text-muted italic">Tool: {toolName}</span>
+                            <span className="text-xs text-muted italic">Activity: {toolName}</span>
                         )}
                     </div>
                 </div>
                 <div className="flex items-center gap-2 flex-shrink-0">
                     {/* Tool name badge on the right */}
                     {!isExpanded && (
-                        <span className="text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium">
+                        <span className={cn("text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium", classNames.toolBadgeClassName)}>
                             {toolName}
                         </span>
                     )}
@@ -206,43 +299,65 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId }: ToolCall
 
             {/* Always show images inline, regardless of expanded state */}
             {imageFiles.length > 0 && (
-                <div className="px-4 pb-2">
+                <div className="px-3 pb-1.5">
                     <FileDisplay files={imageFiles} />
                 </div>
             )}
 
-            {/* Expanded content */}
-            {isExpanded && (
-                <div className="px-4 py-2 bg-gray-50/50 dark:bg-gray-800/30">
-                    {/* Tool name badge shown when expanded */}
-                    <div className="mb-2">
-                        <span className="text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium">
-                            {toolName}
-                        </span>
-                    </div>
-
-                    {messageContent && (
-                        <div className="vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-1.5 max-w-none text-sm">
-                            <MarkdownRenderer artifactRunId={artifactRunId}>{messageContent}</MarkdownRenderer>
+            {/* Expanded content — shows tool metadata, key params, then raw details */}
+            {isExpanded && (() => {
+                const toolStatusValue = (details as Record<string, unknown> | undefined)?.tool_status as ToolExecutionStatus | undefined;
+                const interestingDetails = extractInterestingDetails(details as Record<string, unknown> | undefined);
+                return (
+                    <div className={cn("px-4 py-2 bg-gray-50/50 dark:bg-gray-800/30", classNames.itemContentClassName)}>
+                        {/* Badges row: tool name + status + timestamp */}
+                        <div className="flex items-center gap-2 mb-2 flex-wrap">
+                            <span className={cn("text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium", classNames.toolBadgeClassName)}>
+                                {toolName}
+                            </span>
+                            {toolStatusValue && (
+                                <span className={cn("text-[10px] px-1.5 py-0.5 rounded-md border font-medium", statusBadgeClass(toolStatusValue))}>
+                                    {toolStatusValue}
+                                </span>
+                            )}
+                            <span className="text-[10px] text-muted/70">{dayjs(message.timestamp).format("HH:mm:ss")}</span>
                         </div>
-                    )}
 
-                    {/* Non-image files display */}
-                    {nonImageFiles.length > 0 && <FileDisplay files={nonImageFiles} />}
-
-                    {/* Technical details - collapsible */}
-                    {details && Object.keys(details).length > 1 && (
-                        <details className="mt-3 text-xs border rounded p-2 bg-muted/30" onClick={(e) => e.stopPropagation()}>
-                            <summary className="cursor-pointer text-muted">
-                                Technical Details
-                            </summary>
-                            <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-x-auto font-mono whitespace-pre-wrap">
-                                {JSON.stringify(details, null, 2)}
-                            </pre>
-                        </details>
-                    )}
-                </div>
-            )}
+                        {/* Key parameters */}
+                        {interestingDetails.length > 0 && (
+                            <div className="mb-2 space-y-0.5">
+                                {interestingDetails.map(([key, value]) => (
+                                    <div key={key} className="flex gap-1.5 text-xs">
+                                        <span className="text-muted font-medium flex-shrink-0">{formatDetailKey(key)}:</span>
+                                        <span className="text-foreground break-all">
+                                            {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+
+                        {messageContent && (
+                            <div className="vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-1.5 max-w-none text-sm">
+                                <MarkdownRenderer artifactRunId={artifactRunId}>{messageContent}</MarkdownRenderer>
+                            </div>
+                        )}
+
+                        {/* Non-image files display */}
+                        {nonImageFiles.length > 0 && <FileDisplay files={nonImageFiles} />}
+
+                        {/* Raw details — demoted to collapsible */}
+                        {details && Object.keys(details).length > 1 && (
+                            <details className="mt-2 text-xs border rounded p-1.5 bg-muted/30" onClick={(e) => e.stopPropagation()}>
+                                <summary className="cursor-pointer text-muted">Raw details</summary>
+                                <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-x-auto font-mono whitespace-pre-wrap">
+                                    {JSON.stringify(details, null, 2)}
+                                </pre>
+                            </details>
+                        )}
+                    </div>
+                );
+            })()}
         </div>
     );
 }
@@ -253,6 +368,10 @@ function CollapsedItemFiles({ files, artifactRunId }: { files: string[] | undefi
     const [resolvedFiles, setResolvedFiles] = useState<string[]>([]);
     const { client } = useUserSession();
     const urlCache = useArtifactUrlCache();
+    const clientRef = useRef(client);
+    clientRef.current = client;
+    const urlCacheRef = useRef(urlCache);
+    urlCacheRef.current = urlCache;
 
     useEffect(() => {
         if (!files || files.length === 0 || !artifactRunId) {
@@ -262,31 +381,33 @@ function CollapsedItemFiles({ files, artifactRunId }: { files: string[] | undefi
 
         let cancelled = false;
         const resolveFiles = async () => {
+            const currentClient = clientRef.current;
+            const currentUrlCache = urlCacheRef.current;
             const resolved = await Promise.all(
                 files.map(async (file) => {
                     if (!file || typeof file !== "string") return null;
 
+                    // Strip artifact: protocol prefix to get the artifact-relative path
+                    const artifactPath = file.startsWith("artifact:") ? file.slice(9) : file;
+
                     // Skip image files - they're shown at the group level
-                    const ext = file.split(".").pop()?.toLowerCase() || "";
+                    const ext = artifactPath.split(".").pop()?.toLowerCase() || "";
                     const imageExtensions = new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"]);
                     if (imageExtensions.has(ext)) return null;
 
-                    if (file.startsWith("http://") || file.startsWith("https://")) {
-                        return file;
+                    if (artifactPath.startsWith("http://") || artifactPath.startsWith("https://")) {
+                        return artifactPath;
                     }
-                    const artifactPath = file.startsWith("out/") || file.startsWith("files/") || file.startsWith("scripts/")
-                        ? file
-                        : `out/${file}`;
 
                     try {
                         const cacheKey = getArtifactCacheKey(artifactRunId, artifactPath, "attachment");
-                        if (urlCache) {
-                            return await urlCache.getOrFetch(cacheKey, async () => {
-                                const result = await client.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "attachment");
+                        if (currentUrlCache) {
+                            return await currentUrlCache.getOrFetch(cacheKey, async () => {
+                                const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "attachment");
                                 return result.url;
                             });
                         } else {
-                            const result = await client.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "attachment");
+                            const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "attachment");
                             return result.url;
                         }
                     } catch (err) {
@@ -301,13 +422,13 @@ function CollapsedItemFiles({ files, artifactRunId }: { files: string[] | undefi
         };
         resolveFiles();
         return () => { cancelled = true; };
-    }, [files, artifactRunId, client, urlCache]);
+    }, [files, artifactRunId]);
 
     // Only show non-image files (images are shown at group level)
     if (resolvedFiles.length === 0) return null;
 
     return (
-        <div className="pl-5 pr-3 pb-2">
+        <div className="pl-4 pr-2 pb-1.5">
             <FileDisplay files={resolvedFiles} />
         </div>
     );
@@ -318,6 +439,10 @@ function GroupImageDisplay({ messages, artifactRunId }: { messages: AgentMessage
     const [resolvedImages, setResolvedImages] = useState<string[]>([]);
     const { client } = useUserSession();
     const urlCache = useArtifactUrlCache();
+    const clientRef = useRef(client);
+    clientRef.current = client;
+    const urlCacheRef = useRef(urlCache);
+    urlCacheRef.current = urlCache;
 
     // Only show files from the last (most recent) message in the group
     useEffect(() => {
@@ -338,34 +463,34 @@ function GroupImageDisplay({ messages, artifactRunId }: { messages: AgentMessage
 
         let cancelled = false;
         const resolveFiles = async () => {
+            const currentClient = clientRef.current;
+            const currentUrlCache = urlCacheRef.current;
             const resolved = await Promise.all(
                 files.map(async (file) => {
                     if (!file || typeof file !== "string") return null;
 
+                    // Strip artifact: protocol prefix to get the artifact-relative path
+                    const artifactPath = file.startsWith("artifact:") ? file.slice(9) : file;
+
                     // Check if it's an image file
-                    const ext = file.split(".").pop()?.toLowerCase() || "";
+                    const ext = artifactPath.split(".").pop()?.toLowerCase() || "";
                     const imageExtensions = new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"]);
                     if (!imageExtensions.has(ext)) return null;
 
                     // If it's already a full URL, return as-is
-                    if (file.startsWith("http://") || file.startsWith("https://")) {
-                        return file;
+                    if (artifactPath.startsWith("http://") || artifactPath.startsWith("https://")) {
+                        return artifactPath;
                     }
 
-                    // Resolve artifact path to signed URL
-                    const artifactPath = file.startsWith("out/") || file.startsWith("files/") || file.startsWith("scripts/")
-                        ? file
-                        : `out/${file}`;
-
                     try {
                         const cacheKey = getArtifactCacheKey(artifactRunId, artifactPath, "inline");
-                        if (urlCache) {
-                            return await urlCache.getOrFetch(cacheKey, async () => {
-                                const result = await client.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "inline");
+                        if (currentUrlCache) {
+                            return await currentUrlCache.getOrFetch(cacheKey, async () => {
+                                const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "inline");
                                 return result.url;
                             });
                         } else {
-                            const result = await client.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "inline");
+                            const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "inline");
                             return result.url;
                         }
                     } catch (err) {
@@ -380,18 +505,31 @@ function GroupImageDisplay({ messages, artifactRunId }: { messages: AgentMessage
         };
         resolveFiles();
         return () => { cancelled = true; };
-    }, [messages, artifactRunId, client, urlCache]);
+    }, [messages, artifactRunId]);
 
     if (resolvedImages.length === 0) return null;
 
     return (
-        <div className="px-4 py-2 border-b border-gray-100 dark:border-gray-800">
+        <div className="px-3 py-1.5 border-b border-gray-100 dark:border-gray-800">
             <FileDisplay files={resolvedImages} />
         </div>
     );
 }
 
-function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRunId: _toolRunId, toolStatus }: ToolCallGroupProps) {
+function ToolCallGroupComponent({
+    messages,
+    showPulsatingCircle = false,
+    toolRunId: _toolRunId,
+    toolStatus,
+    rootClassName,
+    headerClassName,
+    senderClassName,
+    toolSummaryClassName,
+    toolBadgeClassName,
+    itemClassName,
+    itemHeaderClassName,
+    itemContentClassName,
+}: ToolCallGroupProps) {
     const [isCollapsed, setIsCollapsed] = useState(true);
     const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
     const [animatingIndices, setAnimatingIndices] = useState<Set<number>>(new Set());
@@ -404,9 +542,13 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
 
     // Render status indicator based on tool execution status
     const renderStatusIndicator = () => {
-        if (showPulsatingCircle || toolStatus === "running") {
+        // Only pulse for the currently active/latest group
+        if (showPulsatingCircle) {
             return <PulsatingCircle size="sm" color="blue" />;
         }
+        if (toolStatus === "running") {
+            return <span className="size-2 rounded-full bg-blue-500 inline-block" />;
+        }
         if (toolStatus === "completed") {
             return <CheckCircle className="size-4 text-success" />;
         }
@@ -458,15 +600,12 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
     const lastTimestamp = lastMessage.timestamp;
 
     // Get tool names for summary
-    const toolNames = messages.map(m => {
-        const details = m.details as { tool?: string } | undefined;
-        return details?.tool || "tool";
-    });
+    const toolNames = messages.map((m) => getMessageActivityLabel(m));
 
     const uniqueToolCount = new Set(toolNames).size;
     const toolSummary = uniqueToolCount === 1
         ? `${messages.length}× ${toolNames[0]}`
-        : `${messages.length} tool calls`;
+        : `${messages.length} activity updates`;
 
     const toggleItem = (index: number) => {
         setExpandedItems(prev => {
@@ -483,7 +622,7 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
     const copyAllToClipboard = () => {
         const allContent = messages.map(m => {
             const details = m.details as { tool?: string; [key: string]: unknown } | undefined;
-            return `[${details?.tool || "tool"}] ${m.message || ""}\n${details ? JSON.stringify(details, null, 2) : ""}`;
+            return `[${getMessageActivityLabel(m)}] ${m.message || ""}\n${details ? JSON.stringify(details, null, 2) : ""}`;
         }).join("\n\n---\n\n");
 
         navigator.clipboard.writeText(allContent).then(() => {
@@ -497,17 +636,17 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
 
     return (
         <div
-            className={`border-l-4 ${getBorderColor()} overflow-hidden bg-white dark:bg-gray-900 mb-4`}
+            className={cn("border-l-4 overflow-hidden bg-white dark:bg-gray-900 mb-4", getBorderColor(), rootClassName)}
         >
             {/* Compact header */}
             <div
-                className="flex items-center justify-between px-4 py-1.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                className={cn("flex items-center justify-between px-4 py-1.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors", headerClassName)}
                 onClick={() => setIsCollapsed(!isCollapsed)}
             >
-                <div className="flex items-center gap-1.5">
+                <div className="flex items-center gap-1">
                     {renderStatusIndicator()}
-                    <span className="text-xs font-medium text-muted">Agent</span>
-                    <span className="text-xs text-purple-600 dark:text-purple-400 font-medium">
+                    <span className={cn("text-xs font-medium text-muted", senderClassName)}>Agent</span>
+                    <span className={cn("text-xs text-purple-600 dark:text-purple-400 font-medium", toolSummaryClassName)}>
                         {toolSummary}
                     </span>
                     {isCollapsed ? (
@@ -517,7 +656,7 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
                     )}
                 </div>
 
-                <div className="flex items-center gap-1.5">
+                <div className="flex items-center gap-1">
                     <span className="text-[11px] text-muted/70">
                         {dayjs(firstTimestamp).format("HH:mm:ss")}
                         {messages.length > 1 && ` - ${dayjs(lastTimestamp).format("HH:mm:ss")}`}
@@ -542,10 +681,10 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
 
             {/* Collapsed summary - show tool calls as single-line rows with expand option */}
             {isCollapsed && (
-                <div className="px-4 py-1 space-y-0">
+                <div className="px-3 py-0.5 space-y-0">
                     {messages.map((m, idx) => {
                         const details = m.details as { tool?: string; files?: string[]; outputFiles?: string[] } | undefined;
-                        const toolName = details?.tool || "tool";
+                        const toolName = getMessageActivityLabel(m);
                         const fullMessage = typeof m.message === "string" ? m.message : "";
                         const isAnimating = animatingIndices.has(idx);
                         const isItemExpanded = expandedItems.has(idx);
@@ -554,7 +693,7 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
                         return (
                             <div
                                 key={`${m.timestamp}-${idx}`}
-                                className="border-b border-gray-100 dark:border-gray-800 last:border-b-0"
+                                className={cn("border-b border-gray-100 dark:border-gray-800 last:border-b-0", itemClassName)}
                                 style={{
                                     opacity: isAnimating ? 0 : 1,
                                     transform: isAnimating ? 'translateX(-10px)' : 'translateX(0)',
@@ -566,7 +705,7 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
                             >
                                 {/* Row header - clickable to expand */}
                                 <div
-                                    className="flex items-start gap-2 py-2 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                                    className={cn("flex items-start gap-2 py-1.5 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50", itemHeaderClassName)}
                                     onClick={() => toggleItem(idx)}
                                     title={fullMessage}
                                 >
@@ -584,35 +723,69 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
                                                 {fullMessage}
                                             </span>
                                         ) : (
-                                            <span className="text-muted italic">Tool: {toolName}</span>
+                                            <span className="text-muted italic">Activity: {toolName}</span>
                                         )}
                                     </div>
                                     {/* Tool name badge on the right */}
                                     {!isItemExpanded && (
-                                        <span className="text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium flex-shrink-0">
+                                        <span className={cn("text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium flex-shrink-0", toolBadgeClassName)}>
                                             {toolName}
                                         </span>
                                     )}
                                 </div>
                                 {/* Always show images inline with resolved URLs */}
                                 <CollapsedItemFiles files={files} artifactRunId={artifactRunId} />
-                                {/* Expanded content - show full message */}
-                                {isItemExpanded && (
-                                    <div className="pl-5 pr-3 pb-2 text-sm">
-                                        <div className="vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-1.5 max-w-none text-sm">
-                                            <MarkdownRenderer artifactRunId={artifactRunId}>{fullMessage}</MarkdownRenderer>
+                                {/* Expanded content — tool metadata + key params + raw details */}
+                                {isItemExpanded && (() => {
+                                    const toolStatusValue = (details as Record<string, unknown> | undefined)?.tool_status as ToolExecutionStatus | undefined;
+                                    const interestingDetails = extractInterestingDetails(details as Record<string, unknown> | undefined);
+                                    return (
+                                        <div className={cn("pl-5 pr-3 pb-2 text-sm", itemContentClassName)}>
+                                            {/* Badges row: tool name + status + timestamp */}
+                                            <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+                                                <span className={cn("text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium", toolBadgeClassName)}>
+                                                    {toolName}
+                                                </span>
+                                                {toolStatusValue && (
+                                                    <span className={cn("text-[10px] px-1.5 py-0.5 rounded-md border font-medium", statusBadgeClass(toolStatusValue))}>
+                                                        {toolStatusValue}
+                                                    </span>
+                                                )}
+                                                <span className="text-[10px] text-muted/70">{dayjs(m.timestamp).format("HH:mm:ss")}</span>
+                                            </div>
+
+                                            {/* Key parameters */}
+                                            {interestingDetails.length > 0 && (
+                                                <div className="mb-1.5 space-y-0.5">
+                                                    {interestingDetails.map(([key, value]) => (
+                                                        <div key={key} className="flex gap-1.5 text-xs">
+                                                            <span className="text-muted font-medium flex-shrink-0">{formatDetailKey(key)}:</span>
+                                                            <span className="text-foreground break-all">
+                                                                {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                                                            </span>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            )}
+
+                                            {fullMessage && (
+                                                <div className="vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-1.5 max-w-none text-sm">
+                                                    <MarkdownRenderer artifactRunId={artifactRunId}>{fullMessage}</MarkdownRenderer>
+                                                </div>
+                                            )}
+
+                                            {/* Raw details — demoted to collapsible */}
+                                            {details && Object.keys(details).length > 1 && (
+                                                <details className="mt-1.5 text-xs">
+                                                    <summary className="text-muted cursor-pointer">Raw details</summary>
+                                                    <pre className="mt-1 p-2 bg-muted rounded text-xs overflow-x-auto">
+                                                        {JSON.stringify(details, null, 2)}
+                                                    </pre>
+                                                </details>
+                                            )}
                                         </div>
-                                        {/* Show details if available */}
-                                        {details && Object.keys(details).length > 1 && (
-                                            <details className="mt-2 text-xs">
-                                                <summary className="text-muted cursor-pointer">Show details</summary>
-                                                <pre className="mt-1 p-2 bg-muted rounded text-xs overflow-x-auto">
-                                                    {JSON.stringify(details, null, 2)}
-                                                </pre>
-                                            </details>
-                                        )}
-                                    </div>
-                                )}
+                                    );
+                                })()}
                             </div>
                         );
                     })}
@@ -643,6 +816,7 @@ function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRun
                             isExpanded={expandedItems.has(index)}
                             onToggle={() => toggleItem(index)}
                             artifactRunId={artifactRunId}
+                            classNames={{ toolBadgeClassName, itemClassName, itemHeaderClassName, itemContentClassName }}
                         />
                     ))}
                 </div>
@@ -657,6 +831,14 @@ const ToolCallGroup = memo(ToolCallGroupComponent, (prevProps, nextProps) => {
     if (prevProps.showPulsatingCircle !== nextProps.showPulsatingCircle) return false;
     if (prevProps.toolRunId !== nextProps.toolRunId) return false;
     if (prevProps.toolStatus !== nextProps.toolStatus) return false;
+    if (prevProps.rootClassName !== nextProps.rootClassName) return false;
+    if (prevProps.headerClassName !== nextProps.headerClassName) return false;
+    if (prevProps.senderClassName !== nextProps.senderClassName) return false;
+    if (prevProps.toolSummaryClassName !== nextProps.toolSummaryClassName) return false;
+    if (prevProps.toolBadgeClassName !== nextProps.toolBadgeClassName) return false;
+    if (prevProps.itemClassName !== nextProps.itemClassName) return false;
+    if (prevProps.itemHeaderClassName !== nextProps.itemHeaderClassName) return false;
+    if (prevProps.itemContentClassName !== nextProps.itemContentClassName) return false;
     // Compare first and last timestamps as a proxy for content changes
     return (
         prevProps.messages[0]?.timestamp === nextProps.messages[0]?.timestamp &&