diff --git a/crates/ironclaw_webui_v2/frontend/src/design-system/select-menu.test.ts b/crates/ironclaw_webui_v2/frontend/src/design-system/select-menu.test.ts
new file mode 100644
index 00000000000..8f066b0a463
--- /dev/null
+++ b/crates/ironclaw_webui_v2/frontend/src/design-system/select-menu.test.ts
@@ -0,0 +1,526 @@
+// @ts-nocheck
+import assert from "node:assert/strict";
+import { test } from "vitest";
+
+import { runVmModuleForTest } from "../test-support/vm-module-harness.ts";
+
+function html(strings, ...values) {
+  return { strings: Array.from(strings), values };
+}
+
+function cn(...classes) {
+  return classes.flat().filter(Boolean).join(" ");
+}
+
+function Icon() {}
+
+function visit(node, fn) {
+  if (Array.isArray(node)) {
+    for (const item of node) visit(item, fn);
+    return;
+  }
+  if (!node || typeof node !== "object") return;
+  fn(node);
+  if (Array.isArray(node.values)) {
+    for (const value of node.values) visit(value, fn);
+  }
+}
+
+function collectScalars(root) {
+  const scalars = [];
+  visit(root, (node) => {
+    if (!Array.isArray(node.values)) return;
+    for (const value of node.values) {
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        scalars.push(value);
+      }
+    }
+  });
+  return scalars;
+}
+
+function collectObjects(root) {
+  const objects = [];
+  visit(root, (node) => {
+    if (
+      node.props &&
+      typeof node.props === "object" &&
+      !Array.isArray(node.props)
+    ) {
+      objects.push(node.props);
+    }
+    if (!Array.isArray(node.values)) return;
+    for (const value of node.values) {
+      if (
+        value &&
+        typeof value === "object" &&
+        !Array.isArray(value) &&
+        !Array.isArray(value.strings)
+      ) {
+        objects.push(value);
+      }
+    }
+  });
+  return objects;
+}
+
+function collectTemplateText(root) {
+  const text = [];
+  visit(root, (node) => {
+    if (Array.isArray(node.strings)) text.push(...node.strings);
+  });
+  return text.join("");
+}
+
+function valuesAfter(root, fragment) {
+  const values = [];
+  visit(root, (node) => {
+    if (!Array.isArray(node.strings) || !Array.isArray(node.values)) return;
+    node.strings.forEach((part, index) => {
+      if (part.includes(fragment)) values.push(node.values[index]);
+    });
+  });
+  return values;
+}
+
+function firstValueAfter(root, fragment) {
+  const [value] = valuesAfter(root, fragment);
+  assert.notEqual(value, undefined, `expected template fragment ${fragment}`);
+  return value;
+}
+
+function firstObjectWith(root, key) {
+  const value = collectObjects(root).find((candidate) => key in candidate);
+  assert.notEqual(value, undefined, `expected object with ${key}`);
+  return value;
+}
+
+function dependenciesChanged(previous, next) {
+  if (!previous || !next) return true;
+  if (previous.length !== next.length) return true;
+  return next.some((value, index) => !Object.is(value, previous[index]));
+}
+
+function keyEvent(key) {
+  return {
+    key,
+    preventDefaultCalls: 0,
+    preventDefault() {
+      this.preventDefaultCalls += 1;
+    },
+  };
+}
+
+function optionClasses(root) {
+  return collectScalars(root).filter(
+    (value) => typeof value === "string" && value.includes("flex w-full items-center")
+  );
+}
+
+const defaultOptions = [
+  { value: "default", label: "Follow global", tone: "neutral" },
+  { value: "always_allow", label: "Always allow", tone: "positive" },
+  { value: "ask_each_time", label: "Ask each time", tone: "warning" },
+  { value: "disabled", label: "Disabled", tone: "danger" },
+];
+
+function createHarness() {
+  const state = {
+    effectCursor: 0,
+    effects: [],
+    hookCursor: 0,
+    hooks: [],
+    listenerAdds: 0,
+    listenerRemoves: 0,
+    listeners: {},
+    refCursor: 0,
+    refs: [],
+  };
+  const context = {
+    React: {
+      useEffect(effect, dependencies) {
+        const index = state.effectCursor;
+        state.effectCursor += 1;
+        const nextDependencies = dependencies ? Array.from(dependencies) : null;
+        const previous = state.effects[index];
+        if (
+          previous &&
+          nextDependencies &&
+          !dependenciesChanged(previous.dependencies, nextDependencies)
+        ) {
+          return undefined;
+        }
+        if (previous?.cleanup) previous.cleanup();
+        const cleanup = effect();
+        state.effects[index] = {
+          dependencies: nextDependencies,
+          cleanup: typeof cleanup === "function" ? cleanup : null,
+        };
+        return undefined;
+      },
+      useRef(initialValue) {
+        const index = state.refCursor;
+        state.refCursor += 1;
+        if (!state.refs[index]) state.refs[index] = { current: initialValue };
+        return state.refs[index];
+      },
+      useState(initialValue) {
+        const index = state.hookCursor;
+        state.hookCursor += 1;
+        if (!(index in state.hooks)) {
+          state.hooks[index] =
+            typeof initialValue === "function" ? initialValue() : initialValue;
+        }
+        return [
+          state.hooks[index],
+          (nextValue) => {
+            state.hooks[index] =
+              typeof nextValue === "function" ? nextValue(state.hooks[index]) : nextValue;
+          },
+        ];
+      },
+    },
+    document: {
+      addEventListener(type, listener) {
+        state.listenerAdds += 1;
+        state.listeners[type] = listener;
+      },
+      removeEventListener(type, listener) {
+        state.listenerRemoves += 1;
+        if (state.listeners[type] === listener) delete state.listeners[type];
+      },
+    },
+    html,
+    cn,
+    Icon,
+  };
+  const exports = runVmModuleForTest(
+    "./select-menu.tsx",
+    ["SelectMenu"],
+    context,
+    import.meta.url
+  );
+  return {
+    state,
+    SelectMenu: exports.SelectMenu,
+    render(props = {}) {
+      state.effectCursor = 0;
+      state.hookCursor = 0;
+      state.refCursor = 0;
+      return exports.SelectMenu({
+        value: "default",
+        options: defaultOptions,
+        "aria-label": "Tool permission",
+        ...props,
+      });
+    },
+    renderPair(firstProps = {}, secondProps = {}) {
+      state.effectCursor = 0;
+      state.hookCursor = 0;
+      state.refCursor = 0;
+      return [
+        exports.SelectMenu({
+          value: "default",
+          options: defaultOptions,
+          "aria-label": "First permission",
+          ...firstProps,
+        }),
+        exports.SelectMenu({
+          value: "default",
+          options: defaultOptions,
+          "aria-label": "Second permission",
+          ...secondProps,
+        }),
+      ];
+    },
+    unmount() {
+      for (const effect of state.effects) {
+        if (effect?.cleanup) effect.cleanup();
+      }
+      state.effects = [];
+      state.effectCursor = 0;
+    },
+  };
+}
+
+test("SelectMenu renders a closed custom trigger with the selected label", () => {
+  const harness = createHarness();
+  const rendered = harness.render();
+
+  assert.match(collectTemplateText(rendered), /aria-haspopup="listbox"/);
+  assert.equal(firstValueAfter(rendered, "aria-expanded="), "false");
+  assert.equal(collectObjects(rendered).some((value) => "aria-owns" in value), false);
+  assert.equal(collectObjects(rendered).some((value) => "aria-controls" in value), false);
+  assert.equal(
+    collectObjects(rendered).some((value) => "aria-activedescendant" in value),
+    false
+  );
+  assert.ok(collectScalars(rendered).includes("Follow global"));
+  assert.doesNotMatch(collectTemplateText(rendered), /<select/);
+  assert.doesNotMatch(collectTemplateText(rendered), /role="listbox"/);
+});
+
+test("SelectMenu opens, selects an option, and closes after selection", () => {
+  const changes = [];
+  const harness = createHarness();
+
+  firstValueAfter(harness.render({ onChange: (...args) => changes.push(args) }), "onClick=")();
+  let rendered = harness.render({ onChange: (...args) => changes.push(args) });
+  assert.equal(firstValueAfter(rendered, "aria-expanded="), "true");
+  assert.match(collectTemplateText(rendered), /role="listbox"/);
+  const listboxProps = firstObjectWith(rendered, "aria-controls");
+  assert.equal("aria-owns" in listboxProps, false);
+  assert.match(listboxProps["aria-controls"], /^v2-select-menu-\d+-listbox$/);
+  assert.match(listboxProps["aria-activedescendant"], /^v2-select-menu-\d+-option-0$/);
+  assert.equal(valuesAfter(rendered, "aria-label=").length, 1);
+  assert.ok(
+    collectScalars(rendered).some(
+      (value) => typeof value === "string" && value.includes("v2-canvas-strong")
+    )
+  );
+  assert.match(optionClasses(rendered)[0], /v2-surface-muted/);
+  assert.doesNotMatch(optionClasses(rendered)[0], /v2-accent-soft/);
+  assert.ok(collectScalars(rendered).includes("Always allow"));
+
+  valuesAfter(rendered, "onClick=")[2]();
+  assert.deepEqual(changes, [["always_allow"]]);
+
+  rendered = harness.render({ value: "always_allow", onChange: (...args) => changes.push(args) });
+  assert.equal(firstValueAfter(rendered, "aria-expanded="), "false");
+});
+
+test("SelectMenu supports keyboard navigation and Enter selection", () => {
+  const changes = [];
+  const harness = createHarness();
+  const keyDown = firstValueAfter(
+    harness.render({ onChange: (value) => changes.push(value) }),
+    "onKeyDown="
+  );
+  const event = (key) => ({ key, preventDefault() {} });
+
+  keyDown(event("ArrowDown"));
+  const opened = harness.render({ onChange: (value) => changes.push(value) });
+  assert.equal(firstValueAfter(opened, "aria-expanded="), "true");
+
+  firstValueAfter(opened, "onKeyDown=")(event("Enter"));
+  assert.deepEqual(changes, ["always_allow"]);
+});
+
+test("SelectMenu starts closed arrow navigation from the selected option", () => {
+  const changes = [];
+  const harness = createHarness();
+  const props = { value: "default", onChange: (value) => changes.push(value) };
+
+  firstValueAfter(harness.render(props), "onClick=")();
+  let rendered = harness.render(props);
+  valuesAfter(rendered, "onMouseEnter=")[3]();
+  firstValueAfter(rendered, "onClick=")();
+
+  rendered = harness.render(props);
+  firstValueAfter(rendered, "onKeyDown=")(keyEvent("ArrowDown"));
+  rendered = harness.render(props);
+  firstValueAfter(rendered, "onKeyDown=")(keyEvent("Enter"));
+
+  assert.deepEqual(changes, ["always_allow"]);
+});
+
+test("SelectMenu syncs active index when option order changes", () => {
+  const changes = [];
+  const harness = createHarness();
+  const reorderedOptions = [
+    defaultOptions[2],
+    defaultOptions[0],
+    defaultOptions[1],
+    defaultOptions[3],
+  ];
+  let rendered = harness.render({
+    value: "ask_each_time",
+    options: defaultOptions,
+    onChange: (value) => changes.push(value),
+  });
+
+  firstValueAfter(rendered, "onClick=")();
+  rendered = harness.render({
+    value: "ask_each_time",
+    options: defaultOptions,
+    onChange: (value) => changes.push(value),
+  });
+  assert.match(
+    firstObjectWith(rendered, "aria-activedescendant")["aria-activedescendant"],
+    /-option-2$/
+  );
+
+  harness.render({
+    value: "ask_each_time",
+    options: reorderedOptions,
+    onChange: (value) => changes.push(value),
+  });
+  rendered = harness.render({
+    value: "ask_each_time",
+    options: reorderedOptions,
+    onChange: (value) => changes.push(value),
+  });
+  assert.match(
+    firstObjectWith(rendered, "aria-activedescendant")["aria-activedescendant"],
+    /-option-0$/
+  );
+
+  firstValueAfter(rendered, "onKeyDown=")(keyEvent("ArrowDown"));
+  rendered = harness.render({
+    value: "ask_each_time",
+    options: reorderedOptions,
+    onChange: (value) => changes.push(value),
+  });
+  firstValueAfter(rendered, "onKeyDown=")(keyEvent("Enter"));
+
+  assert.deepEqual(changes, ["default"]);
+});
+
+test("SelectMenu only intercepts Escape while open", () => {
+  const harness = createHarness();
+  const closedEscape = keyEvent("Escape");
+
+  firstValueAfter(harness.render(), "onKeyDown=")(closedEscape);
+  assert.equal(closedEscape.preventDefaultCalls, 0);
+
+  firstValueAfter(harness.render(), "onClick=")();
+  const opened = harness.render();
+  const openEscape = keyEvent("Escape");
+  firstValueAfter(opened, "onKeyDown=")(openEscape);
+
+  assert.equal(openEscape.preventDefaultCalls, 1);
+  assert.equal(firstValueAfter(harness.render(), "aria-expanded="), "false");
+});
+
+test("SelectMenu exposes the active descendant and restores trigger focus on close", () => {
+  const harness = createHarness();
+  const focusCalls = [];
+  const props = { onChange: () => {} };
+
+  let rendered = harness.render(props);
+  harness.state.refs[1].current = {
+    focus() {
+      focusCalls.push("focus");
+    },
+  };
+
+  firstValueAfter(rendered, "onClick=")();
+  rendered = harness.render(props);
+  assert.match(
+    firstObjectWith(rendered, "aria-activedescendant")["aria-activedescendant"],
+    /-option-0$/
+  );
+
+  valuesAfter(rendered, "onClick=")[2]();
+  harness.render({ value: "always_allow", ...props });
+
+  assert.deepEqual(focusCalls, ["focus"]);
+});
+
+test("SelectMenu does not restore trigger focus after outside click close", () => {
+  const harness = createHarness();
+  const focusCalls = [];
+  const props = { onChange: () => {} };
+
+  let rendered = harness.render(props);
+  harness.state.refs[0].current = {
+    contains() {
+      return false;
+    },
+    isConnected: true,
+  };
+  harness.state.refs[1].current = {
+    focus() {
+      focusCalls.push("focus");
+    },
+  };
+
+  firstValueAfter(rendered, "onClick=")();
+  rendered = harness.render(props);
+  assert.equal(firstValueAfter(rendered, "aria-expanded="), "true");
+
+  harness.state.listeners.mousedown({ target: {} });
+  rendered = harness.render(props);
+
+  assert.equal(firstValueAfter(rendered, "aria-expanded="), "false");
+  assert.deepEqual(focusCalls, []);
+});
+
+test("SelectMenu shares and removes the document listener across concurrent menus", () => {
+  const harness = createHarness();
+  let rendered = harness.renderPair();
+  harness.state.refs[0].current = { contains: () => false, isConnected: true };
+  harness.state.refs[6].current = { contains: () => false, isConnected: true };
+  const [firstTriggerClick, secondTriggerClick] = valuesAfter(rendered, "onClick=");
+
+  firstTriggerClick();
+  rendered = harness.renderPair();
+  assert.equal(harness.state.listenerAdds, 1);
+
+  secondTriggerClick();
+  rendered = harness.renderPair();
+  assert.equal(harness.state.listenerAdds, 1);
+  assert.deepEqual(valuesAfter(rendered, "aria-expanded="), ["true", "true"]);
+
+  harness.state.listeners.mousedown({ target: {} });
+  rendered = harness.renderPair();
+
+  assert.deepEqual(valuesAfter(rendered, "aria-expanded="), ["false", "false"]);
+  assert.equal(harness.state.listenerRemoves, 1);
+  assert.equal(harness.state.listeners.mousedown, undefined);
+});
+
+test("SelectMenu removes the document listener when unmounted while open", () => {
+  const harness = createHarness();
+  const rendered = harness.render();
+  harness.state.refs[0].current = { contains: () => false, isConnected: true };
+
+  firstValueAfter(rendered, "onClick=")();
+  harness.render();
+  assert.equal(harness.state.listenerAdds, 1);
+
+  harness.unmount();
+
+  assert.equal(harness.state.listenerRemoves, 1);
+  assert.equal(harness.state.listeners.mousedown, undefined);
+});
+
+test("SelectMenu only passes safe root attributes through rest props", () => {
+  const harness = createHarness();
+  const rendered = harness.render({
+    id: "permission-root",
+    "data-testid": "permission-select",
+    title: "Permission select",
+    onPointerDown() {},
+  });
+  const passthroughProps = collectObjects(rendered).find(
+    (value) => value["data-testid"] === "permission-select"
+  );
+
+  assert.equal(passthroughProps.id, "permission-root");
+  assert.equal(passthroughProps["data-testid"], "permission-select");
+  assert.equal(passthroughProps.title, "Permission select");
+  assert.equal("onPointerDown" in passthroughProps, false);
+});
+
+test("SelectMenu ignores disabled trigger clicks", () => {
+  const harness = createHarness();
+  const rendered = harness.render({ disabled: true });
+
+  firstValueAfter(rendered, "onClick=")();
+  assert.equal(harness.state.hooks[0], false);
+});
+
+test("SelectMenu does not open when every option is disabled", () => {
+  const harness = createHarness();
+  const disabledOptions = defaultOptions.map((option) => ({ ...option, disabled: true }));
+  const rendered = harness.render({ options: disabledOptions });
+  const arrowDown = keyEvent("ArrowDown");
+
+  assert.equal(firstValueAfter(rendered, "disabled="), true);
+  firstValueAfter(rendered, "onClick=")();
+  firstValueAfter(rendered, "onKeyDown=")(arrowDown);
+
+  assert.equal(harness.state.hooks[0], false);
+  assert.equal(arrowDown.preventDefaultCalls, 0);
+});
diff --git a/crates/ironclaw_webui_v2/frontend/src/design-system/select-menu.tsx b/crates/ironclaw_webui_v2/frontend/src/design-system/select-menu.tsx
new file mode 100644
index 00000000000..b56bc8fe770
--- /dev/null
+++ b/crates/ironclaw_webui_v2/frontend/src/design-system/select-menu.tsx
@@ -0,0 +1,393 @@
+// @ts-nocheck
+import React from "react";
+import { cn } from "../utils/cn";
+import { Icon } from "./icons";
+
+let nextSelectMenuId = 0;
+const openSelectMenuEntries = new Set();
+let sharedDocumentMouseDownListener = null;
+
+const toneDotClasses = {
+  neutral: "bg-[var(--v2-text-faint)]",
+  positive: "bg-[var(--v2-positive-text)]",
+  warning: "bg-[var(--v2-warning-text)]",
+  danger: "bg-[var(--v2-danger-text)]",
+  info: "bg-[var(--v2-info-text)]",
+  accent: "bg-[var(--v2-accent-text)]",
+};
+
+const alignClasses = {
+  left: "left-0",
+  right: "right-0",
+};
+
+function createSelectMenuId() {
+  nextSelectMenuId += 1;
+  return `v2-select-menu-${nextSelectMenuId}`;
+}
+
+function removeStaleOpenSelectMenuEntries() {
+  for (const entry of Array.from(openSelectMenuEntries)) {
+    const root = entry.rootRef.current;
+    if (!root || root.isConnected === false) openSelectMenuEntries.delete(entry);
+  }
+}
+
+function handleSharedDocumentMouseDown(event) {
+  removeStaleOpenSelectMenuEntries();
+  for (const entry of Array.from(openSelectMenuEntries)) {
+    if (entry.rootRef.current?.contains?.(event.target)) continue;
+    entry.close();
+  }
+  syncSharedDocumentListener();
+}
+
+function syncSharedDocumentListener() {
+  if (typeof document === "undefined") return;
+  if (openSelectMenuEntries.size > 0 && !sharedDocumentMouseDownListener) {
+    sharedDocumentMouseDownListener = handleSharedDocumentMouseDown;
+    document.addEventListener("mousedown", sharedDocumentMouseDownListener);
+    return;
+  }
+  if (openSelectMenuEntries.size === 0 && sharedDocumentMouseDownListener) {
+    document.removeEventListener("mousedown", sharedDocumentMouseDownListener);
+    sharedDocumentMouseDownListener = null;
+  }
+}
+
+function registerOpenSelectMenu(entry) {
+  removeStaleOpenSelectMenuEntries();
+  openSelectMenuEntries.add(entry);
+  syncSharedDocumentListener();
+  return () => {
+    openSelectMenuEntries.delete(entry);
+    syncSharedDocumentListener();
+  };
+}
+
+function firstEnabledIndex(options) {
+  return options.findIndex((option) => !option.disabled);
+}
+
+function selectedOptionIndex(options, value) {
+  const index = options.findIndex((option) => option.value === value);
+  return index >= 0 ? index : firstEnabledIndex(options);
+}
+
+function nextEnabledIndex(options, currentIndex, direction) {
+  const fallbackIndex = firstEnabledIndex(options);
+  if (fallbackIndex < 0) return -1;
+  const start =
+    currentIndex >= 0 ? currentIndex : direction > 0 ? -1 : options.length;
+  for (let step = 1; step <= options.length; step += 1) {
+    const index = (start + direction * step + options.length) % options.length;
+    if (!options[index]?.disabled) return index;
+  }
+  return fallbackIndex;
+}
+
+function edgeEnabledIndex(options, direction) {
+  if (!options.length) return -1;
+  const start = direction > 0 ? 0 : options.length - 1;
+  const end = direction > 0 ? options.length : -1;
+  for (let index = start; index !== end; index += direction) {
+    if (!options[index]?.disabled) return index;
+  }
+  return -1;
+}
+
+function optionLabel(option, fallback = "") {
+  return option?.label ?? option?.value ?? fallback;
+}
+
+function normalizeTone(tone) {
+  if (!tone) return null;
+  return Object.prototype.hasOwnProperty.call(toneDotClasses, tone) ? tone : "neutral";
+}
+
+function normalizeAlign(align) {
+  return Object.prototype.hasOwnProperty.call(alignClasses, align) ? align : "right";
+}
+
+function optionsIdentity(options) {
+  return options
+    .map((option) => `${String(option.value)}:${option.disabled ? "disabled" : "enabled"}`)
+    .join("\u001f");
+}
+
+function safeRootProps(props) {
+  return Object.fromEntries(
+    Object.entries(props).filter(
+      ([key]) =>
+        key === "id" ||
+        key === "title" ||
+        key.startsWith("data-") ||
+        key.startsWith("aria-")
+    )
+  );
+}
+
+function ToneDot({ tone }) {
+  const normalizedTone = normalizeTone(tone);
+  if (!normalizedTone) return null;
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "h-1.5 w-1.5 shrink-0 rounded-full",
+        toneDotClasses[normalizedTone]
+      )}
+    />
+  );
+}
+
+/**
+ * @typedef {"neutral" | "positive" | "warning" | "danger" | "info" | "accent"} SelectMenuTone
+ * @typedef {"left" | "right"} SelectMenuAlign
+ * @typedef {{ value: string, label?: string, disabled?: boolean, tone?: SelectMenuTone }} SelectMenuOption
+ */
+
+/**
+ * Custom listbox-backed select menu.
+ *
+ * `onChange` receives the selected option value. Root passthrough props are
+ * limited to `id`, `title`, `data-*`, and `aria-*`; event handlers are
+ * intentionally not spread.
+ */
+export function SelectMenu({
+  value,
+  options = [],
+  onChange = (_value) => {},
+  disabled = false,
+  ariaLabel = undefined,
+  "aria-label": ariaLabelProp = undefined,
+  "aria-labelledby": ariaLabelledBy = undefined,
+  className = "",
+  buttonClassName = "",
+  menuClassName = "",
+  optionClassName = "",
+  align = "right",
+  placeholder = "",
+  ...rest
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(() =>
+    selectedOptionIndex(options, value)
+  );
+  const rootRef = React.useRef(null);
+  const buttonRef = React.useRef(null);
+  const idRef = React.useRef("");
+  const restoreFocusOnCloseRef = React.useRef(false);
+  const wasOpenRef = React.useRef(open);
+  const outsideClickEntryRef = React.useRef(null);
+  if (!idRef.current) idRef.current = createSelectMenuId();
+
+  const selectedIndex = selectedOptionIndex(options, value);
+  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : null;
+  const selectedLabel = optionLabel(selectedOption, placeholder);
+  const listboxId = `${idRef.current}-listbox`;
+  const activeOptionId =
+    open && activeIndex >= 0 && activeIndex < options.length
+      ? `${idRef.current}-option-${activeIndex}`
+      : null;
+  const effectiveAriaLabel = ariaLabel || ariaLabelProp;
+  const effectiveAlign = normalizeAlign(align);
+  const hasEnabledOption = firstEnabledIndex(options) >= 0;
+  const interactionDisabled = disabled || !hasEnabledOption;
+  const optionsKey = optionsIdentity(options);
+  const rootPassthroughProps = safeRootProps(rest);
+  const buttonListboxProps = {
+    ...(open ? { "aria-controls": listboxId } : {}),
+    ...(activeOptionId ? { "aria-activedescendant": activeOptionId } : {}),
+  };
+
+  const closeMenu = ({ restoreFocus = true } = {}) => {
+    restoreFocusOnCloseRef.current = restoreFocus;
+    setOpen(false);
+  };
+
+  if (!outsideClickEntryRef.current) {
+    outsideClickEntryRef.current = {
+      rootRef,
+      close: () => {
+        restoreFocusOnCloseRef.current = false;
+        setOpen(false);
+      },
+    };
+  }
+
+  React.useEffect(() => {
+    setActiveIndex(selectedOptionIndex(options, value));
+  }, [optionsKey, value]);
+
+  React.useEffect(() => {
+    if (!open) return undefined;
+    return registerOpenSelectMenu(outsideClickEntryRef.current);
+  }, [open]);
+
+  React.useEffect(() => {
+    if (wasOpenRef.current && !open && restoreFocusOnCloseRef.current) {
+      buttonRef.current?.focus?.();
+    }
+    if (open) restoreFocusOnCloseRef.current = false;
+    wasOpenRef.current = open;
+  }, [open]);
+
+  const chooseOption = (option) => {
+    if (!option || option.disabled) return;
+    closeMenu();
+    if (option.value !== value) onChange(option.value);
+  };
+
+  const openWithIndex = (index) => {
+    if (interactionDisabled || index < 0) return;
+    setActiveIndex(index < options.length ? index : firstEnabledIndex(options));
+    setOpen(true);
+  };
+
+  const handleKeyDown = (event) => {
+    if (interactionDisabled) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const direction = event.key === "ArrowDown" ? 1 : -1;
+      const baseIndex = open ? activeIndex : selectedIndex;
+      const nextIndex = nextEnabledIndex(options, baseIndex, direction);
+      openWithIndex(nextIndex);
+      return;
+    }
+
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const direction = event.key === "Home" ? 1 : -1;
+      openWithIndex(edgeEnabledIndex(options, direction));
+      return;
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!open) {
+        openWithIndex(selectedIndex);
+        return;
+      }
+      chooseOption(options[activeIndex]);
+      return;
+    }
+
+    if (event.key === "Escape") {
+      if (open) {
+        event.preventDefault();
+        closeMenu();
+      }
+      return;
+    }
+
+    if (event.key === "Tab") closeMenu({ restoreFocus: false });
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn("relative inline-block min-w-[9.5rem] text-left", className)}
+      {...rootPassthroughProps}
+    >
+      <button
+        ref={buttonRef}
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={open ? "true" : "false"}
+        aria-label={effectiveAriaLabel}
+        aria-labelledby={ariaLabelledBy}
+        {...buttonListboxProps}
+        disabled={interactionDisabled}
+        onClick={() =>
+          !interactionDisabled &&
+          setOpen((current) => {
+            restoreFocusOnCloseRef.current = false;
+            if (!current) setActiveIndex(selectedIndex);
+            return !current;
+          })}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "inline-flex h-8 w-full items-center justify-between gap-2 rounded-[8px] border",
+          "border-[var(--v2-panel-border)] bg-[var(--v2-surface-soft)] px-2.5",
+          "font-mono text-xs text-[var(--v2-text-strong)] shadow-none transition-colors",
+          "hover:bg-[var(--v2-surface-muted)]",
+          "focus-visible:outline-none focus-visible:ring-2",
+          "focus-visible:ring-[color-mix(in_srgb,var(--v2-accent)_32%,transparent)]",
+          "disabled:cursor-not-allowed disabled:opacity-60",
+          buttonClassName
+        )}
+      >
+        <span className="flex min-w-0 items-center gap-2">
+          <ToneDot tone={selectedOption?.tone} />
+          <span className="truncate">{selectedLabel}</span>
+        </span>
+        <Icon
+          name="chevron"
+          className={cn(
+            "h-3.5 w-3.5 shrink-0 text-[var(--v2-text-faint)] transition-transform",
+            open && "rotate-180"
+          )}
+        />
+      </button>
+
+      {open && (
+        <div
+          id={listboxId}
+          role="listbox"
+          className={cn(
+            "absolute top-[calc(100%+0.35rem)] z-30 min-w-full overflow-hidden rounded-[10px]",
+            "border border-[color-mix(in_srgb,var(--v2-text-strong)_16%,var(--v2-panel-border))]",
+            "bg-[color-mix(in_srgb,var(--v2-canvas-strong)_92%,var(--v2-surface))] p-1",
+            "shadow-[0_30px_72px_-18px_rgba(0,0,0,0.86),0_10px_24px_-18px_rgba(0,0,0,0.68)]",
+            "ring-1 ring-[color-mix(in_srgb,var(--v2-text-strong)_8%,transparent)]",
+            alignClasses[effectiveAlign],
+            menuClassName
+          )}
+        >
+          {options.map((option, index) => {
+            const isSelected = option.value === value;
+            const isActive = index === activeIndex;
+            return (
+              <button
+                key={option.value}
+                id={`${idRef.current}-option-${index}`}
+                type="button"
+                role="option"
+                aria-selected={isSelected ? "true" : "false"}
+                aria-disabled={option.disabled ? "true" : "false"}
+                disabled={option.disabled}
+                onMouseEnter={() => !option.disabled && setActiveIndex(index)}
+                onClick={() => chooseOption(option)}
+                className={cn(
+                  "flex w-full items-center justify-between gap-3 rounded-[7px] px-2.5 py-2",
+                  "text-left font-mono text-xs text-[var(--v2-text)] transition-colors",
+                  "focus-visible:outline-none",
+                  "focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--v2-accent)_30%,transparent)]",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  isActive
+                    ? "bg-[var(--v2-surface-muted)] text-[var(--v2-text-strong)]"
+                    : isSelected
+                      ? "bg-[var(--v2-accent-soft)] text-[var(--v2-text-strong)]"
+                      : "hover:bg-[var(--v2-surface-soft)]",
+                  optionClassName
+                )}
+              >
+                <span className="flex min-w-0 items-center gap-2">
+                  <ToneDot tone={option.tone} />
+                  <span className="truncate">{optionLabel(option)}</span>
+                </span>
+                {isSelected && (
+                  <Icon
+                    name="check"
+                    className="h-3.5 w-3.5 shrink-0 text-[var(--v2-accent-text)]"
+                  />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/crates/ironclaw_webui_v2/frontend/src/pages/settings/components/tools-tab.test.ts b/crates/ironclaw_webui_v2/frontend/src/pages/settings/components/tools-tab.test.ts
index 3d6b271ba75..c7cc28233d2 100644
--- a/crates/ironclaw_webui_v2/frontend/src/pages/settings/components/tools-tab.test.ts
+++ b/crates/ironclaw_webui_v2/frontend/src/pages/settings/components/tools-tab.test.ts
@@ -88,6 +88,7 @@ function renderToolsModule({ tools = [], translations = {}, toolError = null } =
     Badge: "Badge",
     Card: "Card",
     Icon: "Icon",
+    SelectMenu: "SelectMenu",
     html,
     matchesSearch: (query, values) =>
       !query || values.some((value) => String(value || "").includes(query)),
@@ -145,6 +146,7 @@ test("Auto-approve toggle defaults ON when unset and reads present values strict
 
 test("Tool permission select follows global unless a per-tool override exists", () => {
   const { exports } = renderToolsModule();
+  const changes = [];
   const globalTool = exports.ToolRow({
     tool: {
       name: "builtin.echo",
@@ -154,12 +156,17 @@ test("Tool permission select follows global unless a per-tool override exists",
       effective_source: "global",
       locked: false,
     },
-    onPermissionChange: () => {},
+    onPermissionChange: (name, value) => changes.push({ name, value }),
     isSaved: false,
   });
-  const globalSelect = findTemplateNode(globalTool, "<select");
-  assert.equal(globalSelect.values[0], "default");
-  assert.ok(collectScalars(globalTool).includes("tools.followDefault"));
+  const globalSelect = findComponentNode(globalTool, "SelectMenu");
+  assert.ok(globalSelect, "expected custom select menu");
+  const globalProps = componentProps(globalSelect, "SelectMenu");
+  assert.equal(globalProps.value, "default");
+  globalProps.onChange("disabled");
+  assert.deepEqual(changes, [{ name: "builtin.echo", value: "disabled" }]);
+  assert.ok(globalProps.options.some((option) => option.label === "tools.followDefault"));
+  assert.equal(findTemplateNode(globalTool, "<select"), null);
 
   const overrideTool = exports.ToolRow({
     tool: {
@@ -173,8 +180,8 @@ test("Tool permission select follows global unless a per-tool override exists",
     onPermissionChange: () => {},
     isSaved: false,
   });
-  const overrideSelect = findTemplateNode(overrideTool, "<select");
-  assert.equal(overrideSelect.values[0], "ask_each_time");
+  const overrideSelect = findComponentNode(overrideTool, "SelectMenu");
+  assert.equal(componentProps(overrideSelect, "SelectMenu").value, "ask_each_time");
 });
 
 test("Tool rows localize built-in descriptions by capability id", () => {
diff --git a/crates/ironclaw_webui_v2/frontend/src/pages/settings/components/tools-tab.tsx b/crates/ironclaw_webui_v2/frontend/src/pages/settings/components/tools-tab.tsx
index cbc7ebbd42c..7c61d8f53b8 100644
--- a/crates/ironclaw_webui_v2/frontend/src/pages/settings/components/tools-tab.tsx
+++ b/crates/ironclaw_webui_v2/frontend/src/pages/settings/components/tools-tab.tsx
@@ -1,6 +1,7 @@
 import { Icon } from "../../../design-system/icons";
 import { Badge } from "../../../design-system/badge";
 import { Card } from "../../../design-system/card";
+import { SelectMenu } from "../../../design-system/select-menu";
 import { useT } from "../../../lib/i18n";
 import { useTools } from "../hooks/useTools";
 import { matchesSearch } from "../lib/settings-search";
@@ -150,19 +151,14 @@ function ToolRow({ tool, onPermissionChange, isSaved }) {
         {isLocked
           ? (<Badge tone={current.tone} label={current.label} size="sm" />)
           : (
-              <select
+              <SelectMenu
                 value={selectedState}
-                onChange={(e) => onPermissionChange(tool.name, e.currentTarget.value)}
-                aria-label={t("tools.permissionFor", { name: tool.name })}
-                className="v2-select h-8 rounded-md border border-[var(--v2-panel-border)] bg-[var(--v2-surface-soft)] px-2.5 font-mono text-xs text-[var(--v2-text-strong)] outline-none focus:border-[color-mix(in_srgb,var(--v2-accent)_45%,var(--v2-panel-border))]"
-              >
-                {permissionStates.map(
-                  (p) =>
-                    (<option key={p.value} value={p.value}>
-                      {p.label}
-                    </option>)
-                )}
-              </select>
+                options={permissionStates}
+                onChange={(value) => onPermissionChange(tool.name, value)}
+                ariaLabel={t("tools.permissionFor", { name: tool.name })}
+                className="w-36 sm:w-44"
+                data-testid="settings-tool-permission-select"
+              />
             )}
         {isSaved &&
         (
diff --git a/tests/e2e/helpers.py b/tests/e2e/helpers.py
index 18d519d52a8..704c947f76c 100644
--- a/tests/e2e/helpers.py
+++ b/tests/e2e/helpers.py
@@ -311,6 +311,9 @@
     "settings_tool_row_for": (
         "[data-testid='settings-tool-row'][data-tool-name='{name}']"
     ),
+    "settings_tool_permission": (
+        "[data-testid='settings-tool-permission-select'] button[aria-haspopup='listbox']"
+    ),
     "settings_tool_lock": "[data-testid='settings-tool-lock']",
     "llm_provider_card_for": (
         "[data-testid='llm-provider-card'][data-provider-id='{provider_id}']"
diff --git a/tests/e2e/reborn_coverage_tests.txt b/tests/e2e/reborn_coverage_tests.txt
index 633c7813dc8..5c4ad9cae10 100644
--- a/tests/e2e/reborn_coverage_tests.txt
+++ b/tests/e2e/reborn_coverage_tests.txt
@@ -14,6 +14,7 @@
 # provider-fixture or model-tool-choice coverage that should stay in the normal
 # E2E suite but not in this Reborn binary coverage gate.
 tests/e2e/scenarios/test_reborn_webui_v2_smoke.py
+tests/e2e/scenarios/test_reborn_webui_v2_legacy_tool_permissions.py::test_reborn_legacy_tool_permission_menu_persists_after_reload
 tests/e2e/scenarios/test_reborn_v2_file_download.py
 tests/e2e/scenarios/test_reborn_responses_api.py::test_reborn_responses_lookup_and_cancel_missing_id_match_not_found_shape
 tests/e2e/scenarios/test_reborn_responses_api.py::test_reborn_openai_compat_route_mounts_require_bearer_served
diff --git a/tests/e2e/scenarios/test_reborn_webui_v2_legacy_tool_permissions.py b/tests/e2e/scenarios/test_reborn_webui_v2_legacy_tool_permissions.py
index b150e7b611d..f3dd286dc5b 100644
--- a/tests/e2e/scenarios/test_reborn_webui_v2_legacy_tool_permissions.py
+++ b/tests/e2e/scenarios/test_reborn_webui_v2_legacy_tool_permissions.py
@@ -193,6 +193,21 @@ def _tool_row(page, name: str):
     return page.locator(SEL_V2["settings_tool_row_for"].format(name=name))
 
 
+def _permission_button(page, name: str):
+    return _tool_row(page, name).locator(SEL_V2["settings_tool_permission"])
+
+
+async def _choose_permission(page, name: str, label: str):
+    button = _permission_button(page, name)
+    await button.click()
+    listbox_id = await button.get_attribute("aria-controls")
+    assert listbox_id
+    listbox = page.locator(f"#{listbox_id}")
+    await expect(listbox).to_be_visible(timeout=5000)
+    await listbox.get_by_role("option", name=label).click()
+    return button
+
+
 @pytest.fixture
 def reborn_approval_artifact_cleanup():
     yield
@@ -274,17 +289,20 @@ async def test_reborn_legacy_tool_permissions_tab_visible(
         await harness["context"].close()
 
 
-async def test_reborn_legacy_tool_permission_select_persists_after_reload(
+async def test_reborn_legacy_tool_permission_menu_persists_after_reload(
     reborn_v2_server, reborn_v2_browser
 ):
     harness = await _open_mocked_tools_page(reborn_v2_server, reborn_v2_browser)
     try:
         page = harness["page"]
-        select = page.get_by_label("Permission for echo")
-        await expect(select).to_have_value("always_allow", timeout=5000)
+        row = _tool_row(page, "echo")
+        await expect(row.locator("select")).to_have_count(0)
+
+        button = _permission_button(page, "echo")
+        await expect(button).to_contain_text("Always allow", timeout=5000)
 
-        await select.select_option("ask_each_time")
-        await expect(select).to_have_value("ask_each_time")
+        await _choose_permission(page, "echo", "Ask each time")
+        await expect(button).to_contain_text("Ask each time")
         await expect(_tool_row(page, "echo").get_by_text("saved")).to_be_visible(timeout=5000)
         assert harness["permission_requests"][-1] == {
             "name": "echo",
@@ -295,13 +313,13 @@ async def test_reborn_legacy_tool_permission_select_persists_after_reload(
         await expect(
             page.get_by_placeholder(SEL_V2["settings_search_placeholder"])
         ).to_be_visible(timeout=15000)
-        await expect(page.get_by_label("Permission for echo")).to_have_value(
-            "ask_each_time",
+        await expect(_permission_button(page, "echo")).to_contain_text(
+            "Ask each time",
             timeout=5000,
         )
 
-        await page.get_by_label("Permission for echo").select_option("default")
-        await expect(page.get_by_label("Permission for echo")).to_have_value("default")
+        await _choose_permission(page, "echo", "Follow global")
+        await expect(_permission_button(page, "echo")).to_contain_text("Follow global")
         assert harness["permission_requests"][-1] == {
             "name": "echo",
             "body": {"state": "default"},
@@ -320,16 +338,16 @@ async def test_reborn_legacy_tool_permission_save_failure_shows_error(
     )
     try:
         page = harness["page"]
-        select = page.get_by_label("Permission for echo")
-        await expect(select).to_have_value("always_allow", timeout=5000)
+        button = _permission_button(page, "echo")
+        await expect(button).to_contain_text("Always allow", timeout=5000)
 
-        await select.select_option("ask_each_time")
+        await _choose_permission(page, "echo", "Ask each time")
 
         await expect(page.get_by_role("alert")).to_contain_text(
             "Save failed: Permission denied",
             timeout=5000,
         )
-        await expect(select).to_have_value("always_allow", timeout=5000)
+        await expect(button).to_contain_text("Always allow", timeout=5000)
         assert harness["permission_requests"][-1] == {
             "name": "echo",
             "body": {"state": "ask_each_time"},
@@ -347,9 +365,8 @@ async def test_reborn_legacy_locked_tool_shows_badge_without_select(
         locked = _tool_row(page, "tool.financial")
         await expect(locked).to_be_visible(timeout=5000)
         await expect(locked.locator(SEL_V2["settings_tool_lock"])).to_be_visible()
-        await expect(
-            locked.get_by_label("Permission for tool.financial")
-        ).to_have_count(0)
+        await expect(locked.locator(SEL_V2["settings_tool_permission"])).to_have_count(0)
+        await expect(locked.locator("select")).to_have_count(0)
         await expect(locked.get_by_text("Ask each time")).to_be_visible()
     finally:
         await harness["context"].close()