@agent-native/dispatch 0.20.3 → 0.21.0

package/dist/components/layout/Layout.js

@@ -1,16 +1,24 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AgentSidebar, focusAgentChat, navigateWithAgentChatViewTransition, useAgentChatHomeHandoff, useAgentChatHomeHandoffLinks, useChatThreads, } from "@agent-native/core/client/agent-chat";
+import { CHAT_FIRST_MODE_CHANGED_EVENT, AgentChatSurface, chatFirstSurfaceTabId, AgentSidebar, ChatFirstSurfacePanelToggle, closeChatFirstSessionWatch, emitChatFirstSessionWatch, getChatFirstSurfaceTabsStore, focusAgentChat, navigateWithAgentChatViewTransition, readChatFirstAppLayout, readChatFirstMode, resolveChatFirstBrowserTarget, resolveChatFirstAppTarget, subscribeChatFirstOpenBrowser, subscribeChatFirstOpenApp, useChatFirstSessionWatch, useChatFirstSurfacePanel, useChatFirstSurfaceResize, useChatFirstSurfaceTabs, useAgentChatHomeHandoff, useAgentChatHomeHandoffLinks, useChatThreads, } from "@agent-native/core/client/agent-chat";
 import { appBasePath, appPath } from "@agent-native/core/client/api-path";
+import { readClientAppState, writeClientAppState, } from "@agent-native/core/client/application-state";
+import { ChatFirstAgentsPane, ChatFirstAppPane, ChatFirstAppsRail, ChatFirstBrowserPane, ChatFirstChatHistory, ChatFirstPrimaryNavigation, ChatFirstSessionWatchPane, ChatFirstSurfacePanel, ChatFirstSurfaceContent, ChatFirstSurfaceTabs, defaultChatFirstCopy, } from "@agent-native/core/client/chat-first";
+import { writeClipboardText } from "@agent-native/core/client/clipboard";
+import { useActionMutation, useActionQuery, } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { InvitationBanner, OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
 import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import { ChatHistoryRail, } from "@agent-native/toolkit/chat-history";
-import { IconApps, IconBrandSlack, IconBrandTelegram, IconMessageQuestion, IconBroadcast, IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand, IconSettings, IconShield, IconSearch, IconWorld, IconDeviceDesktop, } from "@tabler/icons-react";
-import { createContext, useEffect, useMemo, useRef, useState, useContext, } from "react";
+import { IconApps, IconBrandSlack, IconBrandTelegram, IconCopy, IconEye, IconMessageQuestion, IconBroadcast, IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand, IconSettings, IconShield, IconSearch, IconWorld, IconDeviceDesktop, IconPlus, } from "@tabler/icons-react";
+import { createContext, useEffect, useMemo, useRef, useState, useContext, useCallback, } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
+import { toast } from "sonner";
 import { cn } from "../../lib/utils.js";
+import { mergeChatFirstWorkspaceApps, } from "../../lib/workspace-apps.js";
+import { AppIcon } from "../app-icon.js";
+import { CreateAppPopover } from "../create-app-popover.js";
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "../ui/sheet.js";
 import { Skeleton } from "../ui/skeleton.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
@@ -59,6 +67,10 @@ const DISPATCH_SIDEBAR_LABEL = "Dispatch";
 const CHROMELESS_PATHS = ["/approval", "/browser-chat", "/browser-connect"];
 const SIDEBAR_COLLAPSE_KEY = "dispatch.sidebar.collapsed";
 const CHAT_HISTORY_SOURCE_KEY = "dispatch.chat-history.source";
+const CHAT_FIRST_PANE_STATE_KEY = "chat-first-pane";
+export function buildChatFirstEmbedSessionInput(appId, path) {
+    return { app: appId, path, chrome: "minimal" };
+}
 const DispatchExtensionsContext = createContext(undefined);
 export function useDispatchExtensions() {
     return useContext(DispatchExtensionsContext);
@@ -120,8 +132,147 @@ function dispatchNavLinkTarget(path) {
     const routerHasBasename = pathname === basePath || pathname.startsWith(`${basePath}/`);
     return routerHasBasename ? path : appPath(path);
 }
+function chatFirstResolutionMessage(reason) {
+    switch (reason) {
+        case "empty-detail":
+            return "The agent did not provide an app target to open.";
+        case "invalid-url":
+            return "The requested app route was not registered for this workspace app.";
+        case "unknown-app":
+            return "That app is not available in this workspace.";
+    }
+    return "The requested app could not be opened.";
+}
+function chatFirstBrowserResolutionMessage(reason) {
+    return reason === "empty-detail"
+        ? "The agent did not provide a browser URL to open."
+        : "The requested browser URL is not a safe HTTP(S) address.";
+}
+const DISPATCH_CHAT_FIRST_COPY_KEYS = {
+    workspaceApps: "chatFirstWorkspaceApps",
+    createWorkspaceApp: "chatFirstCreateWorkspaceApp",
+    openApp: "chatFirstOpenApp",
+    appsLoadError: "chatFirstAppsLoadError",
+    noWorkspaceApps: "chatFirstNoWorkspaceApps",
+    createApp: "chatFirstCreateApp",
+    retry: "chatFirstRetry",
+    dismiss: "chatFirstDismiss",
+    unpinApp: "chatFirstUnpinApp",
+    pinApp: "chatFirstPinApp",
+    removePinned: "chatFirstRemovePinned",
+    pinTop: "chatFirstPinTop",
+    openSideSurfaces: "chatFirstOpenSideSurfaces",
+    closeTab: "chatFirstCloseTab",
+    close: "chatFirstClose",
+    closeOthers: "chatFirstCloseOthers",
+    closeToRight: "chatFirstCloseToRight",
+    closeAll: "chatFirstCloseAll",
+    unavailable: "chatFirstUnavailable",
+    openActivity: "chatFirstOpenActivity",
+    deferred: "chatFirstDeferred",
+    browserBack: "chatFirstBrowserBack",
+    browserForward: "chatFirstBrowserForward",
+    browserReload: "chatFirstBrowserReload",
+    browserAddress: "chatFirstBrowserAddress",
+    browserOpenExternal: "chatFirstBrowserOpenExternal",
+    browserClose: "chatFirstBrowserClose",
+    browserPage: "chatFirstBrowserPage",
+    browserInvalidUrl: "chatFirstBrowserInvalidUrl",
+    browserPreviewStarting: "chatFirstBrowserPreviewStarting",
+    browserPreviewError: "chatFirstBrowserPreviewError",
+    appUnavailable: "chatFirstAppUnavailable",
+    appLoading: "chatFirstLoadingApp",
+    agentActivityEyebrow: "chatFirstAgentActivityEyebrow",
+    agentActivityTitle: "chatFirstAgentActivityTitle",
+    agentActivityDescription: "chatFirstAgentActivityDescription",
+    refreshAgentActivity: "chatFirstRefreshAgentActivity",
+    noAgentSessions: "chatFirstNoAgentSessions",
+    startAgentSession: "chatFirstStartAgentSession",
+    watchSession: "chatFirstWatchSession",
+    copySessionId: "chatFirstCopySessionId",
+    copySessionIdFor: "chatFirstCopySessionIdFor",
+    sessionIdCopied: "chatFirstSessionIdCopied",
+    sessionIdShort: "chatFirstSessionIdShort",
+    copied: "chatFirstCopied",
+    agentActivityStatusQueued: "chatFirstAgentActivityStatusQueued",
+    agentActivityStatusRunning: "chatFirstAgentActivityStatusRunning",
+    agentActivityStatusPaused: "chatFirstAgentActivityStatusPaused",
+    agentActivityStatusNeedsApproval: "chatFirstAgentActivityStatusNeedsApproval",
+    agentActivityStatusCompleted: "chatFirstAgentActivityStatusCompleted",
+    agentActivityStatusErrored: "chatFirstAgentActivityStatusErrored",
+    agentActivityStatusRecent: "chatFirstAgentActivityStatusRecent",
+    agentActivityStatusUnknown: "chatFirstAgentActivityStatusUnknown",
+    watchingSession: "chatFirstWatchingSession",
+    session: "chatFirstSession",
+    stopWatchingSession: "chatFirstStopWatchingSession",
+    stopWatching: "chatFirstStopWatching",
+    watchedSession: "chatFirstWatchedSession",
+    agentsTitle: "chatFirstAgentsTitle",
+};
+const DISPATCH_CHAT_FIRST_SURFACE_COPY_KEYS = {
+    browser: {
+        label: "chatFirstSurfaceBrowserLabel",
+        reason: "chatFirstSurfaceBrowserReason",
+    },
+    terminal: {
+        label: "chatFirstSurfaceTerminalLabel",
+        reason: "chatFirstSurfaceTerminalReason",
+    },
+    files: {
+        label: "chatFirstSurfaceFilesLabel",
+        reason: "chatFirstSurfaceFilesReason",
+    },
+    diff: {
+        label: "chatFirstSurfaceDiffLabel",
+        reason: "chatFirstSurfaceDiffReason",
+    },
+    "side-chat": {
+        label: "chatFirstSurfaceSideChatLabel",
+        reason: "chatFirstSurfaceSideChatReason",
+    },
+    agents: {
+        label: "chatFirstSurfaceAgentsLabel",
+        reason: "chatFirstSurfaceAgentsReason",
+    },
+};
+function createDispatchChatFirstCopy(t) {
+    return (key, values) => {
+        if (key.startsWith("surface.")) {
+            const [, kind, field] = key.split(".");
+            const surface = DISPATCH_CHAT_FIRST_SURFACE_COPY_KEYS[kind];
+            const translationKey = surface && (field === "label" || field === "reason")
+                ? surface[field]
+                : undefined;
+            if (translationKey) {
+                return t(`dispatch.pages.${translationKey}`, {
+                    ...(values ?? {}),
+                    defaultValue: defaultChatFirstCopy(key, values),
+                });
+            }
+        }
+        const translationKey = DISPATCH_CHAT_FIRST_COPY_KEYS[key];
+        if (!translationKey)
+            return defaultChatFirstCopy(key, values);
+        return t(`dispatch.pages.${translationKey}`, {
+            ...(values ?? {}),
+            defaultValue: defaultChatFirstCopy(key, values),
+        });
+    };
+}
 function chatThreadPath(threadId) {
-    return `/chat/${encodeURIComponent(threadId)}`;
+    return threadId ? `/chat/${encodeURIComponent(threadId)}` : "/chat";
+}
+function persistedChatFirstPane(value) {
+    if (!value || typeof value !== "object")
+        return null;
+    const record = value;
+    if (typeof record.appId !== "string" || !record.appId.trim())
+        return null;
+    return {
+        appId: record.appId,
+        ...(typeof record.path === "string" ? { path: record.path } : {}),
+        ...(typeof record.view === "string" ? { view: record.view } : {}),
+    };
 }
 function threadIdFromPath(pathname) {
     const match = pathname.match(/^\/chat\/([^/]+)/);
@@ -185,7 +336,7 @@ function threadUpdatedAt(thread) {
             ? thread.createdAt
             : 0;
 }
-function DispatchChatsSection({ onNavigate }) {
+function DispatchChatsSection({ onNavigate, showNewChat = false, prelude, chatFirstMode = false, chatFirstEmbedded = false, }) {
     const t = useT();
     const navigate = useNavigate();
     const location = useLocation();
@@ -266,7 +417,7 @@ function DispatchChatsSection({ onNavigate }) {
         if (threadId)
             openThread(threadId, { isNew: true });
     }
-    return (_jsxs("div", { className: "ms-4 min-w-0 space-y-0.5", children: [_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("ms-4 min-w-0 space-y-0.5", showNewChat && "dispatch-chat-first-chats"), children: [showNewChat ? (_jsxs("button", { type: "button", className: "flex h-7 w-[calc(100%-0.5rem)] items-center gap-2 rounded-md px-2 text-sm text-sidebar-foreground/80 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", onClick: () => void handleNewChat(), children: [_jsx(IconPlus, { size: 16, className: "shrink-0", "aria-hidden": "true" }), _jsx("span", { children: "New chat" })] })) : null, prelude, _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",
                                     })
@@ -278,9 +429,33 @@ function DispatchChatsSection({ onNavigate }) {
                                 })
                                 : t("dispatch.sidebar.showAllChats", {
                                     defaultValue: "Show all chats",
-                                }) })] }) }), chatsLoading &&
+                                }) })] }) }), !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}`))), _jsx(ChatHistoryRail, { items: chatItems, activeId: displayedActiveThreadId, onSelect: (threadId) => openThread(threadId), onNewChat: () => void handleNewChat(), railLabels: {
+                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: {
+                    options: (item) => t("dispatch.sidebar.chatOptions", {
+                        title: item.titleText ?? "",
+                    }),
+                    renameInput: (item) => t("dispatch.sidebar.renameThread", {
+                        title: item.titleText ?? "",
+                    }),
+                    rename: t("dispatch.sidebar.renameChat"),
+                }, renderAdditionalRowActions: (item, closeMenu) => (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", role: "menuitem", className: "an-chat-history-row__menu-item", onClick: () => {
+                                closeMenu();
+                                void writeClipboardText(item.id).then((copied) => {
+                                    toast[copied ? "success" : "error"](copied
+                                        ? "Session ID copied"
+                                        : "Could not copy the session ID");
+                                });
+                            }, children: [_jsx(IconCopy, { size: 13, strokeWidth: 1.8 }), _jsx("span", { children: "Copy session ID" })] }), !chatFirstEmbedded ? (_jsxs("button", { type: "button", role: "menuitem", className: "an-chat-history-row__menu-item", onClick: () => {
+                                closeMenu();
+                                emitChatFirstSessionWatch({
+                                    sessionId: item.id,
+                                    title: item.titleText,
+                                    kind: "agent-chat",
+                                    sourceSessionId: displayedActiveThreadId ?? undefined,
+                                });
+                            }, children: [_jsx(IconEye, { size: 13, strokeWidth: 1.8 }), _jsx("span", { children: "Watch and message session" })] })) : null] })), className: "min-w-0" })) : (_jsx(ChatHistoryRail, { items: chatItems, activeId: displayedActiveThreadId, onSelect: (threadId) => openThread(threadId), onNewChat: () => void handleNewChat(), railLabels: {
                     newChat: t("dispatch.sidebar.newChat"),
                     showMore: t("dispatch.sidebar.chats"),
                     showLess: t("dispatch.sidebar.chats"),
@@ -292,10 +467,26 @@ function DispatchChatsSection({ onNavigate }) {
                         title: item.titleText ?? "",
                     }),
                     rename: t("dispatch.sidebar.renameChat"),
-                }, className: "min-w-0" })] }));
+                }, renderAdditionalRowActions: (item, closeMenu) => (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", role: "menuitem", className: "an-chat-history-row__menu-item", onClick: () => {
+                                closeMenu();
+                                void writeClipboardText(item.id).then((copied) => {
+                                    toast[copied ? "success" : "error"](copied
+                                        ? "Session ID copied"
+                                        : "Could not copy the session ID");
+                                });
+                            }, children: [_jsx(IconCopy, { size: 13, strokeWidth: 1.8 }), _jsx("span", { children: "Copy session ID" })] }), chatFirstMode && !chatFirstEmbedded ? (_jsxs("button", { type: "button", role: "menuitem", className: "an-chat-history-row__menu-item", onClick: () => {
+                                closeMenu();
+                                emitChatFirstSessionWatch({
+                                    sessionId: item.id,
+                                    title: item.titleText,
+                                    kind: "agent-chat",
+                                    sourceSessionId: displayedActiveThreadId ?? undefined,
+                                });
+                            }, children: [_jsx(IconEye, { size: 13, strokeWidth: 1.8 }), _jsx("span", { children: "Watch and message session" })] })) : null] })), className: "min-w-0" }))] }));
 }
-export function NavContent({ onNavigate, extensions, collapsed = false, collapsible = false, onCollapsedChange, }) {
+export function NavContent({ onNavigate, extensions, chatFirstMode = false, chatFirstEmbedded = false, collapsed = false, collapsible = false, onCollapsedChange, chatFirstAppLayout, onChatFirstAppLayoutChange, chatFirstApps = [], chatFirstAppsLoading = false, chatFirstAppsError, chatFirstActiveAppId, onChatFirstAppOpen, onChatFirstAppsRetry, }) {
     const t = useT();
+    const chatFirstCopy = useMemo(() => createDispatchChatFirstCopy(t), [t]);
     const location = useLocation();
     const navigate = useNavigate();
     const extensionNavItems = extensions?.navItems ?? EMPTY_NAV_ITEMS;
@@ -317,6 +508,18 @@ export function NavContent({ onNavigate, extensions, collapsed = false, collapsi
                         : t("sidebar.collapseSidebar"), className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", children: collapsed ? (_jsx(IconLayoutSidebarLeftExpand, { className: "h-4 w-4 rtl:-scale-x-100" })) : (_jsx(IconLayoutSidebarLeftCollapse, { className: "h-4 w-4 rtl:-scale-x-100" })) }) }), _jsx(TooltipContent, { side: "right", children: collapsed ? t("sidebar.expandSidebar") : t("sidebar.collapseSidebar") })] })) : null;
     const searchButton = (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: openCommandMenu, "aria-label": t("sidebar.search"), className: "flex h-8 w-8 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", children: _jsx(IconSearch, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "right", children: t("sidebar.search") })] }));
     const feedbackButton = (_jsx(FeedbackButton, { variant: collapsed ? "icon" : "sidebar", side: "right", className: collapsed ? "size-8" : "min-w-0" }));
+    const chatFirstCreateAppTrigger = (_jsx(CreateAppPopover, { align: "start", trigger: _jsx("button", { type: "button", className: "flex size-6 items-center justify-center rounded text-sidebar-foreground/55 hover:bg-sidebar-accent hover:text-sidebar-foreground", "aria-label": chatFirstCopy("createWorkspaceApp"), title: chatFirstCopy("createWorkspaceApp"), children: _jsx(IconPlus, { size: 14, "aria-hidden": "true" }) }) }));
+    const chatFirstPrimaryNavigation = (_jsx(ChatFirstPrimaryNavigation, { copy: chatFirstCopy, onOpenIntegrations: () => {
+            navigate(dispatchNavLinkTarget("/admin/integrations"));
+            onNavigate?.();
+        }, onOpenScheduled: () => {
+            navigate(dispatchNavLinkTarget("/admin/automations"));
+            onNavigate?.();
+        } }));
+    const chatFirstAppsRail = (_jsx(ChatFirstAppsRail, { apps: chatFirstApps, activeAppId: chatFirstActiveAppId, collapsed: collapsed, loading: chatFirstAppsLoading, error: chatFirstAppsError, layout: chatFirstAppLayout, onLayoutChange: onChatFirstAppLayoutChange, onRetry: onChatFirstAppsRetry, onOpenApp: (app) => {
+            onChatFirstAppOpen?.(app);
+            onNavigate?.();
+        }, createAppTrigger: chatFirstCreateAppTrigger, renderIcon: (app) => (_jsx(AppIcon, { id: app.id, name: app.name, size: "sm", className: "size-5 rounded-md" })), copy: chatFirstCopy }));
     const renderNavItem = (item) => {
         const Icon = item.icon;
         const itemMatchesLocalPath = navItemMatchesPath(item, localPathname);
@@ -351,9 +554,9 @@ export function NavContent({ onNavigate, extensions, collapsed = false, collapsi
                         onNavigate?.();
                     }, className: cn("flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm", itemMatchesLocalPath
                         ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
-                        : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), children: [Icon ? (_jsx(Icon, { size: 16, className: "shrink-0" })) : (_jsx("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" })), _jsx("span", { className: "truncate", children: label })] })), !collapsed && item.id === "chat" && itemMatchesLocalPath ? (_jsx(DispatchChatsSection, { onNavigate: onNavigate })) : null] }, item.id));
+                        : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), children: [Icon ? (_jsx(Icon, { size: 16, className: "shrink-0" })) : (_jsx("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" })), _jsx("span", { className: "truncate", children: label })] })), !collapsed && item.id === "chat" && itemMatchesLocalPath ? (_jsx(DispatchChatsSection, { onNavigate: onNavigate, chatFirstMode: chatFirstMode, chatFirstEmbedded: chatFirstEmbedded })) : null] }, item.id));
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("flex h-12 shrink-0 items-center border-b border-sidebar-border", collapsed ? "justify-center px-0" : "px-4"), children: _jsxs("div", { className: cn("flex items-center", collapsed ? "justify-center" : "gap-2"), children: [_jsx("img", { src: appPath("/agent-native-icon-light.svg"), alt: "", "aria-hidden": "true", width: 35, height: 20, className: cn("block shrink-0 object-contain object-center dark:hidden", collapsed ? "h-4 w-7" : "h-5 w-[35px]") }), _jsx("img", { src: appPath("/agent-native-icon-dark.svg"), alt: "", "aria-hidden": "true", width: 35, height: 20, className: cn("hidden shrink-0 object-contain object-center dark:block", collapsed ? "h-4 w-7" : "h-5 w-[35px]") }), !collapsed && (_jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { "data-dispatch-sidebar-label": true, className: "truncate text-lg font-bold tracking-tight text-foreground", children: DISPATCH_SIDEBAR_LABEL }) }))] }) }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: [_jsxs("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) }), _jsx(WorkspaceAppsRail, { collapsed: collapsed, onNavigate: onNavigate })] }), _jsxs("div", { className: "mt-auto shrink-0", children: [_jsx("nav", { className: cn("py-1", collapsed ? "px-1.5" : "px-2"), children: _jsx("ul", { className: cn(collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5"), children: BOTTOM_NAV_ITEMS.map(renderNavItem) }) }), _jsx("div", { className: cn("py-2", collapsed ? "flex justify-center px-1" : "px-3"), children: _jsx(OrgSwitcher, { compact: collapsed, reserveSpace: true }) })] }), _jsx(SidebarFooterActions, { collapsed: collapsed, feedback: feedbackButton, search: searchButton, collapse: collapseButton })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("flex h-12 shrink-0 items-center border-b border-sidebar-border", collapsed ? "justify-center px-0" : "px-4"), children: _jsxs("div", { className: cn("flex items-center", collapsed ? "justify-center" : "gap-2"), children: [_jsx("img", { src: appPath("/agent-native-icon-light.svg"), alt: "", "aria-hidden": "true", width: 35, height: 20, className: cn("block shrink-0 object-contain object-center dark:hidden", collapsed ? "h-4 w-7" : "h-5 w-[35px]") }), _jsx("img", { src: appPath("/agent-native-icon-dark.svg"), alt: "", "aria-hidden": "true", width: 35, height: 20, className: cn("hidden shrink-0 object-contain object-center dark:block", collapsed ? "h-4 w-7" : "h-5 w-[35px]") }), !collapsed && (_jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { "data-dispatch-sidebar-label": true, className: "truncate text-lg font-bold tracking-tight text-foreground", children: DISPATCH_SIDEBAR_LABEL }) }))] }) }), chatFirstMode ? (_jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: !collapsed ? (_jsx(DispatchChatsSection, { onNavigate: onNavigate, showNewChat: true, chatFirstMode: true, prelude: _jsxs(_Fragment, { children: [_jsx("nav", { className: "space-y-0.5 px-2 py-2", children: chatFirstPrimaryNavigation }), chatFirstAppsRail] }) })) : (chatFirstAppsRail) })) : null, _jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", chatFirstMode && "hidden"), children: [_jsxs("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) }), _jsx(WorkspaceAppsRail, { collapsed: collapsed, onNavigate: onNavigate })] }), _jsxs("div", { className: "mt-auto shrink-0", children: [_jsx("nav", { className: cn("py-1", collapsed ? "px-1.5" : "px-2"), children: _jsx("ul", { className: cn(collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5"), children: BOTTOM_NAV_ITEMS.map(renderNavItem) }) }), _jsx("div", { className: cn("py-2", collapsed ? "flex justify-center px-1" : "px-3"), children: _jsx(OrgSwitcher, { compact: collapsed, reserveSpace: true }) })] }), _jsx(SidebarFooterActions, { collapsed: collapsed, feedback: feedbackButton, search: searchButton, collapse: collapseButton })] }), chatFirstMode && collapsed ? (_jsx("div", { className: "mt-auto shrink-0", children: _jsx(SidebarFooterActions, { collapsed: true, feedback: feedbackButton, search: searchButton, collapse: collapseButton }) })) : null] }));
 }
 export function Layout({ children, extensions, agentPageHref, }) {
     const t = useT();
@@ -372,7 +575,181 @@ 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 [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 [chatFirstAppLayout, setChatFirstAppLayout] = useState(() => readChatFirstAppLayout());
+    const chatFirstAppLayoutHydratedRef = useRef(false);
+    const chatFirstAppsQuery = useActionQuery("list-workspace-apps", { includeAgentCards: false }, { enabled: chatFirstMode && isChatRoute });
+    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) => ({
+        id: app.id,
+        name: app.name,
+    })), [chatFirstWorkspaceApps]);
+    const chatFirstCopy = useMemo(() => createDispatchChatFirstCopy(t), [t]);
+    const createChatFirstEmbedSession = useActionMutation("create_embed_session", { skipActionQueryInvalidation: true });
+    const [chatFirstPane, setChatFirstPane] = useState(null);
+    const [chatFirstEmbedUrl, setChatFirstEmbedUrl] = useState(null);
+    const [chatFirstEmbedError, setChatFirstEmbedError] = useState(null);
+    const [chatFirstEmbedAttempt, setChatFirstEmbedAttempt] = useState(0);
+    const [chatFirstNotice, setChatFirstNotice] = useState(null);
+    const chatFirstSessionWatch = useChatFirstSessionWatch();
+    const chatFirstSurfaceTabs = useChatFirstSurfaceTabs(chatFirstSurfaceScope);
+    const chatFirstSurfaceTabsStore = getChatFirstSurfaceTabsStore(chatFirstSurfaceScope);
+    const chatFirstAgentsQuery = useActionQuery("search-agent-threads", { sourceId: "current", limit: 12 }, {
+        enabled: chatFirstMode &&
+            isChatRoute &&
+            chatFirstSurfaceTabs.activeTabId?.startsWith("agents:") === true,
+    });
+    const chatFirstSurfacePanel = useChatFirstSurfacePanel(chatFirstSurfaceScope);
+    const { setOpen: setChatFirstSurfacePanelOpen } = chatFirstSurfacePanel;
+    const chatFirstSurfaceResize = useChatFirstSurfaceResize(chatFirstSurfaceScope);
+    const chatFirstPaneHydratedRef = useRef(false);
+    const pendingChatFirstOpenAppRef = useRef(null);
+    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" &&
+        activeChatFirstSurfaceTab.appId
+        ? (chatFirstWorkspaceApps.find((app) => app.id === activeChatFirstSurfaceTab.appId) ?? null)
+        : null, [activeChatFirstSurfaceTab, chatFirstWorkspaceApps]);
+    const chatFirstAgentActivities = useMemo(() => (chatFirstAgentsQuery.data?.threads ?? []).map((thread) => ({
+        sessionId: thread.id,
+        title: thread.title || chatFirstCopy("agentsTitle", { name: thread.id }),
+        subtitle: thread.snippet || thread.preview || chatFirstCopy("session"),
+        status: "recent",
+        ...(thread.updatedAt ? { updatedAt: thread.updatedAt } : {}),
+    })), [chatFirstAgentsQuery.data, chatFirstCopy]);
+    const chatFirstEmbedPath = activeChatFirstSurfaceTab?.kind === "app"
+        ? (activeChatFirstSurfaceTab.path ??
+            chatFirstPane?.path ??
+            activeChatFirstApp?.path)
+        : null;
+    useEffect(() => {
+        if (!chatFirstMode || !isChatRoute || !activeChatFirstApp) {
+            setChatFirstEmbedUrl(null);
+            setChatFirstEmbedError(null);
+            return;
+        }
+        if (!chatFirstEmbedPath?.startsWith("/")) {
+            setChatFirstEmbedUrl(null);
+            setChatFirstEmbedError(chatFirstCopy("appUnavailable"));
+            return;
+        }
+        let cancelled = false;
+        setChatFirstEmbedUrl(null);
+        setChatFirstEmbedError(null);
+        void createChatFirstEmbedSession
+            .mutateAsync(buildChatFirstEmbedSessionInput(activeChatFirstApp.id, chatFirstEmbedPath))
+            .then((result) => {
+            if (!cancelled)
+                setChatFirstEmbedUrl(result.startUrl);
+        })
+            .catch((cause) => {
+            if (!cancelled) {
+                setChatFirstEmbedError(cause instanceof Error
+                    ? cause.message
+                    : chatFirstCopy("appUnavailable"));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        activeChatFirstApp,
+        chatFirstCopy,
+        chatFirstEmbedAttempt,
+        chatFirstEmbedPath,
+        chatFirstMode,
+        createChatFirstEmbedSession.mutateAsync,
+        isChatRoute,
+    ]);
+    const persistChatFirstPane = useCallback((pane) => {
+        setChatFirstPane(pane);
+        void writeClientAppState(CHAT_FIRST_PANE_STATE_KEY, pane).catch(() => {
+            setChatFirstNotice("The app pane opened locally, but its focus could not be synced.");
+        });
+    }, []);
+    const openChatFirstPane = useCallback((pane) => {
+        setChatFirstNotice(null);
+        closeChatFirstSessionWatch();
+        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,
+            ...(pane.path ? { path: pane.path } : {}),
+            ...(pane.view ? { view: pane.view } : {}),
+        });
+        persistChatFirstPane(pane);
+    }, [
+        chatFirstAppRegistrations,
+        chatFirstSurfaceTabsStore,
+        persistChatFirstPane,
+    ]);
+    const openChatFirstSurface = useCallback((kind) => {
+        if (kind !== "agents")
+            return;
+        persistChatFirstPane(null);
+        closeChatFirstSessionWatch();
+        chatFirstSurfaceTabsStore.open({
+            id: chatFirstSurfaceTabId("agents", "activity"),
+            kind: "agents",
+            title: "Agents",
+        });
+    }, [chatFirstSurfaceTabsStore, persistChatFirstPane]);
+    const resolveChatFirstOpenBrowser = useCallback((detail) => {
+        const resolution = resolveChatFirstBrowserTarget(detail);
+        if (resolution.status === "unresolved") {
+            setChatFirstNotice(chatFirstBrowserResolutionMessage(resolution.reason));
+            return;
+        }
+        persistChatFirstPane(null);
+        closeChatFirstSessionWatch();
+        setChatFirstNotice(null);
+        chatFirstSurfaceTabsStore.open({
+            id: chatFirstSurfaceTabId("browser", resolution.target.url),
+            kind: "browser",
+            title: resolution.target.title ?? "Browser",
+            url: resolution.target.url,
+        });
+    }, [chatFirstSurfaceTabsStore, persistChatFirstPane]);
+    const resolveChatFirstOpenApp = useCallback((detail) => {
+        if (chatFirstAppsQuery.isLoading) {
+            pendingChatFirstOpenAppRef.current = detail;
+            return;
+        }
+        if (chatFirstAppsQuery.isError) {
+            pendingChatFirstOpenAppRef.current = null;
+            setChatFirstNotice("Workspace apps could not be loaded, so the requested app was not opened.");
+            return;
+        }
+        const resolution = resolveChatFirstAppTarget(detail, chatFirstAppRegistrations, {
+            currentOrigin: typeof window === "undefined" ? undefined : window.location.origin,
+        });
+        pendingChatFirstOpenAppRef.current = null;
+        if (resolution.status === "unresolved") {
+            setChatFirstNotice(chatFirstResolutionMessage(resolution.reason));
+            return;
+        }
+        openChatFirstPane(resolution.target);
+    }, [
+        chatFirstAppRegistrations,
+        chatFirstAppsQuery.isError,
+        chatFirstAppsQuery.isLoading,
+        openChatFirstPane,
+    ]);
     const sidebarBeforeAppRef = useRef(null);
     const sidebarAutoCollapsedRef = useRef(false);
     const chatHomeHandoffActive = useAgentChatHomeHandoff({
@@ -386,6 +763,194 @@ export function Layout({ children, extensions, agentPageHref, }) {
         requireActiveHandoff: true,
     };
     useAgentChatHomeHandoffLinks(chatHandoffLinkOptions);
+    useEffect(() => {
+        const handleModeChange = (event) => {
+            const enabled = event.detail
+                ?.enabled;
+            setChatFirstPreference(enabled === true);
+        };
+        window.addEventListener(CHAT_FIRST_MODE_CHANGED_EVENT, handleModeChange);
+        return () => window.removeEventListener(CHAT_FIRST_MODE_CHANGED_EVENT, handleModeChange);
+    }, []);
+    useEffect(() => {
+        if (!chatFirstMode ||
+            !isChatRoute ||
+            chatFirstAppLayoutHydratedRef.current) {
+            return;
+        }
+        chatFirstAppLayoutHydratedRef.current = true;
+        void readClientAppState("chat-first-app-layout")
+            .then((value) => {
+            if (!value || typeof value !== "object")
+                return;
+            const candidate = value;
+            const ids = (input) => Array.isArray(input)
+                ? input.filter((id) => typeof id === "string" && id.trim().length > 0)
+                : [];
+            setChatFirstAppLayout({
+                pinnedIds: [...new Set(ids(candidate.pinnedIds))],
+                orderedIds: [...new Set(ids(candidate.orderedIds))],
+            });
+        })
+            .catch(() => {
+            // Device-local layout remains the fallback when workspace state is unavailable.
+        });
+    }, [chatFirstMode, isChatRoute]);
+    const persistChatFirstAppLayout = useCallback((layout) => {
+        setChatFirstAppLayout(layout);
+        void writeClientAppState("chat-first-app-layout", layout).catch(() => {
+            setChatFirstNotice("App order changed locally, but workspace state could not be synced.");
+        });
+    }, []);
+    useEffect(() => {
+        if (!chatFirstMode || !isChatRoute) {
+            setChatFirstPane(null);
+            closeChatFirstSessionWatch();
+            chatFirstSurfaceTabsStore.closeAll();
+            setChatFirstNotice(null);
+            pendingChatFirstOpenAppRef.current = null;
+            chatFirstPaneHydratedRef.current = false;
+            return;
+        }
+        const unsubscribeApp = subscribeChatFirstOpenApp(resolveChatFirstOpenApp);
+        const unsubscribeBrowser = subscribeChatFirstOpenBrowser(resolveChatFirstOpenBrowser);
+        return () => {
+            unsubscribeApp();
+            unsubscribeBrowser();
+        };
+    }, [
+        chatFirstMode,
+        isChatRoute,
+        chatFirstSurfaceTabsStore,
+        resolveChatFirstOpenApp,
+        resolveChatFirstOpenBrowser,
+    ]);
+    useEffect(() => {
+        if (!chatFirstMode ||
+            !isChatRoute ||
+            chatFirstPaneHydratedRef.current ||
+            chatFirstAppsQuery.isLoading ||
+            chatFirstAppsQuery.isError) {
+            return;
+        }
+        chatFirstPaneHydratedRef.current = true;
+        if (chatFirstPane)
+            return;
+        let active = true;
+        void readClientAppState(CHAT_FIRST_PANE_STATE_KEY)
+            .then((value) => {
+            if (!active)
+                return;
+            const persisted = persistedChatFirstPane(value);
+            if (!persisted)
+                return;
+            const resolution = resolveChatFirstAppTarget({
+                app: persisted.appId,
+                path: persisted.path,
+                view: persisted.view,
+            }, chatFirstAppRegistrations, {
+                currentOrigin: typeof window === "undefined"
+                    ? undefined
+                    : window.location.origin,
+            });
+            if (resolution.status === "ready")
+                openChatFirstPane(resolution.target);
+        })
+            .catch(() => {
+            if (active) {
+                setChatFirstNotice("The last app pane could not be restored from workspace state.");
+            }
+        });
+        return () => {
+            active = false;
+        };
+    }, [
+        chatFirstAppsQuery.isError,
+        chatFirstAppsQuery.isLoading,
+        chatFirstAppRegistrations,
+        chatFirstMode,
+        chatFirstPane,
+        isChatRoute,
+        openChatFirstPane,
+    ]);
+    useEffect(() => {
+        if (previousChatFirstSurfaceScopeRef.current === chatFirstSurfaceScope) {
+            return;
+        }
+        previousChatFirstSurfaceScopeRef.current = chatFirstSurfaceScope;
+        persistChatFirstPane(null);
+        setChatFirstEmbedUrl(null);
+        setChatFirstEmbedError(null);
+        setChatFirstNotice(null);
+        pendingChatFirstOpenAppRef.current = null;
+        chatFirstPaneHydratedRef.current = true;
+        chatFirstSurfaceTabsStore.closeAll();
+        setChatFirstSurfacePanelOpen(false);
+        closeChatFirstSessionWatch();
+    }, [
+        chatFirstSurfaceScope,
+        chatFirstSurfaceTabsStore,
+        persistChatFirstPane,
+        setChatFirstSurfacePanelOpen,
+    ]);
+    useEffect(() => {
+        const tabCount = chatFirstSurfaceTabs.tabs.length;
+        const previousTabCount = previousChatFirstSurfaceTabCountRef.current;
+        if (!chatFirstMode || !isChatRoute) {
+            setChatFirstSurfacePanelOpen(false);
+        }
+        else if (tabCount > 0 &&
+            (previousTabCount === null || previousTabCount === 0)) {
+            setChatFirstSurfacePanelOpen(true);
+        }
+        else if (tabCount === 0 &&
+            previousTabCount !== null &&
+            previousTabCount > 0) {
+            setChatFirstSurfacePanelOpen(false);
+        }
+        previousChatFirstSurfaceTabCountRef.current = tabCount;
+    }, [
+        chatFirstMode,
+        setChatFirstSurfacePanelOpen,
+        chatFirstSurfaceTabs.tabs.length,
+        isChatRoute,
+    ]);
+    useEffect(() => {
+        const activeTab = activeChatFirstSurfaceTab;
+        if (activeTab?.kind === "side-chat" &&
+            activeTab.session &&
+            !chatFirstSessionWatch.target) {
+            emitChatFirstSessionWatch(activeTab.session);
+        }
+    }, [activeChatFirstSurfaceTab, chatFirstSessionWatch.target]);
+    useEffect(() => {
+        const pending = pendingChatFirstOpenAppRef.current;
+        if (!pending || chatFirstAppsQuery.isLoading)
+            return;
+        resolveChatFirstOpenApp(pending);
+    }, [
+        chatFirstAppsQuery.data,
+        chatFirstAppsQuery.isError,
+        chatFirstAppsQuery.isLoading,
+        resolveChatFirstOpenApp,
+    ]);
+    useEffect(() => {
+        const target = chatFirstSessionWatch.target;
+        if (!target || !chatFirstMode || !isChatRoute)
+            return;
+        setChatFirstPane(null);
+        chatFirstSurfaceTabsStore.open({
+            id: chatFirstSurfaceTabId("side-chat", target.sessionId),
+            kind: "side-chat",
+            title: target.title ? `Watch · ${target.title}` : "Watched session",
+            session: target,
+        });
+    }, [
+        chatFirstMode,
+        chatFirstSessionWatch.target,
+        chatFirstSurfaceTabsStore,
+        isChatRoute,
+    ]);
     useEffect(() => {
         if (isWorkspaceAppHostRoute) {
             if (!sidebarAutoCollapsedRef.current) {
@@ -416,9 +981,114 @@ export function Layout({ children, extensions, agentPageHref, }) {
             // Ignore storage failures; the in-memory preference still works.
         }
     }, [isWorkspaceAppHostRoute, sidebarCollapsed]);
+    const activateChatFirstSurfaceTab = useCallback((tab) => {
+        chatFirstSurfaceTabsStore.activate(tab.id);
+        if (tab.kind === "app" && tab.appId) {
+            closeChatFirstSessionWatch();
+            persistChatFirstPane({
+                appId: tab.appId,
+                ...(tab.path ? { path: tab.path } : {}),
+                ...(tab.view ? { view: tab.view } : {}),
+            });
+            return;
+        }
+        if (tab.kind === "browser" && tab.url) {
+            persistChatFirstPane(null);
+            closeChatFirstSessionWatch();
+            return;
+        }
+        if (tab.kind === "side-chat" && tab.session) {
+            persistChatFirstPane(null);
+            emitChatFirstSessionWatch(tab.session);
+            return;
+        }
+        if (tab.kind === "agents") {
+            persistChatFirstPane(null);
+            closeChatFirstSessionWatch();
+        }
+    }, [
+        chatFirstSurfaceTabs.tabs,
+        chatFirstSurfaceTabsStore,
+        persistChatFirstPane,
+    ]);
+    const closeChatFirstSurfaceTab = useCallback((tab) => {
+        const isActive = chatFirstSurfaceTabs.activeTabId === tab.id;
+        if (tab.kind === "app" && isActive)
+            persistChatFirstPane(null);
+        if (tab.kind === "side-chat" && isActive) {
+            closeChatFirstSessionWatch();
+        }
+        chatFirstSurfaceTabsStore.close(tab.id);
+    }, [chatFirstSurfaceTabs, chatFirstSurfaceTabsStore, persistChatFirstPane]);
+    const closeAllChatFirstSurfaceTabs = useCallback(() => {
+        persistChatFirstPane(null);
+        closeChatFirstSessionWatch();
+        chatFirstSurfaceTabsStore.closeAll();
+    }, [chatFirstSurfaceTabsStore, persistChatFirstPane]);
+    const renderChatFirstWatchChat = useCallback((target) => (_jsx(AgentChatSurface, { mode: "page", className: "h-full min-h-0 w-full", defaultMode: "chat", storageKey: `dispatch-session-watch:${target.sessionId}`, restoreActiveThread: false, threadUrlSync: {
+            routeThreadId: target.sessionId,
+            getPath: chatThreadPath,
+            navigate: () => undefined,
+        }, showHeader: false, showTabBar: false, showPageNewChatButton: false, chatOnly: true, dynamicSuggestions: false, suggestions: [], emptyStateDisplay: "hidden", composerPlaceholder: t("dispatch.pages.chatFirstSessionMessagePlaceholder") })), [t]);
+    const renderChatFirstSurfaceTab = useCallback((tab) => {
+        if (tab.kind === "app") {
+            if (tab.id !== chatFirstSurfaceTabs.activeTabId)
+                return null;
+            const app = tab.appId
+                ? (chatFirstWorkspaceApps.find((candidate) => candidate.id === tab.appId) ?? null)
+                : null;
+            return (_jsx(ChatFirstAppPane, { app: app, status: chatFirstEmbedError
+                    ? "error"
+                    : chatFirstEmbedUrl
+                        ? "ready"
+                        : chatFirstAppsQuery.isLoading
+                            ? "loading"
+                            : app
+                                ? "loading"
+                                : "unresolved", embedUrl: chatFirstEmbedUrl, errorMessage: chatFirstEmbedError, onRetry: () => setChatFirstEmbedAttempt((value) => value + 1), renderEmbed: ({ url, title }) => (_jsx("iframe", { "data-dispatch-chat-first-app-frame": true, src: url, title: title ?? chatFirstCopy("appUnavailable"), referrerPolicy: "no-referrer", allow: "clipboard-read; clipboard-write", className: "h-full w-full border-0 bg-background" })), copy: chatFirstCopy }));
+        }
+        if (tab.kind === "browser" && tab.url) {
+            return (_jsx(ChatFirstBrowserPane, { url: tab.url, title: tab.title, onClose: () => closeChatFirstSurfaceTab(tab), renderEmbed: ({ url, title, key }) => (_jsx("iframe", { src: url, title: title ?? chatFirstCopy("browserPage"), referrerPolicy: "no-referrer", allow: "clipboard-read; clipboard-write", className: "h-full w-full border-0 bg-background" }, key)), copy: chatFirstCopy }));
+        }
+        if (tab.kind === "side-chat") {
+            const target = tab.session ??
+                (tab.id === chatFirstSurfaceTabs.activeTabId
+                    ? chatFirstSessionWatch.target
+                    : null);
+            return target ? (_jsx(ChatFirstSessionWatchPane, { target: target, onClose: () => closeChatFirstSurfaceTab(tab), renderChat: renderChatFirstWatchChat, copy: chatFirstCopy })) : null;
+        }
+        if (tab.kind === "agents") {
+            return (_jsx(ChatFirstAgentsPane, { activities: chatFirstAgentActivities, loading: chatFirstAgentsQuery.isLoading, error: chatFirstAgentsQuery.isError
+                    ? chatFirstAgentsQuery.error.message
+                    : null, onRefresh: () => void chatFirstAgentsQuery.refetch(), onWatch: (activity) => emitChatFirstSessionWatch({
+                    sessionId: activity.sessionId,
+                    title: activity.title,
+                    kind: "agent-chat",
+                    ...(activity.goalId ? { goalId: activity.goalId } : {}),
+                }), copy: chatFirstCopy }));
+        }
+        return null;
+    }, [
+        chatFirstAgentActivities,
+        chatFirstAgentsQuery.error,
+        chatFirstAgentsQuery.isError,
+        chatFirstAgentsQuery.isLoading,
+        chatFirstAppsQuery.isLoading,
+        chatFirstCopy,
+        chatFirstEmbedError,
+        chatFirstEmbedUrl,
+        chatFirstSessionWatch.target,
+        chatFirstSurfaceTabs.activeTabId,
+        chatFirstWorkspaceApps,
+        closeChatFirstSurfaceTab,
+        renderChatFirstWatchChat,
+    ]);
     if (CHROMELESS_PATHS.some((path) => localPathname === path)) {
         return _jsx(_Fragment, { children: children });
     }
+    if (isWorkspaceAppHostRoute) {
+        return (_jsx(DispatchExtensionsContext.Provider, { value: extensions, children: _jsx(HeaderActionsProvider, { children: _jsx("div", { "data-dispatch-workspace-app-chrome-less": true, className: "h-screen w-full overflow-hidden bg-background", children: children }) }) }));
+    }
     const showHeader = !isChatRoute && !pageOwnsToolbar(localPathname);
     function openAskAgentFullscreen() {
         focusAgentChat();
@@ -429,10 +1099,27 @@ export function Layout({ children, extensions, agentPageHref, }) {
         t("dispatch.sidebar.suggestionRouteSlack"),
         t("dispatch.sidebar.suggestionGrantKey"),
     ];
-    const appContent = (_jsxs("div", { className: "flex h-full min-w-0 flex-1 flex-col overflow-hidden", children: [showHeader ? _jsx(Header, { onOpenMobile: () => setMobileOpen(true) }) : null, _jsx(InvitationBanner, {}), _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 ? (_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
                     ? "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 ? (_jsx("div", { className: "agent-layout-main-surface flex min-w-0 flex-1 overflow-hidden", children: 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, collapsed: sidebarCollapsed, 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, collapsed: false, onNavigate: () => setMobileOpen(false) }) })] }) }), content] }) }) }));
+    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 }));
+    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
+                                            ? chatFirstCopy("appsLoadError")
+                                            : null, chatFirstActiveAppId: activeChatFirstSurfaceTab?.kind === "app"
+                                            ? activeChatFirstSurfaceTab.appId
+                                            : undefined, onChatFirstAppOpen: (app) => openChatFirstPane({ appId: app.id }), onChatFirstAppsRetry: () => void chatFirstAppsQuery.refetch(), onNavigate: () => setMobileOpen(false) }) })] }) }), content] }) }) }));
 }
 //# sourceMappingURL=Layout.js.map