@agent-native/dispatch 0.26.0 → 0.27.1

package/src/components/create-app-popover.spec.tsx

@@ -216,6 +216,26 @@ describe("CreateAppFlow", () => {
     ).toBe(false);
   });
 
+  it("reuses an empty local chat for direct dev-mode app creation", async () => {
+    devState.isDevMode = true;
+
+    await renderAndSubmit("Build a quality dashboard");
+
+    expect(sendToAgentChatMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        submit: true,
+        type: "code",
+        newTab: true,
+        reuseEmptyTab: true,
+      }),
+    );
+    expect(
+      fetchSpy.mock.calls.some(([input]) =>
+        String(input).includes("start-workspace-app-creation"),
+      ),
+    ).toBe(false);
+  });
+
   it("opens a fresh local chat when the server hands off app creation", async () => {
     startWorkspaceAppCreationResponse.result = {
       mode: "local-agent",

package/src/components/create-app-popover.tsx

@@ -253,7 +253,13 @@ export function CreateAppFlow({
         setStatusMessage("Sent to Builder chat.");
         onClose?.();
       } else if (isDevMode) {
-        sendToAgentChat({ message, submit: true, type: "code", newTab: true });
+        sendToAgentChat({
+          message,
+          submit: true,
+          type: "code",
+          newTab: true,
+          reuseEmptyTab: true,
+        });
         setStatusMessage("Sent to the local agent.");
         onClose?.();
       } else {

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

@@ -220,6 +220,33 @@ describe("Dispatch NavContent", () => {
     expect(lists[0].querySelector("a")?.className).toContain("size-9");
   });
 
+  it("keeps chat-first primary actions in the collapsed sidebar", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/chat"]}>
+          <TooltipProvider>
+            <NavContent
+              chatFirstMode
+              collapsed
+              chatFirstApps={[{ id: "mail", name: "Mail" }]}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    for (const label of ["New chat", "Integrations", "Search"]) {
+      expect(
+        [...container.querySelectorAll("button")].find(
+          (button) => button.textContent?.trim() === label,
+        ),
+      ).toBeDefined();
+    }
+    expect(
+      container.querySelector("[data-chat-first-apps-rail]"),
+    ).not.toBeNull();
+  });
+
   it("keeps management routes out of the primary navigation", async () => {
     await act(async () => {
       root.render(

package/src/components/layout/Layout.tsx

@@ -569,6 +569,7 @@ function DispatchChatsSection({
   prelude,
   chatFirstMode = false,
   chatFirstEmbedded = false,
+  collapsed = false,
   chatFirstNavigation,
 }: {
   onNavigate?: () => void;
@@ -576,6 +577,7 @@ function DispatchChatsSection({
   prelude?: ReactNode;
   chatFirstMode?: boolean;
   chatFirstEmbedded?: boolean;
+  collapsed?: boolean;
   chatFirstNavigation?: {
     activeTab?: ChatFirstPrimaryTab;
     onNewChat?: () => void;
@@ -722,6 +724,8 @@ function DispatchChatsSection({
     if (threadId) openThread(threadId, { isNew: true });
   }
 
+  const collapsedChatFirst = collapsed && chatFirstMode;
+
   return (
     <div
       className={cn(
@@ -730,7 +734,7 @@ function DispatchChatsSection({
       )}
     >
       {showNewChat && chatFirstNavigation ? (
-        <nav className="space-y-0.5 px-2 py-2">
+        <nav className={cn("space-y-0.5 py-2", collapsed ? "px-1.5" : "px-2")}>
           <ChatFirstPrimaryNavigation
             copy={chatFirstCopy}
             onNewChat={() => {
@@ -741,11 +745,12 @@ function DispatchChatsSection({
             onOpenScheduled={chatFirstNavigation.onOpenScheduled}
             onSearch={openCommandMenu}
             activeTab={chatFirstNavigation.activeTab}
+            collapsed={collapsed}
           />
         </nav>
       ) : null}
       {prelude}
-      {!chatFirstMode ? (
+      {!collapsedChatFirst && !chatFirstMode ? (
         <div className="flex justify-end px-2 pt-0.5">
           <Tooltip>
             <TooltipTrigger asChild>
@@ -784,7 +789,8 @@ function DispatchChatsSection({
           </Tooltip>
         </div>
       ) : null}
-      {!chatFirstMode &&
+      {!collapsedChatFirst &&
+        !chatFirstMode &&
         chatsLoading &&
         visibleThreads.length === 0 &&
         Array.from({ length: 3 }).map((_, index) => (
@@ -796,7 +802,9 @@ function DispatchChatsSection({
             <Skeleton className="h-3 w-3/4 rounded" />
           </div>
         ))}
-      {chatFirstMode && (chatsLoading || visibleThreads.length > 0) ? (
+      {!collapsedChatFirst &&
+      chatFirstMode &&
+      (chatsLoading || visibleThreads.length > 0) ? (
         <ChatFirstChatHistory
           items={chatItems}
           activeId={displayedActiveThreadId}
@@ -870,7 +878,7 @@ function DispatchChatsSection({
           )}
           className="min-w-0 px-2"
         />
-      ) : (
+      ) : !collapsedChatFirst ? (
         <ChatHistoryRail
           items={chatItems}
           activeId={displayedActiveThreadId}
@@ -938,7 +946,7 @@ function DispatchChatsSection({
           )}
           className="min-w-0 px-2"
         />
-      )}
+      ) : null}
     </div>
   );
 }
@@ -1273,29 +1281,26 @@ export function NavContent({
 
       {chatFirstMode ? (
         <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
-          {!collapsed ? (
-            <DispatchChatsSection
-              onNavigate={onNavigate}
-              showNewChat
-              chatFirstMode
-              chatFirstEmbedded={chatFirstEmbedded}
-              chatFirstNavigation={{
-                activeTab: chatFirstActivePrimaryTab,
-                onNewChat: onChatFirstNewChat,
-                onOpenIntegrations: () => {
-                  navigate(dispatchNavLinkTarget("/admin/integrations"));
-                  onNavigate?.();
-                },
-                onOpenScheduled: () => {
-                  navigate(dispatchNavLinkTarget("/admin/automations"));
-                  onNavigate?.();
-                },
-              }}
-              prelude={chatFirstAppsRail}
-            />
-          ) : (
-            chatFirstAppsRail
-          )}
+          <DispatchChatsSection
+            onNavigate={onNavigate}
+            showNewChat
+            chatFirstMode
+            chatFirstEmbedded={chatFirstEmbedded}
+            collapsed={collapsed}
+            chatFirstNavigation={{
+              activeTab: chatFirstActivePrimaryTab,
+              onNewChat: onChatFirstNewChat,
+              onOpenIntegrations: () => {
+                navigate(dispatchNavLinkTarget("/admin/integrations"));
+                onNavigate?.();
+              },
+              onOpenScheduled: () => {
+                navigate(dispatchNavLinkTarget("/admin/automations"));
+                onNavigate?.();
+              },
+            }}
+            prelude={chatFirstAppsRail}
+          />
         </div>
       ) : null}
       <div
@@ -2374,7 +2379,7 @@ export function Layout({
   const content = isChatRoute ? (
     <div
       className={cn(
-        "agent-layout-main-surface flex min-w-0 flex-1 overflow-hidden",
+        "agent-layout-main-surface flex h-full min-w-0 flex-1 overflow-hidden",
         chatFirstMode && "dispatch-chat-first-surface",
       )}
     >

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

@@ -14,13 +14,28 @@ const clientState = vi.hoisted(() => {
   const actionNames: string[] = [];
   return {
     actionNames,
+    grantedApps: [
+      {
+        id: "analytics.agent-native.com",
+        name: "Analytics",
+        url: "https://analytics.agent-native.com",
+      },
+    ],
     legacyMutateAsync,
+    theme: "dark" as "dark" | "light",
     workspaceSsoEnabled: false,
     workspaceSsoMutateAsync,
   };
 });
 
 vi.mock("@agent-native/core/client/chat-first", () => ({
+  CHAT_FIRST_DEFAULT_APP_IDS: [
+    "content",
+    "design",
+    "mail",
+    "calendar",
+    "clips",
+  ],
   ChatFirstAppPane: ({
     app,
     embedUrl,
@@ -55,31 +70,40 @@ vi.mock("@agent-native/core/client/hooks", () => ({
           : clientState.legacyMutateAsync,
     };
   },
-  useActionQuery: () => ({
-    data: [
-      { id: "mail", name: "Mail", path: "/mail", url: null, status: "ready" },
-      {
-        id: "calendar",
-        name: "Calendar",
-        path: "/calendar",
-        url: null,
-        status: "ready",
-      },
-      {
-        id: "documents",
-        name: "Documents",
-        path: "/documents",
-        url: null,
-        status: "ready",
-      },
-      {
-        id: "settings",
-        name: "Settings",
-        path: "/settings",
-        url: null,
-        status: "ready",
-      },
-    ],
+  useActionQuery: (name: string) => ({
+    data:
+      name === "list_apps"
+        ? { apps: clientState.grantedApps }
+        : [
+            {
+              id: "mail",
+              name: "Mail",
+              path: "/mail",
+              url: null,
+              status: "ready",
+            },
+            {
+              id: "calendar",
+              name: "Calendar",
+              path: "/calendar",
+              url: null,
+              status: "ready",
+            },
+            {
+              id: "documents",
+              name: "Documents",
+              path: "/documents",
+              url: null,
+              status: "ready",
+            },
+            {
+              id: "settings",
+              name: "Settings",
+              path: "/settings",
+              url: null,
+              status: "ready",
+            },
+          ],
     isError: false,
     isLoading: false,
     refetch: vi.fn(),
@@ -90,6 +114,10 @@ vi.mock("@agent-native/core/client/i18n", () => ({
   useT: () => (key: string) => key,
 }));
 
+vi.mock("next-themes", () => ({
+  useTheme: () => ({ resolvedTheme: clientState.theme }),
+}));
+
 import { WorkspaceAppFrame, WorkspaceAppKeepAlive } from "./workspace-app-host";
 
 describe("WorkspaceAppKeepAlive", () => {
@@ -104,6 +132,7 @@ describe("WorkspaceAppKeepAlive", () => {
     clientState.actionNames.length = 0;
     clientState.legacyMutateAsync.mockClear();
     clientState.workspaceSsoMutateAsync.mockClear();
+    clientState.theme = "dark";
     clientState.workspaceSsoEnabled = false;
   });
 
@@ -144,6 +173,30 @@ describe("WorkspaceAppKeepAlive", () => {
     expect(container.querySelectorAll("iframe")).toHaveLength(2);
   });
 
+  it("resolves a granted external app instead of showing app not found", async () => {
+    await act(async () => {
+      root.render(
+        <WorkspaceAppKeepAlive activeAppId="analytics.agent-native.com" />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(
+      container.querySelector(
+        '[data-dispatch-workspace-app-cache-entry="analytics.agent-native.com"]',
+      ),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('[data-chat-first-app-status="ready"]'),
+    ).not.toBeNull();
+    expect(clientState.legacyMutateAsync).toHaveBeenCalledWith({
+      app: "analytics.agent-native.com",
+      url: "https://analytics.agent-native.com",
+      chrome: "minimal",
+    });
+  });
+
   it("uses the app-scoped workspace session action when the rollout is enabled", async () => {
     clientState.workspaceSsoEnabled = true;
 
@@ -163,6 +216,57 @@ describe("WorkspaceAppKeepAlive", () => {
     expect(clientState.legacyMutateAsync).not.toHaveBeenCalled();
   });
 
+  it("sends the parent theme on iframe load and when the parent changes", async () => {
+    await act(async () => {
+      root.render(
+        <WorkspaceAppFrame app={{ id: "mail", name: "Mail", path: "/mail" }} />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const iframe = container.querySelector<HTMLIFrameElement>("iframe");
+    expect(iframe).not.toBeNull();
+    if (!iframe) throw new Error("Workspace app iframe was not rendered");
+
+    const postMessage = vi.fn();
+    Object.defineProperty(iframe, "contentWindow", {
+      configurable: true,
+      value: { postMessage },
+    });
+
+    await act(async () => {
+      iframe?.dispatchEvent(new Event("load"));
+      await Promise.resolve();
+    });
+
+    expect(postMessage).toHaveBeenCalledWith(
+      {
+        type: "agent-native-theme-update",
+        theme: "dark",
+        isDark: true,
+      },
+      "*",
+    );
+
+    clientState.theme = "light";
+    await act(async () => {
+      root.render(
+        <WorkspaceAppFrame app={{ id: "mail", name: "Mail", path: "/mail" }} />,
+      );
+      await Promise.resolve();
+    });
+
+    expect(postMessage).toHaveBeenLastCalledWith(
+      {
+        type: "agent-native-theme-update",
+        theme: "light",
+        isDark: false,
+      },
+      "*",
+    );
+  });
+
   it("evicts the oldest inactive app after reaching the keep-alive limit", async () => {
     await act(async () => {
       root.render(<WorkspaceAppKeepAlive activeAppId="mail" />);

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

@@ -11,12 +11,19 @@ import {
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
-import { IconArrowLeft, IconClockHour4 } from "@tabler/icons-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  IconArrowLeft,
+  IconArrowUpRight,
+  IconClockHour4,
+  IconLock,
+} from "@tabler/icons-react";
+import { useTheme } from "next-themes";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link } from "react-router";
 
 import { isEmbedSessionExpiredMessage } from "../lib/embed-session-recovery";
 import {
+  mergeChatFirstWorkspaceApps,
   workspaceAppDirectHref,
   workspaceAppEmbedTarget,
   workspaceAppHref,
@@ -39,6 +46,50 @@ interface EmbedSessionInput {
   chrome: "minimal";
 }
 
+interface GrantedWorkspaceAppSummary {
+  id: string;
+  name: string;
+  url?: string | null;
+}
+
+interface GrantedWorkspaceAppsResult {
+  apps: GrantedWorkspaceAppSummary[];
+}
+
+type WorkspaceAppTheme = "light" | "dark";
+type WorkspaceAppAuthState = "unknown" | "authenticated" | "unauthenticated";
+
+function resolveWorkspaceAppAuthState(
+  rawUrl: string | null,
+): WorkspaceAppAuthState {
+  if (!rawUrl) return "unknown";
+  try {
+    const lastSegment = new URL(rawUrl, window.location.origin).pathname
+      .split("/")
+      .filter(Boolean)
+      .at(-1)
+      ?.toLowerCase();
+    if (
+      lastSegment === "sign-in" ||
+      lastSegment === "login" ||
+      lastSegment === "signup"
+    ) {
+      return "unauthenticated";
+    }
+    return "authenticated";
+  } catch {
+    return "unknown";
+  }
+}
+
+function buildWorkspaceAppThemeUpdate(theme: WorkspaceAppTheme) {
+  return {
+    type: "agent-native-theme-update" as const,
+    theme,
+    isDark: theme === "dark",
+  };
+}
+
 export function buildChatFirstEmbedSessionInput(
   appId: string,
   path: string,
@@ -68,10 +119,38 @@ export function WorkspaceAppFrame({
   chatSidebar = false,
   copy = defaultChatFirstCopy,
 }: WorkspaceAppFrameProps) {
+  const { resolvedTheme } = useTheme();
+  const theme: WorkspaceAppTheme =
+    resolvedTheme === "dark" || resolvedTheme === "light"
+      ? resolvedTheme
+      : typeof document !== "undefined" &&
+          document.documentElement.classList.contains("dark")
+        ? "dark"
+        : "light";
   const [embedUrl, setEmbedUrl] = useState<string | null>(null);
   const [embedError, setEmbedError] = useState<Error | null>(null);
   const [embedAttempt, setEmbedAttempt] = useState(0);
+  const [authState, setAuthState] = useState<WorkspaceAppAuthState>("unknown");
   const embedFrameRef = useRef<HTMLIFrameElement>(null);
+  const postThemeToFrame = useCallback(() => {
+    embedFrameRef.current?.contentWindow?.postMessage(
+      buildWorkspaceAppThemeUpdate(theme),
+      "*",
+    );
+  }, [theme]);
+  const handleFrameLoad = useCallback(() => {
+    postThemeToFrame();
+    const frame = embedFrameRef.current;
+    let frameUrl = embedUrl;
+    try {
+      frameUrl = frame?.contentWindow?.location.href ?? frameUrl;
+      // coercion-ok: Cross-origin frames cannot expose location; their auth state arrives by message.
+    } catch {
+      // Cross-origin app frames report their auth state through postMessage.
+    }
+    const nextAuthState = resolveWorkspaceAppAuthState(frameUrl);
+    if (nextAuthState !== "unknown") setAuthState(nextAuthState);
+  }, [embedUrl, postThemeToFrame]);
   const workspaceSsoEnabled = useFeatureFlag(DISPATCH_WORKSPACE_SSO_FLAG.key);
   const createEmbedSession = useActionMutation<
     EmbedSessionResult,
@@ -108,6 +187,7 @@ export function WorkspaceAppFrame({
     let cancelled = false;
     setEmbedUrl(null);
     setEmbedError(null);
+    setAuthState("unknown");
     const createSession = workspaceSsoEnabled
       ? createWorkspaceSsoEmbedSession
       : createEmbedSession;
@@ -158,6 +238,25 @@ export function WorkspaceAppFrame({
       window.removeEventListener("message", handleEmbedSessionExpired);
   }, [embedUrl]);
 
+  useEffect(() => {
+    const handleAuthState = (event: MessageEvent) => {
+      const frame = embedFrameRef.current;
+      if (!frame || event.source !== frame.contentWindow) return;
+      if (event.data?.type !== "agentNative.authState") return;
+      const status = event.data.data?.status;
+      if (status === "authenticated" || status === "unauthenticated") {
+        setAuthState(status);
+      }
+    };
+
+    window.addEventListener("message", handleAuthState);
+    return () => window.removeEventListener("message", handleAuthState);
+  }, []);
+
+  useEffect(() => {
+    postThemeToFrame();
+  }, [embedUrl, postThemeToFrame]);
+
   const appPane = (
     <ChatFirstAppPane
       app={app}
@@ -182,6 +281,7 @@ export function WorkspaceAppFrame({
           src={url}
           title={title ?? app.name}
           ref={embedFrameRef}
+          onLoad={handleFrameLoad}
           referrerPolicy="no-referrer"
           allow="clipboard-read; clipboard-write"
           className="h-full w-full border-0 bg-background"
@@ -211,6 +311,24 @@ export function WorkspaceAppFrame({
       dynamicSuggestions={false}
       suggestions={[]}
       emptyStateText={`Ask about ${app.name}`}
+      composerSlot={
+        authState === "unauthenticated" ? (
+          <div className="flex shrink-0 items-center px-3 pb-1">
+            <button
+              type="button"
+              data-dispatch-app-sign-in
+              aria-label={`Sign in to ${app.name} on the right`}
+              title={`Sign in to ${app.name} on the right`}
+              onClick={() => embedFrameRef.current?.focus()}
+              className="inline-flex h-6 shrink-0 items-center gap-1 rounded-full border border-border/70 bg-background/60 px-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              <IconLock size={12} stroke={1.8} />
+              <span>Sign in on the right</span>
+              <IconArrowUpRight size={12} stroke={1.8} />
+            </button>
+          </div>
+        ) : null
+      }
     >
       {appPane}
     </AgentSidebar>
@@ -219,23 +337,58 @@ export function WorkspaceAppFrame({
 
 export function WorkspaceAppHost({ appId }: { appId?: string }) {
   const t = useT();
-  const appsQuery = useActionQuery("list-workspace-apps", {
-    includeAgentCards: false,
-  });
-  const { data: apps = [], isLoading } = appsQuery;
+  const workspaceAppsQuery = useActionQuery<WorkspaceAppSummary[]>(
+    "list-workspace-apps",
+    { includeAgentCards: false },
+  );
+  const grantedAppsQuery = useActionQuery<GrantedWorkspaceAppsResult>(
+    "list_apps",
+    {},
+  );
+  const apps = useMemo(() => {
+    const merged = new Map<string, WorkspaceAppSummary>();
+
+    for (const app of mergeChatFirstWorkspaceApps(workspaceAppsQuery.data)) {
+      merged.set(app.id.trim().toLowerCase(), app);
+    }
+    for (const app of grantedAppsQuery.data?.apps ?? []) {
+      const id = app.id.trim();
+      if (!id || merged.has(id.toLowerCase())) continue;
+      merged.set(id.toLowerCase(), {
+        id,
+        name: app.name.trim() || id,
+        path: "",
+        url: app.url?.trim() || null,
+        status: "ready",
+      });
+    }
+
+    return [...merged.values()];
+  }, [grantedAppsQuery.data?.apps, workspaceAppsQuery.data]);
   const app = useMemo(
     () =>
-      (apps as WorkspaceAppSummary[]).find((item) => item.id === appId) ?? null,
+      apps.find(
+        (item) => item.id.trim().toLowerCase() === appId?.trim().toLowerCase(),
+      ) ?? null,
     [appId, apps],
   );
+  const isLoading = workspaceAppsQuery.isLoading || grantedAppsQuery.isLoading;
+  const queryError = workspaceAppsQuery.isError
+    ? workspaceAppsQuery.error
+    : grantedAppsQuery.isError
+      ? grantedAppsQuery.error
+      : null;
 
-  if (appsQuery.isError) {
+  if (queryError && !app) {
     return (
       <div className="flex h-full min-h-0 items-center justify-center p-6">
         <div className="w-full max-w-2xl">
           <ActionQueryError
-            error={appsQuery.error}
-            onRetry={() => void appsQuery.refetch()}
+            error={queryError}
+            onRetry={() => {
+              void workspaceAppsQuery.refetch();
+              void grantedAppsQuery.refetch();
+            }}
           />
         </div>
       </div>