@agent-native/dispatch 0.31.14 → 0.31.15

package/src/components/dispatch-control-plane.spec.tsx

@@ -29,6 +29,8 @@ const clientState = vi.hoisted(() => ({
 }));
 
 vi.mock("@agent-native/core/client/agent-chat", () => ({
+  chatModelSelectionStorageKey: (namespace: string) =>
+    `agent-native:chat-models:selection:${namespace}`,
   navigateWithAgentChatViewTransition: (
     navigate: unknown,
     path: string,
@@ -161,7 +163,7 @@ describe("DispatchControlPlane", () => {
       container.querySelector('[data-placeholder="Ask Dispatch anything..."]'),
     ).not.toBeNull();
     expect(clientState.useChatModels).toHaveBeenCalledWith({
-      storageKey: "dispatch",
+      storageKey: "agent-native:chat-models:selection:dispatch",
     });
     expect(clientState.promptComposerProps).toMatchObject({
       availableModels: [],

package/src/components/dispatch-control-plane.tsx

@@ -1,4 +1,5 @@
 import {
+  chatModelSelectionStorageKey,
   navigateWithAgentChatViewTransition,
   useChatModels,
 } from "@agent-native/core/client/agent-chat";
@@ -71,7 +72,7 @@ function CommandPanel() {
     selectedEffort,
     selectedEngine,
     selectedModel,
-  } = useChatModels({ storageKey: "dispatch" });
+  } = useChatModels({ storageKey: chatModelSelectionStorageKey("dispatch") });
   const navigate = useNavigate();
   const promptSuggestions = [
     t("dispatch.pages.suggestionOnboardingApp", {

package/src/components/layout/Layout.spec.tsx

@@ -8,9 +8,11 @@ import { AdminShell } from "../admin-navigation";
 import { TooltipProvider } from "../ui/tooltip";
 import {
   buildChatFirstEmbedSessionInput,
+  CHAT_FIRST_SURFACE_PANEL_TOGGLE_CLASS_NAME,
   formatThreadAge,
   isElectronEmbeddedSearch,
   NavContent,
+  renderChatFirstAppSurfaceTab,
   shouldAutoCollapseDispatchSidebar,
 } from "./Layout";
 
@@ -19,10 +21,17 @@ const clientState = vi.hoisted(() => ({
   switchThread: vi.fn(),
   threads: [] as Array<Record<string, unknown>>,
   workspaceApps: [] as Array<Record<string, unknown>>,
+  // Stable identity: WorkspaceAppFrame's embed effect depends on this
+  // function, so a fresh mock per render would re-run the effect forever.
+  createEmbedSessionMutateAsync: vi
+    .fn()
+    .mockResolvedValue({ startUrl: "about:blank" }),
 }));
 
 vi.mock("@agent-native/core/client/agent-chat", () => ({
-  AgentSidebar: ({ children }: { children: React.ReactNode }) => children,
+  AgentSidebar: ({ children }: { children: React.ReactNode }) => (
+    <div data-agent-sidebar>{children}</div>
+  ),
   focusAgentChat: vi.fn(),
   navigateWithAgentChatViewTransition: (
     navigate: (path: string) => void,
@@ -53,6 +62,17 @@ vi.mock("@agent-native/core/client/hooks", () => ({
       action === "list-workspace-apps" ? clientState.workspaceApps : undefined,
     isLoading: false,
   }),
+  useActionMutation: () => ({
+    mutateAsync: clientState.createEmbedSessionMutateAsync,
+  }),
+}));
+
+vi.mock("@agent-native/core/client/feature-flags", () => ({
+  useFeatureFlag: () => false,
+}));
+
+vi.mock("next-themes", () => ({
+  useTheme: () => ({ resolvedTheme: "light" }),
 }));
 
 vi.mock("@agent-native/core/client/i18n", () => ({
@@ -226,7 +246,7 @@ describe("Dispatch NavContent", () => {
     { mode: "chat-first", chatFirstMode: true, collapsed: false },
     { mode: "chat-first", chatFirstMode: true, collapsed: true },
   ])(
-    "reserves environment pill space in the $mode desktop footer when collapsed is $collapsed",
+    "keeps footer controls flush with the bottom in the $mode desktop footer when collapsed is $collapsed",
     async ({ mode, chatFirstMode, collapsed }) => {
       await act(async () => {
         root.render(
@@ -234,11 +254,7 @@ describe("Dispatch NavContent", () => {
             initialEntries={[chatFirstMode ? "/chat" : "/overview"]}
           >
             <TooltipProvider>
-              <NavContent
-                chatFirstMode={chatFirstMode}
-                collapsed={collapsed}
-                reserveEnvironmentBadgeSpace
-              />
+              <NavContent chatFirstMode={chatFirstMode} collapsed={collapsed} />
             </TooltipProvider>
           </MemoryRouter>,
         );
@@ -258,7 +274,7 @@ describe("Dispatch NavContent", () => {
 
       expect(footer?.className).toContain("mt-auto");
       expect(footer?.className).toContain("shrink-0");
-      expect(footer?.className).toContain("pb-10");
+      expect(footer?.className).not.toContain("pb-10");
       if (mode === "standard") {
         expect(footer?.closest(".overflow-y-auto")).toBeNull();
       }
@@ -278,23 +294,6 @@ describe("Dispatch NavContent", () => {
     },
   );
 
-  it("reserves environment pill space in the mobile footer", async () => {
-    await act(async () => {
-      root.render(
-        <MemoryRouter initialEntries={["/overview"]}>
-          <TooltipProvider>
-            <NavContent reserveEnvironmentBadgeSpace />
-          </TooltipProvider>
-        </MemoryRouter>,
-      );
-    });
-
-    expect(
-      container.querySelector('[data-dispatch-sidebar-footer="standard"]')
-        ?.className,
-    ).toContain("pb-10");
-  });
-
   it("keeps chat-first primary actions in the collapsed sidebar", async () => {
     await act(async () => {
       root.render(
@@ -622,3 +621,122 @@ describe("Dispatch NavContent", () => {
     expect(clientState.switchThread).toHaveBeenCalledWith("new-thread");
   });
 });
+
+function readUnprefixedZIndexClass(className: string): number | null {
+  const match = className.match(/(?:^|\s)z-\[?(\d+)\]?(?=\s|$)/);
+  return match ? Number(match[1]) : null;
+}
+
+function readMobileZIndexClass(className: string): number | null {
+  const match = className.match(/max-\[767px\]:z-\[?(\d+)\]?(?=\s|$)/);
+  return match ? Number(match[1]) : null;
+}
+
+describe("chat-first surface panel toggle stacking", () => {
+  it("keeps the toggle above the mobile full-screen surface panel overlay", async () => {
+    const { ChatFirstSurfacePanelToggle: RealChatFirstSurfacePanelToggle } =
+      await vi.importActual<
+        typeof import("@agent-native/core/client/agent-chat")
+      >("@agent-native/core/client/agent-chat");
+    const { ChatFirstSurfacePanel } =
+      await import("@agent-native/core/client/chat-first");
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+
+    await act(async () => {
+      root.render(
+        <>
+          <ChatFirstSurfacePanel width={320} onResizePointerDown={() => {}}>
+            <div>side surface content</div>
+          </ChatFirstSurfacePanel>
+          <RealChatFirstSurfacePanelToggle
+            open={false}
+            onToggle={() => {}}
+            className={CHAT_FIRST_SURFACE_PANEL_TOGGLE_CLASS_NAME}
+          />
+        </>,
+      );
+    });
+
+    const panelClassName =
+      container.querySelector("[data-chat-first-surface-panel]")?.className ??
+      "";
+    const toggleClassName =
+      container.querySelector("[data-chat-first-surface-toggle]")?.className ??
+      "";
+
+    // Below 768px the panel becomes a full-screen absolute overlay at this
+    // z-index (surface-panel.tsx). The toggle is the only control that can
+    // dismiss it, so it must always paint above that overlay.
+    const panelMobileZIndex = readMobileZIndexClass(panelClassName);
+    const toggleZIndex = readUnprefixedZIndexClass(toggleClassName);
+    expect(panelMobileZIndex).not.toBeNull();
+    expect(toggleZIndex).not.toBeNull();
+    expect(toggleZIndex as number).toBeGreaterThan(panelMobileZIndex as number);
+
+    act(() => root.unmount());
+    container.remove();
+  });
+});
+
+describe("chat-first app surface tab chat rail", () => {
+  const registration = { id: "mail", name: "Mail", path: "/mail" };
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  async function renderAppTab(isMobileSurface: boolean) {
+    const { defaultChatFirstCopy } =
+      await import("@agent-native/core/client/chat-first");
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(new Response("{}", { status: 200 })),
+    );
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(
+        renderChatFirstAppSurfaceTab({
+          registration,
+          embedPath: "/mail",
+          loading: false,
+          isMobileSurface,
+          copy: defaultChatFirstCopy,
+        }),
+      );
+    });
+    return { container, root };
+  }
+
+  it("does not mount a second full-screen chat rail while the mobile surface panel already covers the screen", async () => {
+    const { container, root } = await renderAppTab(true);
+
+    // ChatFirstSurfacePanel is already a full-screen overlay below 768px
+    // (surface-panel.tsx). A nested AgentSidebar chat rail here would stack a
+    // second full-screen shell on top of it.
+    expect(container.querySelector("[data-agent-sidebar]")).toBeNull();
+    expect(
+      container.querySelector("[data-chat-first-app-pane]"),
+    ).not.toBeNull();
+
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it("still gives the app its own chat rail on desktop, where the surface panel is inline", async () => {
+    const { container, root } = await renderAppTab(false);
+
+    expect(container.querySelector("[data-agent-sidebar]")).not.toBeNull();
+
+    act(() => root.unmount());
+    container.remove();
+  });
+});

package/src/components/layout/Layout.tsx

@@ -99,6 +99,7 @@ import {
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
+import { useIsMobile } from "../../hooks/use-mobile";
 import { cn } from "../../lib/utils";
 import {
   isDispatchWorkspaceAppId,
@@ -211,6 +212,12 @@ 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";
+// Below 768px, ChatFirstSurfacePanel becomes a max-[767px]:z-10 full-screen
+// overlay (surface-panel.tsx). This toggle is the only way to dismiss it, so
+// its z-index must stay above that overlay in every stacking context or the
+// panel becomes undismissable on mobile.
+export const CHAT_FIRST_SURFACE_PANEL_TOGGLE_CLASS_NAME =
+  "absolute right-3 top-2 z-20";
 
 interface DispatchChatFirstPane {
   appId: string;
@@ -953,7 +960,6 @@ export function NavContent({
   chatFirstEmbedded = false,
   collapsed = false,
   collapsible = false,
-  reserveEnvironmentBadgeSpace = false,
   onCollapsedChange,
   chatFirstAppLayout,
   onChatFirstAppLayoutChange,
@@ -972,7 +978,6 @@ export function NavContent({
   chatFirstEmbedded?: boolean;
   collapsed?: boolean;
   collapsible?: boolean;
-  reserveEnvironmentBadgeSpace?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
   chatFirstAppLayout?: ChatFirstAppLayoutPreference;
   onChatFirstAppLayoutChange?: (layout: ChatFirstAppLayoutPreference) => void;
@@ -1314,10 +1319,7 @@ export function NavContent({
         </div>
       ) : null}
       <div
-        className={cn(
-          "mt-auto shrink-0",
-          reserveEnvironmentBadgeSpace && "pb-10",
-        )}
+        className="mt-auto shrink-0"
         data-dispatch-sidebar-footer={chatFirstMode ? "chat-first" : "standard"}
       >
         {bottomNavigation}
@@ -1328,6 +1330,64 @@ export function NavContent({
   );
 }
 
+/**
+ * Below 768px `ChatFirstSurfacePanel` is already a full-screen overlay
+ * (surface-panel.tsx). Mounting the sub-app's own `AgentSidebar` chat rail
+ * inside it too would stack a second full-screen shell on top of it, so the
+ * rail only gets its own chat surface once there is room beside the panel.
+ */
+export function renderChatFirstAppSurfaceTab({
+  registration,
+  embedPath,
+  loading,
+  isMobileSurface,
+  copy,
+}: {
+  registration: ChatFirstAppRegistration | null;
+  embedPath: string;
+  loading: boolean;
+  isMobileSurface: boolean;
+  copy: ChatFirstCopy;
+}): ReactNode {
+  if (!registration) {
+    return (
+      <ChatFirstAppPane
+        app={null}
+        status={loading ? "loading" : "unresolved"}
+        renderEmbed={() => null}
+        copy={copy}
+      />
+    );
+  }
+  if (!embedPath.startsWith("/")) {
+    return (
+      <ChatFirstAppPane
+        app={{
+          id: registration.id,
+          name: registration.name ?? registration.id,
+        }}
+        status="error"
+        errorMessage={copy("appUnavailable")}
+        renderEmbed={() => null}
+        copy={copy}
+      />
+    );
+  }
+  return (
+    <WorkspaceAppFrame
+      app={{
+        id: registration.id,
+        name: registration.name ?? registration.id,
+        path: registration.path,
+        url: registration.url,
+      }}
+      embedPath={embedPath}
+      chatSidebar={!isMobileSurface}
+      copy={copy}
+    />
+  );
+}
+
 export function Layout({
   children,
   extensions,
@@ -1341,6 +1401,10 @@ export function Layout({
   const location = useLocation();
   const navigate = useNavigate();
   const [mobileOpen, setMobileOpen] = useState(false);
+  // Drives renderChatFirstSurfaceTab's app-tab chatSidebar decision below —
+  // the chat-first surface panel is already a full-screen overlay at this
+  // width, so an app tab must not also mount its own full-screen chat rail.
+  const isMobileSurface = useIsMobile();
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     if (typeof window === "undefined") return false;
     try {
@@ -2093,44 +2157,13 @@ export function Layout({
               (candidate) => candidate.id === tab.appId,
             ) ?? null)
           : null;
-        if (!registration) {
-          return (
-            <ChatFirstAppPane
-              app={null}
-              status={chatFirstAppsQuery.isLoading ? "loading" : "unresolved"}
-              renderEmbed={() => null}
-              copy={chatFirstCopy}
-            />
-          );
-        }
-        const embedPath = tab.path ?? registration.path ?? "/";
-        if (!embedPath.startsWith("/")) {
-          return (
-            <ChatFirstAppPane
-              app={{
-                id: registration.id,
-                name: registration.name ?? registration.id,
-              }}
-              status="error"
-              errorMessage={chatFirstCopy("appUnavailable")}
-              renderEmbed={() => null}
-              copy={chatFirstCopy}
-            />
-          );
-        }
-        return (
-          <WorkspaceAppFrame
-            app={{
-              id: registration.id,
-              name: registration.name ?? registration.id,
-              path: registration.path,
-              url: registration.url,
-            }}
-            embedPath={embedPath}
-            chatSidebar
-            copy={chatFirstCopy}
-          />
-        );
+        return renderChatFirstAppSurfaceTab({
+          registration,
+          embedPath: tab.path ?? registration?.path ?? "/",
+          loading: chatFirstAppsQuery.isLoading,
+          isMobileSurface,
+          copy: chatFirstCopy,
+        });
       }
       if (tab.kind === "browser" && tab.url) {
         return (
@@ -2203,6 +2236,7 @@ export function Layout({
       chatFirstSurfaceTabs.activeTabId,
       chatFirstAppRegistrations,
       closeChatFirstSurfaceTab,
+      isMobileSurface,
       renderChatFirstWatchChat,
     ],
   );
@@ -2270,7 +2304,7 @@ export function Layout({
         <ChatFirstSurfacePanelToggle
           open={chatFirstSurfacePanel.open}
           onToggle={chatFirstSurfacePanel.toggle}
-          className="absolute right-3 top-2 z-[4]"
+          className={CHAT_FIRST_SURFACE_PANEL_TOGGLE_CLASS_NAME}
         />
       ) : null}
       {isChatRoute && chatFirstMode && chatFirstNotice ? (
@@ -2463,7 +2497,6 @@ export function Layout({
               }}
               onChatFirstAppsRetry={() => void chatFirstAppsQuery.refetch()}
               collapsible
-              reserveEnvironmentBadgeSpace
               onCollapsedChange={setSidebarCollapsed}
             />
           </aside>
@@ -2485,7 +2518,6 @@ export function Layout({
                   chatFirstMode={chatFirstMode}
                   chatFirstEmbedded={chatFirstEmbedded}
                   collapsed={false}
-                  reserveEnvironmentBadgeSpace
                   chatFirstAppLayout={chatFirstAppLayout}
                   onChatFirstAppLayoutChange={persistChatFirstAppLayout}
                   chatFirstApps={chatFirstAppItems}

package/src/components/workspace-app-card.tsx

@@ -85,6 +85,22 @@ function deferWorkspaceAppOverlayOpen(
   }
 }
 
+// The settings menu's own DropdownMenuContent restores focus to its trigger
+// once its FocusScope unmounts, independent of the requestAnimationFrame
+// above. If that restore lands after the deferred overlay's DismissableLayer
+// has already mounted, the resulting focusin event reads as an outside
+// interaction and immediately dismisses the overlay we just opened. Skip the
+// default restore whenever we're mid-handoff to a sibling overlay — mirrors
+// AgentPanel's identical guard (consumeAgentPanelOverlayFocusRestore).
+function consumeWorkspaceAppOverlayFocusRestore(
+  pendingOverlayRef: { current: boolean },
+  event: { preventDefault: () => void },
+): void {
+  if (!pendingOverlayRef.current) return;
+  pendingOverlayRef.current = false;
+  event.preventDefault();
+}
+
 export function WorkspaceAppCard({
   app,
   className,
@@ -413,6 +429,7 @@ function WorkspaceAppSettings({
   const [shareOpen, setShareOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const settingsTriggerRef = useRef<HTMLButtonElement>(null);
+  const pendingShareOverlayRef = useRef(false);
 
   const handleShareOpenChange = (open: boolean) => {
     setShareOpen(open);
@@ -452,6 +469,12 @@ function WorkspaceAppSettings({
         <DropdownMenuContent
           align="end"
           className={cn(APP_ACTION_MENU_CONTENT_CLASS, "min-w-max")}
+          onCloseAutoFocus={(event) =>
+            consumeWorkspaceAppOverlayFocusRestore(
+              pendingShareOverlayRef,
+              event,
+            )
+          }
         >
           <DropdownMenuItem onSelect={onEdit}>
             <IconEdit size={14} aria-hidden="true" />
@@ -462,7 +485,10 @@ function WorkspaceAppSettings({
               onSelect={(event) =>
                 deferWorkspaceAppOverlayOpen(
                   event,
-                  () => setSettingsOpen(false),
+                  () => {
+                    pendingShareOverlayRef.current = true;
+                    setSettingsOpen(false);
+                  },
                   () => setShareOpen(true),
                 )
               }

package/src/lib/catch-all-target.spec.ts

@@ -12,6 +12,14 @@ describe("resolveCatchAllTarget", () => {
     ).toBe("/todo");
   });
 
+  it("keeps the legacy mounted path for normalized agent IDs", () => {
+    expect(
+      resolveCatchAllTarget("clips", {
+        workspaceApps: [{ id: "clips", path: "/videos" }],
+      }),
+    ).toBe("/videos");
+  });
+
   it("falls back to the built-in template URL when no workspace manifest exists", () => {
     expect(
       resolveCatchAllTarget("forms", {

package/src/lib/catch-all-target.ts

@@ -116,9 +116,11 @@ export async function resolveServerCatchAllTarget(
   appId: string,
 ): Promise<string | null> {
   if (!import.meta.env.SSR) return null;
-  const { getBuiltinAgents, loadWorkspaceAppsManifest } =
+  const { getBuiltinAgents, loadWorkspaceAppsManifest, normalizeAgentId } =
     await import("@agent-native/core/server/agent-discovery");
-  return resolveCatchAllTarget(appId, {
+  // Dispatch receives legacy route segments before discovery normalizes the
+  // manifest IDs, so normalize the lookup key at this boundary as well.
+  return resolveCatchAllTarget(normalizeAgentId(appId), {
     workspaceApps: loadWorkspaceAppsManifest(),
     builtinAgents: getBuiltinAgents("dispatch"),
   });