@opengeni/react 4.2.1-canary.39642758903001 → 4.3.1

package/src/app/components/command-menu/keycaps.tsx

@@ -0,0 +1,56 @@
+import { chordKeys, chordLabel, type Chord, type ChordPlatform } from "../../lib/actions/chords";
+import { cn } from "../../lib/utils";
+
+/**
+ * A chord as small keycaps: ⌘ ⇧ O on Mac, Ctrl Shift O elsewhere. Screen
+ * readers hear the whole chord once ("⌘⇧O") instead of each cap.
+ */
+export function Keycaps(props: {
+  chord: Chord;
+  platform: ChordPlatform;
+  /** Shows this on the last cap instead of the chord's key, e.g. "1–9" for a range. */
+  keyLabel?: string | undefined;
+  /** What screen readers hear instead of the chord's own label. */
+  ariaLabel?: string | undefined;
+  className?: string | undefined;
+}) {
+  const keys = chordKeys(props.chord, props.platform);
+  if (props.keyLabel) keys[keys.length - 1] = props.keyLabel;
+  return (
+    // role="img" makes the label count: browsers and screen readers ignore
+    // aria-label on a plain span, and the caps themselves are hidden.
+    <span
+      role="img"
+      className={cn("inline-flex shrink-0 items-center gap-0.5", props.className)}
+      aria-label={props.ariaLabel ?? chordLabel(props.chord, props.platform)}
+    >
+      {keys.map((key) => (
+        <kbd
+          key={key}
+          aria-hidden="true"
+          className={cn(
+            "inline-flex h-5 min-w-5 items-center justify-center rounded-[5px] border border-border bg-surface-2 px-1 font-sans text-[11px] leading-none font-medium text-fg-muted",
+            // Mac symbols read better a touch larger than letters.
+            key.length === 1 && /[⌘⇧⌥⌃↩⇥⌫↑↓←→]/.test(key) ? "text-[12px]" : null,
+          )}
+        >
+          {key}
+        </kbd>
+      ))}
+    </span>
+  );
+}
+
+/** A tooltip's text with its key after it, quieter: "Search sessions  ⌘K". */
+export function TooltipWithKeys(props: {
+  label: string;
+  shortcut: { label: string } | null | undefined;
+}) {
+  if (!props.shortcut) return <>{props.label}</>;
+  return (
+    <span className="inline-flex items-center gap-2">
+      {props.label}
+      <span className="opacity-60">{props.shortcut.label}</span>
+    </span>
+  );
+}

package/src/app/components/command-menu/shortcut-sheet.tsx

@@ -0,0 +1,155 @@
+/**
+ * The shortcut sheet (⌘/): every action that has a key, grouped, in the
+ * person's own notation. It reads the action registry, so it never drifts from
+ * what the keys actually do.
+ */
+import { Fragment, type RefObject } from "react";
+import { useAppActions } from "../../lib/actions/actions-provider";
+import { applicableChords, chordLabel, type Chord } from "../../lib/actions/chords";
+import {
+  APP_ACTIONS,
+  findAction,
+  type ActionGroup,
+  type AppAction,
+} from "../../lib/actions/registry";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../../../ui/dialog";
+import { Keycaps } from "./keycaps";
+
+const GROUPS: ReadonlyArray<{ group: ActionGroup; label: string }> = [
+  { group: "chat", label: "Chats" },
+  { group: "navigate", label: "Move around" },
+  { group: "view", label: "View" },
+  { group: "help", label: "Help" },
+];
+
+/** Titles that read better on the sheet than in menus, where the chat is implied. */
+const SHEET_TITLES: Record<string, string> = {
+  "chat.copyLink": "Copy chat link",
+  "chat.pin": "Pin or unpin chat",
+  "go.inbox": "Go to inbox",
+  "go.previousChat": "Previous chat",
+  "go.nextChat": "Next chat",
+  "go.pinnedChat": "Pinned chats 1 to 9",
+  "commandMenu.open": "Search chats and actions",
+};
+
+type SheetRow = {
+  action: AppAction;
+  title: string;
+  chords: Chord[];
+  summary?: string | undefined;
+  /** Only the desktop app has this key. */
+  desktopOnly: boolean;
+};
+
+export default function ShortcutSheet(props: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Where focus goes back to on close. */
+  returnFocus: RefObject<HTMLElement | null>;
+}) {
+  const actions = useAppActions();
+  if (!actions) return null;
+  const { platform, surface } = actions.env;
+  const menuAction = findAction("commandMenu.open");
+  const menuChord = menuAction ? actions.chordsFor(menuAction)[0] : undefined;
+  const rows: SheetRow[] = APP_ACTIONS.flatMap((action) => {
+    const here = applicableChords(action.chords, surface, platform);
+    const desktop = surface === "web" ? applicableChords(action.chords, "desktop", platform) : [];
+    if (here.length === 0 && desktop.length === 0) return [];
+    const title =
+      SHEET_TITLES[action.id] ??
+      (typeof action.title === "string" ? action.title : action.title(actions.env, null));
+    const summary = action.chordSummary?.(platform);
+    return [
+      {
+        action,
+        title,
+        chords: here.length > 0 ? here : desktop,
+        summary,
+        desktopOnly: here.length === 0,
+      },
+    ];
+  });
+
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent
+        data-og-shortcut-sheet=""
+        className="gap-0 p-0 sm:max-w-[720px] sm:p-0"
+        aria-describedby="shortcut-sheet-description"
+        // Focus the sheet itself: a ring on the close button reads as a selection.
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          (event.currentTarget as HTMLElement | null)?.focus();
+        }}
+        onCloseAutoFocus={(event) => {
+          const target = props.returnFocus.current;
+          if (target?.isConnected) {
+            event.preventDefault();
+            target.focus({ preventScroll: true });
+          }
+        }}
+      >
+        <div className="px-6 pt-6 pb-2 max-sm:px-5 max-sm:pt-5">
+          <DialogTitle className="text-base">Keyboard shortcuts</DialogTitle>
+          <DialogDescription id="shortcut-sheet-description" className="mt-1 text-sm text-fg-muted">
+            {menuChord ? (
+              <>
+                Press <Keycaps chord={menuChord} platform={platform} className="align-[-4px]" />{" "}
+                anywhere to find a chat or run any action.
+              </>
+            ) : (
+              "Every action is also in the command menu."
+            )}
+          </DialogDescription>
+        </div>
+        <div className="grid gap-x-10 px-6 pb-6 max-sm:px-5 sm:grid-cols-2">
+          {GROUPS.map(({ group, label }) => {
+            const groupRows = rows.filter((row) => row.action.group === group);
+            if (groupRows.length === 0) return null;
+            return (
+              <section key={group} aria-label={label} className="min-w-0 pt-4">
+                <h3 className="pb-1 text-xs leading-4.5 font-medium text-fg-muted">{label}</h3>
+                <dl>
+                  {groupRows.map((row) => (
+                    <div
+                      key={row.action.id}
+                      className="flex min-h-9 items-center gap-3 border-b border-border/60 py-1 last:border-b-0"
+                    >
+                      <dt className="flex min-w-0 flex-1 items-center gap-2 text-sm text-fg-label">
+                        <span className="truncate">{row.title}</span>
+                        {row.desktopOnly ? (
+                          <span className="shrink-0 rounded-full bg-hover px-1.5 py-px text-[11px] leading-4 whitespace-nowrap text-fg-muted">
+                            Desktop app
+                          </span>
+                        ) : null}
+                      </dt>
+                      <dd className="flex shrink-0 items-center gap-1.5 text-xs text-fg-muted">
+                        {row.summary ? (
+                          <Keycaps
+                            chord={row.chords[0]!}
+                            platform={platform}
+                            keyLabel="1–9"
+                            ariaLabel={row.summary}
+                          />
+                        ) : (
+                          row.chords.map((chord, index) => (
+                            <Fragment key={chordLabel(chord, platform)}>
+                              {index > 0 ? <span>or</span> : null}
+                              <Keycaps chord={chord} platform={platform} />
+                            </Fragment>
+                          ))
+                        )}
+                      </dd>
+                    </div>
+                  ))}
+                </dl>
+              </section>
+            );
+          })}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/app/components/credits/credit-refusal-notice.test.tsx

@@ -0,0 +1,132 @@
+import { afterEach, beforeAll, expect, mock, test } from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { act, type ComponentProps, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+
+mock.module("../../lib/navigation", () => ({
+  Link: ({
+    children,
+    to,
+    params,
+    search,
+  }: {
+    children: ReactNode;
+    to: string;
+    params: { workspaceId: string };
+    search: { section: string };
+  }) => (
+    <a href={`${to.replace("$workspaceId", params.workspaceId)}?section=${search.section}`}>
+      {children}
+    </a>
+  ),
+}));
+
+const { CreditRefusalNotice } = await import("./credit-refusal-notice");
+
+beforeAll(() => {
+  try {
+    GlobalRegistrator.register();
+  } catch {
+    // Another web test in this process already installed Happy DOM.
+  }
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+let root: Root | undefined;
+afterEach(async () => {
+  await act(async () => root?.unmount());
+  root = undefined;
+  document.body.replaceChildren();
+});
+
+const SERVER_MESSAGE =
+  "No credits available for this model. Choose a model covered by your promotional credits or add credits.";
+
+async function render(props: Partial<ComponentProps<typeof CreditRefusalNotice>> = {}) {
+  const container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+  await act(async () =>
+    root!.render(
+      <CreditRefusalNotice
+        gap={{
+          modelLabel: "Gemini 4 Argon",
+          covered: [
+            { id: "azure-sol/gpt-6.1-sol", label: "GPT-6.1 Sol" },
+            { id: "gpt-6-luna", label: "GPT-6 Luna" },
+          ],
+          selectionUsable: false,
+        }}
+        message={SERVER_MESSAGE}
+        workspaceId="ws"
+        canBuyCredits
+        canConnectModel
+        {...props}
+      />,
+    ),
+  );
+  return container;
+}
+
+test("a refused Send names the model, the reason, what the credit covers, and the next steps", async () => {
+  const onChooseModel = mock((_id: string) => undefined);
+  const container = await render({ onChooseModel });
+  const alert = container.querySelector('[role="alert"]');
+  expect(alert).not.toBeNull();
+  expect(alert!.textContent).toContain("Your credits don't cover Gemini 4 Argon");
+  expect(alert!.textContent).toContain(SERVER_MESSAGE);
+  expect(alert!.textContent).toContain("Your credits cover GPT-6.1 Sol and GPT-6 Luna.");
+  expect(alert!.textContent).not.toContain("—");
+  const use = [...container.querySelectorAll("button")].find(
+    (button) => button.textContent === "Use GPT-6.1 Sol",
+  );
+  await act(async () => use!.click());
+  expect(onChooseModel).toHaveBeenCalledWith("azure-sol/gpt-6.1-sol");
+  const links = [...container.querySelectorAll("a")].map((link) => link.getAttribute("href"));
+  expect(links).toEqual(["/workspaces/ws/organization?section=billing"]);
+});
+
+test("after switching to a model that can run, the notice says to send again", async () => {
+  const container = await render({
+    gap: {
+      modelLabel: "Gemini 4 Argon",
+      covered: [{ id: "gpt-6-luna", label: "GPT-6 Luna" }],
+      selectionUsable: true,
+    },
+    onChooseModel: () => undefined,
+  });
+  expect(container.textContent).toContain("Send again to use the selected model.");
+  expect(container.textContent).not.toContain("Use GPT-6 Luna");
+});
+
+test("without covered models it offers credits and a connection, and can be dismissed", async () => {
+  const onDismiss = mock(() => undefined);
+  const container = await render({
+    gap: { modelLabel: "Gemini 4 Argon", covered: [], selectionUsable: false },
+    onDismiss,
+  });
+  expect(container.textContent).not.toContain("Your credits cover");
+  const links = [...container.querySelectorAll("a")].map((link) => link.textContent);
+  expect(links).toEqual(["Buy credits", "Connect a model"]);
+  await act(async () =>
+    container.querySelector<HTMLButtonElement>('[aria-label="Dismiss"]')!.click(),
+  );
+  expect(onDismiss).toHaveBeenCalledTimes(1);
+});
+
+test("people who cannot buy credits are not offered a purchase", async () => {
+  const container = await render({ canBuyCredits: false, canConnectModel: false });
+  expect(container.querySelectorAll("a")).toHaveLength(0);
+  expect(container.textContent).toContain(SERVER_MESSAGE);
+});
+
+test("the refusal shows the server's sentence, not the SDK's status prefix or reference", async () => {
+  // OpenGeniApiError.message for a 402 from the API, as the routes pass it.
+  const container = await render({
+    message: `API 402: ${SERVER_MESSAGE} Reference: 9f1c2b7e-4d1a-4c55-9a0e-3b8f2d6c1a47.`,
+  });
+  const alert = container.querySelector('[role="alert"]')!;
+  expect(alert.textContent).toContain(SERVER_MESSAGE);
+  expect(alert.textContent).not.toContain("API 402");
+  expect(alert.textContent).not.toContain("Reference");
+});

package/src/app/components/credits/credit-refusal-notice.tsx

@@ -0,0 +1,92 @@
+import { Link } from "../../lib/navigation";
+import { CreditCardIcon } from "lucide-react";
+
+import { Button } from "../../../ui/button";
+import { Notice } from "../../../ui/notice";
+import { analyticsAction } from "../../../ui/analytics-actions";
+import { apiErrorFacts } from "../../../ui/api-error";
+import { modelListSummary } from "../../lib/credit-coverage";
+import type { FreeCreditGap } from "../../lib/free-credit-gap";
+
+/**
+ * The API refused a Send or a new chat because no credit pays for its model.
+ * Stays above the composer until the next accepted message, so the refusal is
+ * not only a short line under a failed bubble: it names the model, the
+ * server's reason, the models the remaining credit covers, and the next step.
+ */
+export function CreditRefusalNotice({
+  gap,
+  message,
+  workspaceId,
+  canBuyCredits,
+  canConnectModel,
+  onChooseModel,
+  onDismiss,
+}: {
+  gap: FreeCreditGap;
+  /** The API's refusal text. */
+  message?: string | null | undefined;
+  workspaceId: string;
+  canBuyCredits: boolean;
+  canConnectModel: boolean;
+  /** Select a covered model in the composer. */
+  onChooseModel?: ((id: string) => void) | undefined;
+  onDismiss?: (() => void) | undefined;
+}) {
+  const switchTo = !gap.selectionUsable && onChooseModel ? gap.covered[0] : undefined;
+  const coverage = gap.selectionUsable
+    ? "Send again to use the selected model."
+    : gap.covered.length > 0
+      ? `Your credits cover ${modelListSummary(gap.covered.map((model) => model.label))}.`
+      : null;
+  const connect = canConnectModel && gap.covered.length === 0 && !gap.selectionUsable;
+  // The server's sentence, without the SDK's "API 402:" prefix or the reference.
+  const reason = message ? apiErrorFacts(message).serverMessage : undefined;
+  return (
+    <Notice
+      tone="failed"
+      live="assertive"
+      title={`Your credits don't cover ${gap.modelLabel}`}
+      {...(onDismiss ? { onDismiss } : {})}
+    >
+      <span data-testid="credit-refusal-notice">
+        {reason ? <span className="block">{reason}</span> : null}
+        {coverage ? <span className="block">{coverage}</span> : null}
+      </span>
+      {switchTo || canBuyCredits || connect ? (
+        <div className="mt-2 flex flex-wrap gap-2">
+          {switchTo ? (
+            <Button type="button" size="sm" onClick={() => onChooseModel!(switchTo.id)}>
+              Use {switchTo.label}
+            </Button>
+          ) : null}
+          {canBuyCredits ? (
+            <Button asChild type="button" size="sm" variant={switchTo ? "outline" : "default"}>
+              <Link
+                to="/workspaces/$workspaceId/organization"
+                params={{ workspaceId }}
+                search={{ section: "billing" }}
+                {...analyticsAction("buy_credits")}
+              >
+                <CreditCardIcon className="size-3.5" />
+                Buy credits
+              </Link>
+            </Button>
+          ) : null}
+          {connect ? (
+            <Button asChild type="button" size="sm" variant="outline">
+              <Link
+                to="/workspaces/$workspaceId/organization"
+                params={{ workspaceId }}
+                search={{ section: "models", workspace: workspaceId }}
+                {...analyticsAction("connect_model")}
+              >
+                Connect a model
+              </Link>
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+    </Notice>
+  );
+}

package/src/app/components/rail/rail-context.tsx

@@ -18,8 +18,9 @@ import {
 
 import { useAppContext } from "../../app-context";
 import { requestCreateComposerFocus } from "../../lib/create-composer-focus";
+import { requestCommandMenu } from "../../lib/actions/events";
 import { desktopBridge, desktopCapability } from "../../lib/desktop";
-import { OPEN_SESSION_SEARCH_EVENT, requestSessionSearch } from "../../lib/session-search-route";
+import { OPEN_SESSION_SEARCH_EVENT } from "../../lib/session-search-route";
 import { workspaceManagementLocation } from "../../lib/workspace-management-location";
 import { useUiEventTarget } from "../../lib/ui-events";
 
@@ -73,6 +74,12 @@ export type RailContextValue = {
   drawerTriggerRef: RefObject<HTMLButtonElement | null>;
   /** Retiring drawers must not take focus from an open search dialog. */
   restoreDrawerFocus: () => void;
+  /**
+   * Close the phone drawer for a dialog that takes over from it (search, the
+   * command menu). That dialog returns focus itself, so the retiring drawer
+   * must not reclaim it when its exit animation ends.
+   */
+  handOffDrawer: () => void;
   /** Navigate to a workspace's sessions index (used by the switchers). */
   openWorkspace: (workspaceId: string) => void;
   /** Switch organization: navigate to the first workspace in the target org. */
@@ -129,6 +136,8 @@ export function RailProvider({
   const appContext = useAppContext();
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchMounted, setSearchMounted] = useState(false);
+  // What to search for when the dialog opens from the ⌘K menu ("Search messages for …").
+  const [searchSeed, setSearchSeed] = useState<{ query: string; nonce: number } | null>(null);
   const searchReturnFocus = useRef<HTMLElement | null>(null);
   const searchOpenRef = useRef(searchOpen);
   searchOpenRef.current = searchOpen;
@@ -151,6 +160,13 @@ export function RailProvider({
     }
     if (!searchOpenRef.current) drawerTriggerRef.current?.focus({ preventScroll: true });
   }, []);
+  const drawerOpenRef = useRef(drawerOpen);
+  drawerOpenRef.current = drawerOpen;
+  const handOffDrawer = useCallback(() => {
+    if (!drawerOpenRef.current) return;
+    suppressDrawerRestore.current = true;
+    setDrawerOpenState(false);
+  }, []);
   const changeSearchOpen = useCallback((next: boolean) => {
     searchOpenRef.current = next;
     setSearchOpen(next);
@@ -161,6 +177,7 @@ export function RailProvider({
         event as CustomEvent<{
           workspaceId?: string | undefined;
           returnFocus?: HTMLElement | undefined;
+          query?: string | undefined;
         }>
       ).detail;
       if (detail?.workspaceId !== workspaceId) return;
@@ -173,14 +190,17 @@ export function RailProvider({
               ? document.activeElement
               : null;
       }
-      if (drawerOpen) suppressDrawerRestore.current = true;
+      if (typeof detail.query === "string" && detail.query) {
+        const query = detail.query;
+        setSearchSeed((current) => ({ query, nonce: (current?.nonce ?? 0) + 1 }));
+      }
       setSearchMounted(true);
       changeSearchOpen(true);
-      setDrawerOpen(false);
+      handOffDrawer();
     };
     windowEvents.addEventListener(OPEN_SESSION_SEARCH_EVENT, open);
     return () => windowEvents.removeEventListener(OPEN_SESSION_SEARCH_EVENT, open);
-  }, [workspaceId, isMobile, drawerOpen, changeSearchOpen, setDrawerOpen, windowEvents]);
+  }, [workspaceId, isMobile, changeSearchOpen, handOffDrawer, windowEvents]);
   useEffect(() => {
     searchReturnFocus.current = null;
     changeSearchOpen(false);
@@ -302,7 +322,7 @@ export function RailProvider({
     if (!bridge) return;
     return bridge.commands.onCommand((command) => {
       if (command === "newSession") startNewSession();
-      else if (command === "searchSessions") requestSessionSearch(windowEvents, workspaceId);
+      else if (command === "searchSessions") requestCommandMenu(windowEvents);
       else if (command === "toggleSidebar") toggleCollapsed();
       else if (command === "openInbox") {
         setDrawerOpen(false);
@@ -326,6 +346,7 @@ export function RailProvider({
       setDrawerOpen,
       drawerTriggerRef,
       restoreDrawerFocus,
+      handOffDrawer,
       openWorkspace,
       openOrg,
       openSession,
@@ -340,6 +361,7 @@ export function RailProvider({
       drawerOpen,
       setDrawerOpen,
       restoreDrawerFocus,
+      handOffDrawer,
       setCollapsed,
       toggleCollapsed,
       openWorkspace,
@@ -360,6 +382,7 @@ export function RailProvider({
             open={searchOpen}
             onOpenChange={changeSearchOpen}
             returnFocus={searchReturnFocus}
+            seed={searchSeed}
           />
         </Suspense>
       ) : null}

package/src/app/components/rail/rail-sections.tsx

@@ -9,7 +9,7 @@ import { useRail } from "./rail-context";
 import { NewSessionLink } from "./session-list";
 import { Button } from "../../../ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../ui/tooltip";
-import { NEW_SESSION_SHORTCUT, shortcutLabel } from "../../lib/keyboard-shortcuts";
+import { useActionShortcut } from "../../lib/actions/actions-provider";
 import { Link, useRouterState } from "../../lib/navigation";
 import { cn } from "../../lib/utils";
 import { windowControlsInPage } from "../../lib/desktop";
@@ -139,13 +139,11 @@ export function PrimaryNav() {
   const { primaryNav } = useContext(SessionShellSlotsContext);
   const pathname = useRouterState({ select: (state) => state.location.pathname });
   const newSessionActive = pathname === `/workspaces/${rail.workspaceId}/sessions`;
-  const newChatShortcut = useSessionUiFeature("newChatShortcut");
+  const newChatShortcut = useActionShortcut("chat.new");
   return (
     <div className={cn("mt-2 grid gap-0.5 px-2", rail.collapsed && "justify-center")}>
       <NewSessionLink
-        aria-label={
-          newChatShortcut ? `New session · ${shortcutLabel(NEW_SESSION_SHORTCUT)}` : "New session"
-        }
+        aria-label={newChatShortcut ? `New session · ${newChatShortcut.label}` : "New session"}
         className={cn(
           "group relative flex h-8 items-center rounded-md text-sm font-normal text-fg-label outline-hidden transition-colors pointer-coarse:h-10",
           "hover:bg-hover hover:text-fg focus-visible:ring-2 focus-visible:ring-ring/50",

package/src/app/components/rail/session-header-mute.test.tsx

@@ -1,10 +1,29 @@
 import { afterAll, beforeAll, expect, mock, test } from "bun:test";
 import { GlobalRegistrator } from "@happy-dom/global-registrator";
 import { act, type ReactNode } from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot as createReactRoot } from "react-dom/client";
 
+import { AppContext, type AppContextValue } from "../../app-context";
 import type { Session } from "../../types";
 
+// The header only renders inside the session shell, which always has the app
+// context; its chat actions (copy link, pin) run through it. This test runs
+// none of them, so any read of the context fails loudly.
+const appContext = new Proxy({} as AppContextValue, {
+  get(_target, key) {
+    throw new Error(`The SessionHeader mute test's app context has no ${String(key)}`);
+  },
+});
+
+function createRoot(container: Element) {
+  const root = createReactRoot(container);
+  return {
+    render: (node: ReactNode) =>
+      root.render(<AppContext.Provider value={appContext}>{node}</AppContext.Provider>),
+    unmount: () => root.unmount(),
+  };
+}
+
 // The menu's items, rendered inline so the test reads what the person sees.
 mock.module("../../../ui/dropdown-menu", () => ({
   DropdownMenu: ({ children }: { children: ReactNode }) => <div>{children}</div>,
@@ -12,6 +31,9 @@ mock.module("../../../ui/dropdown-menu", () => ({
   DropdownMenuContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   DropdownMenuSeparator: () => <hr />,
   DropdownMenuMeta: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+  DropdownMenuShortcut: ({ children }: { children: ReactNode }) => (
+    <span aria-hidden>{children}</span>
+  ),
   DropdownMenuItem: ({
     children,
     onSelect,

package/src/app/components/rail/session-header.test.tsx

@@ -1,12 +1,31 @@
 import { afterAll, beforeAll, describe, expect, test } from "bun:test";
 import { GlobalRegistrator } from "@happy-dom/global-registrator";
-import { act } from "react";
-import { createRoot } from "react-dom/client";
+import { act, type ReactNode } from "react";
+import { createRoot as createReactRoot } from "react-dom/client";
 
+import { AppContext, type AppContextValue } from "../../app-context";
 import type { Session } from "../../types";
 
 import { SessionHeader } from "./session-header";
 
+// The header only renders inside the session shell, which always has the app
+// context; its chat actions (copy link, pin) run through it. None of these
+// tests run one, so any read of the context fails loudly.
+const appContext = new Proxy({} as AppContextValue, {
+  get(_target, key) {
+    throw new Error(`The SessionHeader test's app context has no ${String(key)}`);
+  },
+});
+
+function createRoot(container: Element) {
+  const root = createReactRoot(container);
+  return {
+    render: (node: ReactNode) =>
+      root.render(<AppContext.Provider value={appContext}>{node}</AppContext.Provider>),
+    unmount: () => root.unmount(),
+  };
+}
+
 beforeAll(() => {
   GlobalRegistrator.register();
   (