@agent-native/dispatch 0.31.12 → 0.31.14

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

@@ -220,6 +220,81 @@ describe("Dispatch NavContent", () => {
     expect(lists[0].querySelector("a")?.className).toContain("size-9");
   });
 
+  it.each([
+    { mode: "standard", chatFirstMode: false, collapsed: false },
+    { mode: "standard", chatFirstMode: false, collapsed: true },
+    { 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",
+    async ({ mode, chatFirstMode, collapsed }) => {
+      await act(async () => {
+        root.render(
+          <MemoryRouter
+            initialEntries={[chatFirstMode ? "/chat" : "/overview"]}
+          >
+            <TooltipProvider>
+              <NavContent
+                chatFirstMode={chatFirstMode}
+                collapsed={collapsed}
+                reserveEnvironmentBadgeSpace
+              />
+            </TooltipProvider>
+          </MemoryRouter>,
+        );
+      });
+
+      const footer = container.querySelector(
+        `[data-dispatch-sidebar-footer="${mode}"]`,
+      );
+      const adminLink = footer?.querySelector('a[href="/admin"]');
+      const settingsLink = footer?.querySelector('a[href="/settings"]');
+      const organization = [...(footer?.querySelectorAll("div") ?? [])].find(
+        (element) => element.textContent?.trim() === "Organization",
+      );
+      const footerActions = footer?.querySelector(
+        "[data-sidebar-footer-actions]",
+      );
+
+      expect(footer?.className).toContain("mt-auto");
+      expect(footer?.className).toContain("shrink-0");
+      expect(footer?.className).toContain("pb-10");
+      if (mode === "standard") {
+        expect(footer?.closest(".overflow-y-auto")).toBeNull();
+      }
+      expect(adminLink).not.toBeNull();
+      expect(settingsLink).not.toBeNull();
+      expect(organization).toBeDefined();
+      expect(footerActions).not.toBeNull();
+      expect(adminLink!.compareDocumentPosition(settingsLink!)).toBe(
+        Node.DOCUMENT_POSITION_FOLLOWING,
+      );
+      expect(settingsLink!.compareDocumentPosition(organization!)).toBe(
+        Node.DOCUMENT_POSITION_FOLLOWING,
+      );
+      expect(organization!.compareDocumentPosition(footerActions!)).toBe(
+        Node.DOCUMENT_POSITION_FOLLOWING,
+      );
+    },
+  );
+
+  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(

package/src/components/layout/Layout.tsx

@@ -953,6 +953,7 @@ export function NavContent({
   chatFirstEmbedded = false,
   collapsed = false,
   collapsible = false,
+  reserveEnvironmentBadgeSpace = false,
   onCollapsedChange,
   chatFirstAppLayout,
   onChatFirstAppLayoutChange,
@@ -971,6 +972,7 @@ export function NavContent({
   chatFirstEmbedded?: boolean;
   collapsed?: boolean;
   collapsible?: boolean;
+  reserveEnvironmentBadgeSpace?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
   chatFirstAppLayout?: ChatFirstAppLayoutPreference;
   onChatFirstAppLayoutChange?: (layout: ChatFirstAppLayoutPreference) => void;
@@ -1298,35 +1300,30 @@ export function NavContent({
           />
         </div>
       ) : null}
+      {!chatFirstMode ? (
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          <nav className={cn("py-2", collapsed ? "px-1.5" : "px-2")}>
+            <ul
+              className={cn(
+                collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5",
+              )}
+            >
+              {primaryNavItems.map(renderNavItem)}
+            </ul>
+          </nav>
+        </div>
+      ) : null}
       <div
         className={cn(
-          "flex min-h-0 flex-1 flex-col overflow-y-auto",
-          chatFirstMode && "hidden",
+          "mt-auto shrink-0",
+          reserveEnvironmentBadgeSpace && "pb-10",
         )}
+        data-dispatch-sidebar-footer={chatFirstMode ? "chat-first" : "standard"}
       >
-        <nav className={cn("py-2", collapsed ? "px-1.5" : "px-2")}>
-          <ul
-            className={cn(
-              collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5",
-            )}
-          >
-            {primaryNavItems.map(renderNavItem)}
-          </ul>
-        </nav>
-
-        <div className="mt-auto shrink-0">
-          {bottomNavigation}
-          {organizationPicker}
-        </div>
+        {bottomNavigation}
+        {organizationPicker}
         {sidebarFooterActions}
       </div>
-      {chatFirstMode ? (
-        <div className="mt-auto shrink-0">
-          {bottomNavigation}
-          {organizationPicker}
-          {sidebarFooterActions}
-        </div>
-      ) : null}
     </>
   );
 }
@@ -2466,6 +2463,7 @@ export function Layout({
               }}
               onChatFirstAppsRetry={() => void chatFirstAppsQuery.refetch()}
               collapsible
+              reserveEnvironmentBadgeSpace
               onCollapsedChange={setSidebarCollapsed}
             />
           </aside>
@@ -2487,6 +2485,7 @@ export function Layout({
                   chatFirstMode={chatFirstMode}
                   chatFirstEmbedded={chatFirstEmbedded}
                   collapsed={false}
+                  reserveEnvironmentBadgeSpace
                   chatFirstAppLayout={chatFirstAppLayout}
                   onChatFirstAppLayoutChange={persistChatFirstAppLayout}
                   chatFirstApps={chatFirstAppItems}

package/src/components/other-apps-section.spec.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  filterOtherAppEntries,
+  mergeOtherAppEntries,
+  otherAppEntryMatchesQuery,
+} from "./other-apps-section.js";
+
+describe("other app search", () => {
+  const entries = mergeOtherAppEntries({
+    templates: {
+      templates: [
+        {
+          id: "brain",
+          name: "Brain",
+          description: "Search cited company knowledge",
+          template: "brain",
+          liveUrl: "https://brain.agent-native.com",
+        },
+      ],
+    },
+    connectedApps: [
+      {
+        id: "slides",
+        name: "Slides",
+        description: "Create presentations",
+        url: "https://slides.agent-native.com",
+      },
+    ],
+    workspaceApps: [],
+  });
+
+  it("matches linked and curated apps by name or description", () => {
+    expect(
+      entries.filter((entry) => otherAppEntryMatchesQuery(entry, "brain")),
+    ).toHaveLength(1);
+    expect(
+      entries.filter((entry) =>
+        otherAppEntryMatchesQuery(entry, "presentations"),
+      ),
+    ).toHaveLength(1);
+  });
+
+  it("filters the Other apps entries used by the page search", () => {
+    expect(filterOtherAppEntries(entries, "brain")).toEqual([
+      expect.objectContaining({ kind: "template" }),
+    ]);
+  });
+});

package/src/components/other-apps-section.tsx

@@ -19,7 +19,7 @@ import {
   type WorkspaceTemplateLabels,
 } from "./workspace-template-card";
 
-type OtherAppEntry =
+export type OtherAppEntry =
   | { kind: "template"; template: CuratedWorkspaceTemplate }
   | { kind: "connected"; app: ConnectedAppSummary };
 
@@ -36,6 +36,26 @@ function getTemplateItems(
   return Array.isArray(result) ? result : result.templates;
 }
 
+export function otherAppEntryMatchesQuery(
+  entry: OtherAppEntry,
+  query: string,
+): boolean {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return true;
+  const searchable =
+    entry.kind === "template"
+      ? `${entry.template.name} ${entry.template.description ?? ""}`
+      : `${entry.app.name} ${entry.app.description ?? ""}`;
+  return searchable.toLowerCase().includes(normalizedQuery);
+}
+
+export function filterOtherAppEntries(
+  entries: OtherAppEntry[],
+  query: string,
+): OtherAppEntry[] {
+  return entries.filter((entry) => otherAppEntryMatchesQuery(entry, query));
+}
+
 export function mergeOtherAppEntries({
   templates,
   connectedApps,
@@ -86,6 +106,7 @@ export function OtherAppsSection({
   onRetryConnectedApps,
   templateLabels,
   onRemixSuccess,
+  query = "",
   heading = "Other apps",
   embeddedInList = false,
   className,
@@ -104,16 +125,20 @@ export function OtherAppsSection({
     result: unknown,
     template: CuratedWorkspaceTemplate,
   ) => void;
+  query?: string;
   heading?: string | null;
   embeddedInList?: boolean;
   className?: string;
 }) {
   const t = useT();
-  const entries = mergeOtherAppEntries({
-    templates,
-    connectedApps,
-    workspaceApps,
-  });
+  const entries = filterOtherAppEntries(
+    mergeOtherAppEntries({
+      templates,
+      connectedApps,
+      workspaceApps,
+    }),
+    query,
+  );
   const isLoading = templatesLoading || connectedAppsLoading;
   const hasError = Boolean(templatesError || connectedAppsError);
 

package/src/components/workspace-app-host.spec.tsx

@@ -183,6 +183,9 @@ describe("WorkspaceAppKeepAlive", () => {
     clientState.actionQueryParams.length = 0;
     clientState.actionQueryOptions.length = 0;
     clientState.workspaceApps = null;
+    clientState.legacyMutateAsync.mockImplementation(async () => ({
+      startUrl: "about:blank",
+    }));
     clientState.legacyMutateAsync.mockClear();
     clientState.legacyMutateError = null;
     clientState.legacyErrorMutateAsync.mockReset();
@@ -469,6 +472,101 @@ describe("WorkspaceAppKeepAlive", () => {
     );
   });
 
+  it("reports trusted child routes to the standalone Dispatch host", async () => {
+    clientState.legacyMutateAsync.mockResolvedValue({
+      startUrl: "https://design.example.test/_agent-native/embed",
+    });
+    clientState.suppressFrameLoad = true;
+    const onChildRouteChange = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <WorkspaceAppFrame
+          app={{
+            id: "design",
+            name: "Design",
+            path: "/",
+            url: "https://design.example.test",
+          }}
+          onChildRouteChange={onChildRouteChange}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const iframe = container.querySelector<HTMLIFrameElement>("iframe");
+    expect(iframe).not.toBeNull();
+    if (!iframe) throw new Error("Workspace app iframe was not rendered");
+
+    const frameWindow = iframe.contentWindow;
+    expect(frameWindow).not.toBeNull();
+    if (!frameWindow) throw new Error("Workspace app frame window is missing");
+
+    await act(async () => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: {
+            type: "agent-native:workspace-app-route",
+            path: "/foobar?mode=edit#canvas",
+          },
+          origin: "https://design.example.test",
+          source: frameWindow,
+        }),
+      );
+      await Promise.resolve();
+    });
+
+    expect(onChildRouteChange).toHaveBeenCalledWith(
+      "/apps/design/foobar?mode=edit#canvas",
+    );
+
+    await act(async () => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: {
+            type: "agent-native:workspace-app-route",
+            path: "/ignored",
+          },
+          origin: "https://evil.example.test",
+          source: frameWindow,
+        }),
+      );
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: {
+            type: "agent-native:workspace-app-route",
+            path: "/ignored",
+          },
+          origin: "https://design.example.test",
+          source: {} as Window,
+        }),
+      );
+      await Promise.resolve();
+    });
+
+    expect(onChildRouteChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("seeds a standalone iframe from its initial Dispatch route", async () => {
+    await act(async () => {
+      root.render(
+        <WorkspaceAppFrame
+          app={{ id: "design", name: "Design", path: "/design" }}
+          initialPath="/foobar?mode=edit#canvas"
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(clientState.legacyMutateAsync).toHaveBeenCalledWith({
+      app: "design",
+      path: "/foobar?mode=edit#canvas",
+      chrome: "minimal",
+    });
+  });
+
   it("clears the embed error after a direct fallback iframe loads", async () => {
     clientState.legacyMutateError = new Error("Restore request failed");
     clientState.legacyErrorMutateAsync.mockRejectedValue(

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

@@ -11,6 +11,7 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import { AGENT_NATIVE_WORKSPACE_APP_ROUTE_MESSAGE_TYPE } from "@agent-native/core/client/navigation";
 import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
 import {
   IconAlertTriangle,
@@ -34,6 +35,7 @@ import {
   isWorkspaceSsoApp,
   navigateToWorkspaceApp,
   shouldOpenWorkspaceAppInTopWindow,
+  workspaceAppRouteForChildPath,
   workspaceAppDirectHref,
   workspaceAppEmbedTarget,
   workspaceAppHref,
@@ -251,6 +253,10 @@ interface WorkspaceAppFrameProps {
   navigateToTopWindow?: (href: string) => boolean | void;
   /** Chat-first app tabs use their own route while standalone hosts use app metadata. */
   embedPath?: string;
+  /** Standalone Dispatch routes seed the iframe once from their initial suffix. */
+  initialPath?: string;
+  /** Standalone Dispatch hosts mirror child route changes into the shell URL. */
+  onChildRouteChange?: (path: string) => void;
   /** Chat-first app surfaces own the parent chat rail around the iframe. */
   chatSidebar?: boolean;
   copy?: ChatFirstCopy;
@@ -260,6 +266,8 @@ export function WorkspaceAppFrame({
   app,
   navigateToTopWindow = navigateToWorkspaceApp,
   embedPath,
+  initialPath,
+  onChildRouteChange,
   chatSidebar = false,
   copy = defaultChatFirstCopy,
 }: WorkspaceAppFrameProps) {
@@ -315,27 +323,36 @@ export function WorkspaceAppFrame({
         embedPath,
       );
     }
+    if (initialPath !== undefined) {
+      return workspaceAppDirectHref(
+        { path: app.path, url: app.url },
+        initialPath,
+      );
+    }
 
     const target = workspaceAppEmbedTarget({
       path: app.path ?? "",
       url: app.url,
     });
     return target.url ?? target.path ?? null;
-  }, [app.path, app.url, embedPath]);
+  }, [app.path, app.url, embedPath, initialPath]);
   const openInTopWindow = shouldOpenWorkspaceAppInTopWindow();
-  const topWindowSsoAttemptKey = `${app.id}\u0000${app.path ?? ""}\u0000${app.url ?? ""}\u0000${embedPath ?? ""}\u0000${embedAttempt}`;
+  const topWindowSsoAttemptKey = `${app.id}\u0000${app.path ?? ""}\u0000${app.url ?? ""}\u0000${embedPath ?? ""}\u0000${initialPath ?? ""}\u0000${embedAttempt}`;
   const topWindowSsoAttemptedRef = useRef<string | null>(null);
   const embedInput = useMemo<EmbedSessionInput | null>(() => {
     if (embedPath !== undefined) {
       return buildChatFirstEmbedSessionInput(app.id, embedPath);
     }
+    if (initialPath !== undefined) {
+      return buildChatFirstEmbedSessionInput(app.id, initialPath);
+    }
     if (!appHref) return null;
     return {
       app: app.id,
       ...workspaceAppEmbedTarget({ path: app.path ?? "", url: app.url }),
       chrome: "minimal",
     };
-  }, [app.id, app.path, app.url, appHref, embedPath]);
+  }, [app.id, app.path, app.url, appHref, embedPath, initialPath]);
 
   useEffect(() => {
     if (openInTopWindow && useWorkspaceSso && embedInput) {
@@ -425,7 +442,7 @@ export function WorkspaceAppFrame({
         setEmbedUrl(
           workspaceAppDirectHref(
             { path: app.path ?? "", url: app.url },
-            embedPath ?? "/",
+            initialPath ?? embedPath ?? "/",
           ),
         );
         setEmbedError(error);
@@ -441,6 +458,7 @@ export function WorkspaceAppFrame({
     createWorkspaceSsoEmbedSession.mutateAsync,
     embedInput,
     embedPath,
+    initialPath,
     embedAttempt,
     openInTopWindow,
     navigateToTopWindow,
@@ -464,6 +482,48 @@ export function WorkspaceAppFrame({
       window.removeEventListener("message", handleEmbedSessionExpired);
   }, [embedUrl]);
 
+  useEffect(() => {
+    if (!onChildRouteChange || !embedUrl) return;
+
+    const frame = embedFrameRef.current;
+    if (!frame) return;
+
+    let expectedOrigin: string;
+    try {
+      expectedOrigin = new URL(embedUrl, window.location.href).origin;
+    } catch {
+      return;
+    }
+
+    const handleWorkspaceAppRoute = (event: MessageEvent) => {
+      if (
+        event.source !== frame.contentWindow ||
+        event.origin !== expectedOrigin
+      ) {
+        return;
+      }
+      const message = event.data as {
+        type?: unknown;
+        path?: unknown;
+      } | null;
+      if (
+        message?.type !== AGENT_NATIVE_WORKSPACE_APP_ROUTE_MESSAGE_TYPE ||
+        typeof message.path !== "string"
+      ) {
+        return;
+      }
+
+      const route = workspaceAppRouteForChildPath(
+        { id: app.id, path: app.path ?? "", url: app.url },
+        message.path,
+      );
+      if (route) onChildRouteChange(route);
+    };
+
+    window.addEventListener("message", handleWorkspaceAppRoute);
+    return () => window.removeEventListener("message", handleWorkspaceAppRoute);
+  }, [app.id, app.path, app.url, embedUrl, onChildRouteChange]);
+
   useEffect(() => {
     postThemeToFrame();
   }, [embedUrl, postThemeToFrame]);
@@ -514,9 +574,13 @@ export function WorkspaceAppFrame({
 export function WorkspaceAppHost({
   appId,
   navigateToTopWindow = navigateToWorkspaceApp,
+  initialPath,
+  onChildRouteChange,
 }: {
   appId?: string;
   navigateToTopWindow?: (href: string) => boolean | void;
+  initialPath?: string;
+  onChildRouteChange?: (path: string) => void;
 }) {
   const t = useT();
   const workspaceAppsQuery = useActionQuery<WorkspaceAppSummary[]>(
@@ -702,6 +766,8 @@ export function WorkspaceAppHost({
         <WorkspaceAppFrame
           app={app}
           navigateToTopWindow={navigateToTopWindow}
+          initialPath={initialPath}
+          onChildRouteChange={onChildRouteChange}
         />
       </div>
     </div>

package/src/lib/workspace-apps.spec.ts

@@ -8,6 +8,8 @@ import {
   isWorkspaceSsoApp,
   mergeChatFirstWorkspaceApps,
   workspaceAppIdFromRoute,
+  workspaceAppInitialPathFromSplat,
+  workspaceAppRouteForChildPath,
   workspaceAppDirectHref,
   workspaceAppRoute,
 } from "./workspace-apps";
@@ -29,6 +31,44 @@ describe("workspace app routes", () => {
     expect(workspaceAppIdFromRoute("/apps/mail/inbox")).toBe("mail");
   });
 
+  it("preserves the initial app suffix for a standalone deep link", () => {
+    expect(
+      workspaceAppInitialPathFromSplat("inbox", "?view=unread", "#top"),
+    ).toBe("/inbox?view=unread#top");
+    expect(workspaceAppInitialPathFromSplat(undefined, "", "")).toBeUndefined();
+  });
+
+  it("maps child routes to shareable Dispatch app routes", () => {
+    expect(
+      workspaceAppRouteForChildPath(
+        { id: "design", path: "/", url: "https://design.example.test" },
+        "/foobar?mode=edit#canvas",
+      ),
+    ).toBe("/apps/design/foobar?mode=edit#canvas");
+    expect(
+      workspaceAppRouteForChildPath(
+        {
+          id: "internal-design",
+          path: "/design",
+          url: "https://workspace.example.test/design",
+        },
+        "/design/foobar",
+      ),
+    ).toBe("/apps/internal-design/foobar");
+    expect(
+      workspaceAppRouteForChildPath(
+        { id: "design", path: "/", url: "https://design.example.test" },
+        "//evil.example/route",
+      ),
+    ).toBeNull();
+    expect(
+      workspaceAppDirectHref(
+        { path: "/", url: "https://design.example.test" },
+        "/foobar?mode=edit#canvas",
+      ),
+    ).toBe("https://design.example.test/foobar?mode=edit#canvas");
+  });
+
   it("identifies Dispatch regardless of casing or surrounding whitespace", () => {
     expect(isDispatchWorkspaceAppId(" Dispatch ")).toBe(true);
     expect(isDispatchWorkspaceAppId("dispatch-tools")).toBe(false);