@agent-native/toolkit 0.198.3 → 0.198.4

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

package/src/app/settings/shell/pages/app-group-pages.spec.tsx

@@ -1,5 +1,6 @@
 // @vitest-environment happy-dom
 
+import type { LabStates } from "@agent-native/core/client/labs/use-lab";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { act, Suspense } from "react";
 import { createRoot, type Root } from "react-dom/client";
@@ -32,17 +33,17 @@ vi.mock("@agent-native/core/client/app-model-default", () => ({
 }));
 
 const labsActions = vi.hoisted(() => ({
-  query: { data: undefined as Record<string, boolean> | undefined },
+  query: { data: undefined as LabStates | undefined },
   isError: false,
   mutate: vi.fn(),
 }));
 vi.mock("@agent-native/core/client/hooks", () => ({
-  useChangeVersions: () => 0,
   useDemoModeStatus: () => ({
     enabled: false,
     forced: false,
     isLoading: false,
   }),
+  useChangeVersions: () => 0,
 }));
 vi.mock("@agent-native/core/client/use-action", () => ({
   useActionQuery: () => ({
@@ -422,9 +423,13 @@ describe("app group pages", () => {
 
     it("hides labs the server didn't register once it answers", async () => {
       labsActions.query.data = {
-        "chatgpt-subscription": false,
-        "clips.wisprflow": false,
-        "clips.meetings": true,
+        "chatgpt-subscription": {
+          enabled: false,
+          source: "default",
+          mixed: false,
+        },
+        "clips.wisprflow": { enabled: false, source: "choice", mixed: false },
+        "clips.meetings": { enabled: true, source: "choice", mixed: false },
       };
       await renderPage(LabsSettingsPage, { input: { labs } });
       expect(switchFor("Retired lab")).toBeNull();
@@ -436,6 +441,31 @@ describe("app group pages", () => {
       ).toBe("true");
       expect(switchFor("Voice dictation")?.disabled).toBe(false);
     });
+
+    it("offers explicit choices for inherited mixed settings", async () => {
+      labsActions.query.data = {
+        "clips.meetings": {
+          enabled: false,
+          source: "legacy",
+          mixed: true,
+          legacyValues: { capture: false, recovery: true },
+        },
+      };
+      await renderPage(LabsSettingsPage, { input: { labs } });
+      expect(switchFor("Meetings and transcription")).toBeNull();
+      const on = container.querySelector<HTMLButtonElement>(
+        '[aria-label="Meetings and transcription: On"]',
+      );
+      expect(on?.disabled).toBe(false);
+      act(() => on?.click());
+      expect(labsActions.mutate).toHaveBeenCalledWith(
+        { key: "clips.meetings", enabled: true },
+        expect.any(Object),
+      );
+      expect(
+        switchFor("Meetings and transcription")?.getAttribute("aria-checked"),
+      ).toBe("true");
+    });
   });
 
   describe("Automations", () => {

package/src/app/settings/shell/pages/resource-pages.spec.tsx

@@ -10,6 +10,9 @@ const orgState = vi.hoisted(() => ({
   value: { orgId: "org-1", orgName: "Acme", role: "member" as string },
 }));
 
+vi.mock("@agent-native/core/client/org/hooks", () => ({
+  useOrg: () => ({ data: orgState.value, isLoading: false }),
+}));
 vi.mock("@agent-native/core/client/org/hooks", () => ({
   useOrg: () => ({ data: orgState.value, isLoading: false }),
 }));

package/src/app/settings/usage/UsagePage.spec.tsx

@@ -54,9 +54,9 @@ vi.mock("@agent-native/core/client/hooks", () => ({
   }),
 }));
 
-vi.mock("@agent-native/core/client/use-action", () => ({
-  useActionQuery: () => ({ data: null, isError: false, isLoading: false }),
-}));
+vi.mock("@agent-native/core/client/use-action", async () =>
+  vi.importMock("@agent-native/core/client/hooks"),
+);
 
 vi.mock("@agent-native/core/client/i18n", () => ({
   useT:

package/src/app/shared/lazy-chunk-error-boundary.spec.tsx

@@ -12,6 +12,7 @@ vi.mock("@agent-native/core/client/route-chunk-recovery", () => ({
 
 import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
 
+import { createToolkitI18nCatalog } from "../i18n.js";
 import { LazyChunkErrorBoundary } from "./LazyChunkErrorBoundary.js";
 import { LazyChunkRetryFallback } from "./LazyChunkRetryFallback.js";
 
@@ -42,6 +43,7 @@ describe("LazyChunkErrorBoundary", () => {
     await act(async () => {
       root.render(
         <AgentNativeI18nProvider
+          catalog={createToolkitI18nCatalog({ messages: {} })}
           initialLocale="en-US"
           initialPreference="en-US"
           persistPreference={false}

package/src/app-shell/sidebar-overflow.spec.tsx

@@ -32,7 +32,10 @@ describe("AppSidebar overflow affordances", () => {
     root = createRoot(container);
   });
 
-  afterEach(() => {
+  afterEach(async () => {
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    });
     act(() => root.unmount());
     container.remove();
     vi.unstubAllGlobals();

package/src/design-tweaks/visual-style-controls.spec.tsx

@@ -378,6 +378,44 @@ describe("visual style controls", () => {
     expect(input.getAttribute("data-design-history-hotkeys")).toBe("true");
   });
 
+  it("commits a zero pixel value with leading zeros", () => {
+    const onChange = vi.fn();
+    act(() => {
+      root.render(
+        <VisualScrubInput
+          label="Border width"
+          value={1}
+          min={0}
+          unit="px"
+          onChange={onChange}
+        />,
+      );
+    });
+
+    const input = container.querySelector<HTMLInputElement>("input")!;
+    act(() => input.focus());
+    act(() => {
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )!.set!;
+      setter.call(input, "00px");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    act(() => {
+      input.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+      );
+    });
+
+    expect(onChange).toHaveBeenCalledWith(
+      0,
+      expect.objectContaining({ source: "commit", expression: "00px" }),
+    );
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(input.value).toBe("0px");
+  });
+
   it("releases focus on Enter when the consumer opts in", () => {
     const onChange = vi.fn();
     act(() => {

package/src/editor/useCollabReconcile.concurrent.spec.ts

@@ -1786,6 +1786,7 @@ describe("useCollabReconcile — concurrent edit / lost-update guards", () => {
   });
 
   it("still clears a stale collab value when there is no local emission", async () => {
+    vi.useFakeTimers();
     const { captured, Harness } = makeCollabSeedHarness("stale persisted body");
     act(() =>
       root.render(
@@ -1799,7 +1800,7 @@ describe("useCollabReconcile — concurrent edit / lost-update guards", () => {
       ),
     );
     expect(getEditorMarkdown(captured.editor!)).toBe("stale persisted body");
-    await act(async () => new Promise((resolve) => setTimeout(resolve, 30)));
+    await act(async () => vi.advanceTimersByTimeAsync(30));
 
     expect(getEditorMarkdown(captured.editor!)).toBe("canonical SQL body");
     expect(captured.emitted).toEqual([]);