@agent-native/dispatch 0.24.5 → 0.25.0

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

@@ -0,0 +1,204 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const clientState = vi.hoisted(() => {
+  const legacyMutateAsync = vi.fn().mockImplementation(async () => ({
+    startUrl: "about:blank",
+  }));
+  const workspaceSsoMutateAsync = vi.fn().mockImplementation(async () => ({
+    startUrl: "about:blank",
+  }));
+  const actionNames: string[] = [];
+  return {
+    actionNames,
+    legacyMutateAsync,
+    workspaceSsoEnabled: false,
+    workspaceSsoMutateAsync,
+  };
+});
+
+vi.mock("@agent-native/core/client/chat-first", () => ({
+  ChatFirstAppPane: ({
+    app,
+    embedUrl,
+    renderEmbed,
+    status,
+  }: {
+    app: { name: string } | null;
+    embedUrl?: string | null;
+    renderEmbed: (target: { url: string; title?: string }) => React.ReactNode;
+    status: string;
+  }) => (
+    <div data-chat-first-app-status={status}>
+      {status === "ready" && embedUrl
+        ? renderEmbed({ url: embedUrl, title: app?.name })
+        : null}
+    </div>
+  ),
+  defaultChatFirstCopy: (key: string) => key,
+}));
+
+vi.mock("@agent-native/core/client/feature-flags", () => ({
+  useFeatureFlag: () => clientState.workspaceSsoEnabled,
+}));
+
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionMutation: (name: string) => {
+    clientState.actionNames.push(name);
+    return {
+      mutateAsync:
+        name === "create-workspace-app-embed-session"
+          ? clientState.workspaceSsoMutateAsync
+          : 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",
+      },
+    ],
+    isError: false,
+    isLoading: false,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => key,
+}));
+
+import { WorkspaceAppFrame, WorkspaceAppKeepAlive } from "./workspace-app-host";
+
+describe("WorkspaceAppKeepAlive", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    clientState.actionNames.length = 0;
+    clientState.legacyMutateAsync.mockClear();
+    clientState.workspaceSsoMutateAsync.mockClear();
+    clientState.workspaceSsoEnabled = false;
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps visited app frames in the DOM while hiding inactive apps", async () => {
+    await act(async () => {
+      root.render(<WorkspaceAppKeepAlive activeAppId="mail" />);
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      root.render(<WorkspaceAppKeepAlive activeAppId="calendar" />);
+      await Promise.resolve();
+    });
+
+    const mailEntry = container.querySelector<HTMLElement>(
+      '[data-dispatch-workspace-app-cache-entry="mail"]',
+    );
+    const calendarEntry = container.querySelector<HTMLElement>(
+      '[data-dispatch-workspace-app-cache-entry="calendar"]',
+    );
+
+    expect(mailEntry).not.toBeNull();
+    expect(mailEntry?.classList.contains("hidden")).toBe(true);
+    expect(mailEntry?.querySelector("iframe")).not.toBeNull();
+    expect(calendarEntry?.classList.contains("hidden")).toBe(false);
+    expect(calendarEntry?.querySelector("iframe")).not.toBeNull();
+    expect(container.querySelectorAll("iframe")).toHaveLength(2);
+  });
+
+  it("uses the app-scoped workspace session action when the rollout is enabled", async () => {
+    clientState.workspaceSsoEnabled = true;
+
+    await act(async () => {
+      root.render(
+        <WorkspaceAppFrame app={{ id: "mail", name: "Mail", path: "/mail" }} />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(clientState.workspaceSsoMutateAsync).toHaveBeenCalledWith({
+      app: "mail",
+      path: "/mail",
+      chrome: "minimal",
+    });
+    expect(clientState.legacyMutateAsync).not.toHaveBeenCalled();
+  });
+
+  it("evicts the oldest inactive app after reaching the keep-alive limit", async () => {
+    await act(async () => {
+      root.render(<WorkspaceAppKeepAlive activeAppId="mail" />);
+      await Promise.resolve();
+    });
+
+    for (const activeAppId of ["calendar", "documents", "settings"]) {
+      await act(async () => {
+        root.render(<WorkspaceAppKeepAlive activeAppId={activeAppId} />);
+        await Promise.resolve();
+      });
+    }
+
+    expect(
+      container.querySelector(
+        '[data-dispatch-workspace-app-cache-entry="mail"]',
+      ),
+    ).toBeNull();
+    expect(
+      container.querySelector(
+        '[data-dispatch-workspace-app-cache-entry="calendar"]',
+      ),
+    ).not.toBeNull();
+    expect(
+      container.querySelector(
+        '[data-dispatch-workspace-app-cache-entry="documents"]',
+      ),
+    ).not.toBeNull();
+    expect(
+      container.querySelector(
+        '[data-dispatch-workspace-app-cache-entry="settings"]',
+      ),
+    ).not.toBeNull();
+    expect(
+      container.querySelectorAll("[data-dispatch-workspace-app-cache-entry]"),
+    ).toHaveLength(3);
+    expect(container.querySelectorAll("iframe")).toHaveLength(3);
+  });
+});

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

@@ -0,0 +1,359 @@
+import {
+  ChatFirstAppPane,
+  defaultChatFirstCopy,
+  type ChatFirstCopy,
+} from "@agent-native/core/client/chat-first";
+import { useFeatureFlag } from "@agent-native/core/client/feature-flags";
+import {
+  useActionMutation,
+  useActionQuery,
+} 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 { Link } from "react-router";
+
+import { isEmbedSessionExpiredMessage } from "../lib/embed-session-recovery";
+import {
+  workspaceAppDirectHref,
+  workspaceAppEmbedTarget,
+  workspaceAppHref,
+  type WorkspaceAppSummary,
+} from "../lib/workspace-apps";
+import { DISPATCH_WORKSPACE_SSO_FLAG } from "../shared/feature-flags";
+import { ActionQueryError } from "./action-query-error";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Skeleton } from "./ui/skeleton";
+
+interface EmbedSessionResult {
+  startUrl: string;
+}
+
+interface EmbedSessionInput {
+  app?: string;
+  path?: string;
+  url?: string;
+  chrome: "minimal";
+}
+
+export function buildChatFirstEmbedSessionInput(
+  appId: string,
+  path: string,
+): EmbedSessionInput {
+  return { app: appId, path, chrome: "minimal" };
+}
+
+export interface WorkspaceAppFrameApp {
+  id: string;
+  name: string;
+  path?: string | null;
+  url?: string | null;
+}
+
+interface WorkspaceAppFrameProps {
+  app: WorkspaceAppFrameApp;
+  /** Chat-first app tabs use their own route while standalone hosts use app metadata. */
+  embedPath?: string;
+  copy?: ChatFirstCopy;
+}
+
+export function WorkspaceAppFrame({
+  app,
+  embedPath,
+  copy = defaultChatFirstCopy,
+}: WorkspaceAppFrameProps) {
+  const [embedUrl, setEmbedUrl] = useState<string | null>(null);
+  const [embedError, setEmbedError] = useState<Error | null>(null);
+  const [embedAttempt, setEmbedAttempt] = useState(0);
+  const embedFrameRef = useRef<HTMLIFrameElement>(null);
+  const workspaceSsoEnabled = useFeatureFlag(DISPATCH_WORKSPACE_SSO_FLAG.key);
+  const createEmbedSession = useActionMutation<
+    EmbedSessionResult,
+    EmbedSessionInput
+  >("create_embed_session", {
+    skipActionQueryInvalidation: true,
+  });
+  const createWorkspaceSsoEmbedSession = useActionMutation<
+    EmbedSessionResult,
+    EmbedSessionInput
+  >("create-workspace-app-embed-session", {
+    skipActionQueryInvalidation: true,
+  });
+  const appHref = workspaceAppHref({
+    id: app.id,
+    name: app.name,
+    path: app.path ?? "",
+    url: app.url,
+  });
+  const embedInput = useMemo<EmbedSessionInput | null>(() => {
+    if (embedPath !== undefined) {
+      return buildChatFirstEmbedSessionInput(app.id, embedPath);
+    }
+    if (!appHref) return null;
+    return {
+      app: app.id,
+      ...workspaceAppEmbedTarget({ path: app.path ?? "", url: app.url }),
+      chrome: "minimal",
+    };
+  }, [app.id, app.path, app.url, appHref, embedPath]);
+
+  useEffect(() => {
+    if (!embedInput) return;
+    let cancelled = false;
+    setEmbedUrl(null);
+    setEmbedError(null);
+    const createSession = workspaceSsoEnabled
+      ? createWorkspaceSsoEmbedSession
+      : createEmbedSession;
+    void createSession
+      .mutateAsync(embedInput)
+      .then((result) => {
+        if (!cancelled) setEmbedUrl(result.startUrl);
+      })
+      .catch((cause: unknown) => {
+        if (cancelled) return;
+        setEmbedUrl(
+          workspaceAppDirectHref(
+            { path: app.path ?? "", url: app.url },
+            embedPath ?? "/",
+          ),
+        );
+        setEmbedError(
+          cause instanceof Error ? cause : new Error(String(cause)),
+        );
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    app.id,
+    app.path,
+    app.url,
+    createEmbedSession.mutateAsync,
+    createWorkspaceSsoEmbedSession.mutateAsync,
+    embedInput,
+    embedPath,
+    embedAttempt,
+    workspaceSsoEnabled,
+  ]);
+
+  useEffect(() => {
+    const handleEmbedSessionExpired = (event: MessageEvent) => {
+      if (
+        !isEmbedSessionExpiredMessage(event, embedFrameRef.current, embedUrl)
+      ) {
+        return;
+      }
+      setEmbedAttempt((attempt) => attempt + 1);
+    };
+
+    window.addEventListener("message", handleEmbedSessionExpired);
+    return () =>
+      window.removeEventListener("message", handleEmbedSessionExpired);
+  }, [embedUrl]);
+
+  return (
+    <ChatFirstAppPane
+      app={app}
+      status={
+        embedUrl
+          ? "ready"
+          : embedError
+            ? "error"
+            : embedInput
+              ? "loading"
+              : "unresolved"
+      }
+      embedUrl={embedUrl}
+      errorMessage={embedError?.message}
+      onRetry={
+        embedInput ? () => setEmbedAttempt((attempt) => attempt + 1) : undefined
+      }
+      renderEmbed={({ url, title }) => (
+        <iframe
+          key={url + ":" + embedAttempt}
+          data-dispatch-workspace-app-frame
+          src={url}
+          title={title ?? app.name}
+          ref={embedFrameRef}
+          referrerPolicy="no-referrer"
+          allow="clipboard-read; clipboard-write"
+          className="h-full w-full border-0 bg-background"
+        />
+      )}
+      copy={copy}
+    />
+  );
+}
+
+export function WorkspaceAppHost({ appId }: { appId?: string }) {
+  const t = useT();
+  const appsQuery = useActionQuery("list-workspace-apps", {
+    includeAgentCards: false,
+  });
+  const { data: apps = [], isLoading } = appsQuery;
+  const app = useMemo(
+    () =>
+      (apps as WorkspaceAppSummary[]).find((item) => item.id === appId) ?? null,
+    [appId, apps],
+  );
+
+  if (appsQuery.isError) {
+    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()}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading && !app) {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center p-6">
+        <div className="w-full max-w-2xl space-y-3 rounded-xl border bg-card p-6">
+          <Skeleton className="h-5 w-48" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-2/3" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!app) {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center p-6">
+        <div className="w-full max-w-2xl rounded-xl border bg-card p-6">
+          <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
+            <Link to="/apps">
+              <IconArrowLeft size={15} className="mr-1.5" />
+              {t("dispatch.nav.apps")}
+            </Link>
+          </Button>
+          <div className="space-y-3">
+            <h2 className="text-base font-semibold text-foreground">
+              {t("dispatch.pages.appNotFound")}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              {t("dispatch.pages.pageNotFoundDescription")}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (app.status === "pending") {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center p-6">
+        <div className="w-full max-w-2xl rounded-xl border bg-card p-6">
+          <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
+            <Link to="/apps">
+              <IconArrowLeft size={15} className="mr-1.5" />
+              {t("dispatch.nav.apps")}
+            </Link>
+          </Button>
+          <div className="space-y-4">
+            <div className="flex flex-wrap items-center gap-2">
+              <h2 className="text-base font-semibold text-foreground">
+                {app.name}
+              </h2>
+              <Badge
+                variant="outline"
+                className="gap-1 border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
+              >
+                <IconClockHour4 size={12} />
+                {t("dispatch.pages.building")}
+              </Badge>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              {t("dispatch.pages.appBuildingPrefix")}{" "}
+              <span className="font-mono text-foreground">{app.path}</span>{" "}
+              {t("dispatch.pages.appBuildingSuffix")}
+            </p>
+            {app.builderUrl ? (
+              <Button asChild>
+                <a
+                  href={withBuilderUtmTrackingParams(app.builderUrl, {
+                    campaign: "product",
+                    content: "dispatch_branch",
+                  })}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {t("dispatch.pages.openBuilderBranch", {
+                    defaultValue: "Open in Builder",
+                  })}
+                </a>
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-dispatch-workspace-app-host
+      className="flex h-full min-h-0 flex-col bg-background"
+    >
+      <div className="min-h-0 flex-1 bg-muted/20">
+        <WorkspaceAppFrame app={app} />
+      </div>
+    </div>
+  );
+}
+
+const MAX_KEEP_ALIVE_APPS = 3;
+
+export function WorkspaceAppKeepAlive({
+  activeAppId,
+}: {
+  activeAppId: string | null;
+}) {
+  const [visitedAppIds, setVisitedAppIds] = useState<string[]>(() =>
+    activeAppId ? [activeAppId] : [],
+  );
+
+  useEffect(() => {
+    if (!activeAppId) return;
+    setVisitedAppIds((current) =>
+      [activeAppId, ...current.filter((appId) => appId !== activeAppId)].slice(
+        0,
+        MAX_KEEP_ALIVE_APPS,
+      ),
+    );
+  }, [activeAppId]);
+
+  const renderedAppIds =
+    activeAppId && !visitedAppIds.includes(activeAppId)
+      ? [activeAppId, ...visitedAppIds]
+      : visitedAppIds;
+
+  return (
+    <div
+      data-dispatch-workspace-app-cache
+      className={activeAppId ? "absolute inset-0 overflow-hidden" : "hidden"}
+    >
+      {renderedAppIds.map((appId) => {
+        const active = appId === activeAppId;
+        return (
+          <div
+            key={appId}
+            data-dispatch-workspace-app-cache-entry={appId}
+            aria-hidden={!active}
+            className={active ? "h-full min-h-0" : "hidden"}
+          >
+            <WorkspaceAppHost appId={appId} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/db/migrations.spec.ts

@@ -75,6 +75,10 @@ describe("dispatch migrations", () => {
     const { rows } = await exec.execute(
       "SELECT MAX(version) as version FROM dispatch_migrations",
     );
-    expect(rows[0]?.version).toBe(4);
+    expect(rows[0]?.version).toBe(5);
+    const { rows: identityRows } = await exec.execute(
+      "SELECT name FROM sqlite_master WHERE type = 'table' AND name = 'identity_sso_authorization_code'",
+    );
+    expect(identityRows).toHaveLength(1);
   });
 });

package/src/db/migrations.ts

@@ -1,4 +1,6 @@
-export const dispatchMigrations: Array<{ version: number; sql: string }> = [
+import type { MigrationEntry } from "@agent-native/core/db";
+
+export const dispatchMigrations: MigrationEntry[] = [
   {
     version: 1,
     sql: `
@@ -221,4 +223,29 @@ export const dispatchMigrations: Array<{ version: number; sql: string }> = [
       ALTER TABLE dispatch_dreams ADD COLUMN IF NOT EXISTS source_health TEXT;
     `,
   },
+  {
+    version: 5,
+    name: "identity-sso-authorization-code-table",
+    sql: `
+      CREATE TABLE IF NOT EXISTS identity_sso_authorization_code (
+        code_hash TEXT PRIMARY KEY,
+        state TEXT NOT NULL,
+        app_id TEXT NOT NULL,
+        client_id TEXT NOT NULL,
+        redirect_uri TEXT NOT NULL,
+        authority TEXT NOT NULL,
+        code_challenge TEXT NOT NULL,
+        email TEXT NOT NULL,
+        name TEXT,
+        org_domain TEXT,
+        jti TEXT NOT NULL,
+        created_at INTEGER NOT NULL,
+        expires_at INTEGER NOT NULL,
+        consumed_at INTEGER
+      );
+
+      CREATE INDEX IF NOT EXISTS identity_sso_authorization_code_expires_idx
+        ON identity_sso_authorization_code (expires_at);
+    `,
+  },
 ];

package/src/db/schema.ts

@@ -180,7 +180,7 @@ export const workspaceResources = table("workspace_resources", {
   id: text("id").primaryKey(),
   ownerEmail: text("owner_email").notNull(),
   orgId: text("org_id"),
-  kind: text("kind").notNull(), // "skill" | "instruction" | "agent" | "knowledge" | "mcp-server"
+  kind: text("kind").notNull(), // "skill" | "instruction" | "agent" | "agent-file" | "knowledge" | "mcp-server"
   name: text("name").notNull(),
   description: text("description"),
   path: text("path").notNull(), // resource path, e.g. "skills/designer.md"

package/src/hooks/use-navigation-state.spec.ts

@@ -10,6 +10,20 @@ describe("buildDispatchNavigationState", () => {
     });
   });
 
+  it("keeps the active simple agent on the chat navigation state", () => {
+    expect(
+      buildDispatchNavigationState(
+        "/chat/thread-1",
+        "?agent=agents/research-partner.md",
+      ),
+    ).toEqual({
+      view: "chat",
+      path: "/chat/thread-1",
+      threadId: "thread-1",
+      agentPath: "agents/research-partner.md",
+    });
+  });
+
   it("recognizes the embedded browser chat route", () => {
     expect(buildDispatchNavigationState("/browser-chat")).toEqual({
       view: "browser-chat",
@@ -61,6 +75,17 @@ describe("buildDispatchNavigationState", () => {
     });
   });
 
+  it("keeps simple agents and connected-agent admin routes distinct", () => {
+    expect(buildDispatchNavigationState("/agents")).toEqual({
+      view: "agents",
+      path: "/agents",
+    });
+    expect(buildDispatchNavigationState("/admin/agents")).toEqual({
+      view: "connected-agents",
+      path: "/admin/agents",
+    });
+  });
+
   it("preserves thread debug filters and selection", () => {
     expect(
       buildDispatchNavigationState(

package/src/hooks/use-navigation-state.ts

@@ -32,6 +32,7 @@ export interface NavigationState {
   query?: string;
   runId?: string;
   threadId?: string;
+  agentPath?: string;
   usageScope?: "me" | "workspace";
   usageUserEmail?: string;
 }
@@ -138,6 +139,11 @@ export function buildDispatchNavigationState(
   const threadId = threadIdFromPath(pathname);
   if (threadId) state.threadId = threadId;
 
+  if (state.view === "chat") {
+    const agentPath = new URLSearchParams(search).get("agent")?.trim();
+    if (agentPath) state.agentPath = agentPath;
+  }
+
   const extensionId = extensionIdFromPathname(pathname);
   if (extensionId) {
     state.view = "extensions";
@@ -250,6 +256,9 @@ function resolveView(
     return "extensions";
   }
   if (pathname === "/admin") return "admin";
+  if (pathname === "/admin/agents" || pathname.startsWith("/admin/agents/")) {
+    return "connected-agents";
+  }
   if (pathname.startsWith("/admin/")) {
     const adminView = resolveView(pathname.slice("/admin".length), extensions);
     return adminView === "overview" ? "admin" : adminView;
@@ -318,6 +327,8 @@ function resolvePath(
     case "resources":
       return "/admin/workspace";
     case "agents":
+      return "/agents";
+    case "connected-agents":
       return "/admin/agents";
     case "messaging":
       return "/admin/messaging";