@vertesia/ui 1.0.0-dev.20260305.083323Z → 1.0.0

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

@@ -3,6 +3,7 @@ import { Button, cn, useToast } from "@vertesia/ui/core";
 import { MarkdownRenderer } from "@vertesia/ui/widgets";
 import { Bot, CopyIcon } from "lucide-react";
 import dayjs from "dayjs";
+import { useUITranslation } from '../../../../i18n/index.js';
 
 // PERFORMANCE: Unicode cursor character - rendered inline with text
 // This avoids expensive DOM manipulation with TreeWalker on every update
@@ -12,6 +13,8 @@ const CURSOR_CHAR = "│";
 export interface StreamingMessageProps {
     text: string;
     workstreamId?: string;
+    /** Run ID used to resolve artifact references in chart specs */
+    artifactRunId?: string;
     /** Characters per second for reveal animation (default: 300) */
     revealSpeed?: number;
     /** Whether streaming has completed (triggers fast catch-up) */
@@ -47,6 +50,7 @@ export type StreamingMessageClassNames = Partial<Pick<StreamingMessageProps,
 function StreamingMessageComponent({
     text,
     workstreamId,
+    artifactRunId,
     revealSpeed = 300,
     isComplete = false,
     timestamp,
@@ -58,6 +62,7 @@ function StreamingMessageComponent({
     senderClassName,
     iconClassName,
 }: StreamingMessageProps) {
+    const { t } = useUITranslation();
     const [displayedLength, setDisplayedLength] = useState(0);
     const [throttledText, setThrottledText] = useState("");
     const animationRef = useRef<number | null>(null);
@@ -254,7 +259,7 @@ function StreamingMessageComponent({
         navigator.clipboard.writeText(text).then(() => {
             toast({
                 status: "success",
-                title: "Copied to clipboard",
+                title: t('agent.copiedToClipboard'),
                 duration: 2000,
             });
         });
@@ -289,7 +294,7 @@ function StreamingMessageComponent({
                             size="xs"
                             onClick={copyToClipboard}
                             className="size-6 p-0 hover:bg-gray-100 dark:hover:bg-gray-800"
-                            title="Copy message"
+                            title={t('agent.copyMessage')}
                         >
                             <CopyIcon className="size-3" />
                         </Button>
@@ -305,7 +310,7 @@ function StreamingMessageComponent({
                     )}
                 >
                     <div className={cn("vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-3 prose-headings:font-semibold prose-headings:tracking-normal prose-headings:mt-6 prose-headings:mb-3 prose-h1:text-xl prose-h2:text-lg prose-h3:text-base prose-li:my-1 prose-ul:my-3 prose-ol:my-3 prose-table:my-5 prose-pre:my-4 prose-hr:my-6 max-w-none text-[15px] break-words", proseClassName)} style={{ overflowWrap: 'anywhere' }}>
-                        <MarkdownRenderer>
+                        <MarkdownRenderer artifactRunId={artifactRunId}>
                             {displayTextWithCursor}
                         </MarkdownRenderer>
                     </div>

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

@@ -5,6 +5,7 @@ import { MarkdownRenderer } from "@vertesia/ui/widgets";
 import dayjs from "dayjs";
 import { Bot, ChevronDown, ChevronRight, CopyIcon, CheckCircle, AlertCircle, AlertTriangle } from "lucide-react";
 import { useState, memo, useEffect, useRef } from "react";
+import { useUITranslation } from '../../../../i18n/index.js';
 import { PulsatingCircle } from "../AnimatedThinkingDots";
 import { useImageLightbox } from "../ImageLightbox";
 import { useArtifactUrlCache, getArtifactCacheKey } from "../useArtifactUrlCache.js";
@@ -14,7 +15,7 @@ import { ToolExecutionStatus } from "./utils";
 const META_KEYS = new Set([
     'tool', 'tool_run_id', 'activity_group_id', 'event_class',
     'tool_iteration', 'tool_status', 'tools', 'streamed',
-    'files', 'outputFiles',
+    'files', 'outputFiles', 'display_role', 'observation',
 ]);
 
 /** Filter out internal metadata keys, return user-facing detail entries */
@@ -56,6 +57,10 @@ export interface ToolCallGroupProps {
     showPulsatingCircle?: boolean;
     toolRunId?: string;
     toolStatus?: ToolExecutionStatus;
+    /** LLM reasoning text from the preceding message, shown as the group header */
+    preambleText?: string;
+    /** The preceding AgentMessage that was consumed as preamble (for key/timestamp) */
+    preambleMessage?: AgentMessage;
     /** Additional className for the root container */
     rootClassName?: string;
     /** Additional className for the header row */
@@ -79,6 +84,70 @@ export type ToolCallGroupClassNames = Partial<Pick<ToolCallGroupProps,
     'rootClassName' | 'headerClassName' | 'senderClassName' | 'toolSummaryClassName' |
     'toolBadgeClassName' | 'itemClassName' | 'itemHeaderClassName' | 'itemContentClassName'>>;
 
+/**
+ * Merge messages within a tool group by tool_run_id.
+ * Running + completed messages for the same tool_run_id are collapsed into
+ * a single visual item: the running message provides display text (message_to_human),
+ * while the completed message provides status, files, and observation.
+ */
+function mergeByToolRunId(messages: AgentMessage[]): AgentMessage[] {
+    const byRunId = new Map<string, AgentMessage[]>();
+    const result: AgentMessage[] = [];
+
+    for (const msg of messages) {
+        const runId = msg.details?.tool_run_id as string | undefined;
+        if (runId) {
+            if (!byRunId.has(runId)) {
+                byRunId.set(runId, []);
+            }
+            byRunId.get(runId)?.push(msg);
+        } else {
+            result.push(msg);
+        }
+    }
+
+    // For each tool_run_id group, merge into one message
+    for (const [_runId, msgs] of byRunId) {
+        if (msgs.length <= 1) {
+            result.push(...msgs);
+            continue;
+        }
+
+        // Sort by timestamp: earliest first
+        msgs.sort((a, b) => {
+            const ta = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
+            const tb = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
+            return ta - tb;
+        });
+
+        // Take the last message as the base (has final status), but prefer
+        // message text from the running message (message_to_human) if the
+        // completed message has no text or empty text.
+        const base = msgs[msgs.length - 1];
+        const runningMsg = msgs.find(m => (m.details as any)?.tool_status === 'running');
+
+        if (runningMsg && (!base.message || base.message.trim() === '') && runningMsg.message) {
+            // Merge: use running message text with completed message details
+            const merged: AgentMessage = {
+                ...base,
+                message: runningMsg.message,
+            };
+            result.push(merged);
+        } else {
+            result.push(base);
+        }
+    }
+
+    // Re-sort by timestamp to maintain chronological order
+    result.sort((a, b) => {
+        const ta = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
+        const tb = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
+        return ta - tb;
+    });
+
+    return result;
+}
+
 interface ToolCallItemClassNames {
     toolBadgeClassName?: string;
     itemClassName?: string;
@@ -99,6 +168,7 @@ const isImageUrl = (url: string) => /\.(png|jpg|jpeg|gif|webp|svg)(\?|$)/i.test(
 
 // Component to render files (images inline, others as links)
 function FileDisplay({ files, className: fileClassName }: { files: string[]; className?: string }) {
+    const { t } = useUITranslation();
     const { openImage } = useImageLightbox();
 
     if (!files || files.length === 0) return null;
@@ -113,7 +183,7 @@ function FileDisplay({ files, className: fileClassName }: { files: string[]; cla
                             key={idx}
                             className="cursor-pointer"
                             onClick={() => openImage(file, fileName)}
-                            title="Click to enlarge"
+                            title={t('agent.clickToEnlarge')}
                         >
                             <img
                                 src={file}
@@ -146,8 +216,17 @@ const getFilesFromDetails = (details: { files?: string[]; outputFiles?: string[]
     return Array.isArray(files) ? files : undefined;
 };
 
+const TOOL_BADGE_CLASS = "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";
+const ASSISTANT_BADGE_CLASS = "text-[10px] px-1.5 py-0.5 rounded-md bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 font-medium";
+
+const isToolPreambleMessage = (message: AgentMessage): boolean => {
+    const details = message.details as { display_role?: string } | undefined;
+    return message.type === AgentMessageType.THOUGHT && details?.display_role === "tool_preamble";
+};
+
 const getMessageActivityLabel = (message: AgentMessage): string => {
     const details = message.details as { tool?: string } | undefined;
+    if (isToolPreambleMessage(message)) return "assistant";
     if (details?.tool) return details.tool;
 
     switch (message.type) {
@@ -164,7 +243,12 @@ const getMessageActivityLabel = (message: AgentMessage): string => {
     }
 };
 
+const getMessageBadgeClass = (message: AgentMessage): string => {
+    return isToolPreambleMessage(message) ? ASSISTANT_BADGE_CLASS : TOOL_BADGE_CLASS;
+};
+
 function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames = {} }: ToolCallItemProps) {
+    const { t } = useUITranslation();
     const [resolvedFiles, setResolvedFiles] = useState<string[]>([]);
     const toast = useToast();
     const { client } = useUserSession();
@@ -177,6 +261,7 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
 
     const details = message.details as { tool?: string; files?: string[]; outputFiles?: string[]; [key: string]: unknown } | undefined;
     const toolName = getMessageActivityLabel(message);
+    const badgeClass = getMessageBadgeClass(message);
     const files = getFilesFromDetails(details);
     const messageContent = typeof message.message === "string" ? message.message : "";
 
@@ -243,7 +328,7 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
         navigator.clipboard.writeText(textToCopy).then(() => {
             toast({
                 status: "success",
-                title: "Copied to clipboard",
+                title: t('agent.copiedToClipboard'),
                 duration: 2000,
             });
         });
@@ -278,7 +363,7 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
                 <div className="flex items-center gap-2 flex-shrink-0">
                     {/* Tool name badge on the right */}
                     {!isExpanded && (
-                        <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)}>
+                        <span className={cn(badgeClass, classNames.toolBadgeClassName)}>
                             {toolName}
                         </span>
                     )}
@@ -290,7 +375,7 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
                             copyToClipboard();
                         }}
                         className="text-muted opacity-0 group-hover:opacity-100 transition-opacity"
-                        title="Copy message"
+                        title={t('agent.copyMessage')}
                     >
                         <CopyIcon className="size-3" />
                     </Button>
@@ -312,7 +397,7 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
                     <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)}>
+                            <span className={cn(badgeClass, classNames.toolBadgeClassName)}>
                                 {toolName}
                             </span>
                             {toolStatusValue && (
@@ -337,24 +422,21 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
                             </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>
-                        )}
+                        {/* Show observation from details if available and different from header text */}
+                        {(() => {
+                            const observation = (details as any)?.observation as string | undefined;
+                            if (observation && observation !== messageContent) {
+                                return (
+                                    <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}>{observation}</MarkdownRenderer>
+                                    </div>
+                                );
+                            }
+                            return null;
+                        })()}
 
                         {/* 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>
                 );
             })()}
@@ -517,10 +599,12 @@ function GroupImageDisplay({ messages, artifactRunId }: { messages: AgentMessage
 }
 
 function ToolCallGroupComponent({
-    messages,
+    messages: rawMessages,
     showPulsatingCircle = false,
     toolRunId: _toolRunId,
     toolStatus,
+    preambleText,
+    preambleMessage: _preambleMessage,
     rootClassName,
     headerClassName,
     senderClassName,
@@ -530,10 +614,14 @@ function ToolCallGroupComponent({
     itemHeaderClassName,
     itemContentClassName,
 }: ToolCallGroupProps) {
+    // Merge messages sharing the same tool_run_id into single visual items
+    const messages = mergeByToolRunId(rawMessages);
+
     const [isCollapsed, setIsCollapsed] = useState(true);
     const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
     const [animatingIndices, setAnimatingIndices] = useState<Set<number>>(new Set());
     const prevCountRef = useRef(messages.length);
+    const { t } = useUITranslation();
     const toast = useToast();
 
     // Extract workflow_run_id from messages (any message in the group should have it)
@@ -628,7 +716,7 @@ function ToolCallGroupComponent({
         navigator.clipboard.writeText(allContent).then(() => {
             toast({
                 status: "success",
-                title: "Copied all tool calls to clipboard",
+                title: t('agent.copiedAllToolCalls'),
                 duration: 2000,
             });
         });
@@ -643,20 +731,33 @@ function ToolCallGroupComponent({
                 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">
+                <div className="flex items-center gap-1 flex-1 min-w-0">
                     {renderStatusIndicator()}
-                    <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>
+                    {preambleText ? (
+                        <span className={cn("text-xs text-foreground line-clamp-2 flex-1 min-w-0", toolSummaryClassName)}>
+                            {preambleText}
+                        </span>
+                    ) : (
+                        <>
+                            <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 ? (
-                        <ChevronRight className="size-3 text-muted" />
+                        <ChevronRight className="size-3 text-muted flex-shrink-0" />
                     ) : (
-                        <ChevronDown className="size-3 text-muted" />
+                        <ChevronDown className="size-3 text-muted flex-shrink-0" />
                     )}
                 </div>
 
-                <div className="flex items-center gap-1">
+                <div className="flex items-center gap-1 flex-shrink-0">
+                    {preambleText && (
+                        <span className={cn("text-[10px] text-purple-600 dark:text-purple-400 font-medium", toolSummaryClassName)}>
+                            {toolSummary}
+                        </span>
+                    )}
                     <span className="text-[11px] text-muted/70">
                         {dayjs(firstTimestamp).format("HH:mm:ss")}
                         {messages.length > 1 && ` - ${dayjs(lastTimestamp).format("HH:mm:ss")}`}
@@ -669,7 +770,7 @@ function ToolCallGroupComponent({
                             copyAllToClipboard();
                         }}
                         className="text-muted/50 hover:text-muted h-5 w-5 p-0"
-                        title="Copy all tool calls"
+                        title={t('agent.copyAllToolCalls')}
                     >
                         <CopyIcon className="size-3" />
                     </Button>
@@ -685,6 +786,7 @@ function ToolCallGroupComponent({
                     {messages.map((m, idx) => {
                         const details = m.details as { tool?: string; files?: string[]; outputFiles?: string[] } | undefined;
                         const toolName = getMessageActivityLabel(m);
+                        const badgeClass = getMessageBadgeClass(m);
                         const fullMessage = typeof m.message === "string" ? m.message : "";
                         const isAnimating = animatingIndices.has(idx);
                         const isItemExpanded = expandedItems.has(idx);
@@ -728,7 +830,7 @@ function ToolCallGroupComponent({
                                     </div>
                                     {/* Tool name badge on the right */}
                                     {!isItemExpanded && (
-                                        <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)}>
+                                        <span className={cn(badgeClass, "flex-shrink-0", toolBadgeClassName)}>
                                             {toolName}
                                         </span>
                                     )}
@@ -743,7 +845,7 @@ function ToolCallGroupComponent({
                                         <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)}>
+                                                <span className={cn(badgeClass, toolBadgeClassName)}>
                                                     {toolName}
                                                 </span>
                                                 {toolStatusValue && (
@@ -768,21 +870,18 @@ function ToolCallGroupComponent({
                                                 </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>
-                                            )}
+                                            {/* Show observation from details if different from header text */}
+                                            {(() => {
+                                                const observation = (details as any)?.observation as string | undefined;
+                                                if (observation && observation !== fullMessage) {
+                                                    return (
+                                                        <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}>{observation}</MarkdownRenderer>
+                                                        </div>
+                                                    );
+                                                }
+                                                return null;
+                                            })()}
                                         </div>
                                     );
                                 })()}
@@ -831,6 +930,7 @@ 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.preambleText !== nextProps.preambleText) return false;
     if (prevProps.rootClassName !== nextProps.rootClassName) return false;
     if (prevProps.headerClassName !== nextProps.headerClassName) return false;
     if (prevProps.senderClassName !== nextProps.senderClassName) return false;

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

@@ -1,6 +1,8 @@
 import { AgentMessage } from "@vertesia/common";
 import { cn } from "@vertesia/ui/core";
 import { CheckCircle, Clock } from "lucide-react";
+import { useUITranslation } from '../../../../i18n/index.js';
+import { i18nInstance, NAMESPACE } from '../../../../i18n/instance.js';
 import { getWorkstreamId } from "./utils";
 
 interface WorkstreamTabsProps {
@@ -21,10 +23,11 @@ export default function WorkstreamTabs({
   count,
   completionStatus,
 }: WorkstreamTabsProps) {
+  const { t } = useUITranslation();
   // Create a new map with just the core workstreams
   const filteredWorkstreams = new Map<string, string>();
-  filteredWorkstreams.set("all", "All Messages");
-  filteredWorkstreams.set("main", "Main");
+  filteredWorkstreams.set("all", t('agent.allMessages'));
+  filteredWorkstreams.set("main", t('agent.main'));
 
   // Only add actual workstreams from messages (not our test workstreams)
   workstreams.forEach((name, id) => {
@@ -113,10 +116,11 @@ export function extractWorkstreams(
   messages: AgentMessage[],
 ): Map<string, string> {
   const workstreams = new Map<string, string>();
+  const t = i18nInstance.getFixedT(null, NAMESPACE);
 
   // Always include "all" and "main" workstreams
-  workstreams.set("all", "All Messages");
-  workstreams.set("main", "Main");
+  workstreams.set("all", t('agent.allMessages'));
+  workstreams.set("main", t('agent.main'));
 
   // Extract workstream IDs directly from message.workstream_id only
   messages.forEach((message) => {
@@ -135,7 +139,7 @@ export function extractWorkstreams(
   // Special case: if there's only the 'main' workstream, we want to explicitly make sure it exists
   // This ensures that both 'all' and 'main' are added if no additional workstreams are found
   if (workstreams.size <= 2 && !workstreams.has("main")) {
-    workstreams.set("main", "Main");
+    workstreams.set("main", t('agent.main'));
   }
 
   console.log("Final workstreams map:", workstreams);