@parhelia/core 0.1.12844 → 0.1.12868

package/dist/editor/ai/terminal/components/AiResponseMessage.js

@@ -8,15 +8,19 @@ import { X, Brain, ChevronDown, ChevronRight, Loader2, Undo2, Check, } from "luc
 import { Button } from "../../../../components/ui/button";
 import { Checkbox } from "../../../../components/ui/checkbox";
 import { Tooltip, TooltipTrigger, TooltipContent, } from "../../../../components/ui/tooltip";
-import { SecretAgentIcon } from "../../../ui/Icons";
 import { CopyButton } from "../../../../components/ui/copy-button";
-import { sanitizeHtml, sanitizeSvg } from "../../../../lib/sanitize";
+import { sanitizeHtml } from "../../../../lib/sanitize";
 // Helper to extract partial quick actions from potentially incomplete JSON during streaming
 const extractPartialQuickActions = (jsonText) => {
     const actions = [];
+    let headline;
     // First try to parse complete JSON
     try {
         const parsed = JSON.parse(jsonText);
+        headline =
+            !Array.isArray(parsed) && typeof parsed?.headline === "string"
+                ? parsed.headline.trim() || undefined
+                : undefined;
         const rawActions = Array.isArray(parsed)
             ? parsed
             : parsed?.actions || parsed?.buttons || parsed?.choices || [];
@@ -46,11 +50,20 @@ const extractPartialQuickActions = (jsonText) => {
                 }
             });
         }
-        return actions;
+        return { headline, actions };
     }
     catch (e) {
         // JSON is incomplete, try to extract whatever complete action objects we can find
     }
+    const headlineMatch = jsonText.match(/"(?:headline|title)"\s*:\s*"([^"\\]*(\\.[^"\\]*)*)"/);
+    if (headlineMatch?.[1]) {
+        try {
+            headline = JSON.parse(`"${headlineMatch[1]}"`).trim() || undefined;
+        }
+        catch {
+            headline = headlineMatch[1].trim() || undefined;
+        }
+    }
     // Look for individual action objects in the partial JSON
     // Match patterns like: { "label": "...", ... }
     const labelPattern = /"(?:label|text)"\s*:\s*"([^"\\]*(\\.[^"\\]*)*)"/g;
@@ -123,7 +136,7 @@ const extractPartialQuickActions = (jsonText) => {
             // Skip malformed objects
         }
     }
-    return actions;
+    return { headline, actions };
 };
 function parseContentSegments(content, hideIncomplete) {
     if (!content)
@@ -255,9 +268,9 @@ function parseContentSegments(content, hideIncomplete) {
                 // Incomplete fenced block during streaming
                 if (hideIncomplete && pick.type === "quick") {
                     // Try to parse partial quick actions and show what we have so far
-                    const partialActions = extractPartialQuickActions(jsonText);
-                    if (partialActions.length > 0) {
-                        segments.push({ kind: "actions", actions: partialActions });
+                    const partialActionGroup = extractPartialQuickActions(jsonText);
+                    if (partialActionGroup.actions.length > 0) {
+                        segments.push({ kind: "actions", ...partialActionGroup });
                     }
                     break;
                 }
@@ -380,7 +393,10 @@ function parseContentSegments(content, hideIncomplete) {
                         });
                     }
                     if (actions.length > 0) {
-                        segments.push({ kind: "actions", actions });
+                        const headline = typeof parsed?.headline === "string"
+                            ? parsed.headline.trim() || undefined
+                            : undefined;
+                        segments.push({ kind: "actions", headline, actions });
                     }
                 }
                 else if (pick.type === "todo") {
@@ -448,9 +464,9 @@ function parseContentSegments(content, hideIncomplete) {
             // Incomplete plain JSON block during streaming
             if (hideIncomplete && pick.type === "quick") {
                 // Try to parse partial quick actions and show what we have so far
-                const partialActions = extractPartialQuickActions(jsonText);
-                if (partialActions.length > 0) {
-                    segments.push({ kind: "actions", actions: partialActions });
+                const partialActionGroup = extractPartialQuickActions(jsonText);
+                if (partialActionGroup.actions.length > 0) {
+                    segments.push({ kind: "actions", ...partialActionGroup });
                 }
                 break;
             }
@@ -498,7 +514,10 @@ function parseContentSegments(content, hideIncomplete) {
                     });
                 }
                 if (actions.length > 0) {
-                    segments.push({ kind: "actions", actions });
+                    const headline = typeof parsed?.headline === "string"
+                        ? parsed.headline.trim() || undefined
+                        : undefined;
+                    segments.push({ kind: "actions", headline, actions });
                 }
             }
             else {
@@ -618,17 +637,21 @@ function JsonBlockDisplay({ data, raw, className, defaultCollapsed = false, }) {
     return (_jsxs("div", { className: `border-border-default bg-neutral-grey-5 my-2 overflow-hidden rounded-lg border ${className || ""}`, children: [_jsxs("div", { className: "border-border-default bg-neutral-grey-5 flex items-center justify-between border-b px-3 py-2", children: [_jsxs("button", { onClick: () => setIsExpanded(!isExpanded), className: "text-neutral-grey-100 hover:text-neutral-grey-100 flex items-center gap-2 text-xs font-medium", children: [isExpanded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }), _jsx("span", { children: getTitle() })] }), _jsx("button", { onClick: handleCopy, className: "badge-pad text-neutral-grey-50 hover:bg-neutral-grey-10 hover:text-neutral-grey-100 rounded text-xs transition-colors", children: isCopied ? "Copied!" : "Copy" })] }), isExpanded && (_jsx("div", { className: "overflow-x-auto p-3", children: data ? (_jsx("pre", { className: "font-mono text-[11px] leading-relaxed", children: renderJsonValue(data) })) : (_jsx("pre", { className: "text-neutral-grey-50 font-mono text-[11px] leading-relaxed whitespace-pre-wrap", children: raw })) }))] }));
 }
 function simpleFormatToHtml(text) {
+    const stripLegacyFontTags = (value) => value
+        .replace(/<\/?font\b[^>]*>/gi, "")
+        .replace(/&lt;\/?font\b(?:(?!&gt;)[\s\S])*?&gt;/gi, "");
+    const normalizedText = stripLegacyFontTags(text);
     //Inline formatting
     const format = (s) => s
-        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, url) => `<a href="${url}" style="color: var(--color-component-default); text-decoration: underline;" target="_blank" rel="noopener noreferrer">${text.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")}</a>`)
-        .replace(/^######\s+(.+)$/, '<h6 style="font-size: 0.75rem; font-weight: 500; margin: 0.75rem 0 0.25rem 0; color: var(--color-neutral-grey-50); letter-spacing: 0.01em; line-height: 1.3;">$1</h6>')
-        .replace(/^#####\s+(.+)$/, '<h5 style="font-size: 0.875rem; font-weight: 500; margin: 0.875rem 0 0.375rem 0; color: var(--color-neutral-grey-50); letter-spacing: 0.01em; line-height: 1.35;">$1</h5>')
-        .replace(/^####\s+(.+)$/, '<h4 style="font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem 0; color: var(--color-neutral-grey-100); letter-spacing: -0.01em; line-height: 1.4;">$1</h4>')
-        .replace(/^###\s+(.+)$/, '<h3 style="font-size: 1.125rem; font-weight: 600; margin: 1.125rem 0 0.5rem 0; color: var(--color-neutral-grey-100); letter-spacing: -0.015em; line-height: 1.4;">$1</h3>')
-        .replace(/^##\s+(.+)$/, '<h2 style="font-size: 1.375rem; font-weight: 600; margin: 1.25rem 0 0.625rem 0; color: var(--color-neutral-grey-100); letter-spacing: -0.02em; line-height: 1.3;">$1</h2>')
-        .replace(/^#\s+(.+)$/, '<h1 style="font-size: 1.75rem; font-weight: 700; margin: 1.5rem 0 0.75rem 0; color: var(--color-neutral-grey-100); letter-spacing: -0.025em; line-height: 1.2;">$1</h1>')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${text.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")}</a>`)
+        .replace(/^######\s+(.+)$/, "<h6>$1</h6>")
+        .replace(/^#####\s+(.+)$/, "<h5>$1</h5>")
+        .replace(/^####\s+(.+)$/, "<h4>$1</h4>")
+        .replace(/^###\s+(.+)$/, "<h3>$1</h3>")
+        .replace(/^##\s+(.+)$/, "<h2>$1</h2>")
+        .replace(/^#\s+(.+)$/, "<h1>$1</h1>")
         .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
-    const lines = text.split(/\r?\n/);
+    const lines = normalizedText.split(/\r?\n/);
     const blocks = [];
     let i = 0;
     while (i < lines.length) {
@@ -640,7 +663,7 @@ function simpleFormatToHtml(text) {
         const t = line.trim();
         // Sepperator Lines
         if (/^[\-\*\_]{3,}$/.test(t)) {
-            blocks.push('<hr style="border: none; border-top: 1px solid var(--color-border-default); margin: 0.75rem 0;" />');
+            blocks.push("<hr />");
             i++;
             continue;
         }
@@ -668,15 +691,14 @@ function simpleFormatToHtml(text) {
                     break;
             }
             if (rows.length > 0 && rows[0]) {
-                let html = '<table style="border-collapse: collapse; width: 100%; margin: 0.5rem 0; font-size: 0.75rem;"><thead><tr style="border-bottom: 2px solid var(--color-border-default);">';
-                rows[0].forEach((c) => (html += `<th style="padding: 0.375rem 0.5rem; text-align: left; font-weight: 600; color: var(--color-neutral-grey-100);">${format(c)}</th>`));
+                let html = "<table><thead><tr>";
+                rows[0].forEach((c) => (html += `<th>${format(c)}</th>`));
                 html += "</tr></thead>";
                 if (rows.length > 1) {
                     html += "<tbody>";
                     for (let k = 1; k < rows.length; k++) {
-                        html +=
-                            '<tr style="border-bottom: 1px solid var(--color-neutral-grey-5);">';
-                        rows[k]?.forEach((c) => (html += `<td style="padding: 0.375rem 0.5rem; color: var(--color-neutral-grey-50);">${format(c)}</td>`));
+                        html += "<tr>";
+                        rows[k]?.forEach((c) => (html += `<td>${format(c)}</td>`));
                         html += "</tr>";
                     }
                     html += "</tbody>";
@@ -706,16 +728,12 @@ function simpleFormatToHtml(text) {
                 j++;
             }
             if (listLines.length > 0) {
-                const listStyleByTag = {
-                    ul: "list-style: disc;",
-                    ol: "list-style: decimal;",
-                };
                 const indentStack = [];
                 const tagStack = [];
                 let html = "";
                 let itemOpen = false;
                 const openList = (tag, indent) => {
-                    html += `<${tag} style="${listStyleByTag[tag]} padding-left: 1.5rem; margin: 0.25rem 0;">`;
+                    html += `<${tag}>`;
                     tagStack.push(tag);
                     indentStack.push(indent);
                 };
@@ -748,8 +766,7 @@ function simpleFormatToHtml(text) {
                         if (currentIndent === undefined ||
                             (entry.indent !== currentIndent && entry.indent > currentIndent)) {
                             if (!itemOpen) {
-                                html +=
-                                    '<li style="margin: 0.25rem 0; color: var(--color-neutral-grey-50);">';
+                                html += "<li>";
                                 itemOpen = true;
                             }
                             openList(tag, entry.indent);
@@ -766,7 +783,7 @@ function simpleFormatToHtml(text) {
                         }
                     }
                     closeItem();
-                    html += `<li style="margin: 0.25rem 0; color: var(--color-neutral-grey-50);">${format(entry.content)}`;
+                    html += `<li>${format(entry.content)}`;
                     itemOpen = true;
                 }
                 while (tagStack.length > 0)
@@ -801,6 +818,154 @@ function simpleFormatToHtml(text) {
     }
     return sanitizeHtml(result.replace(/<\/(h[1-6])><br\/>/g, "</$1>"));
 }
+const assistantMessageTextClassName = [
+    "max-w-none text-xs leading-5 text-neutral-grey-100 select-text",
+    "[&_a]:text-neutral-grey-100 [&_a]:underline [&_a]:underline-offset-2",
+    "[&_strong]:font-semibold [&_strong]:text-neutral-grey-100",
+    "[&_h1]:mt-0 [&_h1]:mb-3 [&_h1]:text-[16px] [&_h1]:leading-6 [&_h1]:font-semibold [&_h1]:text-neutral-grey-100",
+    "[&_h2]:mt-3 [&_h2]:mb-1.5 [&_h2]:text-[15px] [&_h2]:leading-5 [&_h2]:font-semibold [&_h2]:text-neutral-grey-100",
+    "[&_h3]:mt-2.5 [&_h3]:mb-1 [&_h3]:text-[13px] [&_h3]:leading-5 [&_h3]:font-semibold [&_h3]:text-neutral-grey-100",
+    "[&_h4]:mt-2 [&_h4]:mb-1 [&_h4]:text-[12px] [&_h4]:leading-5 [&_h4]:font-semibold [&_h4]:text-neutral-grey-100",
+    "[&_h5]:mt-2 [&_h5]:mb-1 [&_h5]:text-[12px] [&_h5]:leading-5 [&_h5]:font-semibold [&_h5]:text-neutral-grey-100",
+    "[&_h6]:mt-2 [&_h6]:mb-1 [&_h6]:text-[12px] [&_h6]:leading-5 [&_h6]:font-semibold [&_h6]:text-neutral-grey-100",
+    "[&_ul]:my-1.5 [&_ul]:list-disc [&_ul]:pl-5",
+    "[&_ol]:my-1.5 [&_ol]:list-decimal [&_ol]:pl-5",
+    "[&_li]:my-0.5 [&_li]:pl-1 [&_li]:leading-5 [&_li]:text-neutral-grey-100",
+    "[&_li::marker]:text-neutral-grey-100",
+    "[&_table]:my-2 [&_table]:text-neutral-grey-100",
+    "[&_th]:px-2 [&_th]:py-1.5 [&_th]:text-neutral-grey-100",
+    "[&_td]:px-2 [&_td]:py-1.5 [&_td]:text-neutral-grey-100",
+].join(" ");
+const cleanToolFunctionName = (name) => {
+    return (name || "")
+        .replace(" (approved)", "")
+        .replace(" (rejected)", "")
+        .replace(" (pending approval)", "")
+        .trim();
+};
+const getToolFunctionName = (toolCall) => {
+    return cleanToolFunctionName(toolCall.function?.name || toolCall.displayName || "");
+};
+const isActivityItem = (item) => {
+    if (item.type === "toolcalls") {
+        return item.toolCalls.length > 0;
+    }
+    return (item.segment.kind === "reasoning" && item.segment.text.trim().length > 0);
+};
+const isVisibleUserDirectedItem = (item) => {
+    if (item.type !== "segment" || item.segment.kind === "reasoning") {
+        return false;
+    }
+    const segment = item.segment;
+    if (segment.kind === "text") {
+        return segment.text.trim().length > 0;
+    }
+    if (segment.kind === "actions") {
+        return segment.actions.length > 0;
+    }
+    if (segment.kind === "todo") {
+        return segment.items.length > 0 || !!segment.title?.trim();
+    }
+    if (segment.kind === "media") {
+        return segment.items.length > 0;
+    }
+    if (segment.kind === "json") {
+        return (!!segment.raw.trim() ||
+            (segment.data !== null && segment.data !== undefined));
+    }
+    return false;
+};
+const groupActivityItems = (flatItems) => {
+    const displayItems = [];
+    const activityEntries = [];
+    const flushActivityEntries = () => {
+        const entries = activityEntries;
+        if (entries.length === 0) {
+            return;
+        }
+        const first = entries[0];
+        if (entries.length === 1) {
+            displayItems.push({
+                type: "single",
+                entry: first,
+                key: `item-${first.index}`,
+            });
+            return;
+        }
+        const last = entries[entries.length - 1];
+        displayItems.push({
+            type: "activity-group",
+            entries,
+            key: `activity-${first.index}-${last.index}`,
+        });
+    };
+    flatItems.forEach((item, index) => {
+        if (isActivityItem(item)) {
+            activityEntries.push({ item, index });
+            return;
+        }
+        if (isVisibleUserDirectedItem(item)) {
+            flushActivityEntries();
+            displayItems.push({
+                type: "single",
+                entry: { item, index },
+                key: `item-${index}`,
+            });
+        }
+    });
+    flushActivityEntries();
+    return displayItems;
+};
+function ActivityBlockGroup({ entries, isLive, renderEntry, }) {
+    const toolCalls = entries.flatMap((entry) => entry.item.type === "toolcalls" ? entry.item.toolCalls : []);
+    const thinkingCount = entries.filter((entry) => entry.item.type === "segment" && entry.item.segment.kind === "reasoning").length;
+    const toolCallCount = toolCalls.length;
+    const toolNames = [
+        ...new Set(toolCalls.map(getToolFunctionName).filter(Boolean)),
+    ];
+    const errorCount = toolCalls.filter((toolCall) => {
+        const rawName = toolCall.function?.name || toolCall.displayName || "";
+        const isRejected = rawName.toLowerCase().includes("(rejected)");
+        return !!toolCall.function?.error || isRejected;
+    }).length;
+    const hasPendingApproval = toolCalls.some((toolCall) => {
+        const rawName = toolCall.function?.name || toolCall.displayName || "";
+        return (!!toolCall.requiresApproval &&
+            !rawName.includes("(approved)") &&
+            !rawName.includes("(rejected)"));
+    });
+    const hasIncompleteToolCall = toolCalls.some((toolCall) => {
+        return (!toolCall.isCompleted &&
+            !toolCall.function?.result &&
+            !toolCall.function?.error);
+    });
+    const [isExpanded, setIsExpanded] = useState(hasPendingApproval);
+    const summaryParts = [
+        toolCallCount > 0
+            ? `${toolCallCount} tool call${toolCallCount !== 1 ? "s" : ""}`
+            : null,
+        thinkingCount > 0
+            ? `${thinkingCount} thinking block${thinkingCount !== 1 ? "s" : ""}`
+            : null,
+    ].filter(Boolean);
+    const detailsText = toolNames.length <= 3
+        ? toolNames.join(", ")
+        : `${toolNames.slice(0, 2).join(", ")} +${toolNames.length - 2} more`;
+    const isActive = !errorCount && (isLive || hasIncompleteToolCall);
+    useEffect(() => {
+        if (hasPendingApproval) {
+            setIsExpanded(true);
+        }
+    }, [hasPendingApproval]);
+    return (_jsxs("div", { className: "border-border-default my-2 overflow-hidden rounded-lg border", "data-testid": "agent-activity-group", children: [_jsxs("button", { type: "button", className: "group text-neutral-grey-50 hover:bg-neutral-grey-5/60 hover:text-neutral-grey-100 flex w-full cursor-pointer items-center gap-1.5 px-2 py-1.5 text-left text-xs transition-all", onClick: () => {
+                    setIsExpanded(!isExpanded);
+                }, "aria-expanded": isExpanded, "data-testid": "agent-activity-group-toggle", children: [_jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center transition-transform group-hover:scale-110", children: isExpanded ? (_jsx(ChevronDown, { size: 14, strokeWidth: 1.5, className: "text-neutral-grey-50" })) : (_jsx(ChevronRight, { size: 14, strokeWidth: 1.5, className: "text-neutral-grey-50" })) }), _jsx("span", { className: `shrink-0 leading-4 font-medium ${isActive ? "animate-text-shimmer" : ""}`, children: summaryParts.join(", ") }), detailsText && (_jsx("span", { className: "text-neutral-grey-50 min-w-0 flex-1 truncate text-[10px] leading-4", children: detailsText })), errorCount > 0 && (_jsxs("span", { className: "text-feedback-red shrink-0 text-[10px] leading-4", children: ["(", errorCount, " error", errorCount !== 1 ? "s" : "", ")"] })), _jsx("div", { className: "ml-auto flex h-4 w-4 shrink-0 items-center justify-center", children: errorCount > 0 ? (_jsx(XCircleLike, {})) : isActive ? (_jsx(Loader2, { className: "text-neutral-grey-50 h-3.5 w-3.5 animate-spin", strokeWidth: 1.5 })) : (_jsx(Check, { className: "text-feedback-green h-3.5 w-3.5", strokeWidth: 2 })) })] }), _jsx("div", { className: "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none", style: {
+                    gridTemplateRows: isExpanded ? "1fr" : "0fr",
+                }, "aria-hidden": !isExpanded, "data-testid": "agent-activity-group-content", children: _jsx("div", { className: "min-h-0 overflow-hidden", children: _jsx("div", { className: "border-border-default/60 border-t px-2 py-1", children: entries.map((entry) => renderEntry(entry)) }) }) })] }));
+}
+function XCircleLike() {
+    return (_jsx("span", { className: "border-feedback-red text-feedback-red flex h-3.5 w-3.5 items-center justify-center rounded-full border", children: _jsx(X, { className: "h-2.5 w-2.5", strokeWidth: 2 }) }));
+}
 // Thinking block component with auto-scroll
 function ThinkingBlock({ text, isStreaming, isCollapsed, thinkingKey, onToggleCollapse, }) {
     const contentRef = useRef(null);
@@ -810,13 +975,9 @@ function ThinkingBlock({ text, isStreaming, isCollapsed, thinkingKey, onToggleCo
             contentRef.current.scrollTop = contentRef.current.scrollHeight;
         }
     }, [text, isStreaming, isCollapsed]);
-    return (_jsxs("div", { className: `my-2 flex flex-col gap-1 rounded-lg border text-[11px] transition-colors duration-200 ${isStreaming
-            ? "border-border-default bg-neutral-grey-5/50 text-neutral-grey-100"
-            : "border-border-default bg-neutral-grey-5/50 text-neutral-grey-50"}`, children: [_jsxs("div", { className: `flex cursor-pointer items-center gap-1.5 p-2 text-[10px] font-medium tracking-wider transition-colors ${isStreaming
-                    ? "text-neutral-grey-50 hover:bg-neutral-grey-5/50"
-                    : "text-neutral-grey-50 hover:bg-neutral-grey-5/50"}`, onClick: onToggleCollapse, children: [isCollapsed ? _jsx(ChevronRight, { size: 12 }) : _jsx(ChevronDown, { size: 12 }), _jsx(Brain, { size: 12, className: isStreaming ? "animate-pulse" : "" }), _jsx("span", { children: "Thinking" }), isStreaming && (_jsx(Loader2, { className: "text-neutral-grey-50 ml-1 h-3 w-3 animate-spin", strokeWidth: 1.5 }))] }), !isCollapsed && (_jsxs("div", { ref: contentRef, className: `prose-sm max-h-[6rem] overflow-y-auto px-2 pb-2 leading-relaxed whitespace-pre-wrap italic ${isStreaming ? "text-neutral-grey-50" : ""}`, children: [text, isStreaming && (_jsx("span", { className: "bg-neutral-grey-50 ml-0.5 inline-block h-3 w-0.5 animate-pulse" }))] }))] }));
+    return (_jsxs("div", { className: `my-2 flex flex-col gap-1 text-[11px] transition-colors duration-200 ${isStreaming ? "text-neutral-grey-100" : "text-neutral-grey-50"}`, children: [_jsxs("div", { className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex cursor-pointer items-center gap-1.5 p-2 text-[10px] font-medium tracking-wider transition-colors", onClick: onToggleCollapse, children: [isCollapsed ? _jsx(ChevronRight, { size: 12 }) : _jsx(ChevronDown, { size: 12 }), _jsx(Brain, { size: 12, className: isStreaming ? "animate-pulse" : "" }), _jsx("span", { children: "Thinking" }), isStreaming && (_jsx(Loader2, { className: "text-neutral-grey-50 ml-1 h-3 w-3 animate-spin", strokeWidth: 1.5 }))] }), !isCollapsed && (_jsxs("div", { ref: contentRef, className: `prose-sm max-h-[6rem] overflow-y-auto px-2 pb-2 leading-relaxed whitespace-pre-wrap italic ${isStreaming ? "text-neutral-grey-50" : ""}`, children: [text, isStreaming && (_jsx("span", { className: "bg-neutral-grey-50 ml-0.5 inline-block h-3 w-0.5 animate-pulse" }))] }))] }));
 }
-export function AiResponseMessage({ messages, finished, editOperations, error, onQuickAction, defaultCollapseJson = false, profileSvgIcon, agentId, agentName, allPendingApprovals, onSwitchToAutonomous, browserCaptureInlinePrompt, readOnly = false, }) {
+export function AiResponseMessage({ messages, finished, editOperations, error, onQuickAction, defaultCollapseJson = false, agentId, agentName, allPendingApprovals, onSwitchToAutonomous, browserCaptureInlinePrompt, readOnly = false, followsUserMessage = false, }) {
     const editContext = useEditContext();
     // const [showFunctions, setShowFunctions] = useState(false);
     const [changesRejected, setChangesRejected] = useState(undefined);
@@ -917,6 +1078,7 @@ export function AiResponseMessage({ messages, finished, editOperations, error, o
     const lastMessage = messages[messages.length - 1];
     // Memoize filtered messages and their parsed content segments to avoid hooks inside loops
     const nonToolAssistantMessages = useMemo(() => messages.filter((x) => x.role !== "tool" && x.role !== "user"), [messages]);
+    // Create a flat structure of content items: text, tool calls, text, tool calls, etc.
     const flatItems = useMemo(() => {
         const items = [];
         // Collect all unique tool call IDs and their latest versions across all messages in this group
@@ -1032,6 +1194,7 @@ export function AiResponseMessage({ messages, finished, editOperations, error, o
         preservedToolCalls,
         getToolArgumentsScore,
     ]);
+    const displayItems = useMemo(() => groupActivityItems(flatItems), [flatItems]);
     // Check if any reasoning block is currently showing a spinner
     const isAnyReasoningStreaming = useMemo(() => {
         if (!isStreaming || allPendingApprovals?.length)
@@ -1076,165 +1239,172 @@ export function AiResponseMessage({ messages, finished, editOperations, error, o
         });
         return textParts.join("\n\n");
     }, [flatItems]);
-    return (_jsxs("div", { className: "flex gap-3 px-4 py-3", "data-testid": "agent-message", children: [_jsx("div", { className: "flex-shrink-0", children: profileSvgIcon ? (_jsx("div", { className: "text-neutral-grey-50 flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
-                        __html: sanitizeSvg(profileSvgIcon),
-                    } })) : (_jsx(SecretAgentIcon, { size: 20, strokeWidth: 1, className: "text-neutral-grey-50" })) }), _jsxs("div", { className: "min-w-0 flex-1 select-text", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("span", { className: "text-neutral-grey-100 text-xs font-medium", children: agentName || "Agent" }), lastMessage && lastMessage.createdDate && (_jsx(TimeWithTooltip, { date: new Date(lastMessage.createdDate), className: "text-neutral-grey-50 text-xs", testId: "agent-message-timestamp", timestampAttr: lastMessage.createdDate }))] }), error && (_jsx("div", { className: "border-feedback-red bg-feedback-red-light mb-2 rounded-lg border-l-4 p-2.5", "data-testid": "agent-error", children: _jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx(X, { className: "text-feedback-red h-5 w-5", strokeWidth: 1 }) }), _jsxs("div", { className: "ml-3", children: [_jsx("p", { className: "text-feedback-red text-sm font-medium", children: "Agent Error" }), _jsx("p", { className: "text-feedback-red mt-1 text-sm", children: error })] })] }) })), flatItems.map((item, itemIndex) => {
-                        const prevItem = itemIndex > 0 ? flatItems[itemIndex - 1] : null;
-                        const isLastItem = itemIndex === flatItems.length - 1;
-                        const shouldAddSpacing = prevItem?.type === "toolcalls" && item.type === "segment";
-                        if (item.type === "segment") {
-                            const segment = item.segment;
-                            const message = item.message;
-                            if (segment.kind === "reasoning") {
-                                const thinkingKey = `thinking-${message.id}-${itemIndex}`;
-                                // Only show the "Thinking" spinner while we're still in the pre-output phase.
-                                // Once any actual response content starts appearing, thinking has effectively finished,
-                                // even if the overall response is still streaming.
-                                const contentString = (message.content ||
-                                    message.formattedContent ||
-                                    "");
-                                const hasToolCalls = (message.tool_calls && message.tool_calls.length > 0) ||
-                                    (preservedToolCalls[message.id] &&
-                                        preservedToolCalls[message.id].length > 0);
-                                const hasStartedOutput = contentString.trim().length > 0 || hasToolCalls;
-                                // Check if this reasoning block is still actively streaming
-                                const isReasoningStreaming = !!(isStreaming &&
-                                    item.isLastMessage &&
-                                    !hasStartedOutput &&
-                                    !allPendingApprovals?.length);
-                                // During streaming, default to expanded; after streaming, default to collapsed
-                                const isCollapsed = collapsedThinking[thinkingKey] !== undefined
-                                    ? collapsedThinking[thinkingKey]
-                                    : !isReasoningStreaming; // Expanded during streaming, collapsed after
-                                return (_jsx(ThinkingBlock, { text: segment.text, isStreaming: isReasoningStreaming, isCollapsed: isCollapsed, thinkingKey: thinkingKey, onToggleCollapse: () => {
-                                        setCollapsedThinking((prev) => ({
-                                            ...prev,
-                                            [thinkingKey]: !isCollapsed,
-                                        }));
-                                    } }, `item-${itemIndex}`));
-                            }
-                            if (segment.kind === "text") {
-                                const trimmedText = segment.text.trim();
-                                if (!trimmedText)
-                                    return null;
-                                // Check for command links in the text
-                                const { text, links } = extractCommandLinks(trimmedText);
-                                if (links.length > 0) {
-                                    // Split text around command links and render buttons
-                                    const parts = [];
-                                    let lastIndex = 0;
-                                    links.forEach((link, linkIdx) => {
-                                        // Add text before the link
-                                        if (link.index > lastIndex) {
-                                            const textBefore = text.substring(lastIndex, link.index);
-                                            const html = simpleFormatToHtml(textBefore);
-                                            if (html) {
-                                                parts.push(_jsx("span", { dangerouslySetInnerHTML: { __html: html } }, `text-${itemIndex}-${linkIdx}`));
-                                            }
-                                        }
-                                        // Add the button
-                                        // Calculate the actual text that will be submitted (same logic as in AgentTerminal.tsx)
-                                        // For command links: prompt=command, value=command, so submitted text is link.command
-                                        const submittedText = (link.command ||
-                                            link.label ||
-                                            "").trim();
-                                        parts.push(_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "outline", className: "mx-1 inline-flex", onClick: () => onQuickAction?.({
-                                                            label: link.label,
-                                                            value: link.command,
-                                                            prompt: link.command,
-                                                        }, message), children: link.label }) }), submittedText && (_jsx(TooltipContent, { children: _jsx("p", { className: "max-w-xs break-words", children: submittedText }) }))] }, `btn-${itemIndex}-${linkIdx}`));
-                                        // Find the end of this match in the original text
-                                        const matchEnd = link.index +
-                                            `[${link.label}](command:${link.command})`.length;
-                                        lastIndex = matchEnd;
-                                    });
-                                    // Add any remaining text after the last link
-                                    if (lastIndex < text.length) {
-                                        const textAfter = text.substring(lastIndex);
-                                        const html = simpleFormatToHtml(textAfter);
-                                        if (html) {
-                                            parts.push(_jsx("span", { dangerouslySetInnerHTML: { __html: html } }, `text-${itemIndex}-end`));
-                                        }
-                                    }
-                                    return (_jsxs("div", { className: `prose prose-sm text-neutral-grey-100 max-w-none text-xs select-text ${shouldAddSpacing ? "mt-2" : ""}`, children: [parts, isStreaming && isLastItem && (_jsx("span", { className: "bg-neutral-grey-50 ml-0.5 inline-block h-3 w-0.5 animate-pulse" }))] }, `item-${itemIndex}`));
-                                }
-                                const html = simpleFormatToHtml(trimmedText);
-                                if (!html)
-                                    return null;
-                                return (_jsxs("div", { className: `prose prose-sm text-neutral-grey-100 max-w-none text-xs select-text ${shouldAddSpacing ? "mt-2" : ""}`, children: [_jsx("span", { dangerouslySetInnerHTML: { __html: html } }), isStreaming && isLastItem && (_jsx("span", { className: "bg-neutral-grey-50 ml-0.5 inline-block h-3 w-0.5 animate-pulse" }))] }, `item-${itemIndex}`));
-                            }
-                            if (segment.kind === "todo") {
-                                const todo = segment;
-                                return (_jsxs("div", { className: `my-1 ${shouldAddSpacing ? "mt-2" : ""}`, children: [todo.title && (_jsx("div", { className: "text-neutral-grey-100 mb-1 text-xs font-medium", children: todo.title })), _jsx("div", { className: "flex flex-col gap-1", children: todo.items.map((todoItem, iIdx) => (_jsxs("label", { className: "text-neutral-grey-100 flex items-start gap-2 text-xs", children: [_jsx(Checkbox, { checked: todoItem.status === "completed", onCheckedChange: () => { }, "aria-readonly": true, className: "mt-0.5" }), _jsxs("div", { children: [_jsx("div", { className: todoItem.status === "completed" ||
-                                                                    todoItem.status === "cancelled"
-                                                                    ? "line-through opacity-70"
-                                                                    : todoItem.status === "in_progress"
-                                                                        ? "text-feedback-blue font-medium"
-                                                                        : "", children: todoItem.title }), todoItem.instructions && (_jsx("div", { className: "text-neutral-grey-100 text-xs", children: todoItem.instructions }))] })] }, (todoItem.id || todoItem.title || "todo") + "-" + iIdx))) })] }, `item-${itemIndex}`));
-                            }
-                            if (segment.kind === "media") {
-                                const media = segment;
-                                return (_jsx("div", { className: `my-2 flex flex-col gap-3 ${shouldAddSpacing ? "mt-2" : ""}`, children: media.items.map((mediaItem, mIdx) => (_jsx(MediaImage, { itemId: mediaItem.itemId, label: mediaItem.label }, mediaItem.itemId || `media-${itemIndex}-${mIdx}`))) }, `item-${itemIndex}`));
-                            }
-                            if (segment.kind === "json") {
-                                return (_jsx(JsonBlockDisplay, { data: segment.data, raw: segment.raw, defaultCollapsed: defaultCollapseJson, className: shouldAddSpacing ? "mt-2" : "" }, `item-${itemIndex}`));
+    const renderFlatItem = (item, itemIndex) => {
+        const prevItem = itemIndex > 0 ? flatItems[itemIndex - 1] : null;
+        const isLastItem = itemIndex === flatItems.length - 1;
+        const shouldAddSpacing = prevItem?.type === "toolcalls" && item.type === "segment";
+        if (item.type === "segment") {
+            const segment = item.segment;
+            const message = item.message;
+            if (segment.kind === "reasoning") {
+                const thinkingKey = `thinking-${message.id}-${itemIndex}`;
+                // Only show the "Thinking" spinner while we're still in the pre-output phase.
+                // Once any actual response content starts appearing, thinking has effectively finished,
+                // even if the overall response is still streaming.
+                const contentString = (message.content ||
+                    message.formattedContent ||
+                    "");
+                const hasToolCalls = (message.tool_calls && message.tool_calls.length > 0) ||
+                    (preservedToolCalls[message.id] &&
+                        preservedToolCalls[message.id].length > 0);
+                const hasStartedOutput = contentString.trim().length > 0 || hasToolCalls;
+                // Check if this reasoning block is still actively streaming
+                const isReasoningStreaming = !!(isStreaming &&
+                    item.isLastMessage &&
+                    !hasStartedOutput &&
+                    !allPendingApprovals?.length);
+                // During streaming, default to expanded; after streaming, default to collapsed
+                const isCollapsed = collapsedThinking[thinkingKey] !== undefined
+                    ? collapsedThinking[thinkingKey]
+                    : !isReasoningStreaming; // Expanded during streaming, collapsed after
+                return (_jsx(ThinkingBlock, { text: segment.text, isStreaming: isReasoningStreaming, isCollapsed: isCollapsed, thinkingKey: thinkingKey, onToggleCollapse: () => {
+                        setCollapsedThinking((prev) => ({
+                            ...prev,
+                            [thinkingKey]: !isCollapsed,
+                        }));
+                    } }, `item-${itemIndex}`));
+            }
+            if (segment.kind === "text") {
+                const trimmedText = segment.text.trim();
+                if (!trimmedText)
+                    return null;
+                // Check for command links in the text
+                const { text, links } = extractCommandLinks(trimmedText);
+                if (links.length > 0) {
+                    // Split text around command links and render buttons
+                    const parts = [];
+                    let lastIndex = 0;
+                    links.forEach((link, linkIdx) => {
+                        // Add text before the link
+                        if (link.index > lastIndex) {
+                            const textBefore = text.substring(lastIndex, link.index);
+                            const html = simpleFormatToHtml(textBefore);
+                            if (html) {
+                                parts.push(_jsx("span", { dangerouslySetInnerHTML: { __html: html } }, `text-${itemIndex}-${linkIdx}`));
                             }
-                            // segment.kind === "actions"
-                            const actions = segment.actions;
-                            return (_jsx("div", { className: `my-3 flex flex-wrap gap-2 ${shouldAddSpacing ? "mt-2" : ""}`, children: actions.map((a, aIdx) => {
-                                    const variant = a.style === "destructive"
-                                        ? "destructive"
-                                        : a.style === "outline"
-                                            ? "outline"
-                                            : a.style === "secondary"
-                                                ? "secondary"
-                                                : "default"; // primary
-                                    // Calculate the actual text that will be submitted (same logic as in AgentTerminal.tsx)
-                                    const submittedText = (a.prompt ||
-                                        a.value ||
-                                        a.label ||
-                                        "").trim();
-                                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { size: "xs", variant: variant, onClick: () => onQuickAction?.({
-                                                        label: a.label,
-                                                        prompt: a.prompt,
-                                                        value: a.value,
-                                                        behavior: a.behavior,
-                                                        placeholder: a.placeholder,
-                                                    }, message), children: a.label }) }), submittedText && (_jsx(TooltipContent, { children: _jsx("p", { className: "max-w-xs break-words", children: submittedText }) }))] }, (a.id || a.label || "btn") + "-" + aIdx));
-                                }) }, `item-${itemIndex}`));
                         }
-                        // item.type === "toolcalls"
-                        return (_jsx("div", { className: shouldAddSpacing ? "mt-2" : "", children: _jsx(ToolCallDisplay, { toolCalls: item.toolCalls, finished: finished, openPopovers: openPopovers, setOpenPopovers: setOpenPopovers, messageId: item.messageId, agentId: agentId, allPendingApprovals: allPendingApprovals, onSwitchToAutonomous: onSwitchToAutonomous, browserCaptureInlinePrompt: browserCaptureInlinePrompt, readOnly: readOnly }) }, `item-${itemIndex}`));
-                    }), isStreaming &&
-                        !error &&
-                        !allPendingApprovals?.length &&
-                        !isAnyReasoningStreaming && (_jsxs("div", { className: "flex items-center gap-1 pt-2", "data-testid": "agent-streaming-dots", children: [_jsx("div", { className: "bg-neutral-grey-50 h-1 w-1 animate-bounce rounded-full [animation-delay:-0.3s]" }), _jsx("div", { className: "bg-neutral-grey-50 h-1 w-1 animate-bounce rounded-full [animation-delay:-0.15s]" }), _jsx("div", { className: "bg-neutral-grey-50 h-1 w-1 animate-bounce rounded-full" })] })), (copyableText || (finished && editOperations.length > 0)) && (_jsxs("div", { className: "mt-3 flex items-center justify-end gap-2", children: [copyableText && (_jsx(CopyButton, { textToCopy: copyableText, iconOnly: false })), finished && editOperations.length > 0 && (_jsxs(_Fragment, { children: [canUndo && !changesRejected && !confirmingUndo && (_jsxs("button", { type: "button", title: `Undo ${editOperations.length} change${editOperations.length !== 1 ? "s" : ""}`, className: "tour-ai-response-message-changes text-neutral-grey-50 hover:text-neutral-grey-50 flex cursor-pointer items-center gap-1 text-xs", onClick: (e) => {
-                                            e.stopPropagation();
-                                            setConfirmingUndo(true);
-                                        }, children: [_jsx(Undo2, { strokeWidth: 1.5, size: 12 }), " Undo"] })), canUndo && !changesRejected && confirmingUndo && (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsxs("span", { className: "text-neutral-grey-50", children: ["Undo ", editOperations.length, " change", editOperations.length !== 1 ? "s" : "", "?"] }), _jsx("button", { type: "button", className: "text-feedback-red hover:text-feedback-red cursor-pointer", onClick: async (e) => {
-                                                    e.stopPropagation();
-                                                    const operationIds = undoableOperations.map((op) => op.id);
-                                                    if (!editContext?.operations?.undoOperations) {
-                                                        setConfirmingUndo(false);
-                                                        return;
-                                                    }
-                                                    if (operationIds.length === 0) {
-                                                        setConfirmingUndo(false);
-                                                        return;
-                                                    }
-                                                    try {
-                                                        const success = await editContext.operations.undoOperations(operationIds);
-                                                        if (success) {
-                                                            setChangesRejected(true);
-                                                        }
-                                                    }
-                                                    catch (error) {
-                                                        // Undo operation failed
-                                                    }
+                        // Add the button
+                        // Calculate the actual text that will be submitted (same logic as in AgentTerminal.tsx)
+                        // For command links: prompt=command, value=command, so submitted text is link.command
+                        const submittedText = (link.command || link.label || "").trim();
+                        parts.push(_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "outline", className: "mx-1 inline-flex", onClick: () => onQuickAction?.({
+                                            label: link.label,
+                                            value: link.command,
+                                            prompt: link.command,
+                                        }, message), children: link.label }) }), submittedText && (_jsx(TooltipContent, { children: _jsx("p", { className: "max-w-xs break-words", children: submittedText }) }))] }, `btn-${itemIndex}-${linkIdx}`));
+                        // Find the end of this match in the original text
+                        const matchEnd = link.index + `[${link.label}](command:${link.command})`.length;
+                        lastIndex = matchEnd;
+                    });
+                    // Add any remaining text after the last link
+                    if (lastIndex < text.length) {
+                        const textAfter = text.substring(lastIndex);
+                        const html = simpleFormatToHtml(textAfter);
+                        if (html) {
+                            parts.push(_jsx("span", { dangerouslySetInnerHTML: { __html: html } }, `text-${itemIndex}-end`));
+                        }
+                    }
+                    return (_jsxs("div", { className: `${assistantMessageTextClassName} ${shouldAddSpacing ? "mt-2" : ""}`, children: [parts, isStreaming && isLastItem && (_jsx("span", { className: "bg-neutral-grey-50 ml-0.5 inline-block h-3 w-0.5 animate-pulse" }))] }, `item-${itemIndex}`));
+                }
+                const html = simpleFormatToHtml(trimmedText);
+                if (!html)
+                    return null;
+                return (_jsxs("div", { className: `${assistantMessageTextClassName} ${shouldAddSpacing ? "mt-2" : ""}`, children: [_jsx("span", { dangerouslySetInnerHTML: { __html: html } }), isStreaming && isLastItem && (_jsx("span", { className: "bg-neutral-grey-50 ml-0.5 inline-block h-3 w-0.5 animate-pulse" }))] }, `item-${itemIndex}`));
+            }
+            if (segment.kind === "todo") {
+                const todo = segment;
+                return (_jsxs("div", { className: `my-1 ${shouldAddSpacing ? "mt-2" : ""}`, children: [todo.title && (_jsx("div", { className: "text-neutral-grey-100 mb-1 text-xs font-medium", children: todo.title })), _jsx("div", { className: "flex flex-col gap-1", children: todo.items.map((todoItem, iIdx) => (_jsxs("label", { className: "text-neutral-grey-100 flex items-start gap-2 text-xs", children: [_jsx(Checkbox, { checked: todoItem.status === "completed", onCheckedChange: () => { }, "aria-readonly": true, className: "mt-0.5" }), _jsxs("div", { children: [_jsx("div", { className: todoItem.status === "completed" ||
+                                                    todoItem.status === "cancelled"
+                                                    ? "line-through opacity-70"
+                                                    : todoItem.status === "in_progress"
+                                                        ? "text-feedback-blue font-medium"
+                                                        : "", children: todoItem.title }), todoItem.instructions && (_jsx("div", { className: "text-neutral-grey-100 text-xs", children: todoItem.instructions }))] })] }, (todoItem.id || todoItem.title || "todo") + "-" + iIdx))) })] }, `item-${itemIndex}`));
+            }
+            if (segment.kind === "media") {
+                const media = segment;
+                return (_jsx("div", { className: `my-2 flex flex-col gap-3 ${shouldAddSpacing ? "mt-2" : ""}`, children: media.items.map((mediaItem, mIdx) => (_jsx(MediaImage, { itemId: mediaItem.itemId, label: mediaItem.label }, mediaItem.itemId || `media-${itemIndex}-${mIdx}`))) }, `item-${itemIndex}`));
+            }
+            if (segment.kind === "json") {
+                return (_jsx(JsonBlockDisplay, { data: segment.data, raw: segment.raw, defaultCollapsed: defaultCollapseJson, className: shouldAddSpacing ? "mt-2" : "" }, `item-${itemIndex}`));
+            }
+            // segment.kind === "actions"
+            const actions = segment.actions;
+            const headline = segment.headline?.trim();
+            return (_jsxs("div", { className: `border-neutral-grey-10 my-3 rounded-xl border bg-white px-3 py-2.5 ${shouldAddSpacing ? "mt-2" : ""}`, children: [headline && (_jsx("div", { className: "text-neutral-grey-100 mb-2.5 text-[13px] leading-4 font-semibold", children: headline })), _jsx("div", { className: "flex flex-wrap gap-2", children: actions.map((a, aIdx) => {
+                            const variant = a.style === "destructive"
+                                ? "destructive"
+                                : a.style === "outline"
+                                    ? "outline"
+                                    : a.style === "secondary"
+                                        ? "secondary"
+                                        : "default"; // primary
+                            const buttonClassName = variant === "outline"
+                                ? "h-7 rounded-full border-neutral-grey-10 bg-white px-3 text-xs font-medium text-neutral-grey-100 shadow-none hover:bg-neutral-grey-5"
+                                : "h-7 rounded-full border border-transparent bg-neutral-grey-10 px-3 text-xs font-medium text-neutral-grey-100 shadow-none hover:bg-neutral-grey-5";
+                            // Calculate the actual text that will be submitted (same logic as in AgentTerminal.tsx)
+                            const submittedText = (a.prompt ||
+                                a.value ||
+                                a.label ||
+                                "").trim();
+                            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { size: "xs", variant: variant, className: buttonClassName, onClick: () => onQuickAction?.({
+                                                label: a.label,
+                                                prompt: a.prompt,
+                                                value: a.value,
+                                                behavior: a.behavior,
+                                                placeholder: a.placeholder,
+                                            }, message), children: a.label }) }), submittedText && (_jsx(TooltipContent, { children: _jsx("p", { className: "max-w-xs break-words", children: submittedText }) }))] }, (a.id || a.label || "btn") + "-" + aIdx));
+                        }) })] }, `item-${itemIndex}`));
+        }
+        // item.type === "toolcalls"
+        return (_jsx("div", { className: shouldAddSpacing ? "mt-2" : "", children: _jsx(ToolCallDisplay, { toolCalls: item.toolCalls, finished: finished, openPopovers: openPopovers, setOpenPopovers: setOpenPopovers, messageId: item.messageId, agentId: agentId, allPendingApprovals: allPendingApprovals, onSwitchToAutonomous: onSwitchToAutonomous, browserCaptureInlinePrompt: browserCaptureInlinePrompt, readOnly: readOnly }) }, `item-${itemIndex}`));
+    };
+    return (_jsx("div", { className: `px-4 pb-3 ${followsUserMessage ? "pt-6" : "pt-3"}`, "data-testid": "agent-message", children: _jsxs("div", { className: "min-w-0 flex-1 select-text", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("span", { className: "text-neutral-grey-100 text-xs font-medium", children: agentName || "Agent" }), lastMessage && lastMessage.createdDate && (_jsx(TimeWithTooltip, { date: new Date(lastMessage.createdDate), className: "text-neutral-grey-50 text-xs", testId: "agent-message-timestamp", timestampAttr: lastMessage.createdDate }))] }), error && (_jsx("div", { className: "border-feedback-red bg-feedback-red-light mb-2 rounded-lg border-l-4 p-2.5", "data-testid": "agent-error", children: _jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx(X, { className: "text-feedback-red h-5 w-5", strokeWidth: 1 }) }), _jsxs("div", { className: "ml-3", children: [_jsx("p", { className: "text-feedback-red text-sm font-medium", children: "Agent Error" }), _jsx("p", { className: "text-feedback-red mt-1 text-sm", children: error })] })] }) })), displayItems.map((displayItem) => {
+                    if (displayItem.type === "activity-group") {
+                        const isLive = !finished &&
+                            displayItem.entries.some((entry) => entry.item.isLastMessage);
+                        return (_jsx(ActivityBlockGroup, { entries: displayItem.entries, isLive: isLive, renderEntry: (entry) => renderFlatItem(entry.item, entry.index) }, displayItem.key));
+                    }
+                    return renderFlatItem(displayItem.entry.item, displayItem.entry.index);
+                }), isStreaming &&
+                    !error &&
+                    !allPendingApprovals?.length &&
+                    !isAnyReasoningStreaming && (_jsxs("div", { className: "flex items-center gap-1 pt-2", "data-testid": "agent-streaming-dots", children: [_jsx("div", { className: "bg-neutral-grey-50 h-1 w-1 animate-bounce rounded-full [animation-delay:-0.3s]" }), _jsx("div", { className: "bg-neutral-grey-50 h-1 w-1 animate-bounce rounded-full [animation-delay:-0.15s]" }), _jsx("div", { className: "bg-neutral-grey-50 h-1 w-1 animate-bounce rounded-full" })] })), (copyableText || (finished && editOperations.length > 0)) && (_jsxs("div", { className: "mt-3 flex items-center justify-end gap-2", children: [copyableText && (_jsx(CopyButton, { textToCopy: copyableText, iconOnly: false, className: "text-neutral-grey-50 hover:text-neutral-grey-50 flex cursor-pointer items-center gap-1 p-0 text-xs" })), finished && editOperations.length > 0 && (_jsxs(_Fragment, { children: [canUndo && !changesRejected && !confirmingUndo && (_jsxs("button", { type: "button", title: `Undo ${editOperations.length} change${editOperations.length !== 1 ? "s" : ""}`, className: "tour-ai-response-message-changes text-neutral-grey-50 hover:text-neutral-grey-50 flex cursor-pointer items-center gap-1 text-xs", onClick: (e) => {
+                                        e.stopPropagation();
+                                        setConfirmingUndo(true);
+                                    }, children: [_jsx(Undo2, { strokeWidth: 1.5, size: 12 }), " Undo"] })), canUndo && !changesRejected && confirmingUndo && (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsxs("span", { className: "text-neutral-grey-50", children: ["Undo ", editOperations.length, " change", editOperations.length !== 1 ? "s" : "", "?"] }), _jsx("button", { type: "button", className: "text-feedback-red hover:text-feedback-red cursor-pointer", onClick: async (e) => {
+                                                e.stopPropagation();
+                                                const operationIds = undoableOperations.map((op) => op.id);
+                                                if (!editContext?.operations?.undoOperations) {
                                                     setConfirmingUndo(false);
-                                                }, children: "Yes" }), _jsx("button", { type: "button", className: "text-neutral-grey-50 hover:text-neutral-grey-50 cursor-pointer", onClick: (e) => {
-                                                    e.stopPropagation();
+                                                    return;
+                                                }
+                                                if (operationIds.length === 0) {
                                                     setConfirmingUndo(false);
-                                                }, children: "No" })] })), (changesRejected || allOperationsUndone) && (_jsxs("span", { className: "text-neutral-grey-50 inline-flex items-center gap-1 text-xs", children: [_jsx(Check, { strokeWidth: 2, size: 12 }), " Undone"] }))] }))] }))] })] }));
+                                                    return;
+                                                }
+                                                try {
+                                                    const success = await editContext.operations.undoOperations(operationIds);
+                                                    if (success) {
+                                                        setChangesRejected(true);
+                                                    }
+                                                }
+                                                catch (error) {
+                                                    // Undo operation failed
+                                                }
+                                                setConfirmingUndo(false);
+                                            }, children: "Yes" }), _jsx("button", { type: "button", className: "text-neutral-grey-50 hover:text-neutral-grey-50 cursor-pointer", onClick: (e) => {
+                                                e.stopPropagation();
+                                                setConfirmingUndo(false);
+                                            }, children: "No" })] })), (changesRejected || allOperationsUndone) && (_jsxs("span", { className: "text-neutral-grey-50 inline-flex items-center gap-1 text-xs", children: [_jsx(Check, { strokeWidth: 2, size: 12 }), " Undone"] }))] }))] }))] }) }));
 }
 //# sourceMappingURL=AiResponseMessage.js.map