@agent-native/toolkit 0.198.2 → 0.198.3-nightly-20260930124743

package/src/app/observability/ThumbsFeedback.spec.tsx

@@ -1,12 +1,18 @@
 // @vitest-environment happy-dom
 
-import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
+import { AgentNativeI18nProvider as CoreAgentNativeI18nProvider } from "@agent-native/core/client/i18n";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import { createToolkitI18nCatalog } from "../i18n.js";
 import { ThumbsFeedback } from "./ThumbsFeedback.js";
 
+const toolkitI18nCatalog = createToolkitI18nCatalog({ messages: {} });
+const AgentNativeI18nProvider = (
+  props: React.ComponentProps<typeof CoreAgentNativeI18nProvider>,
+) => <CoreAgentNativeI18nProvider catalog={toolkitI18nCatalog} {...props} />;
+
 vi.mock("@agent-native/core/client/hooks", () => ({
   useSession: () => ({
     session: { email: "user@example.com" },
@@ -19,10 +25,21 @@ vi.mock("@agent-native/core/client/hooks", () => ({
 
 let container: HTMLDivElement;
 let root: Root;
+const sharedFetchMock = vi.fn<typeof fetch>();
 
 beforeEach(() => {
   vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-  vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true }));
+  sharedFetchMock.mockReset();
+  sharedFetchMock.mockImplementation(async (input) => {
+    if (String(input).includes("/api/forms/public/")) {
+      return Response.json({
+        id: "form-1",
+        fields: [{ id: "feedback", type: "textarea" }],
+      });
+    }
+    return Response.json({});
+  });
+  vi.stubGlobal("fetch", sharedFetchMock);
   container = document.createElement("div");
   document.body.appendChild(container);
   root = createRoot(container);
@@ -116,7 +133,7 @@ describe("ThumbsFeedback localization", () => {
       );
     });
 
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
     await vi.waitFor(() =>
       expect(fetchMock.mock.calls.length).toBeGreaterThanOrEqual(2),
     );
@@ -146,7 +163,7 @@ describe("ThumbsFeedback localization", () => {
       "VITE_AGENT_NATIVE_FEEDBACK_URL",
       "https://forms.agent-native.com/f/agent-native-feedback/_16ewV",
     );
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
     fetchMock.mockImplementation(async (input) => {
       const url = String(input);
       if (url.includes("/api/forms/public/")) {
@@ -248,7 +265,7 @@ describe("ThumbsFeedback localization", () => {
       "VITE_AGENT_NATIVE_FEEDBACK_URL",
       "https://forms.agent-native.com/f/agent-native-feedback/_16ewV",
     );
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
     let observabilityAttempts = 0;
     fetchMock.mockImplementation(async (input, init) => {
       const url = String(input);
@@ -375,7 +392,7 @@ describe("ThumbsFeedback localization", () => {
       "VITE_AGENT_NATIVE_FEEDBACK_URL",
       "https://forms.agent-native.com/f/agent-native-feedback/_16ewV",
     );
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
     let formAttempts = 0;
     fetchMock.mockImplementation(async (input) => {
       const url = String(input);
@@ -513,7 +530,7 @@ describe("ThumbsFeedback localization", () => {
 
     act(() => down.click());
 
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
     await vi.waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1));
     expect(
       JSON.parse(String(fetchMock.mock.calls[0]?.[1]?.body)),
@@ -533,7 +550,7 @@ describe("ThumbsFeedback localization", () => {
   });
 
   it("treats non-ok responses as failed and allows a thumbs-up retry", async () => {
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
     fetchMock
       .mockResolvedValueOnce({ ok: false, status: 500 })
       .mockResolvedValueOnce({ ok: true, status: 200 });
@@ -573,7 +590,7 @@ describe("ThumbsFeedback localization", () => {
   });
 
   it("keeps text feedback available when a non-ok response fails", async () => {
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
     fetchMock.mockResolvedValueOnce({ ok: false, status: 503 });
 
     act(() => {
@@ -687,7 +704,7 @@ describe("ThumbsFeedback localization", () => {
   });
 
   it("does not resubmit when clicking the already-applied vote again", async () => {
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
 
     act(() => {
       root.render(
@@ -718,7 +735,7 @@ describe("ThumbsFeedback localization", () => {
 
   it("ignores a stale thumbs-up response after the user already switched to thumbs-down", async () => {
     let resolveUpRequest: ((value: { ok: boolean }) => void) | undefined;
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
     fetchMock.mockImplementationOnce(
       () =>
         new Promise((resolve) => {
@@ -769,7 +786,7 @@ describe("ThumbsFeedback localization", () => {
 
   it("ignores a stale failed thumbs-down response after the user switched back to thumbs-up", async () => {
     let rejectDownRequest: (() => void) | undefined;
-    const fetchMock = vi.mocked(globalThis.fetch);
+    const fetchMock = sharedFetchMock;
     fetchMock.mockImplementationOnce(
       () =>
         new Promise((_resolve, reject) => {

package/src/app/onboarding/FirstRunOnboarding.spec.tsx

@@ -7,12 +7,26 @@ import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import { createToolkitI18nCatalog } from "../i18n.js";
 import { toolkitMessagesForLocale } from "../i18n/catalog.js";
 import {
-  FirstRunOnboarding,
+  FirstRunOnboarding as FirstRunOnboardingSource,
   manualSetupSettingsRoute,
 } from "./FirstRunOnboarding.js";
 
+const toolkitI18nCatalog = createToolkitI18nCatalog({ messages: {} });
+
+function FirstRunOnboarding() {
+  return (
+    <AgentNativeI18nProvider
+      catalog={toolkitI18nCatalog}
+      persistPreference={false}
+    >
+      <FirstRunOnboardingSource />
+    </AgentNativeI18nProvider>
+  );
+}
+
 const mocks = vi.hoisted(() => ({
   completeFirstRun: vi.fn(),
   useBuilderConnectFlow: vi.fn(),
@@ -31,18 +45,22 @@ vi.mock("react-router", async (importOriginal) => {
   };
 });
 
-vi.mock("./use-onboarding.js", () => ({
+vi.mock("@agent-native/core/client/onboarding/use-onboarding", () => ({
   trackOnboardingEvent: mocks.trackOnboardingEvent,
   useOnboarding: mocks.useOnboarding,
 }));
 
-vi.mock("./use-preview-mode.js", () => ({
+vi.mock("@agent-native/core/client/onboarding/use-preview-mode", () => ({
   ONBOARDING_PREVIEW_QUERY_PARAM: "onboarding",
   ONBOARDING_PREVIEW_STEP_QUERY_PARAM: "step",
   useOnboardingPreviewMode: mocks.useOnboardingPreviewMode,
   useOnboardingPreviewStep: mocks.useOnboardingPreviewStep,
 }));
 
+vi.mock("@agent-native/core/client/feature-flags/use-feature-flag", () => ({
+  useFeatureFlagState: () => ({ status: "ready", enabled: true }),
+}));
+
 vi.mock("../settings/useBuilderStatus.js", () => ({
   useBuilderConnectFlow: mocks.useBuilderConnectFlow,
 }));
@@ -1471,7 +1489,7 @@ describe("FirstRunOnboarding", () => {
           persistPreference={false}
         >
           <TooltipProvider>
-            <FirstRunOnboarding />
+            <FirstRunOnboardingSource />
           </TooltipProvider>
         </AgentNativeI18nProvider>,
       );
@@ -1590,7 +1608,9 @@ describe("FirstRunOnboarding", () => {
   });
 
   it("sends manual setup to Agent › Model", () => {
-    expect(manualSetupSettingsRoute()).toBe("/settings/model");
+    expect(manualSetupSettingsRoute({ redesign: true })).toBe(
+      "/settings/model",
+    );
   });
 
   it("keeps the choice screen visible when completion fails", async () => {

package/src/app/onboarding/first-run-startup-gate.spec.tsx

@@ -10,16 +10,21 @@ const mocks = vi.hoisted(() => ({
   preview: vi.fn(),
 }));
 
-vi.mock("./first-run-enabled.js", () => ({
+vi.mock("@agent-native/core/client/onboarding/first-run-enabled", () => ({
   isFirstRunOnboardingEnabled: mocks.enabled,
 }));
 
-vi.mock("./first-run-status.js", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("./first-run-status.js")>()),
-  fetchFirstRunOnboardingStatus: mocks.fetchStatus,
-}));
-
-vi.mock("./use-preview-mode.js", () => ({
+vi.mock(
+  "@agent-native/core/client/onboarding/first-run-status",
+  async (importOriginal) => ({
+    ...(await importOriginal<
+      typeof import("@agent-native/core/client/onboarding/first-run-status")
+    >()),
+    fetchFirstRunOnboardingStatus: mocks.fetchStatus,
+  }),
+);
+
+vi.mock("@agent-native/core/client/onboarding/use-preview-mode", () => ({
   useOnboardingPreviewMode: mocks.preview,
 }));
 

package/src/app/resources/McpConnectionSuggestion.render.spec.tsx

@@ -10,11 +10,11 @@ const mcpMocks = vi.hoisted(() => ({
   useMcpServers: vi.fn(),
 }));
 
-vi.mock("../CommandMenu.js", () => ({
+vi.mock("../shared/index.js", () => ({
   openAgentSettings: vi.fn(),
 }));
 
-vi.mock("../i18n.js", () => ({
+vi.mock("@agent-native/core/client/i18n", () => ({
   useT: () => (key: string, options?: { name?: string }) => {
     if (key === "mcpIntegrations.connectSuggestion") {
       return `Connect ${options?.name ?? "integration"}`;
@@ -27,11 +27,11 @@ vi.mock("../i18n.js", () => ({
   },
 }));
 
-vi.mock("./McpIntegrationDialog.js", () => ({
-  McpIntegrationDialog: () => null,
+vi.mock("./McpIntegrationDialogDeferred.js", () => ({
+  McpIntegrationDialogDeferred: () => null,
 }));
 
-vi.mock("./use-mcp-servers.js", () => mcpMocks);
+vi.mock("@agent-native/core/client/resources/use-mcp-servers", () => mcpMocks);
 
 import {
   DEFAULT_MCP_INTEGRATIONS,
@@ -60,9 +60,42 @@ const integration = {
 describe("McpConnectionSuggestion render", () => {
   let container: HTMLDivElement;
   let root: Root;
+  let localStorageDescriptor: PropertyDescriptor | undefined;
+
+  function createMemoryStorage(): Storage {
+    const values = new Map<string, string>();
+    return {
+      get length() {
+        return values.size;
+      },
+      clear() {
+        values.clear();
+      },
+      getItem(key) {
+        return values.get(key) ?? null;
+      },
+      key(index) {
+        return [...values.keys()][index] ?? null;
+      },
+      removeItem(key) {
+        values.delete(key);
+      },
+      setItem(key, value) {
+        values.set(String(key), String(value));
+      },
+    };
+  }
 
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    localStorageDescriptor = Object.getOwnPropertyDescriptor(
+      window,
+      "localStorage",
+    );
+    Object.defineProperty(window, "localStorage", {
+      configurable: true,
+      value: createMemoryStorage(),
+    });
     window.localStorage.clear();
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -79,6 +112,11 @@ describe("McpConnectionSuggestion render", () => {
   afterEach(() => {
     act(() => root.unmount());
     container.remove();
+    if (localStorageDescriptor) {
+      Object.defineProperty(window, "localStorage", localStorageDescriptor);
+    } else {
+      Reflect.deleteProperty(window, "localStorage");
+    }
     vi.restoreAllMocks();
     vi.unstubAllGlobals();
   });

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

@@ -26,20 +26,26 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
-vi.mock("./mcp-integration-catalog.js", async (importOriginal) => ({
-  ...(await importOriginal<
-    typeof import("@agent-native/core/client/resources/mcp-integration-catalog")
-  >()),
-  navigateToMcpOAuthStart: mocks.navigateToMcpOAuthStart,
-  isCustomMcpIntegrationEnabled: () => mocks.customIntegrationEnabled(),
-}));
-
-vi.mock("./use-mcp-servers.js", async (importOriginal) => ({
-  ...(await importOriginal<
-    typeof import("@agent-native/core/client/resources/use-mcp-servers")
-  >()),
-  useMcpServers: () => mocks.mcpServersQuery,
-}));
+vi.mock(
+  "@agent-native/core/client/resources/mcp-integration-catalog",
+  async (importOriginal) => ({
+    ...(await importOriginal<
+      typeof import("@agent-native/core/client/resources/mcp-integration-catalog")
+    >()),
+    navigateToMcpOAuthStart: mocks.navigateToMcpOAuthStart,
+    isCustomMcpIntegrationEnabled: () => mocks.customIntegrationEnabled(),
+  }),
+);
+
+vi.mock(
+  "@agent-native/core/client/resources/use-mcp-servers",
+  async (importOriginal) => ({
+    ...(await importOriginal<
+      typeof import("@agent-native/core/client/resources/use-mcp-servers")
+    >()),
+    useMcpServers: () => mocks.mcpServersQuery,
+  }),
+);
 
 describe("McpIntegrationDialog", () => {
   let container: HTMLDivElement;

package/src/app/resources/ResourcesPanel.spec.ts

@@ -25,20 +25,22 @@ const storageMocks = vi.hoisted(() => ({
   setup: null as (() => void) | null,
 }));
 
-vi.mock("../uploads/use-file-upload-status.js", () => ({
+vi.mock("@agent-native/core/client/uploads/use-file-upload-status", () => ({
   useFileUploadStatus: () => ({
     ...storageMocks.status,
     refetch: storageMocks.refetch,
   }),
 }));
-vi.mock("../uploads/use-upload-resource.js", () => ({
+vi.mock("@agent-native/core/client/uploads/use-upload-resource", () => ({
   useUploadResource: () => ({ mutate: storageMocks.upload }),
 }));
-vi.mock("../org/hooks.js", () => ({
+vi.mock("@agent-native/core/client/org/hooks", () => ({
   useOrg: () => ({ data: { orgId: "org-test", role: "member" } }),
 }));
-vi.mock("../i18n.js", () => ({ useT: () => (key: string) => key }));
-vi.mock("./use-resources.js", () => ({
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => key,
+}));
+vi.mock("@agent-native/core/client/resources/use-resources", () => ({
   useResourceTree: () => ({ data: [], isLoading: false }),
   useResource: () => ({ data: undefined, isError: false }),
   useCreateResource: () => ({ isPending: false, mutate: vi.fn() }),
@@ -50,13 +52,13 @@ vi.mock("./use-resources.js", () => ({
   withMcpServersFolder: (tree: unknown[]) => tree,
   withAgentScratchFolder: (tree: unknown[]) => tree,
 }));
-vi.mock("./use-mcp-servers.js", () => ({
+vi.mock("@agent-native/core/client/resources/use-mcp-servers", () => ({
   useMcpServers: () => ({ data: undefined }),
   useCreateMcpServer: () => ({ mutateAsync: vi.fn() }),
   useDeleteMcpServer: () => ({ isPending: false, mutate: vi.fn() }),
   parseMcpVirtualId: () => null,
 }));
-vi.mock("./use-builtin-capabilities.js", () => ({
+vi.mock("@agent-native/core/client/resources/use-builtin-capabilities", () => ({
   useBuiltinCapabilities: () => ({ data: undefined }),
   parseMcpBuiltinVirtualId: () => null,
 }));

package/src/app/review/ReviewThreadPanel.spec.tsx

@@ -76,7 +76,7 @@ const resolvedComment = vi.hoisted(
     }) satisfies ReviewComment,
 );
 
-vi.mock("./use-review.js", () => ({
+vi.mock("@agent-native/core/client/review/use-review", () => ({
   useReviewComments: (...args: unknown[]) => reviewComments(...args),
   useCreateReviewComment: () => ({
     mutate,
@@ -115,7 +115,7 @@ import {
   isTrustedReviewAttachmentUrl,
   ReviewThreadPanel,
 } from "./ReviewThreadPanel.js";
-vi.mock("../clipboard.js", () => ({ writeClipboardText }));
+vi.mock("@agent-native/toolkit/clipboard", () => ({ writeClipboardText }));
 
 function setTextareaValue(textarea: HTMLTextAreaElement, value: string) {
   const setter = Object.getOwnPropertyDescriptor(

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

@@ -1,12 +1,16 @@
 // @vitest-environment happy-dom
 
+import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
 import { TooltipProvider } from "@agent-native/toolkit/ui/tooltip";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import { createToolkitI18nCatalog } from "../i18n.js";
 import { SecretsSection } from "./SecretsSection.js";
 
+const toolkitI18nCatalog = createToolkitI18nCatalog({ messages: {} });
+
 vi.mock("@agent-native/core/client/api-path", () => ({
   agentNativePath: (path: string) => path,
   appMountedPath: (path: string) => path,
@@ -73,9 +77,14 @@ function findButton(text: string) {
 
 function renderSecretsSection(root: Root, focusKey?: string) {
   root.render(
-    <TooltipProvider>
-      <SecretsSection focusKey={focusKey} />
-    </TooltipProvider>,
+    <AgentNativeI18nProvider
+      catalog={toolkitI18nCatalog}
+      persistPreference={false}
+    >
+      <TooltipProvider>
+        <SecretsSection focusKey={focusKey} />
+      </TooltipProvider>
+    </AgentNativeI18nProvider>,
   );
 }
 

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

@@ -25,7 +25,8 @@ vi.mock("../labs/index.js", () => ({
   ),
 }));
 
-vi.mock("@agent-native/core/client/i18n", () => ({
+vi.mock("@agent-native/core/client/i18n", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@agent-native/core/client/i18n")>()),
   useT: () => (key: string) =>
     key === "agentChat.auth.logOut" ? "Cerrar sesión" : key,
   useOptionalLocale: () => ({ locale: "en" }),
@@ -530,6 +531,7 @@ describe("SettingsTabsPage", () => {
       "#settings-tab-whats-new",
     );
     expect(whatsNewTab).not.toBeNull();
+    await import("../changelog/Changelog.js");
 
     await act(async () => {
       whatsNewTab!.click();
@@ -609,6 +611,7 @@ describe("SettingsTabsPage", () => {
     act(() => {
       root.render(
         <SettingsTabsPage
+          general={<div>General content</div>}
           generalGroups={<div>App groups</div>}
           notifications={<div>Email settings</div>}
           notificationsLabel="Notifications"

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

@@ -1,5 +1,6 @@
 // @vitest-environment happy-dom
 
+import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -80,8 +81,11 @@ vi.mock("./deferred-builder-connect-popover.js", () => ({
     children,
 }));
 
+import { createToolkitI18nCatalog } from "../i18n.js";
 import { VoiceTranscriptionSection } from "./VoiceTranscriptionSection.js";
 
+const toolkitI18nCatalog = createToolkitI18nCatalog({ messages: {} });
+
 type Handler = (init?: RequestInit) => Response | Promise<Response>;
 
 function json(body: unknown, status = 200) {
@@ -140,7 +144,14 @@ describe("VoiceTranscriptionSection compact picker", () => {
 
   async function render() {
     await act(async () => {
-      root.render(<VoiceTranscriptionSection compact />);
+      root.render(
+        <AgentNativeI18nProvider
+          catalog={toolkitI18nCatalog}
+          persistPreference={false}
+        >
+          <VoiceTranscriptionSection compact />
+        </AgentNativeI18nProvider>,
+      );
     });
     await act(async () => {
       await new Promise((resolve) => setTimeout(resolve, 0));

package/src/app/settings/account/PreferencesSettings.spec.tsx

@@ -26,9 +26,14 @@ vi.mock("../VoiceTranscriptionSection.js", () => ({
   ),
 }));
 
+import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
+
+import { createToolkitI18nCatalog } from "../../i18n.js";
 import { PreferencesSettings } from "./PreferencesSettings.js";
 import { PREFERENCES_SEARCH_ENTRIES } from "./search-entries.js";
 
+const toolkitI18nCatalog = createToolkitI18nCatalog({ messages: {} });
+
 describe("PreferencesSettings", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -49,7 +54,14 @@ describe("PreferencesSettings", () => {
 
   async function render() {
     await act(async () => {
-      root.render(<PreferencesSettings />);
+      root.render(
+        <AgentNativeI18nProvider
+          catalog={toolkitI18nCatalog}
+          persistPreference={false}
+        >
+          <PreferencesSettings />
+        </AgentNativeI18nProvider>,
+      );
     });
   }
 

package/src/app/settings/account/ProfileSettings.spec.tsx

@@ -67,9 +67,14 @@ vi.mock("@agent-native/core/client/hooks", () => ({
 
 vi.mock("@agent-native/core/client/auth/change-email", () => emailChange);
 
+import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
+
+import { createToolkitI18nCatalog } from "../../i18n.js";
 import { ProfileSettings } from "./ProfileSettings.js";
 import { PROFILE_SEARCH_ENTRIES } from "./search-entries.js";
 
+const toolkitI18nCatalog = createToolkitI18nCatalog({ messages: {} });
+
 describe("ProfileSettings", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -96,7 +101,14 @@ describe("ProfileSettings", () => {
 
   async function render() {
     await act(async () => {
-      root.render(<ProfileSettings />);
+      root.render(
+        <AgentNativeI18nProvider
+          catalog={toolkitI18nCatalog}
+          persistPreference={false}
+        >
+          <ProfileSettings />
+        </AgentNativeI18nProvider>,
+      );
     });
   }
 

package/src/app/settings/account/SecuritySettings.spec.tsx

@@ -74,11 +74,15 @@ vi.mock("@agent-native/core/client/hooks", () => ({
 
 vi.mock("@agent-native/core/client/auth/two-factor", () => twoFactor);
 
+import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
 import { PASSWORD_MIN_LENGTH } from "@agent-native/core/shared/password-policy";
 
+import { createToolkitI18nCatalog } from "../../i18n.js";
 import { SECURITY_SEARCH_ENTRIES } from "./search-entries.js";
 import { SecuritySettings } from "./SecuritySettings.js";
 
+const toolkitI18nCatalog = createToolkitI18nCatalog({ messages: {} });
+
 describe("SecuritySettings", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -106,7 +110,14 @@ describe("SecuritySettings", () => {
 
   async function render() {
     await act(async () => {
-      root.render(<SecuritySettings />);
+      root.render(
+        <AgentNativeI18nProvider
+          catalog={toolkitI18nCatalog}
+          persistPreference={false}
+        >
+          <SecuritySettings />
+        </AgentNativeI18nProvider>,
+      );
     });
     await act(async () => {
       await Promise.resolve();