diff --git a/frontend/src/components/AgentManageRow.tsx b/frontend/src/components/AgentManageRow.tsx
index 7f646f91..cb2614d2 100644
--- a/frontend/src/components/AgentManageRow.tsx
+++ b/frontend/src/components/AgentManageRow.tsx
@@ -9,6 +9,7 @@ import { sourceTranslate, type Translate, useI18n } from "../i18n";
 import { taskCanceller, taskKey, updateTaskRoute, useTaskCenter, useTaskRoute } from "../state/TaskCenterContext";
 import type { AgentCatalogItem, AgentStatus, ProfileSummary, StatusResponse } from "../types/api";
 import { AgentIcon, agentTagline } from "./icons/agents";
+import { ModalDialog } from "./ModalDialog";
 
 type Providers = StatusResponse["providers"];
 
@@ -248,7 +249,7 @@ export function AgentManageRow({
         </div>
       </div>
       {directoryDialog ? (
-        <dialog className="transfer-password-dialog" open>
+        <ModalDialog className="transfer-password-dialog" label={t("选择启动目录")} onDismiss={() => setDirectoryDialog(false)}>
           <form onSubmit={(event) => { event.preventDefault(); void confirmLaunch(); }}>
             <h2>{t("选择启动目录")}</h2>
             <label className="launch-directory-label" htmlFor={`launch-directory-${agentId}`}>{t("启动目录")}</label>
@@ -259,7 +260,7 @@ export function AgentManageRow({
             <label className="launch-remember-row"><input type="checkbox" checked={rememberDirectory} onChange={(event) => setRememberDirectory(event.target.checked)} /><span>{t("记住此 Agent 的目录")}</span></label>
             <footer><button className="button button-secondary" type="button" onClick={() => setDirectoryDialog(false)}>{t("取消")}</button><button className="button button-primary" type="submit">{t("启动")}</button></footer>
           </form>
-        </dialog>
+        </ModalDialog>
       ) : null}
       <div className="agent-manage-actions">
         {/* Always in the row, not only when the Agent cannot launch. Configuring
diff --git a/frontend/src/components/ModalDialog.test.tsx b/frontend/src/components/ModalDialog.test.tsx
new file mode 100644
index 00000000..8c28a412
--- /dev/null
+++ b/frontend/src/components/ModalDialog.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ModalDialog } from "./ModalDialog";
+
+describe("ModalDialog", () => {
+  it("opens on the top layer rather than in document flow", () => {
+    // The regression this guards: `<dialog open>` is visible but not modal, so
+    // it stays at its static position inside whichever row rendered it. Only
+    // showModal() promotes the element to the top layer, so assert the call
+    // itself -- jsdom has no layout, and the position it produces is what the
+    // E2E suite checks.
+    const showModal = vi.spyOn(window.HTMLDialogElement.prototype, "showModal");
+    render(<ModalDialog className="c"><p>body</p></ModalDialog>);
+    expect(showModal).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole("dialog")).toHaveAttribute("open");
+    showModal.mockRestore();
+  });
+
+  it("labels the dialog so it is not announced as an unnamed region", () => {
+    render(<ModalDialog label="选择启动目录"><p>body</p></ModalDialog>);
+    expect(screen.getByRole("dialog", { name: "选择启动目录" })).toBeTruthy();
+  });
+
+  it("reports Esc to the caller instead of closing behind its state", () => {
+    // The caller's state decides whether the modal renders. If Esc closed the
+    // element directly, that state would still say "open" while the dialog was
+    // gone -- unreachable, and impossible to reopen.
+    const onDismiss = vi.fn();
+    render(<ModalDialog onDismiss={onDismiss}><p>body</p></ModalDialog>);
+    const dialog = screen.getByRole("dialog") as HTMLDialogElement;
+    dialog.requestClose();
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(dialog).toHaveAttribute("open");
+  });
+
+  it("closes the element when the caller stops rendering it", async () => {
+    function Host() {
+      const [open, setOpen] = useState(true);
+      return (
+        <>
+          <button onClick={() => setOpen(false)}>close</button>
+          {open ? <ModalDialog onDismiss={() => setOpen(false)}><p>body</p></ModalDialog> : null}
+        </>
+      );
+    }
+    render(<Host />);
+    expect(screen.getByRole("dialog")).toBeTruthy();
+    await userEvent.click(screen.getByRole("button", { name: "close" }));
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+});
diff --git a/frontend/src/components/ModalDialog.tsx b/frontend/src/components/ModalDialog.tsx
new file mode 100644
index 00000000..55477dd5
--- /dev/null
+++ b/frontend/src/components/ModalDialog.tsx
@@ -0,0 +1,62 @@
+import { useLayoutEffect, useRef, type PropsWithChildren } from "react";
+
+/**
+ * A modal that renders on the browser's top layer.
+ *
+ * The `open` attribute alone does not do this. It only makes a <dialog>
+ * visible, and a visible non-modal dialog stays in normal document flow at its
+ * static position: no ::backdrop, no focus containment, no Esc. Every modal
+ * here is authored inside the row or page that owns its state, so under
+ * `open` the launch dialog rendered wherever its Agent row happened to sit --
+ * far down a long list, adding its own height to the page instead of covering
+ * the window. `.app-window` also sets `overflow: hidden`, which clips anything
+ * that tries to escape by positioning alone.
+ *
+ * showModal() is what promotes the element to the top layer, above every
+ * stacking context and outside the clip. It also brings the parts we were
+ * otherwise hand-rolling or missing: a real ::backdrop, focus trapped inside,
+ * and Esc. Nothing needs a z-index, so a modal can no longer tie with the task
+ * centre's and lose the tie to DOM order.
+ */
+export function ModalDialog({ className, label, onDismiss, children }: PropsWithChildren<{
+  className?: string;
+  label?: string;
+  /**
+   * Called when the user asks to close: Esc, or the backdrop-cancel the
+   * platform may add. Callers own the state that renders this component, so
+   * they close it by unmounting rather than by mutating the element.
+   */
+  onDismiss?: () => void;
+}>) {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  // Layout, not passive: a plain effect leaves one frame in which the element is
+  // in the DOM but not yet on the top layer, so it paints once at its static
+  // position -- the very flash this component exists to remove -- and is not yet
+  // reachable as a dialog.
+  useLayoutEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    dialog.showModal();
+    // Symmetric with the call above so a remount cannot open an already-open
+    // dialog. React 19 double-invokes effects under StrictMode.
+    return () => dialog.close();
+  }, []);
+
+  return (
+    <dialog
+      ref={ref}
+      className={className}
+      aria-label={label}
+      // The state that renders this component is the single source of truth, so
+      // Esc must not close the element behind React's back -- that would leave
+      // a dialog the caller still believes is open, invisible and unreachable.
+      onCancel={(event) => {
+        event.preventDefault();
+        onDismiss?.();
+      }}
+    >
+      {children}
+    </dialog>
+  );
+}
diff --git a/frontend/src/pages/MCPPage.tsx b/frontend/src/pages/MCPPage.tsx
index 80292bf0..5476170c 100644
--- a/frontend/src/pages/MCPPage.tsx
+++ b/frontend/src/pages/MCPPage.tsx
@@ -8,6 +8,7 @@ import { AgentSummaryBar } from "../components/AgentSummaryBar";
 import { AgentTargetGroup } from "../components/AgentTargetGroup";
 import { EmptyState } from "../components/EmptyState";
 import { ManagementSearch } from "../components/ManagementSearch";
+import { ModalDialog } from "../components/ModalDialog";
 import { PageScaffold } from "../components/PageScaffold";
 import { SelectField } from "../components/SelectField";
 import { useWizard } from "../state/WizardContext";
@@ -200,6 +201,6 @@ export function MCPPage() {
       {rows.length ? <div className="management-toolbar"><ManagementSearch value={query} onValueChange={setQuery} placeholder={t("搜索 MCP 服务器")} /><AgentSummaryBar agents={eligibleAgents} counts={summaryCounts} total={summaryRows.length} onToggleAll={bulkToggle} labels={agentLabels} /></div> : null}
       {!rows.length ? <EmptyState icon={Server} title={t("尚未发现 MCP 服务器")} hint={t("点击新增来登记第一个 MCP 服务器")} /> : !visibleRows.length ? <EmptyState icon={Server} title={t("没有匹配的 MCP 服务器")} hint={t("换一个关键词，或清空搜索")} /> : <div className="mcp-table-wrap"><table className="mcp-table"><thead><tr><th>{t("服务器")}</th><th>{t("传输")}</th><th>{t("同步目标")}</th><th>{t("状态")}</th><th /></tr></thead><tbody>{visibleRows.map((row) => { const isDeleted = Boolean(deleted[row.id]); return <tr key={row.id} className={isDeleted ? "mcp-row-deleted" : undefined}><td><strong>{row.id}</strong></td><td>{row.type}</td><td><AgentTargetGroup agents={eligibleAgents} selected={selectedFor(row)} disabled={isDeleted} labels={agentLabels} onToggle={(agent, checked) => setTargets((all) => { const current = new Set(all[row.id] ?? agentsFor(row)); checked ? current.add(agent) : current.delete(agent); return { ...all, [row.id]: [...current] }; })} /></td><td><span className={isDeleted ? "status-badge status-warning" : row.conflict ? "status-badge status-warning" : mcpRowPending(row.id, draft, targets) ? "status-badge status-info" : "status-badge status-success"}>{isDeleted ? t("待删除") : row.conflict ? t("冲突") : mcpRowPending(row.id, draft, targets) ? t("待应用") : t("已同步")}</span>{row.has_secrets ? <small className="mcp-secret-note">{t("包含秘密字段")}</small> : null}</td><td className="mcp-row-actions"><button className="icon-button row-action" disabled={isDeleted} onClick={() => void openEdit(row)} title={t("编辑")}><Edit3 size={16} /></button><button className={`icon-button row-action${isDeleted ? " is-restore" : " is-danger"}`} onClick={() => setDeleted((all) => ({ ...all, [row.id]: !isDeleted }))} title={isDeleted ? t("恢复") : t("删除")}>{isDeleted ? <RotateCcw size={16} /> : <Trash2 size={16} />}</button></td></tr>; })}</tbody></table></div>}
     </section>
-    {editing !== null ? <div className="mcp-modal-backdrop"><div className="mcp-modal" role="dialog" aria-modal="true"><header><h2>{editing ? t("编辑 MCP 服务器") : t("新增 MCP 服务器")}</h2><button className="icon-button" onClick={() => setEditing(null)} title={t("关闭")}><X size={18} /></button></header><label>{t("服务器 ID")}<input value={editing} onChange={(event) => setEditing(event.target.value)} disabled={Boolean(draft[editing])} /></label><div className="mcp-transport-field"><span>{t("传输")}</span><SelectField value={form.type ?? "stdio"} options={[{ value: "stdio", label: "stdio" }, { value: "http", label: "http" }, { value: "sse", label: "sse" }]} onChange={(type) => { const next = changeMCPTransport(form, type); setForm(next); setCommandLine(type === "stdio" ? formatStdioCommandLine(next) : ""); setAdvancedJSON(JSON.stringify(next, null, 2)); }} label={t("传输")} /></div>{form.type === "stdio" ? <label>{t("命令")}<input value={commandLine} onChange={(event) => updateCommandLine(event.target.value)} autoComplete="off" autoCapitalize="none" autoCorrect="off" spellCheck={false} /></label> : <label>{t("URL")}<input value={form.url ?? ""} onChange={(event) => { const next = { ...form, url: event.target.value }; setForm(next); setAdvancedJSON(JSON.stringify(next, null, 2)); }} autoComplete="off" autoCapitalize="none" autoCorrect="off" spellCheck={false} /></label>}<label>{t("高级 JSON")}<textarea value={advancedJSON} onChange={(event) => updateAdvancedJSON(event.target.value)} onBlur={finishAdvancedJSON} rows={10} /></label><footer><button className="button" onClick={() => setEditing(null)}><X size={16} />{t("取消")}</button><button className="button button-primary" onClick={saveDraft}><Save size={16} />{t("保存草稿")}</button></footer></div></div> : null}
+    {editing !== null ? <ModalDialog className="mcp-modal" label={editing ? t("编辑 MCP 服务器") : t("新增 MCP 服务器")} onDismiss={() => setEditing(null)}><header><h2>{editing ? t("编辑 MCP 服务器") : t("新增 MCP 服务器")}</h2><button className="icon-button" onClick={() => setEditing(null)} title={t("关闭")}><X size={18} /></button></header><label>{t("服务器 ID")}<input value={editing} onChange={(event) => setEditing(event.target.value)} disabled={Boolean(draft[editing])} /></label><div className="mcp-transport-field"><span>{t("传输")}</span><SelectField value={form.type ?? "stdio"} options={[{ value: "stdio", label: "stdio" }, { value: "http", label: "http" }, { value: "sse", label: "sse" }]} onChange={(type) => { const next = changeMCPTransport(form, type); setForm(next); setCommandLine(type === "stdio" ? formatStdioCommandLine(next) : ""); setAdvancedJSON(JSON.stringify(next, null, 2)); }} label={t("传输")} /></div>{form.type === "stdio" ? <label>{t("命令")}<input value={commandLine} onChange={(event) => updateCommandLine(event.target.value)} autoComplete="off" autoCapitalize="none" autoCorrect="off" spellCheck={false} /></label> : <label>{t("URL")}<input value={form.url ?? ""} onChange={(event) => { const next = { ...form, url: event.target.value }; setForm(next); setAdvancedJSON(JSON.stringify(next, null, 2)); }} autoComplete="off" autoCapitalize="none" autoCorrect="off" spellCheck={false} /></label>}<label>{t("高级 JSON")}<textarea value={advancedJSON} onChange={(event) => updateAdvancedJSON(event.target.value)} onBlur={finishAdvancedJSON} rows={10} /></label><footer><button className="button" onClick={() => setEditing(null)}><X size={16} />{t("取消")}</button><button className="button button-primary" onClick={saveDraft}><Save size={16} />{t("保存草稿")}</button></footer></ModalDialog> : null}
   </PageScaffold>;
 }
diff --git a/frontend/src/pages/SkillsPage.tsx b/frontend/src/pages/SkillsPage.tsx
index b3af994b..ecada6ce 100644
--- a/frontend/src/pages/SkillsPage.tsx
+++ b/frontend/src/pages/SkillsPage.tsx
@@ -7,6 +7,7 @@ import { AgentSummaryBar } from "../components/AgentSummaryBar";
 import { AgentTargetGroup } from "../components/AgentTargetGroup";
 import { EmptyState } from "../components/EmptyState";
 import { ManagementSearch } from "../components/ManagementSearch";
+import { ModalDialog } from "../components/ModalDialog";
 import { PageScaffold } from "../components/PageScaffold";
 import { useI18n } from "../i18n";
 import { useWizard } from "../state/WizardContext";
@@ -154,6 +155,6 @@ export function SkillsPage() {
       {rows.length ? <div className="management-toolbar"><ManagementSearch value={query} onValueChange={setQuery} placeholder={t("搜索 Skills")} /><AgentSummaryBar agents={eligible} counts={summaryCounts} total={summaryRows.length} onToggleAll={bulkToggle} disabled={busy} labels={agentLabels} /></div> : null}
       {!rows.length ? <EmptyState icon={Sparkles} title={t("没有发现 Skills")} hint={t("通过导入文件夹或导入 ZIP 添加第一个 Skill")} /> : !visibleRows.length ? <EmptyState icon={Sparkles} title={t("没有匹配的 Skills")} hint={t("换一个关键词，或清空搜索")} /> : <div className="mcp-table-wrap"><table className="mcp-table"><thead><tr><th>{t("名称")}</th><th>{t("详情")}</th><th>{t("状态")}</th><th>{t("选择目标 Agent")}</th><th /></tr></thead><tbody>{visibleRows.map((row) => { const candidate = candidateMap.get(row.id); const hash = candidate?.hash ?? changes[row.id]?.variant_hash ?? row.variant_hashes?.[0] ?? ""; const detail = row.description || t("暂无详情"); const isDeleted = Boolean(pendingDeletes[row.id]); return <tr key={row.id} className={isDeleted ? "mcp-row-deleted" : undefined}><td className="skills-name-cell"><strong>{row.name || row.id}</strong></td><td className="skills-detail-cell"><span title={detail}>{compactDescription(detail)}</span><small>{row.id}</small></td><td>{isDeleted ? <span className="status-badge status-warning">{t("待删除")}</span> : row.conflict ? <span className="status-badge status-warning">{t("冲突")}</span> : <span className="status-badge status-success">{row.variants} variant</span>}</td><td><AgentTargetGroup agents={eligible} selected={skillSelectedAgents(row, changes)} disabled={!hash || isDeleted || busy} labels={agentLabels} onToggle={(agent, checked) => selectTarget(row.id, hash, agent, checked, row.agents ?? [])} /></td><td className="mcp-row-actions"><button className={`icon-button row-action${isDeleted ? " is-restore" : " is-danger"}`} onClick={() => toggleDelete(row.id, row.agents ?? [])} disabled={busy} title={isDeleted ? t("恢复") : t("删除")}>{isDeleted ? <RotateCcw size={16} /> : <Trash2 size={16} />}</button></td></tr>; })}</tbody></table></div>}
     </section>
-    {previewOpen ? <div className="mcp-modal-backdrop"><div className="mcp-modal skills-import-modal" role="dialog" aria-modal="true"><header><h2>{t("导入预览")}</h2><button className="icon-button" onClick={() => setPreviewOpen(false)} title={t("取消")}><X size={18} /></button></header><p>{t("选择要导入的 Skill 和目标 Agent")}</p>{candidates.map((candidate) => { const change = changes[candidate.id] ?? { id: candidate.id, variant_hash: candidate.hash, targets: [] }; const detail = candidate.description || candidate.hash.slice(0, 12); return <div className="skills-import-row" key={`${candidate.id}-${candidate.hash}`}><label className="skills-import-name"><input type="checkbox" checked={selectedCandidates[candidate.id] ?? false} onChange={(event) => setSelectedCandidates((current) => ({ ...current, [candidate.id]: event.target.checked }))} /><strong>{candidate.name || candidate.id}</strong><small title={detail}>{compactDescription(detail)}</small></label><AgentTargetGroup agents={eligible} selected={change.targets ?? []} disabled={!selectedCandidates[candidate.id]} labels={agentLabels} onToggle={(agent, checked) => selectTarget(candidate.id, candidate.hash, agent, checked)} /></div>; })}<footer><button className="button button-secondary" onClick={() => setPreviewOpen(false)}>{t("取消")}</button><button className="button button-secondary" onClick={confirmImport} disabled={!candidates.some((item) => selectedCandidates[item.id])}>{t("确认导入")}</button><button className="button button-primary" onClick={applyImport} disabled={busy}>{busy ? t("应用中") : t("确认导入并应用")}</button></footer></div></div> : null}
+    {previewOpen ? <ModalDialog className="mcp-modal skills-import-modal" label={t("导入预览")} onDismiss={() => setPreviewOpen(false)}><header><h2>{t("导入预览")}</h2><button className="icon-button" onClick={() => setPreviewOpen(false)} title={t("取消")}><X size={18} /></button></header><p>{t("选择要导入的 Skill 和目标 Agent")}</p>{candidates.map((candidate) => { const change = changes[candidate.id] ?? { id: candidate.id, variant_hash: candidate.hash, targets: [] }; const detail = candidate.description || candidate.hash.slice(0, 12); return <div className="skills-import-row" key={`${candidate.id}-${candidate.hash}`}><label className="skills-import-name"><input type="checkbox" checked={selectedCandidates[candidate.id] ?? false} onChange={(event) => setSelectedCandidates((current) => ({ ...current, [candidate.id]: event.target.checked }))} /><strong>{candidate.name || candidate.id}</strong><small title={detail}>{compactDescription(detail)}</small></label><AgentTargetGroup agents={eligible} selected={change.targets ?? []} disabled={!selectedCandidates[candidate.id]} labels={agentLabels} onToggle={(agent, checked) => selectTarget(candidate.id, candidate.hash, agent, checked)} /></div>; })}<footer><button className="button button-secondary" onClick={() => setPreviewOpen(false)}>{t("取消")}</button><button className="button button-secondary" onClick={confirmImport} disabled={!candidates.some((item) => selectedCandidates[item.id])}>{t("确认导入")}</button><button className="button button-primary" onClick={applyImport} disabled={busy}>{busy ? t("应用中") : t("确认导入并应用")}</button></footer></ModalDialog> : null}
   </PageScaffold>;
 }
diff --git a/frontend/src/pages/TransferPage.tsx b/frontend/src/pages/TransferPage.tsx
index c8620d27..08ba5740 100644
--- a/frontend/src/pages/TransferPage.tsx
+++ b/frontend/src/pages/TransferPage.tsx
@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { api, describeFailure } from "../backend/api";
+import { ModalDialog } from "../components/ModalDialog";
 import { PageScaffold } from "../components/PageScaffold";
 import { useI18n } from "../i18n";
 import { byProviderCreatedAt } from "../state/ranking";
@@ -233,7 +234,11 @@ export function TransferPage() {
       {failure ? <div className="notice notice-error">{failure}</div> : null}
       {success ? <div className="notice notice-success">{success}</div> : null}
       {passwordRequest ? (
-        <dialog className="transfer-password-dialog" open>
+        <ModalDialog
+          className="transfer-password-dialog"
+          label={passwordRequest === "export" ? t("请输入导出密码") : t("请输入导入密码")}
+          onDismiss={() => finishPassword(null)}
+        >
           <form onSubmit={(event) => { event.preventDefault(); finishPassword(passwordValue.trim() || null); }}>
             <h2>{passwordRequest === "export" ? t("请输入导出密码") : t("请输入导入密码")}</h2>
             <div className="secure-field">
@@ -245,10 +250,10 @@ export function TransferPage() {
             </div>
             <footer><button className="button button-secondary" type="button" onClick={() => finishPassword(null)}>{t("取消")}</button><button className="button button-primary" type="submit">{t("确认")}</button></footer>
           </form>
-        </dialog>
+        </ModalDialog>
       ) : null}
       {encryptionRequest ? (
-        <dialog className="transfer-password-dialog" open>
+        <ModalDialog className="transfer-password-dialog" label={t("导出设置")} onDismiss={() => finishEncryption(null)}>
           {/* Not including keys is the default and the submit action: a transfer
               file describes which Providers and Profiles exist, which is useful on
               its own, and carrying live credentials is what turns it into a
@@ -268,10 +273,10 @@ export function TransferPage() {
               <button className="button button-primary" type="submit">{t("不包含 Key")}</button>
             </footer>
           </form>
-        </dialog>
+        </ModalDialog>
       ) : null}
       {importPlan ? (
-        <dialog className="transfer-password-dialog" open>
+        <ModalDialog className="transfer-password-dialog" label={t("确认导入")} onDismiss={() => finishImport(false)}>
           <form onSubmit={(event) => { event.preventDefault(); finishImport(true); }}>
             <h2>{t("确认导入")}</h2>
             {/* The warning has to match the file. Claiming saved keys will be
@@ -304,7 +309,7 @@ export function TransferPage() {
               <button className="button button-primary" type="submit">{t("导入")}</button>
             </footer>
           </form>
-        </dialog>
+        </ModalDialog>
       ) : null}
       <div className="transfer-actions">
         <button className="button button-secondary" type="button" onClick={toggleAll} disabled={busy || (!providers.length && !profiles.length && !mcpServers.length)}>
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index d00a2d1f..bb98df68 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -2313,8 +2313,17 @@
 .skills-detail-cell span[title], .skills-import-name small[title] { cursor: help; }
 .skills-detail-cell small { margin-top: 4px; color: var(--text-tertiary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
 .mcp-secret-note { display: block; color: var(--text-secondary); margin-top: 4px; }
-.mcp-modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / 35%); }
-.mcp-modal { width: min(620px, 100%); max-height: min(720px, 90vh); overflow: auto; padding: 22px; background: var(--window-bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
+/* The modal is now the <dialog> itself, opened with showModal(), so the top
+   layer does the centring and covering a fixed wrapper used to do by hand. That
+   wrapper also carried `z-index: 20`, which only tied the task centre's 20 and
+   left DOM order to break the tie; the top layer is above every z-index.
+   Widths resolve against the viewport rather than the wrapper's padded cell, so
+   the small-window guard has to be explicit, as the transfer dialog's is.
+   `color` is restated because the UA sheet sets its own on <dialog>, and a UA
+   declaration beats inheritance -- without it the text is black on the dark
+   theme's dark surface. */
+.mcp-modal::backdrop { background: rgb(0 0 0 / 35%); }
+.mcp-modal { width: min(620px, calc(100vw - 48px)); max-height: min(720px, 90vh); overflow: auto; padding: 22px; background: var(--window-bg); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
 .mcp-modal header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .mcp-modal footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
 .mcp-modal label { display: grid; gap: 6px; margin: 16px 0; color: var(--text-secondary); font-size: 13px; }
@@ -2324,7 +2333,7 @@
 .mcp-modal input, .mcp-modal select, .mcp-modal textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong); background: var(--surface-subtle); color: var(--text-primary); padding: 9px 10px; font: inherit; }
 .mcp-modal textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
 .mcp-modal footer { margin-top: 20px; }
-.skills-import-modal { width: min(760px, 100%); }
+.skills-import-modal { width: min(760px, calc(100vw - 48px)); }
 .skills-import-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 14px 0; border-top: 1px solid var(--border-faint); }
 .skills-import-name { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 4px; margin: 0 !important; }
 .skills-import-name strong, .skills-import-name small { min-width: 0; overflow-wrap: anywhere; }
diff --git a/frontend/src/styles/modal-layer.test.ts b/frontend/src/styles/modal-layer.test.ts
new file mode 100644
index 00000000..6a0706df
--- /dev/null
+++ b/frontend/src/styles/modal-layer.test.ts
@@ -0,0 +1,65 @@
+/**
+ * Guards the one mechanism that puts modals above the page.
+ *
+ * Two ways of doing this had grown side by side. Four sites used `<dialog open>`,
+ * which is visible but *not* modal: it stays in document flow at its static
+ * position, so the launch dialog rendered inside its Agent row, well down a long
+ * list, and pushed the page instead of covering it. Two others hand-rolled a
+ * fixed overlay whose `z-index: 20` tied the task centre's 20, leaving DOM order
+ * to break the tie.
+ *
+ * Both are now one ModalDialog calling showModal(), which is above every
+ * stacking context and outside `.app-window`'s `overflow: hidden`. These are
+ * text assertions over source, as transfer-dialog.test.ts is, because jsdom does
+ * no layout and cannot fail on position.
+ */
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+// Built with node:path rather than `new URL("../", import.meta.url)`: Vite
+// statically rewrites that pattern into a dev-server asset URL, which is not a
+// file: URL and cannot be read from disk.
+const root = dirname(dirname(fileURLToPath(import.meta.url)));
+
+function sources(): { path: string; text: string }[] {
+  const found: { path: string; text: string }[] = [];
+  const walk = (dir: string, prefix: string) => {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      if (entry.isDirectory()) {
+        walk(join(dir, entry.name), `${prefix}${entry.name}/`);
+        continue;
+      }
+      if (!/\.tsx?$/.test(entry.name) || entry.name.includes(".test.")) continue;
+      found.push({ path: `${prefix}${entry.name}`, text: readFileSync(join(dir, entry.name), "utf8") });
+    }
+  };
+  walk(root, "");
+  return found;
+}
+
+describe("modal layering", () => {
+  it("renders a <dialog> only through ModalDialog", () => {
+    const offenders = sources().filter((file) => file.path !== "components/ModalDialog.tsx" && /<dialog[\s>]/.test(file.text));
+    expect(offenders.map((file) => file.path)).toEqual([]);
+  });
+
+  it("opens with showModal, never with the open attribute", () => {
+    const component = sources().find((file) => file.path === "components/ModalDialog.tsx");
+    expect(component).toBeTruthy();
+    expect(component?.text).toContain("showModal()");
+    // `open` as a JSX attribute is the defect; the `dialog.open` property and
+    // the word in prose are not.
+    expect(/<dialog[^>]*\sopen[\s/>]/.test(component?.text ?? "")).toBe(false);
+  });
+
+  it("keeps no competing fixed overlay for modals", () => {
+    const css = readFileSync(join(root, "styles/app.css"), "utf8");
+    expect(css).not.toContain("mcp-modal-backdrop");
+    // The backdrop comes from the top layer now, for both modal skins.
+    expect(css).toContain(".mcp-modal::backdrop");
+    expect(css).toContain(".transfer-password-dialog::backdrop");
+  });
+});
diff --git a/frontend/src/test/setup.ts b/frontend/src/test/setup.ts
index d8dd1bd3..c80b6df0 100644
--- a/frontend/src/test/setup.ts
+++ b/frontend/src/test/setup.ts
@@ -69,3 +69,37 @@ beforeEach(() => {
 	installStorage("localStorage");
 	installStorage("sessionStorage");
 });
+
+/**
+ * jsdom 30 ships no HTMLDialogElement methods at all -- `show`, `showModal`,
+ * `close` and `requestClose` are all undefined, though the `open` property does
+ * reflect the attribute. Modals call showModal() because that is what puts them
+ * on the top layer, so without this every test rendering one throws.
+ *
+ * There is no top layer to emulate here, and jsdom does no layout, so this
+ * tracks the observable state a test can assert on: `open`, the implicit
+ * "dialog" role that follows it, and the close/cancel events. Whether the
+ * element truly escapes its stacking context is a browser question, which is
+ * why the E2E suite is what covers position.
+ */
+const dialog = window.HTMLDialogElement.prototype;
+if (typeof dialog.showModal !== "function") {
+	dialog.show = function show(this: HTMLDialogElement) {
+		this.setAttribute("open", "");
+	};
+	dialog.showModal = function showModal(this: HTMLDialogElement) {
+		this.setAttribute("open", "");
+	};
+	dialog.close = function close(this: HTMLDialogElement, returnValue?: string) {
+		if (!this.hasAttribute("open")) return;
+		this.removeAttribute("open");
+		if (returnValue !== undefined) this.returnValue = returnValue;
+		this.dispatchEvent(new window.Event("close"));
+	};
+	dialog.requestClose = function requestClose(this: HTMLDialogElement, returnValue?: string) {
+		if (!this.hasAttribute("open")) return;
+		// Cancel is the event Esc fires, and it is preventable; only close when
+		// nothing prevented it, as the platform does.
+		if (this.dispatchEvent(new window.Event("cancel", { cancelable: true }))) this.close(returnValue);
+	};
+}