@agent-native/dispatch 0.22.1 → 0.23.1

package/dist/components/layout/Layout.js

@@ -269,6 +269,9 @@ function persistedChatFirstPane(value) {
         return null;
     return {
         appId: record.appId,
+        ...(record.placement === "main" || record.placement === "side"
+            ? { placement: record.placement }
+            : {}),
         ...(typeof record.path === "string" ? { path: record.path } : {}),
         ...(typeof record.view === "string" ? { view: record.view } : {}),
     };
@@ -417,7 +420,7 @@ function DispatchChatsSection({ onNavigate, showNewChat = false, prelude, chatFi
         if (threadId)
             openThread(threadId, { isNew: true });
     }
-    return (_jsxs("div", { className: cn("ms-4 min-w-0 space-y-0.5", showNewChat && "dispatch-chat-first-chats"), children: [showNewChat && chatFirstNavigation ? (_jsx("nav", { className: "space-y-0.5 px-2 py-2", children: _jsx(ChatFirstPrimaryNavigation, { copy: chatFirstCopy, onNewChat: () => void handleNewChat(), onOpenIntegrations: chatFirstNavigation.onOpenIntegrations, onOpenScheduled: chatFirstNavigation.onOpenScheduled, onSearch: openCommandMenu }) })) : null, prelude, !chatFirstMode ? (_jsx("div", { className: "flex justify-end px-2 pt-0.5", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-dispatch-chat-source-toggle": true, "aria-pressed": includeExternal, "aria-label": includeExternal
+    return (_jsxs("div", { className: cn("min-w-0 space-y-0.5", showNewChat && "dispatch-chat-first-chats"), children: [showNewChat && chatFirstNavigation ? (_jsx("nav", { className: "space-y-0.5 px-0 py-2", children: _jsx(ChatFirstPrimaryNavigation, { copy: chatFirstCopy, onNewChat: () => void handleNewChat(), onOpenIntegrations: chatFirstNavigation.onOpenIntegrations, onOpenScheduled: chatFirstNavigation.onOpenScheduled, onSearch: openCommandMenu }) })) : null, prelude, !chatFirstMode ? (_jsx("div", { className: "flex justify-end px-2 pt-0.5", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-dispatch-chat-source-toggle": true, "aria-pressed": includeExternal, "aria-label": includeExternal
                                     ? t("dispatch.sidebar.showLocalChats", {
                                         defaultValue: "Show local chats",
                                     })
@@ -432,7 +435,7 @@ function DispatchChatsSection({ onNavigate, showNewChat = false, prelude, chatFi
                                 }) })] }) })) : null, !chatFirstMode &&
                 chatsLoading &&
                 visibleThreads.length === 0 &&
-                Array.from({ length: 3 }).map((_, index) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1", children: [_jsx(Skeleton, { className: "size-3.5 shrink-0 rounded-sm" }), _jsx(Skeleton, { className: "h-3 w-3/4 rounded" })] }, `chat-skeleton-${index}`))), chatFirstMode ? (_jsx(ChatFirstChatHistory, { items: chatItems, activeId: displayedActiveThreadId, loading: chatsLoading && visibleThreads.length === 0, loadingLabel: _jsx("div", { className: "space-y-1 px-2 py-1", children: [0, 1, 2].map((index) => (_jsxs("div", { className: "flex items-center gap-2 px-1 py-1", children: [_jsx(Skeleton, { className: "size-3.5 shrink-0 rounded-sm" }), _jsx(Skeleton, { className: "h-3 w-3/4 rounded" })] }, index))) }), label: t("dispatch.sidebar.chats", { defaultValue: "Chats" }), onSelect: (threadId) => openThread(threadId), renameMaxLength: 160, onRename: (threadId, title) => void renameThread(threadId, title), labels: {
+                Array.from({ length: 3 }).map((_, index) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1", children: [_jsx(Skeleton, { className: "size-3.5 shrink-0 rounded-sm" }), _jsx(Skeleton, { className: "h-3 w-3/4 rounded" })] }, `chat-skeleton-${index}`))), chatFirstMode && (chatsLoading || visibleThreads.length > 0) ? (_jsx(ChatFirstChatHistory, { items: chatItems, activeId: displayedActiveThreadId, loading: chatsLoading && visibleThreads.length === 0, loadingLabel: _jsx("div", { className: "space-y-1 px-2 py-1", children: [0, 1, 2].map((index) => (_jsxs("div", { className: "flex items-center gap-2 px-1 py-1", children: [_jsx(Skeleton, { className: "size-3.5 shrink-0 rounded-sm" }), _jsx(Skeleton, { className: "h-3 w-3/4 rounded" })] }, index))) }), label: t("dispatch.sidebar.chats", { defaultValue: "Chats" }), onSelect: (threadId) => openThread(threadId), renameMaxLength: 160, onRename: (threadId, title) => void renameThread(threadId, title), labels: {
                     options: (item) => t("dispatch.sidebar.chatOptions", {
                         title: item.titleText ?? "",
                     }),
@@ -515,7 +518,7 @@ export function NavContent({ onNavigate, extensions, chatFirstMode = false, chat
         }, onOpenAllApps: () => {
             navigate(dispatchNavLinkTarget("/apps"));
             onNavigate?.();
-        }, createAppTrigger: chatFirstCreateAppTrigger, renderIcon: (app) => (_jsx(AppIcon, { id: app.id, name: app.name, size: "sm", className: "size-5 rounded-md" })), copy: chatFirstCopy }));
+        }, createAppTrigger: chatFirstCreateAppTrigger, renderIcon: (app) => (_jsx(AppIcon, { id: app.id, name: app.name, size: "sm", className: "size-7 rounded-lg" })), copy: chatFirstCopy }));
     const renderNavItem = (item) => {
         const Icon = item.icon;
         const itemMatchesLocalPath = navItemMatchesPath(item, localPathname);
@@ -564,7 +567,7 @@ export function NavContent({ onNavigate, extensions, chatFirstMode = false, chat
                             navigate(dispatchNavLinkTarget("/admin/automations"));
                             onNavigate?.();
                         },
-                    }, prelude: chatFirstAppsRail })) : (chatFirstAppsRail) })) : null, _jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", chatFirstMode && "hidden"), children: [_jsx("nav", { className: cn("py-2", collapsed ? "px-1.5" : "px-2"), children: _jsx("ul", { className: cn(collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5"), children: primaryNavItems.map(renderNavItem) }) }), _jsxs("div", { className: "mt-auto shrink-0", children: [bottomNavigation, organizationPicker] }), sidebarFooterActions] }), chatFirstMode ? (_jsxs("div", { className: "mt-auto shrink-0", children: [bottomNavigation, organizationPicker, collapsed ? sidebarFooterActions : null] })) : null] }));
+                    }, prelude: chatFirstAppsRail })) : (chatFirstAppsRail) })) : null, _jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", chatFirstMode && "hidden"), children: [_jsx("nav", { className: cn("py-2", collapsed ? "px-1.5" : "px-2"), children: _jsx("ul", { className: cn(collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5"), children: primaryNavItems.map(renderNavItem) }) }), _jsxs("div", { className: "mt-auto shrink-0", children: [bottomNavigation, organizationPicker] }), sidebarFooterActions] }), chatFirstMode ? (_jsxs("div", { className: "mt-auto shrink-0", children: [bottomNavigation, organizationPicker, sidebarFooterActions] })) : null] }));
 }
 export function Layout({ children, extensions, agentPageHref, }) {
     const t = useT();
@@ -584,26 +587,50 @@ export function Layout({ children, extensions, agentPageHref, }) {
     const localPathname = localDispatchPath(location.pathname);
     const isChatRoute = localPathname === "/chat" || localPathname.startsWith("/chat/");
     const chatFirstSurfaceScope = threadIdFromPath(localPathname) ?? "new";
-    const isWorkspaceAppHostRoute = localPathname.startsWith("/apps/");
+    const isWorkspaceAppRoute = localPathname.startsWith("/apps/");
+    const isWorkspaceAppHostRoute = isWorkspaceAppRoute &&
+        typeof window !== "undefined" &&
+        new URLSearchParams(window.location.search).get("embedded") === "1";
     const [chatFirstPreference, setChatFirstPreference] = useState(() => readChatFirstMode());
     const chatFirstEmbedded = typeof window !== "undefined" &&
         new URLSearchParams(window.location.search).get("chatFirst") === "1";
     const chatFirstMode = extensions?.chatFirst === true || chatFirstPreference || chatFirstEmbedded;
+    const chatFirstHasActiveChat = chatFirstSurfaceScope !== "new";
     const [chatFirstAppLayout, setChatFirstAppLayout] = useState(() => readChatFirstAppLayout());
     const chatFirstAppLayoutHydratedRef = useRef(false);
-    const chatFirstAppsQuery = useActionQuery("list-workspace-apps", { includeAgentCards: false }, { enabled: chatFirstMode && isChatRoute });
+    const chatFirstAppsQuery = useActionQuery("list-workspace-apps", { includeAgentCards: false }, { enabled: chatFirstMode });
+    const chatFirstGrantedAppsQuery = useActionQuery("list_apps", {}, { enabled: chatFirstMode });
     const chatFirstWorkspaceApps = useMemo(() => mergeChatFirstWorkspaceApps(chatFirstAppsQuery.data), [chatFirstAppsQuery.data]);
-    const chatFirstAppRegistrations = useMemo(() => chatFirstWorkspaceApps.map((app) => ({
-        id: app.id,
-        name: app.name,
-        path: app.path,
-        url: app.url,
-        enabled: app.status !== "pending" && app.archived !== true,
-    })), [chatFirstWorkspaceApps]);
-    const chatFirstAppItems = useMemo(() => chatFirstWorkspaceApps.map((app) => ({
+    const chatFirstAppRegistrations = useMemo(() => {
+        const registrations = new Map();
+        for (const app of chatFirstWorkspaceApps) {
+            registrations.set(app.id.toLowerCase(), {
+                id: app.id,
+                name: app.name,
+                path: app.path,
+                url: app.url,
+                enabled: app.status !== "pending" && app.archived !== true,
+            });
+        }
+        for (const app of chatFirstGrantedAppsQuery.data?.apps ?? []) {
+            const id = app.id.trim();
+            if (!id || registrations.has(id.toLowerCase()))
+                continue;
+            registrations.set(id.toLowerCase(), {
+                id,
+                name: app.name,
+                url: app.url,
+                enabled: true,
+            });
+        }
+        return [...registrations.values()];
+    }, [chatFirstGrantedAppsQuery.data?.apps, chatFirstWorkspaceApps]);
+    const chatFirstAppItems = useMemo(() => chatFirstAppRegistrations
+        .filter((app) => app.enabled)
+        .map((app) => ({
         id: app.id,
-        name: app.name,
-    })), [chatFirstWorkspaceApps]);
+        name: app.name ?? app.id,
+    })), [chatFirstAppRegistrations]);
     const chatFirstCopy = useMemo(() => createDispatchChatFirstCopy(t), [t]);
     const createChatFirstEmbedSession = useActionMutation("create_embed_session", { skipActionQueryInvalidation: true });
     const [chatFirstPane, setChatFirstPane] = useState(null);
@@ -627,10 +654,21 @@ export function Layout({ children, extensions, agentPageHref, }) {
     const previousChatFirstSurfaceScopeRef = useRef(chatFirstSurfaceScope);
     const previousChatFirstSurfaceTabCountRef = useRef(null);
     const activeChatFirstSurfaceTab = useMemo(() => chatFirstSurfaceTabs.tabs.find((tab) => tab.id === chatFirstSurfaceTabs.activeTabId) ?? null, [chatFirstSurfaceTabs]);
-    const activeChatFirstApp = useMemo(() => activeChatFirstSurfaceTab?.kind === "app" &&
+    const chatFirstAppTakesMain = chatFirstMode &&
+        isChatRoute &&
+        activeChatFirstSurfaceTab?.kind === "app" &&
+        activeChatFirstSurfaceTab.placement === "main";
+    const activeChatFirstAppRegistration = useMemo(() => activeChatFirstSurfaceTab?.kind === "app" &&
         activeChatFirstSurfaceTab.appId
-        ? (chatFirstWorkspaceApps.find((app) => app.id === activeChatFirstSurfaceTab.appId) ?? null)
-        : null, [activeChatFirstSurfaceTab, chatFirstWorkspaceApps]);
+        ? (chatFirstAppRegistrations.find((app) => app.id === activeChatFirstSurfaceTab.appId) ?? null)
+        : null, [activeChatFirstSurfaceTab, chatFirstAppRegistrations]);
+    const activeChatFirstApp = useMemo(() => activeChatFirstAppRegistration
+        ? {
+            id: activeChatFirstAppRegistration.id,
+            name: activeChatFirstAppRegistration.name ??
+                activeChatFirstAppRegistration.id,
+        }
+        : null, [activeChatFirstAppRegistration]);
     const chatFirstAgentActivities = useMemo(() => (chatFirstAgentsQuery.data?.threads ?? []).map((thread) => ({
         sessionId: thread.id,
         title: thread.title || chatFirstCopy("agentsTitle", { name: thread.id }),
@@ -641,7 +679,8 @@ export function Layout({ children, extensions, agentPageHref, }) {
     const chatFirstEmbedPath = activeChatFirstSurfaceTab?.kind === "app"
         ? (activeChatFirstSurfaceTab.path ??
             chatFirstPane?.path ??
-            activeChatFirstApp?.path)
+            activeChatFirstAppRegistration?.path ??
+            "/")
         : null;
     useEffect(() => {
         if (!chatFirstMode || !isChatRoute || !activeChatFirstApp) {
@@ -688,25 +727,47 @@ export function Layout({ children, extensions, agentPageHref, }) {
             setChatFirstNotice("The app pane opened locally, but its focus could not be synced.");
         });
     }, []);
-    const openChatFirstPane = useCallback((pane) => {
+    const openChatFirstPane = useCallback((pane, placement = "side") => {
+        if (placement === "side" && !chatFirstHasActiveChat)
+            return;
         setChatFirstNotice(null);
         closeChatFirstSessionWatch();
+        if (!isChatRoute) {
+            navigateWithAgentChatViewTransition(navigate, dispatchNavLinkTarget("/chat"));
+        }
         const app = chatFirstAppRegistrations.find((candidate) => candidate.id === pane.appId);
         chatFirstSurfaceTabsStore.open({
             id: chatFirstSurfaceTabId("app", `${pane.appId}:${pane.path ?? pane.view ?? "/"}`),
             kind: "app",
             title: app?.name ?? pane.appId,
             appId: pane.appId,
+            placement,
             ...(pane.path ? { path: pane.path } : {}),
             ...(pane.view ? { view: pane.view } : {}),
         });
-        persistChatFirstPane(pane);
+        setChatFirstSurfacePanelOpen(true);
+        persistChatFirstPane({ ...pane, placement });
     }, [
         chatFirstAppRegistrations,
         chatFirstSurfaceTabsStore,
+        chatFirstHasActiveChat,
         persistChatFirstPane,
+        isChatRoute,
+        navigate,
+        setChatFirstSurfacePanelOpen,
     ]);
     const openChatFirstSurface = useCallback((kind) => {
+        if (kind === "browser") {
+            persistChatFirstPane(null);
+            closeChatFirstSessionWatch();
+            chatFirstSurfaceTabsStore.open({
+                id: chatFirstSurfaceTabId("browser", "homepage"),
+                kind: "browser",
+                title: "Browser",
+                url: "https://www.google.com/",
+            });
+            return;
+        }
         if (kind !== "agents")
             return;
         persistChatFirstPane(null);
@@ -723,6 +784,20 @@ export function Layout({ children, extensions, agentPageHref, }) {
             setChatFirstNotice(chatFirstBrowserResolutionMessage(resolution.reason));
             return;
         }
+        if (resolution.target.openExternally && typeof window !== "undefined") {
+            try {
+                // Builder's Visual Editor rejects iframe ancestors with CSP/X-Frame-
+                // Options. Prefer the real browser tab; the browser pane below is a
+                // visible fallback when popup policy blocks this non-click event.
+                if (window.open(resolution.target.url, "_blank", "noopener,noreferrer")) {
+                    return;
+                }
+            }
+            catch (error) {
+                console.warn("[chat-first] external browser open failed; keeping link fallback", error);
+                // Fall through to the non-iframe browser pane below.
+            }
+        }
         persistChatFirstPane(null);
         closeChatFirstSessionWatch();
         setChatFirstNotice(null);
@@ -734,7 +809,7 @@ export function Layout({ children, extensions, agentPageHref, }) {
         });
     }, [chatFirstSurfaceTabsStore, persistChatFirstPane]);
     const resolveChatFirstOpenApp = useCallback((detail) => {
-        if (chatFirstAppsQuery.isLoading) {
+        if (chatFirstAppsQuery.isLoading || chatFirstGrantedAppsQuery.isLoading) {
             pendingChatFirstOpenAppRef.current = detail;
             return;
         }
@@ -756,10 +831,9 @@ export function Layout({ children, extensions, agentPageHref, }) {
         chatFirstAppRegistrations,
         chatFirstAppsQuery.isError,
         chatFirstAppsQuery.isLoading,
+        chatFirstGrantedAppsQuery.isLoading,
         openChatFirstPane,
     ]);
-    const sidebarBeforeAppRef = useRef(null);
-    const sidebarAutoCollapsedRef = useRef(false);
     const chatHomeHandoffActive = useAgentChatHomeHandoff({
         storageKey: "dispatch",
         activePath: localPathname,
@@ -811,7 +885,7 @@ export function Layout({ children, extensions, agentPageHref, }) {
         });
     }, []);
     useEffect(() => {
-        if (!chatFirstMode || !isChatRoute) {
+        if (!chatFirstMode) {
             setChatFirstPane(null);
             closeChatFirstSessionWatch();
             chatFirstSurfaceTabsStore.closeAll();
@@ -861,8 +935,9 @@ export function Layout({ children, extensions, agentPageHref, }) {
                     ? undefined
                     : window.location.origin,
             });
-            if (resolution.status === "ready")
-                openChatFirstPane(resolution.target);
+            if (resolution.status === "ready") {
+                openChatFirstPane(resolution.target, persisted.placement);
+            }
         })
             .catch(() => {
             if (active) {
@@ -904,7 +979,7 @@ export function Layout({ children, extensions, agentPageHref, }) {
     useEffect(() => {
         const tabCount = chatFirstSurfaceTabs.tabs.length;
         const previousTabCount = previousChatFirstSurfaceTabCountRef.current;
-        if (!chatFirstMode || !isChatRoute) {
+        if (!chatFirstMode || !chatFirstHasActiveChat) {
             setChatFirstSurfacePanelOpen(false);
         }
         else if (tabCount > 0 &&
@@ -919,6 +994,7 @@ export function Layout({ children, extensions, agentPageHref, }) {
         previousChatFirstSurfaceTabCountRef.current = tabCount;
     }, [
         chatFirstMode,
+        chatFirstHasActiveChat,
         setChatFirstSurfacePanelOpen,
         chatFirstSurfaceTabs.tabs.length,
         isChatRoute,
@@ -933,13 +1009,17 @@ export function Layout({ children, extensions, agentPageHref, }) {
     }, [activeChatFirstSurfaceTab, chatFirstSessionWatch.target]);
     useEffect(() => {
         const pending = pendingChatFirstOpenAppRef.current;
-        if (!pending || chatFirstAppsQuery.isLoading)
+        if (!pending ||
+            chatFirstAppsQuery.isLoading ||
+            chatFirstGrantedAppsQuery.isLoading)
             return;
         resolveChatFirstOpenApp(pending);
     }, [
         chatFirstAppsQuery.data,
         chatFirstAppsQuery.isError,
         chatFirstAppsQuery.isLoading,
+        chatFirstGrantedAppsQuery.data,
+        chatFirstGrantedAppsQuery.isLoading,
         resolveChatFirstOpenApp,
     ]);
     useEffect(() => {
@@ -959,26 +1039,6 @@ export function Layout({ children, extensions, agentPageHref, }) {
         chatFirstSurfaceTabsStore,
         isChatRoute,
     ]);
-    useEffect(() => {
-        if (isWorkspaceAppHostRoute) {
-            if (!sidebarAutoCollapsedRef.current) {
-                sidebarAutoCollapsedRef.current = true;
-                sidebarBeforeAppRef.current = sidebarCollapsed;
-            }
-            if (!sidebarCollapsed)
-                setSidebarCollapsed(true);
-            return;
-        }
-        if (!sidebarAutoCollapsedRef.current)
-            return;
-        sidebarAutoCollapsedRef.current = false;
-        const previousSidebarState = sidebarBeforeAppRef.current;
-        sidebarBeforeAppRef.current = null;
-        if (previousSidebarState !== null &&
-            previousSidebarState !== sidebarCollapsed) {
-            setSidebarCollapsed(previousSidebarState);
-        }
-    }, [isWorkspaceAppHostRoute, sidebarCollapsed]);
     useEffect(() => {
         if (typeof window === "undefined" || isWorkspaceAppHostRoute)
             return;
@@ -995,6 +1055,7 @@ export function Layout({ children, extensions, agentPageHref, }) {
             closeChatFirstSessionWatch();
             persistChatFirstPane({
                 appId: tab.appId,
+                placement: tab.placement,
                 ...(tab.path ? { path: tab.path } : {}),
                 ...(tab.view ? { view: tab.view } : {}),
             });
@@ -1042,8 +1103,14 @@ export function Layout({ children, extensions, agentPageHref, }) {
         if (tab.kind === "app") {
             if (tab.id !== chatFirstSurfaceTabs.activeTabId)
                 return null;
-            const app = tab.appId
-                ? (chatFirstWorkspaceApps.find((candidate) => candidate.id === tab.appId) ?? null)
+            const registration = tab.appId
+                ? (chatFirstAppRegistrations.find((candidate) => candidate.id === tab.appId) ?? null)
+                : null;
+            const app = registration
+                ? {
+                    id: registration.id,
+                    name: registration.name ?? registration.id,
+                }
                 : null;
             return (_jsx(ChatFirstAppPane, { app: app, status: chatFirstEmbedError
                     ? "error"
@@ -1087,7 +1154,7 @@ export function Layout({ children, extensions, agentPageHref, }) {
         chatFirstEmbedUrl,
         chatFirstSessionWatch.target,
         chatFirstSurfaceTabs.activeTabId,
-        chatFirstWorkspaceApps,
+        chatFirstAppRegistrations,
         closeChatFirstSurfaceTab,
         renderChatFirstWatchChat,
     ]);
@@ -1107,27 +1174,31 @@ export function Layout({ children, extensions, agentPageHref, }) {
         t("dispatch.sidebar.suggestionRouteSlack"),
         t("dispatch.sidebar.suggestionGrantKey"),
     ];
-    const appContent = (_jsxs("div", { className: "relative flex h-full min-w-0 flex-1 flex-col overflow-hidden", children: [showHeader ? _jsx(Header, { onOpenMobile: () => setMobileOpen(true) }) : null, _jsx(InvitationBanner, {}), isChatRoute && chatFirstMode ? (_jsx(ChatFirstSurfacePanelToggle, { open: chatFirstSurfacePanel.open, onToggle: chatFirstSurfacePanel.toggle, className: "absolute right-3 top-2 z-[4]" })) : null, isChatRoute && chatFirstMode && chatFirstNotice ? (_jsxs("div", { className: "dispatch-chat-first-notice", role: "status", "aria-live": "polite", children: [_jsx("span", { children: chatFirstNotice }), _jsx("button", { type: "button", onClick: () => setChatFirstNotice(null), "aria-label": "Dismiss app notice", children: "Dismiss" })] })) : null, _jsx("main", { className: cn("flex-1", isChatRoute || isWorkspaceAppHostRoute
+    const appContent = (_jsxs("div", { className: "relative flex h-full min-w-0 flex-1 flex-col overflow-hidden", children: [showHeader ? _jsx(Header, { onOpenMobile: () => setMobileOpen(true) }) : null, _jsx(InvitationBanner, {}), isChatRoute && chatFirstMode && chatFirstHasActiveChat ? (_jsx(ChatFirstSurfacePanelToggle, { open: chatFirstSurfacePanel.open, onToggle: chatFirstSurfacePanel.toggle, className: "absolute right-3 top-2 z-[4]" })) : null, isChatRoute && chatFirstMode && chatFirstNotice ? (_jsxs("div", { className: "dispatch-chat-first-notice", role: "status", "aria-live": "polite", children: [_jsx("span", { children: chatFirstNotice }), _jsx("button", { type: "button", onClick: () => setChatFirstNotice(null), "aria-label": "Dismiss app notice", children: "Dismiss" })] })) : null, _jsx("main", { className: cn("flex-1", isChatRoute || isWorkspaceAppRoute
                     ? "min-h-0 overflow-hidden"
                     : "overflow-y-auto"), children: showHeader ? (_jsx("div", { className: "mx-auto max-w-7xl space-y-10 px-4 py-6 sm:px-6", children: children })) : (children) })] }));
-    const content = isChatRoute ? (_jsxs("div", { className: cn("agent-layout-main-surface flex min-w-0 flex-1 overflow-hidden", chatFirstMode && "dispatch-chat-first-surface"), children: [appContent, chatFirstMode && chatFirstSurfacePanel.open ? (_jsxs(ChatFirstSurfacePanel, { width: chatFirstSurfaceResize.width, onResizePointerDown: chatFirstSurfaceResize.onPointerDown, copy: chatFirstCopy, children: [_jsx(ChatFirstSurfaceTabs, { tabs: chatFirstSurfaceTabs.tabs, activeTabId: chatFirstSurfaceTabs.activeTabId, onActivate: activateChatFirstSurfaceTab, onClose: closeChatFirstSurfaceTab, onCloseOthers: (tab) => {
-                            activateChatFirstSurfaceTab(tab);
-                            chatFirstSurfaceTabsStore.closeOthers(tab.id);
-                        }, onCloseToRight: (tab) => {
-                            const targetIndex = chatFirstSurfaceTabs.tabs.findIndex((candidate) => candidate.id === tab.id);
-                            const activeIndex = chatFirstSurfaceTabs.tabs.findIndex((candidate) => candidate.id === chatFirstSurfaceTabs.activeTabId);
-                            if (activeIndex > targetIndex)
-                                activateChatFirstSurfaceTab(tab);
-                            chatFirstSurfaceTabsStore.closeToRight(tab.id);
-                        }, onCloseAll: closeAllChatFirstSurfaceTabs, onOpenSurface: openChatFirstSurface, copy: chatFirstCopy }), chatFirstSurfaceTabs.tabs.length > 0 ? (_jsx(ChatFirstSurfaceContent, { tabs: chatFirstSurfaceTabs.tabs, activeTabId: chatFirstSurfaceTabs.activeTabId, renderTab: renderChatFirstSurfaceTab })) : null] })) : null] })) : (_jsx(AgentSidebar, { position: "right", defaultOpen: false, agentPageHref: agentPageHref, chatViewTransition: true, storageKey: "dispatch", openOnChatRunning: chatHomeHandoffActive, onFullscreenRequest: openAskAgentFullscreen, emptyStateText: t("dispatch.sidebar.emptyAgentText"), suggestions: sidebarSuggestions, children: appContent }));
+    const chatFirstSurfaceTabsBar = activeChatFirstSurfaceTab?.kind === "app" ? null : (_jsx(ChatFirstSurfaceTabs, { tabs: chatFirstSurfaceTabs.tabs, activeTabId: chatFirstSurfaceTabs.activeTabId, onActivate: activateChatFirstSurfaceTab, onClose: closeChatFirstSurfaceTab, onCloseOthers: (tab) => {
+            activateChatFirstSurfaceTab(tab);
+            chatFirstSurfaceTabsStore.closeOthers(tab.id);
+        }, onCloseToRight: (tab) => {
+            const targetIndex = chatFirstSurfaceTabs.tabs.findIndex((candidate) => candidate.id === tab.id);
+            const activeIndex = chatFirstSurfaceTabs.tabs.findIndex((candidate) => candidate.id === chatFirstSurfaceTabs.activeTabId);
+            if (activeIndex > targetIndex)
+                activateChatFirstSurfaceTab(tab);
+            chatFirstSurfaceTabsStore.closeToRight(tab.id);
+        }, onCloseAll: closeAllChatFirstSurfaceTabs, onOpenSurface: openChatFirstSurface, apps: chatFirstAppItems, onOpenApp: (app) => openChatFirstPane({ appId: app.id }, "side"), renderAppIcon: (app) => (_jsx(AppIcon, { id: app.id, name: app.name, size: "sm", className: "size-7 rounded-lg" })), copy: chatFirstCopy }));
+    const chatFirstSurfaceContent = chatFirstSurfaceTabs.tabs.length > 0 ? (_jsx(ChatFirstSurfaceContent, { tabs: chatFirstSurfaceTabs.tabs, activeTabId: chatFirstSurfaceTabs.activeTabId, renderTab: renderChatFirstSurfaceTab })) : null;
+    const content = isChatRoute ? (_jsx("div", { className: cn("agent-layout-main-surface flex min-w-0 flex-1 overflow-hidden", chatFirstMode && "dispatch-chat-first-surface"), children: chatFirstAppTakesMain ? (_jsx("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", "data-dispatch-chat-first-main-app": true, children: chatFirstSurfaceContent })) : (_jsxs(_Fragment, { children: [appContent, chatFirstMode &&
+                    chatFirstHasActiveChat &&
+                    chatFirstSurfacePanel.open ? (_jsxs(ChatFirstSurfacePanel, { width: chatFirstSurfaceResize.width, onResizePointerDown: chatFirstSurfaceResize.onPointerDown, copy: chatFirstCopy, children: [chatFirstSurfaceTabsBar, chatFirstSurfaceContent] })) : null] })) })) : isWorkspaceAppRoute ? (appContent) : (_jsx(AgentSidebar, { position: "right", defaultOpen: false, agentPageHref: agentPageHref, chatViewTransition: true, storageKey: "dispatch", openOnChatRunning: chatHomeHandoffActive, onFullscreenRequest: openAskAgentFullscreen, emptyStateText: t("dispatch.sidebar.emptyAgentText"), suggestions: sidebarSuggestions, children: appContent }));
     return (_jsx(DispatchExtensionsContext.Provider, { value: extensions, children: _jsx(HeaderActionsProvider, { children: _jsxs("div", { className: "agent-layout-shell flex h-screen w-full overflow-hidden bg-background", children: [_jsx("aside", { "data-collapsed": sidebarCollapsed ? "true" : "false", className: cn("agent-layout-left-drawer hidden shrink-0 flex-col border-e !border-e-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out lg:flex", sidebarCollapsed ? "w-14" : "w-56"), children: _jsx(NavContent, { extensions: extensions, chatFirstMode: chatFirstMode, chatFirstEmbedded: chatFirstEmbedded, collapsed: sidebarCollapsed, chatFirstAppLayout: chatFirstAppLayout, onChatFirstAppLayoutChange: persistChatFirstAppLayout, chatFirstApps: chatFirstAppItems, chatFirstAppsLoading: chatFirstAppsQuery.isLoading, chatFirstAppsError: chatFirstAppsQuery.isError
                                 ? chatFirstCopy("appsLoadError")
                                 : null, chatFirstActiveAppId: activeChatFirstSurfaceTab?.kind === "app"
                                 ? activeChatFirstSurfaceTab.appId
-                                : undefined, onChatFirstAppOpen: (app) => openChatFirstPane({ appId: app.id }), onChatFirstAppsRetry: () => void chatFirstAppsQuery.refetch(), collapsible: true, onCollapsedChange: setSidebarCollapsed }) }), _jsx(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: _jsxs(SheetContent, { side: "left", className: "w-72 p-0 bg-sidebar text-sidebar-foreground [&>button]:hidden", children: [_jsx(SheetTitle, { className: "sr-only", children: t("dispatch.nav.navigation") }), _jsx(SheetDescription, { className: "sr-only", children: t("dispatch.nav.navigationDescription") }), _jsx("div", { className: "flex h-full w-full flex-col", children: _jsx(NavContent, { extensions: extensions, chatFirstMode: chatFirstMode, chatFirstEmbedded: chatFirstEmbedded, collapsed: false, chatFirstAppLayout: chatFirstAppLayout, onChatFirstAppLayoutChange: persistChatFirstAppLayout, chatFirstApps: chatFirstAppItems, chatFirstAppsLoading: chatFirstAppsQuery.isLoading, chatFirstAppsError: chatFirstAppsQuery.isError
+                                : undefined, onChatFirstAppOpen: (app) => openChatFirstPane({ appId: app.id }, "main"), onChatFirstAppsRetry: () => void chatFirstAppsQuery.refetch(), collapsible: true, onCollapsedChange: setSidebarCollapsed }) }), _jsx(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: _jsxs(SheetContent, { side: "left", className: "w-72 bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", children: [_jsx(SheetTitle, { className: "sr-only", children: t("dispatch.nav.navigation") }), _jsx(SheetDescription, { className: "sr-only", children: t("dispatch.nav.navigationDescription") }), _jsx("div", { className: "flex h-full w-full flex-col", children: _jsx(NavContent, { extensions: extensions, chatFirstMode: chatFirstMode, chatFirstEmbedded: chatFirstEmbedded, collapsed: false, chatFirstAppLayout: chatFirstAppLayout, onChatFirstAppLayoutChange: persistChatFirstAppLayout, chatFirstApps: chatFirstAppItems, chatFirstAppsLoading: chatFirstAppsQuery.isLoading, chatFirstAppsError: chatFirstAppsQuery.isError
                                             ? chatFirstCopy("appsLoadError")
                                             : null, chatFirstActiveAppId: activeChatFirstSurfaceTab?.kind === "app"
                                             ? activeChatFirstSurfaceTab.appId
-                                            : undefined, onChatFirstAppOpen: (app) => openChatFirstPane({ appId: app.id }), onChatFirstAppsRetry: () => void chatFirstAppsQuery.refetch(), onNavigate: () => setMobileOpen(false) }) })] }) }), content] }) }) }));
+                                            : undefined, onChatFirstAppOpen: (app) => openChatFirstPane({ appId: app.id }, "main"), onChatFirstAppsRetry: () => void chatFirstAppsQuery.refetch(), onNavigate: () => setMobileOpen(false) }) })] }) }), content] }) }) }));
 }
 //# sourceMappingURL=Layout.js.map