@agent-native/dispatch 0.23.0 → 0.23.1

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

@@ -392,6 +392,7 @@ describe("Dispatch NavContent", () => {
           <TooltipProvider>
             <NavContent
               chatFirstMode
+              collapsible
               chatFirstApps={[{ id: "mail", name: "Mail" }]}
             />
           </TooltipProvider>
@@ -403,7 +404,13 @@ describe("Dispatch NavContent", () => {
     expect(container.querySelector("[data-chat-first-app]")).not.toBeNull();
     expect(
       container.querySelector("[data-chat-first-app] span[style]"),
-    ).toBeNull();
+    ).not.toBeNull();
+    expect(
+      container.querySelector("[data-sidebar-footer-feedback]"),
+    ).not.toBeNull();
+    expect(
+      container.querySelector("[data-sidebar-footer-collapse]"),
+    ).not.toBeNull();
   });
 
   it("opens a workspace app in the main app route from the left rail", async () => {

package/src/components/layout/Layout.tsx

@@ -23,6 +23,7 @@ import {
   type ChatFirstAppRegistration,
   type ChatFirstAppLayoutPreference,
   type ChatFirstAppResolution,
+  type ChatFirstAppSurfacePlacement,
   type ChatFirstOpenBrowserDetail,
   type ChatFirstOpenAppDetail,
   type ChatFirstSessionReference,
@@ -199,6 +200,7 @@ const CHAT_FIRST_PANE_STATE_KEY = "chat-first-pane";
 
 interface DispatchChatFirstPane {
   appId: string;
+  placement?: ChatFirstAppSurfacePlacement;
   path?: string;
   view?: string;
 }
@@ -461,6 +463,9 @@ function persistedChatFirstPane(value: unknown): DispatchChatFirstPane | null {
   if (typeof record.appId !== "string" || !record.appId.trim()) return null;
   return {
     appId: record.appId,
+    ...(record.placement === "main" || record.placement === "side"
+      ? { placement: record.placement }
+      : {}),
     ...(typeof record.path === "string" ? { path: record.path } : {}),
     ...(typeof record.view === "string" ? { view: record.view } : {}),
   };
@@ -678,7 +683,7 @@ function DispatchChatsSection({
       )}
     >
       {showNewChat && chatFirstNavigation ? (
-        <nav className="space-y-0.5 px-2 py-2">
+        <nav className="space-y-0.5 px-0 py-2">
           <ChatFirstPrimaryNavigation
             copy={chatFirstCopy}
             onNewChat={() => void handleNewChat()}
@@ -1025,8 +1030,7 @@ export function NavContent({
           id={app.id}
           name={app.name}
           size="sm"
-          monochrome
-          className="size-5 rounded-md"
+          className="size-7 rounded-lg"
         />
       )}
       copy={chatFirstCopy}
@@ -1257,7 +1261,7 @@ export function NavContent({
         <div className="mt-auto shrink-0">
           {bottomNavigation}
           {organizationPicker}
-          {collapsed ? sidebarFooterActions : null}
+          {sidebarFooterActions}
         </div>
       ) : null}
     </>
@@ -1302,6 +1306,7 @@ export function Layout({
     new URLSearchParams(window.location.search).get("chatFirst") === "1";
   const chatFirstMode =
     extensions?.chatFirst === true || chatFirstPreference || chatFirstEmbedded;
+  const chatFirstHasActiveChat = chatFirstSurfaceScope !== "new";
   const [chatFirstAppLayout, setChatFirstAppLayout] =
     useState<ChatFirstAppLayoutPreference>(() => readChatFirstAppLayout());
   const chatFirstAppLayoutHydratedRef = useRef(false);
@@ -1344,11 +1349,13 @@ export function Layout({
   }, [chatFirstGrantedAppsQuery.data?.apps, chatFirstWorkspaceApps]);
   const chatFirstAppItems = useMemo<ChatFirstAppItem[]>(
     () =>
-      chatFirstWorkspaceApps.map((app) => ({
-        id: app.id,
-        name: app.name,
-      })),
-    [chatFirstWorkspaceApps],
+      chatFirstAppRegistrations
+        .filter((app) => app.enabled)
+        .map((app) => ({
+          id: app.id,
+          name: app.name ?? app.id,
+        })),
+    [chatFirstAppRegistrations],
   );
   const chatFirstCopy = useMemo(() => createDispatchChatFirstCopy(t), [t]);
   const createChatFirstEmbedSession = useActionMutation<
@@ -1399,7 +1406,10 @@ export function Layout({
     [chatFirstSurfaceTabs],
   );
   const chatFirstAppTakesMain =
-    chatFirstMode && isChatRoute && activeChatFirstSurfaceTab?.kind === "app";
+    chatFirstMode &&
+    isChatRoute &&
+    activeChatFirstSurfaceTab?.kind === "app" &&
+    activeChatFirstSurfaceTab.placement === "main";
   const activeChatFirstAppRegistration = useMemo(
     () =>
       activeChatFirstSurfaceTab?.kind === "app" &&
@@ -1498,7 +1508,11 @@ export function Layout({
     [],
   );
   const openChatFirstPane = useCallback(
-    (pane: DispatchChatFirstPane) => {
+    (
+      pane: DispatchChatFirstPane,
+      placement: ChatFirstAppSurfacePlacement = "side",
+    ) => {
+      if (placement === "side" && !chatFirstHasActiveChat) return;
       setChatFirstNotice(null);
       closeChatFirstSessionWatch();
       if (!isChatRoute) {
@@ -1518,15 +1532,17 @@ export function Layout({
         kind: "app",
         title: app?.name ?? pane.appId,
         appId: pane.appId,
+        placement,
         ...(pane.path ? { path: pane.path } : {}),
         ...(pane.view ? { view: pane.view } : {}),
       });
       setChatFirstSurfacePanelOpen(true);
-      persistChatFirstPane(pane);
+      persistChatFirstPane({ ...pane, placement });
     },
     [
       chatFirstAppRegistrations,
       chatFirstSurfaceTabsStore,
+      chatFirstHasActiveChat,
       persistChatFirstPane,
       isChatRoute,
       navigate,
@@ -1535,6 +1551,17 @@ export function Layout({
   );
   const openChatFirstSurface = useCallback(
     (kind: ChatFirstSurfaceKind) => {
+      if (kind === "browser") {
+        persistChatFirstPane(null);
+        closeChatFirstSessionWatch();
+        chatFirstSurfaceTabsStore.open({
+          id: chatFirstSurfaceTabId("browser", "homepage"),
+          kind: "browser",
+          title: "Browser",
+          url: "https://www.google.com/",
+        });
+        return;
+      }
       if (kind !== "agents") return;
       persistChatFirstPane(null);
       closeChatFirstSessionWatch();
@@ -1555,6 +1582,24 @@ export function Layout({
         );
         return;
       }
+      if (resolution.target.openExternally && typeof window !== "undefined") {
+        try {
+          // Builder's Visual Editor rejects iframe ancestors with CSP/X-Frame-
+          // Options. Prefer the real browser tab; the browser pane below is a
+          // visible fallback when popup policy blocks this non-click event.
+          if (
+            window.open(resolution.target.url, "_blank", "noopener,noreferrer")
+          ) {
+            return;
+          }
+        } catch (error) {
+          console.warn(
+            "[chat-first] external browser open failed; keeping link fallback",
+            error,
+          );
+          // Fall through to the non-iframe browser pane below.
+        }
+      }
       persistChatFirstPane(null);
       closeChatFirstSessionWatch();
       setChatFirstNotice(null);
@@ -1731,7 +1776,9 @@ export function Layout({
                 : window.location.origin,
           },
         );
-        if (resolution.status === "ready") openChatFirstPane(resolution.target);
+        if (resolution.status === "ready") {
+          openChatFirstPane(resolution.target, persisted.placement);
+        }
       })
       .catch(() => {
         if (active) {
@@ -1777,7 +1824,7 @@ export function Layout({
   useEffect(() => {
     const tabCount = chatFirstSurfaceTabs.tabs.length;
     const previousTabCount = previousChatFirstSurfaceTabCountRef.current;
-    if (!chatFirstMode) {
+    if (!chatFirstMode || !chatFirstHasActiveChat) {
       setChatFirstSurfacePanelOpen(false);
     } else if (
       tabCount > 0 &&
@@ -1794,6 +1841,7 @@ export function Layout({
     previousChatFirstSurfaceTabCountRef.current = tabCount;
   }, [
     chatFirstMode,
+    chatFirstHasActiveChat,
     setChatFirstSurfacePanelOpen,
     chatFirstSurfaceTabs.tabs.length,
     isChatRoute,
@@ -1864,6 +1912,7 @@ export function Layout({
         closeChatFirstSessionWatch();
         persistChatFirstPane({
           appId: tab.appId,
+          placement: tab.placement,
           ...(tab.path ? { path: tab.path } : {}),
           ...(tab.view ? { view: tab.view } : {}),
         });
@@ -2096,7 +2145,7 @@ export function Layout({
     <div className="relative flex h-full min-w-0 flex-1 flex-col overflow-hidden">
       {showHeader ? <Header onOpenMobile={() => setMobileOpen(true)} /> : null}
       <InvitationBanner />
-      {isChatRoute && chatFirstMode ? (
+      {isChatRoute && chatFirstMode && chatFirstHasActiveChat ? (
         <ChatFirstSurfacePanelToggle
           open={chatFirstSurfacePanel.open}
           onToggle={chatFirstSurfacePanel.toggle}
@@ -2160,6 +2209,16 @@ export function Layout({
         }}
         onCloseAll={closeAllChatFirstSurfaceTabs}
         onOpenSurface={openChatFirstSurface}
+        apps={chatFirstAppItems}
+        onOpenApp={(app) => openChatFirstPane({ appId: app.id }, "side")}
+        renderAppIcon={(app) => (
+          <AppIcon
+            id={app.id}
+            name={app.name}
+            size="sm"
+            className="size-7 rounded-lg"
+          />
+        )}
         copy={chatFirstCopy}
       />
     );
@@ -2188,7 +2247,9 @@ export function Layout({
       ) : (
         <>
           {appContent}
-          {chatFirstMode && chatFirstSurfacePanel.open ? (
+          {chatFirstMode &&
+          chatFirstHasActiveChat &&
+          chatFirstSurfacePanel.open ? (
             <ChatFirstSurfacePanel
               width={chatFirstSurfaceResize.width}
               onResizePointerDown={chatFirstSurfaceResize.onPointerDown}
@@ -2249,7 +2310,9 @@ export function Layout({
                   ? activeChatFirstSurfaceTab.appId
                   : undefined
               }
-              onChatFirstAppOpen={(app) => openChatFirstPane({ appId: app.id })}
+              onChatFirstAppOpen={(app) =>
+                openChatFirstPane({ appId: app.id }, "main")
+              }
               onChatFirstAppsRetry={() => void chatFirstAppsQuery.refetch()}
               collapsible
               onCollapsedChange={setSidebarCollapsed}
@@ -2259,7 +2322,7 @@ export function Layout({
           <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
             <SheetContent
               side="left"
-              className="w-72 p-0 bg-sidebar text-sidebar-foreground [&>button]:hidden"
+              className="w-72 bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
             >
               <SheetTitle className="sr-only">
                 {t("dispatch.nav.navigation")}
@@ -2288,7 +2351,7 @@ export function Layout({
                       : undefined
                   }
                   onChatFirstAppOpen={(app) =>
-                    openChatFirstPane({ appId: app.id })
+                    openChatFirstPane({ appId: app.id }, "main")
                   }
                   onChatFirstAppsRetry={() => void chatFirstAppsQuery.refetch()}
                   onNavigate={() => setMobileOpen(false)}

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", () => {

package/src/styles/dispatch.css

@@ -79,7 +79,7 @@
 
 .dispatch-chat-panel [data-agent-empty-state="centered"] .agent-composer-area {
   width: 100%;
-  max-width: min(750px, 90%);
+  max-width: min(750px, 100%);
   padding: 0;
 }