@elabs-ai/components-ai 4.0.0 → 4.2.0

package/src/prompt-input-effort.test.tsx

@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { type EffortLevel } from "@elabs-ai/components-ui";
+import { PromptInputEffort } from "./prompt-input-effort";
+
+const levels: EffortLevel[] = [
+  { id: "low", label: "Low" },
+  { id: "medium", label: "Medium" },
+  { id: "high", label: "High" },
+  { id: "max", label: "Max" },
+];
+
+describe("PromptInputEffort", () => {
+  it("defaults to the first (lowest) level", () => {
+    render(<PromptInputEffort levels={levels} aria-label="Reasoning effort" />);
+    expect(screen.getByRole("radio", { name: "Low", checked: true })).toBeInTheDocument();
+    expect(screen.getByText("Low")).toBeInTheDocument();
+  });
+
+  it("is uncontrolled: clicking a level fires onValueChange and moves the checked radio", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <PromptInputEffort
+        levels={levels}
+        aria-label="Reasoning effort"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole("radio", { name: "High" }));
+    expect(onValueChange).toHaveBeenCalledWith("high");
+    expect(screen.getByRole("radio", { name: "High", checked: true })).toBeInTheDocument();
+  });
+
+  it("is controlled via `value`", () => {
+    render(<PromptInputEffort levels={levels} aria-label="Reasoning effort" value="max" />);
+    expect(screen.getByRole("radio", { name: "Max", checked: true })).toBeInTheDocument();
+    expect(screen.getByText("Max")).toBeInTheDocument();
+  });
+
+  /**
+   * The test the issue asks for: two ADJACENT levels must differ in their
+   * ACCESSIBLE TEXT (not merely a class string, which would pass on
+   * colour-only code) and in their RENDERED INDICATOR — a structural count of
+   * how many rungs are marked filled, not a comparison of two class strings.
+   */
+  it("two adjacent levels differ in accessible text AND in the rendered fill indicator", () => {
+    const { unmount } = render(
+      <PromptInputEffort levels={levels} aria-label="Reasoning effort" value="medium" />,
+    );
+
+    // Accessible text: the checked radio's accessible name, and the visible
+    // level-name text, both reflect "Medium".
+    const mediumChecked = screen.getByRole("radio", { checked: true });
+    expect(mediumChecked).toHaveAccessibleName("Medium");
+    expect(screen.getByText("Medium")).toBeInTheDocument();
+
+    // Rendered indicator: a structural count of filled rungs (`data-filled`),
+    // not a class-string diff — "Medium" is the 2nd of 4 rungs, so exactly 2
+    // are filled.
+    const mediumFilledCount = document.querySelectorAll('[data-filled="true"]').length;
+    expect(mediumFilledCount).toBe(2);
+
+    unmount();
+
+    render(<PromptInputEffort levels={levels} aria-label="Reasoning effort" value="high" />);
+
+    const highChecked = screen.getByRole("radio", { checked: true });
+    expect(highChecked).toHaveAccessibleName("High");
+    expect(screen.getByText("High")).toBeInTheDocument();
+
+    // "High" is the 3rd of 4 (adjacent) rungs, so exactly 3 are filled — one
+    // more than "Medium", proving the indicator actually moved.
+    const highFilledCount = document.querySelectorAll('[data-filled="true"]').length;
+    expect(highFilledCount).toBe(3);
+
+    // The two accessible names differ, and the two filled counts differ —
+    // the assertion this test exists to make.
+    expect(mediumChecked).not.toBe(highChecked);
+    expect(mediumFilledCount).not.toBe(highFilledCount);
+  });
+});

package/src/prompt-input-effort.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  RadioGroup,
+  RadioGroupItem,
+  cn,
+  effortRungForIndex,
+  type EffortLevel,
+} from "@elabs-ai/components-ui";
+
+// `EffortLevel` and the growing-square size ramp (`effortRungForIndex`,
+// formerly this file's private `SIZE_RUNGS`/`rungForIndex`) moved to
+// `@elabs-ai/components-ui` (`lib/operating-mode.ts`) — the terminal CLI
+// look-alike family's own effort chips (issue #117) reuse the same
+// vocabulary shape, and `@elabs-ai/components-ai`/
+// `@elabs-ai/components-terminal` are layer-2 DAG siblings that may not
+// import each other (T0; see
+// docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4). Imported
+// above; NOT re-exported from here — a consumer imports `EffortLevel` from
+// `@elabs-ai/components-ui`.
+
+export type PromptInputEffortProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  /** Ordered low → high. The order IS the semantics — render in this order. */
+  levels: EffortLevel[];
+  /** Controlled selected level id. Omit for the uncontrolled default (`levels[0]`). */
+  value?: string;
+  /** Fires with the chosen level's id. */
+  onValueChange?: (id: string) => void;
+  /**
+   * Accessible name for the whole scale (e.g. "Reasoning effort", "Thinking
+   * budget") — required because the NAME of the scale is as much the
+   * consumer's vocabulary as its levels are; this component has no default
+   * to fall back to.
+   */
+  "aria-label": string;
+};
+
+/**
+ * PromptInputEffort — an ORDERED reasoning-effort/budget control.
+ *
+ * Renders `levels` as a row of same-shape squares that GROW in size, low to
+ * high — the size ramp encodes the order on its own, before any selection is
+ * made. Selecting a level fills every square up to and including it (solid
+ * fill + coloured border) and leaves the rest hollow (outline only): the
+ * indicator's FILL is the second, non-colour channel required by a
+ * greyscale-legibility read — the size ramp and the solid/hollow shape both
+ * survive a greyscale render, so the level is recoverable without colour.
+ * The current level's name is additionally rendered as text.
+ *
+ * Built on Radix (`RadioGroup`/`RadioGroupItem` from `@elabs-ai/components-ui`,
+ * `role="radiogroup"` of `role="radio"`s) for arrow-key navigation, roving
+ * focus and an accessible-name announcement on the checked item — no
+ * hand-rolled key handling.
+ */
+export const PromptInputEffort = forwardRef<HTMLDivElement, PromptInputEffortProps>(
+  function PromptInputEffort(
+    { levels, value, onValueChange, className, "aria-label": ariaLabel, ...props },
+    ref,
+  ) {
+    const [selected, setSelected] = useControllableState<string>({
+      defaultProp: levels[0]?.id ?? "",
+      onChange: onValueChange,
+      prop: value,
+    });
+
+    const handleChange = (next: string) => {
+      if (!next) return;
+      setSelected(next);
+    };
+
+    const currentIndex = levels.findIndex((level) => level.id === selected);
+    const current = currentIndex >= 0 ? levels[currentIndex] : levels[0];
+
+    return (
+      <div
+        ref={ref}
+        data-slot="prompt-input-effort"
+        className={cn("inline-flex items-center gap-2", className)}
+        {...props}
+      >
+        <RadioGroup
+          value={selected}
+          onValueChange={handleChange}
+          orientation="horizontal"
+          aria-label={ariaLabel}
+          data-slot="prompt-input-effort-scale"
+          className="flex items-end gap-1"
+        >
+          {levels.map((level, index) => {
+            const filled = currentIndex >= 0 && index <= currentIndex;
+            return (
+              // The visible bar (`-visual`) and the click/tap/focus target
+              // (the radio itself) are decoupled (WCAG 2.5.8, #161): the
+              // radio's authored size IS the ramp's meaning, so it can't
+              // simply grow to 24px without flattening the ramp. Instead the
+              // radio is stretched to fill this `size-6` (24px) frame —
+              // invisible, but a real >=24x24 hit box — while a separate,
+              // `aria-hidden` sibling paints the small bar at its authored
+              // `effortRungForIndex` size. Both are bottom-flush + centered
+              // so the radio's own checked-state indicator still lands on
+              // (and stays invisible against) the visible bar, exactly as
+              // when the radio painted the bar directly.
+              <span
+                key={level.id}
+                data-slot="prompt-input-effort-item-frame"
+                className="relative inline-flex size-6 shrink-0 items-end justify-center"
+              >
+                <span
+                  aria-hidden="true"
+                  data-slot="prompt-input-effort-item-visual"
+                  className={cn(
+                    effortRungForIndex(index, levels.length),
+                    "rounded-sm border",
+                    filled ? "border-primary bg-primary" : "border-border-strong bg-transparent",
+                  )}
+                />
+                <RadioGroupItem
+                  value={level.id}
+                  aria-label={level.label}
+                  data-slot="prompt-input-effort-item"
+                  data-filled={filled ? "true" : "false"}
+                  className="absolute inset-0 flex size-full items-end justify-center rounded-sm border-0 bg-transparent p-0 shadow-none"
+                />
+              </span>
+            );
+          })}
+        </RadioGroup>
+        <span className="text-body" data-slot="prompt-input-effort-label">
+          {current?.label}
+        </span>
+      </div>
+    );
+  },
+);

package/src/prompt-input-mode.stories.tsx

@@ -0,0 +1,108 @@
+/**
+ * PromptInputMode — a composer control for an app-defined operating mode
+ * (#107). Sits beside the model pill / tools cluster in a `PromptInput`
+ * footer: a compact trigger showing the current mode, opening a menu of
+ * every mode the app supports. Ships no mode vocabulary of its own — the
+ * example modes below are demo data, not a canonical set.
+ *
+ * Distinct from `PermissionModeSelect` (#104), which renders the SAME kind
+ * of app-defined policy as an always-expanded settings-panel card list with
+ * a required consequence sentence per mode. This is the composer-toolbar
+ * altitude: a collapsed trigger, an optional one-line description, and an
+ * optional shortcut hint — the two are siblings, not a duplicate.
+ */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, within } from "storybook/test";
+import { Bot, PencilLine, ShieldCheck } from "lucide-react";
+import { type OperatingMode } from "@elabs-ai/components-ui";
+
+import { PromptInputMode } from "./prompt-input-mode";
+
+const MODES: OperatingMode[] = [
+  {
+    id: "auto",
+    label: "Auto",
+    description: "Acts without asking, within its usual limits.",
+    icon: <Bot className="size-4" aria-hidden="true" />,
+  },
+  {
+    id: "plan",
+    label: "Plan first",
+    description: "Proposes a plan and waits for approval before acting.",
+    keyHint: "⇧ Tab",
+    icon: <PencilLine className="size-4" aria-hidden="true" />,
+  },
+  {
+    id: "review",
+    label: "Review edits",
+    description: "Acts, but pauses on every file edit for a quick review.",
+    icon: <ShieldCheck className="size-4" aria-hidden="true" />,
+  },
+];
+
+const meta = {
+  title: "AI/Composer/PromptInputMode",
+  component: PromptInputMode,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A part of the [Composer](?path=/docs/ai-composer--docs) family — what the `mode` slot renders. A composer control for an app-defined operating mode — how autonomously the agent may act. The trigger shows the current mode's icon + label; opening it lists every mode with its optional description and shortcut hint. `modes` is entirely prop-driven — no mode vocabulary is hardcoded.",
+      },
+    },
+  },
+  args: {
+    modes: MODES,
+    onValueChange: fn(),
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PromptInputMode>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Uncontrolled — defaults to the first mode ("Auto"). */
+export const Default: Story = {};
+
+/** Opening the trigger lists every mode with its description and key hint. */
+export const OpenMenu: Story = {
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "Auto" });
+    await userEvent.click(trigger);
+
+    // Radix portals the menu to document.body, so it is OUTSIDE the story
+    // canvas. jsdom is forgiving about this; a real browser is not.
+    const menu = within(document.body);
+    const planOption = await menu.findByRole("menuitemradio", { name: "Plan first" });
+    await expect(planOption).toBeInTheDocument();
+    // The description and shortcut are visible but excluded from the
+    // accessible name (#153) — never let this drift back to a regex match,
+    // which would pass even with the extra text folded back in.
+    await expect(planOption).toHaveAccessibleName("Plan first");
+    await expect(
+      menu.getByText("Proposes a plan and waits for approval before acting."),
+    ).toBeInTheDocument();
+    await expect(menu.getByText("⇧ Tab")).toBeInTheDocument();
+  },
+};
+
+/** Selecting a mode updates the trigger and fires `onValueChange` once. */
+export const SelectAMode: Story = {
+  play: async ({ canvas, args, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Auto" }));
+    const reviewOption = await within(document.body).findByRole("menuitemradio", {
+      name: "Review edits",
+    });
+    await userEvent.click(reviewOption);
+
+    await expect(args.onValueChange).toHaveBeenCalledWith("review");
+    const trigger = await canvas.findByRole("button");
+    await expect(trigger).toHaveAccessibleName("Review edits");
+  },
+};
+
+/** Controlled via `value` — the app owns which mode is shown. */
+export const Controlled: Story = {
+  args: { value: "plan" },
+};

package/src/prompt-input-mode.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { type OperatingMode } from "@elabs-ai/components-ui";
+import { PromptInputMode } from "./prompt-input-mode";
+
+const modes: OperatingMode[] = [
+  { id: "auto", label: "Auto", description: "Acts without asking" },
+  {
+    id: "plan",
+    label: "Plan first",
+    description: "Proposes a plan before acting",
+    keyHint: "⇧ Tab",
+  },
+];
+
+describe("PromptInputMode", () => {
+  it("defaults to the first mode and shows it on the trigger", () => {
+    render(<PromptInputMode modes={modes} />);
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAccessibleName("Auto");
+  });
+
+  it("is uncontrolled: opens the menu, lists every mode, and selects one on click", async () => {
+    const onValueChange = vi.fn();
+    render(<PromptInputMode modes={modes} onValueChange={onValueChange} />);
+
+    await userEvent.click(screen.getByRole("button", { name: "Auto" }));
+    const planOption = await screen.findByRole("menuitemradio", { name: "Plan first" });
+    expect(planOption).toHaveAccessibleName("Plan first");
+    expect(planOption).toHaveAttribute("aria-checked", "false");
+
+    await userEvent.click(planOption);
+    expect(onValueChange).toHaveBeenCalledWith("plan");
+    // The trigger's visible label updates to reflect the new selection.
+    const trigger = await screen.findByRole("button");
+    expect(trigger).toHaveAccessibleName("Plan first");
+  });
+
+  it("is controlled via `value`: the app owns the selection, not the component", async () => {
+    const onValueChange = vi.fn();
+    const { rerender } = render(
+      <PromptInputMode modes={modes} value="plan" onValueChange={onValueChange} />,
+    );
+    expect(screen.getByRole("button")).toHaveAccessibleName("Plan first");
+
+    await userEvent.click(screen.getByRole("button", { name: "Plan first" }));
+    const autoOption = await screen.findByRole("menuitemradio", { name: "Auto" });
+    expect(autoOption).toHaveAccessibleName("Auto");
+    await userEvent.click(autoOption);
+
+    expect(onValueChange).toHaveBeenCalledWith("auto");
+    // A controlled component does not move on its own — the trigger only
+    // updates once the app feeds the new value back in.
+    expect(screen.getByRole("button")).toHaveAccessibleName("Plan first");
+
+    rerender(<PromptInputMode modes={modes} value="auto" onValueChange={onValueChange} />);
+    expect(screen.getByRole("button")).toHaveAccessibleName("Auto");
+  });
+
+  it("renders a mode's description and key hint inside the menu", async () => {
+    render(<PromptInputMode modes={modes} />);
+    await userEvent.click(screen.getByRole("button", { name: "Auto" }));
+
+    expect(await screen.findByText("Proposes a plan before acting")).toBeInTheDocument();
+    expect(screen.getByText("⇧ Tab")).toBeInTheDocument();
+  });
+
+  it("gives a menu item an accessible name that is exactly its label — the description and key hint never join it (#153)", async () => {
+    render(<PromptInputMode modes={modes} />);
+    await userEvent.click(screen.getByRole("button", { name: "Auto" }));
+
+    const planOption = await screen.findByRole("menuitemradio", { name: "Plan first" });
+    expect(planOption).toHaveAccessibleName("Plan first");
+
+    // The description is still associated for assistive tech — as a
+    // description, not folded into the name.
+    expect(planOption).toHaveAccessibleDescription("Proposes a plan before acting");
+  });
+
+  it("resolves the accessible description even when a consumer-supplied mode id contains whitespace (#153)", async () => {
+    const modesWithSpaceId: OperatingMode[] = [
+      { id: "auto", label: "Auto", description: "Acts without asking" },
+      {
+        id: "plan first",
+        label: "Plan first",
+        description: "Proposes a plan before acting",
+      },
+    ];
+    render(<PromptInputMode modes={modesWithSpaceId} />);
+    await userEvent.click(screen.getByRole("button", { name: "Auto" }));
+
+    const planOption = await screen.findByRole("menuitemradio", { name: "Plan first" });
+    // `aria-describedby` is a space-separated token list of IDs — an id
+    // built from a raw mode value containing whitespace (e.g. "plan first")
+    // splits into two references, breaking the association.
+    expect(planOption).toHaveAccessibleDescription("Proposes a plan before acting");
+  });
+});

package/src/prompt-input-mode.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { forwardRef, useId, type HTMLAttributes } from "react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { ChevronDown } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  Kbd,
+  cn,
+  type OperatingMode,
+} from "@elabs-ai/components-ui";
+
+import { PromptInputButton } from "./prompt-input";
+
+// `OperatingMode` moved to `@elabs-ai/components-ui` (`lib/operating-mode.ts`)
+// — the terminal CLI look-alike family's own composer chips (issue #117) reuse
+// the same vocabulary shape, and `@elabs-ai/components-ai`/
+// `@elabs-ai/components-terminal` are layer-2 DAG siblings that may not import
+// each other (T0; see
+// docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4). Imported
+// above; NOT re-exported from here — `@elabs-ai/components-ai` never
+// re-exports from `@elabs-ai/components-ui`. A consumer imports
+// `OperatingMode` from `@elabs-ai/components-ui`.
+
+export type PromptInputModeProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  /** The app's own operating modes, low to high ceremony or however it orders them. */
+  modes: OperatingMode[];
+  /** Controlled selected mode id. Omit for the uncontrolled default (`modes[0]`). */
+  value?: string;
+  /** Fires with the chosen mode's id. */
+  onValueChange?: (id: string) => void;
+  /**
+   * Accessible name for the trigger control, read alongside the current
+   * mode's label. Optional — the trigger already carries the current mode's
+   * visible text as its name, so this only adds context (e.g. "Operating
+   * mode: Auto" instead of just "Auto").
+   */
+  "aria-label"?: string;
+};
+
+/**
+ * PromptInputMode — a composer control for an app-defined operating mode
+ * (how autonomously the agent may act on the next turn).
+ *
+ * A `DropdownMenu` of `modes`, radio-selected so exactly one is active at a
+ * time; the trigger shows the current mode's icon + label. Ships no mode
+ * vocabulary — `modes` is entirely prop-driven, so `auto`/`plan`/whatever a
+ * given agent calls its modes lives in the consuming app, not here.
+ *
+ * Built on Radix (`DropdownMenu` + `DropdownMenuRadioGroup`/`RadioItem` from
+ * `@elabs-ai/components-ui`) for keyboard navigation, roving focus and a
+ * `menuitemradio` role whose `aria-checked` announces the current selection —
+ * no hand-rolled key handling.
+ */
+export const PromptInputMode = forwardRef<HTMLDivElement, PromptInputModeProps>(
+  function PromptInputMode(
+    { modes, value, onValueChange, className, "aria-label": ariaLabel, ...props },
+    ref,
+  ) {
+    const [selected, setSelected] = useControllableState<string>({
+      defaultProp: modes[0]?.id ?? "",
+      onChange: onValueChange,
+      prop: value,
+    });
+
+    const handleChange = (next: string) => {
+      // Radix would otherwise allow an empty-string commit if a caller wires
+      // a deselectable radio group elsewhere — a mode picker always has an
+      // active mode, so an empty commit is ignored.
+      if (!next) return;
+      setSelected(next);
+    };
+
+    const current = modes.find((mode) => mode.id === selected) ?? modes[0];
+
+    // `OperatingMode.id` is an unconstrained, consumer-owned string — it may
+    // contain whitespace or other characters that are invalid inside a
+    // single `aria-describedby` token (a space-separated ID list splits on
+    // whitespace). Derive a per-instance, DOM-safe id from `useId()` and the
+    // mode's index instead of embedding the raw value.
+    const descriptionIdBase = useId();
+
+    return (
+      <div
+        ref={ref}
+        data-slot="prompt-input-mode"
+        className={cn("inline-flex", className)}
+        {...props}
+      >
+        {/*
+         * `modal={false}` is load-bearing, not a preference. Radix's modal
+         * dropdown marks the rest of the document `aria-hidden` while the menu
+         * is open — including this component's own trigger — which axe flags as
+         * `aria-hidden-focus` ("ARIA hidden element must not be focusable")
+         * and which drops the trigger out of the accessibility tree entirely.
+         * A composer toolbar chip has no business hiding the page or locking
+         * its scroll, so the non-modal layer is both the accessible answer and
+         * the semantically correct one.
+         */}
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <PromptInputButton
+              variant="ghost"
+              className="gap-1.5 rounded-full"
+              disabled={modes.length === 0}
+              aria-label={
+                ariaLabel && current ? `${ariaLabel}: ${current.label}` : (ariaLabel ?? undefined)
+              }
+              data-slot="prompt-input-mode-trigger"
+            >
+              {current?.icon}
+              <span>{current?.label}</span>
+              <ChevronDown className="size-3.5 opacity-60" aria-hidden="true" />
+            </PromptInputButton>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align="start" data-slot="prompt-input-mode-content" className="w-72">
+            <DropdownMenuRadioGroup value={selected} onValueChange={handleChange}>
+              {modes.map((mode, index) => {
+                const descriptionId =
+                  mode.description === undefined
+                    ? undefined
+                    : `${descriptionIdBase}-description-${index}`;
+                return (
+                  <DropdownMenuRadioItem
+                    key={mode.id}
+                    value={mode.id}
+                    data-slot="prompt-input-mode-item"
+                    className="gap-2"
+                    aria-describedby={descriptionId}
+                  >
+                    {mode.icon}
+                    <span className="flex min-w-0 flex-1 flex-col">
+                      <span className="truncate text-body">{mode.label}</span>
+                      {mode.description === undefined ? null : (
+                        // Visible, but excluded from the item's accessible
+                        // name (aria-hidden) so the name stays exactly the
+                        // label; still exposed as the accessible DESCRIPTION
+                        // via aria-describedby above — a hidden node an
+                        // aria-describedby reference points to is still read
+                        // for the description computation.
+                        <span
+                          id={descriptionId}
+                          aria-hidden="true"
+                          className="truncate text-meta text-muted-foreground"
+                        >
+                          {mode.description}
+                        </span>
+                      )}
+                    </span>
+                    {mode.keyHint === undefined ? null : (
+                      <Kbd className="shrink-0" aria-hidden="true">
+                        {mode.keyHint}
+                      </Kbd>
+                    )}
+                  </DropdownMenuRadioItem>
+                );
+              })}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    );
+  },
+);