@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/chrome/UserMenu.screen.spec.tsx

@@ -30,10 +30,17 @@ beforeEach(() => {
     }
     if (url.pathname === "/api/method/frappe.client.get_value") {
       return json({
-        message: { full_name: "Jane Cooper", email: "jane@example.com", user_image: null },
+        message: {
+          full_name: "Jane Cooper",
+          email: "jane@example.com",
+          user_image: "/files/jane.png",
+        },
       });
     }
-    if (url.pathname === "/api/method/logout") return json({ message: "" });
+    if (url.pathname === "/api/method/logout") {
+      loggedUser = "Guest";
+      return json({ message: "" });
+    }
     return json({ data: [] });
   });
 });
@@ -74,12 +81,63 @@ describe("UserMenu", () => {
     expect(navigation.getLocation().path).toBe("/backoffice/user/jane%40example.com");
   });
 
-  it("disables the profile items while no session user resolves", async () => {
-    loggedUser = null;
+  it.each(["Guest", null])("shows Log in without session actions for %s", async (user) => {
+    loggedUser = user;
     renderMenu();
     await waitFor(() => expect(calls).toContain("/api/method/frappe.auth.get_logged_user"));
-    await waitFor(() => expect(item("My Profile").getAttribute("aria-disabled")).toBe("true"));
-    expect(item("My Settings").getAttribute("aria-disabled")).toBe("true");
+    expect(await screen.findByRole("button", { name: "Log in" })).toBeTruthy();
+    for (const label of [
+      "Guest",
+      "My Profile",
+      "My Settings",
+      "Log Out",
+      "Session Defaults",
+      "Session not loaded",
+      "Not implemented yet",
+    ]) {
+      expect(screen.queryByText(label)).toBeNull();
+    }
+    expect(screen.queryByRole("button", { name: "User menu" })).toBeNull();
+  });
+
+  it("keeps login reachable when the session endpoint fails", async () => {
+    vi.stubGlobal("fetch", async () => json({}, 500));
+    renderMenu();
+    expect(await screen.findByRole("button", { name: "Log in" }, { timeout: 10000 })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "User menu" })).toBeNull();
+  });
+
+  it("does not offer login while the identity check is pending", () => {
+    vi.stubGlobal("fetch", () => new Promise(() => {}));
+    renderMenu();
+    expect(screen.queryByRole("button", { name: "Log in" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "User menu" })).toBeNull();
+  });
+
+  it("starts the host login flow", async () => {
+    loggedUser = "Guest";
+    const login = vi.fn();
+    renderMenu({ auth: { login } });
+    fireEvent.click(await screen.findByRole("button", { name: "Log in" }));
+    expect(login).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides unfinished items for signed-in users too", async () => {
+    renderMenu();
+    await screen.findByText("Jane Cooper");
+    expect(screen.queryByText("Session Defaults")).toBeNull();
+    expect(screen.queryByText("Not implemented yet")).toBeNull();
+    expect(screen.queryByText("Session not loaded")).toBeNull();
+  });
+
+  it("ends host authentication before returning to the signed-out state", async () => {
+    const logout = vi.fn(async () => {});
+    renderMenu({ auth: { login: vi.fn(), logout } });
+    await screen.findByText("Jane Cooper");
+    fireEvent.click(item("Log Out"));
+    await waitFor(() => expect(logout).toHaveBeenCalledTimes(1));
+    expect(calls).toContain("/api/method/logout");
+    expect(await screen.findByRole("button", { name: "Log in" })).toBeTruthy();
     expect(screen.queryByText("Jane Cooper")).toBeNull();
   });
 
@@ -103,5 +161,17 @@ describe("UserMenu", () => {
     fireEvent.click(item("Log Out"));
     await waitFor(() => expect(navigation.getLocation().path).toBe("/backoffice"));
     expect(calls).toContain("/api/method/logout");
+    expect(await screen.findByRole("button", { name: "Log in" })).toBeTruthy();
+    expect(screen.queryByText("Jane Cooper")).toBeNull();
   });
 });
+
+it("reports a failed login outside the header and allows dismissal", async () => {
+  loggedUser = "Guest";
+  renderMenu({ auth: { login: vi.fn().mockRejectedValue(new Error("offline")) } });
+  fireEvent.click(await screen.findByRole("button", { name: "Log in" }));
+  expect((await screen.findAllByRole("dialog")).length).toBeGreaterThan(0);
+  expect(screen.getByText("Unable to complete sign-in or sign-out. Try again.")).toBeTruthy();
+  fireEvent.click(screen.getByRole("button", { name: "Close" }));
+  await waitFor(() => expect(screen.queryAllByRole("dialog")).toHaveLength(0));
+});

package/src/chrome/UserMenu.tsx

@@ -3,11 +3,21 @@
 // hosts without one get a disabled item (GJS/story parity). The logout and
 // theme items are individually gated by the userMenu capability config.
 import React from "react";
-import { Avatar, DropdownMenu, SizableText, YStack, isWeb } from "@multiplatform.one/components";
+import {
+  Avatar,
+  DropdownMenu,
+  SizableText,
+  Skeleton,
+  YStack,
+  isWeb,
+  Dialog,
+  DialogContent,
+} from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useCallback } from "react";
+import { openUrl } from "@multiplatform.one/platform";
+import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   useBackofficeCapabilities,
@@ -29,25 +39,59 @@ export function UserMenu({ defaultOpen }: UserMenuProps = {}) {
   const { knobProps } = useResolvedKnobs();
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
-  const { appearance } = useBackofficeConfig();
+  const { appearance, auth, emitEvent } = useBackofficeConfig();
+  const acting = useRef(false);
+  const [busy, setBusy] = useState(false);
+  const [actionError, setActionError] = useState(false);
   const { userMenu } = useBackofficeCapabilities();
   const app = useFrappeApp();
   const frappeConfig = useFrappeConfig();
-  const { info } = useSessionUserInfo();
-  const sessionUser = info?.user;
+  const { info, loading } = useSessionUserInfo();
+  const sessionUser = info?.user === "Guest" ? undefined : info?.user;
 
-  const handleLogout = useCallback(async () => {
-    try {
-      await app?.auth().logout();
-    } catch {
-      // Best effort: even when the bench rejects the call (expired session,
-      // network), still clear local state and leave the desk.
-    }
-    // Cache clear scope: this package's session-user cache only. The frappe
-    // `sid` cookie is invalidated server-side by /api/method/logout itself.
-    clearSessionUserCache();
-    navigator.replace(paths.home());
-  }, [app, navigator, paths]);
+  const runAuthAction = useCallback(
+    async (action: () => void | Promise<unknown>) => {
+      if (acting.current) return;
+      acting.current = true;
+      setBusy(true);
+      setActionError(false);
+      try {
+        await action();
+        clearSessionUserCache();
+      } catch (error) {
+        setActionError(true);
+        emitEvent({ type: "error", error, context: "user-menu-auth" });
+      } finally {
+        acting.current = false;
+        setBusy(false);
+      }
+    },
+    [emitEvent],
+  );
+
+  const handleLogout = useCallback(
+    () =>
+      runAuthAction(async () => {
+        try {
+          await app?.auth().logout();
+        } catch (error) {
+          emitEvent({ type: "error", error, context: "frappe-logout" });
+        }
+        await auth?.logout?.();
+        navigator.replace(paths.home());
+      }),
+    [app, auth, emitEvent, navigator, paths, runAuthAction],
+  );
+
+  const handleLogin = useCallback(
+    () =>
+      runAuthAction(() => {
+        if (auth) return auth.login();
+        if (frappeConfig?.baseURL)
+          return openUrl(`${frappeConfig.baseURL.replace(/\/+$/, "")}/login`);
+      }),
+    [auth, frappeConfig?.baseURL, runAuthAction],
+  );
 
   const handleReload = useCallback(() => {
     if (typeof location !== "undefined" && typeof location.reload === "function") {
@@ -72,107 +116,127 @@ export function UserMenu({ defaultOpen }: UserMenuProps = {}) {
     navigator.navigate(exitToSite.path);
   }, [navigator, exitToSite.path]);
 
-  const sessionGate = sessionUser
-    ? {}
-    : {
-        disabled: true,
-        disabledReason: t("userMenu.sessionUnavailable", "Session not loaded"),
-      };
+  const errorDialog = actionError ? (
+    <Dialog modal open onOpenChange={setActionError}>
+      <Dialog.Portal>
+        <Dialog.Overlay backgroundColor="$shadow6" />
+        <DialogContent>
+          <Dialog.Title>{t("userMenu.authFailedTitle", "Account unavailable")}</Dialog.Title>
+          <Dialog.Description>
+            {t("userMenu.authFailed", "Unable to complete sign-in or sign-out. Try again.")}
+          </Dialog.Description>
+          <Dialog.Close asChild>
+            <Button>{t("userMenu.close", "Close")}</Button>
+          </Dialog.Close>
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog>
+  ) : null;
 
-  return (
-    <DropdownMenu placement="bottom-end" defaultOpen={defaultOpen}>
-      <DropdownMenu.Trigger asChild>
-        <Button
-          chromeless
-          circular
-          size={knobProps.sizeToken}
-          aria-label={t("userMenu.label", "User menu")}
-        >
-          <Avatar
-            size={knobProps.sizeToken === "$5" ? "$3" : knobProps.sizeToken === "$3" ? "$1" : "$2"}
-            src={info?.imageUrl}
-            name={info?.fullName ?? info?.user}
-          />
+  if (loading) {
+    return <Skeleton width={knobProps.sizeToken} height={knobProps.sizeToken} />;
+  }
+
+  if (!sessionUser) {
+    return (
+      <>
+        <Button chromeless size={knobProps.sizeToken} loading={busy} onPress={handleLogin}>
+          {t("userMenu.logIn", "Log in")}
         </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content minWidth={240}>
-        {info ? (
-          <>
-            <YStack {...knobProps.panelPadding} {...knobProps.gap} paddingVertical="$2">
-              <SizableText {...knobProps.label} fontWeight="400" numberOfLines={1}>
-                {info.fullName}
-              </SizableText>
-              {info.email ? (
-                <SizableText size="$2" color="$color10" numberOfLines={1}>
-                  {info.email}
+        {errorDialog}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <DropdownMenu placement="bottom-end" defaultOpen={defaultOpen}>
+        <DropdownMenu.Trigger asChild>
+          <Button
+            chromeless
+            circular
+            size={knobProps.sizeToken}
+            aria-label={t("userMenu.label", "User menu")}
+          >
+            <Avatar
+              size={
+                knobProps.sizeToken === "$5" ? "$3" : knobProps.sizeToken === "$3" ? "$1" : "$2"
+              }
+              src={info?.imageUrl}
+              name={info?.fullName ?? info?.user}
+            />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          {info ? (
+            <>
+              <YStack {...knobProps.panelPadding} {...knobProps.gap} paddingVertical="$2">
+                <SizableText {...knobProps.label} fontWeight="400" numberOfLines={1}>
+                  {info.fullName}
                 </SizableText>
-              ) : null}
-            </YStack>
-            <DropdownMenu.Separator />
-          </>
-        ) : null}
-        <DropdownMenu.Item
-          {...sessionGate}
-          onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
-        >
-          {t("userMenu.myProfile", "My Profile")}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item
-          {...sessionGate}
-          onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
-        >
-          {t("userMenu.mySettings", "My Settings")}
-        </DropdownMenu.Item>
-        {/* GAP: desk's Session Defaults dialog (frappe.core.doctype.session_default_settings)
-            has no backoffice surface yet — placeholder until a dialog exists. */}
-        <DropdownMenu.Item
-          disabled
-          disabledReason={t("userMenu.sessionDefaultsGap", "Not implemented yet")}
-        >
-          {t("userMenu.sessionDefaults", "Session Defaults")}
-        </DropdownMenu.Item>
-        {isWeb ? (
-          <DropdownMenu.Item onSelect={handleReload}>
-            {t("userMenu.reload", "Reload")}
-          </DropdownMenu.Item>
-        ) : null}
-        {userMenu.themeToggle ? (
+                {info.email ? (
+                  <SizableText size="$2" color="$color10" numberOfLines={1}>
+                    {info.email}
+                  </SizableText>
+                ) : null}
+              </YStack>
+              <DropdownMenu.Separator />
+            </>
+          ) : null}
           <DropdownMenu.Item
-            {...(appearance
-              ? {}
-              : {
-                  disabled: true,
-                  disabledReason: t(
-                    "userMenu.themeUnavailable",
-                    "Theme switching is unavailable on this platform",
-                  ),
-                })}
-            onSelect={handleToggleTheme}
+            onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
           >
-            {t("userMenu.toggleTheme", "Toggle Theme")}
+            {t("userMenu.myProfile", "My Profile")}
           </DropdownMenu.Item>
-        ) : null}
-        {isWeb && websiteURL ? (
-          <DropdownMenu.Item onSelect={handleViewWebsite}>
-            {t("userMenu.viewWebsite", "View Website")}
+          <DropdownMenu.Item
+            onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
+          >
+            {t("userMenu.mySettings", "My Settings")}
           </DropdownMenu.Item>
-        ) : null}
-        {/* MOD-02: embedded shells are full-bleed (no host navbar), so the
+          {isWeb ? (
+            <DropdownMenu.Item onSelect={handleReload}>
+              {t("userMenu.reload", "Reload")}
+            </DropdownMenu.Item>
+          ) : null}
+          {userMenu.themeToggle ? (
+            <DropdownMenu.Item
+              {...(appearance
+                ? {}
+                : {
+                    disabled: true,
+                    disabledReason: t(
+                      "userMenu.themeUnavailable",
+                      "Theme switching is unavailable on this platform",
+                    ),
+                  })}
+              onSelect={handleToggleTheme}
+            >
+              {t("userMenu.toggleTheme", "Toggle Theme")}
+            </DropdownMenu.Item>
+          ) : null}
+          {isWeb && websiteURL ? (
+            <DropdownMenu.Item onSelect={handleViewWebsite}>
+              {t("userMenu.viewWebsite", "View Website")}
+            </DropdownMenu.Item>
+          ) : null}
+          {/* MOD-02: embedded shells are full-bleed (no host navbar), so the
             way back into the host app lives here. */}
-        {isWeb && exitToSite.enabled ? (
-          <DropdownMenu.Item onSelect={handleExitToSite}>
-            {exitToSite.label ?? t("userMenu.exitToSite", "← multiplatform.one")}
-          </DropdownMenu.Item>
-        ) : null}
-        {userMenu.logout ? (
-          <>
-            <DropdownMenu.Separator />
-            <DropdownMenu.Item onSelect={handleLogout}>
-              {t("userMenu.logOut", "Log Out")}
+          {isWeb && exitToSite.enabled ? (
+            <DropdownMenu.Item onSelect={handleExitToSite}>
+              {exitToSite.label ?? t("userMenu.exitToSite", "← multiplatform.one")}
             </DropdownMenu.Item>
-          </>
-        ) : null}
-      </DropdownMenu.Content>
-    </DropdownMenu>
+          ) : null}
+          {userMenu.logout ? (
+            <>
+              <DropdownMenu.Separator />
+              <DropdownMenu.Item onSelect={handleLogout}>
+                {t("userMenu.logOut", "Log Out")}
+              </DropdownMenu.Item>
+            </>
+          ) : null}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      {errorDialog}
+    </>
   );
 }

package/src/chrome/awesomebar-data.tsx

@@ -92,7 +92,7 @@ export interface AwesomebarCatalogState {
  * honored in stories/tests), fetched once per session. SSR-safe: the fetch
  * runs in an effect. Without a provider the catalog stays empty.
  */
-export function useAwesomebarCatalog(): AwesomebarCatalogState {
+export function useAwesomebarCatalog(enabled = true): AwesomebarCatalogState {
   const config = useFrappeConfig();
   const baseURL = config?.baseURL;
   const fixtures = config?.fixtures;
@@ -102,7 +102,7 @@ export function useAwesomebarCatalog(): AwesomebarCatalogState {
   const [error, setError] = useState(false);
 
   useEffect(() => {
-    if (!baseURL) return;
+    if (!baseURL || !enabled) return;
     let cancelled = false;
     setError(false);
     getCatalog({ baseURL, auth, fixtures })
@@ -118,7 +118,7 @@ export function useAwesomebarCatalog(): AwesomebarCatalogState {
     // `auth` is intentionally not a dependency: the cache is keyed by
     // baseURL/fixtures and provider auth is stable for the session.
     // oxlint-disable-next-line exhaustive-deps
-  }, [baseURL, fixtures]);
+  }, [baseURL, fixtures, enabled]);
 
   return { catalog, error };
 }
@@ -135,14 +135,15 @@ export interface GlobalSearchHit {
 }
 
 export interface GlobalSearchState {
+  query: string;
+  error: boolean;
   hits: GlobalSearchHit[];
   searching: boolean;
 }
 
 /**
  * Document hits from the desk full-text index for an (already debounced)
- * query. Empty query clears without fetching. Failures degrade to no hits —
- * the nav-command and workspace sections still render.
+ * query. Empty query clears without fetching. Failures preserve local navigation.
  */
 export function useGlobalSearch(query: string, limit = 10): GlobalSearchState {
   const config = useFrappeConfig();
@@ -158,17 +159,17 @@ export function useGlobalSearch(query: string, limit = 10): GlobalSearchState {
     [baseURL, authKey],
   );
 
-  const [hits, setHits] = useState<GlobalSearchHit[]>([]);
-  const [searching, setSearching] = useState(false);
+  const [result, setResult] = useState<GlobalSearchState & { client?: HttpClient }>({
+    query: "",
+    hits: [],
+    searching: false,
+    error: false,
+  });
 
   useEffect(() => {
-    if (!query || !client) {
-      setHits([]);
-      setSearching(false);
-      return;
-    }
+    if (!query || !client) return;
     let cancelled = false;
-    setSearching(true);
+    setResult({ client, query, hits: [], searching: true, error: false });
     client
       .get<{ message?: GlobalSearchHit[] }>("/api/method/frappe.utils.global_search.search", {
         text: query,
@@ -176,20 +177,28 @@ export function useGlobalSearch(query: string, limit = 10): GlobalSearchState {
         limit,
       })
       .then((response) => {
-        if (!cancelled) setHits(response.payload?.message ?? []);
+        if (!cancelled)
+          setResult({
+            client,
+            query,
+            hits: response.payload?.message ?? [],
+            searching: false,
+            error: false,
+          });
       })
       .catch(() => {
-        if (!cancelled) setHits([]);
-      })
-      .finally(() => {
-        if (!cancelled) setSearching(false);
+        if (!cancelled) setResult({ client, query, hits: [], searching: false, error: true });
       });
     return () => {
       cancelled = true;
     };
   }, [client, query, limit]);
 
-  return { hits, searching };
+  if (!query || !client) return { query, hits: [], searching: false, error: false };
+  if (result.query !== query || result.client !== client) {
+    return { query, hits: [], searching: true, error: false };
+  }
+  return result;
 }
 
 /**

package/src/chrome/command-palette-model.spec.tsx

@@ -0,0 +1,148 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useCommandPaletteModel } from "./command-palette-model";
+
+const provider = vi.hoisted(() => ({ baseURL: "" }));
+vi.mock("@multiplatform.one/frappe-ui", () => ({ useFrappeConfig: () => provider }));
+vi.mock("../config/BackofficeProvider", () => ({
+  useBackofficePaths: () => ({
+    workspace: (name: string) => `/workspace/${name}`,
+    list: (name: string) => `/list/${name}`,
+    form: (doctype: string, name: string) => `/form/${doctype}/${name}`,
+    newDoc: (name: string) => `/new/${name}`,
+    view: (name: string, view: string) => `/view/${name}/${view}`,
+  }),
+  useBackofficeCapabilities: () => ({ newDoc: { enabled: false }, views: { enabled: false } }),
+  useIsDoctypeAllowed: () => () => true,
+}));
+
+let run = 0;
+let catalogReads: string[];
+beforeEach(() => {
+  provider.baseURL = `https://palette-model-${++run}.test`;
+  catalogReads = [];
+  vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    catalogReads.push(url.pathname);
+    return Response.json(
+      url.pathname.includes("Workspace")
+        ? { data: [{ name: "Sales", title: "Sales" }] }
+        : { message: [{ name: "ToDo" }] },
+    );
+  });
+});
+afterEach(() => vi.unstubAllGlobals());
+
+describe("command palette catalog", () => {
+  it("waits until opened and shares the catalog on reopening", async () => {
+    const { rerender } = renderHook(
+      ({ open }) => useCommandPaletteModel({ query: "", debouncedQuery: "", open }),
+      {
+        initialProps: { open: false },
+      },
+    );
+    await act(async () => {});
+    expect(catalogReads).toEqual([]);
+    rerender({ open: true });
+    await waitFor(() => expect(catalogReads).toHaveLength(2));
+    expect(catalogReads.filter((path) => path.includes("Workspace"))).toHaveLength(1);
+    expect(catalogReads.filter((path) => path.includes("get_list"))).toHaveLength(1);
+    rerender({ open: false });
+    rerender({ open: true });
+    await act(async () => {});
+    expect(catalogReads).toHaveLength(2);
+  });
+});
+
+describe("command palette search state", () => {
+  it("hides old hits during debounce while the current query is pending", async () => {
+    const answers = new Map<string, (response: Response) => void>();
+    vi.stubGlobal("fetch", (input: string | URL | Request) => {
+      const url = new URL(String(input instanceof Request ? input.url : input));
+      if (url.pathname.includes("global_search")) {
+        return new Promise<Response>((resolve) =>
+          answers.set(url.searchParams.get("text") ?? "", resolve),
+        );
+      }
+      return Promise.resolve(Response.json({ data: [], message: [] }));
+    });
+    const { result, rerender } = renderHook(
+      ({ query, debouncedQuery }) => useCommandPaletteModel({ query, debouncedQuery, open: true }),
+      {
+        initialProps: { query: "A", debouncedQuery: "" },
+      },
+    );
+    expect(result.current.searching).toBe(true);
+    expect(result.current.noResults).toBe(false);
+    rerender({ query: "A", debouncedQuery: "A" });
+    await waitFor(() => expect(answers.has("A")).toBe(true));
+    rerender({ query: "B", debouncedQuery: "A" });
+    expect(result.current.searching).toBe(true);
+    await act(async () =>
+      answers.get("A")?.(
+        Response.json({ message: [{ doctype: "ToDo", name: "A document", content: "" }] }),
+      ),
+    );
+    expect(result.current.items.filter((item) => item.id.startsWith("doc:"))).toEqual([]);
+    expect(result.current.searching).toBe(true);
+    rerender({ query: "B", debouncedQuery: "B" });
+    await waitFor(() => expect(answers.has("B")).toBe(true));
+    await act(async () =>
+      answers.get("B")?.(
+        Response.json({ message: [{ doctype: "ToDo", name: "B document", content: "" }] }),
+      ),
+    );
+    expect(result.current.items.map((item) => item.label)).toEqual(["B document"]);
+    expect(result.current.searching).toBe(false);
+  });
+
+  it("keeps local navigation after a refused remote search", async () => {
+    vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+      const url = new URL(String(input instanceof Request ? input.url : input));
+      if (url.pathname.includes("global_search"))
+        return Response.json({ exc_type: "PermissionError" }, { status: 403 });
+      return Response.json(
+        url.pathname.includes("Workspace")
+          ? { data: [{ name: "Sales", title: "Sales" }] }
+          : { message: [] },
+      );
+    });
+    const { result } = renderHook(() =>
+      useCommandPaletteModel({ query: "Sa", debouncedQuery: "Sa", open: true }),
+    );
+    await waitFor(() => expect(result.current.searchUnavailable).toBe(true));
+    expect(result.current.items.map((item) => item.label)).toEqual(["Sales"]);
+    expect(result.current.noResults).toBe(false);
+  });
+});
+
+it("ignores A when its response arrives after B", async () => {
+  const answers = new Map<string, (response: Response) => void>();
+  vi.stubGlobal("fetch", (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    if (url.pathname.includes("global_search")) {
+      return new Promise<Response>((resolve) =>
+        answers.set(url.searchParams.get("text") ?? "", resolve),
+      );
+    }
+    return Promise.resolve(Response.json({ data: [], message: [] }));
+  });
+  const { result, rerender } = renderHook(
+    ({ query }) => useCommandPaletteModel({ query, debouncedQuery: query, open: true }),
+    { initialProps: { query: "A" } },
+  );
+  await waitFor(() => expect(answers.has("A")).toBe(true));
+  rerender({ query: "B" });
+  await waitFor(() => expect(answers.has("B")).toBe(true));
+  await act(async () =>
+    answers.get("B")?.(
+      Response.json({ message: [{ doctype: "ToDo", name: "B result", content: "" }] }),
+    ),
+  );
+  await act(async () =>
+    answers.get("A")?.(
+      Response.json({ message: [{ doctype: "ToDo", name: "A result", content: "" }] }),
+    ),
+  );
+  expect(result.current.items.map((item) => item.label)).toEqual(["B result"]);
+});