refactor!: remove redundant compatibility layers

Use native browser and Tauri behavior instead of custom selector, dialog, and window-state implementations. Remove obsolete bridge, relay, asset, and dependency paths to keep the supported surface small.

BREAKING CHANGE: The Noctalia relay no longer accepts --agent, and the Tauri host no longer exposes the legacy load_agent command.

ui/src/App.css

@@ -1007,17 +1007,14 @@ select:focus-visible {
 	flex: 0 0 auto;
 	transform: scale(1.35);
 }
-.modal-backdrop,
-.extension-backdrop {
-	position: absolute;
-	z-index: 10;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 20px;
+dialog.session-picker::backdrop,
+dialog.extension::backdrop {
 	background: rgba(0, 0, 0, 0.62);
 }
+dialog.session-picker:not([open]),
+dialog.extension:not([open]) {
+	display: none;
+}
 .session-picker,
 .extension {
 	width: min(680px, 90vw);
@@ -1025,10 +1022,12 @@ select:focus-visible {
 	overflow: auto;
 	display: grid;
 	gap: 8px;
+	margin: auto;
 	padding: 15px;
 	border: 1px solid #b76f26;
 	border-radius: 10px;
 	background: #2d2e31;
+	color: #f1f3f4;
 }
 .session-picker {
 	overflow: hidden;

ui/src/App.test.tsx

@@ -190,10 +190,9 @@ describe("App command progress and errors", () => {
 		await user.click(
 			screen.getByRole("option", { name: /Claude.*anthropic\/claude\/sonnet/i }),
 		);
-		await user.click(
-			screen.getByRole("button", { name: "Default thinking Medium" }),
-		);
-		await user.click(screen.getByRole("option", { name: "High" }));
+		fireEvent.change(screen.getByRole("combobox", { name: "Default thinking" }), {
+			target: { value: "high" },
+		});
 		await user.click(
 			screen.getByRole("button", { name: "Save Quick Pane settings" }),
 		);

ui/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

ui/src/components/CommandFormDialog.tsx

@@ -1,16 +1,18 @@
 import { useEffect, useRef, useState } from "react";
 import type { RpcCommand, RpcField } from "../commands/rpc";
 
-const controls = (container: HTMLElement | null) =>
-	Array.from(
-		container?.querySelectorAll<HTMLElement>("button, input, select, textarea") ??
-			[],
-	).filter((node) => !node.hasAttribute("disabled"));
+type RpcInputValue =
+	| string
+	| boolean
+	| null
+	| RpcInputValue[]
+	| { [key: string]: RpcInputValue }
+	| undefined;
 
-function valueFor(field: RpcField, value: string | boolean): unknown {
+function valueFor(field: RpcField, value: string | boolean): RpcInputValue {
 	if (field.kind === "boolean") return value === true;
 	if (field.kind === "json")
-		return value ? JSON.parse(value as string) : undefined;
+		return value ? (JSON.parse(value as string) as RpcInputValue) : undefined;
 	return value || undefined;
 }
 
@@ -27,19 +29,17 @@ export function CommandFormDialog({
 	pending?: boolean;
 	commandError?: string;
 }) {
-	const ref = useRef<HTMLElement>(null);
-	const opener = useRef<HTMLElement | null>(null);
+	const ref = useRef<HTMLDialogElement>(null);
 	const [values, setValues] = useState<Record<string, string | boolean>>({});
 	const [validationError, setValidationError] = useState<string>();
 	useEffect(() => {
 		if (!command) return;
-		opener.current = document.activeElement as HTMLElement | null;
 		setValues({});
 		setValidationError(undefined);
-		const frame = requestAnimationFrame(() => controls(ref.current)[0]?.focus());
+		const dialog = ref.current;
+		dialog?.showModal();
 		return () => {
-			cancelAnimationFrame(frame);
-			opener.current?.focus();
+			if (dialog?.open) dialog.close();
 		};
 	}, [command]);
 	if (!command) return null;
@@ -63,109 +63,90 @@ export function CommandFormDialog({
 		}
 	};
 	return (
-		<div className="extension-backdrop">
-			<section
-				ref={ref}
-				className="extension"
-				role="dialog"
-				aria-modal="true"
-				aria-labelledby="command-form-title"
-				aria-busy={pending}
-				onKeyDown={(event) => {
-					if (event.key === "Escape") {
-						event.preventDefault();
-						onCancel();
-					}
-					if (event.key === "Tab") {
-						const items = controls(ref.current),
-							first = items[0],
-							last = items[items.length - 1];
-						if (!first || !last) return;
-						if (event.shiftKey && document.activeElement === first) {
-							event.preventDefault();
-							last.focus();
-						} else if (!event.shiftKey && document.activeElement === last) {
-							event.preventDefault();
-							first.focus();
-						}
-					}
-				}}
-			>
-				<p className="extension-eyebrow">Pi RPC command</p>
-				<h2 id="command-form-title">/{command.command}</h2>
-				<p>{command.description}</p>
-				{fields.map((field) => (
-					<label key={field.name}>
-						{field.label}
-						{field.kind === "boolean" ? (
-							<input
-								aria-label={field.label}
-								type="checkbox"
-								checked={values[field.name] === true}
-								disabled={pending}
-								onChange={(event) =>
-									setValues({
-										...values,
-										[field.name]: event.currentTarget.checked,
-									})
-								}
-							/>
-						) : field.kind === "enum" ? (
-							<select
-								aria-label={field.label}
-								value={(values[field.name] as string) ?? ""}
-								disabled={pending}
-								onChange={(event) =>
-									setValues({
-										...values,
-										[field.name]: event.currentTarget.value,
-									})
-								}
-							>
-								<option value="">Select…</option>
-								{field.options?.map((option) => (
-									<option key={option}>{option}</option>
-								))}
-							</select>
-						) : field.kind === "json" ? (
-							<textarea
-								aria-label={field.label}
-								value={(values[field.name] as string) ?? ""}
-								disabled={pending}
-								onChange={(event) =>
-									setValues({
-										...values,
-										[field.name]: event.currentTarget.value,
-									})
-								}
-							/>
-						) : (
-							<input
-								aria-label={field.label}
-								value={(values[field.name] as string) ?? ""}
-								disabled={pending}
-								onChange={(event) =>
-									setValues({
-										...values,
-										[field.name]: event.currentTarget.value,
-									})
-								}
-							/>
-						)}
-					</label>
-				))}
-				{(validationError || commandError) && (
-					<p role="alert">{validationError || commandError}</p>
-				)}
-				<div className="extension-options">
-					<button disabled={pending} onClick={submit}>
-						{pending ? "Running…" : "Run command"}
-					</button>
-					<button className="quiet" disabled={pending} onClick={onCancel}>
-						Cancel
-					</button>
-				</div>
-			</section>
-		</div>
+		<dialog
+			ref={ref}
+			className="extension"
+			aria-labelledby="command-form-title"
+			aria-busy={pending}
+			onCancel={(event) => {
+				event.preventDefault();
+				onCancel();
+			}}
+		>
+			<p className="extension-eyebrow">Pi RPC command</p>
+			<h2 id="command-form-title">/{command.command}</h2>
+			<p>{command.description}</p>
+			{fields.map((field) => (
+				<label key={field.name}>
+					{field.label}
+					{field.kind === "boolean" ? (
+						<input
+							aria-label={field.label}
+							type="checkbox"
+							checked={values[field.name] === true}
+							disabled={pending}
+							onChange={(event) =>
+								setValues({
+									...values,
+									[field.name]: event.currentTarget.checked,
+								})
+							}
+						/>
+					) : field.kind === "enum" ? (
+						<select
+							aria-label={field.label}
+							value={(values[field.name] as string) ?? ""}
+							disabled={pending}
+							onChange={(event) =>
+								setValues({
+									...values,
+									[field.name]: event.currentTarget.value,
+								})
+							}
+						>
+							<option value="">Select…</option>
+							{field.options?.map((option) => (
+								<option key={option}>{option}</option>
+							))}
+						</select>
+					) : field.kind === "json" ? (
+						<textarea
+							aria-label={field.label}
+							value={(values[field.name] as string) ?? ""}
+							disabled={pending}
+							onChange={(event) =>
+								setValues({
+									...values,
+									[field.name]: event.currentTarget.value,
+								})
+							}
+						/>
+					) : (
+						<input
+							aria-label={field.label}
+							value={(values[field.name] as string) ?? ""}
+							disabled={pending}
+							onChange={(event) =>
+								setValues({
+									...values,
+									[field.name]: event.currentTarget.value,
+								})
+							}
+						/>
+					)}
+				</label>
+			))}
+			{(validationError || commandError) && (
+				<p role="alert">{validationError || commandError}</p>
+			)}
+			<div className="extension-options">
+				<button disabled={pending} onClick={submit}>
+					{pending ? "Running…" : "Run command"}
+				</button>
+				<button className="quiet" disabled={pending} onClick={onCancel}>
+					Cancel
+				</button>
+			</div>
+		</dialog>
 	);
 }

ui/src/components/Dropdown.css.test.ts

@@ -2,20 +2,26 @@ import { describe, expect, it } from "vitest";
 
 const fs = await import(["node", "fs"].join(":"));
 const modelCss = fs.readFileSync("src/components/ModelSelector.css", "utf8");
-const thinkingCss = fs.readFileSync("src/components/ThinkingSelector.css", "utf8");
 const quickPaneCss = fs.readFileSync("src/quick-pane/quick-pane.css", "utf8");
 
 describe("dropdown CSS", () => {
   it("keeps regular model menu capped with scrolling results", () => {
-    expect(modelCss).toMatch(/\.model-menu\s*\{[\s\S]*max-height:\s*min\(420px, calc\(100vh - 80px\)\)/);
+    expect(modelCss).toMatch(
+      /\.model-menu\s*\{[\s\S]*max-height:\s*min\(420px, calc\(100vh - 80px\)\)/,
+    );
     expect(modelCss).toMatch(/\.model-results\s*\{[\s\S]*overflow-y:\s*auto/);
     expect(modelCss).toMatch(/\.model-option\[aria-selected="true"\]/);
   });
 
   it("caps compact menus to Quick Pane container below titlebar and toolbar", () => {
-    expect(quickPaneCss).toMatch(/\.quick-pane\s*\{[\s\S]*container-type:\s*size/);
-    expect(quickPaneCss).toMatch(/\.quick-pane \.model-menu\s*\{[\s\S]*max-height:\s*min\(350px, calc\(100cqh - 74px\)\)/);
-    expect(quickPaneCss).toMatch(/\.quick-pane \.model-menu\s*\{[\s\S]*width:\s*min\(400px, calc\(100cqw - 24px\)\)/);
-    expect(thinkingCss).toMatch(/\.thinking-selector-down \.thinking-menu\s*\{[\s\S]*top:\s*calc\(100% \+ 6px\)/);
+    expect(quickPaneCss).toMatch(
+      /\.quick-pane\s*\{[\s\S]*container-type:\s*size/,
+    );
+    expect(quickPaneCss).toMatch(
+      /\.quick-pane \.model-menu\s*\{[\s\S]*max-height:\s*min\(350px, calc\(100cqh - 74px\)\)/,
+    );
+    expect(quickPaneCss).toMatch(
+      /\.quick-pane \.model-menu\s*\{[\s\S]*width:\s*min\(400px, calc\(100cqw - 24px\)\)/,
+    );
   });
 });

ui/src/components/ExtensionDialog.tsx

@@ -1,137 +1,99 @@
 import { useEffect, useRef, useState } from "react";
 import type { Extension } from "../workspace/types";
 
-function controls(container: HTMLElement | null) {
-	return [
-		...(container?.querySelectorAll<HTMLElement>(
-			'button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [href], [tabindex]:not([tabindex="-1"])',
-		) ?? []),
-	];
-}
-
 export function ExtensionDialog({
-	extension,
-	onRespond,
+  extension,
+  onRespond,
 }: {
-	extension?: Extension;
-	onRespond: (response: Record<string, unknown>) => void;
+  extension?: Extension;
+  onRespond: (response: Record<string, unknown>) => void;
 }) {
-	const ref = useRef<HTMLElement>(null);
-	const opener = useRef<HTMLElement | null>(null);
-	const respond = useRef(onRespond);
-	const [value, setValue] = useState("");
-	respond.current = onRespond;
+  const ref = useRef<HTMLDialogElement>(null);
+  const [value, setValue] = useState("");
 
-	useEffect(() => {
-		if (!extension) return;
-		opener.current = document.activeElement as HTMLElement | null;
-		setValue(
-			extension.prefill ?? extension.initialValue ?? extension.text ?? "",
-		);
-		const frame = requestAnimationFrame(() =>
-			controls(ref.current)[0]?.focus(),
-		);
-		const keydown = (event: KeyboardEvent) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
-				respond.current({ cancelled: true });
-				return;
-			}
-			if (event.key !== "Tab") return;
-			const focusable = controls(ref.current);
-			const first = focusable[0];
-			const last = focusable[focusable.length - 1];
-			if (!first || !last) return;
-			if (event.shiftKey && document.activeElement === first) {
-				event.preventDefault();
-				last.focus();
-			} else if (!event.shiftKey && document.activeElement === last) {
-				event.preventDefault();
-				first.focus();
-			}
-		};
-		window.addEventListener("keydown", keydown);
-		return () => {
-			cancelAnimationFrame(frame);
-			window.removeEventListener("keydown", keydown);
-			opener.current?.focus();
-		};
-	}, [extension]);
+  useEffect(() => {
+    if (!extension) return;
+    setValue(
+      extension.prefill ?? extension.initialValue ?? extension.text ?? "",
+    );
+    const dialog = ref.current;
+    dialog?.showModal();
+    return () => {
+      if (dialog?.open) dialog.close();
+    };
+  }, [extension]);
 
-	if (!extension) return null;
-	return (
-		<div className="extension-backdrop">
-			<section
-				ref={ref}
-				className="extension"
-				role="dialog"
-				aria-modal="true"
-				aria-labelledby="extension-title"
-			>
-				<p className="extension-eyebrow">Pi agent request</p>
-				<h2 id="extension-title">Review request</h2>
-				<div className="extension-request">
-					<p className="extension-request-label">Requested action</p>
-					<p className="extension-request-action">
-						{extension.title ?? "Pi needs input"}
-					</p>
-					{extension.message && (
-						<>
-							<p className="extension-request-label">Request details</p>
-							<p className="extension-request-details">{extension.message}</p>
-						</>
-					)}
-				</div>
-				{extension.method === "select" && (
-					<div className="extension-options">
-						{extension.options?.map((option) => (
-							<button key={option} onClick={() => onRespond({ value: option })}>
-								{option}
-							</button>
-						))}
-					</div>
-				)}
-				{extension.method === "confirm" && (
-					<div className="extension-options">
-						<button onClick={() => onRespond({ confirmed: true })}>
-							Allow request
-						</button>
-						<button
-							className="quiet"
-							onClick={() => onRespond({ confirmed: false })}
-						>
-							Decline request
-						</button>
-					</div>
-				)}
-				{extension.method === "input" && (
-					<>
-						<input
-							aria-label="Extension value"
-							value={value}
-							placeholder={extension.placeholder}
-							onChange={(event) => setValue(event.currentTarget.value)}
-						/>
-						<button onClick={() => onRespond({ value })}>Submit</button>
-					</>
-				)}
-				{extension.method === "editor" && (
-					<>
-						<textarea
-							aria-label="Extension value"
-							value={value}
-							onChange={(event) => setValue(event.currentTarget.value)}
-						/>
-						<button onClick={() => onRespond({ value })}>Submit</button>
-					</>
-				)}
-				<button
-					className="quiet"
-					onClick={() => onRespond({ cancelled: true })}
-				>
-					Cancel
-				</button>
-			</section>
-		</div>
-	);
+  if (!extension) return null;
+  return (
+    <dialog
+      ref={ref}
+      className="extension"
+      aria-labelledby="extension-title"
+      onCancel={(event) => {
+        event.preventDefault();
+        onRespond({ cancelled: true });
+      }}
+    >
+      <p className="extension-eyebrow">Pi agent request</p>
+      <h2 id="extension-title">Review request</h2>
+      <div className="extension-request">
+        <p className="extension-request-label">Requested action</p>
+        <p className="extension-request-action">
+          {extension.title ?? "Pi needs input"}
+        </p>
+        {extension.message && (
+          <>
+            <p className="extension-request-label">Request details</p>
+            <p className="extension-request-details">{extension.message}</p>
+          </>
+        )}
+      </div>
+      {extension.method === "select" && (
+        <div className="extension-options">
+          {extension.options?.map((option) => (
+            <button key={option} onClick={() => onRespond({ value: option })}>
+              {option}
+            </button>
+          ))}
+        </div>
+      )}
+      {extension.method === "confirm" && (
+        <div className="extension-options">
+          <button onClick={() => onRespond({ confirmed: true })}>
+            Allow request
+          </button>
+          <button
+            className="quiet"
+            onClick={() => onRespond({ confirmed: false })}
+          >
+            Decline request
+          </button>
+        </div>
+      )}
+      {extension.method === "input" && (
+        <>
+          <input
+            aria-label="Extension value"
+            value={value}
+            placeholder={extension.placeholder}
+            onChange={(event) => setValue(event.currentTarget.value)}
+          />
+          <button onClick={() => onRespond({ value })}>Submit</button>
+        </>
+      )}
+      {extension.method === "editor" && (
+        <>
+          <textarea
+            aria-label="Extension value"
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+          />
+          <button onClick={() => onRespond({ value })}>Submit</button>
+        </>
+      )}
+      <button className="quiet" onClick={() => onRespond({ cancelled: true })}>
+        Cancel
+      </button>
+    </dialog>
+  );
 }

ui/src/components/SessionPicker.tsx

@@ -1,9 +1,6 @@
-import { type RefObject, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { DirectorySession } from "../workspace/types";
 
-const focusableSelector =
-	'button:not(:disabled), input:not(:disabled), [href], [tabindex]:not([tabindex="-1"])';
-
 function sessionTitle(session: DirectorySession) {
 	return session.name ?? session.firstMessage ?? "Untitled session";
 }
@@ -26,9 +23,7 @@ function SessionRow({
 	onOpen: (session: DirectorySession) => void;
 }) {
 	const showPreview = Boolean(
-		session.name &&
-			session.firstMessage &&
-			session.firstMessage !== session.name,
+		session.name && session.firstMessage && session.firstMessage !== session.name,
 	);
 	return (
 		<li>
@@ -71,47 +66,6 @@ function SessionResults({
 	);
 }
 
-function useDialogFocus(
-	dialogRef: RefObject<HTMLElement | null>,
-	searchRef: RefObject<HTMLInputElement | null>,
-	onClose: () => void,
-) {
-	const openerRef = useRef<HTMLElement | null>(
-		document.activeElement as HTMLElement | null,
-	);
-	useEffect(() => {
-		const dialog = dialogRef.current;
-		const controls = () => [
-			...(dialog?.querySelectorAll<HTMLElement>(focusableSelector) ?? []),
-		];
-		searchRef.current?.focus();
-		const keydown = (event: KeyboardEvent) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
-				onClose();
-				return;
-			}
-			if (event.key !== "Tab") return;
-			const focusable = controls();
-			const first = focusable[0];
-			const last = focusable[focusable.length - 1];
-			if (!first || !last) return;
-			if (event.shiftKey && document.activeElement === first) {
-				event.preventDefault();
-				last.focus();
-			} else if (!event.shiftKey && document.activeElement === last) {
-				event.preventDefault();
-				first.focus();
-			}
-		};
-		window.addEventListener("keydown", keydown);
-		return () => {
-			window.removeEventListener("keydown", keydown);
-			openerRef.current?.focus();
-		};
-	}, [dialogRef, onClose, searchRef]);
-}
-
 export function SessionPicker({
 	sessions,
 	onOpen,
@@ -122,55 +76,56 @@ export function SessionPicker({
 	onClose: () => void;
 }) {
 	const [query, setQuery] = useState("");
-	const dialogRef = useRef<HTMLElement>(null);
-	const searchRef = useRef<HTMLInputElement>(null);
+	const dialogRef = useRef<HTMLDialogElement>(null);
 	const normalizedQuery = query.trim().toLocaleLowerCase();
 	const filteredSessions = useMemo(
 		() => sessions.filter((session) => matchesQuery(session, normalizedQuery)),
 		[normalizedQuery, sessions],
 	);
-	useDialogFocus(dialogRef, searchRef, onClose);
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		dialog?.showModal();
+		return () => {
+			if (dialog?.open) dialog.close();
+		};
+	}, []);
 	const resultLabel = `${filteredSessions.length} saved session${filteredSessions.length === 1 ? "" : "s"}`;
 	return (
-		<div className="modal-backdrop">
-			<section
-				ref={dialogRef}
-				className="session-picker"
-				role="dialog"
-				aria-modal="true"
-				aria-labelledby="session-picker-title"
-			>
-				<div className="picker-heading">
-					<h2 id="session-picker-title">Saved sessions</h2>
-					<button onClick={onClose}>Close</button>
-				</div>
-				<div className="session-search">
-					<label className="sr-only" htmlFor="session-search">
-						Search saved sessions
-					</label>
-					<input
-						ref={searchRef}
-						id="session-search"
-						type="search"
-						value={query}
-						onChange={(event) => setQuery(event.target.value)}
-						placeholder="Search by name, message, or ID"
-						aria-controls="session-results"
-					/>
-				</div>
-				<p className="session-result-count" role="status" aria-live="polite">
-					{sessions.length ? resultLabel : "No saved sessions"}
-				</p>
-				{sessions.length === 0 ? (
-					<p className="muted">No saved sessions for this directory.</p>
-				) : (
-					<SessionResults
-						sessions={filteredSessions}
-						query={query}
-						onOpen={onOpen}
-					/>
-				)}
-			</section>
-		</div>
+		<dialog
+			ref={dialogRef}
+			className="session-picker"
+			aria-labelledby="session-picker-title"
+			onCancel={(event) => {
+				event.preventDefault();
+				onClose();
+			}}
+		>
+			<div className="picker-heading">
+				<h2 id="session-picker-title">Saved sessions</h2>
+				<button onClick={onClose}>Close</button>
+			</div>
+			<div className="session-search">
+				<label className="sr-only" htmlFor="session-search">
+					Search saved sessions
+				</label>
+				<input
+					autoFocus
+					id="session-search"
+					type="search"
+					value={query}
+					onChange={(event) => setQuery(event.target.value)}
+					placeholder="Search by name, message, or ID"
+					aria-controls="session-results"
+				/>
+			</div>
+			<p className="session-result-count" role="status" aria-live="polite">
+				{sessions.length ? resultLabel : "No saved sessions"}
+			</p>
+			{sessions.length === 0 ? (
+				<p className="muted">No saved sessions for this directory.</p>
+			) : (
+				<SessionResults sessions={filteredSessions} query={query} onOpen={onOpen} />
+			)}
+		</dialog>
 	);
 }

ui/src/components/ThinkingSelector.css

@@ -11,19 +11,8 @@
   text-transform: uppercase;
 }
 
-.thinking-menu {
-  grid-template-rows: minmax(0, 1fr);
-}
-
-.thinking-selector-down .thinking-menu {
-  top: calc(100% + 6px);
-  bottom: auto;
-}
-
-.thinking-options {
-  gap: 2px;
-}
-
-.thinking-option {
-  font-size: inherit;
+.thinking-trigger {
+  appearance: auto;
+  padding-right: 6px;
+  background-image: none;
 }

ui/src/components/ThinkingSelector.test.tsx

@@ -1,11 +1,4 @@
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  within,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { ThinkingSelector } from "./ThinkingSelector";
 
@@ -19,6 +12,7 @@ const model = {
     xhigh: "xhigh",
   },
 };
+
 const fullModel = {
   reasoning: true,
   thinkingLevelMap: {
@@ -31,176 +25,47 @@ const fullModel = {
 };
 
 describe("ThinkingSelector", () => {
-  it("uses reconciled model options and marks selected level", async () => {
-    const user = userEvent.setup();
+  it("uses reconciled model options", () => {
     render(
       <ThinkingSelector model={model} value="medium" onChange={vi.fn()} />,
     );
 
-    const trigger = screen.getByRole("button", { name: "Thinking Off" });
-    await user.click(trigger);
-    const menu = screen.getByRole("listbox", { name: "Thinking options" });
+    const select = screen.getByRole("combobox", { name: "Thinking" });
+    expect(select).toHaveValue("off");
     expect(
-      within(menu)
-        .getAllByRole("option")
-        .map((option) => option.textContent),
+      screen.getAllByRole("option").map((option) => option.textContent),
     ).toEqual(["Off", "High", "XHigh"]);
-    expect(within(menu).getByRole("option", { name: "Off" })).toHaveAttribute(
-      "aria-selected",
-      "true",
-    );
   });
 
-  it("selects an option, closes menu, and restores trigger focus", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<ThinkingSelector model={model} value="off" onChange={onChange} />);
-
-    const trigger = screen.getByRole("button", { name: "Thinking Off" });
-    await user.click(trigger);
-    await user.click(screen.getByRole("option", { name: "High" }));
-    expect(onChange).toHaveBeenCalledWith("high");
-    expect(
-      screen.queryByRole("listbox", { name: "Thinking options" }),
-    ).toBeNull();
-    await waitFor(() => expect(trigger).toHaveFocus());
-  });
-
-  it("roves options with arrows, Home, End, and Enter", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(
-      <ThinkingSelector model={fullModel} value="medium" onChange={onChange} />,
-    );
-
-    const trigger = screen.getByRole("button", { name: "Thinking Medium" });
-    await user.click(trigger);
-    const menu = screen.getByRole("listbox", { name: "Thinking options" });
-    const medium = within(menu).getByRole("option", { name: "Medium" });
-    await waitFor(() => expect(medium).toHaveFocus());
-    expect(medium).toHaveAttribute("tabindex", "0");
-
-    await user.keyboard("{ArrowDown}");
-    await waitFor(() =>
-      expect(within(menu).getByRole("option", { name: "High" })).toHaveFocus(),
-    );
-    await user.keyboard("{ArrowUp}{Home}");
-    await waitFor(() =>
-      expect(within(menu).getByRole("option", { name: "Off" })).toHaveFocus(),
-    );
-    await user.keyboard("{End}");
-    await waitFor(() =>
-      expect(within(menu).getByRole("option", { name: "XHigh" })).toHaveFocus(),
-    );
-    await user.keyboard("{Enter}");
-
-    expect(onChange).toHaveBeenCalledWith("xhigh");
-    expect(
-      screen.queryByRole("listbox", { name: "Thinking options" }),
-    ).toBeNull();
-    await waitFor(() => expect(trigger).toHaveFocus());
-  });
-
-  it("selects active option with Space and cycles typeahead matches", async () => {
-    const user = userEvent.setup();
+  it("reports native selection changes", () => {
     const onChange = vi.fn();
     render(
       <ThinkingSelector model={fullModel} value="off" onChange={onChange} />,
     );
 
-    const trigger = screen.getByRole("button", { name: "Thinking Off" });
-    await user.click(trigger);
-    const menu = screen.getByRole("listbox", { name: "Thinking options" });
-    await waitFor(() =>
-      expect(within(menu).getByRole("option", { name: "Off" })).toHaveFocus(),
-    );
-    await user.keyboard("m");
-    await waitFor(() =>
-      expect(
-        within(menu).getByRole("option", { name: "Minimal" }),
-      ).toHaveFocus(),
-    );
-    await user.keyboard("m");
-    await waitFor(() =>
-      expect(
-        within(menu).getByRole("option", { name: "Medium" }),
-      ).toHaveFocus(),
-    );
-    await user.keyboard(" ");
+    fireEvent.change(screen.getByRole("combobox", { name: "Thinking" }), {
+      target: { value: "high" },
+    });
 
-    expect(onChange).toHaveBeenCalledWith("medium");
-    expect(
-      screen.queryByRole("listbox", { name: "Thinking options" }),
-    ).toBeNull();
-    await waitFor(() => expect(trigger).toHaveFocus());
+    expect(onChange).toHaveBeenCalledWith("high");
   });
 
-  it("closes on Escape with focus restore and outside pointer without closing pane", async () => {
-    const user = userEvent.setup();
-    render(<ThinkingSelector model={model} value="high" onChange={vi.fn()} />);
-
-    const trigger = screen.getByRole("button", { name: "Thinking High" });
-    await user.click(trigger);
-    await waitFor(() =>
-      expect(screen.getByRole("option", { name: "High" })).toHaveFocus(),
-    );
-    await user.keyboard("{Escape}");
-    expect(
-      screen.queryByRole("listbox", { name: "Thinking options" }),
-    ).toBeNull();
-    await waitFor(() => expect(trigger).toHaveFocus());
-
-    await user.click(trigger);
-    fireEvent.pointerDown(document.body);
-    expect(
-      screen.queryByRole("listbox", { name: "Thinking options" }),
-    ).toBeNull();
-  });
-
-  it("closes an open menu when disabled without restoring focus", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    const { rerender } = render(
-      <ThinkingSelector model={model} value="high" onChange={onChange} />,
-    );
-    const trigger = screen.getByRole("button", { name: "Thinking High" });
-
-    await user.click(trigger);
-    const option = screen.getByRole("option", { name: "High" });
-    await waitFor(() => expect(option).toHaveFocus());
-    rerender(
+  it("supports labels, disabled state, and control classes", () => {
+    render(
       <ThinkingSelector
+        label="Default thinking"
         model={model}
-        value="high"
-        disabled
-        onChange={onChange}
-      />,
-    );
-
-    expect(
-      screen.queryByRole("listbox", { name: "Thinking options" }),
-    ).toBeNull();
-    expect(trigger).toBeDisabled();
-    expect(trigger).not.toHaveFocus();
-    fireEvent.click(option);
-    option.focus();
-    fireEvent.keyDown(option, { key: "Enter" });
-    fireEvent.click(option, { detail: 0 });
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it("supports disabled and downward trigger placement", () => {
-    const { container } = render(
-      <ThinkingSelector
         value="off"
         disabled
-        placement="down"
+        className="compact"
+        controlClassName="toolbar-control"
         onChange={vi.fn()}
       />,
     );
-    expect(screen.getByRole("button", { name: "Thinking Off" })).toBeDisabled();
-    expect(
-      container.querySelector(".thinking-selector-down"),
-    ).toBeInTheDocument();
+
+    const select = screen.getByRole("combobox", { name: "Default thinking" });
+    expect(select).toBeDisabled();
+    expect(select).toHaveClass("toolbar-control");
+    expect(select.closest("label")).toHaveClass("compact");
   });
 });

ui/src/components/ThinkingSelector.tsx

@@ -1,240 +1,53 @@
-import { useEffect, useId, useRef, useState } from "react";
 import { reconcileThinkingLevel, thinkingLevelOptions } from "../model-catalog";
 import type { Model } from "../workspace/types";
 import "./ModelSelector.css";
 import "./ThinkingSelector.css";
 
 type ThinkingSelectorProps = {
-  model?: Model;
-  label?: string;
-  value: string;
-  disabled?: boolean;
-  placement?: "up" | "down";
-  className?: string;
-  controlClassName?: string;
-  onChange: (level: string) => void;
+    model?: Model;
+    label?: string;
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    controlClassName?: string;
+    onChange: (level: string) => void;
 };
 
 export function ThinkingSelector({
-  model,
-  label = "Thinking",
-  value,
-  disabled = false,
-  placement = "up",
-  className,
-  controlClassName,
-  onChange,
-}: ThinkingSelectorProps) {
-  const [open, setOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const openRef = useRef(false);
-  const disabledRef = useRef(disabled);
-  const focusFrameRef = useRef<number | undefined>(undefined);
-  const typeaheadRef = useRef({ query: "", time: 0 });
-  const rootRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);
-  disabledRef.current = disabled;
-  const labelId = useId();
-  const valueId = useId();
-  const menuId = useId();
-  const options = thinkingLevelOptions(model);
-  const selected = reconcileThinkingLevel(model, value);
-  const selectedIndex = options.findIndex(
-    (option) => option.value === selected,
-  );
-  const selectedOption = options[selectedIndex];
-  const classes = [
-    "thinking-selector",
-    `thinking-selector-${placement}`,
+    model,
+    label = "Thinking",
+    value,
+    disabled = false,
     className,
-  ]
-    .filter(Boolean)
-    .join(" ");
-  const closeMenu = (restoreFocus = false) => {
-    if (!openRef.current) return;
-    openRef.current = false;
-    setOpen(false);
-    typeaheadRef.current = { query: "", time: 0 };
-    if (restoreFocus) {
-      window.cancelAnimationFrame(focusFrameRef.current ?? 0);
-      focusFrameRef.current = window.requestAnimationFrame(() => {
-        focusFrameRef.current = undefined;
-        if (!disabledRef.current) triggerRef.current?.focus();
-      });
-    }
-  };
-  const openMenu = () => {
-    if (disabledRef.current || openRef.current) return;
-    setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
-    openRef.current = true;
-    setOpen(true);
-  };
-  const selectOption = (index: number) => {
-    const option = options[index];
-    if (!option || disabledRef.current) return;
-    onChange(option.value);
-    closeMenu(true);
-  };
-  const moveActiveOption = (direction: 1 | -1) => {
-    setActiveIndex(
-      (index) => (index + direction + options.length) % options.length,
-    );
-  };
-  const typeahead = (key: string) => {
-    const now = Date.now();
-    const previous = typeaheadRef.current;
-    let query = now - previous.time < 500 ? `${previous.query}${key}` : key;
-    let matches = options
-      .map((option, index) => ({ option, index }))
-      .filter(({ option }) =>
-        option.label.toLocaleLowerCase().startsWith(query),
-      );
-    if (!matches.length && query.length > 1) {
-      query = key;
-      matches = options
-        .map((option, index) => ({ option, index }))
-        .filter(({ option }) =>
-          option.label.toLocaleLowerCase().startsWith(query),
-        );
-    }
-    typeaheadRef.current = { query, time: now };
-    if (!matches.length) return;
-    const next = matches.find(({ index }) => index > activeIndex) ?? matches[0];
-    setActiveIndex(next.index);
-  };
-
-  useEffect(() => {
-    if (!disabled) return;
-    window.cancelAnimationFrame(focusFrameRef.current ?? 0);
-    focusFrameRef.current = undefined;
-    closeMenu();
-  }, [disabled]);
-
-  useEffect(() => {
-    return () => {
-      openRef.current = false;
-      window.cancelAnimationFrame(focusFrameRef.current ?? 0);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!open) return;
-    const focusFrame = window.requestAnimationFrame(() =>
-      optionRefs.current[activeIndex]?.focus(),
-    );
-    return () => window.cancelAnimationFrame(focusFrame);
-  }, [activeIndex, open]);
-
-  useEffect(() => {
-    if (!open) return;
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      event.preventDefault();
-      closeMenu(true);
-    };
-    const closeOutside = (event: PointerEvent) => {
-      if (!rootRef.current?.contains(event.target as Node)) closeMenu();
-    };
-    window.addEventListener("keydown", closeOnEscape);
-    window.addEventListener("pointerdown", closeOutside);
-    return () => {
-      window.removeEventListener("keydown", closeOnEscape);
-      window.removeEventListener("pointerdown", closeOutside);
-    };
-  }, [open]);
-
-  return (
-    <div className={classes}>
-      <span id={labelId}>{label}</span>
-      <div className="model-selector thinking-popup" ref={rootRef}>
-        <button
-          ref={triggerRef}
-          type="button"
-          className={["model-trigger", "thinking-trigger", controlClassName]
-            .filter(Boolean)
-            .join(" ")}
-          aria-expanded={open}
-          aria-haspopup="listbox"
-          aria-controls={open ? menuId : undefined}
-          aria-labelledby={`${labelId} ${valueId}`}
-          disabled={disabled}
-          onClick={() => {
-            if (disabledRef.current) return;
-            if (openRef.current) closeMenu();
-            else openMenu();
-          }}
+    controlClassName,
+    onChange,
+}: ThinkingSelectorProps) {
+    const options = thinkingLevelOptions(model);
+    return (
+        <label
+            className={["thinking-selector", className]
+                .filter(Boolean)
+                .join(" ")}
         >
-          <span id={valueId}>{selectedOption?.label ?? "Off"}</span>
-        </button>
-        {open && (
-          <div
-            id={menuId}
-            className="model-menu thinking-menu"
-            role="listbox"
-            aria-label={`${label} options`}
-          >
-            <div className="model-results thinking-options">
-              {options.map((option, index) => (
-                <button
-                  ref={(element) => {
-                    optionRefs.current[index] = element;
-                  }}
-                  type="button"
-                  className="model-option thinking-option"
-                  role="option"
-                  aria-selected={option.value === selected}
-                  tabIndex={index === activeIndex ? 0 : -1}
-                  value={option.value}
-                  key={option.value}
-                  onClick={() => selectOption(index)}
-                  onKeyDown={(event) => {
-                    switch (event.key) {
-                      case "ArrowDown":
-                        event.preventDefault();
-                        moveActiveOption(1);
-                        break;
-                      case "ArrowUp":
-                        event.preventDefault();
-                        moveActiveOption(-1);
-                        break;
-                      case "Home":
-                        event.preventDefault();
-                        setActiveIndex(0);
-                        break;
-                      case "End":
-                        event.preventDefault();
-                        setActiveIndex(options.length - 1);
-                        break;
-                      case "Enter":
-                      case " ":
-                        event.preventDefault();
-                        selectOption(activeIndex);
-                        break;
-                      case "Escape":
-                        event.preventDefault();
-                        closeMenu(true);
-                        break;
-                      default:
-                        if (
-                          event.key.length === 1 &&
-                          !event.altKey &&
-                          !event.ctrlKey &&
-                          !event.metaKey
-                        ) {
-                          event.preventDefault();
-                          typeahead(event.key.toLocaleLowerCase());
-                        }
-                    }
-                  }}
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+            <span>{label}</span>
+            <select
+                className={[
+                    "model-trigger",
+                    "thinking-trigger",
+                    controlClassName,
+                ]
+                    .filter(Boolean)
+                    .join(" ")}
+                value={reconcileThinkingLevel(model, value)}
+                disabled={disabled}
+                onChange={(event) => onChange(event.currentTarget.value)}
+            >
+                {options.map((option) => (
+                    <option value={option.value} key={option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+        </label>
+    );
 }

ui/src/components/components.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { DirectorySidebar } from "./DirectorySidebar";
@@ -199,10 +199,9 @@ describe("multi-session navigation", () => {
 				onCommand={vi.fn()}
 			/>,
 		);
-		const user = userEvent.setup();
-		await user.click(screen.getByRole("button", { name: "Thinking Medium" }));
+		const thinking = screen.getByRole("combobox", { name: "Thinking" });
 		expect(
-			screen
+			within(thinking)
 				.getAllByRole("option")
 				.map((option) => option.getAttribute("value")),
 		).toEqual(["off", "minimal", "low", "medium", "xhigh"]);
@@ -380,29 +379,16 @@ describe("multi-session navigation", () => {
 		await user.type(search, "missing");
 		expect(screen.getByText(/No saved sessions match/)).toBeInTheDocument();
 	});
-	it("focuses search, traps focus, and restores the opener", async () => {
-		const user = userEvent.setup();
-		const opener = document.createElement("button");
-		document.body.append(opener);
-		opener.focus();
+	it("opens a native modal and handles cancellation", () => {
 		const onClose = vi.fn();
-		const { unmount } = render(
-			<SessionPicker sessions={[]} onOpen={vi.fn()} onClose={onClose} />,
-		);
-		const search = screen.getByRole("searchbox", {
-			name: "Search saved sessions",
-		});
-		const close = screen.getByRole("button", { name: "Close" });
-		expect(search).toHaveFocus();
-		await user.keyboard("{Shift>}{Tab}{/Shift}");
-		expect(close).toHaveFocus();
-		await user.keyboard("{Shift>}{Tab}{/Shift}");
-		expect(search).toHaveFocus();
-		await user.keyboard("{Escape}");
+		render(<SessionPicker sessions={[]} onOpen={vi.fn()} onClose={onClose} />);
+		const dialog = screen.getByRole("dialog", { name: "Saved sessions" });
+		expect(dialog).toHaveAttribute("open");
+		expect(
+			screen.getByRole("searchbox", { name: "Search saved sessions" }),
+		).toHaveFocus();
+		fireEvent(dialog, new Event("cancel", { cancelable: true }));
 		expect(onClose).toHaveBeenCalled();
-		unmount();
-		expect(opener).toHaveFocus();
-		document.body.removeChild(opener);
 	});
 	it("labels permission requests with the action and exact details", async () => {
 		const user = userEvent.setup();

ui/src/quick-pane/QuickPane.test.tsx

@@ -254,12 +254,12 @@ describe("QuickPane", () => {
     bridgeMock([defaultModels]);
     const { container } = render(<QuickPane />);
     const model = await preparedTrigger();
-    const thinking = screen.getByRole("button", { name: "Thinking Medium" });
+    const thinking = screen.getByRole("combobox", { name: "Thinking" });
     const close = screen.getByRole("button", { name: "Close Quick Pane" });
 
     for (const control of [model, thinking, close])
       expect(control).toHaveClass("quick-pane-toolbar-control");
-    expect(thinking).toHaveTextContent("Medium");
+    expect(thinking).toHaveValue("medium");
     expect(
       within(container.querySelector(".quick-pane-toolbar")!).queryByRole(
         "button",
@@ -275,7 +275,7 @@ describe("QuickPane", () => {
     const toolbar = container.querySelector(".quick-pane-toolbar")!;
     const controls = [
       await preparedTrigger(),
-      screen.getByRole("button", { name: "Thinking Medium" }),
+      screen.getByRole("combobox", { name: "Thinking" }),
       screen.getByRole("button", { name: "Close Quick Pane" }),
     ];
 
@@ -296,9 +296,7 @@ describe("QuickPane", () => {
     fireEvent.pointerDown(
       screen.getByRole("button", { name: "Close Quick Pane" }),
     );
-    fireEvent.pointerDown(
-      screen.getByRole("button", { name: "Thinking Medium" }),
-    );
+    fireEvent.pointerDown(screen.getByRole("combobox", { name: "Thinking" }));
     expect(mocks.startDragging).toHaveBeenCalledTimes(1);
   });
 
@@ -449,9 +447,9 @@ describe("QuickPane", () => {
     });
     render(<QuickPane />);
     await preparedTrigger();
-    expect(
-      screen.getByRole("button", { name: "Thinking High" }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("combobox", { name: "Thinking" })).toHaveValue(
+      "high",
+    );
     await ask("Inspect");
     await waitFor(() =>
       expect(mocks.invoke).toHaveBeenCalledWith("set_thinking_level", {
@@ -481,14 +479,13 @@ describe("QuickPane", () => {
     );
     render(<QuickPane />);
     await preparedTrigger();
-    const thinking = screen.getByRole("button", { name: "Thinking Off" });
-    await userEvent.click(thinking);
+    const thinking = screen.getByRole("combobox", { name: "Thinking" });
     expect(
-      within(screen.getByRole("listbox", { name: "Thinking options" }))
+      within(thinking)
         .getAllByRole("option")
         .map((option) => option.textContent),
     ).toEqual(["Off", "High"]);
-    await userEvent.click(screen.getByRole("option", { name: "High" }));
+    fireEvent.change(thinking, { target: { value: "high" } });
     await ask("Inspect");
     await waitFor(() =>
       expect(mocks.invoke).toHaveBeenCalledWith("set_thinking_level", {
@@ -498,7 +495,7 @@ describe("QuickPane", () => {
     );
   });
 
-  it("closes thinking menu while Ctrl+N replaces chat", async () => {
+  it("disables thinking selection while Ctrl+N replaces chat", async () => {
     const closing = deferred<void>();
     const tracker = bridgeMock([defaultModels, defaultModels]);
     const baseImplementation = mocks.invoke.getMockImplementation();
@@ -510,17 +507,10 @@ describe("QuickPane", () => {
     );
     render(<QuickPane />);
     await preparedTrigger();
-    const thinking = screen.getByRole("button", { name: "Thinking Medium" });
-    await userEvent.click(thinking);
-    expect(
-      screen.getByRole("listbox", { name: "Thinking options" }),
-    ).toBeInTheDocument();
+    const thinking = screen.getByRole("combobox", { name: "Thinking" });
 
     fireEvent.keyDown(window, { key: "n", ctrlKey: true, cancelable: true });
     await waitFor(() => expect(thinking).toBeDisabled());
-    expect(
-      screen.queryByRole("listbox", { name: "Thinking options" }),
-    ).toBeNull();
 
     await act(async () => closing.resolve());
     await waitFor(() => expect(tracker.runtimeCount()).toBe(2));

ui/src/quick-pane/QuickPane.tsx

@@ -1179,7 +1179,6 @@ export default function QuickPane() {
           <ThinkingSelector
             className="quick-pane-thinking"
             controlClassName="quick-pane-toolbar-control"
-            placement="down"
             model={selectedCatalogModel}
             value={thinkingLevel}
             disabled={catalogOverlayActive || runActive || chatReplacing}

ui/src/quick-pane/quick-pane.css

@@ -533,16 +533,10 @@ body {
   font-size: 12px;
 }
 
-.quick-pane-exchange .extension-backdrop,
 .quick-pane-exchange .extension {
-  position: static;
-  display: block;
+  width: min(400px, calc(100cqw - 24px));
+  max-height: calc(100cqh - 48px);
   padding: 7px 9px;
-  background: transparent;
-}
-
-.quick-pane-exchange .extension-backdrop {
-  flex: 0 0 auto;
   border: 1px solid #65533e;
   border-radius: 7px;
   background: #302b25;

ui/src/test-setup.ts

@@ -1,4 +1,14 @@
 import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 import { afterEach } from "vitest";
+
+if (!HTMLDialogElement.prototype.showModal) {
+	HTMLDialogElement.prototype.showModal = function showModal() {
+		this.open = true;
+	};
+	HTMLDialogElement.prototype.close = function close() {
+		this.open = false;
+	};
+}
+
 afterEach(cleanup);

ui/src/thinking-parity.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ConversationWorkspace } from "./components/ConversationWorkspace";
 import QuickPane from "./quick-pane/QuickPane";
@@ -128,18 +127,12 @@ describe("thinking selector parity", () => {
     "matches Pi %s semantics in Conversation Workspace and Quick Pane",
     async (_name, metadata, expected) => {
       renderSurfaces({ provider: "provider", id: "model", ...metadata });
-      const user = userEvent.setup();
-      const triggers = await screen.findAllByRole("button", {
-        name: /Thinking /,
+      const selectors = await screen.findAllByRole("combobox", {
+        name: "Thinking",
       });
-      expect(triggers).toHaveLength(2);
-      for (const trigger of triggers) {
-        await user.click(trigger);
-        expect(options(screen.getByRole("listbox", { name: "Thinking options" }))).toEqual(
-          expected,
-        );
-        await user.click(trigger);
-      }
+      expect(selectors).toHaveLength(2);
+      for (const selector of selectors)
+        expect(options(selector)).toEqual(expected);
     },
   );
 });

ui/src/workspace/useWorkspace.test.tsx

@@ -10,9 +10,6 @@ const mocks = vi.hoisted(() => ({
 
 vi.mock("@tauri-apps/api/core", () => ({ invoke: mocks.invoke }));
 vi.mock("@tauri-apps/api/event", () => ({ listen: mocks.listen }));
-vi.mock("@tauri-apps/api/window", () => ({
-	getCurrentWindow: () => ({}),
-}));
 vi.mock("./persistence", () => ({
 	legacyPreferences: () => ({}),
 	loadPresentation: async () => ({

ui/src/workspace/useWorkspace.ts

@@ -1,6 +1,5 @@
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
-import { getCurrentWindow } from "@tauri-apps/api/window";
 import { useCallback, useEffect, useReducer, useRef } from "react";
 import { initialWorkspaceState, workspaceReducer } from "./reducer";
 import {
@@ -289,7 +288,6 @@ export function useWorkspace() {
 					});
 			}
 		})();
-		const appWindow = getCurrentWindow();
 		const visibility = () =>
 			dispatch({
 				type: "setWindowActive",
@@ -310,7 +308,6 @@ export function useWorkspace() {
 			window.removeEventListener("blur", visibility);
 			document.removeEventListener("visibilitychange", visibility);
 			Object.values(timers.current).forEach(clearTimeout);
-			void appWindow;
 		};
 	}, [consumePromotedRuntime, refresh, scheduleSnapshot]);