@agent-native/dispatch 0.22.1 → 0.23.1

package/src/components/app-list-row.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import { cn } from "../lib/utils";
 
 export const APP_LIST_GRID_CLASS =
-  "xl:grid xl:grid-cols-2 xl:gap-3 xl:overflow-visible xl:rounded-none xl:bg-transparent";
+  "mx-auto w-full max-w-[1000px] xl:grid xl:grid-cols-2 xl:gap-3 xl:overflow-visible xl:rounded-none xl:bg-transparent";
 export const APP_LIST_GRID_ROW_CLASS = "xl:rounded-2xl xl:border-0 xl:bg-card";
 
 export function AppList({

package/src/components/app-open-actions.tsx

@@ -29,6 +29,7 @@ export function AppOpenActions({
   rel,
   labels: labelOverrides,
   onAddApp,
+  onOpenInline,
   showInlineOption = false,
   showNewTabOption = false,
 }: {
@@ -38,6 +39,7 @@ export function AppOpenActions({
   rel?: string;
   labels?: Partial<AppOpenActionLabels>;
   onAddApp?: () => void;
+  onOpenInline?: () => void;
   showInlineOption?: boolean;
   showNewTabOption?: boolean;
 }) {
@@ -92,8 +94,8 @@ export function AppOpenActions({
               </DropdownMenuItem>
             ) : null}
             {showInlineOption && href ? (
-              <DropdownMenuItem asChild>
-                <a href={href}>{labels.openInline}</a>
+              <DropdownMenuItem onSelect={onOpenInline}>
+                {labels.openInline}
               </DropdownMenuItem>
             ) : null}
             {showNewTabOption && href ? (

package/src/components/dispatch-control-plane.spec.tsx

@@ -8,6 +8,7 @@ import { DispatchControlPlane } from "./dispatch-control-plane";
 import { TooltipProvider } from "./ui/tooltip";
 
 const clientState = vi.hoisted(() => ({
+  inBuilderFrame: false,
   navigateWithTransition: vi.fn(),
   promptComposerProps: null as Record<string, unknown> | null,
   workspaceApps: [] as Array<Record<string, unknown>>,
@@ -69,7 +70,7 @@ vi.mock("@agent-native/core/client/hooks", () => ({
 }));
 
 vi.mock("@agent-native/core/client/host", () => ({
-  isInBuilderFrame: () => false,
+  isInBuilderFrame: () => clientState.inBuilderFrame,
 }));
 
 vi.mock("@agent-native/core/client/i18n", () => ({
@@ -79,7 +80,12 @@ vi.mock("@agent-native/core/client/i18n", () => ({
 }));
 
 vi.mock("./create-app-popover", () => ({
-  CreateAppPopover: () => <div>Create app</div>,
+  CreateAppPopover: ({ trigger }: { trigger?: React.ReactNode }) => (
+    <div>
+      {trigger}
+      <span>Create app</span>
+    </div>
+  ),
 }));
 
 describe("DispatchControlPlane", () => {
@@ -88,6 +94,7 @@ describe("DispatchControlPlane", () => {
 
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    clientState.inBuilderFrame = false;
     clientState.navigateWithTransition.mockReset();
     clientState.promptComposerProps = null;
     clientState.workspaceApps = [];
@@ -117,6 +124,8 @@ describe("DispatchControlPlane", () => {
     });
 
     expect(container.textContent).toContain("Chat across your apps");
+    expect(container.querySelector('[class*="max-w-[750px]"]')).not.toBeNull();
+    expect(container.querySelector('[class*="max-w-[1000px]"]')).not.toBeNull();
     expect(container.textContent).not.toContain("Open chat");
     expect(container.textContent).not.toContain("Also");
     expect(container.textContent).not.toContain("active");
@@ -155,6 +164,36 @@ describe("DispatchControlPlane", () => {
     );
   });
 
+  it("keeps overview submissions on Dispatch Chat inside Builder frames", async () => {
+    clientState.inBuilderFrame = true;
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/overview"]}>
+          <TooltipProvider>
+            <DispatchControlPlane />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>("[data-placeholder]")?.click();
+    });
+
+    expect(clientState.navigateWithTransition).toHaveBeenCalledWith(
+      expect.any(Function),
+      "/chat",
+      expect.objectContaining({
+        state: {
+          dispatchPrompt: expect.objectContaining({
+            message: "Route onboarding work",
+          }),
+        },
+      }),
+    );
+  });
+
   it("shows mounted and connected apps together without duplicates", async () => {
     clientState.workspaceApps = [
       {
@@ -230,11 +269,10 @@ describe("DispatchControlPlane", () => {
     expect(container.textContent).toContain("Mail");
     expect(container.textContent).toContain("Clips");
     expect(container.textContent).toContain("Analytics");
-    expect(container.textContent).toContain("Your apps");
-    expect(container.textContent).toContain("Other apps");
-    expect(container.textContent?.indexOf("Your apps")).toBeLessThan(
-      container.textContent?.indexOf("Other apps") ?? -1,
-    );
+    expect(container.textContent).toContain("Apps");
+    expect(container.textContent).toContain("New");
+    expect(container.textContent).not.toContain("Other apps");
+    expect(container.textContent).not.toContain("available");
     expect(container.textContent).not.toContain("Archived app");
     expect(container.textContent).not.toContain("Duplicate onboarding");
     expect(container.textContent).not.toContain("CRM");

package/src/components/dispatch-control-plane.tsx

@@ -4,20 +4,13 @@ import {
 } from "@agent-native/core/client/agent-chat";
 import { PromptComposer } from "@agent-native/core/client/composer";
 import { useActionQuery } from "@agent-native/core/client/hooks";
-import { isInBuilderFrame } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
-import {
-  IconArrowUpRight,
-  IconChevronDown,
-  IconClockHour4,
-  IconApps,
-} from "@tabler/icons-react";
+import { IconChevronDown, IconClockHour4, IconPlus } from "@tabler/icons-react";
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router";
 
 import type { ConnectedAppSummary } from "../lib/other-apps";
-import { submitOverviewPrompt } from "../lib/overview-chat";
 import { cn } from "../lib/utils";
 import type { WorkspaceAppSummary } from "../lib/workspace-apps";
 import { ActionQueryError } from "./action-query-error";
@@ -28,7 +21,7 @@ import {
 } from "./app-list-row";
 import { CreateAppPopover } from "./create-app-popover";
 import { useSetPageTitle } from "./layout/HeaderActions";
-import { OtherAppsSection } from "./other-apps-section";
+import { mergeOtherAppEntries, OtherAppsSection } from "./other-apps-section";
 import { Button } from "./ui/button";
 import {
   Collapsible,
@@ -56,26 +49,6 @@ function SectionHeader({
   );
 }
 
-function AppGroupHeader({
-  title,
-  description,
-}: {
-  title: string;
-  description: string;
-}) {
-  return (
-    <div className="flex min-w-0 items-start gap-2">
-      <IconApps size={16} className="mt-0.5 shrink-0 text-muted-foreground" />
-      <div className="min-w-0">
-        <h3 className="truncate text-sm font-semibold text-foreground">
-          {title}
-        </h3>
-        <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
-      </div>
-    </div>
-  );
-}
-
 function CommandPanel() {
   const t = useT();
   const {
@@ -104,11 +77,6 @@ function CommandPanel() {
     const trimmed = message.trim();
     if (!trimmed) return;
 
-    if (isInBuilderFrame()) {
-      submitOverviewPrompt(trimmed, selectedModel);
-      return;
-    }
-
     navigateWithAgentChatViewTransition(navigate, "/chat", {
       state: {
         dispatchPrompt: {
@@ -124,7 +92,7 @@ function CommandPanel() {
 
   return (
     <section className="flex flex-col">
-      <div className="mx-auto flex w-full max-w-3xl flex-col pt-4 sm:pt-6">
+      <div className="mx-auto flex w-full max-w-[750px] flex-col pt-4 sm:pt-6">
         <div className="mb-5 text-center">
           <h2 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
             {t("dispatch.pages.chatAcrossApps", {
@@ -196,60 +164,73 @@ function AppsPanel({
   const visibleApps = apps.filter((app) => !app.isDispatch && !app.archived);
   const activeApps = visibleApps.filter((app) => app.status !== "pending");
   const pendingApps = visibleApps.filter((app) => app.status === "pending");
+  const otherAppEntries = mergeOtherAppEntries({
+    templates: curatedTemplates,
+    connectedApps,
+    workspaceApps: apps,
+  });
   const showSkeletons =
     isLoading && activeApps.length === 0 && pendingApps.length === 0;
 
   return (
-    <section className="flex flex-col gap-3">
+    <section className="mx-auto flex w-full max-w-[1000px] flex-col gap-3">
       <SectionHeader
         title="Apps"
         action={
-          <Button variant="outline" size="sm" asChild>
-            <Link to="/apps">
-              View all
-              <IconArrowUpRight size={14} />
-            </Link>
-          </Button>
+          <div className="flex items-center gap-1.5">
+            <Button variant="outline" size="sm" asChild>
+              <Link to="/apps">View all</Link>
+            </Button>
+            <CreateAppPopover
+              align="end"
+              trigger={
+                <Button variant="ghost" size="sm" className="gap-1.5">
+                  <IconPlus size={14} />
+                  {t("dispatch.pages.newApp", { defaultValue: "New" })}
+                </Button>
+              }
+            />
+          </div>
         }
       />
       {showSkeletons ? (
         <OverviewAppsSkeleton />
       ) : (
         <>
-          {activeApps.length > 0 ? (
-            <div className="space-y-3">
-              <AppGroupHeader
-                title={t("dispatch.pages.yourApps", {
-                  defaultValue: "Your apps",
-                })}
-                description={t("dispatch.pages.activeCount", {
-                  count: activeApps.length,
-                })}
+          <AppList className={APP_LIST_GRID_CLASS}>
+            {activeApps.map((app) => (
+              <WorkspaceAppCard
+                key={app.id}
+                app={app}
+                className={APP_LIST_GRID_ROW_CLASS}
               />
-              <AppList className={APP_LIST_GRID_CLASS}>
-                {activeApps.map((app) => (
-                  <WorkspaceAppCard
-                    key={app.id}
-                    app={app}
-                    className={APP_LIST_GRID_ROW_CLASS}
-                  />
-                ))}
-              </AppList>
-            </div>
-          ) : (
-            <CreateAppPopover />
-          )}
-          <OtherAppsSection
-            templates={curatedTemplates}
-            connectedApps={connectedApps}
-            workspaceApps={apps}
-            templatesLoading={curatedTemplatesLoading}
-            connectedAppsLoading={connectedAppsLoading}
-            templatesError={curatedTemplatesError}
-            connectedAppsError={connectedAppsError}
-            onRetryTemplates={onRetryCuratedTemplates}
-            onRetryConnectedApps={onRetryConnectedApps}
-          />
+            ))}
+            {activeApps.length === 0 &&
+            otherAppEntries.length === 0 &&
+            !curatedTemplatesLoading &&
+            !connectedAppsLoading &&
+            !curatedTemplatesError &&
+            !connectedAppsError ? (
+              <p className="px-4 py-3 text-sm text-muted-foreground">
+                {t("dispatch.pages.noApps", {
+                  defaultValue: "No apps yet.",
+                })}
+              </p>
+            ) : null}
+            <OtherAppsSection
+              templates={curatedTemplates}
+              connectedApps={connectedApps}
+              workspaceApps={apps}
+              templatesLoading={curatedTemplatesLoading}
+              connectedAppsLoading={connectedAppsLoading}
+              templatesError={curatedTemplatesError}
+              connectedAppsError={connectedAppsError}
+              onRetryTemplates={onRetryCuratedTemplates}
+              onRetryConnectedApps={onRetryConnectedApps}
+              heading={null}
+              embeddedInList
+            />
+          </AppList>
         </>
       )}
       {pendingApps.length > 0 ? (

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

@@ -384,6 +384,59 @@ describe("Dispatch NavContent", () => {
     expect(paths.at(-1)).toBe("/apps");
   });
 
+  it("omits the Chats section when chat-first has no chats", async () => {
+    clientState.threads = [];
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/chat"]}>
+          <TooltipProvider>
+            <NavContent
+              chatFirstMode
+              collapsible
+              chatFirstApps={[{ id: "mail", name: "Mail" }]}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).not.toContain("Chats");
+    expect(container.querySelector("[data-chat-first-app]")).not.toBeNull();
+    expect(
+      container.querySelector("[data-chat-first-app] span[style]"),
+    ).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 () => {
+    const paths: string[] = [];
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/chat"]}>
+          <TooltipProvider>
+            <NavContent
+              chatFirstMode
+              chatFirstApps={[{ id: "mail", name: "Mail" }]}
+              onChatFirstAppOpen={(app) => paths.push(`/apps/${app.id}`)}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>("[data-chat-first-app] button")
+        ?.click();
+    });
+    expect(paths).toEqual(["/apps/mail"]);
+  });
+
   it("uses the shared chat history rail and retains thread actions", async () => {
     await act(async () => {
       root.render(