@agent-native/dispatch 0.22.1 → 0.23.1

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

@@ -1,5 +1,4 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { IconStack2 } from "@tabler/icons-react";
 
 import { filterOtherApps, type ConnectedAppSummary } from "../lib/other-apps";
 import type { WorkspaceAppId } from "../lib/other-apps";
@@ -80,6 +79,8 @@ export function OtherAppsSection({
   onRetryConnectedApps,
   templateLabels,
   onRemixSuccess,
+  heading = "Other apps",
+  embeddedInList = false,
   className,
 }: {
   templates?: CuratedWorkspaceTemplatesResult;
@@ -96,6 +97,8 @@ export function OtherAppsSection({
     result: unknown,
     template: CuratedWorkspaceTemplate,
   ) => void;
+  heading?: string | null;
+  embeddedInList?: boolean;
   className?: string;
 }) {
   const t = useT();
@@ -109,26 +112,15 @@ export function OtherAppsSection({
 
   if (!isLoading && !hasError && entries.length === 0) return null;
 
-  return (
-    <section className={cn("space-y-3 border-t pt-6", className)}>
-      <div className="flex min-w-0 items-start gap-2">
-        <IconStack2
-          size={16}
-          className="mt-0.5 shrink-0 text-muted-foreground"
-        />
-        <div className="min-w-0">
+  const content = (
+    <>
+      {heading ? (
+        <div className="flex min-w-0 items-center">
           <h2 className="truncate text-sm font-semibold text-foreground">
-            {t("dispatch.pages.otherApps", { defaultValue: "Other apps" })}
+            {t("dispatch.pages.otherApps", { defaultValue: heading })}
           </h2>
-          {entries.length > 0 ? (
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              {t("dispatch.pages.availableCount", {
-                count: entries.length,
-              })}
-            </p>
-          ) : null}
         </div>
-      </div>
+      ) : null}
 
       {templatesError ? (
         <ActionQueryError
@@ -144,31 +136,37 @@ export function OtherAppsSection({
       ) : null}
 
       {isLoading && entries.length === 0 ? (
-        <OtherAppsSkeletonList />
+        embeddedInList ? (
+          <OtherAppsSkeletonRows />
+        ) : (
+          <OtherAppsSkeletonList />
+        )
       ) : entries.length > 0 ? (
-        <AppList className={APP_LIST_GRID_CLASS}>
-          {entries.map((entry) =>
-            entry.kind === "template" ? (
-              <WorkspaceTemplateCard
-                key={`template:${templateKey(entry.template)}`}
-                template={entry.template}
-                labels={templateLabels}
-                catalog
-                className={APP_LIST_GRID_ROW_CLASS}
-                onRemixSuccess={onRemixSuccess}
-              />
-            ) : (
-              <ConnectedAppCard
-                key={`connected:${entry.app.id}`}
-                app={entry.app}
-                className={APP_LIST_GRID_ROW_CLASS}
-              />
-            ),
-          )}
-        </AppList>
+        entries.map((entry) =>
+          entry.kind === "template" ? (
+            <WorkspaceTemplateCard
+              key={`template:${templateKey(entry.template)}`}
+              template={entry.template}
+              labels={templateLabels}
+              catalog
+              className={APP_LIST_GRID_ROW_CLASS}
+              onRemixSuccess={onRemixSuccess}
+            />
+          ) : (
+            <ConnectedAppCard
+              key={`connected:${entry.app.id}`}
+              app={entry.app}
+              className={APP_LIST_GRID_ROW_CLASS}
+            />
+          ),
+        )
       ) : null}
-    </section>
+    </>
   );
+
+  if (embeddedInList) return content;
+
+  return <section className={cn("space-y-3", className)}>{content}</section>;
 }
 
 function OtherAppsSkeletonList() {
@@ -193,3 +191,26 @@ function OtherAppsSkeletonList() {
     </AppList>
   );
 }
+
+function OtherAppsSkeletonRows() {
+  return (
+    <>
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div
+          key={index}
+          className={cn(
+            "flex min-w-0 items-center gap-3 border-b px-4 py-3.5 last:border-b-0",
+            APP_LIST_GRID_ROW_CLASS,
+          )}
+        >
+          <Skeleton className="size-8 shrink-0 rounded-xl" />
+          <div className="min-w-0 flex-1 space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+          <Skeleton className="h-9 w-24 shrink-0 rounded-md" />
+        </div>
+      ))}
+    </>
+  );
+}

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

@@ -1,6 +1,7 @@
 // @vitest-environment happy-dom
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { TooltipProvider } from "./ui/tooltip";
@@ -44,22 +45,24 @@ describe("WorkspaceAppCard", () => {
   it("uses one explicit open action and one settings control", async () => {
     await act(async () => {
       root.render(
-        <TooltipProvider>
-          <WorkspaceAppCard
-            app={{
-              id: "analytics",
-              name: "Analytics",
-              path: "/analytics",
-              description: "Explore product and growth performance.",
-              status: "ready",
-            }}
-          />
-        </TooltipProvider>,
+        <MemoryRouter>
+          <TooltipProvider>
+            <WorkspaceAppCard
+              app={{
+                id: "analytics",
+                name: "Analytics",
+                path: "/analytics",
+                description: "Explore product and growth performance.",
+                status: "ready",
+              }}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
       );
     });
 
     const appLink = container.querySelector<HTMLAnchorElement>(
-      'a[href="/analytics"]',
+      'a[href="/apps/analytics"]',
     );
     expect(appLink).not.toBeNull();
     expect(appLink?.textContent).toContain("Open app");
@@ -67,25 +70,13 @@ describe("WorkspaceAppCard", () => {
     expect(appLink?.getAttribute("target")).toBeNull();
     expect(appLink?.getAttribute("rel")).toBeNull();
     expect(appLink?.querySelector("svg")).toBeNull();
-    expect(container.textContent).not.toContain("/analytics");
+    expect(container.textContent).not.toContain("/apps/analytics");
 
-    const openOptionsButton = container.querySelector<HTMLButtonElement>(
-      'button[aria-label="Open options for Analytics"]',
-    );
-    expect(openOptionsButton).not.toBeNull();
-    await act(async () => {
-      openOptionsButton?.dispatchEvent(
-        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
-      );
-    });
-    const openInlineLink = Array.from(
-      document.querySelectorAll<HTMLAnchorElement>('[role="menu"] a'),
-    ).find((anchor) => anchor.textContent?.includes("Open inline"));
-    const openNewTabLink = Array.from(
-      document.querySelectorAll<HTMLAnchorElement>('[role="menu"] a'),
-    ).find((anchor) => anchor.textContent?.includes("Open in new tab"));
-    expect(openInlineLink?.getAttribute("target")).toBeNull();
-    expect(openNewTabLink?.getAttribute("target")).toBe("_blank");
+    expect(
+      container.querySelector(
+        'button[aria-label="Open options for Analytics"]',
+      ),
+    ).toBeNull();
 
     const settingsButton = container.querySelector<HTMLButtonElement>(
       'button[aria-label="Settings for Analytics"]',
@@ -107,17 +98,19 @@ describe("WorkspaceAppCard", () => {
   it("labels per-app context as agent resources while preserving workspace scope", async () => {
     await act(async () => {
       root.render(
-        <TooltipProvider>
-          <WorkspaceAppCard
-            app={{
-              id: "analytics",
-              name: "Analytics",
-              path: "/analytics",
-              description: "Explore product and growth performance.",
-              status: "ready",
-            }}
-          />
-        </TooltipProvider>,
+        <MemoryRouter>
+          <TooltipProvider>
+            <WorkspaceAppCard
+              app={{
+                id: "analytics",
+                name: "Analytics",
+                path: "/analytics",
+                description: "Explore product and growth performance.",
+                status: "ready",
+              }}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
       );
     });
 
@@ -149,17 +142,19 @@ describe("WorkspaceAppCard", () => {
   it("opens pending Builder apps in a new tab", async () => {
     await act(async () => {
       root.render(
-        <TooltipProvider>
-          <WorkspaceAppCard
-            app={{
-              id: "new-app",
-              name: "New app",
-              path: "/new-app",
-              builderUrl: "https://builder.example.com/projects/new-app",
-              status: "pending",
-            }}
-          />
-        </TooltipProvider>,
+        <MemoryRouter>
+          <TooltipProvider>
+            <WorkspaceAppCard
+              app={{
+                id: "new-app",
+                name: "New app",
+                path: "/new-app",
+                builderUrl: "https://builder.example.com/projects/new-app",
+                status: "pending",
+              }}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
       );
     });
 
@@ -177,20 +172,22 @@ describe("WorkspaceAppCard", () => {
   it("shows ownership metadata in the settings menu", async () => {
     await act(async () => {
       root.render(
-        <TooltipProvider>
-          <WorkspaceAppCard
-            app={{
-              id: "analytics",
-              name: "Analytics",
-              path: "/analytics",
-              createdAt: "2026-07-28T12:00:00.000Z",
-              createdBy: "creator@example.com",
-              owner: "owner@example.com",
-              teams: ["Growth", "Operations"],
-              status: "ready",
-            }}
-          />
-        </TooltipProvider>,
+        <MemoryRouter>
+          <TooltipProvider>
+            <WorkspaceAppCard
+              app={{
+                id: "analytics",
+                name: "Analytics",
+                path: "/analytics",
+                createdAt: "2026-07-28T12:00:00.000Z",
+                createdBy: "creator@example.com",
+                owner: "owner@example.com",
+                teams: ["Growth", "Operations"],
+                status: "ready",
+              }}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
       );
     });
 

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

@@ -20,12 +20,14 @@ import {
   IconWorld,
 } from "@tabler/icons-react";
 import { useEffect, useState, type FormEvent } from "react";
+import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import { cn } from "../lib/utils";
 import {
   isPendingBuilderHref,
   workspaceAppHref,
+  workspaceAppRoute,
   type WorkspaceAppSummary,
 } from "../lib/workspace-apps";
 import { ActionQueryError } from "./action-query-error";
@@ -273,7 +275,9 @@ function WorkspaceAppOpenActions({
   app: WorkspaceAppSummary;
   href: string | null;
 }) {
+  const navigate = useNavigate();
   const openInNewTab = isPendingBuilderHref(app);
+  const appRoute = workspaceAppRoute(app.id);
 
   if (!href) {
     return (
@@ -286,11 +290,14 @@ function WorkspaceAppOpenActions({
   return (
     <AppOpenActions
       name={app.name}
-      href={href}
+      href={openInNewTab ? href : appRoute}
       target={openInNewTab ? "_blank" : undefined}
       rel={openInNewTab ? "noreferrer" : undefined}
-      showInlineOption
-      showNewTabOption
+      showInlineOption={openInNewTab}
+      onOpenInline={() => {
+        navigate(appRoute);
+      }}
+      showNewTabOption={openInNewTab}
     />
   );
 }

package/src/components/workspace-template-card.spec.tsx

@@ -153,16 +153,15 @@ describe("WorkspaceTemplateCard", () => {
     );
   });
 
-  it("keeps add app inside the catalog split-button menu", async () => {
+  it("keeps add app out of the catalog split-button menu", async () => {
     await act(async () => {
       root.render(<WorkspaceTemplateCard template={template} catalog />);
     });
 
-    expect(
-      Array.from(container.querySelectorAll("button")).some((button) =>
-        button.textContent?.includes("Add app"),
-      ),
-    ).toBe(false);
+    const addButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Add app"),
+    );
+    expect(addButton).toBeDefined();
 
     const optionsButton = container.querySelector<HTMLButtonElement>(
       'button[aria-label="Open options for Weekly report"]',
@@ -177,8 +176,8 @@ describe("WorkspaceTemplateCard", () => {
     const addItem = Array.from(
       document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
     ).find((item) => item.textContent?.includes("Add app"));
-    expect(addItem).not.toBeUndefined();
-    await act(async () => addItem?.click());
+    expect(addItem).toBeUndefined();
+    await act(async () => addButton?.click());
     expect(document.body.textContent).toContain("Choose the URL-safe id");
   });
 

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

@@ -214,17 +214,27 @@ export function WorkspaceTemplateCard({
       </div>
       <div className="flex shrink-0 items-center gap-2">
         {catalog ? (
-          <AppOpenActions
-            name={template.name}
-            href={liveUrl ?? null}
-            target="_blank"
-            rel="noreferrer"
-            labels={{
-              addApp: labels.remix,
-              openApp: labels.openApp,
-            }}
-            onAddApp={() => setOpen(true)}
-          />
+          <>
+            {liveUrl ? (
+              <AppOpenActions
+                name={template.name}
+                href={liveUrl}
+                target="_blank"
+                rel="noreferrer"
+                labels={{ openApp: labels.openApp }}
+                showNewTabOption
+              />
+            ) : null}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setOpen(true)}
+            >
+              <IconPlus />
+              {labels.remix}
+            </Button>
+          </>
         ) : liveUrl ? (
           <Button variant="ghost" size="sm" className="shrink-0" asChild>
             <a href={liveUrl} target="_blank" rel="noreferrer">

package/src/lib/overview-chat.spec.ts

@@ -1,21 +1,15 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-const frameState = vi.hoisted(() => ({ inBuilderFrame: false }));
 const sendToAgentChatMock = vi.hoisted(() => vi.fn(() => "chat-tab"));
 
 vi.mock("@agent-native/core/client/agent-chat", () => ({
   sendToAgentChat: sendToAgentChatMock,
 }));
 
-vi.mock("@agent-native/core/client/host", () => ({
-  isInBuilderFrame: () => frameState.inBuilderFrame,
-}));
-
 const { submitOverviewPrompt } = await import("./overview-chat.js");
 
 describe("submitOverviewPrompt", () => {
   beforeEach(() => {
-    frameState.inBuilderFrame = false;
     sendToAgentChatMock.mockClear();
   });
 
@@ -50,19 +44,6 @@ describe("submitOverviewPrompt", () => {
     });
   });
 
-  it("routes overview prompts to Builder chat inside Builder", () => {
-    frameState.inBuilderFrame = true;
-
-    const tabId = submitOverviewPrompt("ship the onboarding flow", "auto");
-
-    expect(tabId).toBe("chat-tab");
-    expect(sendToAgentChatMock).toHaveBeenCalledWith({
-      message: "ship the onboarding flow",
-      submit: true,
-      type: "code",
-    });
-  });
-
   it("ignores empty prompts", () => {
     expect(submitOverviewPrompt("   ", "auto")).toBeNull();
     expect(sendToAgentChatMock).not.toHaveBeenCalled();

package/src/lib/overview-chat.ts

@@ -2,7 +2,6 @@ import {
   sendToAgentChat,
   type AgentChatMessage,
 } from "@agent-native/core/client/agent-chat";
-import { isInBuilderFrame } from "@agent-native/core/client/host";
 
 interface OverviewChatOptions {
   openSidebar?: boolean;
@@ -18,14 +17,6 @@ export function submitOverviewPrompt(
   const trimmed = message.trim();
   if (!trimmed) return null;
 
-  if (isInBuilderFrame()) {
-    return sendToAgentChat({
-      message: trimmed,
-      submit: true,
-      type: "code",
-    });
-  }
-
   return sendToAgentChat({
     message: trimmed,
     submit: true,

package/src/routes/pages/chat.tsx

@@ -174,7 +174,7 @@ export default function ChatRoute() {
       <DispatchAgentChatSurface
         mode="page"
         chatViewTransition
-        className="dispatch-chat-panel"
+        className="dispatch-chat-panel px-4 sm:px-6"
         defaultMode="chat"
         storageKey="dispatch"
         threadUrlSync={threadUrlSync}

package/src/server/lib/mcp-gateway.spec.ts

@@ -880,6 +880,54 @@ describe("createGrantedDispatchMcpEmbedSession", () => {
     ).rejects.toThrow(/safe app-relative route/);
   });
 
+  it("resolves target-relative embed start URLs against the granted app", async () => {
+    mocks.managerCallTool.mockResolvedValueOnce({
+      structuredContent: {
+        startUrl: "/_agent-native/embed/start?ticket=relative",
+      },
+    });
+
+    const result = await runWithRequestContext(
+      {
+        userEmail: "owner@example.test",
+        requestOrigin: "http://localhost:8092",
+      },
+      () =>
+        createGrantedDispatchMcpEmbedSession({
+          app: "analytics",
+          path: "/overview",
+          chrome: "minimal",
+        }),
+    );
+
+    expect(result.startUrl).toBe(
+      "http://localhost:8086/_agent-native/embed/start?ticket=relative",
+    );
+  });
+
+  it("rejects cross-origin embed start URLs from a granted app", async () => {
+    mocks.managerCallTool.mockResolvedValueOnce({
+      structuredContent: {
+        startUrl: "https://attacker.example/steal?ticket=remote",
+      },
+    });
+
+    await expect(
+      runWithRequestContext(
+        {
+          userEmail: "owner@example.test",
+          requestOrigin: "http://localhost:8092",
+        },
+        () =>
+          createGrantedDispatchMcpEmbedSession({
+            app: "analytics",
+            path: "/overview",
+            chrome: "minimal",
+          }),
+      ),
+    ).rejects.toThrow(/invalid embed start URL/);
+  });
+
   it("rejects a URL that does not belong to the explicitly named app", async () => {
     await expect(
       runWithRequestContext(
@@ -905,6 +953,12 @@ describe("createGrantedDispatchMcpEmbedSession", () => {
         url: "http://localhost:8092/analytics",
       },
     ]);
+    mocks.managerCallTool.mockResolvedValueOnce({
+      structuredContent: {
+        startUrl:
+          "http://localhost:8092/analytics/_agent-native/embed/start?ticket=remote",
+      },
+    });
 
     const result = await runWithRequestContext(
       {
@@ -934,7 +988,8 @@ describe("createGrantedDispatchMcpEmbedSession", () => {
     );
     expect(result).toEqual({
       app: "analytics",
-      startUrl: "http://localhost:8086/_agent-native/embed/start?ticket=remote",
+      startUrl:
+        "http://localhost:8092/analytics/_agent-native/embed/start?ticket=remote",
     });
   });
 
@@ -955,6 +1010,12 @@ describe("createGrantedDispatchMcpEmbedSession", () => {
         color: "#2563EB",
       },
     ]);
+    mocks.managerCallTool.mockResolvedValueOnce({
+      structuredContent: {
+        startUrl:
+          "https://mail.agent-native.com/_agent-native/embed/start?ticket=remote",
+      },
+    });
 
     const result = await runWithRequestContext(
       {
@@ -976,7 +1037,8 @@ describe("createGrantedDispatchMcpEmbedSession", () => {
     });
     expect(result).toEqual({
       app: "mail",
-      startUrl: "http://localhost:8086/_agent-native/embed/start?ticket=remote",
+      startUrl:
+        "https://mail.agent-native.com/_agent-native/embed/start?ticket=remote",
     });
   });
 

package/src/server/lib/mcp-gateway.ts

@@ -451,6 +451,24 @@ function appBaseUrl(app: DispatchMcpAccessibleApp): string {
   return app.url.replace(/\/+$/, "");
 }
 
+function resolveGrantedAppEmbedStartUrl(
+  app: DispatchMcpAccessibleApp,
+  startUrl: string,
+): string {
+  try {
+    const baseUrl = appBaseUrl(app);
+    const resolved = new URL(startUrl, `${baseUrl}/`);
+    if (!appMatchesUrlPath(app, resolved)) {
+      throw new Error(
+        "Target app returned an embed start URL outside the granted app.",
+      );
+    }
+    return resolved.toString();
+  } catch {
+    throw new Error("Target app returned an invalid embed start URL.");
+  }
+}
+
 function appBasePath(app: DispatchMcpAccessibleApp): string {
   const pathname = new URL(appBaseUrl(app)).pathname.replace(/\/+$/, "");
   return pathname === "/" ? "" : pathname;
@@ -994,7 +1012,7 @@ export async function createGrantedDispatchMcpEmbedSession(input: {
     expiresAt?: number;
     app: string;
   } = {
-    startUrl: parsed.startUrl,
+    startUrl: resolveGrantedAppEmbedStartUrl(target.app, parsed.startUrl),
     app: target.app.id,
   };
   if (parsed.targetPath) output.targetPath = parsed.targetPath;

package/src/styles/dispatch-css.spec.ts

@@ -39,6 +39,17 @@ describe("dispatch Tailwind styles", () => {
       '@import "@agent-native/dispatch/styles/dispatch.css";',
     );
   });
+
+  it("keeps the full-page composer on the shared wide width contract", () => {
+    const stylesheet = fs.readFileSync(
+      path.join(packageRoot, "src/styles/dispatch.css"),
+      "utf-8",
+    );
+
+    expect(stylesheet).toMatch(
+      /\.dispatch-chat-panel \[data-agent-empty-state="centered"\] \.agent-composer-area \{[\s\S]*?max-width: min\(750px, 100%\);/,
+    );
+  });
 });
 
 describe("dispatch route shells", () => {