@@ -281,11 +281,16 @@ host, and `chrome.storage.local` in that one browser.
 
 1. Switch the surface on in WebUI Settings. That provisions the installation key
    and mints a fresh pairing credential.
-2. Open the key in Settings (**查看密钥** for Edge or Chrome). This is the one
-   place the key leaves the OS secure store, and it is the person's own tab; the
-   key's purpose is to defeat a local *process*, not the person.
-3. Open the extension's options page (`options.html`, wired as `options_ui` in
-   the manifest) and paste it.
+2. Open the key in Settings (**查看密钥** for Edge or Chrome). A dialog opens
+   with the key, its fingerprint and a copy action. This is the one place the
+   key leaves the OS secure store, and it is the person's own tab; the key's
+   purpose is to defeat a local *process*, not the person.
+3. Paste it into the extension's options page (`options.html`, wired as
+   `options_ui` in the manifest). The dialog links to that page and opens it
+   in a new tab: the host names it from the extension's own identity, which it
+   learns from the peer's origin, so the page is the right one rather than one
+   the person has to find. A host that has not seen the extension yet cannot
+   name the page, and says so instead of linking somewhere else.
 4. The extension stores it and never displays it again in full — the options page
    reads it back through a status type that carries a fingerprint and no key
    field at all.
 
@@ -132,6 +132,20 @@ export type WebuiBrowserInstallationKeyResult =
       readonly keyId: string;
       readonly key: string;
       readonly fingerprint: string;
+      /**
+       * The extension this key belongs to, when the host knows it.
+       *
+       * The person pastes the key into that extension's own page, so naming it
+       * is what keeps the two halves of the pairing together.
+       */
+      readonly extensionId?: string;
+      /**
+       * The extension's options page, where the key is pasted.
+       *
+       * Absent when the host has not seen the extension: the page cannot be
+       * named for an extension whose identity the host does not know.
+       */
+      readonly optionsUrl?: string;
     };
 
 /** What `sendBrowserInput` answers. */
 
@@ -31,6 +31,10 @@
 
 import { useCallback, useState, type ReactElement } from "react";
 import { WebuiTextInput } from "../../../ui/field.js";
+import { WebuiDialog } from "../../../ui/dialog.js";
+import { WebuiStack } from "../../../ui/layout-primitives.js";
+import { useWebuiBrowserCapabilities } from "../../../bindings/browser-capabilities.js";
+import { useWebuiToast } from "../../../ui/toast.js";
 import {
   WEBUI_BROWSER_AUTHORIZATION_DEFAULT,
   type WebuiBrowserAuthorization,
@@ -43,7 +47,7 @@ import type {
 } from "../contracts/browser-port.js";
 import { ToggleSwitch } from "../../../ui/ToggleSwitch.js";
 import { SettingsRow, SettingsSection } from "../../../ui/settings-layout.js";
-import { WebuiButton } from "../../../ui/button.js";
+import { WebuiButton, WebuiButtonLink } from "../../../ui/button.js";
 
 const SURFACE_ROWS: readonly { readonly surface: WebuiBrowserSurface; readonly title: string; readonly description: string }[] = [
   {
@@ -145,8 +149,17 @@ export interface BrowserInstallationKeyProps {
 
 interface RevealedKey {
   readonly surface: WebuiBridgeBrowserSurface;
+  /** The browser's name, so the dialog says which browser it is about. */
+  readonly title: string;
   readonly key: string;
   readonly fingerprint: string;
+  /**
+   * The extension's own page, where the key is pasted.
+   *
+   * Absent when the host has not seen the extension: the page cannot be named
+   * for an extension whose identity the host does not know.
+   */
+  readonly optionsUrl?: string;
 }
 
 const BRIDGE_SURFACES = [
@@ -155,7 +168,7 @@ const BRIDGE_SURFACES = [
 ] as const satisfies readonly { readonly surface: WebuiBridgeBrowserSurface; readonly title: string }[];
 
 /**
- * The installation key, shown once so the person can paste it into the
+ * The installation key, shown in a dialog so the person can paste it into the
  * extension.
  *
  * This is the one place the key leaves the host's OS secure store, and it is
@@ -167,6 +180,7 @@ export function BrowserInstallationKey({ readKey }: BrowserInstallationKeyProps)
   const [revealed, setRevealed] = useState<RevealedKey | undefined>();
   const [notProvisioned, setNotProvisioned] = useState<readonly WebuiBridgeBrowserSurface[]>([]);
   const [busy, setBusy] = useState(false);
+  const toast = useWebuiToast();
 
   const reveal = useCallback(
     async (surface: WebuiBridgeBrowserSurface): Promise<void> => {
@@ -175,26 +189,37 @@ export function BrowserInstallationKey({ readKey }: BrowserInstallationKeyProps)
       try {
         const result = await readKey({ surface });
         if (result.present) {
-          setRevealed({ surface: result.surface, key: result.key, fingerprint: result.fingerprint });
+          setRevealed({
+            surface: result.surface,
+            title:
+              BRIDGE_SURFACES.find((entry) => entry.surface === result.surface)?.title ??
+              result.surface,
+            key: result.key,
+            fingerprint: result.fingerprint,
+            ...(result.optionsUrl ? { optionsUrl: result.optionsUrl } : {}),
+          });
           setNotProvisioned((prior) => prior.filter((entry) => entry !== surface));
           return;
         }
         // Not an error: the surface has never been switched on, so there is
         // nothing provisioned and nothing to paste.
         setNotProvisioned((prior) => (prior.includes(surface) ? prior : [...prior, surface]));
-        setRevealed((prior) => (prior?.surface === surface ? undefined : prior));
+      } catch (reason) {
+        // A read that failed carries the host's reason, and it is the only
+        // thing the person can act on.
+        toast.error(reason instanceof Error ? reason.message : String(reason));
       } finally {
         setBusy(false);
       }
     },
-    [readKey],
+    [readKey, toast],
   );
 
   return (
     <SettingsSection
       title="浏览器桥接安装密钥"
       testId="browser-installation-key"
-      hint="扩展需要这把密钥才能完成配对。打开对应浏览器的开关后在此查看，并粘贴到扩展的选项页：浏览器扩展管理页（edge://extensions 或 chrome://extensions）里找到「MiniMax Code Browser Bridge」，点「扩展选项」。"
+      hint="扩展需要这把密钥才能完成配对。打开对应浏览器的开关后在此查看密钥，复制到扩展的选项页即可。"
     >
       {BRIDGE_SURFACES.map(({ surface, title }) => (
         <SettingsRow
@@ -203,15 +228,13 @@ export function BrowserInstallationKey({ readKey }: BrowserInstallationKeyProps)
           description={
             notProvisioned.includes(surface)
               ? "该浏览器尚未启用，没有可复制的密钥。"
-              : revealed?.surface === surface
-                ? `指纹 ${revealed.fingerprint}`
-                : "查看并复制这把密钥。"
+              : "查看并复制这把密钥。"
           }
           testId={`browser-installation-key-${surface}-row`}
         >
           <WebuiButton
-            variant="quiet-secondary"
-            size="inline"
+            variant="secondary"
+            size="compact"
             data-testid={`browser-installation-key-${surface}-reveal`}
             disabled={!readKey || busy}
             onClick={() => {
@@ -223,24 +246,118 @@ export function BrowserInstallationKey({ readKey }: BrowserInstallationKeyProps)
         </SettingsRow>
       ))}
       {revealed ? (
-        <SettingsRow
-          title="复制用密钥"
-          description="粘贴到扩展的选项页后即可配对。密钥只保存在这台浏览器的本地存储中。"
-          testId="browser-installation-key-value-row"
-        >
+        <BrowserInstallationKeyDialog
+          revealed={revealed}
+          onClose={() => setRevealed(undefined)}
+        />
+      ) : null}
+    </SettingsSection>
+  );
+}
+
+/**
+ * The key, in a dialog, with the extension's page beside it.
+ *
+ * The key is pasted into the extension's own options page, so the dialog holds
+ * the two halves of the pairing together: the fingerprint — which that page
+ * shows back — and the key itself, with a copy action and a link to the page.
+ * The link opens in a new tab because the person has to paste the key into
+ * the page the link opens, and the dialog is where they come back to.
+ */
+function BrowserInstallationKeyDialog({
+  revealed,
+  onClose,
+}: {
+  readonly revealed: RevealedKey;
+  readonly onClose: () => void;
+}): ReactElement {
+  const { dom } = useWebuiBrowserCapabilities();
+  const toast = useWebuiToast();
+
+  const copy = useCallback(async (): Promise<void> => {
+    try {
+      if (typeof navigator === "undefined" || !navigator.clipboard) {
+        // The clipboard can be absent, and the key is still the person's to
+        // copy: the fallback copies it through a hidden field.
+        dom.copyTextFallback(revealed.key);
+      } else {
+        await navigator.clipboard.writeText(revealed.key);
+      }
+      toast.success("安装密钥已复制。");
+    } catch {
+      toast.error("复制失败，请手动选中密钥复制。");
+    }
+  }, [dom, revealed.key, toast]);
+
+  return (
+    <WebuiDialog
+      id={`browser-installation-key-${revealed.surface}`}
+      open
+      title={`${revealed.title} 安装密钥`}
+      onClose={onClose}
+      width="compact"
+      portalTarget={dom.portalTarget()}
+      testId="browser-installation-key-dialog"
+    >
+      <WebuiStack gap="medium">
+        <div className="flex flex-col gap-1">
+          <span className="text-[13px] text-text_default_secondary">指纹</span>
           <WebuiTextInput
             appearance="bare"
             controlSize="dense"
             textSize="small"
             textTone="secondary"
-            className="w-auto font-mono"
+            className="w-full font-mono"
+            readOnly
+            data-testid="browser-installation-key-fingerprint"
+            value={revealed.fingerprint}
+            aria-label={`${revealed.surface} installation key fingerprint`}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-[13px] text-text_default_secondary">安装密钥</span>
+          <WebuiTextInput
+            appearance="bare"
+            controlSize="dense"
+            textSize="small"
+            textTone="secondary"
+            className="w-full font-mono"
             readOnly
             data-testid="browser-installation-key-value"
             value={revealed.key}
             aria-label={`${revealed.surface} installation key`}
           />
-        </SettingsRow>
-      ) : null}
-    </SettingsSection>
+          <WebuiButton
+            variant="secondary"
+            size="compact"
+            className="w-fit"
+            data-testid="browser-installation-key-copy"
+            onClick={() => {
+              void copy();
+            }}
+          >
+            复制密钥
+          </WebuiButton>
+        </div>
+        {revealed.optionsUrl ? (
+          <WebuiButtonLink
+            href={revealed.optionsUrl}
+            target="_blank"
+            rel="noreferrer"
+            variant="quiet-secondary"
+            size="inline"
+            className="w-fit"
+            data-testid="browser-installation-key-options-link"
+          >
+            打开扩展选项页
+          </WebuiButtonLink>
+        ) : (
+          <p className="text-[13px] text-text_default_secondary">
+            这个扩展还没有连接过这台主机，主机不知道它的选项页地址。请在浏览器的扩展管理页里找到「MiniMax Code Browser
+            Bridge」，点「扩展选项」后粘贴密钥。
+          </p>
+        )}
+      </WebuiStack>
+    </WebuiDialog>
   );
 }
@@ -112,8 +112,8 @@ function BrowserExtensionPackage({
             download
             target="_blank"
             rel="noreferrer"
-            variant="quiet-secondary"
-            size="inline"
+            variant="secondary"
+            size="compact"
             data-testid="browser-extension-package-download"
           >
             下载最新扩展包
 
@@ -44,10 +44,11 @@ import {
   type WebuiBrowserTargetState,
   type WebuiBridgeBrowserSurface,
 } from "../../shared/contracts/browser.js";
-import type {
-  WebuiBrowserBridgeImageFrame,
-  WebuiBrowserBridgeInstallationKeyView,
-  WebuiBrowserBridgeTarget,
+import {
+  webuiBrowserBridgeExtensionOptionsUrl,
+  type WebuiBrowserBridgeImageFrame,
+  type WebuiBrowserBridgeInstallationKeyView,
+  type WebuiBrowserBridgeTarget,
 } from "../../shared/contracts/browser-bridge.js";
 import {
   createPlatformSecureCredentialStore,
@@ -254,6 +255,14 @@ interface BridgeSurfaceState {
    * happen to be in.
    */
   surface: WebuiBridgeBrowserSurface | undefined;
+  /**
+   * The identity the peer connected with, when it has one.
+   *
+   * It is the extension's own id — the one its origin carries — and it is what
+   * lets the Settings page name the extension's own page, where the
+   * installation key is pasted.
+   */
+  extensionId: string | undefined;
   readonly session: BrowserBridgeSession;
   /** The instance identity, from the extension's `hello` frame. */
   browserId: string;
@@ -490,7 +499,38 @@ async readInstallationKey(
   ): Promise<WebuiBrowserBridgeInstallationKeyView | undefined> {
     const pairing = this.pairings.get(surface);
     if (!pairing) return undefined;
-    return pairing.installationKeyForDisplay();
+    const view = await pairing.installationKeyForDisplay();
+    if (!view) return undefined;
+    const page = this.#extensionPage(surface);
+    return page
+      ? { ...view, extensionId: page.extensionId, optionsUrl: page.optionsUrl }
+      : view;
+  }
+
+  /**
+   * The extension's own page for one surface, when this host knows it.
+   *
+   * The live session's identity comes first: it is the extension the person
+   * is working with right now. The identities this host has proved come
+   * next, and the ones an operator configured last — the last two only when
+   * there is exactly one of them, because a page named for the wrong
+   * extension is worse than no page at all.
+   */
+  #extensionPage(
+    surface: WebuiBridgeBrowserSurface,
+  ): { readonly extensionId: string; readonly optionsUrl: string } | undefined {
+    const live = this.#surfaces.get(surface)?.extensionId;
+    const trusted = [...this.#trusted.ids(surface)];
+    const configured = [...(this.#allowedIds.get(surface) ?? [])];
+    const extensionId =
+      live ??
+      (trusted.length === 1 ? trusted[0] : undefined) ??
+      (configured.length === 1 ? configured[0] : undefined);
+    if (!extensionId) return undefined;
+    return {
+      extensionId,
+      optionsUrl: webuiBrowserBridgeExtensionOptionsUrl(extensionId),
+    };
   }
 
   /**
@@ -586,6 +626,7 @@ async readInstallationKey(
     });
     const state: BridgeSurfaceState = {
       surface: undefined,
+      extensionId: undefined,
       session,
       browserId: "",
       live: false,
@@ -632,6 +673,9 @@ async readInstallationKey(
         return;
       }
       state.surface = surface;
+      // The identity the peer connected with. It is what lets the Settings
+      // page link to the extension's own page, where the key is pasted.
+      state.extensionId = extensionId;
       this.#surfaces.set(surface, state);
       state.live = true;
       // The peer is admitted, so it proved the installation key or a
 
@@ -245,6 +245,10 @@ export function createBrowserHandlerEntries(
               keyId: view.keyId,
               key: view.key,
               fingerprint: view.fingerprint,
+              // The extension the key belongs to, and the page it is pasted
+              // on. The person does not have to match the two by hand.
+              ...(view.extensionId ? { extensionId: view.extensionId } : {}),
+              ...(view.optionsUrl ? { optionsUrl: view.optionsUrl } : {}),
             }
           : {
               present: false as const,