@agent-native/toolkit 0.198.3 → 0.198.5

package/src/app/resources/McpAgentKitConnectionRequest.spec.tsx

@@ -1,15 +1,79 @@
 // @vitest-environment happy-dom
 
-import { saveMcpConnectionResume } from "@agent-native/core/client/resources/mcp-connection-resume";
+import { openOAuthPopup } from "@agent-native/core/client/oauth-popup";
+import {
+  clearMcpConnectionResume,
+  consumeMcpConnectionResume,
+  notifyMcpConnectionComplete,
+  saveMcpConnectionResume,
+} from "@agent-native/core/client/resources/mcp-connection-resume";
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
+import { dispatchIntegrationsHref } from "../org/workspace-app-links.js";
 import {
   McpAgentKitConnectionRequestCard,
   McpAgentKitConnectionResume,
 } from "./McpAgentKitConnectionRequest.js";
 
+const popupState = vi.hoisted(() => ({ popup: null as unknown }));
+
+afterEach(() => {
+  clearMcpConnectionResume();
+  window.localStorage.clear();
+  vi.unstubAllEnvs();
+});
+
+vi.mock("@agent-native/core/client/oauth-popup", () => ({
+  openOAuthPopup: vi.fn(() => popupState.popup as Window | null),
+}));
+
+vi.mock("../org/workspace-app-links.js", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("../org/workspace-app-links.js")>();
+  return {
+    ...actual,
+    useOrgSwitcherAppLinks: () => ({
+      apps: [],
+      isWorkspace: false,
+      isLoading: false,
+      dispatchHref: "",
+      dispatchAllAppsHref: "",
+      dispatchVaultHref: "",
+      dispatchResourcesHref: "",
+    }),
+  };
+});
+
+vi.mock("../agentkit/react/components.js", async () => {
+  const { createElement } = await import("react");
+  return {
+    AgentConnectionRequestCard: ({
+      request,
+      retry,
+      onConnect,
+    }: {
+      request: { provider: string; status: string };
+      retry?: boolean;
+      onConnect?: () => void | boolean | Promise<void | boolean>;
+    }) => {
+      if (request.status === "connected" || request.status === "declined") {
+        return null;
+      }
+      return createElement(
+        "button",
+        {
+          type: "button",
+          "data-status": request.status,
+          onClick: () => void onConnect?.(),
+        },
+        `${retry ? "Try again" : "Connect"} ${request.provider}`,
+      );
+    },
+  };
+});
+
 describe("McpAgentKitConnectionRequestCard", () => {
   it("keeps an unknown provider request visible without trusting its setup data", () => {
     const container = document.createElement("div");
@@ -37,6 +101,311 @@ describe("McpAgentKitConnectionRequestCard", () => {
     act(() => root.unmount());
   });
 
+  it("keeps the request alive in a popup and resumes it on OAuth completion", async () => {
+    window.sessionStorage.clear();
+    vi.stubEnv("VITE_APP_BASE_PATH", "/dispatch");
+    window.history.replaceState(
+      {},
+      "",
+      "/dispatch/chat/thread-1?tab=docs#selected",
+    );
+    vi.mocked(openOAuthPopup).mockClear();
+    const locationAssign = vi.fn();
+    const popup = {
+      closed: false,
+      location: { assign: locationAssign },
+      close: vi.fn(),
+    };
+    popupState.popup = popup;
+    const onConnected = vi.fn();
+    const target = {
+      threadId: "thread-1",
+      runId: "run-1",
+      requestId: "request-1",
+    };
+    const container = document.createElement("div");
+    const root = createRoot(container);
+
+    await act(async () => {
+      root.render(
+        <>
+          <McpAgentKitConnectionRequestCard
+            provider="google_drive"
+            reason="connect"
+            appId="dispatch"
+            source={{
+              id: "google_drive",
+              kind: "workspace_connection",
+              label: "Google Drive",
+            }}
+            target={target}
+            onConnected={onConnected}
+            onDeclined={() => undefined}
+          />
+          <McpAgentKitConnectionResume
+            onResume={() => onConnected()}
+            onMessageResume={() => undefined}
+          />
+        </>,
+      );
+    });
+    const button = container.querySelector("button");
+    await act(async () => button?.click());
+
+    expect(openOAuthPopup).toHaveBeenCalledWith({
+      features: "width=640,height=760",
+    });
+    const oauthUrl = new URL(
+      locationAssign.mock.calls[0]![0],
+      window.location.origin,
+    );
+    expect(oauthUrl.pathname).toContain(
+      "/connections/oauth/google_drive/start",
+    );
+    expect(oauthUrl.searchParams.get("appId")).toBe("dispatch");
+    expect(oauthUrl.searchParams.get("scope")).toBe("user");
+    const returnPath = oauthUrl.searchParams.get("return");
+    expect(returnPath).toContain(
+      "/_agent-native/oauth/popup?complete=workspace-connection&resume=",
+    );
+    expect(returnPath).not.toContain("#selected");
+    expect(consumeMcpConnectionResume()).toBeNull();
+    const completionId = new URL(
+      returnPath!,
+      window.location.origin,
+    ).searchParams.get("resume");
+    expect(completionId).toMatch(
+      /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/,
+    );
+
+    await act(async () => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: { type: "agent-native:workspace-connection-complete" },
+          origin: "https://untrusted.example",
+          source: popup as unknown as MessageEventSource,
+        }),
+      );
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: { type: "agent-native:workspace-connection-complete" },
+          origin: window.location.origin,
+          source: null,
+        }),
+      );
+      await Promise.resolve();
+    });
+    expect(onConnected).not.toHaveBeenCalled();
+
+    act(() => root.unmount());
+    expect(popup.close).not.toHaveBeenCalled();
+    const resumedRoot = createRoot(container);
+    await act(async () => {
+      notifyMcpConnectionComplete(completionId!);
+      resumedRoot.render(
+        <McpAgentKitConnectionResume
+          onResume={() => onConnected()}
+          onMessageResume={() => undefined}
+        />,
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    expect(onConnected).toHaveBeenCalledOnce();
+    act(() => resumedRoot.unmount());
+  });
+
+  it("keeps a granted connection request pending until the user retries", async () => {
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    vi.mocked(openOAuthPopup).mockClear();
+    const locationAssign = vi.fn();
+    const popup = {
+      opener: window,
+      location: { assign: locationAssign },
+      close: vi.fn(),
+    } as unknown as Window;
+    const open = vi
+      .spyOn(window, "open")
+      .mockReturnValueOnce(null)
+      .mockReturnValue(popup);
+    const onConnected = vi.fn();
+
+    act(() => {
+      root.render(
+        <McpAgentKitConnectionRequestCard
+          provider="google_drive"
+          reason="grant"
+          appId="dispatch"
+          source={{
+            id: "google_drive",
+            kind: "workspace_connection",
+            label: "Google Drive",
+          }}
+          target={{
+            threadId: "thread-1",
+            runId: "run-1",
+            requestId: "request-1",
+          }}
+          onConnected={onConnected}
+          onDeclined={() => undefined}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Connect google_drive");
+    expect(openOAuthPopup).not.toHaveBeenCalled();
+    await act(async () => container.querySelector("button")?.click());
+    expect(open).toHaveBeenCalledWith("", "_blank");
+    expect(onConnected).not.toHaveBeenCalled();
+    expect(container.textContent).toContain("Connect google_drive");
+
+    await act(async () => container.querySelector("button")?.click());
+    expect(open).toHaveBeenCalledTimes(2);
+    expect(popup.opener).toBeNull();
+    expect(locationAssign).toHaveBeenCalledWith(dispatchIntegrationsHref([]));
+    expect(container.textContent).toContain("Try again google_drive");
+    expect(onConnected).not.toHaveBeenCalled();
+    await act(async () => container.querySelector("button")?.click());
+    expect(onConnected).toHaveBeenCalledOnce();
+
+    await act(async () => {
+      root.render(
+        <McpAgentKitConnectionRequestCard
+          provider="google_drive"
+          reason="grant"
+          status="connected"
+          appId="dispatch"
+          source={{
+            id: "google_drive",
+            kind: "workspace_connection",
+            label: "Google Drive",
+          }}
+          target={{
+            threadId: "thread-1",
+            runId: "run-1",
+            requestId: "request-1",
+          }}
+          onConnected={onConnected}
+          onDeclined={() => undefined}
+        />,
+      );
+    });
+    expect(container.querySelector("button")).toBeNull();
+
+    await act(async () => {
+      root.render(
+        <McpAgentKitConnectionRequestCard
+          provider="google_drive"
+          reason="grant"
+          status="failed"
+          appId="dispatch"
+          source={{
+            id: "google_drive",
+            kind: "workspace_connection",
+            label: "Google Drive",
+          }}
+          target={{
+            threadId: "thread-1",
+            runId: "run-1",
+            requestId: "request-1",
+          }}
+          onConnected={onConnected}
+          onDeclined={() => undefined}
+        />,
+      );
+    });
+    expect(container.querySelector("button")?.getAttribute("data-status")).toBe(
+      "failed",
+    );
+    await act(async () => container.querySelector("button")?.click());
+    expect(open).toHaveBeenCalledTimes(3);
+    expect(onConnected).toHaveBeenCalledOnce();
+    await act(async () => container.querySelector("button")?.click());
+    expect(onConnected).toHaveBeenCalledTimes(2);
+    act(() => root.unmount());
+    open.mockRestore();
+  });
+
+  it("keeps non-OAuth workspace requests pending until the user retries", async () => {
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    vi.mocked(openOAuthPopup).mockClear();
+    const locationAssign = vi.fn();
+    const popup = {
+      opener: window,
+      location: { assign: locationAssign },
+      close: vi.fn(),
+    } as unknown as Window;
+    const open = vi.spyOn(window, "open").mockReturnValue(popup);
+    const onConnected = vi.fn();
+
+    act(() => {
+      root.render(
+        <McpAgentKitConnectionRequestCard
+          provider="slack"
+          appId="dispatch"
+          source={{
+            id: "slack",
+            kind: "workspace_connection",
+            label: "Slack",
+          }}
+          target={{
+            threadId: "thread-1",
+            runId: "run-1",
+            requestId: "request-1",
+          }}
+          onConnected={onConnected}
+          onDeclined={() => undefined}
+          fallback={<div data-unsupported-provider="">Setup unavailable</div>}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Connect slack");
+    expect(openOAuthPopup).not.toHaveBeenCalled();
+    await act(async () => container.querySelector("button")?.click());
+    expect(open).toHaveBeenCalledWith("", "_blank");
+    expect(popup.opener).toBeNull();
+    expect(locationAssign).toHaveBeenCalledWith(dispatchIntegrationsHref([]));
+    expect(onConnected).not.toHaveBeenCalled();
+    expect(container.textContent).toContain("Try again slack");
+    await act(async () => container.querySelector("button")?.click());
+    expect(onConnected).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+    open.mockRestore();
+  });
+
+  it("passes terminal request state through to the shared card", () => {
+    const container = document.createElement("div");
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <McpAgentKitConnectionRequestCard
+          provider="google_drive"
+          reason="connect"
+          status="declined"
+          appId="dispatch"
+          source={{
+            id: "google_drive",
+            kind: "workspace_connection",
+            label: "Google Drive",
+          }}
+          target={{
+            threadId: "thread-1",
+            runId: "run-1",
+            requestId: "request-1",
+          }}
+          onConnected={() => undefined}
+          onDeclined={() => undefined}
+        />,
+      );
+    });
+
+    expect(container.querySelector("button")).toBeNull();
+    act(() => root.unmount());
+  });
+
   it("resumes a prose-inferred connection request through the host thread", async () => {
     window.sessionStorage.clear();
     window.history.replaceState({}, "", "/chat/thread-1");

package/src/app/resources/McpAgentKitConnectionRequest.tsx

@@ -1,5 +1,18 @@
+import type { AgentConnectionRequest } from "@agent-native/agentkit/protocol";
 import {
-  consumeMcpConnectionResume,
+  agentNativePath,
+  appBasePath,
+} from "@agent-native/core/client/api-path";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  getWorkspaceConnectionProvider,
+  workspaceProviderOAuthUrl,
+} from "@agent-native/core/client/integrations";
+import { openOAuthPopup } from "@agent-native/core/client/oauth-popup";
+import {
+  addMcpConnectionCompleteListener,
+  clearMcpConnectionResume,
+  getPendingMcpConnectionResume,
   saveMcpConnectionResume,
   type McpConnectionResumeRequest,
 } from "@agent-native/core/client/resources/mcp-connection-resume";
@@ -7,8 +20,14 @@ import {
   getDefaultMcpIntegrations,
   navigateToMcpOAuthStart,
 } from "@agent-native/core/client/resources/mcp-integration-catalog";
-import { useEffect, useMemo, useRef, type ReactNode } from "react";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 
+import { AgentConnectionRequestCard } from "../agentkit/react/components.js";
+import {
+  dispatchIntegrationsHref,
+  useOrgSwitcherAppLinks,
+} from "../org/workspace-app-links.js";
 import { McpConnectionSuggestion } from "./McpConnectionSuggestion.js";
 
 export interface McpAgentKitConnectionTarget {
@@ -20,6 +39,10 @@ export interface McpAgentKitConnectionTarget {
 export interface McpAgentKitConnectionRequestCardProps {
   provider: string;
   detail?: string;
+  reason?: AgentConnectionRequest["reason"];
+  status?: AgentConnectionRequest["status"];
+  appId?: string;
+  source?: AgentConnectionRequest["source"];
   target: McpAgentKitConnectionTarget;
   onConnected: () => void | Promise<void>;
   onDeclined: () => void | Promise<void>;
@@ -29,18 +52,35 @@ export interface McpAgentKitConnectionRequestCardProps {
 export function McpAgentKitConnectionRequestCard({
   provider,
   detail,
+  reason,
+  status = "requested",
+  appId,
+  source,
   target,
   onConnected,
   onDeclined,
   fallback = null,
 }: McpAgentKitConnectionRequestCardProps) {
   const settledRef = useRef(false);
+  const [workspaceSetupOpened, setWorkspaceSetupOpened] = useState(false);
   const integrations = useMemo(() => getDefaultMcpIntegrations(), []);
   const integration = integrations.find(
     (candidate) =>
       candidate.id.toLowerCase() === provider.trim().toLowerCase() ||
       candidate.provider.toLowerCase() === provider.trim().toLowerCase(),
   );
+  const workspaceProvider =
+    source?.kind === "workspace_connection" && source.id === provider
+      ? getWorkspaceConnectionProvider(source.id)
+      : null;
+  const needsWorkspaceSetup =
+    source?.kind === "workspace_connection" &&
+    source.id === provider &&
+    (reason === "grant" || !workspaceProvider?.oauth);
+  const { apps: workspaceApps } = useOrgSwitcherAppLinks(needsWorkspaceSetup);
+  useEffect(() => {
+    if (status === "failed") setWorkspaceSetupOpened(false);
+  }, [status]);
   const settle = async (callback: () => void | Promise<void>) => {
     if (settledRef.current) return;
     settledRef.current = true;
@@ -51,6 +91,86 @@ export function McpAgentKitConnectionRequestCard({
       throw error;
     }
   };
+  if (source?.kind === "workspace_connection") {
+    if (!workspaceProvider || !appId) return fallback;
+    const request: AgentConnectionRequest = {
+      id: target.requestId,
+      provider,
+      reason: reason ?? "connect",
+      status,
+      appId,
+      detail,
+      source,
+    };
+    if (reason === "grant" || !workspaceProvider.oauth) {
+      return (
+        <AgentConnectionRequestCard
+          request={request}
+          runId={target.runId}
+          providerLabel={source.label}
+          retry={workspaceSetupOpened}
+          onConnect={() => {
+            if (workspaceSetupOpened) return onConnected();
+            const setupWindow = window.open("", "_blank");
+            if (!setupWindow) return false;
+            try {
+              setupWindow.opener = null;
+              setupWindow.location.assign(
+                dispatchIntegrationsHref(workspaceApps),
+              );
+            } catch {
+              setupWindow.close();
+              return false;
+            }
+            setWorkspaceSetupOpened(true);
+          }}
+        />
+      );
+    }
+    return (
+      <AgentConnectionRequestCard
+        request={request}
+        runId={target.runId}
+        providerLabel={source.label}
+        onConnect={() => {
+          const popup = openOAuthPopup({ features: "width=640,height=760" });
+          if (!popup) return false;
+          const completionId = crypto.randomUUID();
+          const message = detail ?? `Continue after connecting ${provider}.`;
+          if (!saveMcpConnectionResume(message, target, completionId)) {
+            popup.close();
+            return false;
+          }
+          const returnUrl = new URL(
+            agentNativePath("/_agent-native/oauth/popup"),
+            window.location.href,
+          );
+          returnUrl.searchParams.set("complete", "workspace-connection");
+          returnUrl.searchParams.set("resume", completionId);
+          const basePath = appBasePath();
+          const hasBasePath =
+            basePath && returnUrl.pathname.startsWith(basePath + "/");
+          const returnPath =
+            (hasBasePath
+              ? returnUrl.pathname.slice(basePath.length)
+              : returnUrl.pathname) + returnUrl.search;
+          try {
+            popup.location.assign(
+              workspaceProviderOAuthUrl(source.id, {
+                appId,
+                scope: "user",
+                returnPath,
+              }),
+            );
+          } catch (error) {
+            clearMcpConnectionResume(completionId);
+            popup.close();
+            throw error;
+          }
+        }}
+      />
+    );
+  }
   if (!integration) return fallback;
   return (
     <McpConnectionSuggestion
@@ -87,14 +207,54 @@ export function McpAgentKitConnectionResume({
   onResume,
   onMessageResume,
 }: McpAgentKitConnectionResumeProps) {
+  const t = useT();
+  const onResumeRef = useRef(onResume);
+  const onMessageResumeRef = useRef(onMessageResume);
+  const processingRef = useRef(false);
+  const [failed, setFailed] = useState(false);
+  onResumeRef.current = onResume;
+  onMessageResumeRef.current = onMessageResume;
+
   useEffect(() => {
-    const pending: McpConnectionResumeRequest | null =
-      consumeMcpConnectionResume();
-    if (pending?.agentKit) {
-      void Promise.resolve(onResume(pending.agentKit, pending)).catch(() => {});
-    } else if (pending) {
-      void Promise.resolve(onMessageResume?.(pending)).catch(() => {});
-    }
-  }, [onMessageResume, onResume]);
-  return null;
+    const resumePending = async () => {
+      if (processingRef.current) return;
+      const pending = getPendingMcpConnectionResume();
+      if (!pending) return;
+      processingRef.current = true;
+      try {
+        if (pending.agentKit) {
+          try {
+            await onResumeRef.current(pending.agentKit, pending);
+          } catch (error) {
+            if (
+              !(error instanceof Error) ||
+              !error.message.startsWith("Unknown AgentKit run:") ||
+              !onMessageResumeRef.current
+            ) {
+              throw error;
+            }
+            await onMessageResumeRef.current(pending);
+          }
+        } else {
+          if (!onMessageResumeRef.current) return;
+          await onMessageResumeRef.current(pending);
+        }
+        clearMcpConnectionResume(pending);
+        setFailed(false);
+      } finally {
+        processingRef.current = false;
+      }
+    };
+    const resume = () => {
+      void resumePending().catch(() => setFailed(true));
+    };
+    resume();
+    return addMcpConnectionCompleteListener(resume);
+  }, []);
+  return failed ? (
+    <div className="agentkit-command-error" role="alert">
+      <IconAlertCircle aria-hidden="true" className="agentkit-icon" />
+      <span>{t("agentChat.connection.failed")}</span>
+    </div>
+  ) : null;
 }

package/src/app/settings/SettingsTabsPage.spec.tsx

@@ -518,6 +518,7 @@ describe("SettingsTabsPage", () => {
   });
 
   it("renders What's new markdown in the legacy settings fallback", async () => {
+    await import("../changelog/Changelog.js");
     act(() => {
       root.render(
         <SettingsTabsPage
@@ -607,11 +608,11 @@ describe("SettingsTabsPage", () => {
     ]);
   });
 
-  it("keeps shell-only app groups out of the tabbed page", () => {
+  it("keeps shell-only app groups out of the tabbed page with legacy General content", () => {
     act(() => {
       root.render(
         <SettingsTabsPage
-          general={<div>General content</div>}
+          general={<div>Legacy General content</div>}
           generalGroups={<div>App groups</div>}
           notifications={<div>Email settings</div>}
           notificationsLabel="Notifications"
@@ -644,6 +645,7 @@ describe("SettingsTabsPage", () => {
     ]);
     // `generalGroups` may call useSettingsShell(), which throws here.
     expect(container.textContent).not.toContain("App groups");
+    expect(container.textContent).toContain("Legacy General content");
   });
 
   it("visually separates app, agent, and workspace tabs", () => {

package/src/app/settings/shell/SettingsShell.spec.tsx

@@ -35,10 +35,14 @@ const appState = vi.hoisted(() => ({
   write: vi.fn(async (_key: string, value: unknown) => value),
   remove: vi.fn(async () => undefined),
 }));
-vi.mock("@agent-native/core/client/application-state", () => ({
-  writeClientAppState: appState.write,
-  deleteClientAppState: appState.remove,
-}));
+vi.mock(
+  "@agent-native/core/client/application-state",
+  async (importOriginal) => ({
+    ...(await importOriginal<Record<string, unknown>>()),
+    writeClientAppState: appState.write,
+    deleteClientAppState: appState.remove,
+  }),
+);
 
 import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
 
@@ -728,10 +732,12 @@ describe("SettingsShell", () => {
       // the router is still committing the previous navigation.
       const [, setTick] = useState(0);
       React.useEffect(() => {
-        // Several ticks land inside each 60ms loader, so the shell re-renders
-        // mid-navigation; a tick shorter than one render keeps act() from ever
-        // going idle on a slow runner.
-        const timer = setInterval(() => setTick((tick) => tick + 1), 25);
+        // Re-render during the 60ms loader without keeping act() busy forever.
+        let ticks = 0;
+        const timer = setInterval(() => {
+          setTick((tick) => tick + 1);
+          if (++ticks === 5) clearInterval(timer);
+        }, 10);
         return () => clearInterval(timer);
       }, []);
       const current = useLocation();