@agent-native/toolkit 0.198.3 → 0.198.4

package/src/app/org/OrgGeneralSection.tsx

@@ -1,3 +1,4 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useIconPickerLabels, useT } from "@agent-native/core/client/i18n";
 import {
   useOrg,
@@ -8,8 +9,11 @@ import {
   useSwitchOrg,
   useSetOrgWorkspaceUrl,
 } from "@agent-native/core/client/org";
-import { uploadEditorImage } from "@agent-native/core/client/uploads";
-import { useFileUploadStatus } from "@agent-native/core/client/uploads/use-file-upload-status";
+import {
+  uploadWorkspacePrivateIcon,
+  workspacePrivateIconLibraryUrl,
+  workspacePrivateIconUrl,
+} from "@agent-native/core/client/uploads";
 import type { IconValue } from "@agent-native/core/icons";
 import { docsUrl } from "@agent-native/core/shared/docs-url";
 import { ResourceIcon, ResourceIconPicker } from "@agent-native/toolkit/icons";
@@ -368,31 +372,37 @@ export function OrgIconControl({
 }) {
   const t = useT();
   const iconPickerLabels = useIconPickerLabels();
-  const fileUploadStatus = useFileUploadStatus(canEdit);
-  const fileStorageConfigured =
-    fileUploadStatus.data?.configured === true && !fileUploadStatus.isError;
+  const { data: org } = useOrg();
+  const uploadedIcons = useActionQuery<{
+    assets: Array<{ id: string; alt?: string }>;
+  }>("list-workspace-icons", {}, { enabled: canEdit && !!org?.orgId });
   return canEdit ? (
     <ResourceIconPicker
       value={icon}
+      uploadedImages={(uploadedIcons.data?.assets ?? []).map((asset) => ({
+        version: 1,
+        kind: "image",
+        authority: "private-icon",
+        assetId: asset.id,
+        ...(asset.alt ? { alt: asset.alt } : {}),
+      }))}
+      uploadedImagesError={Boolean(uploadedIcons.error)}
+      onUploadedImagesRetry={() => {
+        void uploadedIcons.refetch();
+      }}
       onValueChange={async (next) => {
         await setVisualIdentity.mutateAsync(next);
       }}
-      onUpload={
-        fileStorageConfigured
-          ? async (file) => {
-              const uploaded = await uploadEditorImage(file);
-              return {
-                version: 1,
-                kind: "image",
-                authority: "url",
-                assetId: uploaded.src,
-                alt: uploaded.alt || file.name,
-              };
-            }
-          : undefined
-      }
+      onUpload={async (file) => {
+        const uploaded = await uploadWorkspacePrivateIcon(file);
+        void uploadedIcons.refetch();
+        return uploaded;
+      }}
+      formatUploadError={() => iconPickerLabels.uploadFailed}
       resolveImageUrl={(image) =>
-        image.authority === "url" ? image.assetId : undefined
+        image.assetId === (icon?.kind === "image" ? icon.assetId : null)
+          ? workspacePrivateIconUrl(org?.orgId ?? "", image)
+          : workspacePrivateIconLibraryUrl(org?.orgId ?? "", image)
       }
       disabled={setVisualIdentity.isPending}
       labels={{
@@ -439,7 +449,7 @@ export function OrgIconControl({
           value={icon}
           size={16}
           resolveImageUrl={(image) =>
-            image.authority === "url" ? image.assetId : undefined
+            workspacePrivateIconUrl(org?.orgId ?? "", image)
           }
           fallback={<IconUsersGroup className="size-4 text-muted-foreground" />}
         />
@@ -450,7 +460,7 @@ export function OrgIconControl({
       value={icon}
       size={16}
       resolveImageUrl={(image) =>
-        image.authority === "url" ? image.assetId : undefined
+        workspacePrivateIconUrl(org?.orgId ?? "", image)
       }
       fallback={<IconUsersGroup className="size-4 text-muted-foreground" />}
     />

package/src/app/org/OrgSwitcher.tsx

@@ -11,6 +11,7 @@ import {
   useJoinByDomain,
 } from "@agent-native/core/client/org";
 import { signOut } from "@agent-native/core/client/sign-out";
+import { workspacePrivateIconUrl } from "@agent-native/core/client/uploads";
 import { setBrowserDemoModeEnabled } from "@agent-native/core/demo/browser-state";
 import { buildSettingsRoute } from "@agent-native/core/navigation";
 import { shouldOfferWorkspace } from "@agent-native/core/org/workspace-url";
@@ -503,7 +504,7 @@ export function OrgSwitcher({
               value={org.icon}
               size={12}
               resolveImageUrl={(image) =>
-                image.authority === "url" ? image.assetId : undefined
+                workspacePrivateIconUrl(org.orgId ?? "", image)
               }
               fallback={<IconBriefcase className="size-3 shrink-0" />}
             />
@@ -585,7 +586,7 @@ export function OrgSwitcher({
                 value={o.icon}
                 size={14}
                 resolveImageUrl={(image) =>
-                  image.authority === "url" ? image.assetId : undefined
+                  workspacePrivateIconUrl(o.orgId, image)
                 }
                 fallback={<IconBriefcase className={ITEM_ICON_CLASS} />}
               />

package/src/app/org/workspace-app-links.spec.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   defaultOrgAppLinks,
   dispatchAppsHref,
+  dispatchIntegrationsHref,
   isWorkspaceAppEnvironment,
   parseWorkspaceAppLinks,
   visibleOrgAppLinks,
@@ -66,6 +67,9 @@ describe("org switcher app links", () => {
     expect(dispatchAppsHref(apps ?? [])).toBe(
       "http://127.0.0.1:8080/dispatch/apps",
     );
+    expect(dispatchIntegrationsHref(apps ?? [])).toBe(
+      "http://127.0.0.1:8080/dispatch/integrations",
+    );
   });
 
   it("uses a published custom home path for workspace app links", () => {

package/src/app/org/workspace-app-links.ts

@@ -266,7 +266,7 @@ export function isWorkspaceAppEnvironment(
 
 function dispatchPageHref(
   apps: OrgSwitcherAppLink[],
-  page: "overview" | "apps" | "vault" | "workspace",
+  page: "overview" | "apps" | "vault" | "workspace" | "integrations",
   env: RuntimeEnv,
 ): string {
   const dispatch = apps.find((app) => app.isDispatch);
@@ -303,6 +303,13 @@ export function dispatchResourcesHref(
   return dispatchPageHref(apps, "workspace", env);
 }
 
+export function dispatchIntegrationsHref(
+  apps: OrgSwitcherAppLink[],
+  env: RuntimeEnv = runtimeEnv(),
+): string {
+  return dispatchPageHref(apps, "integrations", env);
+}
+
 export function visibleOrgAppLinks(
   apps: OrgSwitcherAppLink[],
   max = ORG_SWITCHER_MAX_APP_LINKS,

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");