@agent-native/dispatch 0.23.5 → 0.24.2

package/dist/components/layout/Layout.js

@@ -15,8 +15,9 @@ import { IconApps, IconBrandSlack, IconBrandTelegram, IconCopy, IconEye, IconMes
 import { createContext, useEffect, useMemo, useRef, useState, useContext, useCallback, } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
+import { isEmbedSessionExpiredMessage } from "../../lib/embed-session-recovery.js";
 import { cn } from "../../lib/utils.js";
-import { isDispatchWorkspaceAppId, isWorkspaceAppVisibleInDefaultLaunchers, mergeChatFirstWorkspaceApps, workspaceAppIdFromRoute, workspaceAppRoute, } from "../../lib/workspace-apps.js";
+import { isDispatchWorkspaceAppId, isWorkspaceAppVisibleInDefaultLaunchers, mergeChatFirstWorkspaceApps, workspaceAppDirectHref, workspaceAppIdFromRoute, workspaceAppRoute, } 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";
@@ -118,6 +119,9 @@ function localDispatchPath(pathname) {
 export function isElectronEmbeddedSearch(search) {
     return new URLSearchParams(search).get("electron") === "1";
 }
+export function shouldAutoCollapseDispatchSidebar(pathname) {
+    return localDispatchPath(pathname).startsWith("/apps/");
+}
 function chatFirstPrimaryTabForPath(pathname) {
     if (pathname === "/chat" || pathname.startsWith("/chat/")) {
         return "new-chat";
@@ -329,17 +333,6 @@ export function formatThreadAge(updatedAt, now = Date.now()) {
 function threadTitle(thread, fallback) {
     return thread.title || thread.preview || fallback;
 }
-function readChatHistoryIncludesExternal() {
-    if (typeof window === "undefined")
-        return false;
-    try {
-        return localStorage.getItem(CHAT_HISTORY_SOURCE_KEY) === "all";
-    }
-    catch {
-        // coercion-ok: localStorage is optional browser persistence.
-        return false;
-    }
-}
 function threadSourceIcon(platform) {
     const normalized = platform?.trim().toLowerCase();
     if (!normalized)
@@ -352,6 +345,17 @@ function threadSourceIcon(platform) {
     }
     return _jsx(IconWorld, { size: 13, "aria-hidden": "true" });
 }
+function readChatHistoryIncludesExternal() {
+    if (typeof window === "undefined")
+        return false;
+    try {
+        return localStorage.getItem(CHAT_HISTORY_SOURCE_KEY) === "all";
+    }
+    catch {
+        // coercion-ok: localStorage is optional browser persistence.
+        return false;
+    }
+}
 function threadUpdatedAt(thread) {
     return Number.isFinite(thread.updatedAt)
         ? thread.updatedAt
@@ -367,14 +371,14 @@ function DispatchChatsSection({ onNavigate, showNewChat = false, prelude, chatFi
     const [includeExternal, setIncludeExternal] = useState(false);
     const [historyPreferenceReady, setHistoryPreferenceReady] = useState(false);
     const historyModeRef = useRef(includeExternal);
-    const { threads, activeThreadId, isLoading: chatsLoading, createThread, switchThread, renameThread, refreshThreads, } = useChatThreads(undefined, "dispatch", undefined, {
+    const { threads, activeThreadId, isLoading: chatsLoading, threadsLoadError, createThread, switchThread, renameThread, refreshThreads, } = useChatThreads(undefined, "dispatch", undefined, {
         autoCreate: false,
         includeExternal,
     });
     const visibleThreads = useMemo(() => threads
         .filter((thread) => thread.messageCount > 0 || thread.id === activeThreadId)
         .sort((a, b) => threadUpdatedAt(b) - threadUpdatedAt(a))
-        .slice(0, 15), [activeThreadId, threads]);
+        .slice(0, 8), [activeThreadId, threads]);
     const localPathname = localDispatchPath(location.pathname);
     const displayedActiveThreadId = threadIdFromPath(localPathname) ??
         (localPathname === "/chat" ? null : activeThreadId);
@@ -394,6 +398,7 @@ function DispatchChatsSection({ onNavigate, showNewChat = false, prelude, chatFi
                 : formatThreadAge(threadUpdatedAt(thread)),
         };
     });
+    const chatHistoryError = threadsLoadError ? (_jsxs("button", { type: "button", onClick: () => void refreshThreads(), className: "flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-xs text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", children: [_jsx("span", { children: "Could not load chats" }), _jsx("span", { className: "font-medium", children: "Retry" })] })) : undefined;
     useEffect(() => {
         setIncludeExternal(readChatHistoryIncludesExternal());
         setHistoryPreferenceReady(true);
@@ -459,7 +464,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 && (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: {
+                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" }), error: chatHistoryError, onSelect: (threadId) => openThread(threadId), renameMaxLength: 160, onRename: (threadId, title) => void renameThread(threadId, title), labels: {
                     options: (item) => t("dispatch.sidebar.chatOptions", {
                         title: item.titleText ?? "",
                     }),
@@ -486,7 +491,7 @@ function DispatchChatsSection({ onNavigate, showNewChat = false, prelude, chatFi
                     newChat: t("dispatch.sidebar.newChat"),
                     showMore: t("dispatch.sidebar.chats"),
                     showLess: t("dispatch.sidebar.chats"),
-                }, renameMaxLength: 160, onRename: (threadId, title) => void renameThread(threadId, title), labels: {
+                }, error: chatHistoryError, renameMaxLength: 160, onRename: (threadId, title) => void renameThread(threadId, title), labels: {
                     options: (item) => t("dispatch.sidebar.chatOptions", {
                         title: item.titleText ?? "",
                     }),
@@ -509,7 +514,7 @@ function DispatchChatsSection({ onNavigate, showNewChat = false, prelude, chatFi
                                     kind: "agent-chat",
                                     sourceSessionId: displayedActiveThreadId ?? undefined,
                                 });
-                            }, children: [_jsx(IconEye, { size: 13, strokeWidth: 1.8 }), _jsx("span", { children: "Watch and message session" })] })) : null] })), className: cn("min-w-0", chatFirstMode && "px-2") }))] }));
+                            }, children: [_jsx(IconEye, { size: 13, strokeWidth: 1.8 }), _jsx("span", { children: "Watch and message session" })] })) : null] })), className: "min-w-0 px-2" }))] }));
 }
 export function NavContent({ onNavigate, extensions, chatFirstMode = false, chatFirstEmbedded = false, collapsed = false, collapsible = false, onCollapsedChange, chatFirstAppLayout, onChatFirstAppLayoutChange, chatFirstApps = [], chatFirstAppsLoading = false, chatFirstAppsError, chatFirstActiveAppId, chatFirstActivePrimaryTab, onChatFirstNewChat, onChatFirstAppOpen, onChatFirstAppsRetry, }) {
     const t = useT();
@@ -580,9 +585,9 @@ export function NavContent({ onNavigate, extensions, chatFirstMode = false, chat
                         : "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));
     };
     const bottomNavigation = (_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) }) }));
-    const organizationPicker = (_jsx("div", { className: cn("py-2", collapsed ? "flex justify-center px-1" : "px-3"), children: _jsx(OrgSwitcher, { compact: collapsed, reserveSpace: true }) }));
+    const organizationPicker = (_jsx("div", { className: cn("py-2", collapsed ? "flex justify-center px-1" : "px-3"), children: _jsx(OrgSwitcher, { compact: collapsed, reserveSpace: true, currentAppId: "dispatch" }) }));
     const sidebarFooterActions = (_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, chatFirstEmbedded: chatFirstEmbedded, chatFirstNavigation: {
+    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(Link, { to: dispatchNavLinkTarget("/overview"), "aria-label": `${DISPATCH_SIDEBAR_LABEL} overview`, "data-dispatch-logo": true, className: cn("flex items-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring", 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, chatFirstEmbedded: chatFirstEmbedded, chatFirstNavigation: {
                         activeTab: chatFirstActivePrimaryTab,
                         onNewChat: onChatFirstNewChat,
                         onOpenIntegrations: () => {
@@ -616,7 +621,7 @@ export function Layout({ children, extensions, agentPageHref, }) {
         : false);
     const isChatRoute = localPathname === "/chat" || localPathname.startsWith("/chat/");
     const chatFirstSurfaceScope = threadIdFromPath(localPathname) ?? "new";
-    const isWorkspaceAppRoute = localPathname.startsWith("/apps/");
+    const isWorkspaceAppRoute = shouldAutoCollapseDispatchSidebar(location.pathname);
     const isWorkspaceAppHostRoute = isWorkspaceAppRoute &&
         typeof window !== "undefined" &&
         new URLSearchParams(window.location.search).get("embedded") === "1";
@@ -634,12 +639,6 @@ export function Layout({ children, extensions, agentPageHref, }) {
         url.searchParams.set("electron", "1");
         window.history.replaceState(window.history.state, "", `${url.pathname}${url.search}${url.hash}`);
     }, [electronEmbedded, location.pathname, location.search]);
-    useEffect(() => {
-        if (!chatFirstMode || chatFirstEmbedded || localPathname !== "/overview") {
-            return;
-        }
-        navigate(dispatchNavLinkTarget("/chat"), { replace: true });
-    }, [chatFirstEmbedded, chatFirstMode, localPathname, navigate]);
     const [chatFirstAppLayout, setChatFirstAppLayout] = useState(() => readChatFirstAppLayout());
     const chatFirstAppLayoutHydratedRef = useRef(false);
     const chatFirstAppsQuery = useActionQuery("list-workspace-apps", { includeAgentCards: false }, { enabled: chatFirstMode });
@@ -761,6 +760,11 @@ export function Layout({ children, extensions, agentPageHref, }) {
         })
             .catch((cause) => {
             if (!cancelled) {
+                const directAppUrl = activeChatFirstAppRegistration
+                    ? workspaceAppDirectHref(activeChatFirstAppRegistration, chatFirstEmbedPath)
+                    : null;
+                if (directAppUrl)
+                    setChatFirstEmbedUrl(directAppUrl);
                 setChatFirstEmbedError(cause instanceof Error
                     ? cause.message
                     : chatFirstCopy("appUnavailable"));
@@ -782,10 +786,8 @@ export function Layout({ children, extensions, agentPageHref, }) {
         if (!chatFirstMode || !isChatRoute || !activeChatFirstApp)
             return;
         const handleEmbedSessionExpired = (event) => {
-            if (event.data?.type !== "agentNative.embedSessionExpired" ||
-                event.source !== chatFirstAppFrameRef.current?.contentWindow) {
+            if (!isEmbedSessionExpiredMessage(event, chatFirstAppFrameRef.current, null))
                 return;
-            }
             setChatFirstEmbedAttempt((attempt) => attempt + 1);
         };
         window.addEventListener("message", handleEmbedSessionExpired);
@@ -812,6 +814,7 @@ export function Layout({ children, extensions, agentPageHref, }) {
     const openChatFirstPane = useCallback((pane, placement = "side") => {
         if (placement === "side" && !chatFirstHasActiveChat)
             return;
+        setSidebarCollapsed(true);
         setChatFirstNotice(null);
         closeChatFirstSessionWatch();
         if (!isChatRoute) {
@@ -1136,6 +1139,11 @@ export function Layout({ children, extensions, agentPageHref, }) {
         chatFirstSurfaceTabsStore,
         isChatRoute,
     ]);
+    useEffect(() => {
+        if (!isWorkspaceAppRoute)
+            return;
+        setSidebarCollapsed(true);
+    }, [isWorkspaceAppRoute, localPathname]);
     useEffect(() => {
         if (typeof window === "undefined" || isWorkspaceAppHostRoute)
             return;
@@ -1195,7 +1203,7 @@ export function Layout({ children, extensions, agentPageHref, }) {
             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]);
+        }, showHeader: false, showTabBar: false, showPageNewChatButton: false, chatOnly: true, dynamicSuggestions: false, suggestions: [], suppressInlineOpenApp: chatFirstMode, emptyStateDisplay: "hidden", composerPlaceholder: t("dispatch.pages.chatFirstSessionMessagePlaceholder") })), [chatFirstMode, t]);
     const renderChatFirstSurfaceTab = useCallback((tab) => {
         if (tab.kind === "app") {
             if (tab.id !== chatFirstSurfaceTabs.activeTabId)
@@ -1209,15 +1217,15 @@ export function Layout({ children, extensions, agentPageHref, }) {
                     name: registration.name ?? registration.id,
                 }
                 : null;
-            return (_jsx(ChatFirstAppPane, { app: app, status: chatFirstEmbedError
-                    ? "error"
-                    : chatFirstEmbedUrl
-                        ? "ready"
+            return (_jsx(ChatFirstAppPane, { app: app, status: chatFirstEmbedUrl
+                    ? "ready"
+                    : chatFirstEmbedError
+                        ? "error"
                         : 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"), ref: chatFirstAppFrameRef, referrerPolicy: "no-referrer", allow: "clipboard-read; clipboard-write", className: "h-full w-full border-0 bg-background" })), copy: chatFirstCopy }));
+                                : "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"), ref: chatFirstAppFrameRef, referrerPolicy: "no-referrer", allow: "clipboard-read; clipboard-write", className: "h-full w-full border-0 bg-background" }, `${url}:${chatFirstEmbedAttempt}`)), 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 }));