@agent-native/core 0.149.1 → 0.149.2

package/dist/client/chat/tool-call-display.js

@@ -20,207 +20,12 @@ import { isBuiltinDataWidgetActionRenderer, resolveBuiltinActionChatRenderer, re
 export const ChatRunningContext = React.createContext(false);
 export const ChatRunDurationContext = React.createContext(null);
 export const ASSISTANT_VISIBLE_TOOL_CALL_LIMIT = 3;
-const TOOL_CALL_ENTRY_DURATION_MS = 220;
-const TOOL_CALL_STACK_MOTION_DURATION_MS = 220;
-const TOOL_CALL_STACK_EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
-function toolStackMotionKey(element, index) {
-    const toolCallId = element.dataset.agentToolCallId;
-    if (toolCallId)
-        return `tool:${toolCallId}`;
-    const summaryId = element.dataset.agentToolSummary;
-    if (summaryId)
-        return `summary:${summaryId}`;
-    return `anonymous:${index}`;
-}
-function prefersReducedMotionForToolStack() {
-    return (typeof window !== "undefined" &&
-        typeof window.matchMedia === "function" &&
-        window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-}
-function startToolStackAnimation(element, keyframes) {
-    if (typeof element.animate !== "function")
-        return null;
-    return element.animate(keyframes, {
-        duration: TOOL_CALL_STACK_MOTION_DURATION_MS,
-        easing: TOOL_CALL_STACK_EASING,
-        fill: "both",
-    });
-}
-function prepareToolStackExitClone(clone, snapshot) {
-    clone.classList.remove("agent-tool-call--entering", "agent-tool-call--stack-entering");
-    clone
-        .querySelectorAll(".agent-tool-call--entering, .agent-tool-call--stack-entering")
-        .forEach((element) => {
-        element.classList.remove("agent-tool-call--entering", "agent-tool-call--stack-entering");
-    });
-    clone.classList.add("agent-tool-call-stack__exit");
-    clone.setAttribute("aria-hidden", "true");
-    clone.removeAttribute("data-agent-tool-call-id");
-    clone.removeAttribute("data-agent-tool-summary");
-    clone.removeAttribute("data-agent-tool-motion-token");
-    clone.style.left = `${snapshot.left}px`;
-    clone.style.top = `${snapshot.top}px`;
-    clone.style.width = `${snapshot.width}px`;
-    clone.style.height = `${snapshot.height}px`;
-    clone.style.transform = "translate3d(0, 0, 0)";
-    clone.style.transition = "none";
-    clone.style.animation = "none";
-    clone.style.opacity = "1";
-}
 /**
- * Keeps the visible tool stack spatially continuous as streaming calls change
- * which rows belong to the collapsed history bucket. The rendered data stays
- * untouched; this only animates the DOM's before/after positions.
+ * Keeps the tool-call stack layout-transparent. Tool-entry motion is disabled
+ * until it can stay stable while streaming calls are added and summarized.
  */
 export function ToolCallStackMotion({ children, className, }) {
-    const stackRef = useRef(null);
-    const previousRef = useRef(new Map());
-    const previousStructureRef = useRef([]);
-    const activeMotionsRef = useRef(new Map());
-    const exitAnimationsRef = useRef(new Map());
-    useLayoutEffect(() => {
-        const stack = stackRef.current;
-        if (!stack)
-            return;
-        const previous = previousRef.current;
-        const visualPrevious = new Map(previous);
-        for (const [key, activeMotion] of activeMotionsRef.current) {
-            if (stack.contains(activeMotion.element)) {
-                const previousSnapshot = previous.get(key);
-                if (previousSnapshot) {
-                    const rect = activeMotion.element.getBoundingClientRect();
-                    visualPrevious.set(key, {
-                        ...previousSnapshot,
-                        top: rect.top,
-                        left: rect.left,
-                    });
-                }
-            }
-            activeMotion.animation.cancel();
-        }
-        activeMotionsRef.current.clear();
-        for (const [ghost, animation] of exitAnimationsRef.current) {
-            animation.cancel();
-            ghost.remove();
-        }
-        exitAnimationsRef.current.clear();
-        const elements = Array.from(stack.querySelectorAll("[data-agent-tool-call-id], [data-agent-tool-summary]"));
-        const structure = elements.map((element, index) => toolStackMotionKey(element, index));
-        const previousStructure = previousStructureRef.current;
-        const structureChanged = structure.length !== previousStructure.length ||
-            structure.some((key, index) => key !== previousStructure[index]);
-        previousStructureRef.current = structure;
-        const current = new Map();
-        for (const [index, element] of elements.entries()) {
-            const rect = element.getBoundingClientRect();
-            current.set(toolStackMotionKey(element, index), {
-                top: rect.top,
-                left: rect.left,
-                width: rect.width,
-                height: rect.height,
-                clone: element.cloneNode(true),
-            });
-        }
-        previousRef.current = current;
-        // Entry motion changes the measured transform without changing the stack
-        // structure. Do not turn that animation's cleanup into a second FLIP pass.
-        if (previous.size === 0 ||
-            !structureChanged ||
-            prefersReducedMotionForToolStack())
-            return;
-        const summary = elements.find((element) => element.dataset.agentToolSummary !== undefined);
-        const summaryRect = summary?.getBoundingClientRect();
-        const elementsByKey = new Map(elements.map((element, index) => [
-            toolStackMotionKey(element, index),
-            element,
-        ]));
-        for (const [key, after] of current.entries()) {
-            const before = visualPrevious.get(key);
-            if (!before) {
-                const node = elementsByKey.get(key);
-                if (!node)
-                    continue;
-                if (node.dataset.agentToolSummary !== undefined)
-                    continue;
-                if (node.dataset.agentToolCallId !== undefined &&
-                    !node.classList.contains("agent-tool-call--entering")) {
-                    node.classList.add("agent-tool-call--stack-entering");
-                    window.setTimeout(() => {
-                        node.classList.remove("agent-tool-call--stack-entering");
-                    }, TOOL_CALL_ENTRY_DURATION_MS);
-                }
-                continue;
-            }
-            const dx = before.left - after.left;
-            const dy = before.top - after.top;
-            if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
-                continue;
-            const node = elementsByKey.get(key);
-            if (!node)
-                continue;
-            if (node.dataset.agentToolSummary !== undefined)
-                continue;
-            const animation = startToolStackAnimation(node, [
-                { transform: `translate3d(${dx}px, ${dy}px, 0)` },
-                { transform: "translate3d(0, 0, 0)" },
-            ]);
-            if (!animation)
-                continue;
-            activeMotionsRef.current.set(key, { element: node, animation });
-            const clearMotion = () => {
-                if (activeMotionsRef.current.get(key)?.animation === animation) {
-                    activeMotionsRef.current.delete(key);
-                }
-            };
-            animation.onfinish = clearMotion;
-            animation.oncancel = clearMotion;
-        }
-        for (const [key, before] of visualPrevious.entries()) {
-            if (current.has(key) || !key.startsWith("tool:"))
-                continue;
-            const ghost = before.clone;
-            prepareToolStackExitClone(ghost, before);
-            document.body?.appendChild(ghost);
-            if (!ghost.isConnected)
-                continue;
-            const targetTop = summaryRect?.top ?? before.top - 8;
-            const targetLeft = summaryRect?.left ?? before.left;
-            const animation = startToolStackAnimation(ghost, [
-                { transform: "translate3d(0, 0, 0)", opacity: 1 },
-                {
-                    transform: `translate3d(${targetLeft - before.left}px, ${targetTop - before.top}px, 0)`,
-                    opacity: 0,
-                },
-            ]);
-            if (!animation) {
-                ghost.remove();
-                continue;
-            }
-            exitAnimationsRef.current.set(ghost, animation);
-            const clearExit = () => {
-                if (exitAnimationsRef.current.get(ghost) === animation) {
-                    exitAnimationsRef.current.delete(ghost);
-                }
-                ghost.remove();
-            };
-            animation.onfinish = clearExit;
-            animation.oncancel = clearExit;
-        }
-    });
-    useEffect(() => {
-        return () => {
-            for (const { animation } of activeMotionsRef.current.values()) {
-                animation.cancel();
-            }
-            activeMotionsRef.current.clear();
-            for (const [ghost, animation] of exitAnimationsRef.current) {
-                animation.cancel();
-                ghost.remove();
-            }
-            exitAnimationsRef.current.clear();
-        };
-    }, []);
-    return (_jsx("div", { ref: stackRef, className: cn("agent-tool-call-stack", className), children: children }));
+    return (_jsx("div", { className: cn("agent-tool-call-stack", className), children: children }));
 }
 export const ApprovalContext = React.createContext(null);
 /** Pending human-in-the-loop gate still waiting for Approve/Deny. */
@@ -231,18 +36,8 @@ export function toolCallHasPendingApproval(part) {
         approval.dismissed !== true);
 }
 export const TOOL_LONG_RUNNING_HINT_DELAY_MS = 45_000;
-export function ToolActivityPresentation({ toolName, isRunning, isActiveTail, toolCallId, suppressLongRunningHint = false, children, }) {
+export function ToolActivityPresentation({ toolName, isRunning, toolCallId, suppressLongRunningHint = false, children, }) {
     const [showLongRunningHint, setShowLongRunningHint] = useState(false);
-    // A batched update can first reveal a tool with its result already attached.
-    // Presentation follows the active chat tail rather than execution state so
-    // that newly revealed completed tools still get their entrance motion.
-    const [animateEntry, setAnimateEntry] = useState(isActiveTail);
-    useEffect(() => {
-        if (!animateEntry)
-            return;
-        const timeout = window.setTimeout(() => setAnimateEntry(false), TOOL_CALL_ENTRY_DURATION_MS);
-        return () => window.clearTimeout(timeout);
-    }, [animateEntry]);
     useEffect(() => {
         if (!isRunning || suppressLongRunningHint) {
             setShowLongRunningHint(false);
@@ -254,7 +49,7 @@ export function ToolActivityPresentation({ toolName, isRunning, isActiveTail, to
         }, TOOL_LONG_RUNNING_HINT_DELAY_MS);
         return () => window.clearTimeout(timeout);
     }, [isRunning, suppressLongRunningHint, toolName]);
-    return (_jsx("div", { className: cn("agent-tool-call", animateEntry && "agent-tool-call--entering"), "data-agent-tool-call-id": toolCallId, "data-running": isRunning ? "true" : undefined, children: _jsxs("div", { className: "agent-tool-call__content", children: [children, isRunning && showLongRunningHint && (_jsx("div", { className: "mt-0.5 px-2.5 pb-2 text-[11px] leading-snug text-muted-foreground/80", children: "Still working. Large updates can take a minute or two." }))] }) }));
+    return (_jsx("div", { className: "agent-tool-call", "data-agent-tool-call-id": toolCallId, "data-running": isRunning ? "true" : undefined, children: _jsxs("div", { className: "agent-tool-call__content", children: [children, isRunning && showLongRunningHint && (_jsx("div", { className: "mt-0.5 px-2.5 pb-2 text-[11px] leading-snug text-muted-foreground/80", children: "Still working. Large updates can take a minute or two." }))] }) }));
 }
 function stringifyToolValue(value, pretty = false) {
     if (typeof value === "string")
@@ -480,7 +275,7 @@ export function ToolCallDisplay({ toolName, toolCallId, argsText, args, result,
     // These must be separate components so hook order in ToolCallDisplayGeneric
     // is always stable (no conditional hook calls).
     const toolKind = structuredMeta?.toolKind;
-    const wrapToolDisplay = (children) => (_jsx(ToolActivityPresentation, { toolName: toolName, isRunning: isRunning, isActiveTail: showActiveTail, toolCallId: toolCallId, suppressLongRunningHint: toolName === "call-agent" || toolName.startsWith("agent:"), children: children }));
+    const wrapToolDisplay = (children) => (_jsx(ToolActivityPresentation, { toolName: toolName, isRunning: isRunning, toolCallId: toolCallId, suppressLongRunningHint: toolName === "call-agent" || toolName.startsWith("agent:"), children: children }));
     if (toolKind === "bash") {
         return wrapToolDisplay(_jsx(BashCell, { meta: structuredMeta, output: result, isRunning: isRunning }));
     }
@@ -642,7 +437,7 @@ function AgentCallCell({ agentName, activity, progress, responseText, isRunning,
 function AgentActivityToolCallRow({ tool, isActiveTail, }) {
     const isRunning = tool.status === "running";
     const ToolIcon = resolveToolIcon(tool.name);
-    return (_jsx(ToolActivityPresentation, { toolName: tool.name, isRunning: isRunning, isActiveTail: isActiveTail, toolCallId: tool.id, suppressLongRunningHint: true, children: _jsxs("div", { className: "my-0.5 flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground", children: [_jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: isRunning ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : (_jsx(ToolIcon, { className: "size-3.5" })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", isActiveTail && "agent-running-shimmer"), children: humanizeToolName(tool.name) })] }) }));
+    return (_jsx(ToolActivityPresentation, { toolName: tool.name, isRunning: isRunning, toolCallId: tool.id, suppressLongRunningHint: true, children: _jsxs("div", { className: "my-0.5 flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground", children: [_jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: isRunning ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : (_jsx(ToolIcon, { className: "size-3.5" })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", isActiveTail && "agent-running-shimmer"), children: humanizeToolName(tool.name) })] }) }));
 }
 // ─── ToolCallFallback ──────────────────────────────────────────────────────────
 export function ToolCallFallback({ toolName, toolCallId, args, argsText, result, ...rest }) {

package/dist/client/chat-first/apps-rail.js

@@ -15,12 +15,12 @@ function AppRows({ apps, activeAppId, layout, onDragStart, onDrop, onDragEnd, on
             const active = activeAppId === app.id;
             const pinned = layout.pinnedIds.includes(app.id);
             const index = orderedApps.indexOf(app);
-            return (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs("li", { draggable: true, "data-chat-first-app": true, "data-app-id": app.id, className: cn("group flex h-8 w-full min-w-0 items-center gap-1 rounded-md px-1 text-sm", active
+            return (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs("li", { draggable: true, "data-chat-first-app": true, "data-app-id": app.id, className: cn("group flex h-8 w-full min-w-0 items-center gap-1 rounded-md px-0 text-sm", active
                                 ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
                                 : "text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onDragStart: (event) => {
                                 event.dataTransfer.effectAllowed = "move";
                                 onDragStart(app.id);
-                            }, onDragOver: (event) => event.preventDefault(), onDrop: () => onDrop(app.id), onDragEnd: onDragEnd, children: [_jsxs("button", { type: "button", className: "flex h-full min-w-0 flex-1 items-center gap-2 px-1 text-start", onClick: () => onOpenApp(app), onKeyDown: (event) => {
+                            }, onDragOver: (event) => event.preventDefault(), onDrop: () => onDrop(app.id), onDragEnd: onDragEnd, children: [_jsxs("button", { type: "button", className: "flex h-full min-w-0 flex-1 items-center gap-2 px-2 text-start", onClick: () => onOpenApp(app), onKeyDown: (event) => {
                                         if (!event.altKey)
                                             return;
                                         if (event.key === "ArrowUp") {
@@ -99,5 +99,5 @@ export const ChatFirstAppsRail = memo(function ChatFirstAppsRail({ apps, activeA
                             ? "bg-sidebar-accent text-sidebar-accent-foreground"
                             : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onClick: () => onOpenApp(app), "aria-label": copy("openApp", { name: app.name }), title: app.name, children: renderIcon(app) }, app.id))), onOpenAllApps ? (_jsx("button", { type: "button", "data-chat-first-all-apps": true, className: "flex size-9 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", onClick: onOpenAllApps, "aria-label": copy("allApps"), title: copy("allApps"), children: _jsx(IconApps, { size: 16, "aria-hidden": "true" }) })) : null, error ? (_jsx("span", { className: "size-1.5 rounded-full bg-destructive", title: error, "aria-label": error })) : null] }));
     }
-    return (_jsxs("section", { "data-chat-first-apps-rail": true, className: "mt-3 px-2 pb-2 pt-2", "aria-label": copy("workspaceApps"), children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 px-1 text-[11px] font-medium text-sidebar-foreground/50", children: [_jsx("span", { children: copy("workspaceApps") }), _jsx("span", { className: "ml-auto", children: createTrigger })] }), loading && apps.length === 0 ? (_jsx("div", { className: "space-y-0.5 px-1", children: [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "h-8 w-full rounded-md" }, index))) })) : apps.length === 0 ? (_jsxs("div", { className: "px-1", children: [_jsx("p", { className: "text-xs text-sidebar-foreground/55", children: copy("noWorkspaceApps") }), createAppTrigger ? (createTrigger) : onCreateApp ? (_jsxs("button", { type: "button", className: "mt-1 inline-flex h-6 items-center gap-1.5 rounded-md border border-sidebar-border px-2 text-xs text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onCreateApp, children: [_jsx(IconPlus, { size: 13, "aria-hidden": "true" }), copy("createApp")] })) : (createTrigger)] })) : (_jsx(AppRows, { apps: visibleApps, activeAppId: activeAppId, layout: layout, onDragStart: setDraggedAppId, onDrop: reorderApps, onDragEnd: () => setDraggedAppId(null), onOpenApp: onOpenApp, onTogglePinned: togglePinned, onMove: moveApp, renderIcon: renderIcon, copy: copy })), hasMoreApps || showAllApps ? (_jsxs("button", { type: "button", className: "mt-0.5 flex h-8 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: () => setShowAllApps((value) => !value), children: [showAllApps ? (_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" })) : (_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" })), showAllApps ? copy("showLess") : copy("showMore")] })) : null, onOpenAllApps ? (_jsx("div", { className: "mt-1 border-t border-sidebar-border/60 pt-1", children: _jsxs("button", { type: "button", "data-chat-first-all-apps": true, className: "flex h-8 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/55 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onOpenAllApps, children: [_jsx(IconApps, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: copy("allApps") })] }) })) : null, error ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "mt-1 flex items-center gap-1 px-1 text-[10px] text-destructive/80", onClick: onRetry, "aria-label": error, children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), onRetry ? copy("retry") : copy("appsLoadError")] }) }), _jsx(TooltipContent, { side: "right", children: error })] })) : null] }));
+    return (_jsxs("section", { "data-chat-first-apps-rail": true, className: "mt-3 px-0 pb-2 pt-2", "aria-label": copy("workspaceApps"), children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 px-2 text-[11px] font-medium text-sidebar-foreground/50", children: [_jsx("span", { children: copy("workspaceApps") }), _jsx("span", { className: "ml-auto", children: createTrigger })] }), loading && apps.length === 0 ? (_jsx("div", { className: "space-y-0.5 px-2", children: [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "h-8 w-full rounded-md" }, index))) })) : apps.length === 0 ? (_jsxs("div", { className: "px-2", children: [_jsx("p", { className: "text-xs text-sidebar-foreground/55", children: copy("noWorkspaceApps") }), createAppTrigger ? (createTrigger) : onCreateApp ? (_jsxs("button", { type: "button", className: "mt-1 inline-flex h-6 items-center gap-1.5 rounded-md border border-sidebar-border px-2 text-xs text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onCreateApp, children: [_jsx(IconPlus, { size: 13, "aria-hidden": "true" }), copy("createApp")] })) : (createTrigger)] })) : (_jsx(AppRows, { apps: visibleApps, activeAppId: activeAppId, layout: layout, onDragStart: setDraggedAppId, onDrop: reorderApps, onDragEnd: () => setDraggedAppId(null), onOpenApp: onOpenApp, onTogglePinned: togglePinned, onMove: moveApp, renderIcon: renderIcon, copy: copy })), hasMoreApps || showAllApps ? (_jsxs("button", { type: "button", className: "mt-0.5 flex h-8 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: () => setShowAllApps((value) => !value), children: [showAllApps ? (_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" })) : (_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" })), showAllApps ? copy("showLess") : copy("showMore")] })) : null, onOpenAllApps ? (_jsx("div", { className: "mt-1 border-t border-sidebar-border/60 pt-1", children: _jsxs("button", { type: "button", "data-chat-first-all-apps": true, className: "flex h-8 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/55 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onOpenAllApps, children: [_jsx(IconApps, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: copy("allApps") })] }) })) : null, error ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "mt-1 flex items-center gap-1 px-2 text-[10px] text-destructive/80", onClick: onRetry, "aria-label": error, children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), onRetry ? copy("retry") : copy("appsLoadError")] }) }), _jsx(TooltipContent, { side: "right", children: error })] })) : null] }));
 });

package/dist/client/chat-first/browser-pane.js

@@ -17,6 +17,9 @@ export function ChatFirstBrowserPane({ url, title, status, statusMessage, onClos
         setHistoryIndex(0);
         setNavigationError(null);
     }, [url]);
+    const currentTarget = resolveChatFirstBrowserTarget({ url: currentUrl });
+    const isExternalOnly = currentTarget.status === "ready" &&
+        currentTarget.target.openExternally === true;
     function navigate(event) {
         event.preventDefault();
         const target = resolveChatFirstBrowserTarget({ url: draftUrl });
@@ -56,7 +59,7 @@ export function ChatFirstBrowserPane({ url, title, status, statusMessage, onClos
     }
     return (_jsxs("section", { "data-chat-first-browser-pane": true, className: "flex h-full min-h-0 w-full flex-col overflow-hidden bg-background", "aria-label": copy("surface.browser.label"), children: [_jsxs("header", { className: "flex h-12 shrink-0 items-center gap-1.5 border-b border-border bg-card px-2", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [_jsx("button", { type: "button", disabled: historyIndex <= 0, onClick: goBack, "aria-label": copy("browserBack"), title: copy("browserBack"), className: "flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-35", children: _jsx(IconArrowLeft, { size: 15 }) }), _jsx("button", { type: "button", disabled: historyIndex >= history.length - 1, onClick: goForward, "aria-label": copy("browserForward"), title: copy("browserForward"), className: "flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-35", children: _jsx(IconArrowRight, { size: 15 }) }), _jsx("button", { type: "button", onClick: () => setReloadKey((key) => key + 1), "aria-label": copy("browserReload"), title: copy("browserReload"), className: "flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(IconRefresh, { size: 15 }) })] }), _jsxs("form", { className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-md border border-input bg-background px-2", onSubmit: navigate, children: [_jsx(IconWorld, { size: 13, className: "shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("input", { value: draftUrl, onChange: (event) => setDraftUrl(event.target.value), "aria-label": copy("browserAddress"), spellCheck: false, className: "h-7 min-w-0 flex-1 bg-transparent text-xs text-foreground outline-none placeholder:text-muted-foreground" })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [title ? (_jsx("span", { className: "hidden max-w-28 truncate px-1 text-xs text-muted-foreground xl:block", title: title, children: title })) : null, _jsx("button", { type: "button", onClick: () => window.open(currentUrl, "_blank", "noopener,noreferrer"), "aria-label": copy("browserOpenExternal"), title: copy("browserOpenExternal"), className: "flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(IconExternalLink, { size: 15 }) }), _jsx("button", { type: "button", onClick: onClose, "aria-label": copy("browserClose"), title: copy("browserClose"), className: "flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(IconX, { size: 15 }) })] })] }), navigationError ? (_jsx("p", { className: "border-b border-destructive/30 bg-destructive/10 px-3 py-1.5 text-xs text-destructive", role: "alert", children: navigationError })) : null, _jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: status === "starting" || status === "error" ? (_jsx("div", { className: "flex h-full items-center justify-center px-6 text-center", role: status === "error" ? "alert" : "status", "aria-live": "polite", children: _jsxs("div", { className: "max-w-xs space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: status === "starting"
                                     ? copy("browserPreviewStarting")
-                                    : copy("browserPreviewError") }), statusMessage ? (_jsx("p", { className: "text-xs text-muted-foreground", children: statusMessage })) : null] }) })) : (renderEmbed({
+                                    : copy("browserPreviewError") }), statusMessage ? (_jsx("p", { className: "text-xs text-muted-foreground", children: statusMessage })) : null] }) })) : isExternalOnly ? (_jsx("div", { className: "flex h-full items-center justify-center p-6 text-center", children: _jsxs("div", { className: "max-w-sm space-y-3", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: copy("browserPreviewError") }), _jsxs("a", { href: currentUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [_jsx(IconExternalLink, { size: 14, "aria-hidden": "true" }), copy("browserOpenExternal")] })] }) })) : (renderEmbed({
                     url: currentUrl,
                     title: title || copy("browserPage"),
                     key: `${currentUrl}:${reloadKey}`,

package/dist/client/chat-first/chat-history.d.ts

@@ -3,10 +3,12 @@ import { type ChatHistoryItem, type ChatHistoryListProps } from "../chat/ChatHis
 export interface ChatFirstChatHistoryProps extends Omit<ChatHistoryListProps, "items" | "sections" | "variant"> {
     items: ChatHistoryItem[];
     label?: ReactNode;
+    /** Optional contextual actions for the Chats section header. */
+    headerAction?: ReactNode;
 }
 /**
  * The single chat-list presentation used by the chat-first rail on every
  * host. Hosts still own thread fetching and actions, but row rhythm and the
  * Chats section treatment stay identical.
  */
-export declare function ChatFirstChatHistory({ items, label, className, ...props }: ChatFirstChatHistoryProps): import("react").JSX.Element | null;
+export declare function ChatFirstChatHistory({ items, label, headerAction, className, ...props }: ChatFirstChatHistoryProps): import("react").JSX.Element | null;

package/dist/client/chat-first/chat-history.js

@@ -5,8 +5,8 @@ import { ChatHistoryList, } from "../chat/ChatHistoryList.js";
  * host. Hosts still own thread fetching and actions, but row rhythm and the
  * Chats section treatment stay identical.
  */
-export function ChatFirstChatHistory({ items, label = "Chats", className, ...props }) {
+export function ChatFirstChatHistory({ items, label = "Chats", headerAction, className, ...props }) {
     if (items.length === 0)
         return null;
-    return (_jsxs("section", { "data-chat-first-chat-history": true, className: ["min-h-0 min-w-0", className].filter(Boolean).join(" "), children: [_jsx("p", { className: "mb-1 px-2 text-[11px] font-medium text-sidebar-foreground/50", children: label }), _jsx(ChatHistoryList, { ...props, items: items, variant: "rail", className: "min-w-0" })] }));
+    return (_jsxs("section", { "data-chat-first-chat-history": true, className: ["min-h-0 min-w-0", className].filter(Boolean).join(" "), children: [_jsxs("div", { "data-chat-first-chat-history-header": true, className: "group mb-1 flex min-h-6 items-center justify-between gap-2 px-2", children: [_jsx("p", { className: "min-w-0 text-[11px] font-medium text-sidebar-foreground/50", children: label }), headerAction ? (_jsx("div", { className: "shrink-0 opacity-0 transition-opacity duration-100 group-hover:opacity-100 group-focus-within:opacity-100", children: headerAction })) : null] }), _jsx(ChatHistoryList, { ...props, items: items, variant: "rail", className: "min-w-0" })] }));
 }

package/dist/client/chat-first/surface-tabs.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { type ChatFirstSurfaceTab } from "../chat-first.js";
 import type { ChatFirstSurfaceTabsProps } from "./types.js";
-export declare function ChatFirstSurfaceTabs({ tabs, activeTabId, onActivate, onClose, onCloseOthers, onCloseToRight, onCloseAll, onOpenSurface, copy, }: ChatFirstSurfaceTabsProps): import("react").JSX.Element;
+export declare function ChatFirstSurfaceTabs({ tabs, activeTabId, onActivate, onClose, onCloseOthers, onCloseToRight, onCloseAll, onOpenSurface, apps, onOpenApp, renderAppIcon, copy, }: ChatFirstSurfaceTabsProps): import("react").JSX.Element;
 export declare function ChatFirstSurfaceContent({ tabs, activeTabId, renderTab, }: {
     tabs: readonly ChatFirstSurfaceTab[];
     activeTabId: string | null;

package/dist/client/chat-first/surface-tabs.js

@@ -17,54 +17,65 @@ function SurfaceIcon({ kind }) {
     const Icon = ICONS[kind];
     return _jsx(Icon, { size: 14, "aria-hidden": "true" });
 }
-export function ChatFirstSurfaceTabs({ tabs, activeTabId, onActivate, onClose, onCloseOthers, onCloseToRight, onCloseAll, onOpenSurface, copy = defaultChatFirstCopy, }) {
-    return (_jsx(TooltipProvider, { delayDuration: 400, children: _jsx("div", { "data-chat-first-surface-tabs": true, className: "shrink-0 border-b border-border bg-card", children: tabs.length > 0 ? (_jsx("div", { className: "flex min-w-0 items-center gap-1 overflow-x-auto px-2 py-1.5", role: "tablist", "aria-label": copy("openSideSurfaces"), children: tabs.map((tab, index) => (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs("div", { role: "tab", tabIndex: activeTabId === tab.id ? 0 : -1, "aria-selected": activeTabId === tab.id, "data-surface-tab-id": tab.id, "data-active": activeTabId === tab.id ? "true" : "false", className: cn("group flex h-8 min-w-0 max-w-48 shrink-0 items-center rounded-md text-xs transition-colors", activeTabId === tab.id
+export function ChatFirstSurfaceTabs({ tabs, activeTabId, onActivate, onClose, onCloseOthers, onCloseToRight, onCloseAll, onOpenSurface, apps = [], onOpenApp, renderAppIcon, copy = defaultChatFirstCopy, }) {
+    return (_jsx(TooltipProvider, { delayDuration: 400, children: _jsx("div", { "data-chat-first-surface-tabs": true, className: cn("min-w-0 border-b border-border bg-card", tabs.length > 0
+                ? "shrink-0"
+                : "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"), children: tabs.length > 0 ? (_jsx("div", { className: "flex min-w-0 items-center gap-1 overflow-x-auto px-2 py-1.5", role: "tablist", "aria-label": copy("openSideSurfaces"), children: tabs.map((tab, index) => (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs("div", { "data-surface-tab-id": tab.id, "data-active": activeTabId === tab.id ? "true" : "false", className: cn("group flex h-8 min-w-0 max-w-48 shrink-0 items-center rounded-md text-xs transition-colors", activeTabId === tab.id
                                     ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), onKeyDown: (event) => {
-                                    const nextIndex = event.key === "ArrowRight"
-                                        ? (index + 1) % tabs.length
-                                        : event.key === "ArrowLeft"
-                                            ? (index - 1 + tabs.length) % tabs.length
-                                            : event.key === "Home"
-                                                ? 0
-                                                : event.key === "End"
-                                                    ? tabs.length - 1
-                                                    : -1;
-                                    if (nextIndex < 0)
-                                        return;
-                                    event.preventDefault();
-                                    onActivate(tabs[nextIndex]);
-                                    requestAnimationFrame(() => {
-                                        document
-                                            .querySelector(`[data-chat-first-surface-tab-id="${CSS.escape(tabs[nextIndex].id)}"]`)
-                                            ?.focus();
-                                    });
-                                }, "data-chat-first-surface-tab-id": tab.id, onMouseDown: (event) => {
+                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), onMouseDown: (event) => {
                                     if (event.button === 1) {
                                         event.preventDefault();
                                         onClose(tab);
                                     }
-                                }, title: tab.title, children: [_jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-1.5 truncate px-2 text-start", onClick: () => onActivate(tab), tabIndex: -1, children: [_jsx(SurfaceIcon, { kind: tab.kind }), _jsx("span", { className: "truncate", children: tab.title })] }), _jsx("button", { type: "button", className: "mr-1 flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground/65 opacity-0 transition-opacity hover:bg-background/70 hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100", "aria-label": copy("closeTab", { name: tab.title }), title: copy("closeTab", { name: tab.title }), onClick: (event) => {
+                                }, title: tab.title, children: [_jsxs("button", { type: "button", role: "tab", tabIndex: activeTabId === tab.id ? 0 : -1, "aria-selected": activeTabId === tab.id, "data-chat-first-surface-tab-id": tab.id, className: "flex min-w-0 flex-1 items-center gap-1.5 truncate rounded-md px-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onKeyDown: (event) => {
+                                            if (event.key === "Enter" || event.key === " ") {
+                                                event.preventDefault();
+                                                onActivate(tab);
+                                                return;
+                                            }
+                                            const nextIndex = event.key === "ArrowRight"
+                                                ? (index + 1) % tabs.length
+                                                : event.key === "ArrowLeft"
+                                                    ? (index - 1 + tabs.length) % tabs.length
+                                                    : event.key === "Home"
+                                                        ? 0
+                                                        : event.key === "End"
+                                                            ? tabs.length - 1
+                                                            : -1;
+                                            if (nextIndex < 0)
+                                                return;
+                                            event.preventDefault();
+                                            onActivate(tabs[nextIndex]);
+                                            requestAnimationFrame(() => {
+                                                document
+                                                    .querySelector(`[data-chat-first-surface-tab-id="${CSS.escape(tabs[nextIndex].id)}"]`)
+                                                    ?.focus();
+                                            });
+                                        }, onClick: () => onActivate(tab), children: [_jsx(SurfaceIcon, { kind: tab.kind }), _jsx("span", { className: "truncate", children: tab.title })] }), _jsx("button", { type: "button", className: "mr-1 flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground/65 opacity-0 transition-opacity hover:bg-background/70 hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100", "aria-label": copy("closeTab", { name: tab.title }), title: copy("closeTab", { name: tab.title }), onClick: (event) => {
                                             event.stopPropagation();
                                             onClose(tab);
-                                        }, children: _jsx(IconX, { size: 12, "aria-hidden": "true" }) })] }) }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuItem, { onSelect: () => onClose(tab), children: copy("close") }), _jsx(ContextMenuItem, { disabled: tabs.length < 2, onSelect: () => onCloseOthers(tab), children: copy("closeOthers") }), _jsx(ContextMenuItem, { disabled: tabs[tabs.length - 1]?.id === tab.id, onSelect: () => onCloseToRight(tab), children: copy("closeToRight") }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { onSelect: onCloseAll, children: copy("closeAll") })] })] }, tab.id))) })) : (_jsx("div", { className: "flex flex-col px-2 py-1", "data-surface-empty-state": true, "aria-label": copy("openSideSurfaces"), children: CHAT_FIRST_SURFACE_CATALOG.map((surface) => {
-                    const label = copy(`surface.${surface.kind}.label`);
-                    const reason = surface.availability === "deferred"
-                        ? copy(`surface.${surface.kind}.reason`)
-                        : copy(`surface.${surface.kind}.reason`);
-                    const isDeferred = surface.availability === "deferred";
-                    const row = (_jsxs("div", { className: cn("flex h-7 min-w-0 items-center gap-2 rounded px-2 text-xs transition-colors", surface.kind === "agents" && onOpenSurface
-                            ? "text-foreground hover:bg-accent"
-                            : isDeferred
-                                ? "text-muted-foreground/60"
-                                : "text-muted-foreground hover:bg-accent hover:text-foreground"), title: !isDeferred ? reason : undefined, "aria-label": `${label}: ${reason}`, children: [_jsx(SurfaceIcon, { kind: surface.kind }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), isDeferred ? (_jsx("span", { "data-surface-availability": "deferred", className: "size-1.5 shrink-0 rounded-full bg-muted-foreground/45", "aria-label": copy("deferred") })) : null] }));
-                    if (surface.kind === "agents" && onOpenSurface) {
-                        return (_jsx("button", { type: "button", className: "text-start", title: copy("openActivity"), "aria-label": copy("openActivity"), onClick: () => onOpenSurface(surface.kind), children: row }, surface.kind));
-                    }
-                    if (!isDeferred)
-                        return _jsx("div", { children: row }, surface.kind);
-                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "text-start", children: row }) }), _jsx(TooltipContent, { side: "left", className: "max-w-72", children: reason })] }, surface.kind));
-                }) })) }) }));
+                                        }, children: _jsx(IconX, { size: 12, "aria-hidden": "true" }) })] }) }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuItem, { onSelect: () => onClose(tab), children: copy("close") }), _jsx(ContextMenuItem, { disabled: tabs.length < 2, onSelect: () => onCloseOthers(tab), children: copy("closeOthers") }), _jsx(ContextMenuItem, { disabled: tabs[tabs.length - 1]?.id === tab.id, onSelect: () => onCloseToRight(tab), children: copy("closeToRight") }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { onSelect: onCloseAll, children: copy("closeAll") })] })] }, tab.id))) })) : (_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-2 py-1", "data-surface-empty-state": true, "aria-label": copy("openSideSurfaces"), children: [CHAT_FIRST_SURFACE_CATALOG.map((surface) => {
+                        const label = copy(`surface.${surface.kind}.label`);
+                        const reason = surface.availability === "deferred"
+                            ? copy(`surface.${surface.kind}.reason`)
+                            : copy(`surface.${surface.kind}.reason`);
+                        const isDeferred = surface.availability === "deferred";
+                        const canOpenSurface = onOpenSurface &&
+                            (surface.kind === "browser" ||
+                                surface.kind === "side-chat" ||
+                                surface.kind === "agents");
+                        const row = (_jsxs("div", { className: cn("flex h-7 min-w-0 items-center gap-2 rounded px-2 text-xs transition-colors", canOpenSurface
+                                ? "text-foreground hover:bg-accent"
+                                : isDeferred
+                                    ? "text-muted-foreground/60"
+                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), title: !isDeferred ? reason : undefined, "aria-label": `${label}: ${reason}`, children: [_jsx(SurfaceIcon, { kind: surface.kind }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), isDeferred ? (_jsx("span", { "data-surface-availability": "deferred", className: "size-1.5 shrink-0 rounded-full bg-muted-foreground/45", "aria-label": copy("deferred") })) : null] }));
+                        if (canOpenSurface) {
+                            return (_jsx("button", { type: "button", className: "block w-full text-start", title: surface.kind === "browser" ? reason : copy("openActivity"), "aria-label": surface.kind === "browser" ? label : copy("openActivity"), onClick: () => onOpenSurface(surface.kind === "side-chat" ? "agents" : surface.kind), children: row }, surface.kind));
+                        }
+                        if (!isDeferred)
+                            return _jsx("div", { children: row }, surface.kind);
+                        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "text-start", children: row }) }), _jsx(TooltipContent, { side: "left", className: "max-w-72", children: reason })] }, surface.kind));
+                    }), apps.length > 0 && onOpenApp ? (_jsxs("div", { className: "mt-1 border-t border-border pt-1", children: [_jsx("p", { className: "px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: copy("workspaceApps") }), _jsx("div", { className: "space-y-0.5", children: apps.map((app) => (_jsxs("button", { type: "button", "data-chat-first-surface-app": app.id, className: "flex h-8 w-full min-w-0 items-center gap-2 rounded px-2 text-start text-xs text-foreground transition-colors hover:bg-accent", title: copy("openApp", { name: app.name }), "aria-label": copy("openApp", { name: app.name }), onClick: () => onOpenApp(app), children: [renderAppIcon?.(app) ?? _jsx(SurfaceIcon, { kind: "app" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: app.name })] }, app.id))) })] })) : null] })) }) }));
 }
 export function ChatFirstSurfaceContent({ tabs, activeTabId, renderTab, }) {
     return (_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: tabs.map((tab) => {

package/dist/client/chat-first/types.d.ts

@@ -31,6 +31,9 @@ export interface ChatFirstSurfaceTabsProps {
     onCloseToRight: (tab: ChatFirstSurfaceTab) => void;
     onCloseAll: () => void;
     onOpenSurface?: (kind: ChatFirstSurfaceKind) => void;
+    apps?: readonly ChatFirstAppItem[];
+    onOpenApp?: (app: ChatFirstAppItem) => void;
+    renderAppIcon?: (app: ChatFirstAppItem) => ReactNode;
     copy?: ChatFirstCopy;
 }
 export interface ChatFirstAppRailProps {

package/dist/client/chat-first.d.ts

@@ -36,11 +36,14 @@ export interface ChatFirstSessionWatchStore {
     close: () => void;
 }
 export type ChatFirstSurfaceKind = "app" | "browser" | "terminal" | "diff" | "files" | "side-chat" | "agents";
+export type ChatFirstAppSurfacePlacement = "main" | "side";
 export interface ChatFirstSurfaceTab {
     id: string;
     kind: ChatFirstSurfaceKind;
     title: string;
     appId?: string;
+    /** App tabs can either replace the main chat or sit beside it. */
+    placement?: ChatFirstAppSurfacePlacement;
     path?: string;
     view?: string;
     url?: string;
@@ -128,6 +131,7 @@ export type ChatFirstBrowserResolution = {
     target: {
         url: string;
         title?: string;
+        openExternally?: boolean;
     };
 } | {
     status: "unresolved";
@@ -202,6 +206,12 @@ export declare function subscribeChatFirstOpenApp(listener: ChatFirstOpenAppList
 export declare function emitChatFirstOpenApp(detail: ChatFirstOpenAppDetail): ChatFirstOpenAppDelivery;
 export declare function subscribeChatFirstOpenBrowser(listener: ChatFirstOpenBrowserListener): () => void;
 export declare function emitChatFirstOpenBrowser(detail: ChatFirstOpenBrowserDetail): ChatFirstOpenAppDelivery;
+/**
+ * Builder's web app sends frame-blocking headers. Its branch/editor URLs are
+ * open-browser targets, not the iframe-backed Fusion preview URLs served from
+ * builder.cloud, so keep them out of the chat-first browser iframe.
+ */
+export declare function shouldOpenChatFirstBrowserExternally(value: string): boolean;
 export declare function resolveChatFirstAppTarget(detail: ChatFirstOpenAppDetail, apps: readonly ChatFirstAppRegistration[], options?: {
     currentOrigin?: string;
 }): ChatFirstAppResolution;

package/dist/client/chat-first.js

@@ -338,6 +338,9 @@ export function resolveChatFirstBrowserTarget(detail) {
         target: {
             url: url.href,
             ...(detail.title?.trim() ? { title: detail.title.trim() } : {}),
+            ...(shouldOpenChatFirstBrowserExternally(url.href)
+                ? { openExternally: true }
+                : {}),
         },
     };
 }
@@ -464,9 +467,16 @@ function readChatFirstSurfaceTabsState(scope) {
             return { tabs: [], activeTabId: null };
         }
         const value = scoped;
+        let migratedLegacyPlacement = false;
         const tabs = Array.isArray(value.tabs)
             ? value.tabs.flatMap((candidate) => {
                 const tab = normalizePersistedChatFirstSurfaceTab(candidate);
+                if (tab?.kind === "app" &&
+                    candidate !== null &&
+                    typeof candidate === "object" &&
+                    !("placement" in candidate)) {
+                    migratedLegacyPlacement = true;
+                }
                 return tab ? [tab] : [];
             })
             : [];
@@ -474,7 +484,10 @@ function readChatFirstSurfaceTabsState(scope) {
             tabs.some((tab) => tab.id === value.activeTabId)
             ? value.activeTabId
             : (tabs[0]?.id ?? null);
-        return { tabs, activeTabId };
+        const state = { tabs, activeTabId };
+        if (migratedLegacyPlacement)
+            writeChatFirstSurfaceTabsState(scope, state);
+        return state;
     }
     catch {
         return { tabs: [], activeTabId: null };
@@ -498,11 +511,23 @@ function normalizePersistedChatFirstSurfaceTab(candidate) {
         const appId = typeof value.appId === "string" ? value.appId.trim() : "";
         if (!appId)
             return null;
+        const placement = value.placement;
+        if (placement !== undefined &&
+            placement !== "main" &&
+            placement !== "side") {
+            return null;
+        }
         if (value.path !== undefined &&
             (typeof value.path !== "string" || normalizedPath(value.path) === null)) {
             return null;
         }
-        return { ...tab, id, title, appId };
+        return {
+            ...tab,
+            id,
+            title,
+            appId,
+            placement: placement ?? "main",
+        };
     }
     if (kind === "browser") {
         const url = typeof value.url === "string" ? value.url.trim() : "";
@@ -700,6 +725,16 @@ function parseAbsoluteHttpUrl(value) {
         return null;
     }
 }
+/**
+ * Builder's web app sends frame-blocking headers. Its branch/editor URLs are
+ * open-browser targets, not the iframe-backed Fusion preview URLs served from
+ * builder.cloud, so keep them out of the chat-first browser iframe.
+ */
+export function shouldOpenChatFirstBrowserExternally(value) {
+    const url = parseAbsoluteHttpUrl(value);
+    return Boolean(url &&
+        (url.hostname === "builder.io" || url.hostname.endsWith(".builder.io")));
+}
 function registrationUrls(app, currentOrigin) {
     const values = [app.url, app.devUrl];
     if (app.path && currentOrigin)

package/dist/client/components/ui/message-scroller.js

@@ -10,7 +10,10 @@ function MessageScroller({ className, ...props }) {
 }
 function MessageScrollerViewport({ className, children, ...props }) {
     const { start: hasContentAbove } = useMessageScrollerScrollable();
-    return (_jsx(ShadcnMessageScroller.Viewport, { className: cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden", hasContentAbove && "message-scroller-viewport--top-fade", className), ...props, children: children }));
+    return (_jsx(ShadcnMessageScroller.Viewport, { className: cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden", 
+        // The base class carries the mask itself so it is never added or
+        // removed; the modifier only widens the fade. See agent-native.css.
+        "message-scroller-viewport", hasContentAbove && "message-scroller-viewport--top-fade", className), ...props, children: children }));
 }
 function MessageScrollerContent({ className, spacerClassName, ...props }) {
     return (_jsx(ShadcnMessageScroller.Content, { className: cn("flex flex-col", className), spacerClassName: cn("shrink-0", spacerClassName), ...props }));