@agent-native/dispatch 0.40.40 → 0.40.41-beta-dispatch-embed-01a15dc9-20261027050558

package/src/components/layout/Layout.tsx

@@ -68,13 +68,12 @@ import {
   AppSidebarHeader,
   openCommandMenu,
 } from "@agent-native/toolkit/app/shared";
+import { ChatHistoryMenuItem } from "@agent-native/toolkit/chat-history";
 import { writeClipboardText } from "@agent-native/toolkit/clipboard";
 import {
   IconApps,
   IconBrandSlack,
   IconBrandTelegram,
-  IconCopy,
-  IconEye,
   IconHierarchy2,
   IconMessageQuestion,
   IconBroadcast,
@@ -833,14 +832,10 @@ function DispatchChatsSection({
             unpin: t("agentChat.contextXray.unpin"),
             delete: t("extensions.delete"),
           }}
-          renderAdditionalRowActions={(item, closeMenu) => (
+          renderAdditionalRowActions={(item) => (
             <>
-              <button
-                type="button"
-                role="menuitem"
-                className="an-chat-history-row__menu-item"
-                onClick={() => {
-                  closeMenu();
+              <ChatHistoryMenuItem
+                onSelect={() => {
                   void writeClipboardText(item.id).then((copied) => {
                     toast[copied ? "success" : "error"](
                       copied
@@ -850,16 +845,11 @@ function DispatchChatsSection({
                   });
                 }}
               >
-                <IconCopy size={13} strokeWidth={1.8} />
-                <span>{chatFirstCopy("copySessionId")}</span>
-              </button>
+                {chatFirstCopy("copySessionId")}
+              </ChatHistoryMenuItem>
               {!chatFirstEmbedded ? (
-                <button
-                  type="button"
-                  role="menuitem"
-                  className="an-chat-history-row__menu-item"
-                  onClick={() => {
-                    closeMenu();
+                <ChatHistoryMenuItem
+                  onSelect={() => {
                     emitChatFirstSessionWatch({
                       sessionId: item.id,
                       title: item.titleText,
@@ -868,9 +858,8 @@ function DispatchChatsSection({
                     });
                   }}
                 >
-                  <IconEye size={13} strokeWidth={1.8} />
-                  <span>{chatFirstCopy("watchSession")}</span>
-                </button>
+                  {chatFirstCopy("watchSession")}
+                </ChatHistoryMenuItem>
               ) : null}
             </>
           )}
@@ -901,14 +890,10 @@ function DispatchChatsSection({
             unpin: t("agentChat.contextXray.unpin"),
             delete: t("extensions.delete"),
           }}
-          renderAdditionalRowActions={(item, closeMenu) => (
+          renderAdditionalRowActions={(item) => (
             <>
-              <button
-                type="button"
-                role="menuitem"
-                className="an-chat-history-row__menu-item"
-                onClick={() => {
-                  closeMenu();
+              <ChatHistoryMenuItem
+                onSelect={() => {
                   void writeClipboardText(item.id).then((copied) => {
                     toast[copied ? "success" : "error"](
                       copied
@@ -918,16 +903,11 @@ function DispatchChatsSection({
                   });
                 }}
               >
-                <IconCopy size={13} strokeWidth={1.8} />
-                <span>{chatFirstCopy("copySessionId")}</span>
-              </button>
+                {chatFirstCopy("copySessionId")}
+              </ChatHistoryMenuItem>
               {chatFirstMode && !chatFirstEmbedded ? (
-                <button
-                  type="button"
-                  role="menuitem"
-                  className="an-chat-history-row__menu-item"
-                  onClick={() => {
-                    closeMenu();
+                <ChatHistoryMenuItem
+                  onSelect={() => {
                     emitChatFirstSessionWatch({
                       sessionId: item.id,
                       title: item.titleText,
@@ -936,9 +916,8 @@ function DispatchChatsSection({
                     });
                   }}
                 >
-                  <IconEye size={13} strokeWidth={1.8} />
-                  <span>{chatFirstCopy("watchSession")}</span>
-                </button>
+                  {chatFirstCopy("watchSession")}
+                </ChatHistoryMenuItem>
               ) : null}
             </>
           )}

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

@@ -62,6 +62,7 @@ vi.mock("@agent-native/toolkit/app/chat/chat-first/app-pane", () => ({
     status: string;
   }) => (
     <div
+      data-chat-first-app-embed-url={embedUrl ?? ""}
       data-chat-first-app-error={errorMessage ?? ""}
       data-chat-first-app-status={status}
     >
@@ -381,6 +382,92 @@ describe("WorkspaceAppKeepAlive", () => {
     });
   });
 
+  it.each([
+    ["coach", "/", "/"],
+    ["onboarding", "/accounts", "/accounts"],
+  ])(
+    "embeds %s by its own home path when its registry url is this Dispatch's page",
+    async (id, homePath, expectedPath) => {
+      await act(async () => {
+        root.render(
+          <WorkspaceAppFrame
+            app={{
+              id,
+              name: id,
+              path: `/${id}`,
+              homePath,
+              url: `${window.location.origin}/dispatch/apps/${id}`,
+            }}
+          />,
+        );
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(clientState.legacyMutateAsync).toHaveBeenCalledWith({
+        app: id,
+        path: expectedPath,
+        chrome: "minimal",
+      });
+    },
+  );
+
+  it("never falls back to framing this Dispatch's own page for the app", async () => {
+    clientState.legacyMutateError = new Error("Embed failed");
+    clientState.legacyErrorMutateAsync.mockRejectedValue(
+      clientState.legacyMutateError,
+    );
+    clientState.suppressFrameLoad = true;
+
+    await act(async () => {
+      root.render(
+        <WorkspaceAppFrame
+          app={{
+            id: "onboarding",
+            name: "Onboarding",
+            path: "/onboarding",
+            homePath: "/accounts",
+            url: `${window.location.origin}/dispatch/apps/onboarding`,
+          }}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(
+      container
+        .querySelector("[data-chat-first-app-embed-url]")
+        ?.getAttribute("data-chat-first-app-embed-url"),
+    ).toBe("/onboarding/accounts");
+  });
+
+  it("keeps a Dispatch page url on another origin as the app url", async () => {
+    const url = "https://gateway.example.test/dispatch/apps/coach";
+
+    await act(async () => {
+      root.render(
+        <WorkspaceAppFrame
+          app={{
+            id: "coach",
+            name: "Coach",
+            path: "/coach",
+            homePath: "/",
+            url,
+          }}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(clientState.legacyMutateAsync).toHaveBeenCalledWith({
+      app: "coach",
+      url,
+      chrome: "minimal",
+    });
+  });
+
   it("uses the granted-app session action for mounted apps outside the SSO registry", async () => {
     clientState.workspaceSsoEnabled = true;
 
@@ -549,7 +636,7 @@ describe("WorkspaceAppKeepAlive", () => {
     });
 
     expect(onChildRouteChange).toHaveBeenCalledWith(
-      "/apps/design/foobar?mode=edit#canvas",
+      "/apps/design?__workspace_app_path=%2Ffoobar%3Fmode%3Dedit%23canvas",
     );
 
     await act(async () => {

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

@@ -28,6 +28,7 @@ import { Link } from "react-router";
 
 import { isEmbedSessionExpiredMessage } from "../lib/embed-session-recovery";
 import {
+  isWorkspaceAppHostPageUrl,
   isWorkspaceSsoApp,
   isDispatchWorkspaceAppId,
   navigateToWorkspaceApp,
@@ -35,6 +36,7 @@ import {
   workspaceAppRouteForChildPath,
   workspaceAppDirectHref,
   workspaceAppHref,
+  workspaceAppTargetPath,
   type WorkspaceAppSummary,
 } from "../lib/workspace-apps";
 import { DISPATCH_WORKSPACE_SSO_FLAG } from "../shared/feature-flags";
@@ -284,30 +286,35 @@ export function WorkspaceAppFrame({
     skipActionQueryInvalidation: true,
     timeoutMs: EMBED_SESSION_TIMEOUT_MS,
   });
+  const isHostPageUrl = isWorkspaceAppHostPageUrl(
+    app,
+    typeof window === "undefined" ? undefined : window.location.origin,
+  );
+  const appUrl = isHostPageUrl ? null : (app.url ?? null);
   const appHref = workspaceAppHref({
     id: app.id,
     name: app.name,
     path: app.path ?? "",
     homePath: app.homePath ?? undefined,
-    url: app.url,
+    url: appUrl,
     isDispatch: app.isDispatch ?? isDispatchWorkspaceAppId(app.id),
   });
   const topWindowHref = useMemo(() => {
     if (embedPath !== undefined) {
       return workspaceAppDirectHref(
-        { path: app.path, url: app.url },
+        { path: app.path ?? null, url: appUrl },
         embedPath,
       );
     }
     if (initialPath !== undefined) {
       return workspaceAppDirectHref(
-        { path: app.path, url: app.url },
+        { path: app.path ?? null, url: appUrl },
         initialPath,
       );
     }
 
     return appHref;
-  }, [appHref, embedPath, initialPath]);
+  }, [app.path, appHref, appUrl, embedPath, initialPath]);
   const openInTopWindow = shouldOpenWorkspaceAppInTopWindow();
   const topWindowSsoAttemptKey = `${app.id}\u0000${app.path ?? ""}\u0000${app.url ?? ""}\u0000${embedPath ?? ""}\u0000${initialPath ?? ""}\u0000${embedAttempt}`;
   const topWindowSsoAttemptedRef = useRef<string | null>(null);
@@ -319,12 +326,26 @@ export function WorkspaceAppFrame({
       return buildChatFirstEmbedSessionInput(app.id, initialPath);
     }
     if (!appHref) return null;
+    if (isHostPageUrl) {
+      return buildChatFirstEmbedSessionInput(
+        app.id,
+        workspaceAppTargetPath({ homePath: app.homePath ?? null }),
+      );
+    }
     return {
       app: app.id,
-      ...(app.url?.trim() ? { url: appHref } : { path: appHref }),
+      ...(appUrl?.trim() ? { url: appHref } : { path: appHref }),
       chrome: "minimal",
     };
-  }, [app.id, app.path, app.url, appHref, embedPath, initialPath]);
+  }, [
+    app.homePath,
+    app.id,
+    appHref,
+    appUrl,
+    embedPath,
+    initialPath,
+    isHostPageUrl,
+  ]);
 
   useEffect(() => {
     if (openInTopWindow && useWorkspaceSso && embedInput) {
@@ -410,7 +431,7 @@ export function WorkspaceAppFrame({
         const fallbackHref =
           initialPath !== undefined || embedPath !== undefined
             ? workspaceAppDirectHref(
-                { path: app.path ?? "", url: app.url },
+                { path: app.path ?? "", url: appUrl },
                 initialPath ?? embedPath ?? "/",
               )
             : appHref;
@@ -485,7 +506,7 @@ export function WorkspaceAppFrame({
       }
 
       const route = workspaceAppRouteForChildPath(
-        { id: app.id, path: app.path ?? "", url: app.url },
+        { id: app.id, path: app.path ?? "", url: appUrl },
         message.path,
       );
       if (route) onChildRouteChange(route);
@@ -493,7 +514,7 @@ export function WorkspaceAppFrame({
 
     window.addEventListener("message", handleWorkspaceAppRoute);
     return () => window.removeEventListener("message", handleWorkspaceAppRoute);
-  }, [app.id, app.path, app.url, embedUrl, onChildRouteChange]);
+  }, [app.id, app.path, appUrl, embedUrl, onChildRouteChange]);
 
   useEffect(() => {
     postThemeToFrame();

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

@@ -6,6 +6,7 @@ import {
   isDefaultWorkspaceAppHiddenId,
   isDispatchWorkspaceAppId,
   isPathMountedWorkspaceApp,
+  isWorkspaceAppHostPageUrl,
   isWorkspaceAppVisibleInDefaultLaunchers,
   isWorkspaceSsoApp,
   mergeChatFirstWorkspaceApps,
@@ -148,6 +149,38 @@ describe("workspace app routes", () => {
     expect(workspaceAppIdFromRoute("/apps/mail/inbox")).toBe("mail");
   });
 
+  it("recognizes the Dispatch page that hosts an app only on Dispatch's own origin", () => {
+    const origin = "https://beta.agent-workspace.builder.io";
+    const hostPage = { id: "coach", url: `${origin}/dispatch/apps/coach` };
+
+    expect(isWorkspaceAppHostPageUrl(hostPage, origin)).toBe(true);
+    expect(
+      isWorkspaceAppHostPageUrl(
+        { id: "Coach", url: `${origin}/dispatch/apps/coach/` },
+        origin,
+      ),
+    ).toBe(true);
+    expect(
+      isWorkspaceAppHostPageUrl(hostPage, "https://beta.dispatch.example.test"),
+    ).toBe(false);
+    expect(isWorkspaceAppHostPageUrl(hostPage, undefined)).toBe(false);
+    expect(
+      isWorkspaceAppHostPageUrl(
+        { id: "coach", url: `${origin}/coach` },
+        origin,
+      ),
+    ).toBe(false);
+    expect(
+      isWorkspaceAppHostPageUrl(
+        { id: "coach", url: `${origin}/dispatch/apps/mycoach` },
+        origin,
+      ),
+    ).toBe(false);
+    expect(isWorkspaceAppHostPageUrl({ id: "coach", url: null }, origin)).toBe(
+      false,
+    );
+  });
+
   it("preserves the initial app suffix for a standalone deep link", () => {
     expect(
       workspaceAppInitialPathFromSplat("inbox", "?view=unread", "#top"),
@@ -155,13 +188,39 @@ describe("workspace app routes", () => {
     expect(workspaceAppInitialPathFromSplat(undefined, "", "")).toBeUndefined();
   });
 
+  it("restores a child route from the flat Workspace app shell query", () => {
+    expect(
+      workspaceAppInitialPathFromSplat(
+        undefined,
+        "?__workspace_app_path=%2Ftriage%3Fview%3Dopen%23latest",
+        "",
+      ),
+    ).toBe("/triage?view=open#latest");
+    expect(
+      workspaceAppInitialPathFromSplat(
+        undefined,
+        "?__workspace_app_path=%2F%2Fevil.example",
+        "",
+      ),
+    ).toBeUndefined();
+  });
+
   it("maps child routes to shareable Dispatch app routes", () => {
+    const childPath = "/foobar?mode=edit#canvas";
+    const route = workspaceAppRouteForChildPath(
+      { id: "design", path: "/", url: "https://design.example.test" },
+      childPath,
+    );
+    expect(route).toBe(
+      "/apps/design?__workspace_app_path=%2Ffoobar%3Fmode%3Dedit%23canvas",
+    );
     expect(
-      workspaceAppRouteForChildPath(
-        { id: "design", path: "/", url: "https://design.example.test" },
-        "/foobar?mode=edit#canvas",
+      workspaceAppInitialPathFromSplat(
+        undefined,
+        new URL(route!, "https://dispatch.example.test").search,
+        "",
       ),
-    ).toBe("/apps/design/foobar?mode=edit#canvas");
+    ).toBe(childPath);
     expect(
       workspaceAppRouteForChildPath(
         {
@@ -171,7 +230,7 @@ describe("workspace app routes", () => {
         },
         "/design/foobar",
       ),
-    ).toBe("/apps/internal-design/foobar");
+    ).toBe("/apps/internal-design?__workspace_app_path=%2Ffoobar");
     expect(
       workspaceAppRouteForChildPath(
         { id: "design", path: "/", url: "https://design.example.test" },

package/src/lib/workspace-apps.ts

@@ -9,11 +9,14 @@ import {
   withBuilderUtmTrackingParams,
 } from "@agent-native/core/shared";
 
+import { workspaceAppRoute } from "../shared/workspace-app-route";
 import {
   CANONICAL_WORKSPACE_SSO_APP_ORIGINS,
   isWorkspaceSsoAppUrl,
 } from "../shared/workspace-sso";
 
+export { workspaceAppRoute } from "../shared/workspace-app-route";
+
 export interface WorkspaceAppSummary {
   id: string;
   name: string;
@@ -220,10 +223,6 @@ export function defaultWorkspaceAppUrl(rawUrl: string): string {
   }
 }
 
-export function workspaceAppRoute(appId: string): string {
-  return `/apps/${encodeURIComponent(appId)}`;
-}
-
 function normalizeWorkspaceAppRoutePath(rawPath: string): URL | null {
   if (
     typeof rawPath !== "string" ||
@@ -281,8 +280,10 @@ export function workspaceAppRouteForChildPath(
       ? parsed.pathname.slice(mountPath.length) || "/"
       : parsed.pathname;
   const routePath = workspaceAppRoute(app.id);
-  const suffix = relativePathname === "/" ? "" : relativePathname;
-  return `${routePath}${suffix}${parsed.search}${parsed.hash}`;
+  const childRoute = `${relativePathname}${parsed.search}${parsed.hash}`;
+  if (childRoute === "/") return routePath;
+  const search = new URLSearchParams([["__workspace_app_path", childRoute]]);
+  return `${routePath}?${search}`;
 }
 
 export function workspaceAppInitialPathFromSplat(
@@ -290,6 +291,14 @@ export function workspaceAppInitialPathFromSplat(
   search: string,
   hash: string,
 ): string | undefined {
+  const appPath = new URLSearchParams(search).get("__workspace_app_path");
+  if (appPath !== null) {
+    const parsed = normalizeWorkspaceAppRoutePath(appPath);
+    if (!parsed) return undefined;
+    const path = `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    return path === "/" ? undefined : path;
+  }
+
   const pathname = routeSplat?.trim()
     ? `/${routeSplat.trim().replace(/^[/\\]+/, "")}`
     : "/";
@@ -311,6 +320,27 @@ export function workspaceAppIdFromRoute(pathname: string): string | null {
   }
 }
 
+// A mounted app's registry `url` is the Dispatch page that hosts it
+// (`<dispatch>/apps/<id>`). Read from that same Dispatch, it is the page doing
+// the framing, so framing it again nests Dispatch inside itself.
+export function isWorkspaceAppHostPageUrl(
+  app: Pick<WorkspaceAppSummary, "id" | "url">,
+  dispatchOrigin: string | undefined,
+): boolean {
+  const rawUrl = app.url?.trim();
+  if (!rawUrl || !dispatchOrigin) return false;
+  let url: URL;
+  try {
+    url = new URL(rawUrl);
+  } catch {
+    // coercion-ok: a URL that does not parse is not Dispatch's page for the app.
+    return false;
+  }
+  if (url.origin !== dispatchOrigin) return false;
+  const pathname = url.pathname.replace(/\/+$/, "").toLowerCase();
+  return pathname.endsWith(workspaceAppRoute(app.id.trim()).toLowerCase());
+}
+
 export function workspaceAppHref(app: WorkspaceAppSummary): string | null {
   if (app.status === "pending") {
     return app.builderUrl

package/src/routes/pages/apps.$appId.spec.tsx

@@ -36,10 +36,13 @@ vi.mock("../../lib/workspace-apps", () => ({
     routeSplat: string | undefined,
     search: string,
     hash: string,
-  ) =>
-    routeSplat || search || hash
+  ) => {
+    const appPath = new URLSearchParams(search).get("__workspace_app_path");
+    if (appPath !== null) return appPath;
+    return routeSplat || search || hash
       ? `/${routeSplat ?? ""}${search}${hash}`
-      : undefined,
+      : undefined;
+  },
 }));
 
 import WorkspaceAppRoute from "./apps.$appId";
@@ -112,4 +115,19 @@ describe("WorkspaceAppRoute", () => {
       replace: true,
     });
   });
+
+  it("passes a flat-shell child path from the workspace route query to the host", async () => {
+    routeState.routeSplat = undefined;
+    routeState.location = {
+      pathname: "/apps/mail",
+      search: "?__workspace_app_path=%2Ftriage%3Fview%3Dopen%23latest",
+      hash: "",
+    };
+
+    await act(async () => {
+      root.render(<WorkspaceAppRoute />);
+    });
+
+    expect(routeState.hostProps?.initialPath).toBe("/triage?view=open#latest");
+  });
 });