@gusnips/react 0.9.29 → 0.9.31

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@gusnips/react",
-  "version": "0.9.29",
+  "version": "0.9.31",
   "description": "The headless runtime under a Vite + React SPA: typed fetch client with single-flight refresh, auth store, query defaults, route guards, error boundary, stale-tab recovery, i18n bootstrap.",
   "type": "module",
   "license": "MIT",
   "author": "Gustavo Salomé",
-  "homepage": "https://github.com/gusnips/frontkit/tree/main/react#readme",
+  "homepage": "https://github.com/gusnips/kit/tree/main/react#readme",
   "bugs": {
-    "url": "https://github.com/gusnips/frontkit/issues"
+    "url": "https://github.com/gusnips/kit/issues"
   },
   "exports": {
     ".": {
@@ -49,6 +49,10 @@
     "./oauth": {
       "types": "./dist/oauth.d.ts",
       "default": "./dist/oauth.js"
+    },
+    "./keys": {
+      "types": "./dist/keys.d.ts",
+      "default": "./dist/keys.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -149,7 +153,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/gusnips/frontkit.git",
+    "url": "git+https://github.com/gusnips/kit.git",
     "directory": "react"
   }
 }

package/src/keys.test.ts

@@ -0,0 +1,253 @@
+// @vitest-environment happy-dom
+import { QueryClient, QueryClientProvider, useMutation, useQuery } from "@tanstack/react-query";
+import { act, createElement, useLayoutEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  createKeyLifecycle,
+  KeyScopeChangedError,
+  useKeyReveals,
+  type KeyLifecycle,
+  type RevealedKey,
+} from "./keys.ts";
+
+interface KeyRecord {
+  id: string;
+  name: string;
+  prefix: string;
+}
+
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+
+const cleanups: (() => void)[] = [];
+afterEach(() => {
+  for (const cleanup of cleanups.splice(0)) cleanup();
+  document.body.replaceChildren();
+});
+
+function minted(id: string): RevealedKey<KeyRecord> {
+  const key = `sk_live_${id}_${"x".repeat(24)}`;
+  return { record: { id, name: `key ${id}`, prefix: key.slice(0, 10) }, key };
+}
+
+/** A request the test answers by hand, to hold it in flight across a navigation. */
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((yes) => {
+    resolve = yes;
+  });
+  return { promise, resolve };
+}
+
+function lifecycleIn(scope: string | null = "account-1:workspace-1") {
+  const keys = createKeyLifecycle<KeyRecord>();
+  keys.setScope(scope);
+  // Each test leaves the window as it found it: no unread secrets means no unload listener.
+  cleanups.push(() => keys.setScope(null));
+  return keys;
+}
+
+/** The prompt shows only when a listener cancels the event. */
+function closingPrompts(): boolean {
+  const event = new Event("beforeunload", { cancelable: true });
+  window.dispatchEvent(event);
+  return event.defaultPrevented;
+}
+
+describe("createKeyLifecycle", () => {
+  it("keeps every unread secret, newest first, and resolves only the record", async () => {
+    const keys = lifecycleIn();
+    const first = await keys.create(async () => minted("a"));
+    await keys.create(async () => minted("b"));
+
+    expect(first).toEqual(minted("a").record);
+    expect(keys.getSnapshot().map((one) => one.key)).toEqual([minted("b").key, minted("a").key]);
+    keys.dismiss("b");
+    expect(keys.getSnapshot()).toEqual([minted("a")]);
+  });
+
+  it("refuses a record that still holds the secret", async () => {
+    const keys = lifecycleIn();
+    // The whole answer passed as the record: the shape every donor's mutation cache ended up with.
+    const { record, key } = minted("a");
+    const answer = { ...record, key };
+    await expect(keys.create(async () => ({ record: answer, key }))).rejects.toThrow(
+      "still holds the secret",
+    );
+    expect(keys.getSnapshot()).toEqual([]);
+  });
+
+  it("sends nothing before a scope is set", async () => {
+    const keys = lifecycleIn(null);
+    const request = vi.fn(async () => minted("a"));
+    await expect(keys.create(request)).rejects.toThrow("setScope");
+    await expect(keys.revoke("a", request)).rejects.toThrow("setScope");
+    expect(request).not.toHaveBeenCalled();
+  });
+
+  it("a new scope forgets every secret and refuses answers from the old one", async () => {
+    const keys = lifecycleIn("account-1:workspace-1");
+    await keys.create(async () => minted("a"));
+    keys.setScope("account-1:workspace-1");
+    expect(keys.getSnapshot()).toHaveLength(1);
+
+    const late = deferred<RevealedKey<KeyRecord>>();
+    const creating = keys.create(() => late.promise);
+    // Signed out and straight back in as the same account: still not the scope that asked.
+    keys.setScope(null);
+    keys.setScope("account-1:workspace-1");
+    late.resolve(minted("b"));
+
+    const refused = await creating.catch((error: unknown) => error);
+    expect(refused).toBeInstanceOf(KeyScopeChangedError);
+    expect(refused).toMatchObject({ operation: "create" });
+    expect(keys.getSnapshot()).toEqual([]);
+  });
+
+  it("a failed revoke keeps the secret, and a success forgets only that key", async () => {
+    const keys = lifecycleIn();
+    await keys.create(async () => minted("a"));
+    await keys.create(async () => minted("b"));
+
+    await expect(
+      keys.revoke("a", async () => Promise.reject(new Error("offline"))),
+    ).rejects.toThrow("offline");
+    expect(keys.getSnapshot()).toHaveLength(2);
+
+    await keys.revoke("a", async () => undefined);
+    expect(keys.getSnapshot()).toEqual([minted("b")]);
+  });
+
+  it("a revoke answered after the scope changed forgets nothing in the new one", async () => {
+    const keys = lifecycleIn("account-1:workspace-1");
+    const late = deferred<void>();
+    const revoking = keys.revoke("a", () => late.promise);
+    keys.setScope("account-1:workspace-2");
+    await keys.create(async () => minted("a"));
+    late.resolve();
+
+    await expect(revoking).rejects.toMatchObject({ operation: "revoke" });
+    expect(keys.getSnapshot()).toEqual([minted("a")]);
+  });
+
+  it("asks before the tab closes only while a secret is unread, per lifecycle", async () => {
+    const one = lifecycleIn();
+    const other = lifecycleIn();
+    expect(closingPrompts()).toBe(false);
+
+    await one.create(async () => minted("a"));
+    await other.create(async () => minted("b"));
+    expect(closingPrompts()).toBe(true);
+
+    other.dismiss("b");
+    expect(closingPrompts()).toBe(true);
+    one.setScope(null);
+    expect(closingPrompts()).toBe(false);
+  });
+});
+
+describe("with react-query", () => {
+  function app(keys: KeyLifecycle<KeyRecord>, server: { list: KeyRecord[] }) {
+    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const element = document.createElement("div");
+    document.body.append(element);
+    const root = createRoot(element);
+    cleanups.push(() => act(() => root.unmount()));
+    let route: "keys" | "docs" = "keys";
+    let mint: ((request: () => Promise<RevealedKey<KeyRecord>>) => void) | undefined;
+    let shown: readonly RevealedKey<KeyRecord>[] = [];
+
+    function KeysPage() {
+      useQuery({ queryKey: ["keys"], queryFn: async () => server.list });
+      const create = useMutation({
+        mutationFn: (request: () => Promise<RevealedKey<KeyRecord>>) => keys.create(request),
+        onSuccess: () => client.invalidateQueries({ queryKey: ["keys"] }),
+      });
+      const reveals = useKeyReveals(keys);
+      useLayoutEffect(() => {
+        mint = create.mutate;
+        shown = reveals;
+      });
+      return createElement("p", null, reveals.map((one) => one.key).join(","));
+    }
+
+    const render = () =>
+      root.render(
+        createElement(
+          QueryClientProvider,
+          { client },
+          route === "keys" ? createElement(KeysPage) : createElement("p", null, "docs"),
+        ),
+      );
+    act(render);
+
+    return {
+      client,
+      element,
+      get shown() {
+        return shown;
+      },
+      mint(request: () => Promise<RevealedKey<KeyRecord>>) {
+        act(() => mint?.(request));
+      },
+      go(next: "keys" | "docs") {
+        route = next;
+        act(render);
+      },
+    };
+  }
+
+  it("a create in flight still reveals its secret after the page unmounts", async () => {
+    const keys = lifecycleIn();
+    const screen = app(keys, { list: [] });
+    const late = deferred<RevealedKey<KeyRecord>>();
+    screen.mint(() => late.promise);
+
+    screen.go("docs");
+    await act(async () => late.resolve(minted("a")));
+    expect(keys.getSnapshot()).toEqual([minted("a")]);
+
+    screen.go("keys");
+    expect(screen.shown).toEqual([minted("a")]);
+    expect(screen.element.textContent).toBe(minted("a").key);
+  });
+
+  it("no secret reaches the mutation cache or the list cache", async () => {
+    const keys = lifecycleIn();
+    const server = { list: [] as KeyRecord[] };
+    const screen = app(keys, server);
+    const { record, key } = minted("a");
+
+    screen.mint(async () => {
+      server.list = [record];
+      return { record, key };
+    });
+    await act(() =>
+      vi.waitFor(() => expect(screen.client.getQueryData(["keys"])).toEqual([record])),
+    );
+
+    const caches = JSON.stringify([
+      screen.client
+        .getMutationCache()
+        .getAll()
+        .map((mutation) => mutation.state),
+      screen.client
+        .getQueryCache()
+        .getAll()
+        .map((query) => query.state),
+    ]);
+    expect(caches).toContain(record.prefix);
+    expect(caches).not.toContain(key);
+    expect(keys.getSnapshot()).toEqual([{ record, key }]);
+  });
+
+  it("a prerender prints no secret", async () => {
+    const keys = lifecycleIn();
+    await keys.create(async () => minted("a"));
+    function Reveals() {
+      return createElement("p", null, useKeyReveals(keys).length);
+    }
+    expect(renderToString(createElement(Reveals))).toBe("<p>0</p>");
+  });
+});

package/src/keys.ts

@@ -0,0 +1,144 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * A new API key, the one time the server sends its secret. Three products wrote this flow, and
+ * each knew one part the others missed:
+ *
+ * - One kept unread secrets in a list outside the page, so a second key did not overwrite the
+ *   first and a trip to the docs did not lose either. The tab asked before closing only while one
+ *   was unread, and signing out forgot them all.
+ * - One kept the secret out of the list cache, folding only the record into it.
+ * - None kept it out of react-query's MUTATION cache. Each `mutationFn` resolved the whole answer,
+ *   secret included, so `mutation.data` held it, one of them under a comment promising it did not.
+ *
+ * So `create` takes the secret here and resolves only the record, and the request is the caller's.
+ * Forms, permissions, list queries, invalidation and copy feedback stay in the product.
+ */
+
+/** What your create request resolves: the record your list shows, and the secret beside it. */
+export interface RevealedKey<Record> {
+  readonly record: Record;
+  readonly key: string;
+}
+
+/** The account or workspace changed while a create or revoke was in flight. */
+export class KeyScopeChangedError extends Error {
+  readonly operation: "create" | "revoke";
+
+  constructor(operation: "create" | "revoke") {
+    super(
+      operation === "create"
+        ? "The account or workspace changed before the new key could be shown. If nobody saved it, revoke it from that workspace's keys."
+        : "The account or workspace changed while the key was being revoked. Check that workspace's keys to see whether it worked.",
+    );
+    this.name = "KeyScopeChangedError";
+    this.operation = operation;
+  }
+}
+
+export interface KeyLifecycle<Record> {
+  /**
+   * Who and where keys are made for: the signed-in account and the workspace, joined into one
+   * string, or `null` once signed out. Call it from your auth and workspace subscription, never
+   * from the keys page, which may not be mounted. A new scope forgets every unread secret and
+   * rejects requests started under the old one, including when the same account signs back in.
+   */
+  setScope(scope: string | null): void;
+  /**
+   * Run your create request, keep its secret here, and resolve only the record. Use it as a
+   * `mutationFn`: neither the result nor the variables carry the secret, and the reveal still
+   * lands when the page that asked has unmounted.
+   */
+  create(request: () => Promise<RevealedKey<Record>>): Promise<Record>;
+  /** Run your revoke request. Only a success, in the same scope, forgets that key's secret. */
+  revoke(id: string, request: () => Promise<unknown>): Promise<void>;
+  /** The person saved it. Wire this to "Done", never to a copy: a copy can fail. */
+  dismiss(id: string): void;
+  /** Unread secrets, newest first. */
+  getSnapshot(): readonly RevealedKey<Record>[];
+  subscribe(listener: () => void): () => void;
+}
+
+/**
+ * One per app, created at module scope, outside every route. Memory only: never storage, the URL
+ * or a query cache, so a reload loses an unread secret, and the tab asks before closing while one
+ * is unread. The listener comes and goes with the secrets because a page with a `beforeunload`
+ * listener is kept out of some browsers' back-forward cache.
+ */
+export function createKeyLifecycle<Record extends { readonly id: string }>(): KeyLifecycle<Record> {
+  let revealed: readonly RevealedKey<Record>[] = [];
+  let scope: string | null = null;
+  let generation = 0;
+  const listeners = new Set<() => void>();
+
+  // Per instance, so two lifecycles never remove each other's prompt.
+  function askBeforeLeaving(event: BeforeUnloadEvent): void {
+    event.preventDefault();
+    // Older Chrome and Safari prompt only when this is set too. The browser picks the words.
+    event.returnValue = "";
+  }
+
+  function publish(next: readonly RevealedKey<Record>[]): void {
+    const wasUnread = revealed.length > 0;
+    revealed = next;
+    if (wasUnread !== next.length > 0 && typeof window !== "undefined") {
+      if (next.length > 0) window.addEventListener("beforeunload", askBeforeLeaving);
+      else window.removeEventListener("beforeunload", askBeforeLeaving);
+    }
+    for (const listener of listeners) listener();
+  }
+
+  /** Runs `request` under the current scope and refuses an answer that outlived it. */
+  async function scoped<T>(operation: "create" | "revoke", request: () => Promise<T>): Promise<T> {
+    if (scope === null)
+      throw new Error("Call setScope with the signed-in account and workspace first.");
+    const started = generation;
+    const answer = await request();
+    if (started !== generation) throw new KeyScopeChangedError(operation);
+    return answer;
+  }
+
+  function dismiss(id: string): void {
+    const next = revealed.filter((one) => one.record.id !== id);
+    if (next.length !== revealed.length) publish(next);
+  }
+
+  return {
+    setScope(next) {
+      if (scope === next) return;
+      scope = next;
+      generation++;
+      if (revealed.length > 0) publish([]);
+    },
+    async create(request) {
+      const { record, key } = await scoped("create", request);
+      // The record goes on to react-query and often into the list cache. A request that passed
+      // the whole answer as the record would put the secret there, which is the bug this exists
+      // to end, so say so on the first try instead.
+      if (JSON.stringify(record).includes(key))
+        throw new Error("The record still holds the secret. Resolve it without the key field.");
+      publish([{ record, key }, ...revealed]);
+      return record;
+    },
+    async revoke(id, request) {
+      await scoped("revoke", request);
+      dismiss(id);
+    },
+    dismiss,
+    getSnapshot: () => revealed,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+// The server has no unread secrets, and a prerender must never print one.
+const none: readonly never[] = [];
+
+/** Unread secrets, newest first. Unmounting the component forgets nothing. */
+export function useKeyReveals<Record>(
+  lifecycle: KeyLifecycle<Record>,
+): readonly RevealedKey<Record>[] {
+  return useSyncExternalStore(lifecycle.subscribe, lifecycle.getSnapshot, () => none);
+}

package/src/oauth.test.ts

@@ -1,12 +1,15 @@
 // @vitest-environment happy-dom
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { act, createElement } from "react";
+import { act, createElement, type ChangeEvent } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApiClient } from "./api-client.ts";
 import {
+  createOAuthConsoleApi,
   formatUserCode,
   useConsentRequest,
   useDeviceApproval,
+  useDeviceCodeField,
   type ConsentApi,
   type ConsentView,
   type DeviceApi,
@@ -97,6 +100,17 @@ describe("useConsentRequest", () => {
     expect(page.current.leaving).toBe(true);
   });
 
+  it("hands the page whatever its server adds to the view, typed", async () => {
+    const api: ConsentApi<string, { spaces: string[] }> = {
+      describe: async () => ({ ...VIEW, spaces: ["ws-1", "ws-2"] }),
+      approve: async () => ({ ok: true, redirectTo: "https://claude.ai/cb" }),
+    };
+    const page = mount(() => useConsentRequest(api, "?client_id=x"));
+    await settle();
+    const { state } = page.current;
+    expect(state.status === "ready" ? state.view.spaces : null).toEqual(["ws-1", "ws-2"]);
+  });
+
   it("shows a refusal as a state and never redirects on it", async () => {
     const assign = vi.spyOn(window.location, "assign").mockImplementation(() => {});
     const page = mount(() =>
@@ -173,14 +187,14 @@ const DEVICE: DeviceView = {
   expiresAt: "2026-10-16T12:10:00.000Z",
 };
 
-describe("useDeviceApproval", () => {
-  function deviceApi(overrides: Partial<DeviceApi> = {}) {
-    return {
-      describe: vi.fn<DeviceApi["describe"]>(overrides.describe ?? (async () => DEVICE)),
-      decide: vi.fn<DeviceApi["decide"]>(overrides.decide ?? (async () => ({ ok: true }))),
-    };
-  }
+function deviceApi(overrides: Partial<DeviceApi> = {}) {
+  return {
+    describe: vi.fn<DeviceApi["describe"]>(overrides.describe ?? (async () => DEVICE)),
+    decide: vi.fn<DeviceApi["decide"]>(overrides.decide ?? (async () => ({ ok: true }))),
+  };
+}
 
+describe("useDeviceApproval", () => {
   it("starts from the link's code, asks the server, and stays approved after the yes", async () => {
     const api = deviceApi();
     const page = mount(() => useDeviceApproval(api, "?code=wdjb-mjht"));
@@ -191,7 +205,7 @@ describe("useDeviceApproval", () => {
 
     act(() => page.current.approve());
     await settle();
-    expect(api.decide).toHaveBeenCalledWith("WDJBMJHT", "approve");
+    expect(api.decide).toHaveBeenCalledWith("WDJBMJHT", "approve", undefined);
     expect(page.current.state).toEqual({ status: "approved" });
 
     // A refetch on focus would now hear "unknown code". It must not be asked.
@@ -218,11 +232,13 @@ describe("useDeviceApproval", () => {
   });
 
   it("says no, and shows a code the server does not know as refused", async () => {
-    const said = mount(() => useDeviceApproval(deviceApi(), "?code=WDJBMJHT"));
+    const api = deviceApi();
+    const said = mount(() => useDeviceApproval(api, "?code=WDJBMJHT"));
     await settle();
     act(() => said.current.deny());
     await settle();
     expect(said.current.state).toEqual({ status: "denied" });
+    expect(api.decide).toHaveBeenCalledWith("WDJBMJHT", "deny", undefined);
 
     const unknown: OAuthRefusal = { ok: false, reason: "unknown-code", message: "expired" };
     const gone = mount(() =>
@@ -246,6 +262,137 @@ describe("useDeviceApproval", () => {
   });
 });
 
+describe("useDeviceApproval with a choice", () => {
+  it("sends the page's choice with the yes, and names the pressed button until it answers", async () => {
+    let release!: () => void;
+    const decide = vi.fn<DeviceApi<string>["decide"]>(
+      () =>
+        new Promise((resolve) => {
+          release = () => resolve({ ok: true });
+        }),
+    );
+    const page = mount(() =>
+      useDeviceApproval({ describe: async () => DEVICE, decide }, "?code=WDJBMJHT"),
+    );
+    await settle();
+    expect(page.current.pending).toBeNull();
+
+    act(() => page.current.approve("ws-1"));
+    await settle();
+    expect(decide).toHaveBeenCalledWith("WDJBMJHT", "approve", "ws-1");
+    expect(page.current.pending).toBe("approve");
+
+    release();
+    await settle();
+    expect(page.current.pending).toBeNull();
+    expect(page.current.state).toEqual({ status: "approved" });
+  });
+});
+
+/** The one part of a change event the field reads. A test-only cast: the hook takes React's own. */
+const changeTo = (value: string) => ({ target: { value } }) as ChangeEvent<HTMLInputElement>;
+
+describe("useDeviceCodeField", () => {
+  it("wires the field to its status line and keeps the code in the address until decided", async () => {
+    window.history.replaceState({ idx: 3 }, "", "/device?from=mail&code=wdjbmjht");
+    const api = deviceApi();
+    const page = mount(() => {
+      const device = useDeviceApproval(api, window.location.search);
+      return { device, field: useDeviceCodeField(device) };
+    });
+    await settle();
+    const { inputProps, statusProps } = page.current.field;
+    expect(inputProps).toMatchObject({
+      value: "WDJB-MJHT",
+      autoFocus: false,
+      disabled: false,
+      "aria-invalid": false,
+      "aria-describedby": statusProps.id,
+    });
+    expect(inputProps.id).not.toBe(statusProps.id);
+    expect(window.location.search).toBe("?from=mail&code=WDJB-MJHT");
+    // Replaced with the router's own entry state, or its next Back lands on the wrong page.
+    expect(window.history.state).toEqual({ idx: 3 });
+    expect(window.history.length).toBe(1);
+
+    act(() => page.current.field.inputProps.onChange(changeTo("bcda")));
+    expect(page.current.field.inputProps["aria-invalid"]).toBe(true);
+    expect(window.location.search).toBe("?from=mail&code=BCDA");
+
+    act(() => page.current.field.inputProps.onChange(changeTo("wdjb mjht")));
+    await settle();
+    act(() => page.current.device.approve());
+    await settle();
+    expect(page.current.device.state).toEqual({ status: "approved" });
+    // The server no longer knows the code: a reload must not ask about it and say it is wrong.
+    expect(window.location.search).toBe("?from=mail");
+  });
+
+  it("focuses the field only when it starts empty", () => {
+    window.history.replaceState(null, "", "/device");
+    const page = mount(() => useDeviceCodeField(useDeviceApproval(deviceApi(), "")));
+    expect(page.current.inputProps.autoFocus).toBe(true);
+    expect(window.location.search).toBe("");
+  });
+});
+
+describe("createOAuthConsoleApi", () => {
+  function client() {
+    const sent: { url: string; method?: string; body?: BodyInit | null }[] = [];
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (url, init) => {
+      sent.push({ url: String(url), method: init?.method, body: init?.body });
+      return new Response(JSON.stringify({ data: { ok: true } }), {
+        headers: { "Content-Type": "application/json" },
+      });
+    });
+    const http = createApiClient({
+      baseUrl: "https://api.test",
+      session: {
+        getToken: async () => "token",
+        refresh: async () => ({ token: "token", reachedAuth: true }),
+        signOut: async () => {},
+      },
+      onSessionDead: () => {},
+    });
+    return { http, sent };
+  }
+
+  it("calls the server's console routes through the app's own client", async () => {
+    const { http, sent } = client();
+    const api = createOAuthConsoleApi<string>(http, "/auth/oauth");
+    await api.consent.describe("client_id=x&state=s");
+    await api.consent.approve("client_id=x&state=s", "ws-1");
+    await api.device.describe("WDJBMJHT");
+    await api.device.decide("WDJBMJHT", "approve", "ws-1");
+    await api.device.decide("WDJBMJHT", "deny");
+    expect(sent).toEqual([
+      { url: "https://api.test/auth/oauth/request?client_id=x&state=s", method: "GET" },
+      {
+        url: "https://api.test/auth/oauth/approve",
+        method: "POST",
+        body: '{"query":"client_id=x&state=s","choice":"ws-1"}',
+      },
+      { url: "https://api.test/auth/oauth/device?code=WDJBMJHT", method: "GET" },
+      {
+        url: "https://api.test/auth/oauth/device",
+        method: "POST",
+        body: '{"code":"WDJBMJHT","decision":"approve","choice":"ws-1"}',
+      },
+      {
+        url: "https://api.test/auth/oauth/device",
+        method: "POST",
+        body: '{"code":"WDJBMJHT","decision":"deny"}',
+      },
+    ]);
+  });
+
+  it("sends no choice when the page has none", async () => {
+    const { http, sent } = client();
+    await createOAuthConsoleApi(http, "/app/oauth").consent.approve("client_id=x");
+    expect(sent[0]?.body).toBe('{"query":"client_id=x"}');
+  });
+});
+
 describe("formatUserCode", () => {
   it("writes what the field shows", () => {
     expect(formatUserCode("")).toBe("");