@agent-native/dispatch 0.40.4 → 0.40.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/dispatch",
-  "version": "0.40.4",
+  "version": "0.40.5",
   "description": "Dispatch — workspace control plane for agent-native apps. Vault, integrations, destinations, scheduled jobs, and cross-app delegation, shipped as a single drop-in package.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -89,7 +89,7 @@
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
     "zod": "^4.3.6",
-    "@agent-native/toolkit": "0.198.3"
+    "@agent-native/toolkit": "0.198.4"
   },
   "devDependencies": {
     "@react-router/dev": "^8.1.0",
@@ -103,7 +103,7 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "0.198.3"
+    "@agent-native/core": "0.198.4"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.8.0",

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

@@ -2,4 +2,4 @@ export {
   AppOpenActions,
   type AppOpenActionLabels,
   type AppOpenActionMenuItem,
-} from "@agent-native/toolkit/app/chat/chat-first";
+} from "@agent-native/toolkit/app/chat/chat-first/app-open-actions";

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

@@ -1,4 +1,4 @@
-import { APP_ACTION_MENU_CONTENT_CLASS } from "@agent-native/toolkit/app/chat/chat-first";
+import { APP_ACTION_MENU_CONTENT_CLASS } from "@agent-native/toolkit/app/chat/chat-first/app-open-actions";
 import { IconPlus, IconSettings } from "@tabler/icons-react";
 
 import { Button } from "./ui/button";

package/src/components/chat-home-apps.tsx

@@ -1,5 +1,5 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { AppOpenActions } from "@agent-native/toolkit/app/chat/chat-first";
+import { AppOpenActions } from "@agent-native/toolkit/app/chat/chat-first/app-open-actions";
 import { IconArrowUpRight, IconPlus } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import { Link } from "react-router";

package/src/components/deferred-chat-components.tsx

@@ -0,0 +1,96 @@
+import {
+  LazyChunkErrorBoundary,
+  LazyChunkRetryFallback,
+} from "@agent-native/toolkit/app/shared";
+import { lazy, Suspense, type ComponentProps, type ComponentType } from "react";
+
+function defer<T extends ComponentType<any>>(
+  loader: () => Promise<{ default: T }>,
+): ComponentType<ComponentProps<T>> {
+  const LazyComponent = lazy(loader);
+  return function DeferredComponent(props: ComponentProps<T>) {
+    return (
+      <LazyChunkErrorBoundary fallback={<LazyChunkRetryFallback />}>
+        <Suspense fallback={null}>
+          <LazyComponent {...props} />
+        </Suspense>
+      </LazyChunkErrorBoundary>
+    );
+  };
+}
+
+export const AgentChatSurface = defer(() =>
+  import("@agent-native/toolkit/app/chat/AgentPanel").then((module) => ({
+    default: module.AgentChatSurface,
+  })),
+);
+
+export const ChatFirstAgentsPane = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/agents-pane").then(
+    (module) => ({ default: module.ChatFirstAgentsPane }),
+  ),
+);
+
+export const ChatFirstAppPane = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/app-pane").then(
+    (module) => ({ default: module.ChatFirstAppPane }),
+  ),
+);
+
+export const ChatFirstAppsRail = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/apps-rail").then(
+    (module) => ({
+      default: module.ChatFirstAppsRail,
+    }),
+  ),
+);
+
+export const ChatFirstBrowserPane = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/browser-pane").then(
+    (module) => ({ default: module.ChatFirstBrowserPane }),
+  ),
+);
+
+export const ChatFirstChatHistory = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/chat-history").then(
+    (module) => ({ default: module.ChatFirstChatHistory }),
+  ),
+);
+
+export const ChatFirstPrimaryNavigation = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/primary-nav").then(
+    (module) => ({
+      default: module.ChatFirstPrimaryNavigation,
+    }),
+  ),
+);
+
+export const ChatFirstSessionWatchPane = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/session-watch-pane").then(
+    (module) => ({ default: module.ChatFirstSessionWatchPane }),
+  ),
+);
+
+export const ChatFirstSurfaceContent = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/surface-tabs").then(
+    (module) => ({ default: module.ChatFirstSurfaceContent }),
+  ),
+);
+
+export const ChatFirstSurfacePanel = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/surface-panel").then(
+    (module) => ({ default: module.ChatFirstSurfacePanel }),
+  ),
+);
+
+export const ChatFirstSurfacePanelToggle = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/ChatFirstSurfacePanelToggle").then(
+    (module) => ({ default: module.ChatFirstSurfacePanelToggle }),
+  ),
+);
+
+export const ChatFirstSurfaceTabs = defer(() =>
+  import("@agent-native/toolkit/app/chat/chat-first/surface-tabs").then(
+    (module) => ({ default: module.ChatFirstSurfaceTabs }),
+  ),
+);

package/src/components/layout/Header.tsx

@@ -1,4 +1,4 @@
-import { AgentToggleButton } from "@agent-native/toolkit/app/chat";
+import { AgentToggleButton } from "@agent-native/toolkit/app/chat/AgentSidebar";
 import { RunsTray } from "@agent-native/toolkit/app/progress";
 import { IconLayoutSidebar } from "@tabler/icons-react";
 import { useLocation, useNavigate } from "react-router";

package/src/components/layout/Layout.app-chat.spec.ts

@@ -28,6 +28,13 @@ describe("Dispatch layout scrolling", () => {
 });
 
 describe("Dispatch workspace app chat rail", () => {
+  it("keeps ChatFirst panes behind the deferred component entrypoint", () => {
+    expect(railSource).toContain('from "./deferred-chat-components.js"');
+    expect(railSource).not.toMatch(
+      /^import\s+(?!type\b)[^;]*?\sfrom "@agent-native\/toolkit\/app\/chat\/chat-first";/m,
+    );
+  });
+
   it("routes the open-app rail through the shared app-chat component", () => {
     expect(layoutSource).toContain("<WorkspaceAppChatRail");
     expect(layoutSource).toContain("workspaceAppChatRegistration ? (");

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

@@ -71,9 +71,7 @@ vi.mock("@agent-native/core/client/agent-chat", async (importOriginal) => ({
   }),
 }));
 
-vi.mock("@agent-native/toolkit/app/chat", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("@agent-native/toolkit/app/chat")>()),
-  AgentChatSurface: () => null,
+vi.mock("@agent-native/toolkit/app/chat/AgentSidebar", () => ({
   AgentToggleButton: () => null,
   AgentSidebar: ({ children }: { children: React.ReactNode }) => (
     <div data-agent-sidebar>{children}</div>
@@ -81,6 +79,11 @@ vi.mock("@agent-native/toolkit/app/chat", async (importOriginal) => ({
   focusAgentChat: vi.fn(),
 }));
 
+vi.mock("../deferred-chat-components.js", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../deferred-chat-components.js")>()),
+  AgentChatSurface: () => null,
+}));
+
 vi.mock("@agent-native/core/client/api-path", () => ({
   agentNativePath: (path: string) => path,
   appBasePath: () => clientState.basePath,

package/src/components/layout/Layout.tsx

@@ -42,30 +42,18 @@ import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { SETTINGS_REDESIGN_FLAG } from "@agent-native/core/feature-flags/registry";
 import {
-  AgentChatSurface,
   AgentToggleButton,
   AgentSidebar,
   focusAgentChat,
-} from "@agent-native/toolkit/app/chat";
-import { ChatFirstSurfacePanelToggle } from "@agent-native/toolkit/app/chat/chat-first";
-import {
-  ChatFirstAgentsPane,
-  ChatFirstAppPane,
-  ChatFirstAppsRail,
-  ChatFirstBrowserPane,
-  ChatFirstChatHistory,
-  ChatFirstPrimaryNavigation,
-  ChatFirstSessionWatchPane,
-  ChatFirstSurfacePanel,
-  ChatFirstSurfaceContent,
-  ChatFirstSurfaceTabs,
-  defaultChatFirstCopy,
-  type ChatFirstAgentActivity,
-  type ChatFirstAppItem,
-  type ChatFirstCopy,
-  type ChatFirstEmbedTarget,
-  type ChatFirstPrimaryTab,
-} from "@agent-native/toolkit/app/chat/chat-first";
+} from "@agent-native/toolkit/app/chat/AgentSidebar";
+import { defaultChatFirstCopy } from "@agent-native/toolkit/app/chat/chat-first-copy";
+import type { ChatFirstPrimaryTab } from "@agent-native/toolkit/app/chat/chat-first/primary-nav";
+import type {
+  ChatFirstAgentActivity,
+  ChatFirstAppItem,
+  ChatFirstCopy,
+  ChatFirstEmbedTarget,
+} from "@agent-native/toolkit/app/chat/chat-first/types";
 import { FeedbackButton } from "@agent-native/toolkit/app/feedback";
 import { InvitationBanner, OrgSwitcher } from "@agent-native/toolkit/app/org";
 import { RunsTray } from "@agent-native/toolkit/app/progress";
@@ -132,6 +120,20 @@ import {
 import { CHAT_FIRST_PANE_STATE_KEY } from "../../shared/chat-first-pane";
 import { AppIcon } from "../app-icon";
 import { CreateAppPopover } from "../create-app-popover";
+import {
+  AgentChatSurface,
+  ChatFirstAgentsPane,
+  ChatFirstAppPane,
+  ChatFirstAppsRail,
+  ChatFirstBrowserPane,
+  ChatFirstChatHistory,
+  ChatFirstPrimaryNavigation,
+  ChatFirstSessionWatchPane,
+  ChatFirstSurfaceContent,
+  ChatFirstSurfacePanel,
+  ChatFirstSurfacePanelToggle,
+  ChatFirstSurfaceTabs,
+} from "../deferred-chat-components.js";
 import { Button } from "../ui/button";
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "../ui/sheet";
 import { Skeleton } from "../ui/skeleton";

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

@@ -3,7 +3,7 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { APP_ACTION_MENU_CONTENT_CLASS } from "@agent-native/toolkit/app/chat/chat-first";
+import { APP_ACTION_MENU_CONTENT_CLASS } from "@agent-native/toolkit/app/chat/chat-first/app-open-actions";
 import { ShareButton } from "@agent-native/toolkit/app/sharing";
 import {
   IconChevronDown,

package/src/components/workspace-app-chat-rail.spec.tsx

@@ -10,7 +10,7 @@ const railState = vi.hoisted(() => ({
   mutateAsync: vi.fn().mockResolvedValue({ startUrl: "about:blank" }),
 }));
 
-vi.mock("@agent-native/toolkit/app/chat", () => ({
+vi.mock("@agent-native/toolkit/app/chat/AgentSidebar", () => ({
   AgentSidebar: (props: Record<string, unknown>) => {
     railState.sidebarProps.push(props);
     return (
@@ -25,10 +25,13 @@ vi.mock("@agent-native/core/client/api-path", () => ({
   agentNativePath: (path: string) => path,
 }));
 
-vi.mock("@agent-native/toolkit/app/chat/chat-first", () => ({
+vi.mock("@agent-native/toolkit/app/chat/chat-first/app-pane", () => ({
   ChatFirstAppPane: ({ app }: { app: { name: string } | null }) => (
     <div data-app-pane>{app?.name}</div>
   ),
+}));
+
+vi.mock("@agent-native/toolkit/app/chat/chat-first-copy", () => ({
   defaultChatFirstCopy: (key: string) => key,
 }));
 

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

@@ -47,14 +47,7 @@ const clientState = vi.hoisted(() => {
   };
 });
 
-vi.mock("@agent-native/toolkit/app/chat/chat-first", () => ({
-  CHAT_FIRST_DEFAULT_APP_IDS: [
-    "content",
-    "design",
-    "mail",
-    "calendar",
-    "clips",
-  ],
+vi.mock("@agent-native/toolkit/app/chat/chat-first/app-pane", () => ({
   ChatFirstAppPane: ({
     app,
     embedUrl,
@@ -88,10 +81,13 @@ vi.mock("@agent-native/toolkit/app/chat/chat-first", () => ({
         : null}
     </div>
   ),
+}));
+
+vi.mock("@agent-native/toolkit/app/chat/chat-first-copy", () => ({
   defaultChatFirstCopy: (key: string) => key,
 }));
 
-vi.mock("@agent-native/toolkit/app/chat", () => ({
+vi.mock("@agent-native/toolkit/app/chat/AgentSidebar", () => ({
   AgentSidebar: () => null,
 }));
 

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

@@ -7,12 +7,9 @@ import {
 import { useT } from "@agent-native/core/client/i18n";
 import { AGENT_NATIVE_WORKSPACE_APP_ROUTE_MESSAGE_TYPE } from "@agent-native/core/client/navigation";
 import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
-import { AgentSidebar } from "@agent-native/toolkit/app/chat";
-import {
-  ChatFirstAppPane,
-  defaultChatFirstCopy,
-  type ChatFirstCopy,
-} from "@agent-native/toolkit/app/chat/chat-first";
+import { AgentSidebar } from "@agent-native/toolkit/app/chat/AgentSidebar";
+import { defaultChatFirstCopy } from "@agent-native/toolkit/app/chat/chat-first-copy";
+import type { ChatFirstCopy } from "@agent-native/toolkit/app/chat/chat-first/types";
 import {
   IconAlertTriangle,
   IconArrowLeft,
@@ -43,6 +40,7 @@ import {
 import { DISPATCH_WORKSPACE_SSO_FLAG } from "../shared/feature-flags";
 import { workspaceAppChatProxyPath } from "../shared/workspace-app-chat";
 import { ActionQueryError } from "./action-query-error";
+import { ChatFirstAppPane } from "./deferred-chat-components.js";
 import { Alert, AlertDescription } from "./ui/alert";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";

package/src/lib/workspace-apps.ts

@@ -1,3 +1,4 @@
+import { CHAT_FIRST_DEFAULT_APP_IDS } from "@agent-native/core/client/chat-first-state";
 import {
   getClientSurface,
   isInBuilderFrame,
@@ -7,7 +8,6 @@ import {
   resolveEnvironmentTargets,
   withBuilderUtmTrackingParams,
 } from "@agent-native/core/shared";
-import { CHAT_FIRST_DEFAULT_APP_IDS } from "@agent-native/toolkit/app/chat/chat-first";
 
 import {
   CANONICAL_WORKSPACE_SSO_APP_ORIGINS,

package/src/routes/pages/browser-chat.spec.tsx

@@ -12,7 +12,7 @@ const browserChat = vi.hoisted(() => ({
   surfaceProps: null as Record<string, unknown> | null,
 }));
 
-vi.mock("@agent-native/toolkit/app/chat", () => ({
+vi.mock("@agent-native/toolkit/app/chat/AgentPanel", () => ({
   AgentChatSurface: (props: Record<string, unknown>) => {
     browserChat.surfaceProps = props;
     return <div data-testid="browser-agent-chat" />;

package/src/routes/pages/browser-chat.tsx

@@ -1,6 +1,6 @@
 import { isEmbedAuthActive } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
-import { AgentChatSurface } from "@agent-native/toolkit/app/chat";
+import { AgentChatSurface } from "@agent-native/toolkit/app/chat/AgentPanel";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router";
 

package/src/routes/pages/chat.spec.tsx

@@ -41,7 +41,7 @@ vi.mock("@agent-native/core/client/agent-chat", () => ({
   sendToAgentChat: vi.fn(),
 }));
 
-vi.mock("@agent-native/toolkit/app/chat", () => ({
+vi.mock("@agent-native/toolkit/app/chat/AgentChatHome", () => ({
   AgentChatHome: (props: Record<string, unknown>) => {
     clientState.surfaceProps = { mode: "page", ...props };
     return (
@@ -317,6 +317,9 @@ describe("Dispatch ChatRoute", () => {
 
     expect(clientState.surfaceProps?.suggestions).toEqual([]);
     expect(clientState.surfaceProps?.contentClassName).toBe("max-w-none");
+    expect(clientState.surfaceProps?.surfaceClassName).toBe(
+      "dispatch-chat-panel",
+    );
     expect(container.textContent).not.toContain("Request ID");
   });
 });

package/src/routes/pages/chat.tsx

@@ -9,7 +9,7 @@ import { useT } from "@agent-native/core/client/i18n";
 import {
   AgentChatHome,
   type AgentChatHomeProps,
-} from "@agent-native/toolkit/app/chat";
+} from "@agent-native/toolkit/app/chat/AgentChatHome";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
 
@@ -273,7 +273,7 @@ export default function ChatRoute() {
         key={agent ? `agent-${agent.id}` : "dispatch"}
         className="flex-1 min-h-0"
         contentClassName="max-w-none"
-        surfaceClassName="dispatch-chat-panel px-4 sm:px-6"
+        surfaceClassName="dispatch-chat-panel"
         chatViewTransition
         defaultMode="chat"
         storageKey={agent ? `dispatch-agent-${agent.id}` : "dispatch"}