@agent-native/toolkit 0.198.3 → 0.198.5

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/composer/PromptComposer.tsx

@@ -106,6 +106,7 @@ export interface PromptComposerProps {
   ) => void | Promise<void>;
   /** Return false to stop a submit before it reaches the host runtime. */
   onBeforeSubmit?: () => boolean | Promise<boolean>;
+  onSubmissionPendingChange?: (pending: boolean) => void;
   /** Scope where a failed submission should be recovered after the host forks. */
   getSubmitFailureDraftScope?: () => string | null;
   /** Handle file paste/drop errors in the host chat surface. */
@@ -118,6 +119,8 @@ export interface PromptComposerProps {
   disabled?: boolean;
   /** Block all submission paths while allowing draft, file, and context staging. */
   submissionDisabled?: boolean;
+  /** Disable only the send control while the submission is being accepted. */
+  sendButtonDisabled?: boolean;
   /** Prevent submission while preserving editor focus and draft entry. */
   submitting?: boolean;
   /** Present the primary action as queueing instead of immediate send. */
@@ -608,6 +611,7 @@ function PromptComposerInner({
   ariaLabel,
   disabled,
   submissionDisabled,
+  sendButtonDisabled,
   submitting,
   willQueue = false,
   onDisabledClick,
@@ -680,6 +684,7 @@ function PromptComposerInner({
   imageModelMenu,
   composerRef,
   onBeforeSubmit,
+  onSubmissionPendingChange,
   getSubmitFailureDraftScope,
   onAttachmentError,
   interceptBuildRequestsForBuilder,
@@ -890,6 +895,7 @@ function PromptComposerInner({
           disabled={disabled}
           contextControlsDisabled={engineSubmissionBlocked}
           submissionDisabled={submissionDisabled || engineSubmissionBlocked}
+          sendButtonDisabled={sendButtonDisabled}
           submitting={submitting}
           willQueue={willQueue}
           maxDocumentAttachmentBytes={maxDocumentAttachmentBytes}
@@ -899,6 +905,7 @@ function PromptComposerInner({
           initialTextKey={initialTextKey}
           onSubmit={handleSubmit}
           onBeforeSubmit={onBeforeSubmit}
+          onSubmissionPendingChange={onSubmissionPendingChange}
           getSubmitFailureDraftScope={getSubmitFailureDraftScope}
           onAttachmentError={onAttachmentError}
           interceptBuildRequestsForBuilder={interceptBuildRequestsForBuilder}

package/src/composer/TiptapComposer.spec.ts

@@ -2166,7 +2166,13 @@ describe("TiptapComposer slash commands", () => {
       resolveSubmit = resolve;
     });
     const onBeforeSubmit = vi.fn(() => preflight);
-    const onSubmit = vi.fn(() => submission);
+    const onSubmissionPendingChange = vi.fn();
+    const onSubmit = vi.fn<NonNullable<TiptapComposerProps["onSubmit"]>>(
+      async (_text, _references, _attachments, options) => {
+        await submission;
+        options?.onLocalSubmit?.();
+      },
+    );
     const focusRef = React.createRef<TiptapComposerHandle>();
 
     function Harness() {
@@ -2180,6 +2186,7 @@ describe("TiptapComposer slash commands", () => {
           React.createElement(TiptapComposer, {
             focusRef,
             onBeforeSubmit,
+            onSubmissionPendingChange,
             onSubmit,
             clearOnSubmitImmediately: true,
             includeDefaultSlashSkills: false,
@@ -2209,6 +2216,7 @@ describe("TiptapComposer slash commands", () => {
 
     expect(editor.textContent).toBe("");
     expect(onSubmit).not.toHaveBeenCalled();
+    expect(onSubmissionPendingChange).toHaveBeenLastCalledWith(true);
     act(() => focusRef.current?.setText("follow-up prompt"));
 
     await act(async () => {
@@ -2225,6 +2233,8 @@ describe("TiptapComposer slash commands", () => {
     );
     expect(editor.textContent).toBe("follow-up prompt");
     await act(async () => resolveSubmit());
+    expect(editor.textContent).toBe("follow-up prompt");
+    expect(onSubmissionPendingChange).toHaveBeenLastCalledWith(false);
   });
 
   it("restores a prompt when async preflight declines it", async () => {
@@ -2337,10 +2347,11 @@ describe("TiptapComposer slash commands", () => {
 
   it("clears immediately while submitting and restores the draft on failure", async () => {
     let rejectSubmit!: (error: Error) => void;
-    const onSubmit = vi.fn(
-      () =>
+    const onSubmit = vi.fn<NonNullable<TiptapComposerProps["onSubmit"]>>(
+      (_text, _references, _attachments, options) =>
         new Promise<void>((_resolve, reject) => {
           rejectSubmit = reject;
+          options?.onLocalSubmit?.();
         }),
     );
     const focusRef = React.createRef<TiptapComposerHandle>();
@@ -2384,6 +2395,7 @@ describe("TiptapComposer slash commands", () => {
 
     expect(onSubmit).toHaveBeenCalledOnce();
     expect(editor.textContent).toBe("");
+    act(() => focusRef.current?.setText("follow-up prompt"));
 
     await act(async () => {
       rejectSubmit(new Error("network unavailable"));
@@ -2391,7 +2403,17 @@ describe("TiptapComposer slash commands", () => {
       await Promise.resolve();
     });
 
-    expect(editor.textContent).toBe("send this once");
+    expect(
+      [...editor.querySelectorAll("p")].map(
+        (paragraph) => paragraph.textContent,
+      ),
+    ).toEqual(["send this once", "follow-up prompt"]);
+    expect(localStorage.getItem(getComposerDraftKey())).toContain(
+      "send this once",
+    );
+    expect(localStorage.getItem(getComposerDraftKey())).toContain(
+      "follow-up prompt",
+    );
   });
 
   it("restores the persisted draft when an immediate submit fails after unmount", async () => {

package/src/composer/TiptapComposer.tsx

@@ -888,6 +888,8 @@ export interface TiptapComposerProps {
   contextControlsDisabled?: boolean;
   /** Prevent submission without making the editable surface lose focus. */
   submissionDisabled?: boolean;
+  /** Disable only the send control while the submission is being accepted. */
+  sendButtonDisabled?: boolean;
   /** Prevent submission while a host request is in flight. */
   submitting?: boolean;
   /** Override the generic document attachment cap for a multipart host. */
@@ -916,6 +918,7 @@ export interface TiptapComposerProps {
   ) => void | Promise<void>;
   /** Return false to stop a submit before it enters the chat runtime. */
   onBeforeSubmit?: () => boolean | Promise<boolean>;
+  onSubmissionPendingChange?: (pending: boolean) => void;
   /** Scope where a failed submission should be recovered after the host forks. */
   getSubmitFailureDraftScope?: () => string | null;
   /**
@@ -2547,6 +2550,7 @@ export function TiptapComposer({
   disabled = false,
   contextControlsDisabled = false,
   submissionDisabled = false,
+  sendButtonDisabled = false,
   submitting = false,
   maxDocumentAttachmentBytes = MAX_DOCUMENT_ATTACHMENT_BYTES,
   documentAttachmentLimitLabel = "PDFs",
@@ -2558,6 +2562,7 @@ export function TiptapComposer({
   initialTextKey,
   onSubmit,
   onBeforeSubmit,
+  onSubmissionPendingChange,
   getSubmitFailureDraftScope,
   clearOnSubmit = true,
   clearOnSubmitImmediately = false,
@@ -4243,7 +4248,6 @@ export function TiptapComposer({
             slotReferencesRef.current.length > 0);
         const canPreserveFollowUp =
           preserveFollowUp &&
-          clearedBeforePreflight &&
           !isForkRecovery &&
           hasFollowUp &&
           (currentDraft === null ||
@@ -4330,6 +4334,7 @@ export function TiptapComposer({
 
       if (onBeforeSubmit) {
         submitInFlightRef.current = true;
+        onSubmissionPendingChange?.(true);
         try {
           const shouldSubmit = await onBeforeSubmit();
           if (!shouldSubmit) {
@@ -4351,6 +4356,7 @@ export function TiptapComposer({
           return false;
         } finally {
           submitInFlightRef.current = false;
+          onSubmissionPendingChange?.(false);
         }
       }
       if (
@@ -4498,6 +4504,7 @@ export function TiptapComposer({
         submitInFlightRef.current = true;
         let locallySubmitted = false;
         let settled = false;
+        onSubmissionPendingChange?.(true);
         const clearSubmittedComposer = () => {
           if (clearOnSubmit) {
             clearComposerDraft(submittingDraftKey, submittingDraftSnapshot);
@@ -4575,7 +4582,7 @@ export function TiptapComposer({
           );
         } catch (error) {
           if (locallySubmitted) {
-            restoreSubmittedDraft();
+            restoreSubmittedDraft(true);
             return true;
           }
           restoreSubmittedDraft(true);
@@ -4593,6 +4600,7 @@ export function TiptapComposer({
         } finally {
           settled = true;
           submitInFlightRef.current = false;
+          onSubmissionPendingChange?.(false);
         }
 
         if (!isCurrentDraftScope()) {
@@ -4685,6 +4693,7 @@ export function TiptapComposer({
       clearOnSubmitImmediately,
       getSubmitFailureDraftScope,
       onBeforeSubmit,
+      onSubmissionPendingChange,
       extractComposerPayload,
       syncComposerState,
       updateSlotReferences,
@@ -5391,7 +5400,7 @@ export function TiptapComposer({
                   <button
                     type="button"
                     onClick={() => void submitComposer("immediate")}
-                    disabled={!canSend}
+                    disabled={!canSend || sendButtonDisabled}
                     aria-label={
                       submitting ? t("common.loading") : sendButtonTooltip
                     }

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

package/src/icons/ResourceIconPicker.spec.tsx

@@ -0,0 +1,270 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  ResourceIconPicker,
+  type ResourceIconPickerLabels,
+} from "./ResourceIconPicker.js";
+import type { ResourceIconImage, ResourceIconValue } from "./types.js";
+
+vi.mock("./catalog.js", () => ({ loadTablerCatalog: async () => [] }));
+vi.mock("./emoji-catalog.js", () => ({
+  EMOJI_CATEGORIES: [],
+  loadEmojiCatalog: async () => [],
+}));
+
+const labels: ResourceIconPickerLabels = {
+  trigger: "Choose icon",
+  iconsTab: "Icons",
+  emojiTab: "Emoji",
+  uploadTab: "Upload",
+  search: "Search",
+  noResults: "No results",
+  recents: "Recent",
+  colors: "Colors",
+  defaultColor: "Default",
+  remove: "Remove",
+  upload: "Choose image",
+  uploading: "Uploading",
+  saveError: "Could not save icon.",
+  uploadFailed: "Could not upload icon image. Try again.",
+  uploadTooLarge: "Icon image must be 5 MiB or smaller.",
+  uploadUnsupportedType: "Only PNG, JPEG, WebP, or SVG images can be uploaded.",
+  loadError: "Could not load uploaded icons.",
+  retry: "Retry",
+};
+const previousIcon: ResourceIconValue = {
+  version: 1,
+  kind: "emoji",
+  emoji: "🌿",
+};
+const uploadedIcon: ResourceIconImage = {
+  version: 1,
+  kind: "image",
+  authority: "url",
+  assetId: "/uploaded.svg",
+};
+
+describe("ResourceIconPicker uploads", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+    );
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  async function renderPicker(
+    onUpload: (file: File) => Promise<ResourceIconImage>,
+    onValueChange = vi.fn(),
+    formatUploadError?: (error: unknown) => string,
+  ) {
+    await act(async () => {
+      root.render(
+        <ResourceIconPicker
+          value={previousIcon}
+          onValueChange={onValueChange}
+          onUpload={onUpload}
+          formatUploadError={formatUploadError}
+          labels={labels}
+          open
+          portalled={false}
+        />,
+      );
+    });
+    const uploadTab = Array.from(container.querySelectorAll("[role=tab]")).find(
+      (tab) => tab.textContent === labels.uploadTab,
+    );
+    expect(uploadTab).toBeDefined();
+    await act(async () => {
+      uploadTab!.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+      uploadTab!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+  }
+
+  async function choose(file: File) {
+    const input =
+      container.querySelector<HTMLInputElement>('input[type="file"]')!;
+    Object.defineProperty(input, "files", {
+      configurable: true,
+      value: [file],
+    });
+    await act(async () => {
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+  }
+
+  async function drop(file: File) {
+    const target = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes(labels.upload),
+    )!;
+    const event = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(event, "dataTransfer", { value: { files: [file] } });
+    await act(async () => target.dispatchEvent(event));
+  }
+
+  function alertText() {
+    return container.querySelector('[role="alert"]')?.textContent;
+  }
+
+  it("rejects unsupported types from input and drop without replacing the icon", async () => {
+    const onUpload = vi.fn().mockResolvedValue(uploadedIcon);
+    const onValueChange = vi.fn();
+    await renderPicker(onUpload, onValueChange);
+
+    await choose(new File(["gif"], "animation.gif", { type: "image/gif" }));
+    expect(alertText()).toBe(labels.uploadUnsupportedType);
+
+    await drop(new File(["text"], "notes.txt", { type: "text/plain" }));
+    expect(alertText()).toBe(labels.uploadUnsupportedType);
+    expect(onUpload).not.toHaveBeenCalled();
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("shows the size limit for a supported file from either path", async () => {
+    const onUpload = vi.fn().mockResolvedValue(uploadedIcon);
+    await renderPicker(onUpload);
+
+    const large = new File([new Uint8Array(5 * 1024 * 1024 + 1)], "large.png", {
+      type: "image/png",
+    });
+    await choose(large);
+    expect(alertText()).toBe(labels.uploadTooLarge);
+    await drop(large);
+    expect(alertText()).toBe(labels.uploadTooLarge);
+    await drop(
+      new File([new Uint8Array(5 * 1024 * 1024 + 1)], "large.txt", {
+        type: "text/plain",
+      }),
+    );
+    expect(alertText()).toBe(labels.uploadTooLarge);
+    expect(onUpload).not.toHaveBeenCalled();
+  });
+
+  it("keeps a mapped failure visible and clears it after a successful retry", async () => {
+    const onUpload = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("private server detail"))
+      .mockResolvedValueOnce(uploadedIcon);
+    const onValueChange = vi.fn();
+    await renderPicker(
+      onUpload,
+      onValueChange,
+      () => "Storage is unavailable.",
+    );
+
+    await choose(new File(["first"], "first.png", { type: "image/png" }));
+    expect(alertText()).toBe("Storage is unavailable.");
+    expect(container.textContent).not.toContain("private server detail");
+    expect(onValueChange).not.toHaveBeenCalled();
+
+    await drop(new File(["<svg />"], "retry.SVG"));
+    expect(onUpload).toHaveBeenCalledTimes(2);
+    expect(onUpload.mock.calls[1]?.[0].type).toBe("image/svg+xml");
+    expect(onValueChange).toHaveBeenCalledWith(uploadedIcon);
+    expect(alertText()).toBeUndefined();
+  });
+
+  it("uses the localized upload failure when the caller has no safe detail", async () => {
+    const onUpload = vi
+      .fn()
+      .mockRejectedValue(new Error("private server detail"));
+    await renderPicker(onUpload);
+
+    await choose(new File(["first"], "first.webp", { type: "image/webp" }));
+    expect(alertText()).toBe(labels.uploadFailed);
+    expect(container.textContent).not.toContain("private server detail");
+  });
+
+  it("makes an unavailable upload library visible and retryable", async () => {
+    const onRetry = vi.fn();
+    await act(async () => {
+      root.render(
+        <ResourceIconPicker
+          value={previousIcon}
+          onValueChange={vi.fn()}
+          onUpload={vi.fn().mockResolvedValue(uploadedIcon)}
+          uploadedImagesError
+          onUploadedImagesRetry={onRetry}
+          labels={labels}
+          open
+          portalled={false}
+        />,
+      );
+    });
+    const uploadTab = Array.from(container.querySelectorAll("[role=tab]")).find(
+      (tab) => tab.textContent === labels.uploadTab,
+    );
+    await act(async () => {
+      uploadTab!.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+      uploadTab!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(alertText()).toContain(labels.loadError);
+    const retryButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === labels.retry,
+    );
+    await act(async () => retryButton!.click());
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it("does not offer private recent images outside the current library", async () => {
+    const personal: ResourceIconImage = {
+      version: 1,
+      kind: "image",
+      authority: "private-icon",
+      assetId: "personal-asset",
+      alt: "Personal logo",
+    };
+    const workspace: ResourceIconImage = {
+      ...personal,
+      assetId: "workspace-asset",
+      alt: "Workspace logo",
+    };
+    await act(async () => {
+      root.render(
+        <ResourceIconPicker
+          value={previousIcon}
+          onValueChange={vi.fn()}
+          onUpload={vi.fn()}
+          uploadedImages={[workspace]}
+          recentValues={[personal, workspace]}
+          labels={labels}
+          open
+          portalled={false}
+        />,
+      );
+    });
+    const uploadTab = Array.from(container.querySelectorAll("[role=tab]")).find(
+      (tab) => tab.textContent === labels.uploadTab,
+    );
+    await act(async () => {
+      uploadTab!.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+      uploadTab!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(
+      container.querySelector('[aria-label="Workspace logo"]'),
+    ).not.toBeNull();
+    expect(container.querySelector('[aria-label="Personal logo"]')).toBeNull();
+  });
+});