@agent-native/dispatch 0.22.0 → 0.23.0

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/styles/dispatch.css

@@ -49,7 +49,7 @@
 .dispatch-chat-panel [data-agent-empty-state="centered"] .dispatch-chat-intro {
   display: grid;
   width: 100%;
-  max-width: min(684px, 90%);
+  max-width: min(750px, 90%);
   gap: 0.5rem;
   margin: 0 auto 1rem;
   text-align: center;
@@ -79,7 +79,7 @@
 
 .dispatch-chat-panel [data-agent-empty-state="centered"] .agent-composer-area {
   width: 100%;
-  max-width: min(684px, 90%);
+  max-width: min(750px, 90%);
   padding: 0;
 }