From e475dff6b00bf36be9b25fe7e3f677f5ae0b6492 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 14:42:14 +0800
Subject: [PATCH 01/17] docs(audit): plan project remediation

---
 docs/developer/project-audit-2026-07-10.md    | 443 ++++++++++++++++++
 ...-07-10-project-audit-remediation-design.md |  70 +++
 .../2026-07-10-project-audit-remediation.md   | 198 ++++++++
 3 files changed, 711 insertions(+)
 create mode 100644 docs/developer/project-audit-2026-07-10.md
 create mode 100644 docs/plans/2026-07-10-project-audit-remediation-design.md
 create mode 100644 docs/plans/2026-07-10-project-audit-remediation.md

diff --git a/docs/developer/project-audit-2026-07-10.md b/docs/developer/project-audit-2026-07-10.md
new file mode 100644
index 000000000..2f1058953
--- /dev/null
+++ b/docs/developer/project-audit-2026-07-10.md
@@ -0,0 +1,443 @@
+# Ophel Atlas 全项目架构、性能与 UI/UX 审查
+
+> 审查日期：2026-07-10  
+> 审查范围：全站共享架构、浏览器扩展与油猴双平台、核心生命周期、状态与存储、Shadow DOM/主题、通用 UI/UX、可访问性、构建体积、死代码与兼容层。  
+> 不在范围：仅影响单个站点选择器或单个站点 DOM 适配的兼容问题。
+
+## 1. 结论
+
+项目当前可以通过格式、类型和两种生产构建，但仍存在数个会影响所有站点或整个平台的结构性问题。最需要优先处理的是：
+
+1. 扩展端两个内容脚本入口重复打包全部站点适配器和 11 种语言，单页需解析约 7.49 MB 原始 JavaScript。
+2. 多套弹窗、菜单和队列 UI 通过 Portal 跳出 Shadow DOM，动态主题变量没有随之跨出，深色、自定义和 24 套预置主题会退回局部硬编码 fallback。
+3. 油猴端在所有站点永久保留全页 `MutationObserver` 和 2 秒轮询；选中提示词后还存在永久逐帧布局测量。
+4. Options 页面在 600–800 px 宽度出现横向溢出和标签文字被压成竖排；设置开关没有可访问名称和可见键盘焦点。
+5. 核心管理器的生命周期契约没有统一落地，已经出现无法释放的订阅、不可取消的延迟任务和存储写入竞态。
+
+本次没有确认 P0 级别的稳定必现崩溃、全量数据损坏或安全漏洞。确认问题分布为：
+
+| 级别 | 数量 | 含义 |
+| --- | ---: | --- |
+| P1 | 6 | 应优先进入近期版本，已造成明显性能、主题或可访问性问题 |
+| P2 | 10 | 中期必须修复，存在竞态、泄漏、长期维护或一致性风险 |
+| P3 | 5 | 清理和治理项，可随相关模块修改一起完成 |
+
+## 2. 审查方法与证据
+
+### 2.1 静态与构建检查
+
+已运行：
+
+- `pnpm format:check`：通过。
+- `pnpm lint:check`：通过退出码，但有 110 条 warning。
+- `pnpm typecheck`：通过。
+- `pnpm build`：通过。
+- `pnpm build:userscript`：通过。
+
+当前没有正式测试体系，因此“构建通过”不能证明运行时生命周期、主题、键盘操作或窄屏布局正确。
+
+### 2.2 视觉与键盘冒烟
+
+使用生产构建的 Options 页面做了 1440×900、800×700、600×700 三档浏览器检查，并对原生 checkbox 执行键盘聚焦。
+
+确认结果：
+
+- 1440 px 下结构可用，但内容密度偏低，右侧存在较大空白。
+- 800 px 下二级标签开始被强制折为两行。
+- 600 px 下固定 228 px 侧边栏挤压主内容，二级标签接近竖排，右侧标签被裁切，页面产生横向溢出。
+- 聚焦设置开关的 checkbox 后，没有可见焦点环；无障碍树中的 checkbox 也没有名称。
+
+### 2.3 构建体积快照
+
+本次生产构建测得：
+
+| 产物 | 原始大小 | gzip |
+| --- | ---: | ---: |
+| `main.*.js` | 3,336,340 B | 849,872 B |
+| `ui-entry.*.js` | 4,158,496 B | 1,056,090 B |
+| 两个扩展内容脚本合计 | 7,494,836 B | 1,905,962 B |
+| `ophel.user.js` | 1,860,986 B | 482,797 B |
+
+扩展资源从本地加载，不直接产生网络下载成本，但 JavaScript 的解析、编译、初始化和内存占用仍发生在每个支持站点页面。
+
+## 3. P1：优先修复
+
+### P1-01 两个扩展入口重复打包全部适配器和语言包
+
+**范围：所有扩展端支持站点；油猴端也受单体 bundle 影响。**
+
+证据：
+
+- `src/contents/main.ts` 导入 `getAdapter()`。
+- `src/components/App.tsx:10` 和 `src/components/App.tsx:407` 再次导入并调用 `getAdapter()`。
+- `src/adapters/index.ts:7-22` 同步导入全部 15 个站点适配器，并在模块加载时全部实例化。
+- `src/locales/resources.ts:5-15` 同步导入全部 11 种语言。
+- 构建产物中 `main.*.js` 和 `ui-entry.*.js` 均包含各适配器类及多语言文本。
+
+影响：
+
+- 每个页面都解析与当前站点无关的 14 个适配器。
+- `main` 和 `ui-entry` 是独立内容脚本，适配器与语言资源被重复打包、重复解析。
+- 适配器源文件本身很大，例如 Gemini、ChatGPT、AI Studio 分别约 4,900、3,411、3,276 行，重复成本明显。
+- 扩展端两个入口合计约 7.49 MB 原始 JS；这比局部 DOM 微优化更值得优先处理。
+
+建议：
+
+1. 将站点识别拆成轻量 hostname/path 路由，不要先构造全部适配器再逐个 `match()`。
+2. 按站点动态导入适配器，或由构建脚本为不同 match 组生成独立入口。
+3. 评估合并 `main.ts` 与 CSUI 初始化，使核心逻辑和 React UI 共享同一适配器实例与模块图。
+4. 扩展端语言资源按当前语言加载，至少避免 11 份完整字典同时进入两个入口。
+
+验收标准：
+
+- 单个站点产物不再包含其他站点的大型适配器实现。
+- `main` 与 UI 不再各自携带完整适配器和语言字典。
+- 记录修改前后的 raw/gzip 大小和页面初始化耗时。
+
+### P1-02 Portal 跨出 Shadow DOM 后丢失主题变量，形成隐式第二主题系统
+
+**范围：所有站点的通用弹窗、菜单、加载遮罩、提示词弹窗和队列 UI。**
+
+证据：
+
+- `src/core/theme-manager.ts:760-794` 只把动态变量写入 Shadow Root 内的 `:host` 和 `#gh-theme-vars`。
+- `src/components/ui/Dialog.tsx:99-100,163` 把样式注入 `document.head`，再把对话框 Portal 到 `document.body`。
+- `src/components/ConversationDialogs.tsx:92-101,165` 使用相同模式。
+- `ConversationMenus`、`LoadingOverlay`、Prompt Import/Editor/Preview 等也 Portal 到 `document.body`。
+- `QueueOverlay.tsx:516` 的目标查找使用 `document.querySelector(".gh-root")`；该 API 无法穿透 Shadow DOM，因此实际会回退到 `document.body`。
+- 普通组件 CSS import 会生成页面级 content-script CSS；这能让队列样式“看起来存在”，但同时绕开 Shadow DOM 隔离和动态主题变量。
+
+影响：
+
+- 深色主题、自定义主题和非默认预置主题中的覆盖层会使用白色、灰色、蓝色等 fallback，而不是当前 `--gh-*` 变量。
+- 页面级 CSS 和 DOM 节点污染宿主页面，增加样式冲突和 z-index 冲突风险。
+- 主题兼容依赖 fallback，违反 `DESIGN.md` 的单一主题源和 24 套主题兼容要求。
+- 同一功能在 Options 页面与内容面板中可能表现不同，因为 Options 的变量在文档根可用，而面板变量只存在于 Shadow Host。
+
+建议：
+
+- 建立一个 Shadow Root 内的统一 overlay portal 容器，所有面板弹窗、菜单、tooltip、loading 和 queue 默认渲染到该容器。
+- 只有必须覆盖宿主页面且不能受 Shadow Host 几何影响的元素才进入 `document.body`；这类元素应挂到独立 portal host，并由 `ThemeManager` 显式镜像变量。
+- 删除组件内各自向 `document.head` 注入样式的实现，统一样式入口和清理生命周期。
+
+验收标准：
+
+- 24 套主题与自定义主题下，弹窗、菜单、加载层、队列和预览均读取同一组动态变量。
+- 内容面板功能不再依赖页面级 `.gh-*` CSS 才能显示正确。
+
+### P1-03 油猴端在所有站点永久观察整个文档并同时轮询
+
+**范围：所有油猴端支持站点。**
+
+证据：`src/platform/userscript/entry.tsx:437-448` 在 UI 挂载后：
+
+- 对 `document.documentElement` 建立 `{ childList: true, subtree: true }` 的永久 `MutationObserver`。
+- 同时每 2 秒执行一次 `shadowHost.isConnected` 检查。
+- 两者只在页面 unload 时清理。
+
+影响：
+
+- AI 流式生成会产生大量 DOM 变更，observer callback 即使只做连接检查，也会被高频调度。
+- Observer 与 interval 完成同一“防宿主被移除”任务，属于重复监控。
+- 该逻辑不是单站点兼容，而是对全部油猴站点无条件开启。
+
+建议：
+
+- 默认只观察 Shadow Host 的直接父节点 `{ childList: true, subtree: false }`。
+- 稳定挂载后停止重试定时器；只在确认 host 被移除时短时重启。
+- 不同时长期保留全树 Observer 和 interval。
+
+### P1-04 选中提示词后永久逐帧测量布局
+
+**范围：所有站点的提示词选择条。**
+
+证据：`src/components/SelectedPromptBar.tsx:146-151` 在 `title` 存在期间递归调用 `requestAnimationFrame(trackPosition)`；每帧会执行：
+
+- `adapter.getTextareaElement()`；
+- 必要时向上遍历并调用 `getComputedStyle()`；
+- `getBoundingClientRect()`；
+- React state 比较与可能更新。
+
+影响：
+
+- 用户选中一个提示词但暂不发送时，会持续以显示器帧率工作。
+- 布局读取可能触发同步 layout，在复杂站点和长对话中造成 CPU、耗电与滚动卡顿。
+- 代码已经有 `ResizeObserver` 和 window resize 监听，逐帧循环属于过度兜底。
+
+建议：
+
+- 用 `ResizeObserver`、滚动事件的 rAF 节流、`visualViewport` 和有限时长 transition 跟踪替代永久循环。
+- 若必须追踪宿主动画，只在检测到几何变化后维持短窗口，连续若干帧稳定后停止。
+
+### P1-05 Options 页面缺少整体响应式策略
+
+**范围：独立 Options、权限请求窗口和窄窗口使用场景。**
+
+证据：
+
+- `src/styles/settings.css:44-46` 将侧边栏固定为 228 px 且不收缩。
+- `src/styles/settings.css:538-543` 内容区固定使用 24×32 px padding。
+- 现有 `@media` 只处理主题卡片、About 局部和 reduced motion，没有处理整体 sidebar/content/tab 导航。
+- 浏览器实测：800 px 时二级标签明显换行；600 px 时标签近似竖排、右侧内容被裁切并产生横向滚动。
+
+影响：
+
+- 权限请求页或用户缩窄 Options 窗口时，导航难以扫描和点击。
+- 中文、德文、俄文等较长标签更容易被压缩。
+- 与 `DESIGN.md` 中“稳定网格、可扫读、点击目标足够大”的要求不一致。
+
+建议：
+
+- 设定 Options 的响应式断点：窄屏下收起侧边栏为图标栏或顶部下拉导航。
+- 二级 tab 改为横向滚动、下拉或允许有控制的两行布局，不应逐字折行。
+- 设置行在窄屏下切为上下布局，控件保持最小可操作宽度。
+
+### P1-06 通用设置开关没有可访问名称和可见焦点
+
+**范围：至少 52 个 `ToggleRow` 设置项。**
+
+证据：
+
+- `src/components/ui/Switch.tsx:37-41` 使用原生 checkbox，但设置为 `opacity: 0; width: 0; height: 0`。
+- `Switch` 没有 `aria-label`、`aria-labelledby` 或可关联的 `id`。
+- `src/tabs/options/components/SettingRow.tsx:52,73-89` 的文字是普通 `div`，没有 `<label htmlFor>` 关系。
+- 浏览器无障碍快照显示 checkbox 无名称；聚焦 checkbox 后界面没有可见 focus ring。
+
+影响：
+
+- 屏幕阅读器无法说明当前开关控制什么。
+- 键盘用户无法判断焦点位置。
+- 点击左侧标签不能切换开关，实际可点击区域只有 36×20 px。
+
+建议：
+
+- `Switch` 接受 `id`、`aria-label`/`aria-labelledby`，由 `ToggleRow` 生成稳定关联。
+- 使用 visually-hidden checkbox，但保留可聚焦尺寸或为可视轨道实现 `:focus-visible`。
+- 让整行 label 可点击，同时避免与行内其它按钮冲突。
+
+## 4. P2：中期修复
+
+### P2-01 跨上下文设置同步存在 100 ms 写入丢失窗口
+
+**证据：** `src/stores/settings-store.ts:366-383` 收到 `chrome.storage.onChanged` 后将全局 `isUpdatingFromStorage` 设为 `true`，100 ms 后才恢复；`storageAdapter.setItem()` 在此期间直接返回。
+
+影响：如果用户或其它代码恰好在这 100 ms 内修改设置，Zustand 内存状态会变化，但 persist 写入被静默跳过，刷新后修改丢失。
+
+建议：使用“本次外部值的签名/版本”抑制同值回写，或只跳过由该次 `setState` 触发的单次 persist，不要用时间窗口阻止所有写入。
+
+### P2-02 `OutlineManager` 缺少可释放生命周期
+
+**证据：**
+
+- `src/core/outline-manager.ts:147` 使用 `this.handleMessage.bind(this)` 注册事件，没有保存 bound function。
+- `src/core/outline-manager.ts:150` 丢弃 `useBookmarkStore.subscribe()` 的 unsubscribe。
+- 类中没有 `destroy()`；`src/components/App.tsx:2425` 卸载时只销毁 `ConversationManager`。
+
+影响：App 重挂载、开发热更新或未来复用管理器时，旧实例仍会响应 message 和 bookmark 变化，形成重复 refresh 和内存泄漏。
+
+建议：让 `OutlineManager` 实现 `CoreModule`/`Disposable`，保存所有 listener、store subscription、timer 和 observer，并在 App cleanup 中调用 `destroy()`。
+
+### P2-03 `ModelLocker` 的延迟锁定任务不可取消
+
+**证据：** `src/core/model-locker.ts:56` 的启动 `setTimeout` 没有保存 ID；`stop()` 只清理 debounce 和 verify interval。
+
+影响：用户在初始化延迟期间关闭模型锁定，旧 timeout 仍可能调用 `adapter.lockModel()`；SPA 快速切换也可能让旧页面任务晚到。
+
+建议：保存 `startTimer`，在 `stop()`、`updateConfig(disabled)`、`relock()` 中清理，并在回调执行前再次检查 `config.enabled`、keyword 和路由版本。
+
+### P2-04 SPA 路由监听始终保留 1 秒轮询
+
+**证据：** `src/core/modules-init.ts:767` 在已监听 `popstate`、`hashchange` 且 monkey-patch `pushState/replaceState` 后，仍对所有站点永久 `setInterval(handleUrlChange, 1000)`。
+
+影响：每个标签页每秒执行 URL 比较；单次成本不高，但它是所有站点、整个页面生命周期的固定后台工作，并与已有事件路径重复。
+
+建议：将轮询作为按适配器声明的兼容 fallback，默认关闭；或在检测到 history patch 被覆盖时才临时启用。
+
+### P2-05 轮询治理不统一，隐藏页策略不一致
+
+项目已有 `PollingTaskRegistry`，但大部分模块仍直接维护 interval。当前可见的周期任务包括 URL、用户提问 Markdown、Mermaid、复制、标题、用量面板、队列位置和生成状态等。
+
+典型问题：
+
+- `QueueOverlay` 在功能开启后即使折叠，也每 2 秒测位置、每 1 秒调用 `adapter.isGenerating()`。
+- `AssistantMermaidRenderer` 同时使用 DOM watcher 和 2 秒全量重扫。
+- 各模块对 `document.hidden` 的处理不一致。
+
+建议：将通用轮询迁移到统一调度器，支持可见性暂停、任务去重、按功能激活、运行耗时统计和统一销毁。
+
+### P2-06 `App` 与核心 UI 组件过度集中
+
+当前统计：
+
+| 文件 | 行数 | `useEffect` | `useCallback` | `useMemo` |
+| --- | ---: | ---: | ---: | ---: |
+| `App.tsx` | 3,617 | 49 | 59 | 28 |
+| `PromptsTab.tsx` | 3,461 | 8 | 16 | 0 |
+| `OutlineTab.tsx` | 2,143 | 12 | 27 | 7 |
+| `MainPanel.tsx` | 1,612 | 9 | 35 | 1 |
+
+此外 `App` 使用无 selector 的 `useSettingsStore()` 订阅整个 store，再额外订阅 `_syncVersion`。
+
+影响：
+
+- 任一局部状态变化都需要重新执行大量派生逻辑。
+- Effect 依赖和 cleanup 很难完整审查，生命周期问题容易被隐藏。
+- 全局搜索、导出、面板、设置、弹窗和快捷工具互相耦合，新增功能继续放大 bundle 和回归面。
+
+建议：按领域拆出 controller hooks 和边界组件；让 Overlay、Export、Global Search、Panel State 分别订阅最小 Zustand selector；管理器实例由单一 runtime/context 提供。
+
+### P2-07 独立 Options 与设置弹窗的信息架构不一致
+
+**证据：**
+
+- `SettingsModal` 有 9 个一级入口：基本、外观、功能、站点、全局搜索、快捷键、数据、权限、关于。
+- `src/tabs/options.tsx` 只有 7 个，缺少全局搜索和快捷键。
+- `src/tabs/options.tsx:252-260` 在独立页面中继续隐藏外观主题；实际冒烟仅显示 6 个入口。
+
+影响：从浏览器扩展管理页进入 Options 的用户找不到全局搜索、快捷键和主题设置；同名“设置”入口呈现不同能力，增加认知和支持成本。
+
+建议：两种载体共享同一导航定义和页面能力矩阵；站点上下文缺失时显示说明或选择默认站点，而不是直接隐藏入口。
+
+### P2-08 存在直接面向用户的硬编码文案
+
+确认示例：
+
+- `src/components/QueueOverlay.tsx:581`：硬编码中文空状态，尽管 locale 中已有 `queueEmpty`。
+- `src/components/ConversationsTab.tsx:1747-1748`：硬编码“无标题”。
+- `src/components/PromptsTab.tsx:1946`：硬编码删除确认中文。
+- `src/components/global-search/GlobalSearchOverlay.tsx:286`：硬编码英文 aria-label。
+- `src/components/ui/PlaceholderInput.tsx:176`：硬编码英文 aria-label。
+- `src/components/ui/SelectDropdown.tsx:309`：硬编码 `No options`。
+
+影响：非中文/英文用户看到混合语言，且无障碍名称不随语言切换，违反 11 种语言同步规则。
+
+建议：新增/复用 i18n key，并增加静态检查，禁止组件 JSX 中出现未豁免的用户可见中英文文本。
+
+### P2-09 主题 token 定义与使用漂移
+
+静态扫描发现 108 个被引用的 `--gh-*` 名称，其中 32 个没有在源码中找到全局定义。部分是局部动态变量或模式化变量，但仍确认存在多组全局语义 token 漂移，例如：
+
+- Queue：`--gh-accent`、`--gh-accent-hover`、`--gh-bg-accent`、`--gh-border-light`。
+- 通用 UI：`--gh-border-hover`、`--gh-primary-hover`、`--gh-primary-light`、`--gh-success`、`--gh-error`、`--gh-text-disabled`。
+
+影响：这些组件永远依赖 fallback，24 套主题无法完整控制它们；修改 fallback 时又会形成新的局部主题分支。
+
+建议：建立 token 校验脚本，区分“全局主题 token”和“组件局部动态变量”；全局 token 必须同时存在于类型、默认 CSS 和主题预置生成链路。
+
+### P2-10 没有正式测试体系，关键纯逻辑与迁移无回归保护
+
+目前没有 test/spec 文件、测试命令或测试依赖。以下全局逻辑尤其需要测试：
+
+- `settings-normalize.ts` 的旧数据迁移和默认值合并；
+- 备份/恢复 schema、WebDAV 合并；
+- 全局搜索语法解析与设置深链；
+- 主题 token 完整性与 24 套预置；
+- 模块 start/update/stop 幂等性；
+- 双平台存储同步行为。
+
+建议先引入 Vitest 覆盖纯逻辑和生命周期，不必从站点 E2E 开始。之后增加最小 Playwright 扩展冒烟：加载面板、打开设置、切换主题、键盘操作、窄屏 Options。
+
+## 5. P3：清理与治理
+
+### P3-01 两个确认无引用的删除候选
+
+1. `src/platform/userscript/chrome-adapter-polyfill.ts`
+   - 当前 Vite alias 没有引用该文件。
+   - 文件注释仍称“通过 Vite alias 替换”，与实际配置不符。
+   - 其 GM API 被包装成 Promise，违反当前项目“油猴同步 hydration”的明确架构约束。
+   - 当前有效实现已经集中在 `src/stores/chrome-adapter.ts`。
+2. `src/tabs/options/pages/index.ts`
+   - 没有 import 命中；Options 和 SettingsModal 都直接导入具体页面。
+   - barrel 只导出 6 个页面，已遗漏 GlobalSearch、Shortcuts、Permissions，本身也不再是完整入口。
+
+这两个文件可在单独清理提交中删除，并以 `typecheck + build + build:userscript` 验证。
+
+### P3-02 滚动锁主世界逻辑存在双份手工实现
+
+- 扩展：`src/contents/scroll-lock-main.ts`，约 341 行。
+- 油猴：`src/platform/userscript/scroll-lock-inject.ts`，约 319 行。
+- 两者注释要求“保持一致”，但当前 diff 已有 166 行变化。
+
+这不是可以直接删除的兼容代码，因为两种平台的注入方式不同；可删除的是“双份业务逻辑”。建议抽取纯函数/模板源，由构建脚本生成扩展入口与注入函数，平台文件只保留桥接。
+
+### P3-03 存在两套通用 Dialog 与重复 style ID
+
+- `src/components/ui/Dialog.tsx` 和 `src/components/ConversationDialogs.tsx` 都实现 overlay、ESC、document.head 样式注入和 body portal。
+- 两者都使用 `style#gh-dialog-styles`，但各自用独立 module boolean 判断是否注入，可能产生重复 ID。
+- 两套实现的 focus、ARIA、主题和关闭行为不一致。
+
+建议合并为一个通用 Dialog primitive，并让业务弹窗只组合内容。
+
+### P3-04 Lint 以 warning 形式积累了 110 个问题
+
+主要包括：
+
+- 大量 `any`，集中在 background、network monitor、scroll-lock bridge、userscript API。
+- 4 条 React Hook 不必要依赖。
+- 2 条普通 `console`。
+
+当前 CI 只要没有 error 就会通过，warning 不会形成治理压力。建议先建立 warning baseline，再逐类清理并最终启用 `--max-warnings=0`；对确实需要动态类型的边界使用 `unknown`、类型守卫和窄接口。
+
+### P3-05 架构/CSS 文档已经明显过时
+
+`docs/developer/architecture.md` 仍记录：
+
+- CSS 共 7 个、约 5,974 行；当前扫描为 8 个 CSS、约 11,478 行、260 KB。
+- `style.css` 约 1,472 行；当前约 4,463 行。
+- `settings.css` 约 2,081 行；当前约 3,541 行。
+
+文档也没有准确说明普通组件 CSS import 会进入页面级 content-script CSS，以及 body portal 与 Shadow 主题变量之间的边界。这会直接误导后续 UI 修改。
+
+## 6. 不建议现在删除的兼容代码
+
+以下代码虽然带有“兼容/legacy”字样，但仍有当前引用或承担数据迁移，不能仅凭名称删除：
+
+- `src/utils/themes.ts`：仍被 ThemeManager、AppearancePage、ThemePreview 使用。
+- `src/core/conversation-manager.ts`：仍被 App、MainPanel、Outline、Conversations 等多个模块使用。
+- `settings-normalize.ts` 中旧快捷按钮字段迁移：仍是旧用户升级入口，应在明确最低支持版本和迁移完成策略后再删。
+- WebDAV 旧扁平备份格式兼容：涉及用户数据恢复，删除前必须先定义版本淘汰策略。
+
+建议为兼容代码增加 `introducedVersion`、`lastNeededVersion` 或 schema version，并按发布周期清理，而不是长期无期限保留。
+
+## 7. 建议实施顺序
+
+### 第一阶段：低风险、直接收益
+
+1. 修复 Switch 的 label、ARIA 和 focus-visible。
+2. 修复 Options 的 900/720/640 px 整体响应式布局。
+3. 清理硬编码文案并同步 11 种语言。
+4. 删除两个确认无引用文件。
+5. 修复 ModelLocker 可取消 timeout 和 settings 写入竞态。
+
+### 第二阶段：统一 UI 边界
+
+1. 建立 Shadow Root 内统一 overlay portal。
+2. 合并两套 Dialog。
+3. 统一 tooltip/menu/dialog/loading/queue 的主题和焦点策略。
+4. 建立主题 token 完整性检查。
+
+### 第三阶段：性能与架构
+
+1. 按 hostname 懒加载站点适配器。
+2. 消除 `main` 与 `ui-entry` 的适配器/语言资源重复。
+3. 收敛 userscript 永久 Observer 与 interval。
+4. 用统一 lifecycle/polling registry 管理所有模块。
+5. 拆分 App、PromptsTab、OutlineTab 和 MainPanel。
+
+### 第四阶段：回归体系
+
+1. Vitest：设置迁移、搜索语法、主题 token、备份 schema、模块生命周期。
+2. Playwright：Options 三档宽度、键盘焦点、主题弹窗、面板基本流程。
+3. CI 增加 bundle size budget 和 `--max-warnings=0`。
+
+## 8. 建议的完成指标
+
+- 扩展内容脚本 raw 总量至少下降 40%，且单站点不包含其它站点大型适配器。
+- 油猴稳定挂载后不再同时保留全树 observer 和 interval。
+- 选中提示词静置时不再持续产生 rAF 布局测量。
+- 600 px Options 无横向溢出，二级标签可完整读取。
+- 所有 ToggleRow 在无障碍树中有名称，键盘焦点清晰可见。
+- 24 套主题和自定义主题下，所有 overlay/portal 组件颜色一致。
+- 核心 manager 均具备可验证的 start/update/stop 或 destroy 生命周期。
+- 新增测试覆盖设置迁移、主题 token 和关键生命周期。
+
diff --git a/docs/plans/2026-07-10-project-audit-remediation-design.md b/docs/plans/2026-07-10-project-audit-remediation-design.md
new file mode 100644
index 000000000..b25481112
--- /dev/null
+++ b/docs/plans/2026-07-10-project-audit-remediation-design.md
@@ -0,0 +1,70 @@
+# Project Audit Remediation Design
+
+## Decision
+
+采用单分支、单 PR、分阶段提交的结构性修复方案。保持现有产品信息架构和用户数据兼容，不做整页重写；先建立可验证的运行时边界和测试，再处理 UI/主题、生命周期、性能与清理。
+
+## Alternatives considered
+
+### 方案 A：一次性重写核心和 UI
+
+优点是理论上能快速消除历史结构；缺点是站点适配、双平台、24 套主题和用户持久化数据同时变化，回归面不可控。本次不采用。
+
+### 方案 B：分层收敛（采用）
+
+先补测试与共享基础设施，再逐层替换重复实现。每阶段独立可构建、可 review、可回滚，并以审计报告的验收指标作为完成门槛。
+
+### 方案 C：只修 P1 表面问题
+
+短期 diff 小，但会保留双重主题源、生命周期缺口和 bundle 重复，无法满足“完成审计问题并重构优化”的要求。本次不采用。
+
+## Architecture
+
+### Runtime and adapter loading
+
+- UI 不再自行创建第二套适配器注册表；当前适配器通过共享 runtime/context 注入 React 树。
+- 站点识别保持轻量，具体适配器按 hostname/path 动态加载。
+- 扩展 `main` 与 `ui-entry` 不再重复包含全部适配器；油猴构建保持单文件可分发，并通过构建验证确认动态加载策略可用。
+- i18n 保持同步 `t()` API，但语言资源改为当前语言加英文 fallback 的按需加载。
+
+### Overlay and theme boundary
+
+- 在 Ophel Shadow Root 内建立唯一 overlay root。
+- Dialog、菜单、Loading、Prompt modal、Tooltip、Queue 默认 Portal 到 overlay root。
+- 只有必须进入主文档的页面增强 UI 才使用 document portal，并由 ThemeManager 显式镜像主题变量。
+- 合并通用 Dialog，实现 role/aria-modal、焦点陷阱、ESC、焦点恢复和统一样式。
+
+### Lifecycle and polling
+
+- 核心管理器统一实现可释放生命周期；所有 listener、observer、timeout、interval 和 store subscription 都必须可清理。
+- 通用周期任务迁移到 `PollingTaskRegistry`，默认在隐藏页面暂停。
+- SPA URL fallback 只在适配器明确需要或 history patch 被覆盖时运行。
+- 布局跟踪使用 observer 与事件驱动，不保留永久 rAF。
+
+### UI/UX
+
+- Options 与 SettingsModal 共享导航定义，站点上下文缺失时显示默认/说明，不隐藏核心能力。
+- 900/720/640 px 提供明确整体断点；窄屏侧栏收敛、二级 tabs 横向滚动、设置行上下布局。
+- Switch 与 label 建立原生关联，支持整行点击、键盘焦点和屏幕阅读器名称。
+- 所有新增/修改文案同步 11 种语言。
+
+### Testing and quality
+
+- 引入 Vitest，优先覆盖设置迁移、主题 token、管理器生命周期、适配器路由和 i18n loader。
+- 增加 bundle budget 脚本，验证扩展内容脚本体积与站点适配器隔离。
+- 保持 CI 原有顺序，并增加测试和 warning gate。
+
+## Error handling
+
+- 动态加载失败必须显式记录并阻止伪初始化，不回退加载全部适配器。
+- i18n 当前语言加载失败时使用英文 fallback，并输出一次明确 warning。
+- Overlay root 缺失视为初始化错误，不静默 Portal 到 document.body。
+- 生命周期 cleanup 必须幂等。
+
+## Validation
+
+- 单元测试覆盖核心纯逻辑和生命周期。
+- 运行 format、lint、typecheck、test、Chrome build、userscript build。
+- Playwright 检查 Options 1440/800/600 px、Switch 键盘焦点、Dialog 焦点循环、浅色/深色 overlay。
+- 两轮人工 review：第一轮按审计 ID，第二轮按 diff/数据源/cleanup/安全/双平台清单。
+
diff --git a/docs/plans/2026-07-10-project-audit-remediation.md b/docs/plans/2026-07-10-project-audit-remediation.md
new file mode 100644
index 000000000..417344b15
--- /dev/null
+++ b/docs/plans/2026-07-10-project-audit-remediation.md
@@ -0,0 +1,198 @@
+# Project Audit Remediation Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** 修复 `docs/developer/project-audit-2026-07-10.md` 中全部全局审计问题，并完成双平台验证、两轮 review、提交、推送和 PR。
+
+**Architecture:** 通过共享 adapter runtime、Shadow overlay root、统一 lifecycle/polling、响应式设置系统和按需资源加载消除重复真值与长期后台工作。所有改动保持现有用户数据兼容和 24 套主题能力。
+
+**Tech Stack:** TypeScript 5.3、React 18、Zustand 5、Plasmo、Vite userscript、原生 CSS、Vitest、Playwright CLI、pnpm。
+
+---
+
+### Task 1: 建立测试与审计验证基础
+
+**Files:**
+- Modify: `package.json`
+- Modify: `pnpm-lock.yaml`
+- Create: `vitest.config.ts`
+- Create: `src/**/*.test.ts`
+- Create: `scripts/check-theme-tokens.mjs`
+- Create: `scripts/check-bundle-budget.mjs`
+
+**Steps:**
+1. 使用 pnpm 添加 Vitest。
+2. 增加 `test`、`test:run`、token 校验和 bundle budget scripts。
+3. 为 settings normalize、ModelLocker、PollingTaskRegistry、adapter route 写失败测试。
+4. 运行测试确认失败，再实现后续任务。
+
+### Task 2: 共享 adapter runtime 与按站点加载
+
+**Files:**
+- Modify: `src/adapters/index.ts`
+- Create: `src/core/adapter-runtime.ts`
+- Modify: `src/contents/main.ts`
+- Modify: `src/contents/ui-entry.tsx`
+- Modify: `src/platform/userscript/entry.tsx`
+- Modify: `src/components/App.tsx`
+- Modify: `src/components/QuickButtons.tsx`
+- Modify: `src/components/ModelLockSettingsContent.tsx`
+
+**Steps:**
+1. 建立 hostname/path 到动态 import 的轻量路由。
+2. main/userscript 初始化后把唯一 adapter 写入 runtime。
+3. UI 从 runtime/context 接收 adapter，删除 UI 内的 `getAdapter()`。
+4. 构建并检查 UI bundle 不再包含全部 adapter。
+
+### Task 3: i18n 按需加载与硬编码文案清理
+
+**Files:**
+- Modify: `src/utils/i18n.ts`
+- Modify: `src/locales/resources.ts`
+- Modify: `src/platform/userscript/i18n.ts`
+- Modify: `src/components/QueueOverlay.tsx`
+- Modify: `src/components/ConversationsTab.tsx`
+- Modify: `src/components/PromptsTab.tsx`
+- Modify: `src/components/global-search/GlobalSearchOverlay.tsx`
+- Modify: `src/components/ui/PlaceholderInput.tsx`
+- Modify: `src/components/ui/SelectDropdown.tsx`
+- Modify: `src/locales/*/index.ts`
+
+**Steps:**
+1. 保留同步 `t()`，增加异步语言加载和变更订阅。
+2. 扩展只静态携带英文 fallback，当前语言按需加载。
+3. 替换所有已确认硬编码 UI/ARIA 文案。
+4. 校验 11 种语言 key 一致。
+
+### Task 4: 建立统一 Shadow overlay root 与 Dialog
+
+**Files:**
+- Create: `src/components/ui/OverlayPortal.tsx`
+- Modify: `src/components/ui/Dialog.tsx`
+- Modify: `src/components/ConversationDialogs.tsx`
+- Modify: `src/components/ConversationMenus.tsx`
+- Modify: `src/components/LoadingOverlay.tsx`
+- Modify: `src/components/prompts/*.tsx`
+- Modify: `src/components/QueueOverlay.tsx`
+- Modify: `src/components/ui/Tooltip.tsx`
+- Modify: `src/contents/ui-entry.tsx`
+- Modify: `src/platform/userscript/entry.tsx`
+- Modify: `src/style.css`
+
+**Steps:**
+1. 在 Shadow Root 内创建并注册 overlay root。
+2. 所有通用 overlay 改用统一 portal resolver；禁止静默回退 body。
+3. 合并 Dialog 行为和样式，补齐 aria、焦点陷阱、ESC、焦点恢复。
+4. 删除重复 document.head style 注入。
+
+### Task 5: 主题 token 完整性
+
+**Files:**
+- Modify: `src/utils/themes/types.ts`
+- Modify: `src/styles/theme-variables.css`
+- Modify: `src/utils/themes/light/index.ts`
+- Modify: `src/utils/themes/dark/index.ts`
+- Modify: `src/styles/queue-overlay.css`
+- Modify: `src/style.css`
+- Modify: `src/styles/settings.css`
+
+**Steps:**
+1. 区分全局 token 与组件局部变量。
+2. 将 accent、border-light、hover、success/error/disabled 等语义统一到现有 token。
+3. 运行 token 校验，确保无未定义全局引用。
+4. 验证 24 个 preset 和自定义 CSS。
+
+### Task 6: Options 导航、响应式与 Switch 可访问性
+
+**Files:**
+- Create: `src/constants/settings-navigation.ts`
+- Modify: `src/tabs/options.tsx`
+- Modify: `src/components/SettingsModal.tsx`
+- Modify: `src/components/ui/Switch.tsx`
+- Modify: `src/tabs/options/components/SettingRow.tsx`
+- Modify: `src/styles/settings.css`
+
+**Steps:**
+1. 两种设置载体共享导航定义。
+2. 独立 Options 展示外观、全局搜索和快捷键；缺少 site context 时使用默认站点说明。
+3. Switch 建立 label/ARIA/focus-visible 和整行点击。
+4. 增加 900/720/640 px 整体布局断点。
+5. Playwright 验证三档宽度和键盘行为。
+
+### Task 7: 生命周期、存储竞态与轮询
+
+**Files:**
+- Modify: `src/core/outline-manager.ts`
+- Modify: `src/core/model-locker.ts`
+- Modify: `src/stores/settings-store.ts`
+- Modify: `src/core/modules-init.ts`
+- Modify: `src/core/polling-task-registry.ts`
+- Modify: `src/components/SelectedPromptBar.tsx`
+- Modify: `src/components/QueueOverlay.tsx`
+- Modify: `src/platform/userscript/entry.tsx`
+
+**Steps:**
+1. 为 OutlineManager 增加幂等 destroy，并在 App cleanup 调用。
+2. ModelLocker 跟踪并取消全部延迟任务。
+3. 用单次外部写入签名替换 100 ms 全局禁写窗口。
+4. URL fallback 改为条件启用。
+5. userscript mount 只观察直接父节点，稳定后停止重试。
+6. SelectedPromptBar 删除永久 rAF，Queue 轮询仅在需要时运行。
+
+### Task 8: 拆分大型 UI 控制器
+
+**Files:**
+- Modify: `src/components/App.tsx`
+- Create: `src/components/app/*.tsx`
+- Modify: `src/components/PromptsTab.tsx`
+- Create: `src/components/prompts/*.tsx`
+- Modify: `src/components/OutlineTab.tsx`
+- Create: `src/components/outline/*.tsx`
+- Modify: `src/components/MainPanel.tsx`
+- Create: `src/components/panel/*.tsx`
+
+**Steps:**
+1. 优先抽出 overlay 集合、runtime managers、global search shell 和 panel controls。
+2. 每次抽取保持 props 小、selector 精确、行为不变。
+3. 对关键 controller 添加测试。
+4. 记录文件行数下降和 effect cleanup。
+
+### Task 9: 清理重复兼容、死代码和 lint warning
+
+**Files:**
+- Delete: `src/platform/userscript/chrome-adapter-polyfill.ts`
+- Delete: `src/tabs/options/pages/index.ts`
+- Refactor: `src/contents/scroll-lock-main.ts`
+- Refactor: `src/platform/userscript/scroll-lock-inject.ts`
+- Modify: lint 报告涉及的 TypeScript 文件
+
+**Steps:**
+1. 删除确认无引用文件。
+2. 抽取 scroll-lock 共享逻辑，平台文件只保留桥接。
+3. 将 `any` 收敛为 unknown/明确接口，修复 hook 和 console warning。
+4. 将 lint 改为 `--max-warnings=0` 并验证。
+
+### Task 10: 文档治理
+
+**Files:**
+- Review/Delete/Update: `docs/developer/*`
+- Modify: `docs/developer/architecture.md`
+- Modify: `docs/developer/css-architecture.md`
+- Modify: `docs/developer/options-page-ui.md`
+- Modify: `docs/developer/project-audit-2026-07-10.md`
+
+**Steps:**
+1. 用引用搜索判断过时文档是否仍有唯一信息。
+2. 删除完全被替代的文档；保留的文档更新为当前架构。
+3. 在审计报告中增加 remediation 状态表和最终体积。
+
+### Task 11: 两轮 review、提交与 PR
+
+**Steps:**
+1. 运行 `pnpm format:check`、`pnpm lint:check`、`pnpm typecheck`、`pnpm test:run`、`pnpm build`、`pnpm build:userscript`。
+2. 第一轮 review：逐个审计 ID 对照代码和测试。
+3. 修正发现，重复完整检查。
+4. 第二轮 review：检查 diff、重复数据源、cleanup、主题、i18n、双平台和安全退化。
+5. 使用 Conventional Commits 提交。
+6. 推送分支并使用英文标题/正文创建 GitHub PR。
+

From e0338b0f6facb4501e6234d652b9541f08bd1418 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 14:49:44 +0800
Subject: [PATCH 02/17] test(core): add audit regression coverage

---
 package.json                               |   9 +-
 pnpm-lock.yaml                             | 863 +++++++++++++++++++--
 src/components/ui/Switch.test.tsx          |  28 +
 src/components/ui/Switch.tsx               |  14 +-
 src/core/model-locker.test.ts              |  45 ++
 src/core/model-locker.ts                   |  22 +-
 src/core/polling-task-registry.test.ts     |  41 +
 src/styles/settings.css                    |  14 +
 src/tabs/options/components/SettingRow.tsx |  33 +-
 src/test/setup.ts                          |  15 +
 src/utils/settings-normalize.test.ts       |  42 +
 vitest.config.ts                           |  19 +
 12 files changed, 1065 insertions(+), 80 deletions(-)
 create mode 100644 src/components/ui/Switch.test.tsx
 create mode 100644 src/core/model-locker.test.ts
 create mode 100644 src/core/polling-task-registry.test.ts
 create mode 100644 src/test/setup.ts
 create mode 100644 src/utils/settings-normalize.test.ts
 create mode 100644 vitest.config.ts

diff --git a/package.json b/package.json
index b44b95f3a..075fb2d05 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
     "build": "pnpm prepare:mermaid-assets && plasmo build",
     "build:firefox": "pnpm prepare:mermaid-assets && plasmo build --target=firefox-mv3",
     "build:all": "pnpm build && pnpm build:firefox",
@@ -68,6 +70,9 @@
     "@commitlint/cli": "^20.3.1",
     "@commitlint/config-conventional": "^20.3.1",
     "@mermaid-js/tiny": "11.13.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/chrome": "^0.0.258",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.19.0",
@@ -81,13 +86,15 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "husky": "^9.1.7",
+    "jsdom": "26.1.0",
     "lint-staged": "^16.2.7",
     "prettier": "3.2.4",
     "terser": "^5.46.0",
     "typescript": "5.3.3",
     "vite": "^7.3.1",
     "vite-plugin-monkey": "^7.1.8",
-    "vitepress": "^1.6.4"
+    "vitepress": "^1.6.4",
+    "vitest": "3.2.4"
   },
   "manifest": {
     "name": "__MSG_extensionName__",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7629069ab..1b7677128 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
         version: 2.1.1
       plasmo:
         specifier: 0.90.5
-        version: 0.90.5(@swc/core@1.15.10(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(@types/node@20.19.30)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.46.0)
+        version: 0.90.5(@swc/core@1.15.10(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(@types/node@20.19.30)(lodash@4.18.1)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.46.0)
       react:
         specifier: ^18.2.0
         version: 18.3.1
@@ -72,6 +72,15 @@ importers:
       '@mermaid-js/tiny':
         specifier: 11.13.0
         version: 11.13.0
+      '@testing-library/jest-dom':
+        specifier: 6.6.3
+        version: 6.6.3
+      '@testing-library/react':
+        specifier: 16.3.0
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/chrome':
         specifier: ^0.0.258
         version: 0.0.258
@@ -111,6 +120,9 @@ importers:
       husky:
         specifier: ^9.1.7
         version: 9.1.7
+      jsdom:
+        specifier: 26.1.0
+        version: 26.1.0
       lint-staged:
         specifier: ^16.2.7
         version: 16.2.7
@@ -132,9 +144,15 @@ importers:
       vitepress:
         specifier: ^1.6.4
         version: 1.6.4(@algolia/client-search@5.47.0)(@types/node@20.19.30)(@types/react@18.3.27)(change-case@5.4.4)(less@4.5.1)(lightningcss@1.31.1)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.97.3)(search-insights@2.17.3)(terser@5.46.0)(typescript@5.3.3)
+      vitest:
+        specifier: 3.2.4
+        version: 3.2.4(@types/node@20.19.30)(jiti@2.6.1)(jsdom@26.1.0)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
 
 packages:
 
+  '@adobe/css-tools@4.5.0':
+    resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==}
+
   '@algolia/abtesting@1.13.0':
     resolution: {integrity: sha512-Zrqam12iorp3FjiKMXSTpedGYznZ3hTEOAr2oCxI8tbF8bS1kQHClyDYNq/eV0ewMNLyFkgZVWjaS+8spsOYiQ==}
     engines: {node: '>= 14.0.0'}
@@ -215,6 +233,9 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
   '@babel/code-frame@7.28.6':
     resolution: {integrity: sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==}
     engines: {node: '>=6.9.0'}
@@ -371,6 +392,34 @@ packages:
     resolution: {integrity: sha512-VmIFV/JkBRhDRRv7N5B7zEUkNZIx9Mp+8Pe65erz0rKycXLsi8Epcw0XJ+btSeRXgTzE7DyOyA9bkJ9mn/yqVQ==}
     engines: {node: '>=v18'}
 
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
   '@docsearch/css@3.8.2':
     resolution: {integrity: sha512-y05ayQFyUmCXze79+56v/4HpycYF3uFqB78pLPrSV5ZKAlDuIAAJNhaRi8tTdRNXh05yxX/TyNnzD6LwSM89vQ==}
 
@@ -939,183 +988,155 @@ packages:
     resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm64@1.2.4':
     resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.0.5':
     resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.4':
     resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.4':
     resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-riscv64@1.2.4':
     resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.0.4':
     resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.4':
     resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.0.4':
     resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.4':
     resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
     resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.0.4':
     resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linux-arm64@0.33.5':
     resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-arm64@0.34.5':
     resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-arm@0.33.5':
     resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.5':
     resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.5':
     resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-riscv64@0.34.5':
     resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.33.5':
     resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.5':
     resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-x64@0.33.5':
     resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.5':
     resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.33.5':
     resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linuxmusl-arm64@0.34.5':
     resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.33.5':
     resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.5':
     resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-wasm32@0.33.5':
     resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
@@ -1774,42 +1795,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -2116,79 +2131,66 @@ packages:
     resolution: {integrity: sha512-E8jKK87uOvLrrLN28jnAAAChNq5LeCd2mGgZF+fGF5D507WlG/Noct3lP/QzQ6MrqJ5BCKNwI9ipADB6jyiq2A==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.56.0':
     resolution: {integrity: sha512-jQosa5FMYF5Z6prEpTCCmzCXz6eKr/tCBssSmQGEeozA9tkRUty/5Vx06ibaOP9RCrW1Pvb8yp3gvZhHwTDsJw==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.56.0':
     resolution: {integrity: sha512-uQVoKkrC1KGEV6udrdVahASIsaF8h7iLG0U0W+Xn14ucFwi6uS539PsAr24IEF9/FoDtzMeeJXJIBo5RkbNWvQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.56.0':
     resolution: {integrity: sha512-vLZ1yJKLxhQLFKTs42RwTwa6zkGln+bnXc8ueFGMYmBTLfNu58sl5/eXyxRa2RarTkJbXl8TKPgfS6V5ijNqEA==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.56.0':
     resolution: {integrity: sha512-FWfHOCub564kSE3xJQLLIC/hbKqHSVxy8vY75/YHHzWvbJL7aYJkdgwD/xGfUlL5UV2SB7otapLrcCj2xnF1dg==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.56.0':
     resolution: {integrity: sha512-z1EkujxIh7nbrKL1lmIpqFTc/sr0u8Uk0zK/qIEFldbt6EDKWFk/pxFq3gYj4Bjn3aa9eEhYRlL3H8ZbPT1xvA==}
     cpu: [loong64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.56.0':
     resolution: {integrity: sha512-iNFTluqgdoQC7AIE8Q34R3AuPrJGJirj5wMUErxj22deOcY7XwZRaqYmB6ZKFHoVGqRcRd0mqO+845jAibKCkw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.56.0':
     resolution: {integrity: sha512-MtMeFVlD2LIKjp2sE2xM2slq3Zxf9zwVuw0jemsxvh1QOpHSsSzfNOTH9uYW9i1MXFxUSMmLpeVeUzoNOKBaWg==}
     cpu: [ppc64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.56.0':
     resolution: {integrity: sha512-in+v6wiHdzzVhYKXIk5U74dEZHdKN9KH0Q4ANHOTvyXPG41bajYRsy7a8TPKbYPl34hU7PP7hMVHRvv/5aCSew==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.56.0':
     resolution: {integrity: sha512-yni2raKHB8m9NQpI9fPVwN754mn6dHQSbDTwxdr9SE0ks38DTjLMMBjrwvB5+mXrX+C0npX0CVeCUcvvvD8CNQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.56.0':
     resolution: {integrity: sha512-zhLLJx9nQPu7wezbxt2ut+CI4YlXi68ndEve16tPc/iwoylWS9B3FxpLS2PkmfYgDQtosah07Mj9E0khc3Y+vQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.56.0':
     resolution: {integrity: sha512-MVC6UDp16ZSH7x4rtuJPAEoE1RwS8N4oK9DLHy3FTEdFoUTCFVzMfJl/BVJ330C+hx8FfprA5Wqx4FhZXkj2Kw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.56.0':
     resolution: {integrity: sha512-ZhGH1eA4Qv0lxaV00azCIS1ChedK0V32952Md3FtnxSqZTBTd6tgil4nZT5cU8B+SIw3PFYkvyR4FKo2oyZIHA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.56.0':
     resolution: {integrity: sha512-O16XcmyDeFI9879pEcmtWvD/2nyxR9mF7Gs44lf1vGGx8Vg2DRNx11aVXBEqOQhWb92WN4z7fW/q4+2NYzCbBA==}
@@ -2373,56 +2375,48 @@ packages:
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@swc/core-linux-arm64-gnu@1.3.96':
     resolution: {integrity: sha512-c/IiJ0s1y3Ymm2BTpyC/xr6gOvoqAVETrivVXHq68xgNms95luSpbYQ28rqaZC8bQC8M5zdXpSc0T8DJu8RJGw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@swc/core-linux-arm64-musl@1.15.10':
     resolution: {integrity: sha512-4uAHO3nbfbrTcmO/9YcVweTQdx5fN3l7ewwl5AEK4yoC4wXmoBTEPHAVdKNe4r9+xrTgd4BgyPsy0409OjjlMw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@swc/core-linux-arm64-musl@1.3.96':
     resolution: {integrity: sha512-i5/UTUwmJLri7zhtF6SAo/4QDQJDH2fhYJaBIUhrICmIkRO/ltURmpejqxsM/ye9Jqv5zG7VszMC0v/GYn/7BQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@swc/core-linux-x64-gnu@1.15.10':
     resolution: {integrity: sha512-W0h9ONNw1pVIA0cN7wtboOSTl4Jk3tHq+w2cMPQudu9/+3xoCxpFb9ZdehwCAk29IsvdWzGzY6P7dDVTyFwoqg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@swc/core-linux-x64-gnu@1.3.96':
     resolution: {integrity: sha512-USdaZu8lTIkm4Yf9cogct/j5eqtdZqTgcTib4I+NloUW0E/hySou3eSyp3V2UAA1qyuC72ld1otXuyKBna0YKQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@swc/core-linux-x64-musl@1.15.10':
     resolution: {integrity: sha512-XQNZlLZB62S8nAbw7pqoqwy91Ldy2RpaMRqdRN3T+tAg6Xg6FywXRKCsLh6IQOadr4p1+lGnqM/Wn35z5a/0Vw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@swc/core-linux-x64-musl@1.3.96':
     resolution: {integrity: sha512-QYErutd+G2SNaCinUVobfL7jWWjGTI0QEoQ6hqTp7PxCJS/dmKmj3C5ZkvxRYcq7XcZt7ovrYCTwPTHzt6lZBg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@swc/core-win32-arm64-msvc@1.15.10':
     resolution: {integrity: sha512-qnAGrRv5Nj/DATxAmCnJQRXXQqnJwR0trxLndhoHoxGci9MuguNIjWahS0gw8YZFjgTinbTxOwzatkoySihnmw==}
@@ -2491,10 +2485,42 @@ packages:
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
     engines: {node: '>=14.16'}
 
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.6.3':
+    resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.0':
+    resolution: {integrity: sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -2507,12 +2533,18 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
   '@types/chrome@0.0.258':
     resolution: {integrity: sha512-vicJi6cg2zaFuLmLY7laG6PHBknjKFusPYlaKQ9Zlycskofy71rStlGvW07MUuqUIVorZf8k5KH+zeTTGcH2dQ==}
 
   '@types/conventional-commits-parser@5.0.2':
     resolution: {integrity: sha512-BgT2szDXnVypgpNxOK8aL5SGjUdaQbC++WZNjF1Qge3Og2+zhHj+RWhmehLhYyvQwqAmvezruVfOf8+3m74W+g==}
 
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -2650,6 +2682,38 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
+  '@vitest/mocker@3.2.4':
+    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+
+  '@vitest/pretty-format@3.2.7':
+    resolution: {integrity: sha512-KUHlwqVu0sRlhCdyPdQ/wBoTfRahjUky1MubOmYw9fWfIZy1gNoHpuaaQBPAaMaVYdQYHJLurzj8ECCj5OwTqA==}
+
+  '@vitest/runner@3.2.4':
+    resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
+
+  '@vitest/snapshot@3.2.4':
+    resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
+
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
   '@vue/compiler-core@3.3.4':
     resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
 
@@ -2791,6 +2855,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
@@ -2821,6 +2889,10 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
@@ -2835,6 +2907,9 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -2874,6 +2949,10 @@ packages:
     resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
     engines: {node: '>= 0.4'}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   async-function@1.0.0:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
@@ -2991,6 +3070,14 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
+  chalk@3.0.0:
+    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
+    engines: {node: '>=8'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -3011,6 +3098,10 @@ packages:
   chardet@2.1.1:
     resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
 
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -3165,10 +3256,17 @@ packages:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
   csso@4.2.0:
     resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
     engines: {node: '>=8.0.0'}
 
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -3179,6 +3277,10 @@ packages:
     resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
     engines: {node: '>=12'}
 
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
@@ -3200,10 +3302,17 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
   decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
@@ -3263,6 +3372,12 @@ packages:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
 
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
@@ -3335,6 +3450,10 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   entities@7.0.1:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
@@ -3370,6 +3489,9 @@ packages:
     resolution: {integrity: sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -3486,6 +3608,10 @@ packages:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
 
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
   fast-check@3.23.2:
     resolution: {integrity: sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==}
     engines: {node: '>=8.0.0'}
@@ -3729,6 +3855,10 @@ packages:
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
@@ -3770,10 +3900,18 @@ packages:
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
   http2-wrapper@2.2.1:
     resolution: {integrity: sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==}
     engines: {node: '>=10.19.0'}
 
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -3825,6 +3963,10 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
@@ -3948,6 +4090,9 @@ packages:
     resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
     engines: {node: '>=12'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
@@ -4039,10 +4184,22 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   js-yaml@4.1.1:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -4162,56 +4319,48 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-gnu@1.31.1:
     resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.21.8:
     resolution: {integrity: sha512-01gWShXrgoIb8urzShpn1RWtZuaSyKSzF2hfO+flzlTPoACqcO3rgcu/3af4Cw54e8vKzL5hPRo4kROmgaOMLg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-arm64-musl@1.31.1:
     resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.21.8:
     resolution: {integrity: sha512-yVB5vYJjJb/Aku0V9QaGYIntvK/1TJOlNB9GmkNpXX5bSSP2pYW4lWW97jxFMHO908M0zjEt1qyOLMyqojHL+Q==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-gnu@1.31.1:
     resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.21.8:
     resolution: {integrity: sha512-TYi+KNtBVK0+FZvxTX/d5XJb+tw3Jq+2Rr9hW359wp1afsi1Vkg+uVGgbn+m2dipa5XwpCseQq81ylMlXuyfPw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-musl@1.31.1:
     resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.31.1:
     resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
@@ -4310,6 +4459,9 @@ packages:
   lodash.upperfirst@4.3.1:
     resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
 
+  lodash@4.18.1:
+    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
+
   log-update@6.1.0:
     resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
     engines: {node: '>=18'}
@@ -4318,10 +4470,16 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
   lowercase-keys@3.0.0:
     resolution: {integrity: sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -4329,6 +4487,10 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -4442,6 +4604,10 @@ packages:
     resolution: {integrity: sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
   minimatch@3.0.8:
     resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
 
@@ -4548,6 +4714,9 @@ packages:
   nullthrows@1.1.1:
     resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
 
+  nwsapi@2.2.24:
+    resolution: {integrity: sha512-7YRhZ3jS45LwmSCT4b2sVFHt/WuovaktDU07QrtOBY2PXskss5a9jfmR9jptyumwXST+rFjrmppMY1KT/yn35A==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -4642,6 +4811,9 @@ packages:
     resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
     engines: {node: '>= 0.10'}
 
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -4661,6 +4833,13 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
@@ -4756,6 +4935,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   process@0.11.10:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
@@ -4805,6 +4988,9 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
@@ -4835,6 +5021,10 @@ packages:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
 
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -4911,6 +5101,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
   run-applescript@7.1.0:
     resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
     engines: {node: '>=18'}
@@ -4952,6 +5145,10 @@ packages:
     resolution: {integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==}
     engines: {node: '>=11.0.0'}
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -5028,6 +5225,9 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
@@ -5081,6 +5281,12 @@ packages:
     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
     deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -5135,6 +5341,10 @@ packages:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
 
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
   strip-json-comments@2.0.1:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
@@ -5143,6 +5353,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
   sucrase@3.35.1:
     resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -5172,6 +5385,9 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   systemjs@6.15.1:
     resolution: {integrity: sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==}
 
@@ -5205,6 +5421,12 @@ packages:
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
   tinyexec@1.0.2:
     resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
     engines: {node: '>=18'}
@@ -5213,13 +5435,40 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
   tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
 
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -5369,6 +5618,11 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
   vite-plugin-monkey@7.1.9:
     resolution: {integrity: sha512-kYtcRH8DsbrwfugrviYRuk50weY5yyVKcuGRkjUSc7mK0uPFtOHK8sUSEecpiS9725IF/4uyum8bYHs7dswDBg==}
     peerDependencies:
@@ -5460,6 +5714,34 @@ packages:
       postcss:
         optional: true
 
+  vitest@3.2.4:
+    resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.2.4
+      '@vitest/ui': 3.2.4
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
 
@@ -5471,12 +5753,33 @@ packages:
       typescript:
         optional: true
 
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
   weak-lru-cache@1.2.2:
     resolution: {integrity: sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==}
 
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
@@ -5501,6 +5804,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -5517,10 +5825,29 @@ packages:
     resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
     engines: {node: '>=18'}
 
+  ws@8.21.0:
+    resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   wsl-utils@0.1.0:
     resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
     engines: {node: '>=18'}
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   xxhash-wasm@0.4.2:
     resolution: {integrity: sha512-/eyHVRJQCirEkSZ1agRSCwriMhwlyUcFkXD5TPVSLP+IPzjsqMVzZwdoczLp1SoQU0R3dxz1RpIK+4YNQbCVOA==}
 
@@ -5598,6 +5925,8 @@ packages:
 
 snapshots:
 
+  '@adobe/css-tools@4.5.0': {}
+
   '@algolia/abtesting@1.13.0':
     dependencies:
       '@algolia/client-common': 5.47.0
@@ -5715,6 +6044,14 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
 
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
   '@babel/code-frame@7.28.6':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -5939,6 +6276,26 @@ snapshots:
       '@types/conventional-commits-parser': 5.0.2
       chalk: 5.4.1
 
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
   '@docsearch/css@3.8.2': {}
 
   '@docsearch/js@3.8.2(@algolia/client-search@5.47.0)(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
@@ -7386,10 +7743,11 @@ snapshots:
     dependencies:
       sharp: 0.34.5
 
-  '@plasmohq/consolidate@0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@plasmohq/consolidate@0.17.0(lodash@4.18.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       bluebird: 3.7.2
     optionalDependencies:
+      lodash: 4.18.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
@@ -7411,7 +7769,7 @@ snapshots:
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@plasmohq/parcel-config@0.42.0(@swc/core@1.15.10(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.46.0)(typescript@5.8.2)':
+  '@plasmohq/parcel-config@0.42.0(@swc/core@1.15.10(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(lodash@4.18.1)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.46.0)(typescript@5.8.2)':
     dependencies:
       '@parcel/compressor-raw': 2.9.3(@parcel/core@2.9.3)
       '@parcel/config-default': 2.9.3(@parcel/core@2.9.3)(@swc/helpers@0.5.18)(postcss@8.5.6)(terser@5.46.0)(typescript@5.8.2)
@@ -7447,7 +7805,7 @@ snapshots:
       '@plasmohq/parcel-transformer-inline-css': 0.3.11
       '@plasmohq/parcel-transformer-manifest': 0.21.0
       '@plasmohq/parcel-transformer-svelte': 0.6.0
-      '@plasmohq/parcel-transformer-vue': 0.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@plasmohq/parcel-transformer-vue': 0.5.0(lodash@4.18.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/helpers'
@@ -7629,7 +7987,7 @@ snapshots:
       '@parcel/utils': 2.9.3
       svelte: 4.2.2
 
-  '@plasmohq/parcel-transformer-vue@0.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@plasmohq/parcel-transformer-vue@0.5.0(lodash@4.18.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@parcel/core': 2.9.3
       '@parcel/diagnostic': 2.9.3
@@ -7637,7 +7995,7 @@ snapshots:
       '@parcel/source-map': 2.1.1
       '@parcel/types': 2.9.3(@parcel/core@2.9.3)
       '@parcel/utils': 2.9.3
-      '@plasmohq/consolidate': 0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@plasmohq/consolidate': 0.17.0(lodash@4.18.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@vue/compiler-sfc': 3.3.4
       nullthrows: 1.1.1
       semver: 7.5.4
@@ -8017,8 +8375,45 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.28.6
+      '@babel/runtime': 7.28.6
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.6.3':
+    dependencies:
+      '@adobe/css-tools': 4.5.0
+      aria-query: 5.3.2
+      chalk: 3.0.0
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      lodash: 4.18.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@testing-library/dom': 10.4.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
   '@trysound/sax@0.2.0': {}
 
+  '@types/aria-query@5.0.4': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.28.6
@@ -8040,6 +8435,11 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.6
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/chrome@0.0.258':
     dependencies:
       '@types/filesystem': 0.0.36
@@ -8049,6 +8449,8 @@ snapshots:
     dependencies:
       '@types/node': 20.19.30
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/estree@1.0.8': {}
 
   '@types/filesystem@0.0.36':
@@ -8215,6 +8617,52 @@ snapshots:
       vite: 5.4.21(@types/node@20.19.30)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)
       vue: 3.5.27(typescript@5.3.3)
 
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
+  '@vitest/mocker@3.2.4(vite@7.3.1(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))':
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.1(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+
+  '@vitest/pretty-format@3.2.4':
+    dependencies:
+      tinyrainbow: 2.0.0
+
+  '@vitest/pretty-format@3.2.7':
+    dependencies:
+      tinyrainbow: 2.0.0
+
+  '@vitest/runner@3.2.4':
+    dependencies:
+      '@vitest/utils': 3.2.4
+      pathe: 2.0.3
+      strip-literal: 3.1.0
+
+  '@vitest/snapshot@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.4
+
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
   '@vue/compiler-core@3.3.4':
     dependencies:
       '@babel/parser': 7.28.6
@@ -8393,6 +8841,8 @@ snapshots:
 
   acorn@8.15.0: {}
 
+  agent-base@7.1.4: {}
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -8440,6 +8890,8 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  ansi-styles@5.2.0: {}
+
   ansi-styles@6.2.3: {}
 
   any-promise@1.3.0: {}
@@ -8451,6 +8903,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
   aria-query@5.3.2: {}
 
   array-buffer-byte-length@1.0.2:
@@ -8514,6 +8970,8 @@ snapshots:
       get-intrinsic: 1.3.0
       is-array-buffer: 3.0.5
 
+  assertion-error@2.0.1: {}
+
   async-function@1.0.0: {}
 
   available-typed-arrays@1.0.7:
@@ -8633,6 +9091,19 @@ snapshots:
 
   ccount@2.0.1: {}
 
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
+  chalk@3.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -8648,6 +9119,8 @@ snapshots:
 
   chardet@2.1.1: {}
 
+  check-error@2.1.3: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -8825,16 +9298,28 @@ snapshots:
 
   css-what@6.2.2: {}
 
+  css.escape@1.5.1: {}
+
   csso@4.2.0:
     dependencies:
       css-tree: 1.1.3
 
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
   csstype@3.2.3: {}
 
   cuint@0.2.2: {}
 
   dargs@8.1.0: {}
 
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
   data-view-buffer@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -8857,10 +9342,14 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decimal.js@10.6.0: {}
+
   decompress-response@6.0.0:
     dependencies:
       mimic-response: 3.1.0
 
+  deep-eql@5.0.2: {}
+
   deep-extend@0.6.0: {}
 
   deep-is@0.1.4: {}
@@ -8908,6 +9397,10 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
   dom-serializer@1.4.1:
     dependencies:
       domelementtype: 2.3.0
@@ -8981,6 +9474,8 @@ snapshots:
 
   entities@4.5.0: {}
 
+  entities@6.0.1: {}
+
   entities@7.0.1: {}
 
   env-paths@2.2.1: {}
@@ -9076,6 +9571,8 @@ snapshots:
       iterator.prototype: 1.1.5
       safe-array-concat: 1.1.3
 
+  es-module-lexer@1.7.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -9308,6 +9805,8 @@ snapshots:
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
 
+  expect-type@1.4.0: {}
+
   fast-check@3.23.2:
     dependencies:
       pure-rand: 6.1.0
@@ -9577,6 +10076,10 @@ snapshots:
 
   hookable@5.5.3: {}
 
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
   html-void-elements@3.0.0: {}
 
   htmlnano@2.1.5(postcss@8.5.6)(svgo@2.8.0)(terser@5.46.0)(typescript@5.8.2):
@@ -9607,11 +10110,25 @@ snapshots:
 
   http-cache-semantics@4.2.0: {}
 
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   http2-wrapper@2.2.1:
     dependencies:
       quick-lru: 5.1.1
       resolve-alpn: 1.2.1
 
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   human-signals@2.1.0: {}
 
   husky@9.1.7: {}
@@ -9619,7 +10136,6 @@ snapshots:
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
-    optional: true
 
   iconv-lite@0.7.2:
     dependencies:
@@ -9647,6 +10163,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  indent-string@4.0.0: {}
+
   ini@1.3.8: {}
 
   ini@4.1.1: {}
@@ -9764,6 +10282,8 @@ snapshots:
 
   is-path-inside@4.0.0: {}
 
+  is-potential-custom-element-name@1.0.1: {}
+
   is-reference@3.0.3:
     dependencies:
       '@types/estree': 1.0.8
@@ -9846,10 +10366,39 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
 
+  jsdom@26.1.0:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.24
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.21.0
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
@@ -10092,6 +10641,8 @@ snapshots:
 
   lodash.upperfirst@4.3.1: {}
 
+  lodash@4.18.1: {}
+
   log-update@6.1.0:
     dependencies:
       ansi-escapes: 7.2.0
@@ -10104,8 +10655,12 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  loupe@3.2.1: {}
+
   lowercase-keys@3.0.0: {}
 
+  lru-cache@10.4.3: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -10114,6 +10669,8 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lz-string@1.5.0: {}
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -10215,6 +10772,8 @@ snapshots:
 
   mimic-response@4.0.0: {}
 
+  min-indent@1.0.1: {}
+
   minimatch@3.0.8:
     dependencies:
       brace-expansion: 1.1.12
@@ -10310,6 +10869,8 @@ snapshots:
 
   nullthrows@1.1.1: {}
 
+  nwsapi@2.2.24: {}
+
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}
@@ -10424,6 +10985,10 @@ snapshots:
 
   parse-node-version@1.0.1: {}
 
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
   path-exists@4.0.0: {}
 
   path-exists@5.0.0: {}
@@ -10434,6 +10999,10 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pathe@2.0.3: {}
+
+  pathval@2.0.1: {}
+
   perfect-debounce@1.0.0: {}
 
   periscopic@3.1.0:
@@ -10457,7 +11026,7 @@ snapshots:
 
   pirates@4.0.7: {}
 
-  plasmo@0.90.5(@swc/core@1.15.10(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(@types/node@20.19.30)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.46.0):
+  plasmo@0.90.5(@swc/core@1.15.10(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(@types/node@20.19.30)(lodash@4.18.1)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.46.0):
     dependencies:
       '@expo/spawn-async': 1.7.2
       '@parcel/core': 2.9.3
@@ -10465,7 +11034,7 @@ snapshots:
       '@parcel/package-manager': 2.9.3(@parcel/core@2.9.3)
       '@parcel/watcher': 2.5.1
       '@plasmohq/init': 0.7.0
-      '@plasmohq/parcel-config': 0.42.0(@swc/core@1.15.10(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.46.0)(typescript@5.8.2)
+      '@plasmohq/parcel-config': 0.42.0(@swc/core@1.15.10(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(lodash@4.18.1)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.46.0)(typescript@5.8.2)
       '@plasmohq/parcel-core': 0.1.11
       buffer: 6.0.3
       chalk: 5.4.1
@@ -10597,6 +11166,12 @@ snapshots:
 
   prettier@3.2.4: {}
 
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
   process@0.11.10: {}
 
   prop-types@15.8.1:
@@ -10639,6 +11214,8 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react-is@17.0.2: {}
+
   react-refresh@0.14.0: {}
 
   react-refresh@0.18.0: {}
@@ -10660,6 +11237,11 @@ snapshots:
 
   readdirp@4.1.2: {}
 
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -10764,6 +11346,8 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.56.0
       fsevents: 2.3.3
 
+  rrweb-cssom@0.8.0: {}
+
   run-applescript@7.1.0: {}
 
   run-async@3.0.0: {}
@@ -10810,6 +11394,10 @@ snapshots:
   sax@1.4.4:
     optional: true
 
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
@@ -10952,6 +11540,8 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  siginfo@2.0.0: {}
+
   signal-exit@3.0.7: {}
 
   signal-exit@4.1.0: {}
@@ -10990,6 +11580,10 @@ snapshots:
 
   stable@0.1.8: {}
 
+  stackback@0.0.2: {}
+
+  std-env@3.10.0: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -11073,10 +11667,18 @@ snapshots:
 
   strip-final-newline@2.0.0: {}
 
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
   strip-json-comments@2.0.1: {}
 
   strip-json-comments@3.1.1: {}
 
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
   sucrase@3.35.1:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -11125,6 +11727,8 @@ snapshots:
       picocolors: 1.1.1
       stable: 0.1.8
 
+  symbol-tree@3.2.4: {}
+
   systemjs@6.15.1: {}
 
   tabbable@6.4.0: {}
@@ -11157,6 +11761,10 @@ snapshots:
 
   through@2.3.8: {}
 
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
   tinyexec@1.0.2: {}
 
   tinyglobby@0.2.15:
@@ -11164,14 +11772,34 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinypool@1.1.1: {}
+
+  tinyrainbow@2.0.0: {}
+
+  tinyspy@4.0.4: {}
+
+  tldts-core@6.1.86: {}
+
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
 
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+
   tr46@1.0.1:
     dependencies:
       punycode: 2.3.1
 
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
   tree-kill@1.2.2: {}
 
   trim-lines@3.0.1: {}
@@ -11333,6 +11961,27 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
+  vite-node@3.2.4(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.3.1(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
   vite-plugin-monkey@7.1.9(postcss@8.5.6)(vite@7.3.1(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
     dependencies:
       acorn: 8.15.0
@@ -11431,6 +12080,48 @@ snapshots:
       - typescript
       - universal-cookie
 
+  vitest@3.2.4(@types/node@20.19.30)(jiti@2.6.1)(jsdom@26.1.0)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@7.3.1(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      '@vitest/pretty-format': 3.2.7
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.4.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 7.3.1(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite-node: 3.2.4(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 20.19.30
+      jsdom: 26.1.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
   vue@3.3.4:
     dependencies:
       '@vue/compiler-dom': 3.3.4
@@ -11449,10 +12140,27 @@ snapshots:
     optionalDependencies:
       typescript: 5.3.3
 
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
   weak-lru-cache@1.2.2: {}
 
   webidl-conversions@4.0.2: {}
 
+  webidl-conversions@7.0.0: {}
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+
   whatwg-url@7.1.0:
     dependencies:
       lodash.sortby: 4.7.0
@@ -11504,6 +12212,11 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   word-wrap@1.2.5: {}
 
   wrap-ansi@6.2.0:
@@ -11524,10 +12237,16 @@ snapshots:
       string-width: 7.2.0
       strip-ansi: 7.1.2
 
+  ws@8.21.0: {}
+
   wsl-utils@0.1.0:
     dependencies:
       is-wsl: 3.1.0
 
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
   xxhash-wasm@0.4.2: {}
 
   xxhashjs@0.2.2:
diff --git a/src/components/ui/Switch.test.tsx b/src/components/ui/Switch.test.tsx
new file mode 100644
index 000000000..5c0003aaa
--- /dev/null
+++ b/src/components/ui/Switch.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import React from "react"
+import { describe, expect, it, vi } from "vitest"
+
+import { ToggleRow } from "~tabs/options/components/SettingRow"
+
+describe("ToggleRow", () => {
+  it("associates the visible label with the checkbox", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    render(
+      <ToggleRow
+        label="Enable outline"
+        description="Refresh the outline while generating"
+        checked={false}
+        onChange={onChange}
+      />,
+    )
+
+    const checkbox = screen.getByRole("checkbox", { name: "Enable outline" })
+    await user.click(screen.getByText("Enable outline"))
+
+    expect(checkbox).toHaveFocus()
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/src/components/ui/Switch.tsx b/src/components/ui/Switch.tsx
index bc6432c95..0af218a52 100644
--- a/src/components/ui/Switch.tsx
+++ b/src/components/ui/Switch.tsx
@@ -4,9 +4,12 @@
 import React from "react"
 
 export interface SwitchProps {
+  id?: string
   checked: boolean
   onChange: (checked: boolean) => void
   disabled?: boolean
+  ariaLabel?: string
+  ariaLabelledBy?: string
   /** 尺寸: sm=32x18, md=36x20 */
   size?: "sm" | "md"
 }
@@ -16,16 +19,20 @@ export interface SwitchProps {
  * 使用 CSS 变量支持主题跟随
  */
 export const Switch: React.FC<SwitchProps> = ({
+  id,
   checked,
   onChange,
   disabled = false,
   size = "md",
+  ariaLabel,
+  ariaLabelledBy,
 }) => {
   // 尺寸配置
   const dimensions = size === "sm" ? { w: 32, h: 18, thumb: 14 } : { w: 36, h: 20, thumb: 16 }
 
   return (
     <label
+      className="gh-switch"
       style={{
         position: "relative",
         display: "inline-block",
@@ -34,13 +41,17 @@ export const Switch: React.FC<SwitchProps> = ({
         flexShrink: 0,
       }}>
       <input
+        id={id}
+        className="gh-switch-input"
         type="checkbox"
         checked={checked}
         onChange={() => onChange(!checked)}
         disabled={disabled}
-        style={{ opacity: 0, width: 0, height: 0, position: "absolute" }}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
       />
       <span
+        className="gh-switch-track"
         style={{
           position: "absolute",
           cursor: disabled ? "not-allowed" : "pointer",
@@ -55,6 +66,7 @@ export const Switch: React.FC<SwitchProps> = ({
           transition: "background-color 0.3s",
         }}>
         <span
+          className="gh-switch-thumb"
           style={{
             position: "absolute",
             height: `${dimensions.thumb}px`,
diff --git a/src/core/model-locker.test.ts b/src/core/model-locker.test.ts
new file mode 100644
index 000000000..150396299
--- /dev/null
+++ b/src/core/model-locker.test.ts
@@ -0,0 +1,45 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+import type { SiteAdapter } from "~adapters/base"
+
+import { ModelLocker } from "./model-locker"
+
+const createAdapter = () =>
+  ({
+    lockModel: vi.fn(),
+    getModelSwitcherConfig: vi.fn(() => null),
+    findElementBySelectors: vi.fn(() => null),
+    getModelLockCheckText: vi.fn(() => ""),
+  }) as unknown as SiteAdapter
+
+describe("ModelLocker", () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it("cancels a pending initial lock when disabled", () => {
+    const adapter = createAdapter()
+    const locker = new ModelLocker(adapter, { enabled: true, keyword: "pro" })
+
+    locker.start(1500)
+    locker.updateConfig({ enabled: false, keyword: "pro" })
+    vi.advanceTimersByTime(2000)
+
+    expect(adapter.lockModel).not.toHaveBeenCalled()
+  })
+
+  it("relock replaces the previous pending lock", () => {
+    const adapter = createAdapter()
+    const locker = new ModelLocker(adapter, { enabled: true, keyword: "pro" })
+
+    locker.start(1500)
+    locker.relock(300)
+    vi.advanceTimersByTime(2000)
+
+    expect(adapter.lockModel).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/src/core/model-locker.ts b/src/core/model-locker.ts
index 5db9f3fa3..659d4a966 100644
--- a/src/core/model-locker.ts
+++ b/src/core/model-locker.ts
@@ -18,6 +18,7 @@ export class ModelLocker {
   private adapter: SiteAdapter
   private config: ModelLockSiteConfig
   private isLocked = false
+  private startTimer: ReturnType<typeof setTimeout> | null = null
   private verifyTimer: ReturnType<typeof setInterval> | null = null
   private configDebounceTimer: ReturnType<typeof setTimeout> | null = null
 
@@ -31,6 +32,11 @@ export class ModelLocker {
     const oldKeyword = this.config.keyword
     this.config = config
 
+    if (!config.enabled || !config.keyword) {
+      this.stop()
+      return
+    }
+
     // 动态开关支持：从 false→true 或 关键词变化时触发锁定
     const needsLock =
       (!wasEnabled && config.enabled) || (config.enabled && config.keyword !== oldKeyword)
@@ -52,11 +58,19 @@ export class ModelLocker {
     if (!this.config.enabled || !this.config.keyword) return
     if (this.isLocked) return
 
+    if (this.startTimer) {
+      clearTimeout(this.startTimer)
+    }
+
+    const keyword = this.config.keyword
+
     // 延迟后开始锁定（初始化时需要延迟等待页面加载，手动触发时可直接执行）
-    setTimeout(() => {
+    this.startTimer = setTimeout(() => {
+      this.startTimer = null
+      if (!this.config.enabled || this.config.keyword !== keyword) return
       if (this.isLocked) return // 再次检查，避免重复锁定
 
-      this.adapter.lockModel(this.config.keyword, () => {
+      this.adapter.lockModel(keyword, () => {
         // 锁定成功后，启动持续监控（防止页面初始化后又改回默认值）
         this.startVerification()
       })
@@ -151,6 +165,10 @@ export class ModelLocker {
   }
 
   stop() {
+    if (this.startTimer) {
+      clearTimeout(this.startTimer)
+      this.startTimer = null
+    }
     // 停止防抖定时器
     if (this.configDebounceTimer) {
       clearTimeout(this.configDebounceTimer)
diff --git a/src/core/polling-task-registry.test.ts b/src/core/polling-task-registry.test.ts
new file mode 100644
index 000000000..fffd747db
--- /dev/null
+++ b/src/core/polling-task-registry.test.ts
@@ -0,0 +1,41 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+import { PollingTaskRegistry } from "./polling-task-registry"
+
+describe("PollingTaskRegistry", () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it("starts a task idempotently and stops it", () => {
+    const registry = new PollingTaskRegistry()
+    const run = vi.fn()
+
+    registry.start({ name: "sync", intervalMs: 100, run })
+    registry.start({ name: "sync", intervalMs: 100, run })
+    vi.advanceTimersByTime(250)
+
+    expect(run).toHaveBeenCalledTimes(2)
+    registry.stop("sync")
+    vi.advanceTimersByTime(250)
+    expect(run).toHaveBeenCalledTimes(2)
+  })
+
+  it("skips hidden document ticks when requested", () => {
+    const registry = new PollingTaskRegistry()
+    const run = vi.fn()
+    const hiddenSpy = vi.spyOn(document, "hidden", "get").mockReturnValue(true)
+
+    registry.start({ name: "visible-only", intervalMs: 100, runWhenHidden: false, run })
+    vi.advanceTimersByTime(250)
+
+    expect(run).not.toHaveBeenCalled()
+    hiddenSpy.mockReturnValue(false)
+    vi.advanceTimersByTime(100)
+    expect(run).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/src/styles/settings.css b/src/styles/settings.css
index 81a4b0f62..0245ad708 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -720,6 +720,20 @@
   margin-bottom: 2px;
 }
 
+.gh-switch-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+}
+
+.gh-switch-input:focus-visible + .gh-switch-track {
+  outline: 2px solid var(--gh-primary, #4285f4);
+  outline-offset: 3px;
+  box-shadow: var(--gh-input-focus-shadow, 0 0 0 3px rgba(66, 133, 244, 0.18));
+}
+
 .settings-row-label-with-badge {
   display: inline-flex;
   align-items: center;
diff --git a/src/tabs/options/components/SettingRow.tsx b/src/tabs/options/components/SettingRow.tsx
index 36ad1cb52..dc916a3ba 100644
--- a/src/tabs/options/components/SettingRow.tsx
+++ b/src/tabs/options/components/SettingRow.tsx
@@ -2,7 +2,7 @@
  * 设置行组件
  * 卡片内的一行设置项，左侧 Label + Description，右侧 Control
  */
-import React from "react"
+import React, { useId } from "react"
 
 import { Switch } from "~components/ui"
 
@@ -21,6 +21,9 @@ export interface SettingRowProps {
   style?: React.CSSProperties
   /** 稳定 setting id（用于定位/高亮） */
   settingId?: string
+  /** 关联表单控件，使可见标题可点击 */
+  controlId?: string
+  labelId?: string
 }
 
 /**
@@ -34,6 +37,8 @@ export const SettingRow: React.FC<SettingRowProps> = ({
   onDisabledClick,
   style,
   settingId,
+  controlId,
+  labelId,
 }) => {
   const isDisabledClickable = disabled && !!onDisabledClick
   return (
@@ -49,7 +54,15 @@ export const SettingRow: React.FC<SettingRowProps> = ({
         }
       }}>
       <div className="settings-row-info">
-        <div className="settings-row-label">{label}</div>
+        {controlId ? (
+          <label id={labelId} className="settings-row-label" htmlFor={controlId}>
+            {label}
+          </label>
+        ) : (
+          <div id={labelId} className="settings-row-label">
+            {label}
+          </div>
+        )}
         {description && <div className="settings-row-desc">{description}</div>}
       </div>
       {children && <div className="settings-row-control">{children}</div>}
@@ -79,14 +92,26 @@ export const ToggleRow: React.FC<ToggleRowProps> = ({
   onDisabledClick,
   settingId,
 }) => {
+  const generatedId = useId()
+  const inputId = settingId ? `setting-${settingId}` : `setting-toggle-${generatedId}`
+  const labelId = `${inputId}-label`
+
   return (
     <SettingRow
       label={label}
       description={description}
       disabled={disabled}
       onDisabledClick={onDisabledClick}
-      settingId={settingId}>
-      <Switch checked={checked} onChange={onChange} disabled={disabled} />
+      settingId={settingId}
+      controlId={inputId}
+      labelId={labelId}>
+      <Switch
+        id={inputId}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        ariaLabelledBy={labelId}
+      />
     </SettingRow>
   )
 }
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 000000000..ec4f4e171
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1,15 @@
+import "@testing-library/jest-dom/vitest"
+
+Object.defineProperty(window, "matchMedia", {
+  configurable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+  }),
+})
diff --git a/src/utils/settings-normalize.test.ts b/src/utils/settings-normalize.test.ts
new file mode 100644
index 000000000..ac56f954b
--- /dev/null
+++ b/src/utils/settings-normalize.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest"
+
+import { DEFAULT_SETTINGS } from "~constants/default-settings"
+
+import { normalizeSettings } from "./settings-normalize"
+
+describe("normalizeSettings", () => {
+  it("migrates legacy quick button fields without retaining duplicate sources", () => {
+    const normalized = normalizeSettings({
+      ...DEFAULT_SETTINGS,
+      collapsedButtons: [{ id: "panel", enabled: false }],
+      quickButtonsOpacity: 0.65,
+      toolsMenu: ["copyMarkdown"],
+      floatingToolbar: { open: false },
+      quickButtons: undefined,
+    })
+
+    expect(normalized.quickButtons.opacity).toBe(0.65)
+    expect(normalized.quickButtons.toolsMenu).toEqual(["copyMarkdown"])
+    expect(normalized.quickButtons.floatingToolbar.open).toBe(false)
+    expect(normalized.quickButtons.collapsed).toContainEqual({ id: "panel", enabled: false })
+    expect(normalized).not.toHaveProperty("collapsedButtons")
+    expect(normalized).not.toHaveProperty("quickButtonsOpacity")
+  })
+
+  it("normalizes legacy pixel widths to supported percentages", () => {
+    const normalized = normalizeSettings({
+      ...DEFAULT_SETTINGS,
+      layout: {
+        ...DEFAULT_SETTINGS.layout,
+        pageWidth: {
+          ...DEFAULT_SETTINGS.layout.pageWidth,
+          _default: { enabled: true, value: "1200", unit: "px" },
+        },
+      },
+    })
+
+    expect(normalized.layout.pageWidth._default.unit).toBe("%")
+    expect(Number(normalized.layout.pageWidth._default.value)).toBeGreaterThanOrEqual(50)
+    expect(Number(normalized.layout.pageWidth._default.value)).toBeLessThanOrEqual(100)
+  })
+})
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 000000000..28db2d3f1
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,19 @@
+import path from "node:path"
+
+import { defineConfig } from "vitest/config"
+
+export default defineConfig({
+  define: {
+    __PLATFORM__: JSON.stringify("extension"),
+  },
+  resolve: {
+    alias: [{ find: /^~/, replacement: `${path.resolve(__dirname, "src")}/` }],
+  },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./src/test/setup.ts"],
+    restoreMocks: true,
+    clearMocks: true,
+  },
+})

From a343353d07326809896d52f78d93a3bbc3bddb95 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 15:03:59 +0800
Subject: [PATCH 03/17] perf(runtime): load adapters and locales on demand

---
 src/adapters/index.test.ts                    |  25 +++
 src/adapters/index.ts                         | 177 +++++++++++----
 src/components/App.tsx                        |  32 +--
 src/components/ModelLockSettingsContent.tsx   |   4 +-
 src/components/QuickButtons.tsx               |   7 +-
 src/components/SettingsModal.tsx              |   2 +-
 src/contents/main.ts                          | 203 +++++++++---------
 src/contents/ui-entry.tsx                     |   9 +-
 src/core/adapter-runtime.test.ts              |  36 ++++
 src/core/adapter-runtime.ts                   |  19 ++
 src/core/modules-init.ts                      |   7 +-
 src/platform/userscript/entry.tsx             |  26 ++-
 src/popup.tsx                                 |   5 +-
 src/stores/settings-store.ts                  |   2 +-
 src/tabs/options.tsx                          |   4 +-
 src/tabs/options/components/SidebarFooter.tsx |   2 +-
 src/tabs/perm-request.tsx                     |   3 +-
 src/types/global.d.ts                         |   3 +
 src/utils/i18n.test.ts                        |  25 +++
 src/utils/i18n.ts                             | 155 ++++++++++---
 20 files changed, 532 insertions(+), 214 deletions(-)
 create mode 100644 src/adapters/index.test.ts
 create mode 100644 src/core/adapter-runtime.test.ts
 create mode 100644 src/core/adapter-runtime.ts
 create mode 100644 src/utils/i18n.test.ts

diff --git a/src/adapters/index.test.ts b/src/adapters/index.test.ts
new file mode 100644
index 000000000..63f9924e8
--- /dev/null
+++ b/src/adapters/index.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest"
+
+import { resolveAdapterModuleKey } from "./index"
+
+describe("resolveAdapterModuleKey", () => {
+  it.each([
+    ["business.gemini.google", "gemini-enterprise"],
+    ["gemini.google.com", "gemini"],
+    ["aistudio.google.com", "aistudio"],
+    ["chatgpt.com", "chatgpt"],
+    ["claude.ai", "claude"],
+    ["chat.deepseek.com", "deepseek"],
+    ["www.doubao.com", "doubao"],
+    ["chat.qwen.ai", "qwen-studio"],
+    ["qianwen.com", "qianwen"],
+    ["chat.z.ai", "zai"],
+  ] as const)("routes %s to %s", (hostname, moduleKey) => {
+    expect(resolveAdapterModuleKey(hostname)).toBe(moduleKey)
+  })
+
+  it("does not load an adapter for an unsupported or legacy hostname", () => {
+    expect(resolveAdapterModuleKey("example.com")).toBeNull()
+    expect(resolveAdapterModuleKey("chat.openai.com")).toBeNull()
+  })
+})
diff --git a/src/adapters/index.ts b/src/adapters/index.ts
index c455e1ab8..7a99fee21 100644
--- a/src/adapters/index.ts
+++ b/src/adapters/index.ts
@@ -1,58 +1,147 @@
 /**
  * 站点适配器工厂
  *
- * 根据当前页面 URL 自动选择合适的适配器
+ * 先按 hostname 选择唯一模块，再延迟加载对应适配器，避免每个入口都打包全部站点实现。
  */
 
-import { AIStudioAdapter } from "./aistudio"
-import { SiteAdapter } from "./base"
-import { ChatGLMAdapter } from "./chatglm"
-import { ChatGPTAdapter } from "./chatgpt"
-import { ClaudeAdapter } from "./claude"
-import { DeepSeekAdapter } from "./deepseek"
-import { DoubaoAdapter } from "./doubao"
-import { GeminiAdapter } from "./gemini"
-import { GeminiEnterpriseAdapter } from "./gemini-enterprise"
-import { GrokAdapter } from "./grok"
-import { ImaAdapter } from "./ima"
-import { KimiAdapter } from "./kimi"
-import { QianwenAdapter } from "./qianwen"
-import { QwenAiAdapter } from "./qwen-studio"
-import { YuanbaoAdapter } from "./yuanbao"
-import { ZaiAdapter } from "./zai"
+import type { SiteAdapter } from "./base"
 
-// 所有可用的适配器
-const adapters: SiteAdapter[] = [
-  new GeminiEnterpriseAdapter(),
-  new GeminiAdapter(),
-  new ChatGPTAdapter(),
-  new GrokAdapter(),
-  new AIStudioAdapter(),
-  new ClaudeAdapter(),
-  new DeepSeekAdapter(),
-  new DoubaoAdapter(),
-  new ImaAdapter(),
-  new ChatGLMAdapter(),
-  new KimiAdapter(),
-  new QwenAiAdapter(),
-  new QianwenAdapter(),
-  new YuanbaoAdapter(),
-  new ZaiAdapter(),
-]
+export type AdapterModuleKey =
+  | "aistudio"
+  | "chatglm"
+  | "chatgpt"
+  | "claude"
+  | "deepseek"
+  | "doubao"
+  | "gemini"
+  | "gemini-enterprise"
+  | "grok"
+  | "ima"
+  | "kimi"
+  | "qianwen"
+  | "qwen-studio"
+  | "yuanbao"
+  | "zai"
 
-/**
- * 获取当前页面匹配的适配器
- */
-export function getAdapter(): SiteAdapter | null {
-  for (const adapter of adapters) {
-    if (adapter.match()) {
-      return adapter
+export function resolveAdapterModuleKey(hostname: string): AdapterModuleKey | null {
+  const normalizedHostname = hostname.toLowerCase()
+
+  switch (normalizedHostname) {
+    case "business.gemini.google":
+      return "gemini-enterprise"
+    case "gemini.google.com":
+      return "gemini"
+    case "aistudio.google.com":
+      return "aistudio"
+    case "grok.com":
+      return "grok"
+    case "chatgpt.com":
+      return "chatgpt"
+    case "claude.ai":
+    case "claude.com":
+      return "claude"
+    case "chat.deepseek.com":
+      return "deepseek"
+    case "www.doubao.com":
+      return "doubao"
+    case "ima.qq.com":
+      return "ima"
+    case "chatglm.cn":
+      return "chatglm"
+    case "www.kimi.com":
+      return "kimi"
+    case "chat.qwen.ai":
+      return "qwen-studio"
+    case "www.qianwen.com":
+    case "qianwen.com":
+      return "qianwen"
+    case "yuanbao.tencent.com":
+      return "yuanbao"
+    case "chat.z.ai":
+      return "zai"
+    default:
+      return null
+  }
+}
+
+async function createAdapter(moduleKey: AdapterModuleKey): Promise<SiteAdapter> {
+  switch (moduleKey) {
+    case "gemini-enterprise": {
+      const { GeminiEnterpriseAdapter } = await import("./gemini-enterprise")
+      return new GeminiEnterpriseAdapter()
+    }
+    case "gemini": {
+      const { GeminiAdapter } = await import("./gemini")
+      return new GeminiAdapter()
+    }
+    case "aistudio": {
+      const { AIStudioAdapter } = await import("./aistudio")
+      return new AIStudioAdapter()
+    }
+    case "grok": {
+      const { GrokAdapter } = await import("./grok")
+      return new GrokAdapter()
+    }
+    case "chatgpt": {
+      const { ChatGPTAdapter } = await import("./chatgpt")
+      return new ChatGPTAdapter()
+    }
+    case "claude": {
+      const { ClaudeAdapter } = await import("./claude")
+      return new ClaudeAdapter()
+    }
+    case "deepseek": {
+      const { DeepSeekAdapter } = await import("./deepseek")
+      return new DeepSeekAdapter()
+    }
+    case "doubao": {
+      const { DoubaoAdapter } = await import("./doubao")
+      return new DoubaoAdapter()
+    }
+    case "ima": {
+      const { ImaAdapter } = await import("./ima")
+      return new ImaAdapter()
+    }
+    case "chatglm": {
+      const { ChatGLMAdapter } = await import("./chatglm")
+      return new ChatGLMAdapter()
+    }
+    case "kimi": {
+      const { KimiAdapter } = await import("./kimi")
+      return new KimiAdapter()
+    }
+    case "qwen-studio": {
+      const { QwenAiAdapter } = await import("./qwen-studio")
+      return new QwenAiAdapter()
+    }
+    case "qianwen": {
+      const { QianwenAdapter } = await import("./qianwen")
+      return new QianwenAdapter()
+    }
+    case "yuanbao": {
+      const { YuanbaoAdapter } = await import("./yuanbao")
+      return new YuanbaoAdapter()
+    }
+    case "zai": {
+      const { ZaiAdapter } = await import("./zai")
+      return new ZaiAdapter()
     }
   }
-  return null
 }
 
-// 导出类型和基类
+/**
+ * 加载当前页面匹配的适配器。
+ */
+export async function loadAdapter(
+  hostname = window.location.hostname,
+): Promise<SiteAdapter | null> {
+  const moduleKey = resolveAdapterModuleKey(hostname)
+  if (!moduleKey) return null
+
+  const adapter = await createAdapter(moduleKey)
+  return adapter.match() ? adapter : null
+}
+
 export { SiteAdapter } from "./base"
 export type {
   OutlineItem,
diff --git a/src/components/App.tsx b/src/components/App.tsx
index ce1386f24..ef66d8bed 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7,7 +7,7 @@ import React, {
   useSyncExternalStore,
 } from "react"
 
-import { getAdapter } from "~adapters/index"
+import type { SiteAdapter } from "~adapters/base"
 import { SITE_IDS } from "~constants/defaults"
 import {
   ConversationManager,
@@ -44,7 +44,7 @@ import {
   MSG_CLEAR_ALL_DATA,
 } from "~utils/messaging"
 import { showToast } from "~utils/toast"
-import { setLanguage, t } from "~utils/i18n"
+import { setLanguage, subscribeI18nChanges, t } from "~utils/i18n"
 import { getHighlightStyles, renderMarkdown } from "~utils/markdown"
 import { createSafeHTML } from "~utils/trusted-types"
 import { initCopyButtons, showCopySuccess } from "~utils/icons"
@@ -178,7 +178,11 @@ const PASS_THROUGH_CONTROL_KEY_ALIASES = new Set(["Control", "Ctrl"])
 
 const hasPromptVariables = (content: string): boolean => /\{\{([^\s{}]+)\}\}/.test(content)
 
-export const App = () => {
+interface AppProps {
+  adapter: SiteAdapter
+}
+
+export const App: React.FC<AppProps> = ({ adapter }) => {
   // 读取设置 - 使用 Zustand Store
   const { settings, setSettings, updateDeepSetting, updateNestedSetting } = useSettingsStore()
   const isSettingsHydrated = useSettingsHydrated()
@@ -188,6 +192,8 @@ export const App = () => {
   useSettingsStore((s) => s._syncVersion)
   const [i18nRenderTick, setI18nRenderTick] = useState(0)
 
+  useEffect(() => subscribeI18nChanges(() => setI18nRenderTick((version) => version + 1)), [])
+
   const getLocalizedText = useCallback(
     (definition: LocalizedLabelDefinition) => {
       void i18nRenderTick
@@ -403,9 +409,6 @@ export const App = () => {
     [getLocalizedText, getPageLabel, getSubTabLabel],
   )
 
-  // 单例实例
-  const adapter = useMemo(() => getAdapter(), [])
-
   const promptManager = useMemo(() => {
     return adapter ? new PromptManager(adapter) : null
   }, [adapter])
@@ -2213,8 +2216,7 @@ export const App = () => {
   // 当设置中的语言变化时，同步更新 i18n
   useEffect(() => {
     if (isSettingsHydrated && settings?.language) {
-      setLanguage(settings.language)
-      setI18nRenderTick((prev) => prev + 1)
+      void setLanguage(settings.language)
     }
   }, [settings?.language, isSettingsHydrated])
 
@@ -2251,8 +2253,7 @@ export const App = () => {
   // 从 window 获取 main.ts 创建的全局 ThemeManager 实例
   // userscript 场景下 App 可能先于核心模块渲染，这里统一复用全局单例
   const themeManager = useMemo(() => {
-    const currentAdapter = getAdapter()
-    const siteId = currentAdapter?.getSiteId() || "_default"
+    const siteId = adapter.getSiteId()
     const fallbackTheme =
       settings?.theme?.sites?.[siteId as keyof typeof settings.theme.sites] ||
       settings?.theme?.sites?._default
@@ -2292,8 +2293,7 @@ export const App = () => {
       const sites = currentSettings?.theme?.sites || {}
 
       // 获取当前站点 ID
-      const currentAdapter = getAdapter()
-      const siteId = currentAdapter?.getSiteId() || "_default"
+      const siteId = adapter.getSiteId()
 
       // 确保站点配置有完整的默认值，但优先使用已有配置
       const existingSite = sites[siteId as keyof typeof sites] || sites._default
@@ -2324,7 +2324,7 @@ export const App = () => {
     return () => {
       themeManager.setOnModeChange(undefined)
     }
-  }, [themeManager, setSettings, isSettingsHydrated]) // 移除 settings?.theme 依赖，通过 ref 访问最新值
+  }, [adapter, themeManager, setSettings, isSettingsHydrated]) // 移除 settings?.theme 依赖，通过 ref 访问最新值
 
   const themeSites = settings?.theme?.sites
   const syncUnpin = settings?.features?.conversations?.syncUnpin
@@ -2353,8 +2353,7 @@ export const App = () => {
     if (!isSettingsHydrated) return // 等待 hydration 完成
 
     // 使用当前站点的配置而非 _default
-    const currentAdapter = getAdapter()
-    const siteId = currentAdapter?.getSiteId() || "_default"
+    const siteId = adapter.getSiteId()
     const siteTheme = themeSites?.[siteId as keyof typeof themeSites] || themeSites?._default
     const lightId = siteTheme?.lightStyleId
     const darkId = siteTheme?.darkStyleId
@@ -2362,7 +2361,7 @@ export const App = () => {
     if (lightId && darkId) {
       themeManager.setPresets(lightId, darkId)
     }
-  }, [themeSites, themeManager, isSettingsHydrated])
+  }, [adapter, themeSites, themeManager, isSettingsHydrated])
 
   // 监听自定义样式变化，同步到 ThemeManager
   useEffect(() => {
@@ -3191,6 +3190,7 @@ export const App = () => {
       />
 
       <QuickButtons
+        adapter={adapter}
         isPanelExpanded={isPanelExpanded}
         onPanelToggle={handlePanelToggle}
         onPanelLogoHoverStart={handlePanelLogoHoverStart}
diff --git a/src/components/ModelLockSettingsContent.tsx b/src/components/ModelLockSettingsContent.tsx
index 263496360..7ffe42908 100644
--- a/src/components/ModelLockSettingsContent.tsx
+++ b/src/components/ModelLockSettingsContent.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { RefreshIcon } from "~components/icons"
 import { Switch, Tooltip } from "~components/ui"
 import { SITE_IDS } from "~constants"
+import { getAdapterRuntime } from "~core/adapter-runtime"
 import { platform } from "~platform"
 import { useSettingsStore } from "~stores/settings-store"
 import { SettingCard } from "~tabs/options/components"
@@ -39,8 +40,7 @@ async function fetchAIStudioModels(): Promise<AIStudioModelsResponse> {
     return { success: false, error: "NO_AISTUDIO_TAB" }
   }
 
-  const { getAdapter } = await import("~adapters")
-  const adapter = getAdapter()
+  const adapter = getAdapterRuntime()
 
   if (!hasAIStudioModelList(adapter) || adapter.getSiteId() !== SITE_IDS.AISTUDIO) {
     return { success: false, error: "NOT_AISTUDIO" }
diff --git a/src/components/QuickButtons.tsx b/src/components/QuickButtons.tsx
index b0f93380b..346792941 100644
--- a/src/components/QuickButtons.tsx
+++ b/src/components/QuickButtons.tsx
@@ -8,7 +8,7 @@ import React, {
   useSyncExternalStore,
 } from "react"
 
-import { getAdapter } from "~adapters/index"
+import type { SiteAdapter } from "~adapters/base"
 import { ThemeDarkIcon, ThemeLightIcon, EyeClosedIcon } from "~components/icons"
 import { LoadingOverlay } from "~components/LoadingOverlay"
 import { Tooltip } from "~components/ui/Tooltip"
@@ -34,6 +34,7 @@ import {
 import { showToast } from "~utils/toast"
 
 interface QuickButtonsProps {
+  adapter: SiteAdapter
   isPanelExpanded: boolean
   onPanelToggle: () => void
   onPanelLogoHoverStart?: (anchorRect: DOMRect, options?: { waitForGroupDwell?: boolean }) => void
@@ -97,6 +98,7 @@ const LEAVE_WINDOW_RETAIN_MS = 1500
 const HOVER_DWELL_MS = 300
 
 export const QuickButtons: React.FC<QuickButtonsProps> = ({
+  adapter,
   isPanelExpanded,
   onPanelToggle,
   onPanelLogoHoverStart,
@@ -128,7 +130,6 @@ export const QuickButtons: React.FC<QuickButtonsProps> = ({
 
   const { settings, updateNestedSetting } = useSettingsStore()
   const currentSettings = settings || DEFAULT_SETTINGS
-  const adapter = getAdapter()
   const quickButtonsSettings = currentSettings.quickButtons || DEFAULT_SETTINGS.quickButtons
   const collapsedButtonsOrder = useMemo(
     () => quickButtonsSettings.collapsed || [],
@@ -140,7 +141,7 @@ export const QuickButtons: React.FC<QuickButtonsProps> = ({
   const quickButtonsOpacity = Math.min(Math.max(quickButtonsSettings.opacity ?? 1, 0.4), 1)
   const persistedGroupPosition = quickButtonsSettings.position ?? null
   const proximityRadius = quickButtonsSettings.proximityRadius ?? 150
-  const siteId = adapter?.getSiteId() || "_default"
+  const siteId = adapter.getSiteId()
   const siteTheme = getSiteTheme(currentSettings, siteId)
   const resolvedThemeMode = themeMode || (siteTheme.mode === "dark" ? "dark" : "light")
   const panelSparkleColor = resolvedThemeMode === "dark" ? "brand" : "currentColor"
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index df7745a49..d53a23c2d 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -144,7 +144,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
   // 初始化语言
   useEffect(() => {
     if (isHydrated && settings?.language) {
-      setLanguage(settings.language)
+      void setLanguage(settings.language)
     }
   }, [isHydrated, settings?.language])
 
diff --git a/src/contents/main.ts b/src/contents/main.ts
index 2e899dae8..8f34e2749 100644
--- a/src/contents/main.ts
+++ b/src/contents/main.ts
@@ -7,7 +7,7 @@
 
 import type { PlasmoCSConfig } from "plasmo"
 
-import { getAdapter } from "~adapters"
+import { loadAdapter } from "~adapters"
 import { DEFAULT_FOLDERS, SITE_IDS, getDefaultPromptChains, getDefaultPrompts } from "~constants"
 import {
   initCoreModules,
@@ -16,8 +16,10 @@ import {
   subscribeModuleUpdates,
   type ModulesContext,
 } from "~core/modules-init"
+import { setAdapterRuntime } from "~core/adapter-runtime"
 import { APP_DISPLAY_NAME } from "~utils/config"
 import { INTER_LOCAL_FONT_FACE, getPlatformFontFamily } from "~utils/font"
+import { setLanguage } from "~utils/i18n"
 import { useConversationsStore } from "~stores/conversations-store"
 import { useFoldersStore } from "~stores/folders-store"
 import { usePromptChainsStore } from "~stores/prompt-chains-store"
@@ -449,108 +451,113 @@ export const config: PlasmoCSConfig = {
 }
 
 // 防止重复初始化
-if (!window.ophelInitialized) {
-  window.ophelInitialized = true
+async function initializeContentScript(): Promise<void> {
+  const adapter = await loadAdapter()
 
-  const adapter = getAdapter()
-
-  if (adapter) {
-    console.warn(`[Ophel] Loaded ${adapter.getName()} adapter on:`, window.location.hostname)
-
-    // 初始化适配器
-    adapter.afterPropertiesSet({})
-
-    // 异步初始化所有功能模块
-    ;(async () => {
-      // 等待 Zustand hydration 完成
-      await new Promise<void>((resolve) => {
-        if (useSettingsStore.getState()._hasHydrated) {
-          resolve()
-          return
-        }
-        const unsub = useSettingsStore.subscribe((state) => {
-          if (state._hasHydrated) {
-            unsub()
-            resolve()
-          }
-        })
-      })
-
-      // 获取用户设置
-      const settings = getSettingsState()
-      const siteId = adapter.getSiteId()
-
-      // 创建模块上下文
-      const ctx: ModulesContext = { adapter, settings, siteId }
-
-      // 初始化所有核心模块
-      await initCoreModules(ctx)
-
-      // 订阅设置变化
-      const unsubscribeModuleUpdates = subscribeModuleUpdates(ctx)
-      window.addEventListener("unload", unsubscribeModuleUpdates, { once: true })
-
-      // 初始化 URL 变化监听
-      const cleanupUrlChangeObserver = initUrlChangeObserver(ctx)
-      window.addEventListener("unload", cleanupUrlChangeObserver, { once: true })
-
-      // 监听来自 background 的消息（用于跨页面检测生成状态）
-      chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-        if (message.type === MSG_CLEAR_ALL_DATA) {
-          handleClearAllData()
-          resetAllStores()
-          sendResponse({ success: true })
-          return true
-        }
-
-        if (message.type === MSG_RESTORE_DATA) {
-          // 收到恢复数据的广播时，刷新页面使得数据从 Storage 重新读取并保证 Zustand hydration 最新的内容
-          window.location.reload()
-          sendResponse({ success: true })
-          return true
-        }
-
-        if (message.type === "CHECK_IS_GENERATING") {
-          // 使用 adapter 的 isGenerating 方法检测当前页面是否正在生成
-          const isGenerating = adapter.isGenerating?.() ?? false
-          sendResponse({ isGenerating })
-          return true // 保持消息通道打开
-        }
-
-        if (message.type === MSG_START_NEW_CONVERSATION) {
+  if (!adapter) {
+    console.warn("[Ophel] No adapter found for:", window.location.hostname)
+    return
+  }
+
+  setAdapterRuntime(adapter)
+  console.warn(`[Ophel] Loaded ${adapter.getName()} adapter on:`, window.location.hostname)
+
+  // 初始化适配器
+  adapter.afterPropertiesSet({})
+
+  // 等待 Zustand hydration 完成
+  await new Promise<void>((resolve) => {
+    if (useSettingsStore.getState()._hasHydrated) {
+      resolve()
+      return
+    }
+    const unsub = useSettingsStore.subscribe((state) => {
+      if (state._hasHydrated) {
+        unsub()
+        resolve()
+      }
+    })
+  })
+
+  // 获取用户设置
+  const settings = getSettingsState()
+  await setLanguage(settings.language)
+  const siteId = adapter.getSiteId()
+
+  // 创建模块上下文
+  const ctx: ModulesContext = { adapter, settings, siteId }
+
+  // 初始化所有核心模块
+  await initCoreModules(ctx)
+
+  // 订阅设置变化
+  const unsubscribeModuleUpdates = subscribeModuleUpdates(ctx)
+  window.addEventListener("unload", unsubscribeModuleUpdates, { once: true })
+
+  // 初始化 URL 变化监听
+  const cleanupUrlChangeObserver = initUrlChangeObserver(ctx)
+  window.addEventListener("unload", cleanupUrlChangeObserver, { once: true })
+
+  // 监听来自 background 的消息（用于跨页面检测生成状态）
+  chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+    if (message.type === MSG_CLEAR_ALL_DATA) {
+      handleClearAllData()
+      resetAllStores()
+      sendResponse({ success: true })
+      return true
+    }
+
+    if (message.type === MSG_RESTORE_DATA) {
+      // 收到恢复数据的广播时，刷新页面使得数据从 Storage 重新读取并保证 Zustand hydration 最新的内容
+      window.location.reload()
+      sendResponse({ success: true })
+      return true
+    }
+
+    if (message.type === "CHECK_IS_GENERATING") {
+      // 使用 adapter 的 isGenerating 方法检测当前页面是否正在生成
+      const isGenerating = adapter.isGenerating?.() ?? false
+      sendResponse({ isGenerating })
+      return true // 保持消息通道打开
+    }
+
+    if (message.type === MSG_START_NEW_CONVERSATION) {
+      try {
+        const success = adapter.startNewConversation()
+        sendResponse({ success })
+      } catch (err) {
+        console.error("[Ophel] startNewConversation failed:", err)
+        sendResponse({ success: false, error: (err as Error).message })
+      }
+      return true
+    }
+
+    // AI Studio 获取模型列表
+    if (message.type === "GET_MODEL_LIST") {
+      if (siteId === SITE_IDS.AISTUDIO && typeof (adapter as any).getModelList === "function") {
+        ;(async () => {
           try {
-            const success = adapter.startNewConversation()
-            sendResponse({ success })
+            const models = await (adapter as any).getModelList()
+            sendResponse({ success: true, models })
           } catch (err) {
-            console.error("[Ophel] startNewConversation failed:", err)
+            console.error("[Ophel] getModelList failed:", err)
             sendResponse({ success: false, error: (err as Error).message })
           }
-          return true
-        }
-
-        // AI Studio 获取模型列表
-        if (message.type === "GET_MODEL_LIST") {
-          if (siteId === SITE_IDS.AISTUDIO && typeof (adapter as any).getModelList === "function") {
-            ;(async () => {
-              try {
-                const models = await (adapter as any).getModelList()
-                sendResponse({ success: true, models })
-              } catch (err) {
-                console.error("[Ophel] getModelList failed:", err)
-                sendResponse({ success: false, error: (err as Error).message })
-              }
-            })()
-            return true
-          }
+        })()
+        return true
+      }
 
-          sendResponse({ success: false, error: "NOT_AISTUDIO" })
-          return true
-        }
+      sendResponse({ success: false, error: "NOT_AISTUDIO" })
+      return true
+    }
 
-        return false
-      })
-    })()
-  } else {
-    console.warn("[Ophel] No adapter found for:", window.location.hostname)
-  }
+    return false
+  })
+}
+
+if (!window.ophelInitialized) {
+  window.ophelInitialized = true
+  void initializeContentScript().catch((error) => {
+    console.error("[Ophel] Content script initialization failed:", error)
+  })
 }
diff --git a/src/contents/ui-entry.tsx b/src/contents/ui-entry.tsx
index 6e65a65a1..cef3ba20b 100644
--- a/src/contents/ui-entry.tsx
+++ b/src/contents/ui-entry.tsx
@@ -6,6 +6,7 @@ import type { PlasmoCSConfig, PlasmoMountShadowHost } from "plasmo"
 import React from "react"
 
 import { App } from "~components/App"
+import { getAdapterRuntime, subscribeAdapterRuntime } from "~core/adapter-runtime"
 import { applyOphelPlatformFontClass } from "~utils/font"
 
 export const config: PlasmoCSConfig = {
@@ -127,7 +128,13 @@ export const mountShadowHost: PlasmoMountShadowHost = ({
 }
 
 const PlasmoApp = () => {
-  return <App />
+  const adapter = React.useSyncExternalStore(
+    subscribeAdapterRuntime,
+    getAdapterRuntime,
+    getAdapterRuntime,
+  )
+
+  return adapter ? <App adapter={adapter} /> : null
 }
 
 export default PlasmoApp
diff --git a/src/core/adapter-runtime.test.ts b/src/core/adapter-runtime.test.ts
new file mode 100644
index 000000000..b18699dcf
--- /dev/null
+++ b/src/core/adapter-runtime.test.ts
@@ -0,0 +1,36 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import type { SiteAdapter } from "~adapters/base"
+
+import { getAdapterRuntime, setAdapterRuntime, subscribeAdapterRuntime } from "./adapter-runtime"
+
+describe("adapter runtime", () => {
+  afterEach(() => {
+    window.__ophelAdapterRuntime = undefined
+  })
+
+  it("shares the adapter through window and notifies subscribers", () => {
+    const listener = vi.fn()
+    const unsubscribe = subscribeAdapterRuntime(listener)
+    const adapter = {} as SiteAdapter
+
+    setAdapterRuntime(adapter)
+
+    expect(getAdapterRuntime()).toBe(adapter)
+    expect(listener).toHaveBeenCalledOnce()
+
+    unsubscribe()
+  })
+
+  it("does not notify again when registering the same instance", () => {
+    const listener = vi.fn()
+    const unsubscribe = subscribeAdapterRuntime(listener)
+    const adapter = {} as SiteAdapter
+
+    setAdapterRuntime(adapter)
+    setAdapterRuntime(adapter)
+
+    expect(listener).toHaveBeenCalledOnce()
+    unsubscribe()
+  })
+})
diff --git a/src/core/adapter-runtime.ts b/src/core/adapter-runtime.ts
new file mode 100644
index 000000000..495d962dc
--- /dev/null
+++ b/src/core/adapter-runtime.ts
@@ -0,0 +1,19 @@
+import type { SiteAdapter } from "~adapters/base"
+
+const ADAPTER_RUNTIME_CHANGE_EVENT = "ophel:adapter-runtime-change"
+
+export function getAdapterRuntime(): SiteAdapter | null {
+  return window.__ophelAdapterRuntime ?? null
+}
+
+export function setAdapterRuntime(adapter: SiteAdapter): void {
+  if (window.__ophelAdapterRuntime === adapter) return
+
+  window.__ophelAdapterRuntime = adapter
+  window.dispatchEvent(new Event(ADAPTER_RUNTIME_CHANGE_EVENT))
+}
+
+export function subscribeAdapterRuntime(listener: () => void): () => void {
+  window.addEventListener(ADAPTER_RUNTIME_CHANGE_EVENT, listener)
+  return () => window.removeEventListener(ADAPTER_RUNTIME_CHANGE_EVENT, listener)
+}
diff --git a/src/core/modules-init.ts b/src/core/modules-init.ts
index c0a455c49..7e96cad37 100644
--- a/src/core/modules-init.ts
+++ b/src/core/modules-init.ts
@@ -494,9 +494,10 @@ export function subscribeModuleUpdates(ctx: ModulesContext): () => void {
   return subscribeSettings((newSettings: Settings) => {
     if (newSettings.language && newSettings.language !== lastLanguage) {
       lastLanguage = newSettings.language
-      setLanguage(newSettings.language)
-      modules.assistantMermaidRenderer?.refreshLocalizedTexts()
-      modules.layoutManager?.refreshLocalizedTexts()
+      void setLanguage(newSettings.language).then(() => {
+        modules.assistantMermaidRenderer?.refreshLocalizedTexts()
+        modules.layoutManager?.refreshLocalizedTexts()
+      })
     }
 
     // 1. Theme Manager - 只更新主题预置
diff --git a/src/platform/userscript/entry.tsx b/src/platform/userscript/entry.tsx
index e8192132e..95540f2de 100644
--- a/src/platform/userscript/entry.tsx
+++ b/src/platform/userscript/entry.tsx
@@ -368,22 +368,30 @@ injectYuanbaoMonacoWrap()
  * document-start 时 DOM 尚未就绪，需等待 document.readyState 变化
  */
 async function init() {
-  const [{ getAdapter }, { App }, { initNetworkMonitor }, { initGeminiTitleGuard }] =
-    await Promise.all([
-      import("~adapters"),
-      import("~components/App"),
-      import("~core/network-monitor"),
-      import("~core/gemini-title-guard"),
-    ])
+  const [
+    { loadAdapter },
+    { App },
+    { setAdapterRuntime },
+    { initNetworkMonitor },
+    { initGeminiTitleGuard },
+  ] = await Promise.all([
+    import("~adapters"),
+    import("~components/App"),
+    import("~core/adapter-runtime"),
+    import("~core/network-monitor"),
+    import("~core/gemini-title-guard"),
+  ])
 
   initGeminiTitleGuard()
 
-  const adapter = getAdapter()
+  const adapter = await loadAdapter()
 
   if (!adapter) {
     return
   }
 
+  setAdapterRuntime(adapter)
+
   // 初始化适配器
   adapter.afterPropertiesSet({})
 
@@ -478,7 +486,7 @@ async function init() {
           [],
         )
 
-        return React.createElement(App)
+        return React.createElement(App, { adapter })
       }
 
       const root = ReactDOM.createRoot(container)
diff --git a/src/popup.tsx b/src/popup.tsx
index 4236260d6..24db96d40 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -50,12 +50,11 @@ function IndexPopup() {
       try {
         const parsed = typeof data.settings === "string" ? JSON.parse(data.settings) : data.settings
         const lang = parsed?.state?.global?.language || "auto"
-        setLanguage(lang)
+        void setLanguage(lang).finally(() => setLanguageReady(true))
       } catch (e) {
         console.error("Failed to load language setting:", e)
-        setLanguage("auto")
+        void setLanguage("auto").finally(() => setLanguageReady(true))
       }
-      setLanguageReady(true)
     })
 
     // Detect current tab's site
diff --git a/src/stores/settings-store.ts b/src/stores/settings-store.ts
index 880faffcc..993617700 100644
--- a/src/stores/settings-store.ts
+++ b/src/stores/settings-store.ts
@@ -390,7 +390,7 @@ if (isExtension) {
           ) {
             import("~utils/i18n")
               .then(({ setLanguage }) => {
-                setLanguage(normalizedIncomingSettings.language)
+                void setLanguage(normalizedIncomingSettings.language)
               })
               .catch(() => {
                 // ignore
diff --git a/src/tabs/options.tsx b/src/tabs/options.tsx
index ac145c813..3cebbe907 100644
--- a/src/tabs/options.tsx
+++ b/src/tabs/options.tsx
@@ -196,8 +196,8 @@ const OptionsPage = () => {
   // 当 settings 加载完成后，根据 settings.language 设置界面语言
   useEffect(() => {
     if (isHydrated && settings?.language) {
-      setLanguage(settings.language)
-      setLanguageReady(true)
+      setLanguageReady(false)
+      void setLanguage(settings.language).then(() => setLanguageReady(true))
     }
   }, [isHydrated, settings?.language])
 
diff --git a/src/tabs/options/components/SidebarFooter.tsx b/src/tabs/options/components/SidebarFooter.tsx
index 5b8a0db70..da8182441 100644
--- a/src/tabs/options/components/SidebarFooter.tsx
+++ b/src/tabs/options/components/SidebarFooter.tsx
@@ -68,7 +68,7 @@ export const SidebarFooter = ({ siteId = "_default" }: { siteId?: string }) => {
   // 切换语言
   const handleLanguageChange = (lang: string) => {
     setSettings({ language: lang })
-    setLanguage(lang)
+    void setLanguage(lang)
   }
 
   // 获取设置中的语言值和实际生效的语言
diff --git a/src/tabs/perm-request.tsx b/src/tabs/perm-request.tsx
index 380f9c95d..2e12d3eac 100644
--- a/src/tabs/perm-request.tsx
+++ b/src/tabs/perm-request.tsx
@@ -63,7 +63,8 @@ const PermissionRequestPage: React.FC = () => {
   useEffect(() => {
     if (isHydrated) {
       if (settings?.language) {
-        setLanguage(settings.language)
+        void setLanguage(settings.language).then(() => setLangReady(true))
+        return
       }
       // 语言设置完成后标记为就绪，触发重渲染
       setLangReady(true)
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 3022b4e30..1fd1c7dd1 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -4,6 +4,7 @@
  */
 
 import type { ThemeManager } from "~core/theme-manager"
+import type { SiteAdapter } from "~adapters/base"
 
 declare global {
   interface OphelPendingPromptVariableDialogDetail {
@@ -22,6 +23,8 @@ declare global {
     ophelUserscriptInitialized?: boolean
     /** 全局 ThemeManager 实例 */
     __ophelThemeManager?: ThemeManager
+    /** 当前页面已加载的站点适配器 */
+    __ophelAdapterRuntime?: SiteAdapter
     /** 滚动锁定初始化标记 */
     __ophelScrollLockInitialized?: boolean
     /** 滚动锁定是否启用 */
diff --git a/src/utils/i18n.test.ts b/src/utils/i18n.test.ts
new file mode 100644
index 000000000..add4bfeda
--- /dev/null
+++ b/src/utils/i18n.test.ts
@@ -0,0 +1,25 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import { getAllLocalizedTexts, setLanguage, subscribeI18nChanges, t } from "./i18n"
+
+describe("i18n", () => {
+  afterEach(async () => {
+    await setLanguage("en")
+  })
+
+  it("loads a selected locale on demand and notifies subscribers", async () => {
+    const listener = vi.fn()
+    const unsubscribe = subscribeI18nChanges(listener)
+
+    await setLanguage("zh-CN")
+
+    expect(t("untitledConversation")).toBe("未命名会话")
+    expect(listener).toHaveBeenCalled()
+    unsubscribe()
+  })
+
+  it("keeps the small cross-locale title compatibility list", () => {
+    expect(getAllLocalizedTexts("untitledConversation")).toContain("Untitled conversation")
+    expect(getAllLocalizedTexts("untitledConversation")).toContain("未命名會話")
+  })
+})
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index 55b7d2857..1bef664eb 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -1,8 +1,43 @@
-import { resources } from "~locales/resources"
+import { en } from "~locales/en"
 
-// 初始化根据浏览器语言设置
-const getBrowserLang = () => {
-  if (typeof navigator === "undefined") return "en"
+type LocaleMessages = Record<string, string>
+type I18nChangeListener = () => void
+type SupportedLocale =
+  | "zh-CN"
+  | "zh-TW"
+  | "en"
+  | "ja"
+  | "ko"
+  | "it"
+  | "fr"
+  | "de"
+  | "ru"
+  | "es"
+  | "pt"
+
+const DEFAULT_LOCALE: SupportedLocale = "en"
+const localeCache: Partial<Record<SupportedLocale, LocaleMessages>> = { en }
+const localeLoads = new Map<SupportedLocale, Promise<LocaleMessages>>()
+const listeners = new Set<I18nChangeListener>()
+
+const ALL_LOCALIZED_TEXTS: Record<string, string[]> = {
+  untitledConversation: [
+    "未命名会话",
+    "未命名會話",
+    "Untitled conversation",
+    "無題の会話",
+    "제목 없는 대화",
+    "Conversazione senza titolo",
+    "Sans titre",
+    "Unbenannt",
+    "Без темы",
+    "Sin título",
+    "Sem título",
+  ],
+}
+
+const getBrowserLang = (): SupportedLocale => {
+  if (typeof navigator === "undefined") return DEFAULT_LOCALE
   const lang = navigator.language
   if (lang.startsWith("zh-TW") || lang.startsWith("zh-HK")) return "zh-TW"
   if (lang.startsWith("zh")) return "zh-CN"
@@ -14,34 +49,102 @@ const getBrowserLang = () => {
   if (lang.startsWith("ru")) return "ru"
   if (lang.startsWith("es")) return "es"
   if (lang.startsWith("pt")) return "pt"
-  return "en"
+  return DEFAULT_LOCALE
 }
 
-let currentLang: string = getBrowserLang()
+function resolveLocale(lang: string | undefined | null): SupportedLocale {
+  if (!lang || lang === "auto") return getBrowserLang()
 
-export function setLanguage(lang: string) {
-  if (lang === "auto") {
-    currentLang = getBrowserLang()
-  } else {
-    currentLang = lang
+  switch (lang) {
+    case "zh-CN":
+    case "zh-TW":
+    case "en":
+    case "ja":
+    case "ko":
+    case "it":
+    case "fr":
+    case "de":
+    case "ru":
+    case "es":
+    case "pt":
+      return lang
+    default:
+      return DEFAULT_LOCALE
   }
 }
 
-// 获取当前实际生效的语言（用于 UI 高亮显示）
-export function getEffectiveLanguage(settingLang: string): string {
-  if (settingLang === "auto") {
-    return getBrowserLang()
+async function importLocale(locale: SupportedLocale): Promise<LocaleMessages> {
+  switch (locale) {
+    case "zh-CN":
+      return (await import("~locales/zh-CN")).zhCN
+    case "zh-TW":
+      return (await import("~locales/zh-TW")).zhTW
+    case "ja":
+      return (await import("~locales/ja")).ja
+    case "ko":
+      return (await import("~locales/ko")).ko
+    case "it":
+      return (await import("~locales/it")).it
+    case "fr":
+      return (await import("~locales/fr")).fr
+    case "de":
+      return (await import("~locales/de")).de
+    case "ru":
+      return (await import("~locales/ru")).ru
+    case "es":
+      return (await import("~locales/es")).es
+    case "pt":
+      return (await import("~locales/pt")).pt
+    case "en":
+      return en
   }
-  return settingLang
+}
+
+async function loadLocale(locale: SupportedLocale): Promise<LocaleMessages> {
+  const cached = localeCache[locale]
+  if (cached) return cached
+
+  const pending = localeLoads.get(locale)
+  if (pending) return pending
+
+  const load = importLocale(locale).then((messages) => {
+    localeCache[locale] = messages
+    localeLoads.delete(locale)
+    return messages
+  })
+  localeLoads.set(locale, load)
+  return load
+}
+
+function notifyI18nChange(): void {
+  listeners.forEach((listener) => listener())
+}
+
+let currentLang: SupportedLocale = getBrowserLang()
+
+export async function setLanguage(lang: string): Promise<void> {
+  const nextLang = resolveLocale(lang)
+  const previousLang = currentLang
+  currentLang = nextLang
+
+  await loadLocale(nextLang)
+  if (currentLang === nextLang && (previousLang !== nextLang || nextLang !== DEFAULT_LOCALE)) {
+    notifyI18nChange()
+  }
+}
+
+export function subscribeI18nChanges(listener: I18nChangeListener): () => void {
+  listeners.add(listener)
+  return () => listeners.delete(listener)
+}
+
+export function getEffectiveLanguage(settingLang: string): string {
+  return resolveLocale(settingLang)
 }
 
 export function t(key: string, params?: Record<string, string>): string {
-  const langResources = resources[currentLang as keyof typeof resources]
-  const enResources = resources["en"]
-  let text =
-    (langResources?.[key as keyof typeof langResources] as string) ||
-    (enResources[key as keyof typeof enResources] as string) ||
-    key
+  const langResources = localeCache[currentLang]
+  let text = langResources?.[key] || en[key as keyof typeof en] || key
 
   if (params) {
     Object.keys(params).forEach((paramKey) => {
@@ -53,13 +156,7 @@ export function t(key: string, params?: Record<string, string>): string {
 }
 
 export function getAllLocalizedTexts(key: string): string[] {
-  return Array.from(
-    new Set(
-      Object.values(resources)
-        .map((resource) => resource[key as keyof typeof resource])
-        .filter((value): value is string => typeof value === "string" && value.trim().length > 0),
-    ),
-  )
+  return ALL_LOCALIZED_TEXTS[key] || [t(key)]
 }
 
 export function getCurrentLang(): string {

From 0378144d83269d040132e780267bfbe4c73b1cf7 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 15:26:56 +0800
Subject: [PATCH 04/17] refactor(ui): unify themed overlay infrastructure

---
 package.json                                  |   1 +
 scripts/check-theme-tokens.mjs                |  60 ++++
 src/components/ConversationDialogs.tsx        | 128 +--------
 src/components/ConversationMenus.tsx          |  51 +---
 src/components/LoadingOverlay.tsx             |   8 +-
 src/components/PromptsTab.tsx                 |  13 +-
 src/components/QueueOverlay.tsx               |  12 +-
 src/components/SegmentedExportDialog.tsx      |  18 +-
 src/components/prompts/ImportDialog.tsx       |   6 +-
 src/components/prompts/PromptEditorDialog.tsx |   6 +-
 src/components/prompts/PromptPreviewModal.tsx |   6 +-
 src/components/ui/Dialog.test.tsx             |  51 ++++
 src/components/ui/Dialog.tsx                  | 184 ++++++------
 src/components/ui/OverlayPortal.tsx           |  35 +++
 src/components/ui/Tooltip.tsx                 |  71 +----
 src/contents/ui-entry.tsx                     |  10 +-
 src/core/assistant-mermaid-renderer.ts        |   6 +-
 src/platform/userscript/entry.tsx             |   8 +-
 src/popup.tsx                                 |  10 +-
 src/styles/overlays.css                       | 264 ++++++++++++++++++
 src/styles/settings.css                       |   2 +-
 src/styles/theme-variables.css                |  27 ++
 src/tabs/options.tsx                          |  10 +-
 src/tabs/options/components/LanguageMenu.tsx  |  42 ++-
 src/tabs/options/pages/BackupPage.tsx         |   4 +-
 src/tabs/options/pages/ClaudeSettings.tsx     |   2 +-
 src/tabs/options/pages/ShortcutsPage.tsx      |   2 +-
 src/tabs/options/pages/SiteSettingsPage.tsx   |   2 +-
 src/types/global.d.ts                         |   2 +
 src/utils/themes/themes.test.ts               |  32 +++
 src/utils/themes/types.ts                     |  17 ++
 vite.userscript.config.ts                     |  13 +-
 32 files changed, 695 insertions(+), 408 deletions(-)
 create mode 100644 scripts/check-theme-tokens.mjs
 create mode 100644 src/components/ui/Dialog.test.tsx
 create mode 100644 src/components/ui/OverlayPortal.tsx
 create mode 100644 src/styles/overlays.css
 create mode 100644 src/utils/themes/themes.test.ts

diff --git a/package.json b/package.json
index 075fb2d05..f85fe27d9 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest",
     "test:run": "vitest run",
+    "check:theme-tokens": "node scripts/check-theme-tokens.mjs",
     "build": "pnpm prepare:mermaid-assets && plasmo build",
     "build:firefox": "pnpm prepare:mermaid-assets && plasmo build --target=firefox-mv3",
     "build:all": "pnpm build && pnpm build:firefox",
diff --git a/scripts/check-theme-tokens.mjs b/scripts/check-theme-tokens.mjs
new file mode 100644
index 000000000..3a36022ff
--- /dev/null
+++ b/scripts/check-theme-tokens.mjs
@@ -0,0 +1,60 @@
+import fs from "node:fs"
+import path from "node:path"
+import process from "node:process"
+
+const rootDir = process.cwd()
+const srcDir = path.join(rootDir, "src")
+const themeTypesFile = path.join(srcDir, "utils/themes/types.ts")
+const themeVariablesFile = path.join(srcDir, "styles/theme-variables.css")
+const supportedExtensions = new Set([".ts", ".tsx", ".css"])
+
+function walkFiles(directory) {
+  return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const absolutePath = path.join(directory, entry.name)
+    if (entry.isDirectory()) return walkFiles(absolutePath)
+    if (!supportedExtensions.has(path.extname(entry.name))) return []
+    if (entry.name.endsWith(".test.ts") || entry.name.endsWith(".test.tsx")) return []
+    return [absolutePath]
+  })
+}
+
+function collectMatches(text, pattern) {
+  return new Set(Array.from(text.matchAll(pattern), (match) => match[1]))
+}
+
+const sourceFiles = walkFiles(srcDir)
+const sourceText = sourceFiles.map((file) => fs.readFileSync(file, "utf8")).join("\n")
+const referencedTokens = collectMatches(sourceText, /var\(\s*(--gh-[a-z0-9-]+)/gi)
+const declaredTokens = new Set([
+  ...collectMatches(sourceText, /(?:^|[\s;{,(])["']?(--gh-[a-z0-9-]+)["']?\s*:/gim),
+  ...collectMatches(sourceText, /setProperty\(\s*["'](--gh-[a-z0-9-]+)["']/gi),
+])
+
+const typeText = fs.readFileSync(themeTypesFile, "utf8")
+const globalThemeTokens = collectMatches(typeText, /["'](--gh-[a-z0-9-]+)["']\??\s*:/gi)
+const defaultThemeText = fs.readFileSync(themeVariablesFile, "utf8")
+const defaultThemeTokens = collectMatches(defaultThemeText, /(?:^|[\s;{])(--gh-[a-z0-9-]+)\s*:/gim)
+
+const undefinedReferences = [...referencedTokens]
+  .filter((token) => !token.endsWith("-"))
+  .filter((token) => !declaredTokens.has(token))
+  .sort()
+const missingDefaults = [...globalThemeTokens]
+  .filter((token) => !defaultThemeTokens.has(token))
+  .sort()
+
+if (undefinedReferences.length || missingDefaults.length) {
+  if (undefinedReferences.length) {
+    console.error("Undefined --gh-* references:")
+    undefinedReferences.forEach((token) => console.error(`  ${token}`))
+  }
+  if (missingDefaults.length) {
+    console.error("ThemeVariables tokens missing from theme-variables.css:")
+    missingDefaults.forEach((token) => console.error(`  ${token}`))
+  }
+  process.exit(1)
+}
+
+console.log(
+  `[theme-tokens] ${referencedTokens.size} references validated; ${globalThemeTokens.size} global tokens have defaults`,
+)
diff --git a/src/components/ConversationDialogs.tsx b/src/components/ConversationDialogs.tsx
index e83198cd2..fc0245c19 100644
--- a/src/components/ConversationDialogs.tsx
+++ b/src/components/ConversationDialogs.tsx
@@ -1,107 +1,12 @@
 import React, { useEffect, useRef, useState } from "react"
-import { createPortal } from "react-dom"
 
 import { ChevronDownIcon, ClearIcon, EditIcon } from "~components/icons"
 import { Button, Tooltip } from "~components/ui"
+import { DialogOverlay as BaseDialogOverlay } from "~components/ui/Dialog"
 import { PRESET_EMOJIS, TAG_COLORS } from "~constants"
 import type { Conversation, Folder, Tag } from "~core/conversation-manager"
-import { OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS } from "~utils/dom-toolkit"
 import { t } from "~utils/i18n"
 
-// ==================== 对话框样式 (从油猴脚本迁移) ====================
-
-const DIALOG_STYLES = `
-  .conversations-dialog-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--gh-overlay-bg, rgba(0,0,0,0.5));
-    z-index: 1000003;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .conversations-dialog {
-    background: var(--gh-bg, white);
-    border-radius: 12px;
-    padding: 20px;
-    min-width: 320px;
-    max-width: min(480px, calc(100vw - 40px));
-    box-shadow: var(--gh-shadow-lg, 0 10px 40px rgba(0,0,0,0.2));
-  }
-  .conversations-dialog-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--gh-text, #1f2937);
-    margin-bottom: 16px;
-  }
-  .conversations-dialog-message {
-    font-size: 14px;
-    color: var(--gh-text-secondary, #4b5563);
-    margin-bottom: 20px;
-    line-height: 1.5;
-    white-space: pre-line;
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
-  .conversations-dialog-section {
-    margin-bottom: 16px;
-  }
-  .conversations-dialog-section label {
-    display: block;
-    font-size: 13px;
-    color: var(--gh-text-secondary, #6b7280);
-    margin-bottom: 8px;
-  }
-  .conversations-dialog-input {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid var(--gh-input-border, #d1d5db);
-    border-radius: 8px;
-    font-size: 14px;
-    box-sizing: border-box;
-    background: var(--gh-input-bg, #ffffff);
-    color: var(--gh-text, #1f2937);
-  }
-  .conversations-dialog-input:focus {
-    outline: none;
-    border-color: var(--gh-input-focus-border, #4285f4);
-    box-shadow: var(--gh-input-focus-shadow, 0 0 0 2px rgba(66,133,244,0.1));
-  }
-  .conversations-dialog-buttons {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    margin-top: 20px;
-  }
-  .emoji-grid-hidden-scrollbar::-webkit-scrollbar {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-  @keyframes gh-highlight-fade {
-    0% { background-color: var(--gh-highlight-pulse, rgba(59, 130, 246, 0.3)); }
-    100% { background-color: transparent; }
-  }
-  .conversations-folder-select-highlight {
-    animation: gh-highlight-fade 2s ease-out;
-  }
-`
-
-// 样式注入状态
-let dialogStyleInjected = false
-
-const injectDialogStyles = () => {
-  if (dialogStyleInjected) return
-  const style = document.createElement("style")
-  style.id = "gh-dialog-styles"
-  style.textContent = DIALOG_STYLES
-  document.head.appendChild(style)
-  dialogStyleInjected = true
-}
-
 const getInboxDisplayName = (): string => {
   const translated = t("conversationsInbox")
   return translated === "conversationsInbox" ? "Inbox" : translated
@@ -138,31 +43,14 @@ interface DialogOverlayProps {
  * 这样对话框会出现在面板外面，覆盖整个页面
  */
 export const DialogOverlay: React.FC<DialogOverlayProps> = ({ children, onClose }) => {
-  useEffect(() => {
-    // 注入对话框样式
-    injectDialogStyles()
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose()
-    }
-    document.addEventListener("keydown", handleKeyDown)
-    return () => document.removeEventListener("keydown", handleKeyDown)
-  }, [onClose])
-
-  // 对话框内容
-  const dialogContent = (
-    <div
-      className="conversations-dialog-overlay"
-      {...OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS}
-      onClick={onClose}>
-      <div className="conversations-dialog" onClick={(e) => e.stopPropagation()}>
-        {children}
-      </div>
-    </div>
+  return (
+    <BaseDialogOverlay
+      onClose={onClose}
+      overlayClassName="conversations-dialog-overlay"
+      dialogClassName="conversations-dialog">
+      {children}
+    </BaseDialogOverlay>
   )
-
-  // 使用 Portal 渲染到 document.body
-  return createPortal(dialogContent, document.body)
 }
 
 // ==================== 确认对话框 ====================
diff --git a/src/components/ConversationMenus.tsx b/src/components/ConversationMenus.tsx
index dce7f4fa0..bf8c203b3 100644
--- a/src/components/ConversationMenus.tsx
+++ b/src/components/ConversationMenus.tsx
@@ -17,48 +17,7 @@ import { TagIcon } from "~components/icons/TagIcon"
 import type { Conversation, Folder } from "~core/conversation-manager"
 import { OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS } from "~utils/dom-toolkit"
 import { t } from "~utils/i18n"
-
-// ==================== 菜单样式  ====================
-
-const MENU_STYLES = `
-  .conversations-folder-menu {
-    background: var(--gh-bg, white);
-    border: 1px solid var(--gh-border, #e5e7eb);
-    border-radius: 6px;
-    box-shadow: var(--gh-shadow, 0 4px 12px rgba(0,0,0,0.15));
-    z-index: 10000000;
-    padding: 3px;
-    min-width: 80px;
-  }
-  .conversations-folder-menu button {
-    display: block;
-    width: 100%;
-    padding: 6px 10px;
-    border: none;
-    background: none;
-    text-align: left;
-    font-size: 12px;
-    color: var(--gh-text, #374151);
-    cursor: pointer;
-    border-radius: 4px;
-    white-space: nowrap;
-  }
-  .conversations-folder-menu button:hover {
-    background: var(--gh-hover, #f3f4f6);
-  }
-`
-
-// 样式注入状态
-let menuStyleInjected = false
-
-const injectMenuStyles = () => {
-  if (menuStyleInjected) return
-  const style = document.createElement("style")
-  style.id = "gh-menu-styles"
-  style.textContent = MENU_STYLES
-  document.head.appendChild(style)
-  menuStyleInjected = true
-}
+import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
 
 // ==================== 通用菜单容器 ====================
 
@@ -79,13 +38,11 @@ export interface MenuAnchorPoint {
  * 这样避免被 MainPanel 的 transform 影响 fixed 定位
  */
 export const ContextMenu: React.FC<MenuProps> = ({ anchorEl, anchorPoint, onClose, children }) => {
+  const portalTarget = useOverlayPortalTarget()
   const menuRef = useRef<HTMLDivElement>(null)
   const [menuPosition, setMenuPosition] = useState<{ left: number; top: number } | null>(null)
 
   useEffect(() => {
-    // 注入菜单样式
-    injectMenuStyles()
-
     if (!anchorEl && !anchorPoint) return
 
     const handleClickOutside = (e: MouseEvent) => {
@@ -162,7 +119,7 @@ export const ContextMenu: React.FC<MenuProps> = ({ anchorEl, anchorPoint, onClos
     setMenuPosition({ left, top })
   }, [anchorEl, anchorPoint])
 
-  if (!anchorEl && !anchorPoint) return null
+  if ((!anchorEl && !anchorPoint) || !portalTarget) return null
 
   // 使用 Portal 渲染到 document.body，避免 transform 影响 fixed 定位
   const menuContent = (
@@ -181,7 +138,7 @@ export const ContextMenu: React.FC<MenuProps> = ({ anchorEl, anchorPoint, onClos
     </div>
   )
 
-  return createPortal(menuContent, document.body)
+  return createPortal(menuContent, portalTarget)
 }
 
 // ==================== 菜单按钮 ====================
diff --git a/src/components/LoadingOverlay.tsx b/src/components/LoadingOverlay.tsx
index e5cb6253a..b799988a1 100644
--- a/src/components/LoadingOverlay.tsx
+++ b/src/components/LoadingOverlay.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from "react"
 import { createPortal } from "react-dom"
 
 import { t } from "~utils/i18n"
+import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
 
 interface LoadingOverlayProps {
   isVisible: boolean
@@ -24,6 +25,7 @@ export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
   blockPageInteraction = false,
   onStop,
 }) => {
+  const portalTarget = useOverlayPortalTarget()
   useEffect(() => {
     if (!isVisible || !blockPageInteraction) return
 
@@ -174,9 +176,5 @@ export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
     </div>
   )
 
-  if (!document?.body) {
-    return overlay
-  }
-
-  return createPortal(overlay, document.body)
+  return portalTarget ? createPortal(overlay, portalTarget) : null
 }
diff --git a/src/components/PromptsTab.tsx b/src/components/PromptsTab.tsx
index 07bf07590..9557e5fe6 100644
--- a/src/components/PromptsTab.tsx
+++ b/src/components/PromptsTab.tsx
@@ -23,6 +23,7 @@ import {
 } from "~components/icons"
 import { ContextMenu, MenuButton } from "~components/ConversationMenus"
 import { Button, ConfirmDialog, InputDialog, SafeSvgMarkup, Tooltip } from "~components/ui"
+import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
 import {
   extractVariables,
   type ParsedVariable,
@@ -996,6 +997,7 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
   selectedPromptId,
 }) => {
   const DOUBLE_CLICK_DELAY_MS = 340
+  const overlayPortalTarget = useOverlayPortalTarget()
 
   const doubleClickToSend = useSettingsStore(
     (state) => state.settings.features?.prompts?.doubleClickToSend ?? false,
@@ -2425,7 +2427,7 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
   }
 
   const renderChainEditorModal = () => {
-    if (!chainEditorState.show || !chainEditorState.draft) return null
+    if (!chainEditorState.show || !chainEditorState.draft || !overlayPortalTarget) return null
 
     const draft = chainEditorState.draft
     const variables = getChainVariables(draft)
@@ -2724,7 +2726,7 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
           </div>
         </div>
       </>,
-      document.body,
+      overlayPortalTarget,
     )
   }
 
@@ -2745,7 +2747,7 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
 
   // 分类管理弹窗
   const renderCategoryModal = () => {
-    if (!isCategoryModalOpen) return null
+    if (!isCategoryModalOpen || !overlayPortalTarget) return null
 
     return createPortal(
       <div
@@ -2852,7 +2854,7 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
           </div>
         </div>
       </div>,
-      document.body,
+      overlayPortalTarget,
     )
   }
 
@@ -3421,6 +3423,7 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
       {/* 图标选择器弹窗 */}
       {showChainIconPicker &&
         chainEditorState.draft &&
+        overlayPortalTarget &&
         createPortal(
           <div
             className="prompt-modal gh-interactive"
@@ -3449,7 +3452,7 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
               />
             </div>
           </div>,
-          document.body,
+          overlayPortalTarget,
         )}
 
       <style>{`
diff --git a/src/components/QueueOverlay.tsx b/src/components/QueueOverlay.tsx
index 1738e2b68..d5c8ea718 100644
--- a/src/components/QueueOverlay.tsx
+++ b/src/components/QueueOverlay.tsx
@@ -12,6 +12,7 @@ import { createPortal } from "react-dom"
 import type { SiteAdapter } from "~adapters/base"
 import { CleanupIcon, ImportIcon, PromptQueueIcon } from "~components/icons"
 import { DialogOverlay, Tooltip } from "~components/ui"
+import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
 import { extractVariables } from "~components/VariableInputDialog"
 import { formatShortcut, normalizeShortcutBinding } from "~constants/shortcuts"
 import type { QueueDispatcher } from "~core/queue-dispatcher"
@@ -38,6 +39,7 @@ type QueueBatchSource = "text" | "library"
 type QueueLibraryMode = "single" | "line"
 
 export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher }) => {
+  const portalTarget = useOverlayPortalTarget()
   const [isExpanded, setIsExpanded] = useState(false)
   const [isGenerating, setIsGenerating] = useState(false)
   const [inputValue, setInputValue] = useState("")
@@ -490,14 +492,10 @@ export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher
 
   // ==================== 渲染 ====================
 
-  if (!position) return null
+  if (!position || !portalTarget) return null
 
   // 因为定位点(top, left)标志着组件要显示的右下角（紧贴输入框上方右侧）
   // 所以需要用 translate(-100%, -100%) 把组件从锚定点推上去靠左
-  // 为了保证能读取到 CSS 主题变量，我们需要找到含有主题类名的容器
-  // App 组件渲染内容在 .gh-root 下
-  const targetContainer = document.querySelector(".gh-root") || document.body
-
   const capsuleStyle: React.CSSProperties = {
     bottom: position.bottom,
     right: position.right,
@@ -524,7 +522,7 @@ export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher
           </span>
         </div>
       </Tooltip>,
-      targetContainer,
+      portalTarget,
     )
   }
 
@@ -773,7 +771,7 @@ export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher
             {shortcutText && <span className="gh-queue-shortcut-hint">{shortcutText}</span>}
           </div>
         </div>,
-        targetContainer,
+        portalTarget,
       )}
 
       {isBatchDialogOpen && (
diff --git a/src/components/SegmentedExportDialog.tsx b/src/components/SegmentedExportDialog.tsx
index 2c9285da7..1a5cf53e6 100644
--- a/src/components/SegmentedExportDialog.tsx
+++ b/src/components/SegmentedExportDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react"
+import React, { useMemo, useState } from "react"
 
 import type {
   ConversationExportSegment,
@@ -237,17 +237,6 @@ const SEGMENTED_EXPORT_DIALOG_STYLES = `
   }
 `
 
-let segmentedExportDialogStylesInjected = false
-
-function ensureSegmentedExportDialogStyles(): void {
-  if (segmentedExportDialogStylesInjected) return
-  const style = document.createElement("style")
-  style.id = "gh-segmented-export-dialog-styles"
-  style.textContent = SEGMENTED_EXPORT_DIALOG_STYLES
-  document.head.appendChild(style)
-  segmentedExportDialogStylesInjected = true
-}
-
 interface SegmentedExportDialogProps {
   draft: ConversationSegmentedExportDraft
   isExporting?: boolean
@@ -301,10 +290,6 @@ export const SegmentedExportDialog: React.FC<SegmentedExportDialogProps> = ({
   const [rangeInput, setRangeInput] = useState("")
   const [mode, setMode] = useState<ConversationSegmentedExportMode>("merged-markdown")
 
-  useEffect(() => {
-    ensureSegmentedExportDialogStyles()
-  }, [])
-
   const filteredSegments = useMemo(() => {
     const query = searchQuery.trim().toLowerCase()
     if (!query) return draft.segments
@@ -360,6 +345,7 @@ export const SegmentedExportDialog: React.FC<SegmentedExportDialogProps> = ({
       closeOnEscape={!isExporting}
       dialogClassName="gh-segmented-export-dialog"
       dialogStyle={{ maxWidth: "760px" }}>
+      <style>{SEGMENTED_EXPORT_DIALOG_STYLES}</style>
       <div className="gh-segmented-export-header">
         <div className="gh-segmented-export-title-row">
           <div className="gh-segmented-export-title">{t("segmentedExportTitle")}</div>
diff --git a/src/components/prompts/ImportDialog.tsx b/src/components/prompts/ImportDialog.tsx
index 373b2b0f5..d95a872f2 100644
--- a/src/components/prompts/ImportDialog.tsx
+++ b/src/components/prompts/ImportDialog.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { createPortal } from "react-dom"
 
 import { Button } from "~components/ui"
+import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
 import { OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS } from "~utils/dom-toolkit"
 import { t } from "~utils/i18n"
 
@@ -20,7 +21,8 @@ export const ImportDialog = ({
   onMerge,
   onOverwrite,
 }: ImportDialogProps) => {
-  if (!isOpen) return null
+  const portalTarget = useOverlayPortalTarget()
+  if (!isOpen || !portalTarget) return null
 
   return createPortal(
     <div
@@ -96,6 +98,6 @@ export const ImportDialog = ({
         </div>
       </div>
     </div>,
-    document.body,
+    portalTarget,
   )
 }
diff --git a/src/components/prompts/PromptEditorDialog.tsx b/src/components/prompts/PromptEditorDialog.tsx
index c49d68d6e..f6bd9ff4c 100644
--- a/src/components/prompts/PromptEditorDialog.tsx
+++ b/src/components/prompts/PromptEditorDialog.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { createPortal } from "react-dom"
 
 import { Button } from "~components/ui"
+import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
 import { OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS } from "~utils/dom-toolkit"
 import { getHighlightStyles, renderMarkdown } from "~utils/markdown"
 import { showCopySuccess } from "~utils/icons"
@@ -32,7 +33,8 @@ export const PromptEditorDialog: React.FC<PromptEditorDialogProps> = ({
   onClose,
   onSave,
 }) => {
-  if (!isOpen) return null
+  const portalTarget = useOverlayPortalTarget()
+  if (!isOpen || !portalTarget) return null
 
   return createPortal(
     <div
@@ -274,6 +276,6 @@ export const PromptEditorDialog: React.FC<PromptEditorDialogProps> = ({
         </div>
       </div>
     </div>,
-    document.body,
+    portalTarget,
   )
 }
diff --git a/src/components/prompts/PromptPreviewModal.tsx b/src/components/prompts/PromptPreviewModal.tsx
index 61eb3c8eb..696ce12a2 100644
--- a/src/components/prompts/PromptPreviewModal.tsx
+++ b/src/components/prompts/PromptPreviewModal.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { createPortal } from "react-dom"
 
 import { ClearIcon } from "~components/icons"
+import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
 import { OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS } from "~utils/dom-toolkit"
 import { showCopySuccess } from "~utils/icons"
 import { t } from "~utils/i18n"
@@ -270,7 +271,8 @@ export const PromptPreviewModal = ({
   getCategoryColorIndex,
   getResolvedCategoryColor,
 }: PromptPreviewModalProps) => {
-  if (!isOpen || !prompt) return null
+  const portalTarget = useOverlayPortalTarget()
+  if (!isOpen || !prompt || !portalTarget) return null
 
   const categoryLabel = prompt.category || t("uncategorized")
   const categoryColorIndex = getCategoryColorIndex(categoryLabel)
@@ -338,6 +340,6 @@ export const PromptPreviewModal = ({
         </div>
       </div>
     </>,
-    document.body,
+    portalTarget,
   )
 }
diff --git a/src/components/ui/Dialog.test.tsx b/src/components/ui/Dialog.test.tsx
new file mode 100644
index 000000000..57f64b7f0
--- /dev/null
+++ b/src/components/ui/Dialog.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import React, { useState } from "react"
+import { describe, expect, it, vi } from "vitest"
+
+import { DialogOverlay } from "./Dialog"
+import { OverlayPortalProvider } from "./OverlayPortal"
+
+const DialogHarness = ({ onClose }: { onClose: () => void }) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <OverlayPortalProvider>
+      <button onClick={() => setIsOpen(true)}>Open</button>
+      {isOpen && (
+        <DialogOverlay
+          onClose={() => {
+            setIsOpen(false)
+            onClose()
+          }}>
+          <div className="gh-dialog-title">Confirm action</div>
+          <button>Cancel</button>
+          <button>Confirm</button>
+        </DialogOverlay>
+      )}
+    </OverlayPortalProvider>
+  )
+}
+
+describe("DialogOverlay", () => {
+  it("renders in the shared overlay root, traps focus, and restores the trigger", async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<DialogHarness onClose={onClose} />)
+
+    const trigger = screen.getByRole("button", { name: "Open" })
+    await user.click(trigger)
+
+    const dialog = await screen.findByRole("dialog", { name: "Confirm action" })
+    expect(dialog.closest("#ophel-overlay-root")).not.toBeNull()
+    expect(screen.getByRole("button", { name: "Cancel" })).toHaveFocus()
+
+    await user.tab({ shift: true })
+    expect(screen.getByRole("button", { name: "Confirm" })).toHaveFocus()
+
+    await user.keyboard("{Escape}")
+    await waitFor(() => expect(dialog).not.toBeInTheDocument())
+    expect(onClose).toHaveBeenCalledOnce()
+    expect(trigger).toHaveFocus()
+  })
+})
diff --git a/src/components/ui/Dialog.tsx b/src/components/ui/Dialog.tsx
index 119e4a399..7a1359c69 100644
--- a/src/components/ui/Dialog.tsx
+++ b/src/components/ui/Dialog.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useEffect, useId, useRef, useState } from "react"
 import { createPortal } from "react-dom"
 
 import {
@@ -6,99 +6,16 @@ import {
   OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS,
 } from "~utils/dom-toolkit"
 import { t } from "~utils/i18n"
+import { useOverlayPortalTarget } from "./OverlayPortal"
 
-// ==================== 对话框样式 ====================
+const getDeepActiveElement = (): HTMLElement | null => {
+  let activeElement: Element | null = document.activeElement
 
-const DIALOG_STYLES = `
-  .gh-dialog-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--gh-overlay-bg, rgba(0,0,0,0.5));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2147483647;
+  while (activeElement?.shadowRoot?.activeElement) {
+    activeElement = activeElement.shadowRoot.activeElement
   }
-  .gh-dialog {
-    background: var(--gh-bg, white);
-    border-radius: 12px;
-    padding: 20px;
-    min-width: 280px;
-    max-width: 400px;
-    box-shadow: var(--gh-shadow-lg, 0 20px 50px rgba(0,0,0,0.3));
-  }
-  .gh-dialog-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--gh-text, #1f2937);
-    margin-bottom: 12px;
-  }
-  .gh-dialog-message {
-    font-size: 14px;
-    color: var(--gh-text-secondary, #6b7280);
-    margin-bottom: 20px;
-    line-height: 1.5;
-    white-space: pre-wrap;
-  }
-  .gh-dialog-buttons {
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-  }
-  .gh-dialog-btn {
-    padding: 8px 16px;
-    border-radius: 6px;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.2s;
-    border: none;
-  }
-  .gh-dialog-btn-secondary {
-    border: 1px solid var(--gh-border, #d1d5db);
-    background: var(--gh-bg, white);
-    color: var(--gh-text, #374151);
-  }
-  .gh-dialog-btn-secondary:hover {
-    background: var(--gh-hover, #f3f4f6);
-  }
-  .gh-dialog-btn-primary {
-    background: var(--gh-brand-gradient, linear-gradient(135deg, #4285f4 0%, #34a853 100%));
-    color: white;
-  }
-  .gh-dialog-btn-danger {
-    background: var(--gh-text-danger, #ef4444);
-    color: white;
-  }
-  .gh-dialog-input {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid var(--gh-border, #d1d5db);
-    border-radius: 6px;
-    font-size: 14px;
-    box-sizing: border-box;
-    margin-bottom: 20px;
-    background: var(--gh-bg, #ffffff);
-    color: var(--gh-text, #1f2937);
-  }
-  .gh-dialog-input:focus {
-    outline: none;
-    border-color: var(--gh-input-focus-border, #4285f4);
-  }
-`
 
-// 样式注入状态
-let dialogStyleInjected = false
-
-const injectDialogStyles = () => {
-  if (dialogStyleInjected) return
-  const style = document.createElement("style")
-  style.id = "gh-dialog-styles"
-  style.textContent = DIALOG_STYLES
-  document.head.appendChild(style)
-  dialogStyleInjected = true
+  return activeElement instanceof HTMLElement ? activeElement : null
 }
 
 // ==================== DialogOverlay ====================
@@ -108,33 +25,94 @@ export interface DialogOverlayProps {
   onClose: () => void
   closeOnOverlayClick?: boolean
   closeOnEscape?: boolean
+  overlayClassName?: string
   dialogClassName?: string
   dialogStyle?: React.CSSProperties
+  ariaLabel?: string
 }
 
 /**
- * 对话框覆盖层 - 使用 Portal 渲染到 document.body
+ * 对话框覆盖层 - 渲染到当前 React 树注册的统一覆盖层根节点
  */
 export const DialogOverlay: React.FC<DialogOverlayProps> = ({
   children,
   onClose,
   closeOnOverlayClick = true,
   closeOnEscape = true,
+  overlayClassName,
   dialogClassName,
   dialogStyle,
+  ariaLabel,
 }) => {
+  const portalTarget = useOverlayPortalTarget()
   const overlayRef = useRef<HTMLDivElement>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const restoreFocusRef = useRef<HTMLElement | null>(null)
+  const titleId = `gh-dialog-title-${useId().replace(/:/g, "")}`
+  const [resolvedTitleId, setResolvedTitleId] = useState<string | undefined>(undefined)
 
   useEffect(() => {
-    injectDialogStyles()
+    restoreFocusRef.current = getDeepActiveElement()
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (closeOnEscape && e.key === "Escape") onClose()
+      if (closeOnEscape && e.key === "Escape") {
+        e.preventDefault()
+        onClose()
+        return
+      }
+
+      if (e.key !== "Tab") return
+
+      const dialog = dialogRef.current
+      if (!dialog) return
+      const focusable = Array.from(
+        dialog.querySelectorAll<HTMLElement>(
+          'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+        ),
+      ).filter((element) => element.getAttribute("aria-hidden") !== "true")
+
+      if (focusable.length === 0) {
+        e.preventDefault()
+        dialog.focus()
+        return
+      }
+
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+      const activeElement = getDeepActiveElement()
+      if (e.shiftKey && activeElement === first) {
+        e.preventDefault()
+        last.focus()
+      } else if (!e.shiftKey && activeElement === last) {
+        e.preventDefault()
+        first.focus()
+      }
     }
     document.addEventListener("keydown", handleKeyDown)
-    return () => document.removeEventListener("keydown", handleKeyDown)
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown)
+      restoreFocusRef.current?.focus()
+    }
   }, [closeOnEscape, onClose])
 
+  useEffect(() => {
+    const dialog = dialogRef.current
+    if (!dialog) return
+
+    const title = dialog.querySelector<HTMLElement>(".gh-dialog-title, .conversations-dialog-title")
+    if (title) {
+      title.id = titleId
+      setResolvedTitleId(titleId)
+    } else {
+      setResolvedTitleId(undefined)
+    }
+
+    const initialFocus = dialog.querySelector<HTMLElement>(
+      '[autofocus], input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    )
+    ;(initialFocus || dialog).focus()
+  }, [titleId])
+
   useEffect(() => {
     const overlay = overlayRef.current
     if (!overlay) {
@@ -148,19 +126,31 @@ export const DialogOverlay: React.FC<DialogOverlayProps> = ({
   const dialogContent = (
     <div
       ref={overlayRef}
-      className="gh-dialog-overlay gh-interactive"
+      className={`gh-dialog-overlay gh-interactive${overlayClassName ? ` ${overlayClassName}` : ""}`}
       {...OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS}
-      onClick={closeOnOverlayClick ? onClose : undefined}>
+      onClick={
+        closeOnOverlayClick
+          ? (event) => {
+              if (event.target === event.currentTarget) onClose()
+            }
+          : undefined
+      }>
       <div
+        ref={dialogRef}
         className={dialogClassName ? `gh-dialog ${dialogClassName}` : "gh-dialog"}
         style={dialogStyle}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabel ? undefined : resolvedTitleId}
+        tabIndex={-1}
         onClick={(e) => e.stopPropagation()}>
         {children}
       </div>
     </div>
   )
 
-  return createPortal(dialogContent, document.body)
+  return portalTarget ? createPortal(dialogContent, portalTarget) : null
 }
 
 // ==================== ConfirmDialog ====================
diff --git a/src/components/ui/OverlayPortal.tsx b/src/components/ui/OverlayPortal.tsx
new file mode 100644
index 000000000..46a138d62
--- /dev/null
+++ b/src/components/ui/OverlayPortal.tsx
@@ -0,0 +1,35 @@
+import React, { createContext, useCallback, useContext, useRef, useState } from "react"
+
+const OverlayPortalContext = createContext<HTMLElement | null>(null)
+
+interface OverlayPortalProviderProps {
+  children: React.ReactNode
+}
+
+export const OverlayPortalProvider: React.FC<OverlayPortalProviderProps> = ({ children }) => {
+  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null)
+  const registeredRootRef = useRef<HTMLElement | null>(null)
+
+  const registerPortalRoot = useCallback((node: HTMLDivElement | null) => {
+    setPortalRoot(node)
+
+    if (node) {
+      registeredRootRef.current = node
+      window.__ophelOverlayRoot = node
+    } else if (window.__ophelOverlayRoot === registeredRootRef.current) {
+      window.__ophelOverlayRoot = undefined
+      registeredRootRef.current = null
+    }
+  }, [])
+
+  return (
+    <OverlayPortalContext.Provider value={portalRoot}>
+      {children}
+      <div ref={registerPortalRoot} id="ophel-overlay-root" className="gh-overlay-root" />
+    </OverlayPortalContext.Provider>
+  )
+}
+
+export function useOverlayPortalTarget(): HTMLElement | null {
+  return useContext(OverlayPortalContext)
+}
diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
index 6c6f04aae..95a98ac0a 100644
--- a/src/components/ui/Tooltip.tsx
+++ b/src/components/ui/Tooltip.tsx
@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from "react"
 import { createPortal } from "react-dom"
 import type { ReactNode } from "react"
 
-const GLOBAL_TOOLTIP_STYLE_ID = "ophel-global-tooltip-styles"
+import { useOverlayPortalTarget } from "./OverlayPortal"
+
 const DEFAULT_TOOLTIP_DELAY_MS = 300
 const DEFAULT_TOOLTIP_MAX_WIDTH = 260
 const DEFAULT_TOOLTIP_GAP = 8
@@ -32,36 +33,6 @@ function isFocusFromWindowRestoration(): boolean {
   })
 })()
 
-export const GLOBAL_TOOLTIP_STYLE_TEXT = `
-  .ophel-tooltip {
-    background-color: rgba(30, 30, 35, 0.95);
-    color: #ffffff;
-    padding: 6px 12px;
-    border-radius: 6px;
-    font-size: 13px;
-    line-height: 1.5;
-    z-index: 2147483647;
-    pointer-events: none;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(4px);
-    animation: tooltip-fade-in 0.15s ease-out;
-  }
-
-  @keyframes tooltip-fade-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-`
-
 export type TooltipPlacement = "top" | "bottom"
 
 export interface TooltipPositionOptions {
@@ -103,33 +74,13 @@ function resolveDisabled(disabled: DomTooltipOptions["disabled"]): boolean {
 }
 
 export function resolveTooltipPortalContainer(
-  triggerNode: Node | null,
+  _triggerNode: Node | null,
 ): Element | DocumentFragment | null {
-  if (!triggerNode || typeof document === "undefined") {
+  if (typeof window === "undefined") {
     return null
   }
 
-  const root = triggerNode.getRootNode?.()
-  if (root instanceof ShadowRoot) {
-    return root
-  }
-
-  return document.body
-}
-
-export function ensureGlobalTooltipStyles(container: Element | DocumentFragment | null): void {
-  if (typeof document === "undefined" || !container || container instanceof ShadowRoot) {
-    return
-  }
-
-  if (document.getElementById(GLOBAL_TOOLTIP_STYLE_ID)) {
-    return
-  }
-
-  const style = document.createElement("style")
-  style.id = GLOBAL_TOOLTIP_STYLE_ID
-  style.textContent = GLOBAL_TOOLTIP_STYLE_TEXT
-  document.head.appendChild(style)
+  return window.__ophelOverlayRoot?.isConnected ? window.__ophelOverlayRoot : null
 }
 
 export function calculateTooltipPosition(
@@ -212,8 +163,6 @@ class DomTooltipManager {
     const container = resolveTooltipPortalContainer(trigger)
     if (!container) return
 
-    ensureGlobalTooltipStyles(container)
-
     if (this.activeTrigger && this.activeTrigger !== trigger) {
       this.activeTrigger.removeAttribute("aria-describedby")
     }
@@ -365,11 +314,11 @@ export const Tooltip: React.FC<TooltipProps> = ({
   triggerStyle = {},
   disabled = false,
 }) => {
+  const portalContainer = useOverlayPortalTarget()
   const [isVisible, setIsVisible] = useState(false)
   const [position, setPosition] = useState<TooltipCoordinates>({ top: 0, left: 0 })
   const [isMeasuring, setIsMeasuring] = useState(false)
   const [hasPendingTimer, setHasPendingTimer] = useState(false)
-  const [portalContainer, setPortalContainer] = useState<Element | DocumentFragment | null>(null)
 
   const triggerRef = useRef<HTMLDivElement>(null)
   const tooltipRef = useRef<HTMLDivElement>(null)
@@ -422,14 +371,6 @@ export const Tooltip: React.FC<TooltipProps> = ({
     )
   }, [])
 
-  useEffect(() => {
-    if (triggerRef.current) {
-      const container = resolveTooltipPortalContainer(triggerRef.current)
-      setPortalContainer(container)
-      ensureGlobalTooltipStyles(container)
-    }
-  }, [])
-
   useEffect(() => {
     if ((isVisible || isMeasuring) && triggerRef.current) {
       updatePosition()
diff --git a/src/contents/ui-entry.tsx b/src/contents/ui-entry.tsx
index cef3ba20b..b299483e7 100644
--- a/src/contents/ui-entry.tsx
+++ b/src/contents/ui-entry.tsx
@@ -2,10 +2,12 @@ import cssText from "data-text:~style.css"
 import conversationsCssText from "data-text:~styles/conversations.css"
 import releaseNotesCssText from "data-text:~styles/release-notes.css"
 import settingsCssText from "data-text:~styles/settings.css"
+import overlaysCssText from "data-text:~styles/overlays.css"
 import type { PlasmoCSConfig, PlasmoMountShadowHost } from "plasmo"
 import React from "react"
 
 import { App } from "~components/App"
+import { OverlayPortalProvider } from "~components/ui/OverlayPortal"
 import { getAdapterRuntime, subscribeAdapterRuntime } from "~core/adapter-runtime"
 import { applyOphelPlatformFontClass } from "~utils/font"
 
@@ -70,6 +72,8 @@ export const getStyle = () => {
     releaseNotesCssText +
     "\n" +
     settingsCssText +
+    "\n" +
+    overlaysCssText +
     (earlyThemeCSS ? "\n" + earlyThemeCSS : "")
   return style
 }
@@ -134,7 +138,11 @@ const PlasmoApp = () => {
     getAdapterRuntime,
   )
 
-  return adapter ? <App adapter={adapter} /> : null
+  return adapter ? (
+    <OverlayPortalProvider>
+      <App adapter={adapter} />
+    </OverlayPortalProvider>
+  ) : null
 }
 
 export default PlasmoApp
diff --git a/src/core/assistant-mermaid-renderer.ts b/src/core/assistant-mermaid-renderer.ts
index 6201aca83..c09f3e6cb 100644
--- a/src/core/assistant-mermaid-renderer.ts
+++ b/src/core/assistant-mermaid-renderer.ts
@@ -64,7 +64,7 @@ const ASSISTANT_MERMAID_CSS = `
   gap: 10px;
   padding: 8px 10px;
   border-bottom: 1px solid var(--gh-border, rgba(148, 163, 184, 0.2));
-  background: var(--gh-bg-primary, rgba(248, 250, 252, 0.96));
+  background: var(--gh-bg, rgba(248, 250, 252, 0.96));
 }
 
 .gh-assistant-mermaid-actions {
@@ -133,7 +133,7 @@ const ASSISTANT_MERMAID_CSS = `
 .gh-assistant-mermaid-preview {
   padding: 12px;
   overflow-x: auto;
-  background: var(--gh-bg-primary, rgba(255, 255, 255, 0.96));
+  background: var(--gh-bg, rgba(255, 255, 255, 0.96));
 }
 
 .gh-assistant-mermaid-preview:fullscreen,
@@ -146,7 +146,7 @@ const ASSISTANT_MERMAID_CSS = `
   padding: ${FULLSCREEN_PREVIEW_PADDING}px;
   box-sizing: border-box;
   overflow: auto;
-  background: var(--gh-bg-primary, rgba(255, 255, 255, 0.98));
+  background: var(--gh-bg, rgba(255, 255, 255, 0.98));
 }
 
 .gh-assistant-mermaid-preview[hidden] {
diff --git a/src/platform/userscript/entry.tsx b/src/platform/userscript/entry.tsx
index 95540f2de..3bf10e7ca 100644
--- a/src/platform/userscript/entry.tsx
+++ b/src/platform/userscript/entry.tsx
@@ -371,12 +371,14 @@ async function init() {
   const [
     { loadAdapter },
     { App },
+    { OverlayPortalProvider },
     { setAdapterRuntime },
     { initNetworkMonitor },
     { initGeminiTitleGuard },
   ] = await Promise.all([
     import("~adapters"),
     import("~components/App"),
+    import("~components/ui/OverlayPortal"),
     import("~core/adapter-runtime"),
     import("~core/network-monitor"),
     import("~core/gemini-title-guard"),
@@ -486,7 +488,11 @@ async function init() {
           [],
         )
 
-        return React.createElement(App, { adapter })
+        return React.createElement(
+          OverlayPortalProvider,
+          null,
+          React.createElement(App, { adapter }),
+        )
       }
 
       const root = ReactDOM.createRoot(container)
diff --git a/src/popup.tsx b/src/popup.tsx
index 24db96d40..c7ae8ec00 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -13,6 +13,7 @@ import { StarIcon } from "~components/icons/StarIcon"
 import { TimeIcon } from "~components/icons/TimeIcon"
 import { SUPPORTED_AI_PLATFORMS } from "~constants/defaults"
 import { Tooltip } from "~components/ui/Tooltip"
+import { OverlayPortalProvider } from "~components/ui/OverlayPortal"
 import { SITE_ICONS } from "~constants/site-icons"
 import { getStoreInfo } from "~utils/getStoreInfo"
 import { setLanguage, t } from "~utils/i18n"
@@ -20,6 +21,7 @@ import { MSG_START_NEW_CONVERSATION } from "~utils/messaging"
 import { version } from "../package.json"
 
 import "./popup.css"
+import "~styles/overlays.css"
 
 // Inject platform type
 declare const __PLATFORM__: "extension" | "userscript" | undefined
@@ -320,4 +322,10 @@ function IndexPopup() {
   )
 }
 
-export default IndexPopup
+const PopupApp = () => (
+  <OverlayPortalProvider>
+    <IndexPopup />
+  </OverlayPortalProvider>
+)
+
+export default PopupApp
diff --git a/src/styles/overlays.css b/src/styles/overlays.css
new file mode 100644
index 000000000..f02e4f60d
--- /dev/null
+++ b/src/styles/overlays.css
@@ -0,0 +1,264 @@
+.gh-overlay-root {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483645;
+  width: 100vw;
+  height: 100vh;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.gh-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--gh-overlay-bg, rgba(0, 0, 0, 0.5));
+  pointer-events: auto;
+}
+
+.gh-dialog {
+  min-width: 280px;
+  max-width: min(400px, calc(100vw - 32px));
+  padding: 20px;
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 12px;
+  background: var(--gh-bg, #ffffff);
+  box-shadow: var(--gh-shadow-lg, 0 20px 50px rgba(0, 0, 0, 0.3));
+  color: var(--gh-text, #1f2937);
+  outline: none;
+}
+
+.gh-dialog-title {
+  margin-bottom: 12px;
+  color: var(--gh-text, #1f2937);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.gh-dialog-message {
+  margin-bottom: 20px;
+  color: var(--gh-text-secondary, #6b7280);
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.gh-dialog-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.gh-dialog-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.15s ease;
+}
+
+.gh-dialog-btn:active {
+  transform: translateY(1px);
+}
+
+.gh-dialog-btn:focus-visible {
+  outline: 2px solid var(--gh-primary, #4285f4);
+  outline-offset: 2px;
+}
+
+.gh-dialog-btn-secondary {
+  border: 1px solid var(--gh-border, #d1d5db);
+  background: var(--gh-bg, #ffffff);
+  color: var(--gh-text, #374151);
+}
+
+.gh-dialog-btn-secondary:hover {
+  background: var(--gh-hover, #f3f4f6);
+}
+
+.gh-dialog-btn-primary {
+  background: var(
+    --gh-brand-gradient,
+    linear-gradient(135deg, var(--gh-primary, #4285f4), var(--gh-secondary, #34a853))
+  );
+  color: #ffffff;
+}
+
+.gh-dialog-btn-danger {
+  background: var(--gh-text-danger, #ef4444);
+  color: #ffffff;
+}
+
+.gh-dialog-input {
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 10px 12px;
+  border: 1px solid var(--gh-input-border, var(--gh-border, #d1d5db));
+  border-radius: 8px;
+  background: var(--gh-input-bg, var(--gh-bg, #ffffff));
+  color: var(--gh-text, #1f2937);
+  font-size: 14px;
+}
+
+.gh-dialog-input:focus-visible {
+  border-color: var(--gh-input-focus-border, var(--gh-primary, #4285f4));
+  outline: none;
+  box-shadow: var(--gh-input-focus-shadow, 0 0 0 3px rgba(66, 133, 244, 0.18));
+}
+
+.conversations-dialog-overlay {
+  z-index: 2147483647;
+}
+
+.conversations-dialog {
+  min-width: 320px;
+  max-width: min(480px, calc(100vw - 40px));
+}
+
+.conversations-dialog-title {
+  margin-bottom: 16px;
+  color: var(--gh-text, #1f2937);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.conversations-dialog-message {
+  margin-bottom: 20px;
+  color: var(--gh-text-secondary, #4b5563);
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  white-space: pre-line;
+  word-break: break-word;
+}
+
+.conversations-dialog-section {
+  margin-bottom: 16px;
+}
+
+.conversations-dialog-section label {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--gh-text-secondary, #6b7280);
+  font-size: 13px;
+}
+
+.conversations-dialog-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--gh-input-border, #d1d5db);
+  border-radius: 8px;
+  background: var(--gh-input-bg, #ffffff);
+  color: var(--gh-text, #1f2937);
+  font-size: 14px;
+}
+
+.conversations-dialog-input:focus-visible {
+  border-color: var(--gh-input-focus-border, #4285f4);
+  outline: none;
+  box-shadow: var(--gh-input-focus-shadow, 0 0 0 2px rgba(66, 133, 244, 0.1));
+}
+
+.conversations-dialog-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+.emoji-grid-hidden-scrollbar::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+@keyframes gh-highlight-fade {
+  from {
+    background-color: var(--gh-highlight-pulse, rgba(59, 130, 246, 0.3));
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
+.conversations-folder-select-highlight {
+  animation: gh-highlight-fade 2s ease-out;
+}
+
+.conversations-folder-menu {
+  z-index: 2147483647;
+  min-width: 80px;
+  padding: 3px;
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 8px;
+  background: var(--gh-bg, #ffffff);
+  box-shadow: var(--gh-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  pointer-events: auto;
+}
+
+.conversations-folder-menu button {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--gh-text, #374151);
+  font-size: 12px;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.conversations-folder-menu button:hover {
+  background: var(--gh-hover, #f3f4f6);
+}
+
+.conversations-folder-menu button:focus-visible {
+  outline: 2px solid var(--gh-primary, #4285f4);
+  outline-offset: -2px;
+}
+
+.ophel-tooltip {
+  z-index: 2147483647;
+  padding: 6px 12px;
+  border: 1px solid color-mix(in srgb, var(--gh-text, #ffffff) 12%, transparent);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--gh-text, #1e1e23) 94%, transparent);
+  box-shadow: var(--gh-shadow, 0 4px 12px rgba(0, 0, 0, 0.2));
+  color: var(--gh-bg, #ffffff);
+  font-size: 13px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  pointer-events: none;
+  backdrop-filter: blur(4px);
+  animation: tooltip-fade-in 0.15s ease-out;
+}
+
+@keyframes tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ophel-tooltip,
+  .conversations-folder-select-highlight {
+    animation: none;
+  }
+}
diff --git a/src/styles/settings.css b/src/styles/settings.css
index 0245ad708..4af4c9cb7 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -1392,7 +1392,7 @@
 .settings-theme-name {
   font-size: 12.5px;
   font-weight: 500;
-  color: color-mix(in srgb, var(--gh-text, #374151) 84%, var(--gh-secondary-text, #6b7280) 16%);
+  color: color-mix(in srgb, var(--gh-text, #374151) 84%, var(--gh-text-secondary, #6b7280) 16%);
   line-height: 1.4;
   letter-spacing: -0.01em;
   min-height: 34px;
diff --git a/src/styles/theme-variables.css b/src/styles/theme-variables.css
index bb48df23e..9d17278b0 100644
--- a/src/styles/theme-variables.css
+++ b/src/styles/theme-variables.css
@@ -42,11 +42,27 @@
   --gh-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   --gh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
   --gh-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
+  --gh-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12);
 
   /* === 品牌色 === */
   --gh-primary: #4285f4;
   --gh-secondary: #34a853;
   --gh-danger: #ef4444;
+  --gh-accent: var(--gh-primary);
+  --gh-accent-hover: color-mix(in srgb, var(--gh-primary) 86%, black);
+  --gh-bg-accent: color-mix(in srgb, var(--gh-primary) 10%, var(--gh-bg));
+  --gh-border-light: color-mix(in srgb, var(--gh-border) 72%, transparent);
+  --gh-border-hover: color-mix(in srgb, var(--gh-primary) 38%, var(--gh-border));
+  --gh-primary-hover: color-mix(in srgb, var(--gh-primary) 86%, black);
+  --gh-primary-light: color-mix(in srgb, var(--gh-primary) 12%, var(--gh-bg));
+  --gh-success: var(--gh-secondary);
+  --gh-error: var(--gh-danger);
+  --gh-text-disabled: color-mix(in srgb, var(--gh-text-secondary) 62%, transparent);
+  --gh-warning: #f59e0b;
+  --gh-text-warning: #b45309;
+  --gh-bg-warning-light: color-mix(in srgb, var(--gh-warning) 10%, var(--gh-bg));
+  --gh-warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  --gh-border-danger: color-mix(in srgb, var(--gh-danger) 32%, var(--gh-border));
   --gh-brand-gradient: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
   --gh-shadow-brand: 0 4px 12px rgba(66, 133, 244, 0.3);
 
@@ -141,6 +157,17 @@
   /* === 滑块圆点颜色 === */
   --gh-slider-dot-bg: #d1d5db;
 
+  /* === 代码块 === */
+  --gh-code-bg: rgba(0, 0, 0, 0.05);
+
+  /* === 组件布局 === */
+  --gh-icon-left: -24px;
+
+  /* === 可选主题装饰 === */
+  --gh-bg-image: none;
+  --gh-bg-animation: none;
+  --gh-footer-text: var(--gh-text-on-primary);
+
   /* === 分类颜色（柔和背景色） === */
   --gh-category-1: #fecaca; /* 红 */
   --gh-category-2: #fed7aa; /* 橙 */
diff --git a/src/tabs/options.tsx b/src/tabs/options.tsx
index 3cebbe907..5faaeae0c 100644
--- a/src/tabs/options.tsx
+++ b/src/tabs/options.tsx
@@ -18,6 +18,7 @@ import { platform } from "~platform"
 import { useSettingsHydrated, useSettingsStore } from "~stores/settings-store"
 import { APP_DISPLAY_NAME, APP_ICON_URL } from "~utils/config"
 import { SidebarCommunityLinks } from "~components/SidebarCommunityLinks"
+import { OverlayPortalProvider } from "~components/ui/OverlayPortal"
 import { getOphelPlatformFontClassName } from "~utils/font"
 import { setLanguage, t } from "~utils/i18n"
 
@@ -31,6 +32,7 @@ import PermissionsPage from "./options/pages/PermissionsPage"
 import SiteSettingsPage from "./options/pages/SiteSettingsPage"
 // 样式
 import "./options.css"
+import "~styles/overlays.css"
 
 import { SidebarFooter } from "./options/components/SidebarFooter"
 
@@ -302,4 +304,10 @@ const OptionsPage = () => {
   )
 }
 
-export default OptionsPage
+const OptionsApp = () => (
+  <OverlayPortalProvider>
+    <OptionsPage />
+  </OverlayPortalProvider>
+)
+
+export default OptionsApp
diff --git a/src/tabs/options/components/LanguageMenu.tsx b/src/tabs/options/components/LanguageMenu.tsx
index 1c122d327..f665b6d37 100644
--- a/src/tabs/options/components/LanguageMenu.tsx
+++ b/src/tabs/options/components/LanguageMenu.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from "react"
 import { createPortal } from "react-dom"
 
+import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
+
 export const LANG_MAP: Record<string, string> = {
   "zh-CN": "简体中文",
   "zh-TW": "繁體中文",
@@ -25,11 +27,11 @@ interface LanguageMenuProps {
 
 export const LanguageMenu: React.FC<LanguageMenuProps> = ({
   currentLang,
-  themeMode = "light",
   onSelect,
   onClose,
   triggerRef,
 }) => {
+  const portalTarget = useOverlayPortalTarget()
   const menuRef = useRef<HTMLDivElement>(null)
   const [position, setPosition] = useState({ top: 0, left: 0 })
 
@@ -45,22 +47,7 @@ export const LanguageMenu: React.FC<LanguageMenuProps> = ({
     })
   }, [triggerRef])
 
-  const colors =
-    themeMode === "dark"
-      ? {
-          bg: "#1f2937",
-          border: "#374151",
-          text: "#e5e7eb",
-          hover: "#374151",
-          activeBg: "rgba(59, 130, 246, 0.2)",
-        }
-      : {
-          bg: "#ffffff",
-          border: "#e5e7eb",
-          text: "#374151",
-          hover: "#f3f4f6",
-          activeBg: "rgba(59, 130, 246, 0.1)",
-        }
+  if (!portalTarget) return null
 
   // Use createPortal to render outside of any overflow:hidden containers
   return createPortal(
@@ -91,8 +78,8 @@ export const LanguageMenu: React.FC<LanguageMenuProps> = ({
           bottom: window.innerHeight - position.top + 5,
           left: position.left - 150, // Shift left by width
           width: "150px",
-          background: colors.bg,
-          border: `1px solid ${colors.border}`,
+          background: "var(--gh-bg, #ffffff)",
+          border: "1px solid var(--gh-border, #e5e7eb)",
           borderRadius: "8px",
           boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
           padding: "4px",
@@ -116,8 +103,11 @@ export const LanguageMenu: React.FC<LanguageMenuProps> = ({
               justifyContent: "space-between",
               padding: "8px 12px",
               border: "none",
-              background: currentLang === key ? colors.activeBg : "transparent",
-              color: currentLang === key ? "#3b82f6" : colors.text,
+              background:
+                currentLang === key
+                  ? "color-mix(in srgb, var(--gh-primary, #4285f4) 12%, transparent)"
+                  : "transparent",
+              color: currentLang === key ? "var(--gh-primary, #4285f4)" : "var(--gh-text, #374151)",
               fontSize: "13px",
               cursor: "pointer",
               borderRadius: "4px",
@@ -127,12 +117,12 @@ export const LanguageMenu: React.FC<LanguageMenuProps> = ({
               transition: "background-color 0.1s",
             }}
             onMouseEnter={(e) => {
-              if (currentLang !== key) e.currentTarget.style.backgroundColor = colors.hover
+              if (currentLang !== key) {
+                e.currentTarget.style.backgroundColor = "var(--gh-hover, #f3f4f6)"
+              }
             }}
             onMouseLeave={(e) => {
-              if (currentLang !== key)
-                e.currentTarget.style.backgroundColor =
-                  currentLang === key ? colors.activeBg : "transparent"
+              if (currentLang !== key) e.currentTarget.style.backgroundColor = "transparent"
             }}>
             <span>{label}</span>
             {currentLang === key && <span>✓</span>}
@@ -146,6 +136,6 @@ export const LanguageMenu: React.FC<LanguageMenuProps> = ({
         }
       `}</style>
     </div>,
-    document.body,
+    portalTarget,
   )
 }
diff --git a/src/tabs/options/pages/BackupPage.tsx b/src/tabs/options/pages/BackupPage.tsx
index 62eafa281..ec958a866 100644
--- a/src/tabs/options/pages/BackupPage.tsx
+++ b/src/tabs/options/pages/BackupPage.tsx
@@ -1162,8 +1162,8 @@ const BackupPage: React.FC<BackupPageProps> = ({ onNavigate: _onNavigate }) => {
           return (
             <div
               style={{
-                background: "var(--gh-primary-light-bg, rgba(66, 133, 244, 0.05))",
-                border: "1px solid var(--gh-primary-border, rgba(66, 133, 244, 0.2))",
+                background: "var(--gh-primary-light, rgba(66, 133, 244, 0.05))",
+                border: "1px solid var(--gh-border-hover, rgba(66, 133, 244, 0.2))",
                 borderRadius: "8px",
                 padding: "10px 12px",
                 marginBottom: "4px",
diff --git a/src/tabs/options/pages/ClaudeSettings.tsx b/src/tabs/options/pages/ClaudeSettings.tsx
index 47edca943..0c16453a6 100644
--- a/src/tabs/options/pages/ClaudeSettings.tsx
+++ b/src/tabs/options/pages/ClaudeSettings.tsx
@@ -565,7 +565,7 @@ const ClaudeSettings: React.FC<ClaudeSettingsProps> = ({ siteId }) => {
               padding: "8px 12px",
               flex: "1 1 auto",
               opacity: keys.length === 0 || isBatchTesting ? 0.6 : 1,
-              backgroundColor: isBatchTesting ? "rgba(var(--gh-primary-rgb), 0.1)" : undefined,
+              backgroundColor: isBatchTesting ? "var(--gh-primary-light)" : undefined,
               color: isBatchTesting ? "var(--gh-primary)" : undefined,
               borderColor: isBatchTesting ? "var(--gh-primary)" : undefined,
               whiteSpace: "nowrap",
diff --git a/src/tabs/options/pages/ShortcutsPage.tsx b/src/tabs/options/pages/ShortcutsPage.tsx
index a2c48f5e0..c65b54805 100644
--- a/src/tabs/options/pages/ShortcutsPage.tsx
+++ b/src/tabs/options/pages/ShortcutsPage.tsx
@@ -124,7 +124,7 @@ const ShortcutInput: React.FC<{
             ? "2px solid var(--gh-primary)"
             : "1px solid var(--gh-border, #e5e7eb)",
           borderRadius: "6px",
-          background: isRecording ? "var(--gh-bg-hover)" : "var(--gh-bg)",
+          background: isRecording ? "var(--gh-hover)" : "var(--gh-bg)",
           color: binding ? "var(--gh-text)" : "var(--gh-text-tertiary)",
           cursor: "pointer",
           textAlign: "center",
diff --git a/src/tabs/options/pages/SiteSettingsPage.tsx b/src/tabs/options/pages/SiteSettingsPage.tsx
index e7a279a8e..25cc3edc0 100644
--- a/src/tabs/options/pages/SiteSettingsPage.tsx
+++ b/src/tabs/options/pages/SiteSettingsPage.tsx
@@ -430,7 +430,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = ({
             style={{
               marginTop: "24px",
               paddingTop: "16px",
-              borderTop: "1px solid var(--gh-border-color)",
+              borderTop: "1px solid var(--gh-border)",
             }}>
             <h3 style={{ fontSize: "14px", fontWeight: 600, marginBottom: "12px" }}>
               Gemini Enterprise
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 1fd1c7dd1..b416ec064 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -25,6 +25,8 @@ declare global {
     __ophelThemeManager?: ThemeManager
     /** 当前页面已加载的站点适配器 */
     __ophelAdapterRuntime?: SiteAdapter
+    /** Shadow DOM 内的统一覆盖层 Portal 根节点 */
+    __ophelOverlayRoot?: HTMLElement
     /** 滚动锁定初始化标记 */
     __ophelScrollLockInitialized?: boolean
     /** 滚动锁定是否启用 */
diff --git a/src/utils/themes/themes.test.ts b/src/utils/themes/themes.test.ts
new file mode 100644
index 000000000..cd7e6cf1d
--- /dev/null
+++ b/src/utils/themes/themes.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest"
+
+import { darkPresets } from "./dark"
+import { lightPresets } from "./light"
+
+const REQUIRED_THEME_TOKENS = [
+  "--gh-bg",
+  "--gh-text",
+  "--gh-border",
+  "--gh-hover",
+  "--gh-primary",
+  "--gh-secondary",
+  "--gh-danger",
+  "--gh-overlay-bg",
+  "--gh-input-focus-border",
+  "--gh-input-focus-shadow",
+] as const
+
+describe("theme presets", () => {
+  it("keeps the complete 12 light and 12 dark preset catalog", () => {
+    expect(lightPresets).toHaveLength(12)
+    expect(darkPresets).toHaveLength(12)
+  })
+
+  it("defines the required semantic primitives for every preset", () => {
+    for (const preset of [...lightPresets, ...darkPresets]) {
+      for (const token of REQUIRED_THEME_TOKENS) {
+        expect(preset.variables[token], `${preset.id} is missing ${token}`).toBeTruthy()
+      }
+    }
+  })
+})
diff --git a/src/utils/themes/types.ts b/src/utils/themes/types.ts
index 9b4866d07..8100f7faa 100644
--- a/src/utils/themes/types.ts
+++ b/src/utils/themes/types.ts
@@ -34,11 +34,28 @@ export interface ThemeVariables {
   "--gh-shadow-sm": string
   "--gh-shadow-lg": string
   "--gh-shadow-brand": string
+  "--gh-shadow-md"?: string
 
   // 品牌色
   "--gh-primary": string
   "--gh-secondary": string
   "--gh-danger": string
+  "--gh-accent"?: string
+  "--gh-accent-hover"?: string
+  "--gh-bg-accent"?: string
+  "--gh-border-light"?: string
+  "--gh-border-hover"?: string
+  "--gh-primary-hover"?: string
+  "--gh-primary-light"?: string
+  "--gh-success"?: string
+  "--gh-error"?: string
+  "--gh-text-disabled"?: string
+  "--gh-warning"?: string
+  "--gh-text-warning"?: string
+  "--gh-bg-warning-light"?: string
+  "--gh-warning-gradient"?: string
+  "--gh-border-danger"?: string
+  "--gh-icon-left"?: string
 
   // 语义化组件变量
   "--gh-header-bg": string
diff --git a/vite.userscript.config.ts b/vite.userscript.config.ts
index 7c24321d7..800b27d90 100644
--- a/vite.userscript.config.ts
+++ b/vite.userscript.config.ts
@@ -162,8 +162,19 @@ function buildUserscriptStyleBundle(): string {
     path.resolve(__dirname, "src/styles/settings.css"),
     "utf-8",
   )
+  const overlaysStyle = fs.readFileSync(
+    path.resolve(__dirname, "src/styles/overlays.css"),
+    "utf-8",
+  )
 
-  return [themeVariablesStyle, mainStyle, conversationsStyle, releaseNotesStyle, settingsStyle].join("\n")
+  return [
+    themeVariablesStyle,
+    mainStyle,
+    conversationsStyle,
+    releaseNotesStyle,
+    settingsStyle,
+    overlaysStyle,
+  ].join("\n")
 }
 
 function createContentHash(content: string | Buffer): string {

From 281e1b37abc71e474fba976ae751b7a2cb6224b4 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 16:04:43 +0800
Subject: [PATCH 05/17] ux(settings): align navigation and responsive layout

---
 src/components/ConversationsTab.tsx           |   4 +-
 src/components/ModelLockSettingsContent.tsx   |   5 +-
 src/components/PromptsTab.tsx                 |   2 +-
 src/components/QueueOverlay.tsx               |   2 +-
 src/components/SettingsModal.tsx              |  83 ++-------
 .../global-search/GlobalSearchOverlay.tsx     |   3 +-
 src/components/ui/PlaceholderInput.tsx        |   4 +-
 src/components/ui/SelectDropdown.tsx          |   3 +-
 src/constants/index.ts                        |   2 +
 src/constants/settings-navigation.test.ts     |  22 +++
 src/constants/settings-navigation.ts          |  36 ++++
 src/locales/de/index.ts                       |   5 +
 src/locales/en/index.ts                       |   4 +
 src/locales/es/index.ts                       |   5 +
 src/locales/fr/index.ts                       |   5 +
 src/locales/it/index.ts                       |   5 +
 src/locales/ja/index.ts                       |   4 +
 src/locales/ko/index.ts                       |   5 +
 src/locales/pt/index.ts                       |   5 +
 src/locales/resources.test.ts                 |  16 ++
 src/locales/ru/index.ts                       |   5 +
 src/locales/zh-CN/index.ts                    |   4 +
 src/locales/zh-TW/index.ts                    |   4 +
 src/styles/settings.css                       | 172 ++++++++++++++++++
 src/tabs/options.tsx                          |  72 ++------
 src/tabs/options/pages/GeneralPage.tsx        |   5 +-
 26 files changed, 347 insertions(+), 135 deletions(-)
 create mode 100644 src/constants/settings-navigation.test.ts
 create mode 100644 src/constants/settings-navigation.ts
 create mode 100644 src/locales/resources.test.ts

diff --git a/src/components/ConversationsTab.tsx b/src/components/ConversationsTab.tsx
index 856db86b3..1c0b843c1 100644
--- a/src/components/ConversationsTab.tsx
+++ b/src/components/ConversationsTab.tsx
@@ -1744,8 +1744,8 @@ const ConversationItem = React.memo<ConversationItemProps>(
                   />
                 )}
                 {searchQuery && searchResult?.conversationMatches.has(conv.id)
-                  ? highlightText(conv.title || "无标题", searchQuery)
-                  : conv.title || "无标题"}
+                  ? highlightText(conv.title || t("untitledConversation"), searchQuery)
+                  : conv.title || t("untitledConversation")}
               </span>
             </Tooltip>
 
diff --git a/src/components/ModelLockSettingsContent.tsx b/src/components/ModelLockSettingsContent.tsx
index 7ffe42908..6802e1875 100644
--- a/src/components/ModelLockSettingsContent.tsx
+++ b/src/components/ModelLockSettingsContent.tsx
@@ -138,7 +138,7 @@ const ModelLockRow: React.FC<{
           }}
         />
       </div>
-      <Switch checked={currentConfig.enabled} onChange={toggleEnabled} />
+      <Switch checked={currentConfig.enabled} onChange={toggleEnabled} ariaLabel={label} />
     </div>
   )
 }
@@ -232,6 +232,7 @@ const AIStudioModelLockRow: React.FC<{
       <Tooltip content={t("aistudioRefreshModelListTooltip")}>
         <button
           className="icon-button"
+          aria-label={t("aistudioRefreshModelListTooltip")}
           onClick={handleRefresh}
           disabled={isLoading}
           style={{
@@ -273,7 +274,7 @@ const AIStudioModelLockRow: React.FC<{
           ))}
         </select>
       </div>
-      <Switch checked={currentConfig.enabled} onChange={toggleEnabled} />
+      <Switch checked={currentConfig.enabled} onChange={toggleEnabled} ariaLabel="AI Studio" />
     </div>
   )
 }
diff --git a/src/components/PromptsTab.tsx b/src/components/PromptsTab.tsx
index 9557e5fe6..d28c9bf41 100644
--- a/src/components/PromptsTab.tsx
+++ b/src/components/PromptsTab.tsx
@@ -1945,7 +1945,7 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
   const handleDelete = (id: string, e: React.MouseEvent) => {
     e.stopPropagation()
     e.preventDefault()
-    showConfirm(t("confirmDelete"), "确定删除该提示词？", async () => {
+    showConfirm(t("delete"), t("confirmDelete"), async () => {
       await manager.deletePrompt(id)
       showToast(t("deleted"))
       loadData()
diff --git a/src/components/QueueOverlay.tsx b/src/components/QueueOverlay.tsx
index d5c8ea718..fd85075ef 100644
--- a/src/components/QueueOverlay.tsx
+++ b/src/components/QueueOverlay.tsx
@@ -576,7 +576,7 @@ export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher
           <div className="gh-queue-list">
             {items.filter((i) => i.status === "pending" || i.status === "sending").length === 0 ? (
               <div className="gh-queue-empty">
-                队列为空，输入内容后按 {submitKeyDisplay} 发送或排队
+                {t("queueEmptyShortcut", { shortcut: submitKeyDisplay })}
               </div>
             ) : (
               items
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index d53a23c2d..ba23a8015 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -4,24 +4,16 @@
  */
 import React, { useEffect, useRef, useState } from "react"
 
-import {
-  AboutIcon,
-  AppearanceIcon,
-  BackupIcon,
-  ClearIcon,
-  FeaturesIcon,
-  GeneralIcon,
-  KeyboardIcon,
-  MaximizeIcon,
-  PageContentIcon,
-  PermissionsIcon,
-  RestoreIcon,
-  SearchIcon,
-} from "~components/icons"
+import { ClearIcon, MaximizeIcon, RestoreIcon } from "~components/icons"
 import ModelLockSettingsContent from "~components/ModelLockSettingsContent"
 import { Tooltip } from "~components/ui/Tooltip"
 import { SidebarCommunityLinks } from "~components/SidebarCommunityLinks"
-import { NAV_IDS, resolveSettingsNavigateDetail, type SettingsNavigateDetail } from "~constants"
+import {
+  getSettingsNavigationItems,
+  NAV_IDS,
+  resolveSettingsNavigateDetail,
+  type SettingsNavigateDetail,
+} from "~constants"
 import { platform } from "~platform"
 import { useSettingsHydrated, useSettingsStore } from "~stores/settings-store"
 import { SidebarFooter } from "~tabs/options/components/SidebarFooter"
@@ -38,11 +30,6 @@ import { APP_DISPLAY_NAME, APP_ICON_URL } from "~utils/config"
 import { attachEditableKeyboardFocusGuard, OPHEL_INTERACTION_LAYER_PROPS } from "~utils/dom-toolkit"
 import { setLanguage, t } from "~utils/i18n"
 
-const getLocalizedLabel = (labelKey: string, fallback: string): string => {
-  const localized = t(labelKey)
-  return localized === labelKey ? fallback : localized
-}
-
 const FOCUSABLE_SETTINGS_MODAL_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -73,44 +60,6 @@ const getFocusableElements = (container: HTMLElement): HTMLElement[] =>
     isFocusableElementVisible,
   )
 
-// 导航菜单定义
-const NAV_ITEMS = [
-  {
-    id: NAV_IDS.GENERAL,
-    Icon: GeneralIcon,
-    labelKey: "navGeneral",
-    label: "基本设置",
-  },
-  {
-    id: NAV_IDS.APPEARANCE,
-    Icon: AppearanceIcon,
-    labelKey: "navAppearance",
-    label: "外观主题",
-  },
-  { id: NAV_IDS.FEATURES, Icon: FeaturesIcon, labelKey: "navFeatures", label: "功能模块" },
-  {
-    id: NAV_IDS.SITE_SETTINGS,
-    Icon: PageContentIcon,
-    labelKey: "navSiteSettings",
-    label: "站点配置",
-  },
-  {
-    id: NAV_IDS.GLOBAL_SEARCH,
-    Icon: SearchIcon,
-    labelKey: "navGlobalSearch",
-    label: "全局搜索",
-  },
-  { id: NAV_IDS.SHORTCUTS, Icon: KeyboardIcon, labelKey: "navShortcuts", label: "快捷键位" },
-  { id: NAV_IDS.BACKUP, Icon: BackupIcon, labelKey: "navBackup", label: "数据管理" },
-  {
-    id: NAV_IDS.PERMISSIONS,
-    Icon: PermissionsIcon,
-    labelKey: "navPermissions",
-    label: "权限管理",
-  },
-  { id: NAV_IDS.ABOUT, Icon: AboutIcon, labelKey: "navAbout", label: "关于" },
-]
-
 interface SettingsModalProps {
   isOpen: boolean
   onClose: () => void
@@ -236,7 +185,12 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
     const handleNavigate = (e: CustomEvent<SettingsNavigateDetail>) => {
       const resolved = resolveSettingsNavigateDetail(e.detail || {})
 
-      if (resolved.page && NAV_ITEMS.some((item) => item.id === resolved.page)) {
+      if (
+        resolved.page &&
+        getSettingsNavigationItems(platform.hasCapability("permissions")).some(
+          (item) => item.id === resolved.page,
+        )
+      ) {
         setActivePage(resolved.page)
       }
 
@@ -460,12 +414,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
             </div>
           </div>
           <nav className="settings-sidebar-nav">
-            {NAV_ITEMS.filter((item) => {
-              // 油猴脚本环境中过滤掉 permissions 导航项
-              if (!platform.hasCapability("permissions") && item.id === NAV_IDS.PERMISSIONS)
-                return false
-              return true
-            }).map((item) => (
+            {getSettingsNavigationItems(platform.hasCapability("permissions")).map((item) => (
               <button
                 key={item.id}
                 className={`settings-nav-item ${activePage === item.id ? "active" : ""}`}
@@ -477,9 +426,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
                 <span className="settings-nav-item-icon">
                   <item.Icon size={22} />
                 </span>
-                <span className="settings-nav-item-label">
-                  {getLocalizedLabel(item.labelKey, item.label)}
-                </span>
+                <span className="settings-nav-item-label">{t(item.labelKey)}</span>
               </button>
             ))}
 
diff --git a/src/components/global-search/GlobalSearchOverlay.tsx b/src/components/global-search/GlobalSearchOverlay.tsx
index ff0379c52..dd7c6d3d5 100644
--- a/src/components/global-search/GlobalSearchOverlay.tsx
+++ b/src/components/global-search/GlobalSearchOverlay.tsx
@@ -2,6 +2,7 @@ import React from "react"
 
 import { SearchIcon } from "~components/icons"
 import { attachEditableKeyboardFocusGuard } from "~utils/dom-toolkit"
+import { t } from "~utils/i18n"
 
 import type { GlobalSearchSyntaxSuggestionItem } from "./types"
 
@@ -283,7 +284,7 @@ export const GlobalSearchOverlay = <TItem, TCategoryId extends string>(
         </div>
 
         {activeFilterChips.length > 0 ? (
-          <div className="settings-search-filter-chips" aria-label="active search filters">
+          <div className="settings-search-filter-chips" aria-label={t("activeSearchFilters")}>
             {activeFilterChips.map((chip) => (
               <button
                 key={chip.id}
diff --git a/src/components/ui/PlaceholderInput.tsx b/src/components/ui/PlaceholderInput.tsx
index 24229cca1..630aae0f9 100644
--- a/src/components/ui/PlaceholderInput.tsx
+++ b/src/components/ui/PlaceholderInput.tsx
@@ -6,6 +6,8 @@
  */
 import React, { useCallback, useEffect, useRef } from "react"
 
+import { t } from "~utils/i18n"
+
 export interface PlaceholderInputProps {
   value: string
   onChange: (value: string) => void
@@ -173,7 +175,7 @@ export const PlaceholderInput: React.FC<PlaceholderInputProps> = ({
         />
       </div>
 
-      <div className="placeholder-input-list" aria-label="Title format placeholders">
+      <div className="placeholder-input-list" aria-label={t("titleFormatPlaceholders")}>
         {placeholders.map((token) => (
           <button
             key={token}
diff --git a/src/components/ui/SelectDropdown.tsx b/src/components/ui/SelectDropdown.tsx
index 6fea2d524..adccd5748 100644
--- a/src/components/ui/SelectDropdown.tsx
+++ b/src/components/ui/SelectDropdown.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react"
 
 import { ChevronDownIcon } from "~components/icons"
 import { OPHEL_INTERACTION_LAYER_PROPS } from "~utils/dom-toolkit"
+import { t } from "~utils/i18n"
 
 export interface SelectDropdownOption {
   value: string
@@ -306,7 +307,7 @@ export const SelectDropdown: React.FC<SelectDropdownProps> = ({
                 fontSize: "13px",
                 textAlign: "left",
               }}>
-              {emptyText || "No options"}
+              {emptyText || t("noOptions")}
             </div>
           ) : (
             options.map((option, index) => {
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 4173007df..023178ce1 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -63,3 +63,5 @@ export {
   type ToolsMenuItem,
   type ToolsMenuId,
 } from "./tools-menu"
+
+export { SETTINGS_NAV_ITEMS, getSettingsNavigationItems } from "./settings-navigation"
diff --git a/src/constants/settings-navigation.test.ts b/src/constants/settings-navigation.test.ts
new file mode 100644
index 000000000..533ea98c2
--- /dev/null
+++ b/src/constants/settings-navigation.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest"
+
+import { NAV_IDS } from "./ui"
+import { getSettingsNavigationItems } from "./settings-navigation"
+
+describe("settings navigation", () => {
+  it("exposes the same complete navigation to both settings surfaces", () => {
+    const itemIds = getSettingsNavigationItems(true).map((item) => item.id)
+
+    expect(itemIds).toContain(NAV_IDS.APPEARANCE)
+    expect(itemIds).toContain(NAV_IDS.GLOBAL_SEARCH)
+    expect(itemIds).toContain(NAV_IDS.SHORTCUTS)
+    expect(itemIds).toHaveLength(9)
+  })
+
+  it("only removes permissions when the platform cannot request them", () => {
+    const itemIds = getSettingsNavigationItems(false).map((item) => item.id)
+
+    expect(itemIds).not.toContain(NAV_IDS.PERMISSIONS)
+    expect(itemIds).toHaveLength(8)
+  })
+})
diff --git a/src/constants/settings-navigation.ts b/src/constants/settings-navigation.ts
new file mode 100644
index 000000000..fec014679
--- /dev/null
+++ b/src/constants/settings-navigation.ts
@@ -0,0 +1,36 @@
+import {
+  AboutIcon,
+  AppearanceIcon,
+  BackupIcon,
+  FeaturesIcon,
+  GeneralIcon,
+  KeyboardIcon,
+  PageContentIcon,
+  PermissionsIcon,
+  SearchIcon,
+} from "~components/icons"
+
+import { NAV_IDS } from "./ui"
+
+export const SETTINGS_NAV_ITEMS = [
+  { id: NAV_IDS.GENERAL, Icon: GeneralIcon, labelKey: "navGeneral" },
+  { id: NAV_IDS.APPEARANCE, Icon: AppearanceIcon, labelKey: "navAppearance" },
+  { id: NAV_IDS.FEATURES, Icon: FeaturesIcon, labelKey: "navFeatures" },
+  { id: NAV_IDS.SITE_SETTINGS, Icon: PageContentIcon, labelKey: "navSiteSettings" },
+  { id: NAV_IDS.GLOBAL_SEARCH, Icon: SearchIcon, labelKey: "navGlobalSearch" },
+  { id: NAV_IDS.SHORTCUTS, Icon: KeyboardIcon, labelKey: "navShortcuts" },
+  { id: NAV_IDS.BACKUP, Icon: BackupIcon, labelKey: "navBackup" },
+  {
+    id: NAV_IDS.PERMISSIONS,
+    Icon: PermissionsIcon,
+    labelKey: "navPermissions",
+    requiresPermissions: true,
+  },
+  { id: NAV_IDS.ABOUT, Icon: AboutIcon, labelKey: "navAbout" },
+] as const
+
+export function getSettingsNavigationItems(hasPermissions: boolean) {
+  return SETTINGS_NAV_ITEMS.filter(
+    (item) => !("requiresPermissions" in item && item.requiresPermissions && !hasPermissions),
+  )
+}
diff --git a/src/locales/de/index.ts b/src/locales/de/index.ts
index c090a81e9..18eec4506 100644
--- a/src/locales/de/index.ts
+++ b/src/locales/de/index.ts
@@ -1553,6 +1553,11 @@ Gib den Code und eine Zusammenfassung der Verbesserungen aus.`,
   queueQuickAsk: "Prompt-Warteschlange",
   queueInQueue: "In Warteschlange ({count})",
   queueEmpty: "Die Warteschlange ist leer. Tippen und Enter drücken zum Senden oder Hinzufügen",
+  queueEmptyShortcut:
+    "Die Warteschlange ist leer. Inhalt eingeben und {shortcut} zum Senden oder Hinzufügen drücken.",
+  activeSearchFilters: "Aktive Suchfilter",
+  titleFormatPlaceholders: "Platzhalter für Titelformat",
+  noOptions: "Keine Optionen",
   queueClearAll: "Alles löschen",
   queueRemove: "Entfernen",
   queuePlaceholderIdle: "Prompt eingeben und Enter drücken zum Senden...",
diff --git a/src/locales/en/index.ts b/src/locales/en/index.ts
index a71c99f60..53f29e1da 100644
--- a/src/locales/en/index.ts
+++ b/src/locales/en/index.ts
@@ -1568,6 +1568,10 @@ Please output the optimized code block directly, followed by a brief summary of
   queueQuickAsk: "Prompt Queue",
   queueInQueue: "Queued ({count})",
   queueEmpty: "Queue is empty. Type and press Enter to send or enqueue.",
+  queueEmptyShortcut: "Queue is empty. Type content and press {shortcut} to send or enqueue.",
+  activeSearchFilters: "Active search filters",
+  titleFormatPlaceholders: "Title format placeholders",
+  noOptions: "No options",
   queueClearAll: "Clear Queue",
   queueRemove: "Remove",
   queuePlaceholderIdle: "Type a prompt, Enter to send...",
diff --git a/src/locales/es/index.ts b/src/locales/es/index.ts
index 377faa228..54d9577a7 100644
--- a/src/locales/es/index.ts
+++ b/src/locales/es/index.ts
@@ -1553,6 +1553,11 @@ Dame el código y luego un resumen de mejoras.`,
   queueQuickAsk: "Cola de Prompts",
   queueInQueue: "En cola ({count})",
   queueEmpty: "La cola está vacía. Escribe y pulsa Enter para enviar o encolar",
+  queueEmptyShortcut:
+    "La cola está vacía. Escribe contenido y pulsa {shortcut} para enviar o encolar.",
+  activeSearchFilters: "Filtros de búsqueda activos",
+  titleFormatPlaceholders: "Marcadores de posición del formato de título",
+  noOptions: "No hay opciones",
   queueClearAll: "Borrar todo",
   queueRemove: "Quitar",
   queuePlaceholderIdle: "Escribe un prompt y pulsa Enter para enviarlo...",
diff --git a/src/locales/fr/index.ts b/src/locales/fr/index.ts
index dfdf12f14..9e7cf88b9 100644
--- a/src/locales/fr/index.ts
+++ b/src/locales/fr/index.ts
@@ -1563,6 +1563,11 @@ Donnez le code puis un résumé des améliorations.`,
   queueQuickAsk: "File des Prompts",
   queueInQueue: "En file ({count})",
   queueEmpty: "La file est vide. Saisissez et appuyez sur Entrée pour envoyer ou ajouter",
+  queueEmptyShortcut:
+    "La file est vide. Saisissez du contenu et appuyez sur {shortcut} pour envoyer ou ajouter.",
+  activeSearchFilters: "Filtres de recherche actifs",
+  titleFormatPlaceholders: "Espaces réservés du format de titre",
+  noOptions: "Aucune option",
   queueClearAll: "Tout effacer",
   queueRemove: "Retirer",
   queuePlaceholderIdle: "Saisissez le prompt, Entrée pour envoyer direct...",
diff --git a/src/locales/it/index.ts b/src/locales/it/index.ts
index 3c131e3d4..e140ddfa1 100644
--- a/src/locales/it/index.ts
+++ b/src/locales/it/index.ts
@@ -1625,6 +1625,11 @@ export const it = {
   queueQuickAsk: "Coda di richiesta",
   queueInQueue: "In coda ({count})",
   queueEmpty: "La coda è vuota. Digita e premi Enter per inviare o accodare.",
+  queueEmptyShortcut:
+    "La coda è vuota. Digita il contenuto e premi {shortcut} per inviare o accodare.",
+  activeSearchFilters: "Filtri di ricerca attivi",
+  titleFormatPlaceholders: "Segnaposto del formato del titolo",
+  noOptions: "Nessuna opzione",
   queueClearAll: "Cancella coda",
   queueRemove: "Rimuovi",
   queuePlaceholderIdle: "Digita un messaggio, Enter per inviare...",
diff --git a/src/locales/ja/index.ts b/src/locales/ja/index.ts
index dd57fddcd..0439113ba 100644
--- a/src/locales/ja/index.ts
+++ b/src/locales/ja/index.ts
@@ -1560,6 +1560,10 @@ export const ja = {
   queueQuickAsk: "プロンプトキュー",
   queueInQueue: "待機中 ({count})",
   queueEmpty: "キューは空です。入力してEnterで送信または追加",
+  queueEmptyShortcut: "キューは空です。内容を入力し、{shortcut} で送信または追加します",
+  activeSearchFilters: "有効な検索フィルター",
+  titleFormatPlaceholders: "タイトル形式のプレースホルダー",
+  noOptions: "利用可能なオプションはありません",
   queueClearAll: "すべてクリア",
   queueRemove: "削除",
   queuePlaceholderIdle: "プロンプトを入力し、Enterで直接送信...",
diff --git a/src/locales/ko/index.ts b/src/locales/ko/index.ts
index cde51b3c0..096c0e9c6 100644
--- a/src/locales/ko/index.ts
+++ b/src/locales/ko/index.ts
@@ -1546,6 +1546,11 @@ export const ko = {
   queueQuickAsk: "프롬프트 대기열",
   queueInQueue: "대기 중 ({count})",
   queueEmpty: "대기열이 비어 있습니다. 입력 후 Enter를 눌러 보내거나 대기열에 추가하세요",
+  queueEmptyShortcut:
+    "대기열이 비어 있습니다. 내용을 입력하고 {shortcut}을 눌러 보내거나 대기열에 추가하세요",
+  activeSearchFilters: "활성 검색 필터",
+  titleFormatPlaceholders: "제목 형식 자리표시자",
+  noOptions: "사용 가능한 옵션이 없습니다",
   queueClearAll: "모두 지우기",
   queueRemove: "제거",
   queuePlaceholderIdle: "프롬프트를 입력하고 Enter를 눌러 전송...",
diff --git a/src/locales/pt/index.ts b/src/locales/pt/index.ts
index f102b4f69..0fcbf52b9 100644
--- a/src/locales/pt/index.ts
+++ b/src/locales/pt/index.ts
@@ -1546,6 +1546,11 @@ Dê o código e depois um resumo de melhorias.`,
   queueQuickAsk: "Fila de Prompts",
   queueInQueue: "Na fila ({count})",
   queueEmpty: "A fila está vazia. Digite e pressione Enter para enviar ou adicionar",
+  queueEmptyShortcut:
+    "A fila está vazia. Digite o conteúdo e pressione {shortcut} para enviar ou adicionar.",
+  activeSearchFilters: "Filtros de pesquisa ativos",
+  titleFormatPlaceholders: "Espaços reservados do formato do título",
+  noOptions: "Nenhuma opção",
   queueClearAll: "Limpar tudo",
   queueRemove: "Remover",
   queuePlaceholderIdle: "Digite o prompt e pressione Enter para enviar...",
diff --git a/src/locales/resources.test.ts b/src/locales/resources.test.ts
new file mode 100644
index 000000000..ab072c24d
--- /dev/null
+++ b/src/locales/resources.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest"
+
+import { resources } from "./resources"
+
+describe("locale resources", () => {
+  it("keeps the same message keys in all 11 languages", () => {
+    const expectedKeys = Object.keys(resources.en).sort()
+
+    expect(Object.keys(resources)).toHaveLength(11)
+    for (const [locale, messages] of Object.entries(resources)) {
+      expect(Object.keys(messages).sort(), `${locale} locale keys differ from en`).toEqual(
+        expectedKeys,
+      )
+    }
+  })
+})
diff --git a/src/locales/ru/index.ts b/src/locales/ru/index.ts
index a572c9b7a..77baf04c7 100644
--- a/src/locales/ru/index.ts
+++ b/src/locales/ru/index.ts
@@ -1548,6 +1548,11 @@ export const ru = {
   queueQuickAsk: "Очередь промптов",
   queueInQueue: "В очереди ({count})",
   queueEmpty: "Очередь пуста. Введите и нажмите Enter для отправки или добавления",
+  queueEmptyShortcut:
+    "Очередь пуста. Введите текст и нажмите {shortcut}, чтобы отправить или добавить в очередь.",
+  activeSearchFilters: "Активные фильтры поиска",
+  titleFormatPlaceholders: "Заполнители формата заголовка",
+  noOptions: "Нет доступных вариантов",
   queueClearAll: "Очистить всё",
   queueRemove: "Удалить",
   queuePlaceholderIdle: "Введите промпт, Enter для отправки...",
diff --git a/src/locales/zh-CN/index.ts b/src/locales/zh-CN/index.ts
index 5107b4531..7d5f914bd 100644
--- a/src/locales/zh-CN/index.ts
+++ b/src/locales/zh-CN/index.ts
@@ -1521,6 +1521,10 @@ export const zhCN = {
   queueQuickAsk: "提示词队列",
   queueInQueue: "队列中 ({count})",
   queueEmpty: "队列为空，输入内容后按 Enter 发送或排队",
+  queueEmptyShortcut: "队列为空，输入内容后按 {shortcut} 发送或排队",
+  activeSearchFilters: "已启用的搜索筛选",
+  titleFormatPlaceholders: "标题格式占位符",
+  noOptions: "无可用选项",
   queueClearAll: "清空队列",
   queueRemove: "移除",
   queuePlaceholderIdle: "输入提示词，Enter 直接发送...",
diff --git a/src/locales/zh-TW/index.ts b/src/locales/zh-TW/index.ts
index 69b6bf1b1..ad1c32af7 100644
--- a/src/locales/zh-TW/index.ts
+++ b/src/locales/zh-TW/index.ts
@@ -1521,6 +1521,10 @@ export const zhTW = {
   queueQuickAsk: "提示詞隊列",
   queueInQueue: "隊列中 ({count})",
   queueEmpty: "隊列為空，輸入內容後按 Enter 發送或排隊",
+  queueEmptyShortcut: "隊列為空，輸入內容後按 {shortcut} 發送或排隊",
+  activeSearchFilters: "已啟用的搜尋篩選",
+  titleFormatPlaceholders: "標題格式預留位置",
+  noOptions: "沒有可用選項",
   queueClearAll: "清空隊列",
   queueRemove: "移除",
   queuePlaceholderIdle: "輸入提示詞，Enter 直接發送...",
diff --git a/src/styles/settings.css b/src/styles/settings.css
index 4af4c9cb7..361fc0690 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -82,6 +82,7 @@
   flex: 1;
   padding: 12px 10px;
   overflow-y: auto;
+  overflow-x: hidden;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -3553,3 +3554,174 @@ html[data-theme="dark"] .about-privacy-banner {
   font-size: 12px;
   background: var(--gh-bg-secondary, #f9fafb);
 }
+
+/* ==================== 整体响应式布局 ==================== */
+
+@media (max-width: 900px) {
+  .settings-sidebar {
+    width: 188px;
+  }
+
+  .settings-content {
+    min-width: 0;
+    padding: 20px 22px;
+  }
+
+  .settings-modal-container .settings-content {
+    padding-right: 44px;
+  }
+}
+
+@media (max-width: 720px) {
+  .settings-layout,
+  .settings-modal-container {
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .settings-modal-container,
+  .settings-modal-container.maximized {
+    width: calc(100vw - 20px);
+    height: calc(100vh - 20px);
+    max-width: none;
+    max-height: none;
+    border-radius: 14px;
+  }
+
+  .settings-sidebar,
+  .settings-modal-container .settings-sidebar {
+    width: 100%;
+    height: auto;
+    flex: 0 0 auto;
+    border-right: none;
+    border-bottom: 1px solid var(--gh-border, #e5e7eb);
+    border-radius: 0;
+  }
+
+  .settings-sidebar-header {
+    padding: 10px 14px 8px;
+  }
+
+  .settings-sidebar-logo {
+    gap: 9px;
+    font-size: 15px;
+  }
+
+  .settings-sidebar-logo img {
+    width: 28px;
+    height: 28px;
+    border-radius: 9px;
+  }
+
+  .settings-sidebar-nav {
+    flex: 0 0 auto;
+    flex-direction: row;
+    gap: 6px;
+    padding: 8px 12px 10px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+  }
+
+  .settings-nav-item {
+    width: auto;
+    flex: 0 0 auto;
+    gap: 7px;
+    margin: 0;
+    padding: 9px 11px;
+    white-space: nowrap;
+  }
+
+  .settings-nav-item:hover {
+    transform: none;
+  }
+
+  .settings-nav-item.active::before {
+    top: auto;
+    right: 10px;
+    bottom: 0;
+    left: 10px;
+    width: auto;
+    height: 3px;
+    transform: none;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .settings-nav-item-icon {
+    width: 20px;
+  }
+
+  .settings-nav-item-label {
+    flex: 0 0 auto;
+    overflow: visible;
+  }
+
+  .settings-sidebar-nav .sidebar-community-links,
+  .settings-sidebar-footer {
+    display: none;
+  }
+
+  .settings-content,
+  .settings-modal-container .settings-content {
+    width: auto;
+    min-width: 0;
+    flex: 1 1 auto;
+    padding: 18px;
+    overflow-x: hidden;
+  }
+
+  .settings-tab-group {
+    justify-content: flex-start;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+  }
+
+  .settings-tab-item {
+    flex: 0 0 auto;
+    min-width: max-content;
+    padding-inline: 14px;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 640px) {
+  .settings-content,
+  .settings-modal-container .settings-content {
+    padding: 14px 12px;
+  }
+
+  .settings-card {
+    padding: 16px;
+  }
+
+  .settings-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .settings-row-control {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .settings-row-control > .gh-switch {
+    margin-left: auto;
+  }
+
+  .settings-row-control .settings-input,
+  .settings-row-control select,
+  .settings-row-control textarea {
+    max-width: 100%;
+  }
+
+  .settings-page-title {
+    font-size: 21px;
+  }
+
+  .settings-page-desc {
+    margin-bottom: 18px;
+  }
+}
diff --git a/src/tabs/options.tsx b/src/tabs/options.tsx
index 5faaeae0c..50fa8f3f6 100644
--- a/src/tabs/options.tsx
+++ b/src/tabs/options.tsx
@@ -4,16 +4,7 @@
  */
 import React, { useEffect, useRef, useState } from "react"
 
-import {
-  AboutIcon,
-  AppearanceIcon,
-  BackupIcon,
-  FeaturesIcon,
-  GeneralIcon,
-  PageContentIcon,
-  PermissionsIcon,
-} from "~components/icons"
-import { resolveSettingsNavigateDetail } from "~constants"
+import { getSettingsNavigationItems, NAV_IDS, resolveSettingsNavigateDetail } from "~constants"
 import { platform } from "~platform"
 import { useSettingsHydrated, useSettingsStore } from "~stores/settings-store"
 import { APP_DISPLAY_NAME, APP_ICON_URL } from "~utils/config"
@@ -26,9 +17,11 @@ import AboutPage from "./options/pages/AboutPage"
 import AppearancePage from "./options/pages/AppearancePage"
 import BackupPage from "./options/pages/BackupPage"
 import FeaturesPage from "./options/pages/FeaturesPage"
+import GlobalSearchPage from "./options/pages/GlobalSearchPage"
 // 页面组件
 import GeneralPage from "./options/pages/GeneralPage"
 import PermissionsPage from "./options/pages/PermissionsPage"
+import ShortcutsPage from "./options/pages/ShortcutsPage"
 import SiteSettingsPage from "./options/pages/SiteSettingsPage"
 // 样式
 import "./options.css"
@@ -36,42 +29,8 @@ import "~styles/overlays.css"
 
 import { SidebarFooter } from "./options/components/SidebarFooter"
 
-// 图标组件
-
-// 导航菜单定义
-const NAV_ITEMS = [
-  // 导航项定义
-  {
-    id: "general",
-    Icon: GeneralIcon,
-    labelKey: "navGeneral",
-    label: "基本设置",
-  },
-  { id: "features", Icon: FeaturesIcon, labelKey: "navFeatures", label: "功能模块" },
-  {
-    id: "siteSettings",
-    Icon: PageContentIcon,
-    labelKey: "navSiteSettings",
-    label: "站点设置",
-  },
-  {
-    id: "appearance",
-    Icon: AppearanceIcon,
-    labelKey: "navAppearance",
-    label: "外观主题",
-  },
-  { id: "backup", Icon: BackupIcon, labelKey: "navBackup", label: "备份与同步" },
-  {
-    id: "permissions",
-    Icon: PermissionsIcon,
-    labelKey: "navPermissions",
-    label: "权限管理",
-  },
-  { id: "about", Icon: AboutIcon, labelKey: "navAbout", label: "关于" },
-]
-
 const OptionsPage = () => {
-  const [activePage, setActivePage] = useState("general")
+  const [activePage, setActivePage] = useState<string>(NAV_IDS.GENERAL)
   const [initialSubTab, setInitialSubTab] = useState<string | undefined>(undefined)
   const [locateRequest, setLocateRequest] = useState<{ settingId: string; token: number } | null>(
     null,
@@ -90,7 +49,12 @@ const OptionsPage = () => {
         settingId: params.get("settingId") || undefined,
       })
 
-      if (resolved.page && NAV_ITEMS.some((item) => item.id === resolved.page)) {
+      if (
+        resolved.page &&
+        getSettingsNavigationItems(platform.hasCapability("permissions")).some(
+          (item) => item.id === resolved.page,
+        )
+      ) {
         setActivePage(resolved.page)
       }
 
@@ -232,6 +196,10 @@ const OptionsPage = () => {
         return <SiteSettingsPage siteId={siteId} initialTab={initialSubTab} />
       case "features":
         return <FeaturesPage siteId={siteId} initialTab={initialSubTab} />
+      case "globalSearch":
+        return <GlobalSearchPage siteId={siteId} />
+      case "shortcuts":
+        return <ShortcutsPage siteId={siteId} />
       case "permissions":
         return <PermissionsPage siteId={siteId} />
       case "backup":
@@ -249,17 +217,7 @@ const OptionsPage = () => {
     }
   }
 
-  // 检测是否在独立 Options 页面（非 content script 环境）
-  // 如果是独立页面，不显示外观主题菜单（因为主题是按站点配置的）
-  const isStandalonePage = !window.__ophelThemeManager
-
-  // 在独立页面中过滤掉 appearance 导航项
-  // 在油猴脚本环境中过滤掉 permissions 导航项（因为没有权限 API）
-  const filteredNavItems = NAV_ITEMS.filter((item) => {
-    if (isStandalonePage && item.id === "appearance") return false
-    if (!platform.hasCapability("permissions") && item.id === "permissions") return false
-    return true
-  })
+  const filteredNavItems = getSettingsNavigationItems(platform.hasCapability("permissions"))
 
   return (
     <div className={`settings-layout ${platformFontClassName}`}>
diff --git a/src/tabs/options/pages/GeneralPage.tsx b/src/tabs/options/pages/GeneralPage.tsx
index 2c9f6eff7..b42889462 100644
--- a/src/tabs/options/pages/GeneralPage.tsx
+++ b/src/tabs/options/pages/GeneralPage.tsx
@@ -90,7 +90,9 @@ const SortableItem: React.FC<{
     {iconNode && <span className="settings-sortable-item-icon">{iconNode}</span>}
     <span className="settings-sortable-item-label">{label}</span>
     <div className="settings-sortable-item-actions">
-      {showToggle && <Switch checked={enabled} onChange={() => onToggle?.()} size="sm" />}
+      {showToggle && (
+        <Switch checked={enabled} onChange={() => onToggle?.()} size="sm" ariaLabel={label} />
+      )}
     </div>
   </div>
 )
@@ -576,6 +578,7 @@ const GeneralPage: React.FC<GeneralPageProps> = ({
                     </div>
                     <Switch
                       checked={isHoverResizeEnabled}
+                      ariaLabel={t("panelResizeOnHoverLabel")}
                       onChange={() =>
                         updateNestedSetting("panel", "resizeOnHover", !isHoverResizeEnabled)
                       }

From a4e71c975a7aa31c1dd72c58e44e4e883eb429fd Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 16:47:02 +0800
Subject: [PATCH 06/17] fix(core): tighten lifecycle and polling cleanup

---
 src/adapters/base.ts                      |   5 +
 src/components/App.tsx                    |   1 +
 src/components/QueueOverlay.tsx           | 113 ++++++++++++++++------
 src/components/SelectedPromptBar.test.tsx |  50 ++++++++++
 src/components/SelectedPromptBar.tsx      |  70 ++++++++++----
 src/core/assistant-mermaid-renderer.ts    |  29 ++++--
 src/core/copy-manager.ts                  |  19 ++--
 src/core/layout-manager.ts                |  18 ++--
 src/core/modules-init.ts                  |   9 +-
 src/core/outline-manager.test.ts          |  35 +++++++
 src/core/outline-manager.ts               |  54 ++++++++++-
 src/core/polling-task-registry.test.ts    |   4 +-
 src/core/polling-task-registry.ts         |   4 +-
 src/core/usage-counter-manager.ts         |  28 +++---
 src/core/user-query-markdown.ts           |  30 +++---
 src/platform/userscript/entry.tsx         |  46 +++++----
 src/stores/persist-write-gate.test.ts     |  28 ++++++
 src/stores/persist-write-gate.ts          |  16 +++
 src/stores/settings-store.ts              |  54 +++--------
 19 files changed, 443 insertions(+), 170 deletions(-)
 create mode 100644 src/components/SelectedPromptBar.test.tsx
 create mode 100644 src/core/outline-manager.test.ts
 create mode 100644 src/stores/persist-write-gate.test.ts
 create mode 100644 src/stores/persist-write-gate.ts

diff --git a/src/adapters/base.ts b/src/adapters/base.ts
index c5979269f..b6501a0af 100644
--- a/src/adapters/base.ts
+++ b/src/adapters/base.ts
@@ -375,6 +375,11 @@ export abstract class SiteAdapter {
   /** 检测当前页面是否匹配该站点 */
   abstract match(): boolean
 
+  /** 仅当站点会绕过 history/hash/popstate 修改 URL 时启用轮询兜底 */
+  usesUrlPollingFallback(): boolean {
+    return false
+  }
+
   /** 返回站点标识符（用于配置存储） */
   abstract getSiteId(): string
 
diff --git a/src/components/App.tsx b/src/components/App.tsx
index ef66d8bed..9797264ae 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2421,6 +2421,7 @@ export const App: React.FC<AppProps> = ({ adapter }) => {
       return () => {
         window.removeEventListener("gh-url-change", onUrlChange)
         window.removeEventListener("ophel:refreshOutline", onRefreshOutline)
+        outlineManager.destroy()
         conversationManager?.destroy()
       }
     }
diff --git a/src/components/QueueOverlay.tsx b/src/components/QueueOverlay.tsx
index fd85075ef..2af5e82b2 100644
--- a/src/components/QueueOverlay.tsx
+++ b/src/components/QueueOverlay.tsx
@@ -198,57 +198,116 @@ export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher
 
   // ResizeObserver 精准监听输入框位置/大小变化
   useEffect(() => {
-    updatePosition()
-
     let observer: ResizeObserver | null = null
-    let targetEl: HTMLElement | null = null
+    let retryTimer: number | null = null
+    let scheduledFrame: number | null = null
+
+    const schedulePositionUpdate = () => {
+      if (scheduledFrame !== null) return
+      scheduledFrame = window.requestAnimationFrame(() => {
+        scheduledFrame = null
+        updatePosition()
+      })
+    }
 
-    const initObserver = () => {
-      targetEl = adapter.getTextareaElement()
+    const initObserver = (): boolean => {
+      const targetEl = adapter.getTextareaElement()
 
       if (targetEl) {
         const inputContainer = findInputContainer(targetEl)
-        observer = new ResizeObserver(() => {
-          updatePosition()
-        })
+        observer?.disconnect()
+        observer = new ResizeObserver(schedulePositionUpdate)
         observer.observe(targetEl)
         observer.observe(inputContainer)
         if (targetEl.parentElement) {
           observer.observe(targetEl.parentElement) // 监听父级尺寸变化
         }
+        schedulePositionUpdate()
+        return true
       }
+
+      return false
+    }
+
+    const scheduleObserverRetry = () => {
+      if (retryTimer !== null || document.hidden || observer) return
+      retryTimer = window.setTimeout(() => {
+        retryTimer = null
+        if (!initObserver()) scheduleObserverRetry()
+      }, 2000)
     }
 
-    // 初次尝试初始化
-    initObserver()
+    const resetObserver = () => {
+      observer?.disconnect()
+      observer = null
+      if (retryTimer !== null) {
+        window.clearTimeout(retryTimer)
+        retryTimer = null
+      }
+      if (!initObserver()) scheduleObserverRetry()
+    }
 
-    // 兜底轮询（防止页面动态加载输入框）
-    const intervalId = setInterval(() => {
-      updatePosition()
-      if (!observer && !targetEl) {
-        initObserver()
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        if (retryTimer !== null) {
+          window.clearTimeout(retryTimer)
+          retryTimer = null
+        }
+        return
       }
-    }, 2000)
+      if (!observer && !initObserver()) scheduleObserverRetry()
+      schedulePositionUpdate()
+    }
 
-    window.addEventListener("resize", updatePosition)
+    if (!initObserver()) scheduleObserverRetry()
+    window.addEventListener("resize", schedulePositionUpdate)
+    window.addEventListener("scroll", schedulePositionUpdate, true)
+    window.addEventListener("gh-url-change", resetObserver)
+    document.addEventListener("visibilitychange", handleVisibilityChange)
 
     return () => {
-      clearInterval(intervalId)
-      window.removeEventListener("resize", updatePosition)
-      if (observer) {
-        observer.disconnect()
-      }
+      if (retryTimer !== null) window.clearTimeout(retryTimer)
+      if (scheduledFrame !== null) window.cancelAnimationFrame(scheduledFrame)
+      window.removeEventListener("resize", schedulePositionUpdate)
+      window.removeEventListener("scroll", schedulePositionUpdate, true)
+      window.removeEventListener("gh-url-change", resetObserver)
+      document.removeEventListener("visibilitychange", handleVisibilityChange)
+      observer?.disconnect()
     }
   }, [updatePosition, adapter, findInputContainer])
 
   // ==================== 生成状态监控 ====================
 
   useEffect(() => {
-    const intervalId = setInterval(() => {
-      setIsGenerating(adapter.isGenerating())
-    }, 1000)
-    return () => clearInterval(intervalId)
-  }, [adapter])
+    if (!isExpanded) {
+      setIsGenerating(false)
+      return
+    }
+
+    let intervalId: number | null = null
+    const updateGeneratingState = () => setIsGenerating(adapter.isGenerating())
+    const stopPolling = () => {
+      if (intervalId === null) return
+      window.clearInterval(intervalId)
+      intervalId = null
+    }
+    const startPolling = () => {
+      if (document.hidden || intervalId !== null) return
+      updateGeneratingState()
+      intervalId = window.setInterval(updateGeneratingState, 1000)
+    }
+    const handleVisibilityChange = () => {
+      if (document.hidden) stopPolling()
+      else startPolling()
+    }
+
+    startPolling()
+    document.addEventListener("visibilitychange", handleVisibilityChange)
+    return () => {
+      stopPolling()
+      document.removeEventListener("visibilitychange", handleVisibilityChange)
+    }
+  }, [adapter, isExpanded])
 
   // ==================== 自定义快捷键 ====================
 
diff --git a/src/components/SelectedPromptBar.test.tsx b/src/components/SelectedPromptBar.test.tsx
new file mode 100644
index 000000000..fadc17612
--- /dev/null
+++ b/src/components/SelectedPromptBar.test.tsx
@@ -0,0 +1,50 @@
+import { act, render } from "@testing-library/react"
+import React from "react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+import type { SiteAdapter } from "~adapters/base"
+
+import { SelectedPromptBar } from "./SelectedPromptBar"
+
+class ResizeObserverStub {
+  observe() {}
+  disconnect() {}
+}
+
+describe("SelectedPromptBar positioning", () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.stubGlobal("ResizeObserver", ResizeObserverStub)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+    document.body.replaceChildren()
+  })
+
+  it("stops animation-frame tracking after the bounded transition window", () => {
+    const textarea = document.createElement("textarea")
+    document.body.appendChild(textarea)
+    let animationFrameCount = 0
+    vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+      animationFrameCount += 1
+      return window.setTimeout(() => callback(performance.now()), 16)
+    })
+    vi.stubGlobal("cancelAnimationFrame", (id: number) => window.clearTimeout(id))
+    const adapter = { getTextareaElement: () => textarea } as unknown as SiteAdapter
+
+    render(<SelectedPromptBar title="Prompt" onClear={() => {}} adapter={adapter} />)
+
+    act(() => {
+      vi.advanceTimersByTime(1500)
+    })
+    const countAfterTrackingWindow = animationFrameCount
+    act(() => {
+      vi.advanceTimersByTime(1500)
+    })
+
+    expect(countAfterTrackingWindow).toBeGreaterThan(1)
+    expect(animationFrameCount).toBe(countAfterTrackingWindow)
+  })
+})
diff --git a/src/components/SelectedPromptBar.tsx b/src/components/SelectedPromptBar.tsx
index 5009db5c6..25c3dbb2c 100644
--- a/src/components/SelectedPromptBar.tsx
+++ b/src/components/SelectedPromptBar.tsx
@@ -56,6 +56,7 @@ export const SelectedPromptBar: React.FC<SelectedPromptBarProps> = ({
 
     // 如果没有输入框引用或输入框不在 DOM 中，使用默认位置
     if (!textarea || !textarea.isConnected) {
+      const hadLayoutSnapshot = lastLayoutSnapshotRef.current !== null
       setBottomPosition((current) =>
         current === DEFAULT_BOTTOM_POSITION ? current : DEFAULT_BOTTOM_POSITION,
       )
@@ -63,7 +64,7 @@ export const SelectedPromptBar: React.FC<SelectedPromptBarProps> = ({
         current === DEFAULT_LEFT_POSITION ? current : DEFAULT_LEFT_POSITION,
       )
       lastLayoutSnapshotRef.current = null
-      return
+      return hadLayoutSnapshot
     }
 
     const observedElement = observedElementRef.current
@@ -99,7 +100,7 @@ export const SelectedPromptBar: React.FC<SelectedPromptBarProps> = ({
       lastLayoutSnapshot.height === layoutSnapshot.height &&
       lastLayoutSnapshot.viewportHeight === layoutSnapshot.viewportHeight
     ) {
-      return
+      return false
     }
     lastLayoutSnapshotRef.current = layoutSnapshot
 
@@ -116,6 +117,7 @@ export const SelectedPromptBar: React.FC<SelectedPromptBarProps> = ({
     // 横向跟随输入容器中心，避免在有侧边栏时按整个页面居中。
     const nextLeftPosition = `${Math.round(layoutSnapshot.left + layoutSnapshot.width / 2)}px`
     setLeftPosition((current) => (current === nextLeftPosition ? current : nextLeftPosition))
+    return true
   }, [adapter, findInputContainer])
 
   useEffect(() => {
@@ -124,9 +126,35 @@ export const SelectedPromptBar: React.FC<SelectedPromptBarProps> = ({
     const textarea = adapter?.getTextareaElement()
 
     // 创建 ResizeObserver 监听输入框容器尺寸变化
-    resizeObserverRef.current = new ResizeObserver(() => {
-      updatePosition()
-    })
+    let scheduledFrameId: number | null = null
+    let trackingFrameId: number | null = null
+    let trackingDeadline = 0
+
+    const scheduleUpdate = () => {
+      if (scheduledFrameId !== null) return
+      scheduledFrameId = window.requestAnimationFrame(() => {
+        scheduledFrameId = null
+        updatePosition()
+      })
+    }
+
+    const startBoundedTracking = (durationMs = 700) => {
+      trackingDeadline = Math.max(trackingDeadline, performance.now() + durationMs)
+      if (trackingFrameId !== null) return
+
+      const trackPosition = (timestamp: number) => {
+        updatePosition()
+        if (timestamp < trackingDeadline) {
+          trackingFrameId = window.requestAnimationFrame(trackPosition)
+        } else {
+          trackingFrameId = null
+        }
+      }
+
+      trackingFrameId = window.requestAnimationFrame(trackPosition)
+    }
+
+    resizeObserverRef.current = new ResizeObserver(scheduleUpdate)
 
     // 如果能找到输入框，开始监听其容器
     if (textarea) {
@@ -140,25 +168,27 @@ export const SelectedPromptBar: React.FC<SelectedPromptBarProps> = ({
 
     // 选中时多次延迟更新（处理输入框容器还未渲染完成的情况）
     const delays = [50, 200, 400]
-    const timeoutIds = delays.map((delay) => setTimeout(updatePosition, delay))
-
-    // 跟随 CSS transition / transform 引起的位置变化，例如站点侧边栏展开收起。
-    let animationFrameId: number | null = null
-    const trackPosition = () => {
-      updatePosition()
-      animationFrameId = window.requestAnimationFrame(trackPosition)
-    }
-    animationFrameId = window.requestAnimationFrame(trackPosition)
+    const timeoutIds = delays.map((delay) => setTimeout(scheduleUpdate, delay))
+    startBoundedTracking()
 
-    // 监听窗口大小变化
-    window.addEventListener("resize", updatePosition)
+    const handleTransitionStart = () => startBoundedTracking()
+    window.addEventListener("resize", scheduleUpdate)
+    window.addEventListener("scroll", scheduleUpdate, true)
+    document.addEventListener("transitionrun", handleTransitionStart, true)
+    document.addEventListener("animationstart", handleTransitionStart, true)
+    window.visualViewport?.addEventListener("resize", scheduleUpdate)
+    window.visualViewport?.addEventListener("scroll", scheduleUpdate)
 
     return () => {
-      window.removeEventListener("resize", updatePosition)
+      window.removeEventListener("resize", scheduleUpdate)
+      window.removeEventListener("scroll", scheduleUpdate, true)
+      document.removeEventListener("transitionrun", handleTransitionStart, true)
+      document.removeEventListener("animationstart", handleTransitionStart, true)
+      window.visualViewport?.removeEventListener("resize", scheduleUpdate)
+      window.visualViewport?.removeEventListener("scroll", scheduleUpdate)
       timeoutIds.forEach((id) => clearTimeout(id))
-      if (animationFrameId !== null) {
-        window.cancelAnimationFrame(animationFrameId)
-      }
+      if (scheduledFrameId !== null) window.cancelAnimationFrame(scheduledFrameId)
+      if (trackingFrameId !== null) window.cancelAnimationFrame(trackingFrameId)
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect()
         resizeObserverRef.current = null
diff --git a/src/core/assistant-mermaid-renderer.ts b/src/core/assistant-mermaid-renderer.ts
index c09f3e6cb..408af78bb 100644
--- a/src/core/assistant-mermaid-renderer.ts
+++ b/src/core/assistant-mermaid-renderer.ts
@@ -1,4 +1,5 @@
 import { normalizeAssistantMermaidSource, type SiteAdapter } from "~adapters/base"
+import { PollingTaskRegistry } from "~core/polling-task-registry"
 import { DOMToolkit } from "~utils/dom-toolkit"
 import { t } from "~utils/i18n"
 import { showToast } from "~utils/toast"
@@ -321,7 +322,9 @@ export class AssistantMermaidRenderer {
   private adapter: SiteAdapter
   private enabled: boolean
   private stopWatch: (() => void) | null = null
-  private rescanTimer: number | null = null
+  private readonly pollingTasks = new PollingTaskRegistry()
+  private readonly rescanTaskName = "assistant-mermaid-rescan"
+  private initialRescanTimer: number | null = null
   private clickHandler: ((e: MouseEvent) => void) | null = null
   private messageHandler: ((event: MessageEvent) => void) | null = null
   private fullscreenChangeHandler: (() => void) | null = null
@@ -360,9 +363,10 @@ export class AssistantMermaidRenderer {
       this.stopWatch = null
     }
 
-    if (this.rescanTimer) {
-      window.clearInterval(this.rescanTimer)
-      this.rescanTimer = null
+    this.pollingTasks.stop(this.rescanTaskName)
+    if (this.initialRescanTimer !== null) {
+      window.clearTimeout(this.initialRescanTimer)
+      this.initialRescanTimer = null
     }
 
     if (this.clickHandler) {
@@ -622,18 +626,23 @@ export class AssistantMermaidRenderer {
   }
 
   private startRescanTimer() {
-    if (this.rescanTimer) return
+    if (this.pollingTasks.isRunning(this.rescanTaskName)) return
 
-    window.setTimeout(() => {
+    this.initialRescanTimer = window.setTimeout(() => {
+      this.initialRescanTimer = null
       if (this.enabled) {
         this.rescan()
       }
     }, INITIAL_DELAY)
 
-    this.rescanTimer = window.setInterval(() => {
-      if (!this.enabled) return
-      this.rescan()
-    }, RESCAN_INTERVAL)
+    this.pollingTasks.start({
+      name: this.rescanTaskName,
+      intervalMs: RESCAN_INTERVAL,
+      runWhenHidden: false,
+      run: () => {
+        if (this.enabled) this.rescan()
+      },
+    })
   }
 
   private rescan() {
diff --git a/src/core/copy-manager.ts b/src/core/copy-manager.ts
index 35a0fa3c4..9c43f545f 100644
--- a/src/core/copy-manager.ts
+++ b/src/core/copy-manager.ts
@@ -1,4 +1,5 @@
 import type { FormulaCopySource, SiteAdapter } from "~adapters/base"
+import { PollingTaskRegistry } from "~core/polling-task-registry"
 import { renderKatexToString } from "~platform/katex"
 import { DOMToolkit } from "~utils/dom-toolkit"
 import { t } from "~utils/i18n"
@@ -34,7 +35,8 @@ export class CopyManager {
   private tableCopyInitialized = false
   private formulaDblClickHandler: ((e: MouseEvent) => void) | null = null
   private stopTableWatch: (() => void) | null = null
-  private rescanTimer: ReturnType<typeof setInterval> | null = null
+  private readonly pollingTasks = new PollingTaskRegistry()
+  private readonly tableRescanTaskName = "copy-manager-table-rescan"
 
   private static readonly FORMULA_HOST_SELECTOR = [
     ".math-block",
@@ -436,10 +438,12 @@ export class CopyManager {
     // 先做一次初始扫描
     this.rescanTables()
 
-    // 启动定时器
-    this.rescanTimer = setInterval(() => {
-      this.rescanTables()
-    }, TABLE_RESCAN_INTERVAL)
+    this.pollingTasks.start({
+      name: this.tableRescanTaskName,
+      intervalMs: TABLE_RESCAN_INTERVAL,
+      runWhenHidden: false,
+      run: () => this.rescanTables(),
+    })
   }
 
   /**
@@ -655,10 +659,7 @@ export class CopyManager {
     }
 
     // 停止定时扫描
-    if (this.rescanTimer) {
-      clearInterval(this.rescanTimer)
-      this.rescanTimer = null
-    }
+    this.pollingTasks.stop(this.tableRescanTaskName)
 
     const style = document.getElementById("gh-table-copy-style")
     if (style)
diff --git a/src/core/layout-manager.ts b/src/core/layout-manager.ts
index 93c01c57b..53e9b9a60 100644
--- a/src/core/layout-manager.ts
+++ b/src/core/layout-manager.ts
@@ -5,6 +5,7 @@ import type {
   SiteAdapter,
   WidthSelectorConfig,
 } from "~adapters/base"
+import { PollingTaskRegistry } from "~core/polling-task-registry"
 import { useSettingsStore } from "~stores/settings-store"
 import { DOMToolkit } from "~utils/dom-toolkit"
 import { createSafeHTML } from "~utils/trusted-types"
@@ -90,7 +91,8 @@ export class LayoutManager {
   private cleanModeEnabled = false
 
   private processedShadowRoots = new WeakSet<ShadowRoot>()
-  private shadowCheckInterval: ReturnType<typeof setTimeout> | null = null
+  private readonly pollingTasks = new PollingTaskRegistry()
+  private readonly shadowCheckTaskName = "layout-shadow-injection"
   private panelAvoidanceStarted = false
   private panelAvoidanceRaf: number | null = null
   private panelAvoidanceHostObserver: MutationObserver | null = null
@@ -1204,16 +1206,16 @@ export class LayoutManager {
     this.injectToAllShadows()
 
     // 定期检查新增的 Shadow DOM
-    if (!this.shadowCheckInterval) {
-      this.shadowCheckInterval = setInterval(() => this.injectToAllShadows(), 1000)
-    }
+    this.pollingTasks.start({
+      name: this.shadowCheckTaskName,
+      intervalMs: 1000,
+      runWhenHidden: false,
+      run: () => this.injectToAllShadows(),
+    })
   }
 
   private stopShadowInjection() {
-    if (this.shadowCheckInterval) {
-      clearInterval(this.shadowCheckInterval)
-      this.shadowCheckInterval = null
-    }
+    this.pollingTasks.stop(this.shadowCheckTaskName)
   }
 
   private injectToAllShadows() {
diff --git a/src/core/modules-init.ts b/src/core/modules-init.ts
index 7e96cad37..0594ec88d 100644
--- a/src/core/modules-init.ts
+++ b/src/core/modules-init.ts
@@ -764,13 +764,16 @@ export function initUrlChangeObserver(ctx: ModulesContext): () => void {
   history.pushState = patchedPushState
   history.replaceState = patchedReplaceState
 
-  // 兜底定时器
-  const fallbackIntervalId = window.setInterval(handleUrlChange, 1000)
+  const fallbackIntervalId = adapter.usesUrlPollingFallback()
+    ? window.setInterval(handleUrlChange, 1000)
+    : null
 
   return () => {
     window.removeEventListener("popstate", handleUrlChange)
     window.removeEventListener("hashchange", handleUrlChange)
-    window.clearInterval(fallbackIntervalId)
+    if (fallbackIntervalId !== null) {
+      window.clearInterval(fallbackIntervalId)
+    }
 
     if (readingHistoryRestoreTimeoutId) {
       clearTimeout(readingHistoryRestoreTimeoutId)
diff --git a/src/core/outline-manager.test.ts b/src/core/outline-manager.test.ts
new file mode 100644
index 000000000..aabce4987
--- /dev/null
+++ b/src/core/outline-manager.test.ts
@@ -0,0 +1,35 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import type { SiteAdapter } from "~adapters/base"
+import { useBookmarkStore } from "~stores/bookmarks-store"
+import { DEFAULT_SETTINGS } from "~utils/storage"
+
+import { OutlineManager } from "./outline-manager"
+
+describe("OutlineManager lifecycle", () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("removes the exact window listener and store subscription once", () => {
+    const unsubscribe = vi.fn()
+    vi.spyOn(useBookmarkStore, "subscribe").mockReturnValue(unsubscribe)
+    const addListener = vi.spyOn(window, "addEventListener")
+    const removeListener = vi.spyOn(window, "removeEventListener")
+    const adapter = {
+      getOutlineSources: () => [
+        { id: "conversation", kind: "conversation", label: "Conversation", available: true },
+      ],
+    } as unknown as SiteAdapter
+
+    const manager = new OutlineManager(adapter, DEFAULT_SETTINGS.features.outline)
+    const messageListener = addListener.mock.calls.find(([event]) => event === "message")?.[1]
+
+    manager.destroy()
+    manager.destroy()
+
+    expect(messageListener).toBeTypeOf("function")
+    expect(removeListener).toHaveBeenCalledWith("message", messageListener)
+    expect(unsubscribe).toHaveBeenCalledOnce()
+  })
+})
diff --git a/src/core/outline-manager.ts b/src/core/outline-manager.ts
index fa587a587..bba7796f7 100644
--- a/src/core/outline-manager.ts
+++ b/src/core/outline-manager.ts
@@ -85,6 +85,9 @@ export class OutlineManager {
   private treeKey: string = ""
   private listeners: (() => void)[] = []
   private isAutoUpdating = false
+  private destroyed = false
+  private bookmarkUnsubscribe: (() => void) | null = null
+  private readonly handleWindowMessage = (event: MessageEvent) => this.handleMessage(event)
 
   // UI State
   private expandLevel: number = 6
@@ -111,6 +114,7 @@ export class OutlineManager {
   // 兜底方案：基于内容变化检测
   private lastTreeChangeTime: number = 0
   private fallbackRefreshTimer: ReturnType<typeof setTimeout> | null = null
+  private postGenerationRefreshTimer: ReturnType<typeof setTimeout> | null = null
   private static readonly FALLBACK_DELAY = 3000 // 3秒无变化后触发强制刷新
 
   // 使用方激活状态（只有至少一个入口需要实时大纲时才监听）
@@ -122,6 +126,7 @@ export class OutlineManager {
 
   // Global refresh debounce (防止多处同时触发时的重复执行)
   private refreshDebounceTimer: ReturnType<typeof setTimeout> | null = null
+  private routeRefreshTimers = new Set<ReturnType<typeof setTimeout>>()
   private readonly REFRESH_DEBOUNCE_MS = 300
 
   // 设置变更回调
@@ -144,10 +149,10 @@ export class OutlineManager {
     this.expandLevel = settings.expandLevel ?? 6
 
     // Listen to monitor messages
-    window.addEventListener("message", this.handleMessage.bind(this))
+    window.addEventListener("message", this.handleWindowMessage)
 
     // 订阅 bookmarks-store，当书签变化时刷新大纲
-    void useBookmarkStore.subscribe(() => {
+    this.bookmarkUnsubscribe = useBookmarkStore.subscribe(() => {
       // 只有在激活状态下才刷新，避免不必要的计算
       if (this.isActive) {
         this.refresh()
@@ -248,6 +253,7 @@ export class OutlineManager {
   private routeChangeVersion = 0
 
   private handleMessage(event: MessageEvent) {
+    if (this.destroyed) return
     if (event.source !== window) return
     // Imports needed: EVENT_MONITOR_START, EVENT_MONITOR_COMPLETE
     // I will add them to the top of the file
@@ -389,7 +395,9 @@ export class OutlineManager {
     if (this.wasGenerating && !isGenerating && !this.postGenerationScheduled) {
       this.postGenerationScheduled = true
       // 生成完成后延迟 500ms 再刷新，确保 DOM 稳定
-      setTimeout(() => {
+      this.postGenerationRefreshTimer = setTimeout(() => {
+        this.postGenerationRefreshTimer = null
+        if (this.destroyed) return
         this.postGenerationScheduled = false
         if (!this.isActive) {
           // Tab 已切走，标记为待刷新，切回时再执行
@@ -433,6 +441,7 @@ export class OutlineManager {
   }
 
   subscribe(listener: () => void) {
+    if (this.destroyed) return () => {}
     this.listeners.push(listener)
     return () => {
       this.listeners = this.listeners.filter((l) => l !== listener)
@@ -440,9 +449,42 @@ export class OutlineManager {
   }
 
   private notify() {
+    if (this.destroyed) return
     this.listeners.forEach((l) => l())
   }
 
+  destroy(): void {
+    if (this.destroyed) return
+    this.destroyed = true
+    this.routeChangeVersion += 1
+    this.activeConsumers.clear()
+    this.isActive = false
+
+    window.removeEventListener("message", this.handleWindowMessage)
+    this.bookmarkUnsubscribe?.()
+    this.bookmarkUnsubscribe = null
+
+    this.stopAutoUpdate()
+    this.stopPeriodicOutlineRefreshFallback()
+    this.stopSourceObserver()
+
+    if (this.fallbackRefreshTimer) {
+      clearTimeout(this.fallbackRefreshTimer)
+      this.fallbackRefreshTimer = null
+    }
+    if (this.postGenerationRefreshTimer) {
+      clearTimeout(this.postGenerationRefreshTimer)
+      this.postGenerationRefreshTimer = null
+    }
+    if (this.refreshDebounceTimer) {
+      clearTimeout(this.refreshDebounceTimer)
+      this.refreshDebounceTimer = null
+    }
+    this.routeRefreshTimers.forEach((timer) => clearTimeout(timer))
+    this.routeRefreshTimers.clear()
+    this.listeners = []
+  }
+
   private normalizeSources(sources: OutlineSource[]): OutlineSource[] {
     const normalized = sources.filter((source) => source.available)
     if (normalized.length > 0) return normalized
@@ -783,6 +825,7 @@ export class OutlineManager {
 
   // Adjusted refresh signature
   refresh(overrideLevel?: number, immediate = false) {
+    if (this.destroyed) return
     if (!this.settings.enabled || this.isRefreshing) return
 
     // immediate = true: 立即执行（用于 fallback 检测和路由切换）
@@ -855,7 +898,9 @@ export class OutlineManager {
     // 使用 immediate=true 避免被防抖合并，确保每个探测都能执行
     const delays = [80, 250, 600, 1200]
     delays.forEach((delay, index) => {
-      setTimeout(() => {
+      const timer = setTimeout(() => {
+        this.routeRefreshTimers.delete(timer)
+        if (this.destroyed) return
         if (routeVersion !== this.routeChangeVersion) return
 
         this.refresh(undefined, true)
@@ -864,6 +909,7 @@ export class OutlineManager {
           this.updateAutoUpdateState()
         }
       }, delay)
+      this.routeRefreshTimers.add(timer)
     })
   }
 
diff --git a/src/core/polling-task-registry.test.ts b/src/core/polling-task-registry.test.ts
index fffd747db..3e23048f6 100644
--- a/src/core/polling-task-registry.test.ts
+++ b/src/core/polling-task-registry.test.ts
@@ -25,12 +25,12 @@ describe("PollingTaskRegistry", () => {
     expect(run).toHaveBeenCalledTimes(2)
   })
 
-  it("skips hidden document ticks when requested", () => {
+  it("skips hidden document ticks by default", () => {
     const registry = new PollingTaskRegistry()
     const run = vi.fn()
     const hiddenSpy = vi.spyOn(document, "hidden", "get").mockReturnValue(true)
 
-    registry.start({ name: "visible-only", intervalMs: 100, runWhenHidden: false, run })
+    registry.start({ name: "visible-only", intervalMs: 100, run })
     vi.advanceTimersByTime(250)
 
     expect(run).not.toHaveBeenCalled()
diff --git a/src/core/polling-task-registry.ts b/src/core/polling-task-registry.ts
index 8edc2ad02..8cc4887a9 100644
--- a/src/core/polling-task-registry.ts
+++ b/src/core/polling-task-registry.ts
@@ -5,7 +5,7 @@ export interface PollingTaskOptions {
   intervalMs: number
   /** Called on each interval tick. Async work is intentionally fire-and-forget, matching setInterval semantics. */
   run: () => void | Promise<void>
-  /** When false, ticks are skipped while document.hidden is true. Defaults to true for behavior parity. */
+  /** When false, ticks are skipped while document.hidden is true. Defaults to false. */
   runWhenHidden?: boolean
 }
 
@@ -22,7 +22,7 @@ export class PollingTaskRegistry {
 
     const task: RegisteredPollingTask = {
       ...options,
-      runWhenHidden: options.runWhenHidden ?? true,
+      runWhenHidden: options.runWhenHidden ?? false,
       intervalId: setInterval(() => {
         if (!task.runWhenHidden && typeof document !== "undefined" && document.hidden) {
           return
diff --git a/src/core/usage-counter-manager.ts b/src/core/usage-counter-manager.ts
index f5f5b0089..7b8d580e9 100644
--- a/src/core/usage-counter-manager.ts
+++ b/src/core/usage-counter-manager.ts
@@ -1,4 +1,5 @@
 import type { SiteAdapter } from "~adapters/base"
+import { PollingTaskRegistry } from "~core/polling-task-registry"
 import { DOMToolkit } from "~utils/dom-toolkit"
 import { t } from "~utils/i18n"
 import type { UsageMonitorSettings } from "~utils/storage"
@@ -57,7 +58,8 @@ export class UsageCounterManager {
   private slot: HTMLDivElement | null = null
   private activeAnchor: HTMLElement | null = null
   private mounted = false
-  private mountTimer: number | null = null
+  private readonly pollingTasks = new PollingTaskRegistry()
+  private readonly mountTaskName = "usage-counter-mount"
   private renderTimer: number | null = null
   private renderInFlight = false
   private rerenderRequested = false
@@ -167,10 +169,7 @@ export class UsageCounterManager {
     window.removeEventListener("resize", this.handleViewportChange, true)
     window.removeEventListener("scroll", this.handleViewportChange, true)
 
-    if (this.mountTimer !== null) {
-      window.clearInterval(this.mountTimer)
-      this.mountTimer = null
-    }
+    this.pollingTasks.stop(this.mountTaskName)
 
     if (this.renderTimer !== null) {
       window.clearTimeout(this.renderTimer)
@@ -250,14 +249,17 @@ export class UsageCounterManager {
   }
 
   private startMountLoop() {
-    if (this.mountTimer !== null) return
-
-    this.mountTimer = window.setInterval(() => {
-      const mountedChanged = this.ensureMounted()
-      if (mountedChanged || this.root) {
-        this.scheduleRender(0)
-      }
-    }, 1000)
+    this.pollingTasks.start({
+      name: this.mountTaskName,
+      intervalMs: 1000,
+      runWhenHidden: false,
+      run: () => {
+        const mountedChanged = this.ensureMounted()
+        if (mountedChanged || this.root) {
+          this.scheduleRender(0)
+        }
+      },
+    })
   }
 
   private ensureMounted(force = false): boolean {
diff --git a/src/core/user-query-markdown.ts b/src/core/user-query-markdown.ts
index 96d221206..f08ff51c2 100644
--- a/src/core/user-query-markdown.ts
+++ b/src/core/user-query-markdown.ts
@@ -7,6 +7,7 @@
 
 import type { SiteAdapter } from "~adapters/base"
 import { SITE_IDS } from "~constants"
+import { PollingTaskRegistry } from "~core/polling-task-registry"
 import { DOMToolkit } from "~utils/dom-toolkit"
 import { initCopyButtons, showCopySuccess } from "~utils/icons"
 import { getHighlightStyles, getMathStyles, renderMarkdown } from "~utils/markdown"
@@ -474,7 +475,9 @@ export class UserQueryMarkdownRenderer {
   private enabled: boolean
   private processedElements = new WeakMap<Element, string>()
   private stopWatch: (() => void) | null = null
-  private rescanTimer: number | null = null
+  private readonly pollingTasks = new PollingTaskRegistry()
+  private readonly rescanTaskName = "user-query-markdown-rescan"
+  private initialRescanTimer: number | null = null
   private injectedShadowRoots = new WeakSet<ShadowRoot>()
   private codeCopyHandler: ((e: MouseEvent) => void) | null = null
 
@@ -614,18 +617,22 @@ export class UserQueryMarkdownRenderer {
    * 启动定时重扫描（用于 Shadow DOM 站点）
    */
   private startRescanTimer() {
-    if (this.rescanTimer) return
+    if (this.pollingTasks.isRunning(this.rescanTaskName)) return
 
     // 初始延迟后执行首次扫描
-    setTimeout(() => {
+    this.initialRescanTimer = window.setTimeout(() => {
+      this.initialRescanTimer = null
       if (this.enabled) this.rescan()
     }, INITIAL_DELAY)
 
-    // 定时重扫描
-    this.rescanTimer = window.setInterval(() => {
-      if (!this.enabled) return
-      this.rescan()
-    }, RESCAN_INTERVAL)
+    this.pollingTasks.start({
+      name: this.rescanTaskName,
+      intervalMs: RESCAN_INTERVAL,
+      runWhenHidden: false,
+      run: () => {
+        if (this.enabled) this.rescan()
+      },
+    })
   }
 
   /**
@@ -715,9 +722,10 @@ export class UserQueryMarkdownRenderer {
       this.stopWatch()
       this.stopWatch = null
     }
-    if (this.rescanTimer) {
-      clearInterval(this.rescanTimer)
-      this.rescanTimer = null
+    this.pollingTasks.stop(this.rescanTaskName)
+    if (this.initialRescanTimer !== null) {
+      window.clearTimeout(this.initialRescanTimer)
+      this.initialRescanTimer = null
     }
   }
 
diff --git a/src/platform/userscript/entry.tsx b/src/platform/userscript/entry.tsx
index 3bf10e7ca..1cf4a7be6 100644
--- a/src/platform/userscript/entry.tsx
+++ b/src/platform/userscript/entry.tsx
@@ -397,16 +397,17 @@ async function init() {
   // 初始化适配器
   adapter.afterPropertiesSet({})
 
-  let mountObserver: MutationObserver | null = null
-  let mountInterval: number | null = null
+  let mountParentObserver: MutationObserver | null = null
+  let documentRootObserver: MutationObserver | null = null
+  const mountRetryTimers: number[] = []
 
   const cleanupMountWatchers = () => {
-    mountObserver?.disconnect()
-    mountObserver = null
-    if (mountInterval !== null) {
-      window.clearInterval(mountInterval)
-      mountInterval = null
-    }
+    mountParentObserver?.disconnect()
+    mountParentObserver = null
+    documentRootObserver?.disconnect()
+    documentRootObserver = null
+    mountRetryTimers.forEach((timer) => window.clearTimeout(timer))
+    mountRetryTimers.length = 0
   }
 
   const mountUserscriptApp = async () => {
@@ -428,8 +429,18 @@ async function init() {
               resolve()
             }
           })
-          observer.observe(document.documentElement, { childList: true, subtree: true })
+          observer.observe(document.documentElement, { childList: true, subtree: false })
+        })
+      }
+
+      const observeMountParent = (parent: HTMLElement) => {
+        mountParentObserver?.disconnect()
+        mountParentObserver = new MutationObserver(() => {
+          if (!shadowHost.isConnected) {
+            doMount()
+          }
         })
+        mountParentObserver.observe(parent, { childList: true, subtree: false })
       }
 
       const doMount = () => {
@@ -438,24 +449,21 @@ async function init() {
         if (shadowHost.parentElement !== parent) {
           parent.appendChild(shadowHost)
         }
+        observeMountParent(parent)
       }
 
       await waitForMountParent()
       doMount()
-      ;[250, 600, 1200, 2000, 3500, 5000].forEach((delay) => setTimeout(doMount, delay))
-
-      mountObserver = new MutationObserver(() => {
-        if (!shadowHost.isConnected) {
-          doMount()
-        }
+      ;[250, 600, 1200, 2000, 3500, 5000].forEach((delay) => {
+        mountRetryTimers.push(window.setTimeout(doMount, delay))
       })
-      mountObserver.observe(document.documentElement, { childList: true, subtree: true })
 
-      mountInterval = window.setInterval(() => {
-        if (!shadowHost.isConnected) {
+      documentRootObserver = new MutationObserver(() => {
+        if (shadowHost.parentElement !== getMountParent()) {
           doMount()
         }
-      }, 2000)
+      })
+      documentRootObserver.observe(document.documentElement, { childList: true, subtree: false })
 
       if (window.location.hostname.includes("chatglm.cn")) {
         shadowHost.classList.add("gh-site-chatglm")
diff --git a/src/stores/persist-write-gate.test.ts b/src/stores/persist-write-gate.test.ts
new file mode 100644
index 000000000..8884e2eb4
--- /dev/null
+++ b/src/stores/persist-write-gate.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest"
+
+import { PersistWriteGate } from "./persist-write-gate"
+
+describe("PersistWriteGate", () => {
+  it("suppresses only writes triggered by the external update stack", () => {
+    const gate = new PersistWriteGate()
+    const states: boolean[] = []
+
+    gate.runWithoutPersist(() => {
+      states.push(gate.shouldSkipWrite())
+    })
+    states.push(gate.shouldSkipWrite())
+
+    expect(states).toEqual([true, false])
+  })
+
+  it("restores writes when an external update throws", () => {
+    const gate = new PersistWriteGate()
+
+    expect(() =>
+      gate.runWithoutPersist(() => {
+        throw new Error("failed update")
+      }),
+    ).toThrow("failed update")
+    expect(gate.shouldSkipWrite()).toBe(false)
+  })
+})
diff --git a/src/stores/persist-write-gate.ts b/src/stores/persist-write-gate.ts
new file mode 100644
index 000000000..012262d1c
--- /dev/null
+++ b/src/stores/persist-write-gate.ts
@@ -0,0 +1,16 @@
+export class PersistWriteGate {
+  private suppressedWrites = 0
+
+  runWithoutPersist<T>(callback: () => T): T {
+    this.suppressedWrites += 1
+    try {
+      return callback()
+    } finally {
+      this.suppressedWrites = Math.max(0, this.suppressedWrites - 1)
+    }
+  }
+
+  shouldSkipWrite(): boolean {
+    return this.suppressedWrites > 0
+  }
+}
diff --git a/src/stores/settings-store.ts b/src/stores/settings-store.ts
index 993617700..b6da5f8c5 100644
--- a/src/stores/settings-store.ts
+++ b/src/stores/settings-store.ts
@@ -12,32 +12,9 @@ import { DEFAULT_SETTINGS, type Settings } from "~utils/storage"
 import { normalizeSettings, type SettingsInput } from "~utils/settings-normalize"
 
 import { chromeStorageAdapter } from "./chrome-adapter"
+import { PersistWriteGate } from "./persist-write-gate"
 
-let isUpdatingFromStorage = false
-let skippedPersistWrites = 0
-
-const releaseSkippedPersistWrite = () => {
-  const release = () => {
-    skippedPersistWrites = Math.max(0, skippedPersistWrites - 1)
-  }
-
-  if (typeof queueMicrotask === "function") {
-    queueMicrotask(release)
-    return
-  }
-
-  void Promise.resolve().then(release)
-}
-
-const runWithoutPersist = <T>(callback: () => T): T => {
-  skippedPersistWrites += 1
-
-  try {
-    return callback()
-  } finally {
-    releaseSkippedPersistWrite()
-  }
-}
+const persistWriteGate = new PersistWriteGate()
 
 const sortedStringify = (obj: unknown): string => {
   if (typeof obj !== "object" || obj === null) return JSON.stringify(obj)
@@ -56,7 +33,7 @@ const sortedStringify = (obj: unknown): string => {
 const storageAdapter: StateStorage = {
   ...chromeStorageAdapter,
   setItem: async (name, value) => {
-    if (isUpdatingFromStorage || skippedPersistWrites > 0) {
+    if (persistWriteGate.shouldSkipWrite()) {
       return
     }
     return chromeStorageAdapter.setItem(name, value)
@@ -138,7 +115,7 @@ export const useSettingsStore = create<SettingsState>()(
          * 设置临时预览 settings（不持久化）
          */
         setPreviewSettings: (previewSettings) =>
-          runWithoutPersist(() =>
+          persistWriteGate.runWithoutPersist(() =>
             set((state) => ({
               previewSettings,
               settings: buildEffectiveSettings(state.persistedSettings, previewSettings),
@@ -149,7 +126,7 @@ export const useSettingsStore = create<SettingsState>()(
          * 清除临时预览 settings
          */
         clearPreviewSettings: () =>
-          runWithoutPersist(() =>
+          persistWriteGate.runWithoutPersist(() =>
             set((state) => ({
               previewSettings: null,
               settings: state.persistedSettings,
@@ -234,7 +211,8 @@ export const useSettingsStore = create<SettingsState>()(
         /**
          * 设置 hydration 状态
          */
-        setHasHydrated: (state) => runWithoutPersist(() => set({ _hasHydrated: state })),
+        setHasHydrated: (state) =>
+          persistWriteGate.runWithoutPersist(() => set({ _hasHydrated: state })),
       }
     ),
     {
@@ -266,7 +244,7 @@ export const useSettingsStore = create<SettingsState>()(
       // Hydration 完成回调
       onRehydrateStorage: () => {
         return (state, _error) => {
-          runWithoutPersist(() => {
+          persistWriteGate.runWithoutPersist(() => {
             if (state) {
               const normalizedSettings = normalizeSettings(state.settings)
               _hydrationSet?.({
@@ -362,10 +340,7 @@ if (isExtension) {
         if (
           sortedStringify(currentPersistedSettings) !== sortedStringify(normalizedIncomingSettings)
         ) {
-          // 标记为来自 Storage 的更新，防止回写导致死循环
-          isUpdatingFromStorage = true
-
-          try {
+          persistWriteGate.runWithoutPersist(() => {
             // 同时更新 settings 和递增 _syncVersion
             // _syncVersion 变化会强制触发所有订阅它的 React 组件重渲染
             useSettingsStore.setState({
@@ -376,12 +351,7 @@ if (isExtension) {
               ),
               _syncVersion: currentState._syncVersion + 1,
             })
-          } finally {
-            // 恢复标记 (setTimeout 确保在 persist 异步写入之后)
-            setTimeout(() => {
-              isUpdatingFromStorage = false
-            }, 100)
-          }
+          })
 
           // 同步更新 i18n 模块的语言设置
           if (
@@ -392,8 +362,8 @@ if (isExtension) {
               .then(({ setLanguage }) => {
                 void setLanguage(normalizedIncomingSettings.language)
               })
-              .catch(() => {
-                // ignore
+              .catch((error) => {
+                console.error("[SettingsStore] 更新跨上下文语言失败:", error)
               })
           }
 

From eb2503b6d5ad7c39bd12a1880488ec198381b598 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 17:32:20 +0800
Subject: [PATCH 07/17] refactor(platform): unify runtime type boundaries

---
 package.json                                  |   2 +-
 src/adapters/base.ts                          |   5 +-
 src/adapters/gemini-enterprise.ts             |   5 +-
 src/background.ts                             |  41 ++-
 src/components/OutlineTab.tsx                 |   2 +-
 src/components/QuickButtons.tsx               |   8 +-
 src/contents/aistudio-preload.ts              |  44 ++-
 src/contents/gemini-watermark-main.ts         |  15 +-
 src/contents/main.ts                          |  17 +-
 src/contents/scroll-lock-main.ts              | 321 +-----------------
 src/core/conversation/manager.ts              |   2 +-
 src/core/gemini-mystuff-bridge.ts             |   9 -
 src/core/network-monitor.ts                   | 141 +++++---
 src/core/reading-history.ts                   |  11 +-
 src/core/scroll-lock-runtime.ts               | 303 +++++++++++++++++
 src/core/webdav-sync.ts                       |  45 ++-
 src/hooks/useShortcuts.ts                     |   2 +-
 .../userscript/chrome-adapter-polyfill.ts     |  40 ---
 src/platform/userscript/index.ts              |  16 +-
 src/platform/userscript/scroll-lock-inject.ts | 312 +----------------
 .../options/components/SafeCodeEditor.tsx     |   3 +-
 src/tabs/options/pages/ClaudeSettings.tsx     |  14 +-
 src/tabs/options/pages/index.ts               |   9 -
 src/utils/dom-toolkit.ts                      |  17 +-
 src/utils/messaging.ts                        |   8 +-
 src/utils/scroll-helper.ts                    |  33 +-
 26 files changed, 615 insertions(+), 810 deletions(-)
 create mode 100644 src/core/scroll-lock-runtime.ts
 delete mode 100644 src/platform/userscript/chrome-adapter-polyfill.ts
 delete mode 100644 src/tabs/options/pages/index.ts

diff --git a/package.json b/package.json
index f85fe27d9..0a5ab6364 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "prepare:mermaid-assets": "node scripts/prepare-mermaid-assets.mjs",
     "dev": "pnpm prepare:mermaid-assets && plasmo dev",
     "lint": "eslint . --fix",
-    "lint:check": "eslint .",
+    "lint:check": "eslint . --max-warnings=0",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "typecheck": "tsc --noEmit",
diff --git a/src/adapters/base.ts b/src/adapters/base.ts
index b6501a0af..f05034a4a 100644
--- a/src/adapters/base.ts
+++ b/src/adapters/base.ts
@@ -1275,11 +1275,12 @@ export abstract class SiteAdapter {
    * 默认使用 scrollIntoView；子类可覆盖以避免外层容器被意外滚动（如 Shadow DOM 场景）。
    */
   scrollToOutlineTarget(element: HTMLElement): void {
-    element.scrollIntoView({
+    const options: ScrollIntoViewOptions & { __bypassLock: boolean } = {
       behavior: "instant",
       block: "start",
       __bypassLock: true,
-    } as any)
+    }
+    element.scrollIntoView(options)
   }
 
   getOutlineScrollContainer(_sourceId = "conversation"): HTMLElement | null {
diff --git a/src/adapters/gemini-enterprise.ts b/src/adapters/gemini-enterprise.ts
index 3b53e5ee7..439ec7285 100644
--- a/src/adapters/gemini-enterprise.ts
+++ b/src/adapters/gemini-enterprise.ts
@@ -1084,11 +1084,12 @@ export class GeminiEnterpriseAdapter extends SiteAdapter {
       const containerRect = container.getBoundingClientRect()
       const elementRect = element.getBoundingClientRect()
       const targetScrollTop = container.scrollTop + (elementRect.top - containerRect.top)
-      container.scrollTo({
+      const options: ScrollToOptions & { __bypassLock: boolean } = {
         top: targetScrollTop,
         behavior: "instant",
         __bypassLock: true,
-      } as any)
+      }
+      container.scrollTo(options)
     } else {
       super.scrollToOutlineTarget(element)
     }
diff --git a/src/background.ts b/src/background.ts
index 1ecbc04e9..47a93935f 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -21,7 +21,17 @@ import {
   MSG_WEBDAV_REQUEST,
   type ExtensionMessage,
 } from "~utils/messaging"
-import { localStorage, type Settings } from "~utils/storage"
+import {
+  localStorage,
+  type ClaudeSessionKey,
+  type ClaudeSessionKeysState,
+  type Settings,
+} from "~utils/storage"
+
+interface PersistedClaudeSessionKeys {
+  state: ClaudeSessionKeysState
+  version?: number
+}
 
 /**
  * Ophel - Background Service Worker
@@ -315,7 +325,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
     case MSG_WEBDAV_REQUEST:
       ;(async () => {
         try {
-          const { method, url, body, headers, auth } = message as any
+          const { method, url, body, headers, auth } = message
           const fetchHeaders: Record<string, string> = { ...headers }
 
           // 添加 Basic Auth
@@ -350,7 +360,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
     case MSG_CHECK_PERMISSION:
       ;(async () => {
         try {
-          const { origin } = message as any
+          const { origin } = message
           const hasPermission = await chrome.permissions.contains({
             origins: [origin],
           })
@@ -366,7 +376,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
     case MSG_CHECK_PERMISSIONS:
       ;(async () => {
         try {
-          const { origins, permissions } = message as any
+          const { origins, permissions } = message
           const hasPermission = await chrome.permissions.contains({
             origins,
             permissions,
@@ -383,7 +393,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
     case MSG_REVOKE_PERMISSIONS:
       ;(async () => {
         try {
-          const { origins, permissions } = message as any
+          const { origins, permissions } = message
           const removed = await chrome.permissions.remove({
             origins,
             permissions,
@@ -404,9 +414,9 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
         try {
           // 支持 permType 或从 origins/permissions 推断类型
           const VALID_PERM_TYPES = ["allUrls", "notifications", "cookies"] as const
-          let permType: string = (message as any).permType
+          let permType: string = message.permType || ""
           if (!permType) {
-            const { origins, permissions } = message as any
+            const { origins, permissions } = message
             if (origins?.includes("<all_urls>")) {
               permType = "allUrls"
             } else if (permissions?.includes("notifications")) {
@@ -418,7 +428,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
             }
           }
           // 白名单校验，防止非法值
-          if (!VALID_PERM_TYPES.includes(permType as any)) {
+          if (!VALID_PERM_TYPES.some((validType) => validType === permType)) {
             permType = "allUrls"
           }
           const url = chrome.runtime.getURL(
@@ -471,7 +481,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
     case MSG_OPEN_URL:
       ;(async () => {
         try {
-          const { url } = message as any
+          const { url } = message
           await chrome.tabs.create({
             url,
             active: true,
@@ -511,7 +521,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
     case MSG_SET_CLAUDE_SESSION_KEY:
       ;(async () => {
         try {
-          const { key } = message as any
+          const { key } = message
 
           if (key) {
             // 设置cookie
@@ -553,7 +563,8 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
         try {
           // 1. 获取所有 keys 和当前 ID
           // Zustand persist 存储结构: { state: { keys: [], currentKeyId: "" }, version: 0 }
-          const storageData = await localStorage.get<any>("claudeSessionKeys")
+          const storageData =
+            await localStorage.get<PersistedClaudeSessionKeys>("claudeSessionKeys")
           const rawKeys = storageData?.state?.keys || []
 
           if (rawKeys.length === 0) {
@@ -565,7 +576,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
 
           // 2. 筛选可用 Keys 并排序 (Pro 优先)
           // 规则: isValid !== false (undefined 也视为可用)，优先Pro，其次按名称排序
-          let availableKeys = rawKeys.filter((k: any) => k.isValid !== false)
+          let availableKeys: ClaudeSessionKey[] = rawKeys.filter((key) => key.isValid !== false)
 
           // 如果没有可用 Key，尝试使用所有 Key (防止死循环或无法切换)
           if (availableKeys.length === 0) {
@@ -573,7 +584,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
           }
 
           // 排序: Pro 优先，然后是名称
-          availableKeys.sort((a: any, b: any) => {
+          availableKeys.sort((a, b) => {
             const isAPro = a.accountType?.toLowerCase()?.includes("pro")
             const isBPro = b.accountType?.toLowerCase()?.includes("pro")
             if (isAPro && !isBPro) return -1
@@ -583,7 +594,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
 
           // 3. 找到下一个 Key
           // 在排序后的列表里找当前 Key 的位置
-          const currentIndex = availableKeys.findIndex((k: any) => k.id === currentId)
+          const currentIndex = availableKeys.findIndex((key) => key.id === currentId)
 
           // 如果只有一个 Key 且当前正在使用它，则不执行切换
           if (availableKeys.length === 1 && currentIndex !== -1) {
@@ -645,7 +656,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
         let originalCookie: chrome.cookies.Cookie | null = null
 
         try {
-          const { sessionKey } = message as any
+          const { sessionKey } = message
 
           // 1. 备份当前的 sessionKey cookie
           const existingCookies = await chrome.cookies.getAll({
diff --git a/src/components/OutlineTab.tsx b/src/components/OutlineTab.tsx
index 70b1e7e10..6002e11ee 100644
--- a/src/components/OutlineTab.tsx
+++ b/src/components/OutlineTab.tsx
@@ -711,7 +711,7 @@ export const OutlineTab: React.FC<OutlineTabProps> = ({
 
   const structuredTips = React.useMemo(
     () => buildStructuredTips(currentSettings.shortcuts?.keybindings, isMac, shortcutNotSetLabel),
-    [currentSettings.shortcuts?.keybindings, currentSettings.language, isMac, shortcutNotSetLabel],
+    [currentSettings.shortcuts?.keybindings, isMac, shortcutNotSetLabel],
   )
 
   // Initialize state from manager to prevent flicker
diff --git a/src/components/QuickButtons.tsx b/src/components/QuickButtons.tsx
index 346792941..5cc90d83e 100644
--- a/src/components/QuickButtons.tsx
+++ b/src/components/QuickButtons.tsx
@@ -422,7 +422,7 @@ export const QuickButtons: React.FC<QuickButtonsProps> = ({
 
       return { width, height, maxX, maxY }
     },
-    [DRAG_PADDING_PX],
+    [],
   )
 
   const clampPixelGroupPosition = useCallback(
@@ -443,7 +443,7 @@ export const QuickButtons: React.FC<QuickButtonsProps> = ({
         maxY,
       }
     },
-    [DRAG_PADDING_PX, getGroupBounds],
+    [getGroupBounds],
   )
 
   const toLogicalGroupPosition = useCallback(
@@ -461,7 +461,7 @@ export const QuickButtons: React.FC<QuickButtonsProps> = ({
 
       return { xRatio, yRatio }
     },
-    [DRAG_PADDING_PX, clampPixelGroupPosition],
+    [clampPixelGroupPosition],
   )
 
   const resolveLogicalGroupPosition = useCallback(
@@ -483,7 +483,7 @@ export const QuickButtons: React.FC<QuickButtonsProps> = ({
         y: Math.min(Math.max(rawY, DRAG_PADDING_PX), maxY),
       }
     },
-    [DRAG_PADDING_PX, getGroupBounds],
+    [getGroupBounds],
   )
 
   useLayoutEffect(() => {
diff --git a/src/contents/aistudio-preload.ts b/src/contents/aistudio-preload.ts
index 6882257fd..075b03850 100644
--- a/src/contents/aistudio-preload.ts
+++ b/src/contents/aistudio-preload.ts
@@ -9,6 +9,16 @@ import type { PlasmoCSConfig } from "plasmo"
 
 import { WATERMARK_BLOCKER_CODE } from "~constants/scripts"
 
+type UnknownRecord = Record<string, unknown>
+
+function isRecord(value: unknown): value is UnknownRecord {
+  return typeof value === "object" && value !== null
+}
+
+function getRecord(value: unknown): UnknownRecord | null {
+  return isRecord(value) ? value : null
+}
+
 // 配置：仅匹配 AI Studio，在 document_start 阶段执行
 export const config: PlasmoCSConfig = {
   matches: ["https://aistudio.google.com/*"],
@@ -20,12 +30,12 @@ export const config: PlasmoCSConfig = {
   try {
     // Zustand 使用 chrome.storage.local，key 为 "settings"
     const result = await chrome.storage.local.get("settings")
-    const allData = result as Record<string, any>
+    const allData = result as Record<string, unknown>
 
     // 读取 aistudio 设置
     // Zustand persist 格式: { state: { settings: { aistudio: {...} } }, version: 0 }
     // chrome.storage 存储的是 JSON 字符串
-    let settingsObj = allData.settings
+    let settingsObj: unknown = allData.settings
     if (typeof settingsObj === "string") {
       try {
         settingsObj = JSON.parse(settingsObj)
@@ -36,7 +46,11 @@ export const config: PlasmoCSConfig = {
     }
 
     // 从 Zustand persist 格式中提取 aistudio 设置
-    const aistudioSettings = settingsObj?.state?.settings?.aistudio || settingsObj?.aistudio
+    const settingsRecord = getRecord(settingsObj)
+    const stateRecord = getRecord(settingsRecord?.state)
+    const persistedSettings = getRecord(stateRecord?.settings)
+    const aistudioSettings =
+      getRecord(persistedSettings?.aistudio) || getRecord(settingsRecord?.aistudio)
 
     // 如果没有 AI Studio 设置，直接返回
     if (!aistudioSettings) {
@@ -59,13 +73,13 @@ export const config: PlasmoCSConfig = {
 
     // 读取现有的 AI Studio 用户偏好
     const prefStr = localStorage.getItem("aiStudioUserPreference") || "{}"
-    const pref = JSON.parse(prefStr)
+    const pref = getRecord(JSON.parse(prefStr)) || {}
 
     let hasChanges = false
 
     // 应用侧边栏折叠设置
     // collapseNavbar: true 表示用户希望折叠侧边栏，对应 isNavbarExpanded: false
-    if (aistudioSettings.collapseNavbar !== undefined) {
+    if (typeof aistudioSettings.collapseNavbar === "boolean") {
       const shouldExpand = !aistudioSettings.collapseNavbar
       if (pref.isNavbarExpanded !== shouldExpand) {
         pref.isNavbarExpanded = shouldExpand
@@ -74,7 +88,7 @@ export const config: PlasmoCSConfig = {
     }
 
     // 应用工具面板折叠设置
-    if (aistudioSettings.collapseTools !== undefined) {
+    if (typeof aistudioSettings.collapseTools === "boolean") {
       const shouldOpen = !aistudioSettings.collapseTools
       if (pref.areToolsOpen !== shouldOpen) {
         pref.areToolsOpen = shouldOpen
@@ -83,7 +97,7 @@ export const config: PlasmoCSConfig = {
     }
 
     // 应用高级设置折叠
-    if (aistudioSettings.collapseAdvanced !== undefined) {
+    if (typeof aistudioSettings.collapseAdvanced === "boolean") {
       const shouldOpen = !aistudioSettings.collapseAdvanced
       if (pref.isAdvancedOpen !== shouldOpen) {
         pref.isAdvancedOpen = shouldOpen
@@ -92,7 +106,7 @@ export const config: PlasmoCSConfig = {
     }
 
     // 应用搜索工具开关
-    if (aistudioSettings.enableSearch !== undefined) {
+    if (typeof aistudioSettings.enableSearch === "boolean") {
       if (pref.enableSearchAsATool !== aistudioSettings.enableSearch) {
         pref.enableSearchAsATool = aistudioSettings.enableSearch
         hasChanges = true
@@ -100,7 +114,10 @@ export const config: PlasmoCSConfig = {
     }
 
     // 应用默认模型
-    if (aistudioSettings.defaultModel && aistudioSettings.defaultModel.trim() !== "") {
+    if (
+      typeof aistudioSettings.defaultModel === "string" &&
+      aistudioSettings.defaultModel.trim() !== ""
+    ) {
       const modelId = aistudioSettings.defaultModel.trim()
       if (pref.promptModel !== modelId) {
         pref.promptModel = modelId
@@ -117,13 +134,14 @@ export const config: PlasmoCSConfig = {
     // 检查是否开启了模型锁定
     // 如果开启了模型锁定，则暂不收起运行设置面板（因为锁定模型需要操作面板）
     // 同时也暂不操作工具栏（collapseTools），以免影响面板展开
-    const modelLockSettings = settingsObj?.state?.settings?.modelLock || settingsObj?.modelLock
-    const isModelLockEnabled =
-      modelLockSettings && modelLockSettings["ai-studio"] && modelLockSettings["ai-studio"].enabled
+    const modelLockSettings =
+      getRecord(persistedSettings?.modelLock) || getRecord(settingsRecord?.modelLock)
+    const aiStudioModelLock = getRecord(modelLockSettings?.["ai-studio"])
+    const isModelLockEnabled = aiStudioModelLock !== null && aiStudioModelLock.enabled === true
 
     // 如果需要收起运行设置面板，且未开启模型锁定，则执行收起
     // (如果开启了模型锁定，收起操作将由 AIStudioAdapter 在锁定完成后执行)
-    if (aistudioSettings.collapseRunSettings && !isModelLockEnabled) {
+    if (aistudioSettings.collapseRunSettings === true && !isModelLockEnabled) {
       waitForButtonAndClick('button[aria-label="Close run settings panel"]')
     }
   } catch (error) {
diff --git a/src/contents/gemini-watermark-main.ts b/src/contents/gemini-watermark-main.ts
index 64288fb84..46fffbad2 100644
--- a/src/contents/gemini-watermark-main.ts
+++ b/src/contents/gemini-watermark-main.ts
@@ -100,18 +100,19 @@ if (!window.__ophelGeminiWatermarkMainInitialized) {
 
     const normalizedUrl = normalizeGeminiImageUrl(requestUrl)
 
-    const nextArgs = [...args] as Parameters<typeof fetch>
-    if (typeof nextArgs[0] === "string") {
-      nextArgs[0] = normalizedUrl as any
-    } else if (nextArgs[0] instanceof Request) {
-      nextArgs[0] = new Request(normalizedUrl, nextArgs[0]) as any
-    }
+    const [input, init] = args
+    const normalizedInput =
+      typeof input === "string"
+        ? normalizedUrl
+        : input instanceof Request
+          ? new Request(normalizedUrl, input)
+          : input
 
     let originalResponse: Response | null = null
     let originalBlob: Blob | null = null
 
     try {
-      originalResponse = await originalFetch(...nextArgs)
+      originalResponse = await originalFetch(normalizedInput, init)
       if (!originalResponse.ok) {
         return originalResponse
       }
diff --git a/src/contents/main.ts b/src/contents/main.ts
index 8f34e2749..658147b43 100644
--- a/src/contents/main.ts
+++ b/src/contents/main.ts
@@ -35,6 +35,19 @@ import {
   MSG_START_NEW_CONVERSATION,
 } from "~utils/messaging"
 
+interface AIStudioModelAdapter {
+  getModelList(): Promise<Array<{ id: string; name: string }>>
+}
+
+function hasAIStudioModelList(adapter: unknown): adapter is AIStudioModelAdapter {
+  return (
+    typeof adapter === "object" &&
+    adapter !== null &&
+    "getModelList" in adapter &&
+    typeof adapter.getModelList === "function"
+  )
+}
+
 const resetAllStores = () => {
   useSettingsStore.getState().resetSettings()
   usePromptsStore.getState().setPrompts(getDefaultPrompts())
@@ -534,10 +547,10 @@ async function initializeContentScript(): Promise<void> {
 
     // AI Studio 获取模型列表
     if (message.type === "GET_MODEL_LIST") {
-      if (siteId === SITE_IDS.AISTUDIO && typeof (adapter as any).getModelList === "function") {
+      if (siteId === SITE_IDS.AISTUDIO && hasAIStudioModelList(adapter)) {
         ;(async () => {
           try {
-            const models = await (adapter as any).getModelList()
+            const models = await adapter.getModelList()
             sendResponse({ success: true, models })
           } catch (err) {
             console.error("[Ophel] getModelList failed:", err)
diff --git a/src/contents/scroll-lock-main.ts b/src/contents/scroll-lock-main.ts
index db0cde398..06b34f505 100644
--- a/src/contents/scroll-lock-main.ts
+++ b/src/contents/scroll-lock-main.ts
@@ -1,13 +1,13 @@
 /**
- * 滚动锁定 - 主世界脚本
+ * 滚动锁定 - 主世界入口
  *
- * 这个脚本运行在主世界（Main World），可以直接劫持页面的 API
- * 通过 Plasmo 的 world: "MAIN" 配置绕过 CSP 限制
+ * 平台入口只负责 Plasmo 配置；滚动拦截逻辑与油猴共用同一运行时实现。
  */
 
 import type { PlasmoCSConfig } from "plasmo"
 
-// 配置为主世界运行
+import { installScrollLockRuntime } from "~core/scroll-lock-runtime"
+
 export const config: PlasmoCSConfig = {
   matches: [
     "https://gemini.google.com/*",
@@ -27,316 +27,7 @@ export const config: PlasmoCSConfig = {
     "https://chat.z.ai/*",
   ],
   world: "MAIN",
-  run_at: "document_start", // 尽早运行以劫持 API
+  run_at: "document_start",
 }
 
-// 防止重复初始化
-if (!window.__ophelScrollLockInitialized) {
-  window.__ophelScrollLockInitialized = true
-
-  // 保存原始 API
-  const originalApis = {
-    scrollIntoView: Element.prototype.scrollIntoView,
-    scrollTo: window.scrollTo.bind(window),
-    scrollTopDescriptor:
-      Object.getOwnPropertyDescriptor(Element.prototype, "scrollTop") ||
-      Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollTop"),
-  }
-
-  // 保存原始 API 供恢复使用
-  window.__ophelOriginalApis = originalApis
-
-  // 默认禁用，等待 Content Script 通过消息启用
-  window.__ophelScrollLockEnabled = false
-
-  // 精确位置锁：通过 DOM 属性实现同步跨世界通信（postMessage 是异步的，存在竞态）
-  // Content Script 设置 document.documentElement.dataset.ophelPositionLock = "scrollTop值"
-  // 主世界每次 API 拦截时同步读取该属性，立即生效，无需等待消息传递
-  function getPositionLockTarget(): number | null {
-    const attr = document.documentElement.dataset.ophelPositionLock
-    if (attr !== undefined) {
-      const val = Number(attr)
-      if (!isNaN(val)) return val
-    }
-    return null
-  }
-
-  // 记录位置锁拦截时间戳，供 Position Keeper 自适应判断何时释放
-  function recordPositionLockBlock() {
-    document.documentElement.dataset.ophelPositionLockLastBlock = String(Date.now())
-  }
-
-  // 1. 劫持 Element.prototype.scrollIntoView
-  Element.prototype.scrollIntoView = function (options?: boolean | ScrollIntoViewOptions) {
-    // 精确位置锁激活时，仅允许带 __bypassLock 的调用（或处于水平容器内的元素）
-    const shouldBypass = options && typeof options === "object" && (options as any).__bypassLock
-    const posLock = getPositionLockTarget()
-    if (posLock !== null) {
-      if (shouldBypass) {
-        return originalApis.scrollIntoView.call(this, options as any)
-      }
-      // 水平容器内的元素不影响主页垂直滤动，逆辑放行
-      let el: Element | null = this.parentElement
-      while (el) {
-        if (el.scrollWidth > el.clientWidth && el.scrollHeight <= el.clientHeight + 10) {
-          return originalApis.scrollIntoView.call(this, options as any)
-        }
-        el = el.parentElement
-      }
-      recordPositionLockBlock()
-      return
-    }
-
-    // 快速路径：锁未激活则直接调用原始 API
-    if (!window.__ophelScrollLockEnabled) {
-      return originalApis.scrollIntoView.call(this, options as any)
-    }
-
-    // scrollLock 已启用：水平容器内的元素直接放行
-    let el: Element | null = this.parentElement
-    while (el) {
-      if (el.scrollWidth > el.clientWidth && el.scrollHeight <= el.clientHeight + 10) {
-        return originalApis.scrollIntoView.call(this, options as any)
-      }
-      el = el.parentElement
-    }
-
-    if (!shouldBypass) {
-      return
-    }
-
-    return originalApis.scrollIntoView.call(this, options as any)
-  }
-
-  const callOriginalScrollTo = (args: IArguments) => {
-    return Reflect.apply(originalApis.scrollTo, window, args)
-  }
-
-  // 2. 劫持 window.scrollTo
-  window.scrollTo = function (x?: ScrollToOptions | number, y?: number) {
-    if (getPositionLockTarget() !== null) {
-      recordPositionLockBlock()
-      return
-    }
-    // 如果劫持未启用，直接调用原始 API
-    if (!window.__ophelScrollLockEnabled) {
-      return callOriginalScrollTo(arguments)
-    }
-
-    // 解析目标 Y 位置
-    let targetY: number | undefined
-    if (typeof x === "object" && x !== null) {
-      targetY = x.top
-    } else {
-      targetY = y
-    }
-
-    // 只有当向下大幅滚动时才拦截（防止系统自动拉到底）
-    if (typeof targetY === "number" && targetY > window.scrollY + 50) {
-      return
-    }
-
-    return callOriginalScrollTo(arguments)
-  }
-
-  // 3. 劫持 scrollTop setter
-  if (originalApis.scrollTopDescriptor) {
-    const descriptor = originalApis.scrollTopDescriptor
-    Object.defineProperty(Element.prototype, "scrollTop", {
-      get: function () {
-        return descriptor.get ? descriptor.get.call(this) : 0
-      },
-      set: function (value: number) {
-        // 水平滚动容器（如图片轮播）：直接放行，不干扰水平滚动组件
-        if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
-          if (descriptor.set) descriptor.set.call(this, value)
-          return
-        }
-        // 精确位置锁：强制回到目标位置
-        const lockTarget = getPositionLockTarget()
-        if (lockTarget !== null) {
-          if (Math.abs(value - lockTarget) > 10) {
-            // 记录拦截时间戳，供 Position Keeper 自适应判断何时释放
-            recordPositionLockBlock()
-            if (descriptor.set) descriptor.set.call(this, lockTarget)
-            return
-          }
-          if (descriptor.set) descriptor.set.call(this, value)
-          return
-        }
-        // 如果劫持未启用，直接设置
-        if (!window.__ophelScrollLockEnabled) {
-          if (descriptor.set) {
-            descriptor.set.call(this, value)
-          }
-          return
-        }
-
-        const currentScrollTop = descriptor.get ? descriptor.get.call(this) : 0
-
-        // 如果启用且是向下滚动超过 50px，阻止
-        if (value > currentScrollTop + 50) {
-          return
-        }
-
-        if (descriptor.set) {
-          descriptor.set.call(this, value)
-        }
-      },
-      configurable: true,
-    })
-  }
-
-  // 4. 劫持 Element.prototype.scrollTo（元素级滚动方法）
-  const originalElementScrollTo = Element.prototype.scrollTo
-  Element.prototype.scrollTo = function (
-    this: Element,
-    optionsOrX?: ScrollToOptions | number,
-    y?: number,
-  ) {
-    // 如果是纯水平滚动（仅设置 left，无 top），直接放行
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      if (optionsOrX.left !== undefined && optionsOrX.top === undefined) {
-        return originalElementScrollTo.apply(this, arguments as any)
-      }
-    }
-    // 水平滚动容器直接放行
-    if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
-      return originalElementScrollTo.apply(this, arguments as any)
-    }
-    // 如果劫持未启用，直接调用原始 API
-    if (getPositionLockTarget() !== null) {
-      recordPositionLockBlock()
-      return
-    }
-    if (!window.__ophelScrollLockEnabled) {
-      return originalElementScrollTo.apply(this, arguments as any)
-    }
-
-    // 解析目标 Y 位置
-    let targetY: number | undefined
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      targetY = optionsOrX.top
-    } else if (typeof y === "number") {
-      targetY = y
-    }
-
-    // 获取当前滚动位置
-    const currentScrollTop = this.scrollTop || 0
-
-    // 只有当向下大幅滚动时才拦截
-    if (typeof targetY === "number" && targetY > currentScrollTop + 50) {
-      return
-    }
-
-    return originalElementScrollTo.apply(this, arguments as any)
-  }
-
-  // 5. 劫持 Element.prototype.scroll（scrollTo 的别名）
-  const originalElementScroll = Element.prototype.scroll
-  Element.prototype.scroll = function (
-    this: Element,
-    optionsOrX?: ScrollToOptions | number,
-    y?: number,
-  ) {
-    // 如果是纯水平滚动（仅设置 left，无 top），直接放行
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      if (optionsOrX.left !== undefined && optionsOrX.top === undefined) {
-        return originalElementScroll.apply(this, arguments as any)
-      }
-    }
-    // 水平滚动容器直接放行
-    if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
-      return originalElementScroll.apply(this, arguments as any)
-    }
-    // 如果劫持未启用，直接调用原始 API
-    if (getPositionLockTarget() !== null) {
-      recordPositionLockBlock()
-      return
-    }
-    if (!window.__ophelScrollLockEnabled) {
-      return originalElementScroll.apply(this, arguments as any)
-    }
-
-    // 解析目标 Y 位置
-    let targetY: number | undefined
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      targetY = optionsOrX.top
-    } else if (typeof y === "number") {
-      targetY = y
-    }
-
-    // 获取当前滚动位置
-    const currentScrollTop = this.scrollTop || 0
-
-    // 只有当向下大幅滚动时才拦截
-    if (typeof targetY === "number" && targetY > currentScrollTop + 50) {
-      return
-    }
-
-    return originalElementScroll.apply(this, arguments as any)
-  }
-
-  // 6. 劫持 Element.prototype.scrollBy（相对滚动方法）
-  const originalElementScrollBy = Element.prototype.scrollBy
-  Element.prototype.scrollBy = function (
-    this: Element,
-    optionsOrX?: ScrollToOptions | number,
-    y?: number,
-  ) {
-    // 如果是纯水平滚动（仅设置 left，无 top），直接放行
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      if (optionsOrX.left !== undefined && optionsOrX.top === undefined) {
-        return originalElementScrollBy.apply(this, arguments as any)
-      }
-    }
-    // 水平滚动容器直接放行
-    if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
-      return originalElementScrollBy.apply(this, arguments as any)
-    }
-    // 如果劫持未启用，直接调用原始 API
-    if (getPositionLockTarget() !== null) {
-      recordPositionLockBlock()
-      return
-    }
-    if (!window.__ophelScrollLockEnabled) {
-      return originalElementScrollBy.apply(this, arguments as any)
-    }
-
-    // 解析 Y 偏移量
-    let deltaY: number | undefined
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      deltaY = optionsOrX.top
-    } else if (typeof y === "number") {
-      deltaY = y
-    }
-
-    // 只有当向下大幅滚动时才拦截（scrollBy 是相对偏移）
-    if (typeof deltaY === "number" && deltaY > 50) {
-      return
-    }
-
-    return originalElementScrollBy.apply(this, arguments as any)
-  }
-
-  // 监听来自 Content Script 的消息（启用/禁用劫持）
-  window.addEventListener("message", (event) => {
-    if (event.source !== window) return
-    if (event.data?.type === "OPHEL_SCROLL_LOCK_TOGGLE") {
-      window.__ophelScrollLockEnabled = event.data.enabled
-    }
-  })
-
-  // 7. 劫持 scrollIntoViewIfNeeded（Chrome 专有 API）
-  // 仅在精确位置锁期间拦截，不影响常规 Scroll Lock 功能
-  if (typeof (Element.prototype as any).scrollIntoViewIfNeeded === "function") {
-    const originalScrollIntoViewIfNeeded = (Element.prototype as any).scrollIntoViewIfNeeded
-    ;(Element.prototype as any).scrollIntoViewIfNeeded = function (centerIfNeeded?: boolean) {
-      if (getPositionLockTarget() !== null) {
-        recordPositionLockBlock()
-        return
-      }
-      return originalScrollIntoViewIfNeeded.call(this, centerIfNeeded)
-    }
-  }
-}
+installScrollLockRuntime(window)
diff --git a/src/core/conversation/manager.ts b/src/core/conversation/manager.ts
index 551a36a92..63a2dd184 100644
--- a/src/core/conversation/manager.ts
+++ b/src/core/conversation/manager.ts
@@ -136,7 +136,7 @@ export class ConversationManager {
   // Observer state
   private observerConfig: ConversationObserverConfig | null = null
   private sidebarObserverStop: (() => void) | null = null
-  private titleWatcher: any = null // DOMToolkit watcher instance
+  private titleWatcher: ReturnType<typeof DOMToolkit.watchMultiple> | null = null
   private pollInterval: ReturnType<typeof setTimeout> | null = null
   private geminiMigrationTimer: ReturnType<typeof setTimeout> | null = null
   private geminiMigrationRetryCount = 0
diff --git a/src/core/gemini-mystuff-bridge.ts b/src/core/gemini-mystuff-bridge.ts
index 9b255b001..c7ef52ef3 100644
--- a/src/core/gemini-mystuff-bridge.ts
+++ b/src/core/gemini-mystuff-bridge.ts
@@ -287,13 +287,6 @@ async function fetchKind(kind: GeminiMyStuffKind, force: boolean): Promise<Gemin
       const parsed = parseResponse(text, kind)
       parsed.items.forEach((item) => fetched.set(getRecordKey(item), item))
 
-      console.info(`${LOG_PREFIX} fetched page`, {
-        kind,
-        page,
-        itemCount: parsed.items.length,
-        nextPageToken: parsed.nextPageToken,
-      })
-
       if (!parsed.nextPageToken) {
         break
       }
@@ -390,6 +383,4 @@ export function initGeminiMyStuffBridge(): void {
     const payload = (event as CustomEvent<GeminiMyStuffSyncRequestPayload>).detail
     void handleSyncRequest(payload)
   })
-
-  console.info(`${LOG_PREFIX} initialized`)
 }
diff --git a/src/core/network-monitor.ts b/src/core/network-monitor.ts
index 2268c6e2a..c4eb15589 100644
--- a/src/core/network-monitor.ts
+++ b/src/core/network-monitor.ts
@@ -4,7 +4,9 @@ import {
   EVENT_MONITOR_COMPLETE,
   EVENT_MONITOR_INIT,
   EVENT_MONITOR_START,
+  type MonitorConfigPayload,
   type MonitorEventPayload,
+  type WindowMessage,
 } from "~utils/messaging"
 
 // 油猴脚本环境需要使用 unsafeWindow 才能访问页面的原生 fetch/XMLHttpRequest
@@ -15,12 +17,43 @@ declare const unsafeWindow: Window | undefined
  * - 油猴脚本环境：使用 unsafeWindow 访问页面上下文
  * - 扩展环境 (MAIN world)：直接使用 window
  */
-function getPageWindow(): typeof globalThis {
+function getPageWindow(): Window & typeof globalThis {
   // 检测是否在油猴脚本环境中（有 unsafeWindow 且与 window 不同）
   if (typeof unsafeWindow !== "undefined" && unsafeWindow !== window) {
-    return unsafeWindow as unknown as typeof globalThis
+    return unsafeWindow as Window & typeof globalThis
   }
-  return window
+  return window as Window & typeof globalThis
+}
+
+type FetchArguments = Parameters<typeof fetch>
+type XhrOpen = (
+  this: XMLHttpRequest,
+  method: string,
+  url: string | URL,
+  async?: boolean,
+  username?: string | null,
+  password?: string | null,
+) => void
+type XhrSend = (this: XMLHttpRequest, body?: Document | XMLHttpRequestBodyInit | null) => void
+
+interface MonitoredXMLHttpRequest extends XMLHttpRequest {
+  __ophelNetworkMonitorUrl?: string
+}
+
+interface RequestBodyReader {
+  clone(): RequestBodyReader
+  text(): Promise<string>
+}
+
+function isRequestBodyReader(value: unknown): value is RequestBodyReader {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "clone" in value &&
+    typeof value.clone === "function" &&
+    "text" in value &&
+    typeof value.text === "function"
+  )
 }
 
 interface NetworkMonitorOptions {
@@ -28,9 +61,9 @@ interface NetworkMonitorOptions {
   urlPathEndsWith?: string[]
   silenceThreshold?: number
   requestBodyRules?: NetworkMonitorRequestBodyRule[]
-  onComplete?: (ctx: any) => void
-  onStart?: (ctx: any) => void
-  domValidation?: (ctx: any) => boolean
+  onComplete?: (ctx: MonitorEventPayload) => void
+  onStart?: (ctx: MonitorEventPayload) => void
+  domValidation?: (ctx: MonitorEventPayload) => boolean
 }
 
 class NetworkMonitor {
@@ -38,19 +71,19 @@ class NetworkMonitor {
   private urlPathEndsWith: string[]
   private silenceThreshold: number
   private requestBodyRules: NetworkMonitorRequestBodyRule[]
-  private onComplete: (ctx: any) => void
-  private onStart: ((ctx: any) => void) | null
-  private domValidation: ((ctx: any) => boolean) | null
+  private onComplete: (ctx: MonitorEventPayload) => void
+  private onStart: ((ctx: MonitorEventPayload) => void) | null
+  private domValidation: ((ctx: MonitorEventPayload) => boolean) | null
 
   private _activeCount = 0
-  private _silenceTimer: any = null
+  private _silenceTimer: ReturnType<typeof setTimeout> | null = null
   private _isMonitoring = false
-  private _originalFetch: any = null
-  private _originalXhrOpen: any = null
-  private _originalXhrSend: any = null
+  private _originalFetch: typeof fetch | null = null
+  private _originalXhrOpen: XhrOpen | null = null
+  private _originalXhrSend: XhrSend | null = null
   private _lastUrl = ""
   private _hasTriggeredStart = false
-  private _boundHookedFetch: any
+  private _boundHookedFetch: typeof fetch
 
   constructor(options: NetworkMonitorOptions = {}) {
     this.urlPatterns = options.urlPatterns || []
@@ -141,14 +174,14 @@ class NetworkMonitor {
     }
   }
 
-  private async _hookedFetch(...args: any[]) {
+  private async _hookedFetch(...args: FetchArguments): Promise<Response> {
     // 获取正确的页面上下文（油猴脚本环境使用 unsafeWindow）
     const pageWindow = getPageWindow()
     const url = this._extractFetchUrl(args)
     const isTarget = this._isTargetUrl(url)
 
     if (!isTarget) {
-      return this._originalFetch.call(pageWindow, ...args)
+      return this._callOriginalFetch(pageWindow, args)
     }
 
     this._activeCount++
@@ -168,7 +201,7 @@ class NetworkMonitor {
     }
 
     try {
-      const response = await this._originalFetch.call(pageWindow, ...args)
+      const response = await this._callOriginalFetch(pageWindow, args)
       const clone = response.clone()
       this._readStream(clone).catch(() => {})
       return response
@@ -178,6 +211,16 @@ class NetworkMonitor {
     }
   }
 
+  private _callOriginalFetch(
+    pageWindow: Window & typeof globalThis,
+    args: FetchArguments,
+  ): Promise<Response> {
+    if (!this._originalFetch) {
+      throw new Error("NetworkMonitor original fetch is unavailable")
+    }
+    return Reflect.apply(this._originalFetch, pageWindow, args) as Promise<Response>
+  }
+
   private async _readStream(response: Response) {
     try {
       if (!response.body) return
@@ -208,19 +251,31 @@ class NetworkMonitor {
     this._originalXhrOpen = PageXHR.prototype.open
     this._originalXhrSend = PageXHR.prototype.send
 
-    // @ts-ignore
-    PageXHR.prototype.open = function (method: string, url: string | URL, ...rest: any[]) {
-      // @ts-ignore
-      this._networkMonitorUrl = url ? url.toString() : ""
-      // @ts-ignore
-      return self._originalXhrOpen.call(this, method, url, ...rest)
-    }
+    PageXHR.prototype.open = function (
+      this: MonitoredXMLHttpRequest,
+      method: string,
+      url: string | URL,
+      async = true,
+      username: string | null = null,
+      password: string | null = null,
+    ) {
+      this.__ophelNetworkMonitorUrl = url ? url.toString() : ""
+      if (!self._originalXhrOpen) {
+        throw new Error("NetworkMonitor original XMLHttpRequest.open is unavailable")
+      }
+      return self._originalXhrOpen.call(this, method, url, async, username, password)
+    } as typeof XMLHttpRequest.prototype.open
 
-    PageXHR.prototype.send = function (body: any) {
-      // @ts-ignore
-      const url = this._networkMonitorUrl || ""
+    PageXHR.prototype.send = function (
+      this: MonitoredXMLHttpRequest,
+      body?: Document | XMLHttpRequestBodyInit | null,
+    ) {
+      const url = this.__ophelNetworkMonitorUrl || ""
 
       if (!self._isTargetUrl(url)) {
+        if (!self._originalXhrSend) {
+          throw new Error("NetworkMonitor original XMLHttpRequest.send is unavailable")
+        }
         return self._originalXhrSend.call(this, body)
       }
 
@@ -249,8 +304,11 @@ class NetworkMonitor {
       this.addEventListener("abort", onComplete)
       this.addEventListener("timeout", onComplete)
 
+      if (!self._originalXhrSend) {
+        throw new Error("NetworkMonitor original XMLHttpRequest.send is unavailable")
+      }
       return self._originalXhrSend.call(this, body)
-    }
+    } as typeof XMLHttpRequest.prototype.send
   }
 
   private _unhookXHR() {
@@ -267,7 +325,7 @@ class NetworkMonitor {
     }
   }
 
-  private _extractFetchUrl(args: any[]): string {
+  private _extractFetchUrl(args: FetchArguments): string {
     const input = args[0]
     if (!input) return ""
 
@@ -279,14 +337,16 @@ class NetworkMonitor {
       return input.toString()
     }
 
-    if (typeof input === "object" && typeof input.url === "string") {
+    if (input instanceof Request) {
       return input.url
     }
 
-    return typeof input.toString === "function" ? input.toString() : ""
+    return String(input)
   }
 
-  private async _extractFetchRequestMetadata(args: any[]): Promise<Partial<MonitorEventPayload>> {
+  private async _extractFetchRequestMetadata(
+    args: FetchArguments,
+  ): Promise<Partial<MonitorEventPayload>> {
     if (this.requestBodyRules.length === 0) {
       return {}
     }
@@ -297,18 +357,11 @@ class NetworkMonitor {
     }
 
     const input = args[0]
-    if (
-      input &&
-      typeof input === "object" &&
-      typeof input.clone === "function" &&
-      typeof input.text === "function"
-    ) {
+    if (isRequestBodyReader(input)) {
       try {
         const clone = input.clone()
-        if (clone && typeof clone.text === "function") {
-          const bodyText = await clone.text()
-          return this._extractRequestMetadata(bodyText)
-        }
+        const bodyText = await clone.text()
+        return this._extractRequestMetadata(bodyText)
       } catch {}
     }
 
@@ -400,7 +453,9 @@ export function initNetworkMonitor(): void {
   initGeminiMyStuffBridge()
 
   window.addEventListener("message", (event) => {
-    const { type, payload } = event.data || {}
+    const message = event.data as WindowMessage | null
+    const type = message?.type
+    const payload = message?.payload as MonitorConfigPayload | undefined
 
     // 在油猴脚本中，event.source 可能与 window 或 unsafeWindow 不完全相等
     // 或者由于沙箱机制，window.postMessage 发送的消息 source 可能是 proxy
diff --git a/src/core/reading-history.ts b/src/core/reading-history.ts
index aa0bf1568..e5ed3c3e7 100644
--- a/src/core/reading-history.ts
+++ b/src/core/reading-history.ts
@@ -5,7 +5,7 @@
  * 数据存储已迁移到 reading-history-store.ts
  */
 
-import type { SiteAdapter } from "~adapters/base"
+import type { AnchorData, SiteAdapter } from "~adapters/base"
 import {
   getReadingHistoryStore,
   useReadingHistoryStore,
@@ -341,7 +341,14 @@ export class ReadingHistoryManager {
       // 1. 精确恢复：尝试通过内容锚点定位
       if (data.type && this.adapter.restoreScroll) {
         try {
-          const contentRestored = await this.adapter.restoreScroll(data as any)
+          const anchorData: AnchorData = {
+            type: data.type,
+            selector: data.selector,
+            index: data.index,
+            offset: data.offset ?? 0,
+            textSignature: data.textSignature,
+          }
+          const contentRestored = await this.adapter.restoreScroll(anchorData)
           if (contentRestored) {
             const scrollContainer = this.adapter.getScrollContainer() || document.documentElement
             this.restoredTop = (scrollContainer as HTMLElement).scrollTop || window.scrollY
diff --git a/src/core/scroll-lock-runtime.ts b/src/core/scroll-lock-runtime.ts
new file mode 100644
index 000000000..a18561e8d
--- /dev/null
+++ b/src/core/scroll-lock-runtime.ts
@@ -0,0 +1,303 @@
+/**
+ * 跨平台滚动锁运行时。
+ *
+ * 扩展 MAIN world 与 userscript unsafeWindow 共用这一份业务逻辑；平台入口只负责
+ * 提供真实页面 window，避免两端手工维护两套滚动 API 劫持实现。
+ */
+
+type ScrollIntoViewOptionsWithBypass = ScrollIntoViewOptions & { __bypassLock?: boolean }
+type ElementWithScrollIntoViewIfNeeded = Element & {
+  scrollIntoViewIfNeeded?: (centerIfNeeded?: boolean) => void
+}
+
+export function installScrollLockRuntime(pageWin: Window & typeof globalThis): void {
+  // 防止重复初始化（与扩展版共享同一标志）
+  if (pageWin.__ophelScrollLockInitialized) return
+  pageWin.__ophelScrollLockInitialized = true
+
+  const PageElement = pageWin.Element
+  const PageHTMLElement = pageWin.HTMLElement
+
+  // 保存原始 API
+  const originalApis = {
+    scrollIntoView: PageElement.prototype.scrollIntoView,
+    scrollTo: pageWin.scrollTo.bind(pageWin),
+    scrollTopDescriptor:
+      Object.getOwnPropertyDescriptor(PageElement.prototype, "scrollTop") ||
+      Object.getOwnPropertyDescriptor(PageHTMLElement.prototype, "scrollTop"),
+  }
+
+  pageWin.__ophelOriginalApis = originalApis
+  pageWin.__ophelScrollLockEnabled = false
+
+  // 精确位置锁：通过 DOM 属性实现同步通信
+  // 与扩展版一致，读取 document.documentElement.dataset.ophelPositionLock
+  function getPositionLockTarget(): number | null {
+    const attr = pageWin.document.documentElement.dataset.ophelPositionLock
+    if (attr !== undefined) {
+      const val = Number(attr)
+      if (!isNaN(val)) return val
+    }
+    return null
+  }
+
+  function recordPositionLockBlock() {
+    pageWin.document.documentElement.dataset.ophelPositionLockLastBlock = String(Date.now())
+  }
+
+  // 1. 劫持 Element.prototype.scrollIntoView
+  PageElement.prototype.scrollIntoView = function (options?: boolean | ScrollIntoViewOptions) {
+    const shouldBypass =
+      options &&
+      typeof options === "object" &&
+      (options as ScrollIntoViewOptionsWithBypass).__bypassLock
+    const posLock = getPositionLockTarget()
+    if (posLock !== null) {
+      if (shouldBypass) {
+        return Reflect.apply(originalApis.scrollIntoView, this, [options])
+      }
+      // 水平容器内的元素不影响主页垂直滤动，逆辑放行
+      let el: Element | null = this.parentElement
+      while (el) {
+        if (el.scrollWidth > el.clientWidth && el.scrollHeight <= el.clientHeight + 10) {
+          return Reflect.apply(originalApis.scrollIntoView, this, [options])
+        }
+        el = el.parentElement
+      }
+      recordPositionLockBlock()
+      return
+    }
+
+    // 快速路径：锁未激活则直接调用原始 API
+    if (!pageWin.__ophelScrollLockEnabled) {
+      return Reflect.apply(originalApis.scrollIntoView, this, [options])
+    }
+
+    // scrollLock 已启用：水平容器内的元素直接放行
+    let el: Element | null = this.parentElement
+    while (el) {
+      if (el.scrollWidth > el.clientWidth && el.scrollHeight <= el.clientHeight + 10) {
+        return Reflect.apply(originalApis.scrollIntoView, this, [options])
+      }
+      el = el.parentElement
+    }
+
+    if (!shouldBypass) {
+      return
+    }
+
+    return Reflect.apply(originalApis.scrollIntoView, this, [options])
+  }
+
+  // 2. 劫持 window.scrollTo
+  pageWin.scrollTo = function (x?: ScrollToOptions | number, y?: number) {
+    if (getPositionLockTarget() !== null) {
+      recordPositionLockBlock()
+      return
+    }
+    if (!pageWin.__ophelScrollLockEnabled) {
+      return Reflect.apply(originalApis.scrollTo, pageWin, arguments)
+    }
+
+    let targetY: number | undefined
+    if (typeof x === "object" && x !== null) {
+      targetY = x.top
+    } else {
+      targetY = y
+    }
+
+    if (typeof targetY === "number" && targetY > pageWin.scrollY + 50) {
+      return
+    }
+
+    return Reflect.apply(originalApis.scrollTo, pageWin, arguments)
+  }
+
+  // 3. 劫持 scrollTop setter
+  if (originalApis.scrollTopDescriptor) {
+    const descriptor = originalApis.scrollTopDescriptor
+    Object.defineProperty(PageElement.prototype, "scrollTop", {
+      get: function () {
+        return descriptor.get ? descriptor.get.call(this) : 0
+      },
+      set: function (value: number) {
+        // 水平滚动容器（如图片轮播）：直接放行
+        if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
+          if (descriptor.set) descriptor.set.call(this, value)
+          return
+        }
+        const lockTarget = getPositionLockTarget()
+        if (lockTarget !== null) {
+          if (Math.abs(value - lockTarget) > 10) {
+            recordPositionLockBlock()
+            if (descriptor.set) descriptor.set.call(this, lockTarget)
+            return
+          }
+          if (descriptor.set) descriptor.set.call(this, value)
+          return
+        }
+        if (!pageWin.__ophelScrollLockEnabled) {
+          if (descriptor.set) {
+            descriptor.set.call(this, value)
+          }
+          return
+        }
+
+        const currentScrollTop = descriptor.get ? descriptor.get.call(this) : 0
+
+        if (value > currentScrollTop + 50) {
+          return
+        }
+
+        if (descriptor.set) {
+          descriptor.set.call(this, value)
+        }
+      },
+      configurable: true,
+    })
+  }
+
+  // 4. 劫持 Element.prototype.scrollTo（元素级滚动方法）
+  const originalElementScrollTo = PageElement.prototype.scrollTo
+  PageElement.prototype.scrollTo = function (
+    this: Element,
+    optionsOrX?: ScrollToOptions | number,
+    y?: number,
+  ) {
+    // 纯水平滚动（仅设置 left，无 top），直接放行
+    if (typeof optionsOrX === "object" && optionsOrX !== null) {
+      if (optionsOrX.left !== undefined && optionsOrX.top === undefined) {
+        return Reflect.apply(originalElementScrollTo, this, arguments)
+      }
+    }
+    // 水平滚动容器直接放行
+    if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
+      return Reflect.apply(originalElementScrollTo, this, arguments)
+    }
+    if (getPositionLockTarget() !== null) {
+      recordPositionLockBlock()
+      return
+    }
+    if (!pageWin.__ophelScrollLockEnabled) {
+      return Reflect.apply(originalElementScrollTo, this, arguments)
+    }
+
+    let targetY: number | undefined
+    if (typeof optionsOrX === "object" && optionsOrX !== null) {
+      targetY = optionsOrX.top
+    } else if (typeof y === "number") {
+      targetY = y
+    }
+
+    const currentScrollTop = this.scrollTop || 0
+
+    if (typeof targetY === "number" && targetY > currentScrollTop + 50) {
+      return
+    }
+
+    return Reflect.apply(originalElementScrollTo, this, arguments)
+  }
+
+  // 5. 劫持 Element.prototype.scroll（scrollTo 的别名）
+  const originalElementScroll = PageElement.prototype.scroll
+  PageElement.prototype.scroll = function (
+    this: Element,
+    optionsOrX?: ScrollToOptions | number,
+    y?: number,
+  ) {
+    // 纯水平滚动（仅设置 left，无 top），直接放行
+    if (typeof optionsOrX === "object" && optionsOrX !== null) {
+      if (optionsOrX.left !== undefined && optionsOrX.top === undefined) {
+        return Reflect.apply(originalElementScroll, this, arguments)
+      }
+    }
+    // 水平滚动容器直接放行
+    if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
+      return Reflect.apply(originalElementScroll, this, arguments)
+    }
+    if (getPositionLockTarget() !== null) {
+      recordPositionLockBlock()
+      return
+    }
+    if (!pageWin.__ophelScrollLockEnabled) {
+      return Reflect.apply(originalElementScroll, this, arguments)
+    }
+
+    let targetY: number | undefined
+    if (typeof optionsOrX === "object" && optionsOrX !== null) {
+      targetY = optionsOrX.top
+    } else if (typeof y === "number") {
+      targetY = y
+    }
+
+    const currentScrollTop = this.scrollTop || 0
+
+    if (typeof targetY === "number" && targetY > currentScrollTop + 50) {
+      return
+    }
+
+    return Reflect.apply(originalElementScroll, this, arguments)
+  }
+
+  // 6. 劫持 Element.prototype.scrollBy（相对滚动方法）
+  const originalElementScrollBy = PageElement.prototype.scrollBy
+  PageElement.prototype.scrollBy = function (
+    this: Element,
+    optionsOrX?: ScrollToOptions | number,
+    y?: number,
+  ) {
+    // 纯水平滚动（仅设置 left，无 top），直接放行
+    if (typeof optionsOrX === "object" && optionsOrX !== null) {
+      if (optionsOrX.left !== undefined && optionsOrX.top === undefined) {
+        return Reflect.apply(originalElementScrollBy, this, arguments)
+      }
+    }
+    // 水平滚动容器直接放行
+    if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
+      return Reflect.apply(originalElementScrollBy, this, arguments)
+    }
+    if (getPositionLockTarget() !== null) {
+      recordPositionLockBlock()
+      return
+    }
+    if (!pageWin.__ophelScrollLockEnabled) {
+      return Reflect.apply(originalElementScrollBy, this, arguments)
+    }
+
+    let deltaY: number | undefined
+    if (typeof optionsOrX === "object" && optionsOrX !== null) {
+      deltaY = optionsOrX.top
+    } else if (typeof y === "number") {
+      deltaY = y
+    }
+
+    if (typeof deltaY === "number" && deltaY > 50) {
+      return
+    }
+
+    return Reflect.apply(originalElementScrollBy, this, arguments)
+  }
+
+  // 监听来自 ScrollLockManager 的 postMessage 消息（启用/禁用劫持）
+  // 油猴脚本中 ScrollLockManager 通过 sandbox 的 window.postMessage 发送，
+  // pageWin 上的 listener 能接收到（共享同一消息通道）
+  pageWin.addEventListener("message", (event: MessageEvent) => {
+    if (event.data?.type === "OPHEL_SCROLL_LOCK_TOGGLE") {
+      pageWin.__ophelScrollLockEnabled = event.data.enabled
+    }
+  })
+
+  // 7. 劫持 scrollIntoViewIfNeeded（Chrome 专有 API）
+  // 仅在精确位置锁期间拦截，不影响常规 Scroll Lock 功能
+  const pageElementPrototype = PageElement.prototype as ElementWithScrollIntoViewIfNeeded
+  if (typeof pageElementPrototype.scrollIntoViewIfNeeded === "function") {
+    const originalScrollIntoViewIfNeeded = pageElementPrototype.scrollIntoViewIfNeeded
+    pageElementPrototype.scrollIntoViewIfNeeded = function (centerIfNeeded?: boolean) {
+      if (getPositionLockTarget() !== null) {
+        recordPositionLockBlock()
+        return
+      }
+      return originalScrollIntoViewIfNeeded.call(this, centerIfNeeded)
+    }
+  }
+}
diff --git a/src/core/webdav-sync.ts b/src/core/webdav-sync.ts
index acba8d8df..5350de55d 100644
--- a/src/core/webdav-sync.ts
+++ b/src/core/webdav-sync.ts
@@ -9,6 +9,31 @@ import { validateBackupData } from "~utils/backup-validator"
 import { APP_NAME } from "~utils/config"
 import { MSG_WEBDAV_REQUEST } from "~utils/messaging"
 
+interface GMWebDAVResponse {
+  status: number
+  statusText: string
+  responseText: string
+  responseHeaders?: string
+}
+
+interface GMWebDAVError {
+  statusText?: string
+}
+
+declare function GM_xmlhttpRequest(details: {
+  method: string
+  url: string
+  headers?: Record<string, string>
+  data?: string
+  onload: (response: GMWebDAVResponse) => void
+  onerror: (error: GMWebDAVError) => void
+  ontimeout: () => void
+}): void
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null
+}
+
 function safeDecodeURIComponent(str: string) {
   try {
     return decodeURIComponent(str)
@@ -256,7 +281,7 @@ function generateBackupFileName(): string {
 export interface SyncResult {
   success: boolean
   messageKey: string // 国际化键名
-  messageArgs?: Record<string, any> // 消息参数（如错误详情）
+  messageArgs?: Record<string, unknown> // 消息参数（如错误详情）
   timestamp?: number
 }
 
@@ -385,7 +410,7 @@ export class WebDAVSyncManager {
       await this.saveConfig({ lastSyncStatus: "syncing" })
 
       // 获取本地所有数据
-      const localData = await new Promise<Record<string, any>>((resolve) =>
+      const localData = await new Promise<Record<string, unknown>>((resolve) =>
         chrome.storage.local.get(null, resolve),
       )
 
@@ -400,17 +425,18 @@ export class WebDAVSyncManager {
 
             // 处理 Zustand persist 格式：提取 state 中的数据
             // 格式: { state: { settings: {...} | prompts: [...] | conversations: {...} }, version: 0 }
-            if (ZUSTAND_KEYS.includes(k) && parsed?.state) {
+            if (ZUSTAND_KEYS.includes(k) && isRecord(parsed) && isRecord(parsed.state)) {
+              const persistedState = parsed.state
               if (MULTI_PROP_STORES.includes(k)) {
                 // 多属性 store（如 conversations, readingHistory）：保留整个 state
                 // 避免丢失 lastUsedFolderId、lastCleanupRun 等辅助属性
-                parsed = parsed.state
-              } else if (parsed.state[k] !== undefined) {
+                parsed = persistedState
+              } else if (persistedState[k] !== undefined) {
                 // 单属性 store：直接提取 state 中与 key 同名的属性
-                parsed = parsed.state[k]
+                parsed = persistedState[k]
               } else {
                 // 兜底：保留整个 state 内容
-                parsed = parsed.state
+                parsed = persistedState
               }
             }
 
@@ -782,13 +808,12 @@ export class WebDAVSyncManager {
         requestHeaders["Authorization"] = `Basic ${credentials}`
       }
 
-      // @ts-ignore - GM_xmlhttpRequest 是油猴脚本 API
       GM_xmlhttpRequest({
         method,
         url,
         headers: requestHeaders,
         data: body || undefined,
-        onload: (response: any) => {
+        onload: (response) => {
           // 构造一个类 Response 对象返回
           resolve({
             ok: response.status >= 200 && response.status < 300,
@@ -810,7 +835,7 @@ export class WebDAVSyncManager {
             },
           } as unknown as Response)
         },
-        onerror: (error: any) => {
+        onerror: (error) => {
           reject(new Error(error.statusText || "GM_xmlhttpRequest failed"))
         },
         ontimeout: () => {
diff --git a/src/hooks/useShortcuts.ts b/src/hooks/useShortcuts.ts
index 1b66f8dc7..e4d78a1cf 100644
--- a/src/hooks/useShortcuts.ts
+++ b/src/hooks/useShortcuts.ts
@@ -711,7 +711,7 @@ export function useShortcuts({
           showToast(t("noClaudeKeys"), 2000)
         } else {
           // 尝试翻译错误信息，如果没有翻译则显示原始错误
-          const translatedError = t(result.error as any)
+          const translatedError = t(result.error || "operationFailed")
           showToast(
             translatedError !== result.error
               ? translatedError
diff --git a/src/platform/userscript/chrome-adapter-polyfill.ts b/src/platform/userscript/chrome-adapter-polyfill.ts
deleted file mode 100644
index e4888760b..000000000
--- a/src/platform/userscript/chrome-adapter-polyfill.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Chrome Storage 适配器 Polyfill for Userscript
- *
- * 在 Userscript 构建时通过 Vite alias 替换 chrome-adapter.ts
- * 提供与原 chromeStorageAdapter 兼容的 API，使用 GM_* 实现
- */
-
-import type { StateStorage } from "zustand/middleware"
-
-// GM API 类型声明
-declare function GM_getValue<T>(key: string, defaultValue?: T): T
-declare function GM_setValue(key: string, value: unknown): void
-declare function GM_deleteValue(key: string): void
-
-// 确认 polyfill 被加载
-
-/**
- * 油猴脚本存储适配器
- * 用于 Zustand persist 中间件
- */
-export const chromeStorageAdapter: StateStorage = {
-  getItem: async (name: string): Promise<string | null> => {
-    const value = GM_getValue(name)
-    if (value === undefined || value === null) {
-      return null
-    }
-    // GM_getValue 返回的可能是对象或字符串
-    const result = typeof value === "string" ? value : JSON.stringify(value)
-    return result
-  },
-
-  setItem: async (name: string, value: string): Promise<void> => {
-    // Zustand persist 传入的是 JSON 字符串，直接存储
-    GM_setValue(name, value)
-  },
-
-  removeItem: async (name: string): Promise<void> => {
-    GM_deleteValue(name)
-  },
-}
diff --git a/src/platform/userscript/index.ts b/src/platform/userscript/index.ts
index bfefbda96..283dce404 100644
--- a/src/platform/userscript/index.ts
+++ b/src/platform/userscript/index.ts
@@ -5,6 +5,7 @@
  */
 
 import { t } from "~utils/i18n"
+import type { ClaudeSessionKey, ClaudeSessionKeysState } from "~utils/storage"
 
 import type {
   FetchOptions,
@@ -52,6 +53,11 @@ declare function GM_notification(details: {
   onclick?: () => void
 }): void
 
+interface PersistedClaudeSessionKeys {
+  state: ClaudeSessionKeysState
+  version?: number
+}
+
 /**
  * 油猴版存储实现
  */
@@ -119,7 +125,7 @@ export const platform: Platform = {
                   url,
                   method: options?.method || "GET",
                   headers: options?.headers,
-                  responseType: "blob" as any,
+                  responseType: "blob",
                   onload(blobResponse) {
                     res(blobResponse.response as Blob)
                   },
@@ -275,7 +281,7 @@ export const platform: Platform = {
     try {
       // 1. 从 GM 存储读取 claudeSessionKeys
       // Zustand persist 存储结构: { state: { keys: [], currentKeyId: "" }, version: 0 }
-      const storageData = GM_getValue("claudeSessionKeys") as any
+      const storageData = GM_getValue<PersistedClaudeSessionKeys | undefined>("claudeSessionKeys")
       const rawKeys = storageData?.state?.keys || []
 
       if (rawKeys.length === 0) {
@@ -285,7 +291,7 @@ export const platform: Platform = {
       const currentId = storageData?.state?.currentKeyId
 
       // 2. 筛选可用 Keys 并排序 (Pro 优先)
-      let availableKeys = rawKeys.filter((k: any) => k.isValid !== false)
+      let availableKeys: ClaudeSessionKey[] = rawKeys.filter((key) => key.isValid !== false)
 
       // 如果没有可用 Key，尝试使用所有 Key
       if (availableKeys.length === 0) {
@@ -293,7 +299,7 @@ export const platform: Platform = {
       }
 
       // 排序: Pro 优先，然后是名称
-      availableKeys.sort((a: any, b: any) => {
+      availableKeys.sort((a, b) => {
         const isAPro = a.accountType?.toLowerCase()?.includes("pro")
         const isBPro = b.accountType?.toLowerCase()?.includes("pro")
         if (isAPro && !isBPro) return -1
@@ -302,7 +308,7 @@ export const platform: Platform = {
       })
 
       // 3. 找到下一个 Key
-      const currentIndex = availableKeys.findIndex((k: any) => k.id === currentId)
+      const currentIndex = availableKeys.findIndex((key) => key.id === currentId)
 
       // 如果只有一个 Key 且当前正在使用它，则不执行切换
       if (availableKeys.length === 1 && currentIndex !== -1) {
diff --git a/src/platform/userscript/scroll-lock-inject.ts b/src/platform/userscript/scroll-lock-inject.ts
index e0ea8a80e..2e869284f 100644
--- a/src/platform/userscript/scroll-lock-inject.ts
+++ b/src/platform/userscript/scroll-lock-inject.ts
@@ -1,320 +1,20 @@
 /**
- * 油猴脚本版滚动锁定注入
+ * Userscript 滚动锁桥接。
  *
- * 等效于 src/contents/scroll-lock-main.ts 的功能
- * 通过 unsafeWindow 直接劫持页面的滚动 API
- *
- * 在浏览器扩展中，scroll-lock-main.ts 作为独立的 MAIN World content script
- * 在 document_start 时注入，劫持 scrollIntoView、scrollTo 等 API
- *
- * 油猴脚本没有 Plasmo 的 world: "MAIN" 机制，因此通过 unsafeWindow 实现等效功能
- * 注意：油猴脚本 run-at 为 document-idle（较晚），但主要用例（AI 流式输出时的滚动拦截）
- * 发生在页面加载后，因此时机上仍然有效
+ * 油猴没有 Plasmo MAIN world，通过 unsafeWindow 把共享运行时安装到页面上下文。
  */
 
+import { installScrollLockRuntime } from "~core/scroll-lock-runtime"
+
 declare const unsafeWindow: Window & typeof globalThis
 
-/**
- * 获取页面的真实 window 对象
- * 油猴脚本环境使用 unsafeWindow 访问页面主世界
- */
-function getPageWindow(): any {
+function getPageWindow(): Window & typeof globalThis {
   if (typeof unsafeWindow !== "undefined" && unsafeWindow !== window) {
     return unsafeWindow
   }
   return window
 }
 
-/**
- * 注入滚动锁定 API 劫持到页面主世界
- * 逻辑与 src/contents/scroll-lock-main.ts 保持一致
- */
 export function injectScrollLock(): void {
-  const pageWin = getPageWindow()
-
-  // 防止重复初始化（与扩展版共享同一标志）
-  if (pageWin.__ophelScrollLockInitialized) return
-  pageWin.__ophelScrollLockInitialized = true
-
-  const PageElement = pageWin.Element
-  const PageHTMLElement = pageWin.HTMLElement
-
-  // 保存原始 API
-  const originalApis = {
-    scrollIntoView: PageElement.prototype.scrollIntoView,
-    scrollTo: pageWin.scrollTo.bind(pageWin),
-    scrollTopDescriptor:
-      Object.getOwnPropertyDescriptor(PageElement.prototype, "scrollTop") ||
-      Object.getOwnPropertyDescriptor(PageHTMLElement.prototype, "scrollTop"),
-  }
-
-  pageWin.__ophelOriginalApis = originalApis
-  pageWin.__ophelScrollLockEnabled = false
-
-  // 精确位置锁：通过 DOM 属性实现同步通信
-  // 与扩展版一致，读取 document.documentElement.dataset.ophelPositionLock
-  function getPositionLockTarget(): number | null {
-    const attr = document.documentElement.dataset.ophelPositionLock
-    if (attr !== undefined) {
-      const val = Number(attr)
-      if (!isNaN(val)) return val
-    }
-    return null
-  }
-
-  function recordPositionLockBlock() {
-    document.documentElement.dataset.ophelPositionLockLastBlock = String(Date.now())
-  }
-
-  // 1. 劫持 Element.prototype.scrollIntoView
-  PageElement.prototype.scrollIntoView = function (options?: boolean | ScrollIntoViewOptions) {
-    const shouldBypass = options && typeof options === "object" && (options as any).__bypassLock
-    const posLock = getPositionLockTarget()
-    if (posLock !== null) {
-      if (shouldBypass) {
-        return originalApis.scrollIntoView.call(this, options as any)
-      }
-      // 水平容器内的元素不影响主页垂直滤动，逆辑放行
-      let el: Element | null = this.parentElement
-      while (el) {
-        if (el.scrollWidth > el.clientWidth && el.scrollHeight <= el.clientHeight + 10) {
-          return originalApis.scrollIntoView.call(this, options as any)
-        }
-        el = el.parentElement
-      }
-      recordPositionLockBlock()
-      return
-    }
-
-    // 快速路径：锁未激活则直接调用原始 API
-    if (!pageWin.__ophelScrollLockEnabled) {
-      return originalApis.scrollIntoView.call(this, options as any)
-    }
-
-    // scrollLock 已启用：水平容器内的元素直接放行
-    let el: Element | null = this.parentElement
-    while (el) {
-      if (el.scrollWidth > el.clientWidth && el.scrollHeight <= el.clientHeight + 10) {
-        return originalApis.scrollIntoView.call(this, options as any)
-      }
-      el = el.parentElement
-    }
-
-    if (!shouldBypass) {
-      return
-    }
-
-    return originalApis.scrollIntoView.call(this, options as any)
-  }
-
-  // 2. 劫持 window.scrollTo
-  pageWin.scrollTo = function (x?: ScrollToOptions | number, y?: number) {
-    if (getPositionLockTarget() !== null) {
-      recordPositionLockBlock()
-      return
-    }
-    if (!pageWin.__ophelScrollLockEnabled) {
-      return originalApis.scrollTo.apply(pageWin, arguments as any)
-    }
-
-    let targetY: number | undefined
-    if (typeof x === "object" && x !== null) {
-      targetY = x.top
-    } else {
-      targetY = y
-    }
-
-    if (typeof targetY === "number" && targetY > pageWin.scrollY + 50) {
-      return
-    }
-
-    return originalApis.scrollTo.apply(pageWin, arguments as any)
-  }
-
-  // 3. 劫持 scrollTop setter
-  if (originalApis.scrollTopDescriptor) {
-    const descriptor = originalApis.scrollTopDescriptor
-    Object.defineProperty(PageElement.prototype, "scrollTop", {
-      get: function () {
-        return descriptor.get ? descriptor.get.call(this) : 0
-      },
-      set: function (value: number) {
-        // 水平滚动容器（如图片轮播）：直接放行
-        if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
-          if (descriptor.set) descriptor.set.call(this, value)
-          return
-        }
-        const lockTarget = getPositionLockTarget()
-        if (lockTarget !== null) {
-          if (Math.abs(value - lockTarget) > 10) {
-            recordPositionLockBlock()
-            if (descriptor.set) descriptor.set.call(this, lockTarget)
-            return
-          }
-          if (descriptor.set) descriptor.set.call(this, value)
-          return
-        }
-        if (!pageWin.__ophelScrollLockEnabled) {
-          if (descriptor.set) {
-            descriptor.set.call(this, value)
-          }
-          return
-        }
-
-        const currentScrollTop = descriptor.get ? descriptor.get.call(this) : 0
-
-        if (value > currentScrollTop + 50) {
-          return
-        }
-
-        if (descriptor.set) {
-          descriptor.set.call(this, value)
-        }
-      },
-      configurable: true,
-    })
-  }
-
-  // 4. 劫持 Element.prototype.scrollTo（元素级滚动方法）
-  const originalElementScrollTo = PageElement.prototype.scrollTo
-  PageElement.prototype.scrollTo = function (
-    this: Element,
-    optionsOrX?: ScrollToOptions | number,
-    y?: number,
-  ) {
-    // 纯水平滚动（仅设置 left，无 top），直接放行
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      if (optionsOrX.left !== undefined && optionsOrX.top === undefined) {
-        return originalElementScrollTo.apply(this, arguments as any)
-      }
-    }
-    // 水平滚动容器直接放行
-    if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
-      return originalElementScrollTo.apply(this, arguments as any)
-    }
-    if (getPositionLockTarget() !== null) {
-      recordPositionLockBlock()
-      return
-    }
-    if (!pageWin.__ophelScrollLockEnabled) {
-      return originalElementScrollTo.apply(this, arguments as any)
-    }
-
-    let targetY: number | undefined
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      targetY = optionsOrX.top
-    } else if (typeof y === "number") {
-      targetY = y
-    }
-
-    const currentScrollTop = this.scrollTop || 0
-
-    if (typeof targetY === "number" && targetY > currentScrollTop + 50) {
-      return
-    }
-
-    return originalElementScrollTo.apply(this, arguments as any)
-  }
-
-  // 5. 劫持 Element.prototype.scroll（scrollTo 的别名）
-  const originalElementScroll = PageElement.prototype.scroll
-  PageElement.prototype.scroll = function (
-    this: Element,
-    optionsOrX?: ScrollToOptions | number,
-    y?: number,
-  ) {
-    // 纯水平滚动（仅设置 left，无 top），直接放行
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      if (optionsOrX.left !== undefined && optionsOrX.top === undefined) {
-        return originalElementScroll.apply(this, arguments as any)
-      }
-    }
-    // 水平滚动容器直接放行
-    if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
-      return originalElementScroll.apply(this, arguments as any)
-    }
-    if (getPositionLockTarget() !== null) {
-      recordPositionLockBlock()
-      return
-    }
-    if (!pageWin.__ophelScrollLockEnabled) {
-      return originalElementScroll.apply(this, arguments as any)
-    }
-
-    let targetY: number | undefined
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      targetY = optionsOrX.top
-    } else if (typeof y === "number") {
-      targetY = y
-    }
-
-    const currentScrollTop = this.scrollTop || 0
-
-    if (typeof targetY === "number" && targetY > currentScrollTop + 50) {
-      return
-    }
-
-    return originalElementScroll.apply(this, arguments as any)
-  }
-
-  // 6. 劫持 Element.prototype.scrollBy（相对滚动方法）
-  const originalElementScrollBy = PageElement.prototype.scrollBy
-  PageElement.prototype.scrollBy = function (
-    this: Element,
-    optionsOrX?: ScrollToOptions | number,
-    y?: number,
-  ) {
-    // 纯水平滚动（仅设置 left，无 top），直接放行
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      if (optionsOrX.left !== undefined && optionsOrX.top === undefined) {
-        return originalElementScrollBy.apply(this, arguments as any)
-      }
-    }
-    // 水平滚动容器直接放行
-    if (this.scrollWidth > this.clientWidth && this.scrollHeight <= this.clientHeight + 10) {
-      return originalElementScrollBy.apply(this, arguments as any)
-    }
-    if (getPositionLockTarget() !== null) {
-      recordPositionLockBlock()
-      return
-    }
-    if (!pageWin.__ophelScrollLockEnabled) {
-      return originalElementScrollBy.apply(this, arguments as any)
-    }
-
-    let deltaY: number | undefined
-    if (typeof optionsOrX === "object" && optionsOrX !== null) {
-      deltaY = optionsOrX.top
-    } else if (typeof y === "number") {
-      deltaY = y
-    }
-
-    if (typeof deltaY === "number" && deltaY > 50) {
-      return
-    }
-
-    return originalElementScrollBy.apply(this, arguments as any)
-  }
-
-  // 监听来自 ScrollLockManager 的 postMessage 消息（启用/禁用劫持）
-  // 油猴脚本中 ScrollLockManager 通过 sandbox 的 window.postMessage 发送，
-  // pageWin 上的 listener 能接收到（共享同一消息通道）
-  pageWin.addEventListener("message", (event: MessageEvent) => {
-    if (event.data?.type === "OPHEL_SCROLL_LOCK_TOGGLE") {
-      pageWin.__ophelScrollLockEnabled = event.data.enabled
-    }
-  })
-
-  // 7. 劫持 scrollIntoViewIfNeeded（Chrome 专有 API）
-  // 仅在精确位置锁期间拦截，不影响常规 Scroll Lock 功能
-  if (typeof PageElement.prototype.scrollIntoViewIfNeeded === "function") {
-    const originalScrollIntoViewIfNeeded = PageElement.prototype.scrollIntoViewIfNeeded
-    PageElement.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded?: boolean) {
-      if (getPositionLockTarget() !== null) {
-        recordPositionLockBlock()
-        return
-      }
-      return originalScrollIntoViewIfNeeded.call(this, centerIfNeeded)
-    }
-  }
+  installScrollLockRuntime(getPageWindow())
 }
diff --git a/src/tabs/options/components/SafeCodeEditor.tsx b/src/tabs/options/components/SafeCodeEditor.tsx
index 8d0a194ad..efac4ce08 100644
--- a/src/tabs/options/components/SafeCodeEditor.tsx
+++ b/src/tabs/options/components/SafeCodeEditor.tsx
@@ -70,6 +70,7 @@ export class SafeCodeEditor extends Component<SafeCodeEditorProps, SafeCodeEdito
       )
     }
 
-    return <Editor {...(this.props as any)} />
+    const { fallbackPlaceholder: _fallbackPlaceholder, ...editorProps } = this.props
+    return <Editor {...(editorProps as BaseEditorProps)} />
   }
 }
diff --git a/src/tabs/options/pages/ClaudeSettings.tsx b/src/tabs/options/pages/ClaudeSettings.tsx
index 0c16453a6..cc638b320 100644
--- a/src/tabs/options/pages/ClaudeSettings.tsx
+++ b/src/tabs/options/pages/ClaudeSettings.tsx
@@ -23,6 +23,7 @@ import {
   sendToBackground,
 } from "~utils/messaging"
 import { showToast } from "~utils/toast"
+import type { ClaudeSessionKey } from "~utils/storage"
 
 import { SettingCard } from "../components"
 
@@ -30,6 +31,17 @@ interface ClaudeSettingsProps {
   siteId: string
 }
 
+function isClaudeSessionKey(value: unknown): value is ClaudeSessionKey {
+  if (typeof value !== "object" || value === null) return false
+  const key = value as Record<string, unknown>
+  return (
+    typeof key.id === "string" &&
+    typeof key.name === "string" &&
+    typeof key.key === "string" &&
+    typeof key.createdAt === "number"
+  )
+}
+
 // 对话框状态类型
 type DialogState =
   | { type: "none" }
@@ -315,7 +327,7 @@ const ClaudeSettings: React.FC<ClaudeSettingsProps> = ({ siteId }) => {
         }
 
         const existingKeys = new Set(keys.map((k) => k.key))
-        const newKeys = imported.filter((k: any) => !existingKeys.has(k.key))
+        const newKeys = imported.filter(isClaudeSessionKey).filter((k) => !existingKeys.has(k.key))
 
         if (newKeys.length === 0) {
           showToast(t("claudeNoNewTokens"), TOAST_DURATION.SHORT)
diff --git a/src/tabs/options/pages/index.ts b/src/tabs/options/pages/index.ts
deleted file mode 100644
index 9899aa708..000000000
--- a/src/tabs/options/pages/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Options Page 页面组件导出
- */
-export { default as GeneralPage } from "./GeneralPage"
-export { default as AppearancePage } from "./AppearancePage"
-export { default as FeaturesPage } from "./FeaturesPage"
-export { default as BackupPage } from "./BackupPage"
-export { default as AboutPage } from "./AboutPage"
-export { default as SiteSettingsPage } from "./SiteSettingsPage"
diff --git a/src/utils/dom-toolkit.ts b/src/utils/dom-toolkit.ts
index 2f0b05044..7dc09cfb4 100644
--- a/src/utils/dom-toolkit.ts
+++ b/src/utils/dom-toolkit.ts
@@ -921,22 +921,25 @@ class DOMToolkitClass {
   /**
    * 创建 DOM 元素
    */
-  create(tag: string, attributes: Record<string, any> = {}, textContent = ""): HTMLElement {
+  create(tag: string, attributes: Record<string, unknown> = {}, textContent = ""): HTMLElement {
     const element = this.doc.createElement(tag)
 
     for (const [key, value] of Object.entries(attributes)) {
       if (key === "className") {
-        element.className = value
-      } else if (key === "style" && typeof value === "object") {
+        element.className = String(value)
+      } else if (key === "style" && typeof value === "object" && value !== null) {
         Object.assign(element.style, value)
       } else if (key === "style") {
-        element.setAttribute("style", value)
-      } else if (key === "dataset" && typeof value === "object") {
+        element.setAttribute("style", String(value))
+      } else if (key === "dataset" && typeof value === "object" && value !== null) {
         Object.assign(element.dataset, value)
       } else if (key.startsWith("on") && typeof value === "function") {
-        element.addEventListener(key.slice(2).toLowerCase(), value)
+        element.addEventListener(
+          key.slice(2).toLowerCase(),
+          value as EventListenerOrEventListenerObject,
+        )
       } else {
-        element.setAttribute(key, value)
+        element.setAttribute(key, String(value))
       }
     }
 
diff --git a/src/utils/messaging.ts b/src/utils/messaging.ts
index c72805c6c..aa1c163dd 100644
--- a/src/utils/messaging.ts
+++ b/src/utils/messaging.ts
@@ -247,15 +247,19 @@ export interface AIStudioModelsResponse {
 }
 
 interface BackgroundResponseMap {
+  [MSG_PROXY_FETCH]: BasicBackgroundResponse & { data?: string | ArrayBuffer | null }
   [MSG_CHECK_PERMISSION]: PermissionCheckResponse
   [MSG_CHECK_PERMISSIONS]: PermissionCheckResponse
   [MSG_REQUEST_PERMISSIONS]: BasicBackgroundResponse
+  [MSG_REVOKE_PERMISSIONS]: BasicBackgroundResponse & { removed?: boolean }
   [MSG_CHECK_CLAUDE_GENERATING]: CheckClaudeGeneratingResponse
   [MSG_GET_AISTUDIO_MODELS]: AIStudioModelsResponse
 }
 
 type BackgroundResponseFor<T extends ExtensionMessage> =
-  T["type"] extends keyof BackgroundResponseMap ? BackgroundResponseMap[T["type"]] : any
+  T["type"] extends keyof BackgroundResponseMap
+    ? BackgroundResponseMap[T["type"]]
+    : BasicBackgroundResponse
 
 /**
  * Send a message to the background service worker with type safety
@@ -324,5 +328,5 @@ export interface GeminiMyStuffCachePayload {
 
 export interface WindowMessage {
   type: string
-  payload?: any
+  payload?: unknown
 }
diff --git a/src/utils/scroll-helper.ts b/src/utils/scroll-helper.ts
index 7324879bc..18087e848 100644
--- a/src/utils/scroll-helper.ts
+++ b/src/utils/scroll-helper.ts
@@ -10,6 +10,9 @@
 
 import type { SiteAdapter } from "~adapters/base"
 
+type ScrollToOptionsWithBypass = ScrollToOptions & { __bypassLock: boolean }
+type FlutterScrollProxy = HTMLElement & { __isFlutterProxy?: boolean }
+
 // 平台检测
 declare const __PLATFORM__: "extension" | "userscript" | undefined
 const isUserscript = typeof __PLATFORM__ !== "undefined" && __PLATFORM__ === "userscript"
@@ -202,11 +205,12 @@ export async function smartScrollToTop(adapter: SiteAdapter | null): Promise<{
     const scrollHeight = container.scrollHeight
 
     const isReverse = isColumnReverseScrollContainer(adapter, container)
-    container.scrollTo({
+    const options: ScrollToOptionsWithBypass = {
       top: getTopScrollPosition(container, isReverse),
       behavior: "instant",
-      ...{ __bypassLock: true },
-    } as any)
+      __bypassLock: true,
+    }
+    container.scrollTo(options)
 
     return { container, previousScrollTop, scrollHeight }
   }
@@ -243,11 +247,12 @@ export async function smartScrollToBottom(adapter: SiteAdapter | null): Promise<
     const previousScrollTop = container.scrollTop
 
     const isReverse = isColumnReverseScrollContainer(adapter, container)
-    container.scrollTo({
+    const options: ScrollToOptionsWithBypass = {
       top: getBottomScrollPosition(container, isReverse),
       behavior: "instant",
-      ...{ __bypassLock: true },
-    } as any)
+      __bypassLock: true,
+    }
+    container.scrollTo(options)
 
     return { container, previousScrollTop }
   }
@@ -276,17 +281,23 @@ export async function smartScrollTo(
   const container = adapter?.getScrollContainer()
 
   if (container && container.scrollHeight > container.clientHeight) {
-    container.scrollTo({ top: position, behavior: "instant", ...{ __bypassLock: true } } as any)
+    const options: ScrollToOptionsWithBypass = {
+      top: position,
+      behavior: "instant",
+      __bypassLock: true,
+    }
+    container.scrollTo(options)
     syncPositionLock(container.scrollTop)
     return { success: true, currentScrollTop: container.scrollTop }
   }
 
   // 最终回退
-  document.documentElement.scrollTo({
+  const fallbackOptions: ScrollToOptionsWithBypass = {
     top: position,
     behavior: "instant",
-    ...{ __bypassLock: true },
-  } as any)
+    __bypassLock: true,
+  }
+  document.documentElement.scrollTo(fallbackOptions)
   syncPositionLock(document.documentElement.scrollTop)
   return { success: true, currentScrollTop: document.documentElement.scrollTop }
 }
@@ -359,5 +370,5 @@ function createFlutterScrollProxy(): HTMLElement {
  * 检查容器是否是 Flutter 代理
  */
 export function isFlutterProxy(container: HTMLElement): boolean {
-  return (container as any).__isFlutterProxy === true
+  return (container as FlutterScrollProxy).__isFlutterProxy === true
 }

From c52ef070d7fe0795942b94f0c523c98ca3883fa6 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 17:41:24 +0800
Subject: [PATCH 08/17] test(audit): cover search backup and bundle budgets

---
 package.json                                |  1 +
 scripts/check-bundle-budget.mjs             | 92 +++++++++++++++++++++
 src/components/global-search/syntax.test.ts | 65 +++++++++++++++
 src/constants/ui.test.ts                    | 44 ++++++++++
 src/utils/backup-validator.test.ts          | 46 +++++++++++
 5 files changed, 248 insertions(+)
 create mode 100644 scripts/check-bundle-budget.mjs
 create mode 100644 src/components/global-search/syntax.test.ts
 create mode 100644 src/constants/ui.test.ts
 create mode 100644 src/utils/backup-validator.test.ts

diff --git a/package.json b/package.json
index 0a5ab6364..37f5acb77 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "test": "vitest",
     "test:run": "vitest run",
     "check:theme-tokens": "node scripts/check-theme-tokens.mjs",
+    "check:bundle-budget": "node scripts/check-bundle-budget.mjs",
     "build": "pnpm prepare:mermaid-assets && plasmo build",
     "build:firefox": "pnpm prepare:mermaid-assets && plasmo build --target=firefox-mv3",
     "build:all": "pnpm build && pnpm build:firefox",
diff --git a/scripts/check-bundle-budget.mjs b/scripts/check-bundle-budget.mjs
new file mode 100644
index 000000000..5b2e03567
--- /dev/null
+++ b/scripts/check-bundle-budget.mjs
@@ -0,0 +1,92 @@
+import fs from "node:fs"
+import path from "node:path"
+import process from "node:process"
+import { gzipSync } from "node:zlib"
+
+const rootDir = process.cwd()
+const chromeBuildDir = path.join(rootDir, "build", "chrome-mv3-prod")
+const userscriptFile = path.join(rootDir, "build", "userscript", "ophel.user.js")
+
+const AUDIT_CONTENT_ENTRY_BASELINE_RAW = 7_494_836
+const MINIMUM_CONTENT_ENTRY_REDUCTION = 0.4
+const budgets = {
+  contentEntries: { raw: 4_100_000, gzip: 1_150_000 },
+  userscript: { raw: 2_100_000, gzip: 550_000 },
+}
+
+function formatBytes(bytes) {
+  return `${(bytes / 1024).toFixed(1)} KiB`
+}
+
+function readRequiredFile(filePath) {
+  if (!fs.existsSync(filePath)) {
+    throw new Error(`Missing build artifact: ${path.relative(rootDir, filePath)}`)
+  }
+  return fs.readFileSync(filePath)
+}
+
+function findSingleFile(directory, pattern, label) {
+  if (!fs.existsSync(directory)) {
+    throw new Error(`Missing build directory: ${path.relative(rootDir, directory)}`)
+  }
+
+  const matches = fs.readdirSync(directory).filter((fileName) => pattern.test(fileName))
+  if (matches.length !== 1) {
+    throw new Error(`Expected one ${label} artifact, found ${matches.length}`)
+  }
+  return path.join(directory, matches[0])
+}
+
+function measure(filePath) {
+  const content = readRequiredFile(filePath)
+  return {
+    filePath,
+    raw: content.byteLength,
+    gzip: gzipSync(content, { level: 9 }).byteLength,
+  }
+}
+
+function assertBudget(label, measurement, budget) {
+  const failures = []
+  if (measurement.raw > budget.raw) {
+    failures.push(`raw ${formatBytes(measurement.raw)} > ${formatBytes(budget.raw)}`)
+  }
+  if (measurement.gzip > budget.gzip) {
+    failures.push(`gzip ${formatBytes(measurement.gzip)} > ${formatBytes(budget.gzip)}`)
+  }
+  if (failures.length > 0) {
+    throw new Error(`${label} exceeds bundle budget: ${failures.join(", ")}`)
+  }
+}
+
+try {
+  const main = measure(findSingleFile(chromeBuildDir, /^main\.[^.]+\.js$/, "main content entry"))
+  const uiEntry = measure(
+    findSingleFile(chromeBuildDir, /^ui-entry\.[^.]+\.js$/, "UI content entry"),
+  )
+  const userscript = measure(userscriptFile)
+  const contentEntries = {
+    raw: main.raw + uiEntry.raw,
+    gzip: main.gzip + uiEntry.gzip,
+  }
+
+  assertBudget("Extension content entries", contentEntries, budgets.contentEntries)
+  assertBudget("Userscript", userscript, budgets.userscript)
+
+  const reduction = 1 - contentEntries.raw / AUDIT_CONTENT_ENTRY_BASELINE_RAW
+  if (reduction < MINIMUM_CONTENT_ENTRY_REDUCTION) {
+    throw new Error(
+      `Content entry reduction ${(reduction * 100).toFixed(1)}% is below ${(MINIMUM_CONTENT_ENTRY_REDUCTION * 100).toFixed(0)}%`,
+    )
+  }
+
+  console.log(
+    `[bundle-budget] content entries ${formatBytes(contentEntries.raw)} raw / ${formatBytes(contentEntries.gzip)} gzip (${(reduction * 100).toFixed(1)}% below audit baseline)`,
+  )
+  console.log(
+    `[bundle-budget] userscript ${formatBytes(userscript.raw)} raw / ${formatBytes(userscript.gzip)} gzip`,
+  )
+} catch (error) {
+  console.error(`[bundle-budget] ${error instanceof Error ? error.message : String(error)}`)
+  process.exit(1)
+}
diff --git a/src/components/global-search/syntax.test.ts b/src/components/global-search/syntax.test.ts
new file mode 100644
index 000000000..a25d7a67e
--- /dev/null
+++ b/src/components/global-search/syntax.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest"
+
+import { matchGlobalSearchSyntaxFilters, parseGlobalSearchQuery } from "./syntax"
+
+describe("global search syntax", () => {
+  it("parses quoted filters while preserving the plain query", () => {
+    const parsed = parseGlobalSearchQuery(
+      'release notes type:settings folder:"Product Research" tag:important date:30d',
+    )
+
+    expect(parsed.plainQuery).toBe("release notes")
+    expect(parsed.filters.map(({ key, value }) => ({ key, value }))).toEqual([
+      { key: "type", value: "settings" },
+      { key: "folder", value: "Product Research" },
+      { key: "tag", value: "important" },
+      { key: "date", value: "30d" },
+    ])
+    expect(parsed.diagnostics).toEqual([])
+  })
+
+  it("reports invalid and conflicting filters without hiding the plain query", () => {
+    const parsed = parseGlobalSearchQuery(
+      "roadmap typo:settings type:prompts type:settings level:9",
+    )
+
+    expect(parsed.plainQuery).toBe("roadmap typo:settings")
+    expect(parsed.filters).toHaveLength(1)
+    expect(parsed.filters[0]).toMatchObject({ key: "type", normalizedValue: "prompts" })
+    expect(parsed.diagnostics.map((diagnostic) => diagnostic.code)).toEqual([
+      "unknownOperator",
+      "conflict",
+      "invalidValue",
+    ])
+  })
+
+  it("matches category-specific metadata filters", () => {
+    const outlineFilters = parseGlobalSearchQuery(
+      'folder:"Product Research" tag:important is:pinned level:2',
+    ).filters
+
+    expect(
+      matchGlobalSearchSyntaxFilters(
+        {
+          category: "outline",
+          folderName: "Product Research",
+          tagNames: ["Important"],
+          isPinned: true,
+          outlineTarget: { level: 2 },
+        },
+        outlineFilters,
+      ),
+    ).toBe(true)
+
+    const conversationFilters = parseGlobalSearchQuery("date:7d").filters
+    expect(
+      matchGlobalSearchSyntaxFilters(
+        {
+          category: "conversations",
+          searchTimestamp: Date.now() - 2 * 24 * 60 * 60 * 1000,
+        },
+        conversationFilters,
+      ),
+    ).toBe(true)
+  })
+})
diff --git a/src/constants/ui.test.ts b/src/constants/ui.test.ts
new file mode 100644
index 000000000..dddf5eede
--- /dev/null
+++ b/src/constants/ui.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest"
+
+import { APPEARANCE_TAB_IDS, FEATURES_TAB_IDS, NAV_IDS, resolveSettingsNavigateDetail } from "./ui"
+
+describe("settings deep links", () => {
+  it("resolves legacy setting aliases to the canonical page and tab", () => {
+    expect(
+      resolveSettingsNavigateDetail({
+        settingId: "features.outline.preventAutoScroll",
+      }),
+    ).toEqual({
+      page: NAV_IDS.FEATURES,
+      subTab: FEATURES_TAB_IDS.OUTLINE,
+      settingId: "outline-prevent-auto-scroll",
+    })
+  })
+
+  it("routes global-search and appearance settings to their shared navigation pages", () => {
+    expect(resolveSettingsNavigateDetail({ settingId: "globalSearch.enableFuzzySearch" })).toEqual({
+      page: NAV_IDS.GLOBAL_SEARCH,
+      subTab: undefined,
+      settingId: "global-search-fuzzy-search",
+    })
+
+    expect(resolveSettingsNavigateDetail({ settingId: "appearance.presets.dark" })).toEqual({
+      page: NAV_IDS.APPEARANCE,
+      subTab: APPEARANCE_TAB_IDS.PRESETS,
+      settingId: "appearance-preset-dark",
+    })
+  })
+
+  it("keeps an explicit page override without leaking an unrelated inferred tab", () => {
+    expect(
+      resolveSettingsNavigateDetail({
+        page: NAV_IDS.ABOUT,
+        settingId: "outline-auto-update",
+      }),
+    ).toEqual({
+      page: NAV_IDS.ABOUT,
+      subTab: undefined,
+      settingId: "outline-auto-update",
+    })
+  })
+})
diff --git a/src/utils/backup-validator.test.ts b/src/utils/backup-validator.test.ts
new file mode 100644
index 000000000..5eac8178a
--- /dev/null
+++ b/src/utils/backup-validator.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest"
+
+import { validateBackupData } from "./backup-validator"
+
+describe("validateBackupData", () => {
+  it("accepts the current flat version 3 backup schema", () => {
+    expect(
+      validateBackupData({
+        version: 3,
+        timestamp: "2026-07-10T00:00:00.000Z",
+        data: {
+          settings: { language: "en" },
+          prompts: [],
+          promptChains: [],
+          folders: [],
+          conversations: { conversations: {}, lastUsedFolderId: "inbox" },
+          readingHistory: { history: {}, lastCleanupRun: 0 },
+        },
+      }),
+    ).toEqual({ valid: true, errorKeys: [] })
+  })
+
+  it("keeps legacy prompt-chain persist envelopes compatible", () => {
+    const legacyPayloads = [{ chains: [] }, { state: { chains: [] }, version: 0 }]
+
+    legacyPayloads.forEach((promptChains) => {
+      expect(
+        validateBackupData({
+          version: 1,
+          data: { promptChains },
+        }),
+      ).toEqual({ valid: true, errorKeys: [] })
+    })
+  })
+
+  it("rejects missing envelopes and incompatible store payloads", () => {
+    expect(validateBackupData({ data: { prompts: {} } })).toEqual({
+      valid: false,
+      errorKeys: ["backupValidationMissingVersion", "backupValidationPromptsType"],
+    })
+    expect(validateBackupData(null)).toEqual({
+      valid: false,
+      errorKeys: ["backupValidationInvalidFormat"],
+    })
+  })
+})

From e54e6a4747261581c9b83f3072b5efb238a54f6a Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 18:07:59 +0800
Subject: [PATCH 09/17] refactor(ui): split panel controller boundaries

---
 src/components/App.tsx                        | 120 +--
 src/components/MainPanel.tsx                  | 111 +--
 src/components/OutlineTab.tsx                 | 482 +---------
 src/components/PromptsTab.tsx                 | 824 +-----------------
 src/components/app/ExtensionUpdateNotice.tsx  |  62 ++
 src/components/app/useAppRuntimeManagers.ts   |  73 ++
 .../outline/VirtualizedOutlineTree.tsx        | 478 ++++++++++
 src/components/panel/PanelWorkspace.tsx       | 140 +++
 src/components/prompts/chain-editor-styles.ts | 822 +++++++++++++++++
 9 files changed, 1626 insertions(+), 1486 deletions(-)
 create mode 100644 src/components/app/ExtensionUpdateNotice.tsx
 create mode 100644 src/components/app/useAppRuntimeManagers.ts
 create mode 100644 src/components/outline/VirtualizedOutlineTree.tsx
 create mode 100644 src/components/panel/PanelWorkspace.tsx
 create mode 100644 src/components/prompts/chain-editor-styles.ts

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 9797264ae..a5551f36f 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -10,16 +10,13 @@ import React, {
 import type { SiteAdapter } from "~adapters/base"
 import { SITE_IDS } from "~constants/defaults"
 import {
-  ConversationManager,
-  type ConversationExportProgress,
   type ConversationExportStage,
   type ConversationSegmentedExportDraft,
   type ConversationSegmentedExportMode,
 } from "~core/conversation-manager"
 import { InlineBookmarkManager } from "~core/inline-bookmark-manager"
-import { OutlineManager, type OutlineNode } from "~core/outline-manager"
-import { AI_STUDIO_SHORTCUT_SYNC_EVENT, PromptManager } from "~core/prompt-manager"
-import { QueueDispatcher } from "~core/queue-dispatcher"
+import type { OutlineNode } from "~core/outline-manager"
+import { AI_STUDIO_SHORTCUT_SYNC_EVENT } from "~core/prompt-manager"
 import { QuickQuoteActions } from "~components/QuickQuoteActions"
 import { ensureGlobalThemeManager, type ThemeTransitionOrigin } from "~core/theme-manager"
 import { useEdgePeekController } from "~hooks/useEdgePeekController"
@@ -61,6 +58,8 @@ import { QuickButtons } from "./QuickButtons"
 import { SelectedPromptBar } from "./SelectedPromptBar"
 import { SegmentedExportDialog } from "./SegmentedExportDialog"
 import { SettingsModal } from "./SettingsModal"
+import { ExtensionUpdateNotice } from "./app/ExtensionUpdateNotice"
+import { useAppRuntimeManagers } from "./app/useAppRuntimeManagers"
 import { GlobalSearchOverlay } from "./global-search/GlobalSearchOverlay"
 import { GlobalSearchResultItemView } from "./global-search/GlobalSearchResultItemView"
 import {
@@ -409,61 +408,8 @@ export const App: React.FC<AppProps> = ({ adapter }) => {
     [getLocalizedText, getPageLabel, getSubTabLabel],
   )
 
-  const promptManager = useMemo(() => {
-    return adapter ? new PromptManager(adapter) : null
-  }, [adapter])
-
-  const queueDispatcher = useMemo(() => {
-    return adapter && promptManager ? new QueueDispatcher(adapter, promptManager) : null
-  }, [adapter, promptManager])
-
-  // QueueDispatcher lifecycle
-  useEffect(() => {
-    if (!queueDispatcher) return
-    const isQueueEnabled = settings?.features?.prompts?.promptQueue ?? false
-    if (isQueueEnabled) {
-      queueDispatcher.start()
-    } else {
-      queueDispatcher.stop()
-    }
-    return () => queueDispatcher.stop()
-  }, [queueDispatcher, settings?.features?.prompts?.promptQueue])
-
-  const conversationManager = useMemo(() => {
-    return adapter ? new ConversationManager(adapter) : null
-  }, [adapter])
-  const [exportProgress, setExportProgress] = useState<ConversationExportProgress | null>(null)
-
-  useEffect(() => {
-    if (!conversationManager) {
-      setExportProgress(null)
-      return
-    }
-
-    setExportProgress(null)
-    return conversationManager.onExportProgress(setExportProgress)
-  }, [conversationManager])
-
-  const outlineManager = useMemo(() => {
-    if (!adapter) return null
-
-    // 使用 Zustand 的 updateDeepSetting
-    const handleExpandLevelChange = (level: number) => {
-      updateDeepSetting("features", "outline", "expandLevel", level)
-    }
-
-    const handleShowUserQueriesChange = (show: boolean) => {
-      updateDeepSetting("features", "outline", "showUserQueries", show)
-    }
-
-    return new OutlineManager(
-      adapter,
-      settings?.features?.outline ?? DEFAULT_SETTINGS.features.outline,
-      handleExpandLevelChange,
-      handleShowUserQueriesChange,
-    )
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- 只在 adapter 变化时重新创建
-  }, [adapter, updateDeepSetting])
+  const { promptManager, queueDispatcher, conversationManager, outlineManager, exportProgress } =
+    useAppRuntimeManagers({ adapter, settings, updateDeepSetting })
 
   // 面板展开状态：true 表示面板没有收进快捷按钮组，和悬浮/吸附模式无关
   const [isPanelExpanded, setIsPanelExpandedState] = useState(false)
@@ -3132,10 +3078,6 @@ export const App: React.FC<AppProps> = ({ adapter }) => {
     />
   )
 
-  if (!adapter || !promptManager || !conversationManager || !outlineManager) {
-    return null
-  }
-
   const edgeTriggerMode = settings?.panel?.edgeTriggerMode ?? DEFAULT_SETTINGS.panel.edgeTriggerMode
   const shouldRenderEdgeHoverZone =
     isPanelExpanded &&
@@ -3569,48 +3511,14 @@ export const App: React.FC<AppProps> = ({ adapter }) => {
         blockPageInteraction
       />
       {showExtensionUpdateNotice && (
-        <section className="gh-update-notice gh-interactive" role="status" aria-live="polite">
-          <button
-            type="button"
-            className="gh-update-notice-close"
-            aria-label={extensionUpdateCloseLabel}
-            onClick={handleDismissExtensionUpdateNotice}>
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-              strokeLinejoin="round">
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
-          </button>
-          <div className="gh-update-notice-kicker">
-            <svg
-              className="gh-update-notice-icon"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-              strokeLinejoin="round">
-              <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
-            </svg>
-            {extensionUpdateKickerText}
-          </div>
-          <p className="gh-update-notice-message">{extensionUpdateDescription}</p>
-          <div className="gh-update-notice-actions">
-            <button
-              type="button"
-              className="gh-update-notice-button gh-update-notice-button--primary"
-              onClick={handleReloadAfterExtensionUpdate}>
-              {extensionUpdateActionLabel}
-            </button>
-          </div>
-        </section>
+        <ExtensionUpdateNotice
+          kicker={extensionUpdateKickerText}
+          description={extensionUpdateDescription}
+          actionLabel={extensionUpdateActionLabel}
+          closeLabel={extensionUpdateCloseLabel}
+          onReload={handleReloadAfterExtensionUpdate}
+          onDismiss={handleDismissExtensionUpdateNotice}
+        />
       )}
       <DisclaimerModal />
     </div>
diff --git a/src/components/MainPanel.tsx b/src/components/MainPanel.tsx
index f33912b58..f06f44658 100644
--- a/src/components/MainPanel.tsx
+++ b/src/components/MainPanel.tsx
@@ -11,13 +11,10 @@ import React, {
 import type { SiteAdapter } from "~adapters/base"
 import {
   AnchorIcon,
-  ConversationIcon,
   DragIcon,
   FloatingModeIcon,
   MinimizeIcon,
   NewTabIcon,
-  OutlineIcon,
-  PromptIcon,
   // RefreshIcon, (刷新按钮已注释掉)
   ScrollBottomIcon,
   ScrollTopIcon,
@@ -46,10 +43,8 @@ import { showToast } from "~utils/toast"
 import { OPHEL_FONT_FAMILY_CSS_VAR } from "~utils/font"
 import { anchorStore } from "~stores/anchor-store"
 
-import { ConversationsTab } from "./ConversationsTab"
 import { LoadingOverlay } from "./LoadingOverlay"
-import { OutlineTab } from "./OutlineTab"
-import { PromptsTab } from "./PromptsTab"
+import { PanelWorkspace } from "./panel/PanelWorkspace"
 import { Tooltip } from "~components/ui/Tooltip"
 
 interface MainPanelProps {
@@ -1483,83 +1478,33 @@ export const MainPanel: React.FC<MainPanelProps> = ({
             {t("tip1", { modifier: isMacOS() ? "⌘ Cmd" : "Ctrl" })}
           </span>
         </div>
-        <div className="gh-panel-tabs" role="tablist" aria-label={t("panelTitle")}>
-          {visibleTabs.map((tab) => {
-            let IconComp: React.FC<{ size?: number }> | null = null
-            if (tab === TAB_IDS.OUTLINE) IconComp = OutlineIcon
-            else if (tab === TAB_IDS.PROMPTS) IconComp = PromptIcon
-            else if (tab === TAB_IDS.CONVERSATIONS) IconComp = ConversationIcon
-
-            return (
-              <button
-                type="button"
-                key={tab}
-                id={`gh-panel-tab-${tab}`}
-                role="tab"
-                draggable={canDragPanelTabs}
-                aria-selected={activeTab === tab}
-                aria-controls={`gh-panel-tabpanel-${tab}`}
-                aria-grabbed={draggedPanelTab === tab}
-                className={`gh-panel-tab-btn ${activeTab === tab ? "active" : ""} ${canDragPanelTabs ? "is-draggable" : ""} ${draggedPanelTab === tab ? "is-dragging" : ""} ${dragOverPanelTab === tab ? "is-drag-over" : ""}`}
-                data-tip-target={
-                  tab === TAB_IDS.OUTLINE
-                    ? "outline-tab"
-                    : tab === TAB_IDS.CONVERSATIONS
-                      ? "conversations-tab"
-                      : tab === TAB_IDS.PROMPTS
-                        ? "prompts-tab"
-                        : undefined
-                }
-                onClick={() => handlePanelTabClick(tab)}
-                onKeyDown={(event) => handlePanelTabKeyDown(event, tab)}
-                onDragStart={(event) => handlePanelTabDragStart(event, tab)}
-                onDragOver={(event) => handlePanelTabDragOver(event, tab)}
-                onDragEnter={(event) => handlePanelTabDragOver(event, tab)}
-                onDragLeave={() => {
-                  if (dragOverPanelTab === tab) {
-                    setDragOverPanelTab(null)
-                  }
-                }}
-                onDrop={(event) => handlePanelTabDrop(event, tab)}
-                onDragEnd={resetPanelTabDragState}>
-                <span className="gh-panel-tab-btn-icon">{IconComp && <IconComp size={16} />}</span>
-                <span className="gh-panel-tab-btn-label">
-                  {t(`tab${tab.charAt(0).toUpperCase() + tab.slice(1)}`)}
-                </span>
-              </button>
-            )
-          })}
-        </div>
-
-        {/* Content - 内容区 */}
-        <div
-          id={`gh-panel-tabpanel-${activeTab}`}
-          className="gh-panel-content"
-          role="tabpanel"
-          aria-labelledby={`gh-panel-tab-${activeTab}`}>
-          {activeTab === TAB_IDS.PROMPTS && (
-            <PromptsTab
-              manager={promptManager}
-              adapter={adapter}
-              selectedPromptId={selectedPromptId}
-              onPromptSelect={onPromptSelect}
-            />
-          )}
-          {activeTab === TAB_IDS.CONVERSATIONS && (
-            <ConversationsTab
-              manager={conversationManager}
-              onInteractionStateChange={onInteractionStateChange}
-            />
-          )}
-          {activeTab === TAB_IDS.OUTLINE && (
-            <OutlineTab
-              manager={outlineManager}
-              conversationManager={conversationManager}
-              onJumpBefore={saveAnchor}
-              isCodexOpen={showCodex}
-            />
-          )}
-        </div>
+        <PanelWorkspace
+          visibleTabs={visibleTabs}
+          activeTab={activeTab}
+          canDragTabs={canDragPanelTabs}
+          draggedTab={draggedPanelTab}
+          dragOverTab={dragOverPanelTab}
+          promptManager={promptManager}
+          conversationManager={conversationManager}
+          outlineManager={outlineManager}
+          adapter={adapter}
+          selectedPromptId={selectedPromptId}
+          onPromptSelect={onPromptSelect}
+          onInteractionStateChange={onInteractionStateChange}
+          onJumpBefore={saveAnchor}
+          isCodexOpen={showCodex}
+          onTabClick={handlePanelTabClick}
+          onTabKeyDown={handlePanelTabKeyDown}
+          onTabDragStart={handlePanelTabDragStart}
+          onTabDragOver={handlePanelTabDragOver}
+          onTabDragLeave={(tab) => {
+            if (dragOverPanelTab === tab) {
+              setDragOverPanelTab(null)
+            }
+          }}
+          onTabDrop={handlePanelTabDrop}
+          onTabDragEnd={resetPanelTabDragState}
+        />
 
         {/* Footer - 底部固定按钮 */}
         <div className="gh-panel-footer">
diff --git a/src/components/OutlineTab.tsx b/src/components/OutlineTab.tsx
index 6002e11ee..88349bddf 100644
--- a/src/components/OutlineTab.tsx
+++ b/src/components/OutlineTab.tsx
@@ -5,10 +5,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import {
   CheckIcon,
-  ChevronDownIcon,
   ClearIcon,
   CollapseAllIcon,
-  CopyIcon,
   CopyOutlineIcon,
   ExpandAllIcon,
   LocateIcon,
@@ -20,6 +18,13 @@ import {
   UserQueryIcon,
 } from "~components/icons"
 import { Tooltip } from "~components/ui/Tooltip"
+import {
+  buildOutlineVirtualMetrics,
+  flattenVisibleOutlineTree,
+  getOutlineVirtualRange,
+  type OutlineVirtualMetrics,
+  VirtualizedOutlineTree,
+} from "~components/outline/VirtualizedOutlineTree"
 import type { ConversationManager } from "~core/conversation-manager"
 import type { OutlineManager, OutlineNode } from "~core/outline-manager"
 import type { OutlineSource } from "~adapters/base"
@@ -28,8 +33,7 @@ import {
   createOutlineTextFromExportMessages,
   createOutlineTextFromOutlineTree,
 } from "~utils/export-outline"
-import { t, getCurrentLang } from "~utils/i18n"
-import { formatWordCount } from "~utils/format"
+import { t } from "~utils/i18n"
 import { showToast } from "~utils/toast"
 
 interface OutlineTabProps {
@@ -211,17 +215,6 @@ const getConversationCopyHeadingLevel = (expandLevel: number, showUserQueries: b
   return showUserQueries ? expandLevel : Math.max(1, expandLevel)
 }
 
-const OUTLINE_ITEM_LINE_HEIGHT = 24
-const OUTLINE_ITEM_VERTICAL_PADDING = 12
-const OUTLINE_ITEM_VERTICAL_BORDER = 2
-const OUTLINE_ITEM_HEIGHT =
-  OUTLINE_ITEM_LINE_HEIGHT + OUTLINE_ITEM_VERTICAL_PADDING + OUTLINE_ITEM_VERTICAL_BORDER
-const OUTLINE_ROW_GAP = 2
-const OUTLINE_USER_QUERY_TOP_GAP = 2
-const OUTLINE_USER_QUERY_BOTTOM_GAP = 2
-const OUTLINE_VIRTUAL_OVERSCAN = 10
-const OUTLINE_FALLBACK_VIEWPORT_HEIGHT = 420
-const OUTLINE_HEIGHT_DRIFT_TOLERANCE = 1
 const OUTLINE_LOCATE_HIGHLIGHT_MS = 3000
 const OUTLINE_LOCATE_RETRY_DELAY_MS = 50
 const OUTLINE_LOCATE_MAX_RETRIES = Math.ceil(
@@ -238,465 +231,6 @@ type OutlineScrollSnapshot = {
   rangeEnd: number
 }
 
-interface VisibleOutlineItem {
-  node: OutlineNode
-  depth: number
-}
-
-interface OutlineVirtualMetrics {
-  rowOffsets: number[]
-  rowHeights: number[]
-  totalHeight: number
-  itemIndexByNodeIndex: Map<number, number>
-}
-
-const flattenVisibleOutlineTree = (
-  tree: OutlineNode[],
-  visibleMap: Record<number, boolean>,
-): VisibleOutlineItem[] => {
-  const items: VisibleOutlineItem[] = []
-
-  const traverse = (nodes: OutlineNode[], depth: number) => {
-    for (const node of nodes) {
-      if (!(visibleMap[node.index] ?? true)) continue
-
-      items.push({ node, depth })
-
-      if (node.children.length > 0) {
-        traverse(node.children, depth + 1)
-      }
-    }
-  }
-
-  traverse(tree, 0)
-  return items
-}
-
-const getOutlineVirtualRowSpacing = (item: VisibleOutlineItem, rowIndex: number) => {
-  if (item.node.isUserQuery) {
-    return {
-      top: rowIndex === 0 ? 0 : OUTLINE_USER_QUERY_TOP_GAP,
-      bottom: OUTLINE_USER_QUERY_BOTTOM_GAP,
-    }
-  }
-
-  return { top: 0, bottom: OUTLINE_ROW_GAP }
-}
-
-const buildOutlineVirtualMetrics = (items: VisibleOutlineItem[]): OutlineVirtualMetrics => {
-  const rowOffsets: number[] = []
-  const rowHeights: number[] = []
-  const itemIndexByNodeIndex = new Map<number, number>()
-  let totalHeight = 0
-
-  items.forEach((item, index) => {
-    const spacing = getOutlineVirtualRowSpacing(item, index)
-    const rowHeight = OUTLINE_ITEM_HEIGHT + spacing.top + spacing.bottom
-
-    rowOffsets.push(totalHeight)
-    rowHeights.push(rowHeight)
-    itemIndexByNodeIndex.set(item.node.index, index)
-    totalHeight += rowHeight
-  })
-
-  return {
-    rowOffsets,
-    rowHeights,
-    totalHeight,
-    itemIndexByNodeIndex,
-  }
-}
-
-const findOutlineRowAtOffset = (rowOffsets: number[], offset: number): number => {
-  if (rowOffsets.length === 0) return 0
-
-  let low = 0
-  let high = rowOffsets.length - 1
-  let result = 0
-
-  while (low <= high) {
-    const mid = Math.floor((low + high) / 2)
-    if (rowOffsets[mid] <= offset) {
-      result = mid
-      low = mid + 1
-    } else {
-      high = mid - 1
-    }
-  }
-
-  return result
-}
-
-const getOutlineVirtualRange = (
-  metrics: OutlineVirtualMetrics,
-  scrollTop: number,
-  viewportHeight: number,
-) => {
-  const itemCount = metrics.rowOffsets.length
-  if (itemCount === 0) return { start: 0, end: 0 }
-
-  const effectiveViewportHeight = Math.max(viewportHeight, OUTLINE_FALLBACK_VIEWPORT_HEIGHT)
-  const startIndex = findOutlineRowAtOffset(metrics.rowOffsets, Math.max(0, scrollTop))
-  const viewportBottom = scrollTop + effectiveViewportHeight
-  let endIndex = startIndex
-
-  while (endIndex < itemCount && metrics.rowOffsets[endIndex] < viewportBottom) {
-    endIndex += 1
-  }
-
-  return {
-    start: Math.max(0, startIndex - OUTLINE_VIRTUAL_OVERSCAN),
-    end: Math.min(itemCount, endIndex + OUTLINE_VIRTUAL_OVERSCAN),
-  }
-}
-
-const isOutlineVirtualHeightDebugEnabled = (): boolean => {
-  if (typeof document !== "undefined") {
-    const value = document.documentElement.dataset.ophelDebugOutlineVirtualHeights
-    if (value === "true" || value === "1") return true
-  }
-
-  try {
-    return (
-      typeof window !== "undefined" &&
-      window.localStorage?.getItem("ophel.debugOutlineVirtualHeights") === "1"
-    )
-  } catch {
-    return false
-  }
-}
-
-// 单行大纲节点视图。树形可见性由上层 flattenVisibleOutlineTree 统一处理。
-const OutlineNodeView: React.FC<{
-  node: OutlineNode
-  onToggle: (node: OutlineNode) => void
-  onClick: (node: OutlineNode) => void
-  onToggleBookmark: (e: React.MouseEvent, node: OutlineNode) => void
-  setItemRef: (index: number, el: HTMLElement | null) => void
-  searchQuery: string
-  extractUserQueryText?: (element: Element) => string // Used for full text extraction
-}> = ({
-  node,
-  onToggle,
-  onClick,
-  onToggleBookmark,
-  setItemRef,
-  searchQuery,
-  extractUserQueryText,
-}) => {
-  const hasChildren = node.children && node.children.length > 0
-  // Legacy: isExpanded 直接看 hasChildren 和 collapsed，不考虑搜索
-  // 箭头始终显示（只要有子节点），因为用户可能想手动展开查看不匹配的子节点
-  const isExpanded = hasChildren && !node.collapsed
-
-  // ===== 复制处理 (阻止冒泡) =====
-  const [copySuccess, setCopySuccess] = useState(false)
-
-  const handleCopy = async (e: React.MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-
-    // 智能获取文本
-    let textToCopy = node.text
-
-    // 尝试从 DOM 获取完整文本
-    if (node.element && node.element.isConnected) {
-      if (node.isUserQuery && extractUserQueryText) {
-        // 用户提问：使用专门提取逻辑 (处理 <br> 等)
-        const fullText = extractUserQueryText(node.element)
-        if (fullText) textToCopy = fullText
-      } else {
-        // 普通标题：直接取 textContent
-        const fullText = node.element.textContent
-        if (fullText) textToCopy = fullText.trim()
-      }
-    }
-
-    try {
-      // 优先使用 Clipboard API
-      await navigator.clipboard.writeText(textToCopy)
-      setCopySuccess(true)
-      setTimeout(() => setCopySuccess(false), 1500)
-    } catch (err) {
-      console.error("[DEBUG] Clipboard API failed, trying fallback:", err)
-      // 备用方案：使用 execCommand
-      try {
-        const textArea = document.createElement("textarea")
-        textArea.value = textToCopy
-        textArea.style.position = "fixed"
-        textArea.style.left = "-9999px"
-        document.body.appendChild(textArea)
-        textArea.select()
-        document.execCommand("copy")
-        document.body.removeChild(textArea)
-        setCopySuccess(true)
-        setTimeout(() => setCopySuccess(false), 1500)
-      } catch (fallbackErr) {
-        console.error("[DEBUG] Fallback copy also failed:", fallbackErr)
-      }
-    }
-  }
-
-  // ===== 状态控制：鼠标悬停在操作按钮时不显示主 Tooltip =====
-  const [isHoveringAction, setIsHoveringAction] = useState(false)
-
-  // ===== CSS 类名 (Legacy exact) =====
-  const itemClassName = [
-    "outline-item",
-    `outline-level-${node.relativeLevel}`,
-    node.isUserQuery ? "user-query-node" : "",
-    node.isGhost ? "ghost-node" : "", // Add ghost styling class
-  ]
-    .filter(Boolean)
-    .join(" ")
-
-  // ===== 搜索高亮处理 (Legacy: regex split) =====
-  const renderTextWithHighlight = () => {
-    if (searchQuery && node.isMatch) {
-      try {
-        const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-        const regex = new RegExp(`(${escapedQuery})`, "gi")
-        const parts = node.text.split(regex)
-        return (
-          <>
-            {parts.map((part, i) =>
-              part.toLowerCase() === searchQuery.toLowerCase() ? (
-                <mark
-                  key={i}
-                  style={{
-                    backgroundColor: "var(--gh-search-highlight-bg)",
-                    color: "inherit",
-                    padding: 0,
-                    borderRadius: "2px",
-                  }}>
-                  {part}
-                </mark>
-              ) : (
-                part
-              ),
-            )}
-          </>
-        )
-      } catch {
-        return node.text
-      }
-    }
-    return node.text
-  }
-
-  return (
-    <Tooltip
-      content={
-        node.wordCount && node.wordCount > 0 ? (
-          <div>
-            {node.text}
-            <div style={{ fontSize: "12px", opacity: 0.8, marginTop: "2px" }}>
-              ({formatWordCount(node.wordCount, getCurrentLang())} {t("words")})
-            </div>
-          </div>
-        ) : (
-          node.text
-        )
-      }
-      disabled={isHoveringAction}
-      triggerStyle={{ width: "100%", display: "block" }}
-      delay={500}>
-      <div
-        className={itemClassName}
-        data-index={node.index}
-        data-level={node.relativeLevel}
-        ref={(el) => setItemRef(node.index, el)}
-        onClick={() => onClick(node)}>
-        {/* 折叠箭头 (Legacy: ▸) - 使用 hasChildren 显示箭头，允许手动展开 */}
-        <span
-          className={`outline-item-toggle ${hasChildren ? (isExpanded ? "expanded" : "") : "invisible"}`}
-          onClick={(e) => {
-            if (hasChildren) {
-              e.stopPropagation()
-              onToggle(node)
-            }
-          }}>
-          <ChevronDownIcon size={16} style={{ transform: "rotate(-90deg)" }} />
-        </span>
-
-        {/* 用户提问: 徽章 (图标+角标数字) */}
-        {node.isUserQuery && (
-          <span className="user-query-badge">
-            <span className="user-query-badge-icon">💬</span>
-            <span className="user-query-badge-number">{node.queryIndex}</span>
-          </span>
-        )}
-
-        {/* 文字 (带搜索高亮) */}
-        <span className={`outline-item-text ${node.isGhost ? "ghost-text" : ""}`}>
-          {renderTextWithHighlight()}
-        </span>
-
-        {/* Bookmark Button (Hover or Bookmarked) */}
-        <span className={`outline-item-bookmark-wrapper ${node.isBookmarked ? "active" : ""}`}>
-          <Tooltip content={node.isBookmarked ? t("removeBookmark") : t("addBookmark")}>
-            <span
-              className={`outline-item-bookmark-btn ${node.isBookmarked ? "active" : ""}`}
-              onClick={(e) => onToggleBookmark(e, node)}
-              onMouseEnter={() => setIsHoveringAction(true)}
-              onMouseLeave={() => setIsHoveringAction(false)}>
-              <StarIcon
-                size={14}
-                filled={node.isBookmarked}
-                color={node.isBookmarked ? "#f59e0b" : "currentColor"}
-              />
-            </span>
-          </Tooltip>
-        </span>
-
-        {/* 复制按钮 (所有节点显示) */}
-        <Tooltip content={t("copy")}>
-          <span
-            className="outline-item-copy-btn"
-            onClick={handleCopy}
-            onMouseEnter={() => setIsHoveringAction(true)}
-            onMouseLeave={() => setIsHoveringAction(false)}>
-            {copySuccess ? (
-              // 成功对号图标
-              <CheckIcon size={14} color="#10b981" />
-            ) : (
-              // 复制图标
-              <CopyIcon size={14} />
-            )}
-          </span>
-        </Tooltip>
-      </div>
-    </Tooltip>
-  )
-}
-
-const VirtualizedOutlineTree: React.FC<{
-  items: VisibleOutlineItem[]
-  metrics: OutlineVirtualMetrics
-  scrollTop: number
-  viewportHeight: number
-  onToggle: (node: OutlineNode) => void
-  onClick: (node: OutlineNode) => void
-  onToggleBookmark: (e: React.MouseEvent, node: OutlineNode) => void
-  setItemRef: (index: number, el: HTMLElement | null) => void
-  searchQuery: string
-  extractUserQueryText?: (element: Element) => string
-}> = ({
-  items,
-  metrics,
-  scrollTop,
-  viewportHeight,
-  onToggle,
-  onClick,
-  onToggleBookmark,
-  setItemRef,
-  searchQuery,
-  extractUserQueryText,
-}) => {
-  const virtualListRef = useRef<HTMLDivElement>(null)
-  const warnedHeightDriftKeysRef = useRef<Set<string>>(new Set())
-  const range = getOutlineVirtualRange(metrics, scrollTop, viewportHeight)
-  const renderedItems = items.slice(range.start, range.end)
-  const virtualListStyle = {
-    "--gh-outline-item-height": `${OUTLINE_ITEM_HEIGHT}px`,
-    height: metrics.totalHeight,
-    position: "relative",
-  } as React.CSSProperties
-
-  useEffect(() => {
-    if (!isOutlineVirtualHeightDebugEnabled()) return
-
-    const root = virtualListRef.current
-    if (!root) return
-
-    const frame = window.requestAnimationFrame(() => {
-      root.querySelectorAll<HTMLElement>(".outline-virtual-row").forEach((row) => {
-        const item = row.querySelector<HTMLElement>(".outline-item")
-        if (!item) return
-
-        const nodeIndex = item.dataset.index || "unknown"
-        const itemHeight = item.getBoundingClientRect().height
-        const rowHeight = row.getBoundingClientRect().height
-        const expectedRowHeight = Number(row.dataset.expectedRowHeight || OUTLINE_ITEM_HEIGHT)
-        const itemOverflow = item.scrollHeight - item.clientHeight
-        const itemDrift = Math.abs(itemHeight - OUTLINE_ITEM_HEIGHT)
-        const rowDrift = Math.abs(rowHeight - expectedRowHeight)
-
-        if (
-          itemDrift <= OUTLINE_HEIGHT_DRIFT_TOLERANCE &&
-          rowDrift <= OUTLINE_HEIGHT_DRIFT_TOLERANCE &&
-          itemOverflow <= OUTLINE_HEIGHT_DRIFT_TOLERANCE
-        ) {
-          return
-        }
-
-        const warningKey = [
-          nodeIndex,
-          itemHeight.toFixed(2),
-          rowHeight.toFixed(2),
-          expectedRowHeight,
-          itemOverflow,
-        ].join(":")
-        if (warnedHeightDriftKeysRef.current.has(warningKey)) return
-        warnedHeightDriftKeysRef.current.add(warningKey)
-
-        console.warn("[OutlineTab] Virtual outline row height drift", {
-          nodeIndex,
-          nodeKind: row.dataset.nodeKind,
-          itemHeight,
-          expectedItemHeight: OUTLINE_ITEM_HEIGHT,
-          rowHeight,
-          expectedRowHeight,
-          itemOverflow,
-        })
-      })
-    })
-
-    return () => window.cancelAnimationFrame(frame)
-  }, [range.start, range.end, metrics.totalHeight])
-
-  return (
-    <div
-      ref={virtualListRef}
-      className="outline-list outline-list-virtual"
-      style={virtualListStyle}>
-      {renderedItems.map((item, offset) => {
-        const rowIndex = range.start + offset
-        const spacing = getOutlineVirtualRowSpacing(item, rowIndex)
-
-        return (
-          <div
-            key={item.node.index}
-            className="outline-virtual-row"
-            data-depth={item.depth}
-            data-node-kind={item.node.isUserQuery ? "user-query" : "heading"}
-            data-expected-row-height={metrics.rowHeights[rowIndex]}
-            style={{
-              position: "absolute",
-              top: metrics.rowOffsets[rowIndex],
-              left: 0,
-              right: 0,
-              height: metrics.rowHeights[rowIndex],
-              paddingTop: spacing.top,
-              paddingBottom: spacing.bottom,
-              boxSizing: "border-box",
-            }}>
-            <OutlineNodeView
-              node={item.node}
-              onToggle={onToggle}
-              onClick={onClick}
-              onToggleBookmark={onToggleBookmark}
-              setItemRef={setItemRef}
-              searchQuery={searchQuery}
-              extractUserQueryText={extractUserQueryText}
-            />
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
 export const OutlineTab: React.FC<OutlineTabProps> = ({
   manager,
   conversationManager,
diff --git a/src/components/PromptsTab.tsx b/src/components/PromptsTab.tsx
index d28c9bf41..b639f74f3 100644
--- a/src/components/PromptsTab.tsx
+++ b/src/components/PromptsTab.tsx
@@ -34,6 +34,7 @@ import { ChainIconPicker } from "~components/ChainIconPicker"
 import { ImportDialog } from "~components/prompts/ImportDialog"
 import { PromptEditorDialog } from "~components/prompts/PromptEditorDialog"
 import { PromptPreviewModal } from "~components/prompts/PromptPreviewModal"
+import { CHAIN_EDITOR_PORTAL_STYLES } from "~components/prompts/chain-editor-styles"
 import { usePromptDragSort } from "~components/prompts/usePromptDragSort"
 import { VIRTUAL_CATEGORY } from "~constants"
 import { CHAIN_ICON_PRESETS } from "~constants/chain-icons"
@@ -80,829 +81,6 @@ type ChainDraft = Omit<PromptChain, "id" | "createdAt" | "updatedAt"> & {
   id?: string
 }
 
-const CHAIN_EDITOR_PORTAL_STYLES = `
-.gh-chain-editor {
-  width: min(680px, 92vw);
-  max-height: 86vh;
-  padding: 0 !important;
-  border-radius: 12px;
-  background: var(--gh-bg, #ffffff);
-  color: var(--gh-text, #1f2937);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  box-shadow: var(--gh-shadow-lg, 0 20px 50px rgba(0, 0, 0, 0.3));
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: slideUp 0.25s ease-out;
-}
-
-.gh-chain-editor-header,
-.gh-chain-editor-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 16px 18px;
-  border-bottom: 1px solid var(--gh-border, #e5e7eb);
-}
-
-.gh-chain-editor-footer {
-  justify-content: flex-end;
-  border-top: 1px solid var(--gh-border, #e5e7eb);
-  border-bottom: none;
-}
-
-.gh-chain-editor-title {
-  color: var(--gh-text, #1f2937);
-  font-size: 16px;
-  font-weight: 650;
-}
-
-.gh-chain-editor-subtitle,
-.gh-chain-section-subtitle,
-.gh-chain-field-help {
-  color: var(--gh-text-tertiary, #9ca3af);
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.gh-chain-editor-close {
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 6px;
-  background: var(--gh-hover, #f3f4f6);
-  color: var(--gh-text-secondary, #6b7280);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.gh-chain-editor-scroll {
-  min-height: 0;
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 18px;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--gh-text-tertiary, #9ca3af) 64%, transparent)
-    transparent;
-}
-
-.gh-chain-editor-scroll::-webkit-scrollbar {
-  width: 10px;
-}
-
-.gh-chain-editor-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.gh-chain-editor-scroll::-webkit-scrollbar-thumb {
-  min-height: 42px;
-  border: 3px solid transparent;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--gh-text-tertiary, #9ca3af) 56%, transparent);
-  background-clip: content-box;
-}
-
-.gh-chain-editor-scroll::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--gh-text-secondary, #6b7280) 72%, transparent);
-  background-clip: content-box;
-}
-
-.gh-chain-form-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 12px;
-}
-
-.gh-chain-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 14px;
-  color: var(--gh-text, #374151);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.gh-chain-field input,
-.gh-chain-field textarea,
-.gh-chain-step-row select {
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--gh-input-border, #d1d5db);
-  border-radius: 7px;
-  background: var(--gh-input-bg, var(--gh-bg, #ffffff));
-  color: var(--gh-text, #1f2937);
-  font: inherit;
-  font-size: 13px;
-  outline: none;
-}
-
-.gh-chain-field input,
-.gh-chain-step-row select {
-  height: 34px;
-  padding: 0 10px;
-}
-
-.gh-chain-field textarea {
-  min-height: 74px;
-  padding: 8px 10px;
-  resize: vertical;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.gh-chain-field input:focus,
-.gh-chain-field textarea:focus,
-.gh-chain-step-row select:focus {
-  border-color: var(--gh-primary, #4285f4);
-  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.12);
-}
-
-.gh-chain-icon-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.gh-chain-visibility-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  max-width: 100%;
-  padding: 5px 8px 5px 6px;
-  border: 1px solid var(--gh-border, #e5e7eb);
-  border-radius: 999px;
-  background: var(--gh-bg-secondary, #f9fafb);
-  color: var(--gh-text, #374151);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.gh-chain-visibility-toggle input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.gh-chain-visibility-switch {
-  position: relative;
-  width: 28px;
-  height: 16px;
-  flex: 0 0 28px;
-  border-radius: 999px;
-  background: var(--gh-border, #d1d5db);
-  transition: background 0.16s;
-}
-
-.gh-chain-visibility-switch::after {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #ffffff;
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
-  transition: transform 0.16s;
-}
-
-.gh-chain-visibility-toggle input:checked + .gh-chain-visibility-switch {
-  background: var(--gh-primary, #4285f4);
-}
-
-.gh-chain-visibility-toggle input:checked + .gh-chain-visibility-switch::after {
-  transform: translateX(12px);
-}
-
-.gh-chain-visibility-toggle-text {
-  min-width: 0;
-  line-height: 1.25;
-}
-
-.gh-chain-icon-control-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.gh-chain-icon-preview {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-height: 44px;
-  padding: 10px 14px;
-  box-sizing: border-box;
-  border: 1px solid var(--gh-border, #e5e7eb);
-  border-radius: 8px;
-  background: var(--gh-bg-secondary, #f9fafb);
-  color: var(--gh-text-secondary, #6b7280);
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.gh-chain-icon-preview.empty {
-  color: var(--gh-text-tertiary, #9ca3af);
-  font-weight: 400;
-}
-
-.gh-chain-icon-preview-svg {
-  width: 22px;
-  height: 22px;
-  flex: 0 0 22px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.gh-chain-icon-preview-svg svg {
-  width: 22px;
-  height: 22px;
-}
-
-.gh-chain-icon-select-btn {
-  min-height: 44px;
-  padding: 0 18px;
-  border: 1px solid var(--gh-border, #e5e7eb);
-  border-radius: 8px;
-  background: var(--gh-bg, #ffffff);
-  color: var(--gh-primary, #3b82f6);
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  transition:
-    background 0.16s,
-    border-color 0.16s;
-}
-
-.gh-chain-icon-select-btn:hover {
-  border-color: var(--gh-primary, #3b82f6);
-  background: var(--gh-primary-light, #eff6ff);
-}
-
-.gh-chain-editor-section {
-  margin-top: 14px;
-  padding-top: 14px;
-  border-top: 1px solid var(--gh-border, #e5e7eb);
-}
-
-.gh-chain-queue-gate {
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: 10px;
-  margin: 0 0 12px;
-  padding: 12px;
-  border: 1px solid color-mix(in srgb, var(--gh-primary, #4285f4) 22%, var(--gh-border, #e5e7eb));
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--gh-primary, #4285f4) 7%, var(--gh-bg, #ffffff));
-}
-
-.gh-chain-queue-gate.editor {
-  margin-bottom: 14px;
-}
-
-.gh-chain-queue-gate-copy {
-  min-width: 0;
-  width: 100%;
-}
-
-.gh-chain-queue-gate-title {
-  color: var(--gh-text, #111827);
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.3;
-}
-
-.gh-chain-queue-gate-description {
-  margin-top: 3px;
-  color: var(--gh-text-secondary, #6b7280);
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.gh-chain-queue-gate-actions {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.gh-chain-section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.gh-chain-section-title {
-  color: var(--gh-text, #1f2937);
-  font-size: 13px;
-  font-weight: 650;
-}
-
-.gh-chain-step-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.gh-chain-step-row {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 14px;
-  border: 1px solid var(--gh-border, #e5e7eb);
-  border-radius: 10px;
-  background: var(--gh-bg, #ffffff);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  transition: all 0.2s ease;
-}
-
-.gh-chain-step-row:hover {
-  border-color: var(--gh-border-hover, #d1d5db);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-}
-
-.gh-chain-step-row.dragging {
-  opacity: 0.5;
-  cursor: grabbing;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.gh-chain-step-header-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-.gh-chain-step-drag-handle {
-  width: 16px;
-  height: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--gh-text-tertiary, #c5c8cc);
-  cursor: grab;
-  flex-shrink: 0;
-  transition: color 0.15s;
-}
-
-.gh-chain-step-drag-handle:hover {
-  color: var(--gh-text-secondary, #6b7280);
-}
-
-.gh-chain-step-row.dragging .gh-chain-step-drag-handle {
-  cursor: grabbing;
-}
-
-.gh-chain-step-index {
-  width: 22px;
-  height: 22px;
-  border-radius: 6px;
-  background: var(--gh-primary, #4285f4);
-  color: #ffffff;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.gh-chain-step-mode-switch {
-  display: flex;
-  padding: 2px;
-  border-radius: 7px;
-  background: var(--gh-bg-secondary, #f3f4f6);
-  border: 1px solid var(--gh-border, #e5e7eb);
-  gap: 0;
-  flex: 0 0 auto;
-}
-
-.gh-chain-step-mode-btn {
-  padding: 4px 10px;
-  border: none;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--gh-text-tertiary, #9ca3af);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-  line-height: 1.4;
-}
-
-.gh-chain-step-mode-btn:hover {
-  color: var(--gh-text-secondary, #6b7280);
-}
-
-.gh-chain-step-mode-btn.active {
-  background: var(--gh-bg, #ffffff);
-  color: var(--gh-text, #1f2937);
-  font-weight: 600;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.gh-chain-step-delete-btn {
-  width: 28px;
-  height: 28px;
-  margin-left: auto;
-  flex-shrink: 0;
-  border-radius: 7px;
-  border: none;
-  background: transparent;
-  color: var(--gh-text-tertiary, #d1d5db);
-  opacity: 0;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  position: relative;
-}
-
-.gh-chain-step-row:hover .gh-chain-step-delete-btn {
-  opacity: 1;
-}
-
-.gh-chain-step-delete-btn:hover {
-  background: rgba(254, 226, 226, 1);
-  color: var(--gh-text-danger, #ef4444);
-  transform: scale(1.05);
-}
-
-.gh-chain-step-delete-btn:active {
-  transform: scale(0.95);
-  background: rgba(254, 202, 202, 1);
-}
-
-.gh-chain-step-delete-btn svg {
-  width: 16px;
-  height: 16px;
-  stroke-width: 2.5;
-}
-
-.gh-chain-step-input-row {
-  width: 100%;
-}
-
-.gh-chain-step-inline-input {
-  width: 100%;
-  box-sizing: border-box;
-  min-height: 80px;
-  padding: 10px 12px;
-  border: 1px solid var(--gh-border, #e5e7eb);
-  border-radius: 8px;
-  background: var(--gh-bg-secondary, #f9fafb);
-  color: var(--gh-text, #1f2937);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.55;
-  resize: vertical;
-  outline: none;
-  transition: all 0.15s;
-}
-
-.gh-chain-step-inline-input:focus {
-  border-color: var(--gh-primary, #4285f4);
-  background: var(--gh-bg, #ffffff);
-  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.08);
-}
-
-.gh-chain-step-inline-input::placeholder {
-  color: var(--gh-text-tertiary, #9ca3af);
-}
-
-.gh-chain-step-prompt-select {
-  width: 100%;
-  height: 36px;
-  padding: 0 10px;
-  border: 1px solid var(--gh-border, #e5e7eb);
-  border-radius: 8px;
-  background: var(--gh-bg-secondary, #f9fafb);
-  color: var(--gh-text, #1f2937);
-  font-size: 13px;
-  outline: none;
-  transition: all 0.15s;
-  cursor: pointer;
-}
-
-.gh-chain-step-prompt-select:focus {
-  border-color: var(--gh-primary, #4285f4);
-  background: var(--gh-bg, #ffffff);
-  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.08);
-}
-
-.gh-chain-step-actions {
-  display: flex;
-  gap: 2px;
-}
-
-.gh-chain-step-empty {
-  padding: 20px;
-  border: 1.5px dashed var(--gh-border, #d1d5db);
-  border-radius: 10px;
-  color: var(--gh-text-tertiary, #9ca3af);
-  font-size: 13px;
-  text-align: center;
-}
-
-.gh-chain-variable-preview {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 8px;
-}
-
-.gh-chain-variable-chip,
-.gh-chain-variable-muted {
-  padding: 4px 7px;
-  border-radius: 999px;
-  font-size: 12px;
-  line-height: 1.25;
-}
-
-.gh-chain-variable-chip {
-  border: 1px solid rgba(66, 133, 244, 0.25);
-  background: rgba(66, 133, 244, 0.08);
-  color: var(--gh-primary, #4285f4);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-}
-
-.gh-chain-variable-chip.custom {
-  border-color: var(--gh-border, #e5e7eb);
-  background: var(--gh-bg-secondary, #f9fafb);
-  color: var(--gh-text-secondary, #6b7280);
-}
-
-.gh-chain-variable-muted {
-  color: var(--gh-text-tertiary, #9ca3af);
-}
-
-.gh-chain-preview-section {
-  position: relative;
-}
-
-.gh-chain-preview-toggle {
-  padding: 5px 12px;
-  border: 1px solid var(--gh-border, #e5e7eb);
-  border-radius: 6px;
-  background: var(--gh-bg, #ffffff);
-  color: var(--gh-text-secondary, #6b7280);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.gh-chain-preview-toggle:hover {
-  background: var(--gh-hover, #f3f4f6);
-  color: var(--gh-text, #1f2937);
-}
-
-.gh-chain-preview-nav-float {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 12px;
-  margin: 12px 0 0;
-  border-radius: 8px;
-  background: var(--gh-bg, rgba(255, 255, 255, 0.92));
-  backdrop-filter: blur(8px);
-  border: 1px solid var(--gh-border, #e5e7eb);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  flex-wrap: wrap;
-}
-
-.gh-chain-preview-nav-label {
-  color: var(--gh-text-tertiary, #9ca3af);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-right: 4px;
-  flex-shrink: 0;
-}
-
-.gh-chain-preview-nav-btn {
-  min-width: 28px;
-  height: 26px;
-  padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--gh-text-secondary, #6b7280);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.15s;
-  gap: 4px;
-  max-width: 140px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.gh-chain-preview-nav-btn:hover {
-  background: rgba(66, 133, 244, 0.08);
-  color: var(--gh-primary, #4285f4);
-}
-
-.gh-chain-preview-nav-btn .nav-btn-num {
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  background: var(--gh-bg-secondary, #f3f4f6);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 700;
-}
-
-.gh-chain-preview-nav-btn .nav-btn-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-}
-
-.gh-chain-preview-nav-btn:hover .nav-btn-num {
-  background: rgba(66, 133, 244, 0.15);
-  color: var(--gh-primary, #4285f4);
-}
-
-.gh-chain-preview-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: 8px;
-  padding-bottom: 4px;
-}
-
-.gh-chain-preview-step {
-  border: 1px solid var(--gh-border, #e5e7eb);
-  border-radius: 10px;
-  overflow: hidden;
-  background: var(--gh-bg, #ffffff);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  transition: box-shadow 0.15s;
-}
-
-.gh-chain-preview-step:hover {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-}
-
-.gh-chain-preview-step-header {
-  padding: 10px 14px;
-  background: var(--gh-bg-secondary, #f9fafb);
-  border-bottom: 1px solid var(--gh-border, #e5e7eb);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.gh-chain-preview-step-number {
-  width: 22px;
-  height: 22px;
-  border-radius: 6px;
-  background: var(--gh-primary, #4285f4);
-  color: #ffffff;
-  font-size: 11px;
-  font-weight: 700;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.gh-chain-preview-step-title {
-  color: var(--gh-text, #1f2937);
-  font-size: 13px;
-  font-weight: 600;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.gh-chain-preview-step-body {
-  padding: 14px;
-  color: var(--gh-text, #1f2937);
-  font-size: 13px;
-  line-height: 1.6;
-  word-break: break-word;
-  max-height: 360px;
-  overflow-y: auto;
-}
-
-.gh-chain-preview-step-body p {
-  margin: 0 0 0.75em;
-}
-
-.gh-chain-preview-step-body p:last-child {
-  margin-bottom: 0;
-}
-
-.gh-chain-preview-step-body code {
-  padding: 2px 5px;
-  border-radius: 4px;
-  background: var(--gh-bg-secondary, #f3f4f6);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 0.88em;
-}
-
-.gh-chain-preview-step-body pre {
-  margin: 0.75em 0;
-  padding: 12px;
-  border-radius: 8px;
-  background: var(--gh-bg-secondary, #f3f4f6);
-  overflow-x: auto;
-}
-
-.gh-chain-preview-step-body pre code {
-  padding: 0;
-  background: none;
-}
-
-.gh-chain-preview-step-body blockquote {
-  margin: 0.75em 0;
-  padding: 8px 14px;
-  border-left: 3px solid var(--gh-primary, #4285f4);
-  background: rgba(66, 133, 244, 0.04);
-  border-radius: 0 6px 6px 0;
-  color: var(--gh-text-secondary, #6b7280);
-}
-
-.gh-chain-preview-empty {
-  color: var(--gh-text-tertiary, #9ca3af);
-  font-style: italic;
-}
-
-.prompt-action-btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-@media (max-width: 520px) {
-  .gh-chain-form-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .gh-chain-icon-header,
-  .gh-chain-icon-control-row {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .gh-chain-visibility-toggle,
-  .gh-chain-icon-select-btn {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .gh-chain-step-header-row {
-    flex-wrap: wrap;
-  }
-
-  .gh-chain-step-mode-switch {
-    order: 10;
-    width: 100%;
-    margin-top: 4px;
-  }
-
-  .gh-chain-preview-nav-float {
-    position: static;
-    backdrop-filter: none;
-  }
-}
-`
-
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null
 
diff --git a/src/components/app/ExtensionUpdateNotice.tsx b/src/components/app/ExtensionUpdateNotice.tsx
new file mode 100644
index 000000000..7baa0648b
--- /dev/null
+++ b/src/components/app/ExtensionUpdateNotice.tsx
@@ -0,0 +1,62 @@
+import React from "react"
+
+interface ExtensionUpdateNoticeProps {
+  kicker: string
+  description: string
+  actionLabel: string
+  closeLabel: string
+  onReload: () => void
+  onDismiss: () => void
+}
+
+export const ExtensionUpdateNotice: React.FC<ExtensionUpdateNoticeProps> = ({
+  kicker,
+  description,
+  actionLabel,
+  closeLabel,
+  onReload,
+  onDismiss,
+}) => (
+  <section className="gh-update-notice gh-interactive" role="status" aria-live="polite">
+    <button
+      type="button"
+      className="gh-update-notice-close"
+      aria-label={closeLabel}
+      onClick={onDismiss}>
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+    <div className="gh-update-notice-kicker">
+      <svg
+        className="gh-update-notice-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+      </svg>
+      {kicker}
+    </div>
+    <p className="gh-update-notice-message">{description}</p>
+    <div className="gh-update-notice-actions">
+      <button
+        type="button"
+        className="gh-update-notice-button gh-update-notice-button--primary"
+        onClick={onReload}>
+        {actionLabel}
+      </button>
+    </div>
+  </section>
+)
diff --git a/src/components/app/useAppRuntimeManagers.ts b/src/components/app/useAppRuntimeManagers.ts
new file mode 100644
index 000000000..cc49ab036
--- /dev/null
+++ b/src/components/app/useAppRuntimeManagers.ts
@@ -0,0 +1,73 @@
+import { useEffect, useMemo, useState } from "react"
+
+import type { SiteAdapter } from "~adapters/base"
+import { ConversationManager, type ConversationExportProgress } from "~core/conversation-manager"
+import { OutlineManager } from "~core/outline-manager"
+import { PromptManager } from "~core/prompt-manager"
+import { QueueDispatcher } from "~core/queue-dispatcher"
+import type { useSettingsStore } from "~stores/settings-store"
+import { DEFAULT_SETTINGS, type Settings } from "~utils/storage"
+
+type UpdateDeepSetting = ReturnType<typeof useSettingsStore.getState>["updateDeepSetting"]
+
+interface UseAppRuntimeManagersOptions {
+  adapter: SiteAdapter
+  settings: Settings
+  updateDeepSetting: UpdateDeepSetting
+}
+
+export function useAppRuntimeManagers({
+  adapter,
+  settings,
+  updateDeepSetting,
+}: UseAppRuntimeManagersOptions) {
+  const promptManager = useMemo(() => new PromptManager(adapter), [adapter])
+  const queueDispatcher = useMemo(
+    () => new QueueDispatcher(adapter, promptManager),
+    [adapter, promptManager],
+  )
+  const conversationManager = useMemo(() => new ConversationManager(adapter), [adapter])
+  const [exportProgress, setExportProgress] = useState<ConversationExportProgress | null>(null)
+
+  const outlineManager = useMemo(() => {
+    const handleExpandLevelChange = (level: number) => {
+      updateDeepSetting("features", "outline", "expandLevel", level)
+    }
+
+    const handleShowUserQueriesChange = (show: boolean) => {
+      updateDeepSetting("features", "outline", "showUserQueries", show)
+    }
+
+    return new OutlineManager(
+      adapter,
+      settings.features?.outline ?? DEFAULT_SETTINGS.features.outline,
+      handleExpandLevelChange,
+      handleShowUserQueriesChange,
+    )
+    // Managers are scoped to the active adapter. Settings changes use updateSettings below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [adapter, updateDeepSetting])
+
+  useEffect(() => {
+    const isQueueEnabled = settings.features?.prompts?.promptQueue ?? false
+    if (isQueueEnabled) {
+      queueDispatcher.start()
+    } else {
+      queueDispatcher.stop()
+    }
+    return () => queueDispatcher.stop()
+  }, [queueDispatcher, settings.features?.prompts?.promptQueue])
+
+  useEffect(() => {
+    setExportProgress(null)
+    return conversationManager.onExportProgress(setExportProgress)
+  }, [conversationManager])
+
+  return {
+    promptManager,
+    queueDispatcher,
+    conversationManager,
+    outlineManager,
+    exportProgress,
+  }
+}
diff --git a/src/components/outline/VirtualizedOutlineTree.tsx b/src/components/outline/VirtualizedOutlineTree.tsx
new file mode 100644
index 000000000..fb1f2458c
--- /dev/null
+++ b/src/components/outline/VirtualizedOutlineTree.tsx
@@ -0,0 +1,478 @@
+import React, { useEffect, useRef, useState } from "react"
+
+import { CheckIcon, ChevronDownIcon, CopyIcon, StarIcon } from "~components/icons"
+import { Tooltip } from "~components/ui/Tooltip"
+import type { OutlineNode } from "~core/outline-manager"
+import { formatWordCount } from "~utils/format"
+import { getCurrentLang, t } from "~utils/i18n"
+
+const OUTLINE_ITEM_LINE_HEIGHT = 24
+const OUTLINE_ITEM_VERTICAL_PADDING = 12
+const OUTLINE_ITEM_VERTICAL_BORDER = 2
+const OUTLINE_ITEM_HEIGHT =
+  OUTLINE_ITEM_LINE_HEIGHT + OUTLINE_ITEM_VERTICAL_PADDING + OUTLINE_ITEM_VERTICAL_BORDER
+const OUTLINE_ROW_GAP = 2
+const OUTLINE_USER_QUERY_TOP_GAP = 2
+const OUTLINE_USER_QUERY_BOTTOM_GAP = 2
+const OUTLINE_VIRTUAL_OVERSCAN = 10
+const OUTLINE_FALLBACK_VIEWPORT_HEIGHT = 420
+const OUTLINE_HEIGHT_DRIFT_TOLERANCE = 1
+
+export interface VisibleOutlineItem {
+  node: OutlineNode
+  depth: number
+}
+
+export interface OutlineVirtualMetrics {
+  rowOffsets: number[]
+  rowHeights: number[]
+  totalHeight: number
+  itemIndexByNodeIndex: Map<number, number>
+}
+
+export const flattenVisibleOutlineTree = (
+  tree: OutlineNode[],
+  visibleMap: Record<number, boolean>,
+): VisibleOutlineItem[] => {
+  const items: VisibleOutlineItem[] = []
+
+  const traverse = (nodes: OutlineNode[], depth: number) => {
+    for (const node of nodes) {
+      if (!(visibleMap[node.index] ?? true)) continue
+
+      items.push({ node, depth })
+
+      if (node.children.length > 0) {
+        traverse(node.children, depth + 1)
+      }
+    }
+  }
+
+  traverse(tree, 0)
+  return items
+}
+
+const getOutlineVirtualRowSpacing = (item: VisibleOutlineItem, rowIndex: number) => {
+  if (item.node.isUserQuery) {
+    return {
+      top: rowIndex === 0 ? 0 : OUTLINE_USER_QUERY_TOP_GAP,
+      bottom: OUTLINE_USER_QUERY_BOTTOM_GAP,
+    }
+  }
+
+  return { top: 0, bottom: OUTLINE_ROW_GAP }
+}
+
+export const buildOutlineVirtualMetrics = (items: VisibleOutlineItem[]): OutlineVirtualMetrics => {
+  const rowOffsets: number[] = []
+  const rowHeights: number[] = []
+  const itemIndexByNodeIndex = new Map<number, number>()
+  let totalHeight = 0
+
+  items.forEach((item, index) => {
+    const spacing = getOutlineVirtualRowSpacing(item, index)
+    const rowHeight = OUTLINE_ITEM_HEIGHT + spacing.top + spacing.bottom
+
+    rowOffsets.push(totalHeight)
+    rowHeights.push(rowHeight)
+    itemIndexByNodeIndex.set(item.node.index, index)
+    totalHeight += rowHeight
+  })
+
+  return {
+    rowOffsets,
+    rowHeights,
+    totalHeight,
+    itemIndexByNodeIndex,
+  }
+}
+
+const findOutlineRowAtOffset = (rowOffsets: number[], offset: number): number => {
+  if (rowOffsets.length === 0) return 0
+
+  let low = 0
+  let high = rowOffsets.length - 1
+  let result = 0
+
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2)
+    if (rowOffsets[mid] <= offset) {
+      result = mid
+      low = mid + 1
+    } else {
+      high = mid - 1
+    }
+  }
+
+  return result
+}
+
+export const getOutlineVirtualRange = (
+  metrics: OutlineVirtualMetrics,
+  scrollTop: number,
+  viewportHeight: number,
+) => {
+  const itemCount = metrics.rowOffsets.length
+  if (itemCount === 0) return { start: 0, end: 0 }
+
+  const effectiveViewportHeight = Math.max(viewportHeight, OUTLINE_FALLBACK_VIEWPORT_HEIGHT)
+  const startIndex = findOutlineRowAtOffset(metrics.rowOffsets, Math.max(0, scrollTop))
+  const viewportBottom = scrollTop + effectiveViewportHeight
+  let endIndex = startIndex
+
+  while (endIndex < itemCount && metrics.rowOffsets[endIndex] < viewportBottom) {
+    endIndex += 1
+  }
+
+  return {
+    start: Math.max(0, startIndex - OUTLINE_VIRTUAL_OVERSCAN),
+    end: Math.min(itemCount, endIndex + OUTLINE_VIRTUAL_OVERSCAN),
+  }
+}
+
+const isOutlineVirtualHeightDebugEnabled = (): boolean => {
+  if (typeof document !== "undefined") {
+    const value = document.documentElement.dataset.ophelDebugOutlineVirtualHeights
+    if (value === "true" || value === "1") return true
+  }
+
+  try {
+    return (
+      typeof window !== "undefined" &&
+      window.localStorage?.getItem("ophel.debugOutlineVirtualHeights") === "1"
+    )
+  } catch {
+    return false
+  }
+}
+
+// 单行大纲节点视图。树形可见性由上层 flattenVisibleOutlineTree 统一处理。
+const OutlineNodeView: React.FC<{
+  node: OutlineNode
+  onToggle: (node: OutlineNode) => void
+  onClick: (node: OutlineNode) => void
+  onToggleBookmark: (e: React.MouseEvent, node: OutlineNode) => void
+  setItemRef: (index: number, el: HTMLElement | null) => void
+  searchQuery: string
+  extractUserQueryText?: (element: Element) => string // Used for full text extraction
+}> = ({
+  node,
+  onToggle,
+  onClick,
+  onToggleBookmark,
+  setItemRef,
+  searchQuery,
+  extractUserQueryText,
+}) => {
+  const hasChildren = node.children && node.children.length > 0
+  // Legacy: isExpanded 直接看 hasChildren 和 collapsed，不考虑搜索
+  // 箭头始终显示（只要有子节点），因为用户可能想手动展开查看不匹配的子节点
+  const isExpanded = hasChildren && !node.collapsed
+
+  // ===== 复制处理 (阻止冒泡) =====
+  const [copySuccess, setCopySuccess] = useState(false)
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+
+    // 智能获取文本
+    let textToCopy = node.text
+
+    // 尝试从 DOM 获取完整文本
+    if (node.element && node.element.isConnected) {
+      if (node.isUserQuery && extractUserQueryText) {
+        // 用户提问：使用专门提取逻辑 (处理 <br> 等)
+        const fullText = extractUserQueryText(node.element)
+        if (fullText) textToCopy = fullText
+      } else {
+        // 普通标题：直接取 textContent
+        const fullText = node.element.textContent
+        if (fullText) textToCopy = fullText.trim()
+      }
+    }
+
+    try {
+      // 优先使用 Clipboard API
+      await navigator.clipboard.writeText(textToCopy)
+      setCopySuccess(true)
+      setTimeout(() => setCopySuccess(false), 1500)
+    } catch (err) {
+      console.error("[DEBUG] Clipboard API failed, trying fallback:", err)
+      // 备用方案：使用 execCommand
+      try {
+        const textArea = document.createElement("textarea")
+        textArea.value = textToCopy
+        textArea.style.position = "fixed"
+        textArea.style.left = "-9999px"
+        document.body.appendChild(textArea)
+        textArea.select()
+        document.execCommand("copy")
+        document.body.removeChild(textArea)
+        setCopySuccess(true)
+        setTimeout(() => setCopySuccess(false), 1500)
+      } catch (fallbackErr) {
+        console.error("[DEBUG] Fallback copy also failed:", fallbackErr)
+      }
+    }
+  }
+
+  // ===== 状态控制：鼠标悬停在操作按钮时不显示主 Tooltip =====
+  const [isHoveringAction, setIsHoveringAction] = useState(false)
+
+  // ===== CSS 类名 (Legacy exact) =====
+  const itemClassName = [
+    "outline-item",
+    `outline-level-${node.relativeLevel}`,
+    node.isUserQuery ? "user-query-node" : "",
+    node.isGhost ? "ghost-node" : "", // Add ghost styling class
+  ]
+    .filter(Boolean)
+    .join(" ")
+
+  // ===== 搜索高亮处理 (Legacy: regex split) =====
+  const renderTextWithHighlight = () => {
+    if (searchQuery && node.isMatch) {
+      try {
+        const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+        const regex = new RegExp(`(${escapedQuery})`, "gi")
+        const parts = node.text.split(regex)
+        return (
+          <>
+            {parts.map((part, i) =>
+              part.toLowerCase() === searchQuery.toLowerCase() ? (
+                <mark
+                  key={i}
+                  style={{
+                    backgroundColor: "var(--gh-search-highlight-bg)",
+                    color: "inherit",
+                    padding: 0,
+                    borderRadius: "2px",
+                  }}>
+                  {part}
+                </mark>
+              ) : (
+                part
+              ),
+            )}
+          </>
+        )
+      } catch {
+        return node.text
+      }
+    }
+    return node.text
+  }
+
+  return (
+    <Tooltip
+      content={
+        node.wordCount && node.wordCount > 0 ? (
+          <div>
+            {node.text}
+            <div style={{ fontSize: "12px", opacity: 0.8, marginTop: "2px" }}>
+              ({formatWordCount(node.wordCount, getCurrentLang())} {t("words")})
+            </div>
+          </div>
+        ) : (
+          node.text
+        )
+      }
+      disabled={isHoveringAction}
+      triggerStyle={{ width: "100%", display: "block" }}
+      delay={500}>
+      <div
+        className={itemClassName}
+        data-index={node.index}
+        data-level={node.relativeLevel}
+        ref={(el) => setItemRef(node.index, el)}
+        onClick={() => onClick(node)}>
+        {/* 折叠箭头 (Legacy: ▸) - 使用 hasChildren 显示箭头，允许手动展开 */}
+        <span
+          className={`outline-item-toggle ${hasChildren ? (isExpanded ? "expanded" : "") : "invisible"}`}
+          onClick={(e) => {
+            if (hasChildren) {
+              e.stopPropagation()
+              onToggle(node)
+            }
+          }}>
+          <ChevronDownIcon size={16} style={{ transform: "rotate(-90deg)" }} />
+        </span>
+
+        {/* 用户提问: 徽章 (图标+角标数字) */}
+        {node.isUserQuery && (
+          <span className="user-query-badge">
+            <span className="user-query-badge-icon">💬</span>
+            <span className="user-query-badge-number">{node.queryIndex}</span>
+          </span>
+        )}
+
+        {/* 文字 (带搜索高亮) */}
+        <span className={`outline-item-text ${node.isGhost ? "ghost-text" : ""}`}>
+          {renderTextWithHighlight()}
+        </span>
+
+        {/* Bookmark Button (Hover or Bookmarked) */}
+        <span className={`outline-item-bookmark-wrapper ${node.isBookmarked ? "active" : ""}`}>
+          <Tooltip content={node.isBookmarked ? t("removeBookmark") : t("addBookmark")}>
+            <span
+              className={`outline-item-bookmark-btn ${node.isBookmarked ? "active" : ""}`}
+              onClick={(e) => onToggleBookmark(e, node)}
+              onMouseEnter={() => setIsHoveringAction(true)}
+              onMouseLeave={() => setIsHoveringAction(false)}>
+              <StarIcon
+                size={14}
+                filled={node.isBookmarked}
+                color={node.isBookmarked ? "#f59e0b" : "currentColor"}
+              />
+            </span>
+          </Tooltip>
+        </span>
+
+        {/* 复制按钮 (所有节点显示) */}
+        <Tooltip content={t("copy")}>
+          <span
+            className="outline-item-copy-btn"
+            onClick={handleCopy}
+            onMouseEnter={() => setIsHoveringAction(true)}
+            onMouseLeave={() => setIsHoveringAction(false)}>
+            {copySuccess ? (
+              // 成功对号图标
+              <CheckIcon size={14} color="#10b981" />
+            ) : (
+              // 复制图标
+              <CopyIcon size={14} />
+            )}
+          </span>
+        </Tooltip>
+      </div>
+    </Tooltip>
+  )
+}
+
+export const VirtualizedOutlineTree: React.FC<{
+  items: VisibleOutlineItem[]
+  metrics: OutlineVirtualMetrics
+  scrollTop: number
+  viewportHeight: number
+  onToggle: (node: OutlineNode) => void
+  onClick: (node: OutlineNode) => void
+  onToggleBookmark: (e: React.MouseEvent, node: OutlineNode) => void
+  setItemRef: (index: number, el: HTMLElement | null) => void
+  searchQuery: string
+  extractUserQueryText?: (element: Element) => string
+}> = ({
+  items,
+  metrics,
+  scrollTop,
+  viewportHeight,
+  onToggle,
+  onClick,
+  onToggleBookmark,
+  setItemRef,
+  searchQuery,
+  extractUserQueryText,
+}) => {
+  const virtualListRef = useRef<HTMLDivElement>(null)
+  const warnedHeightDriftKeysRef = useRef<Set<string>>(new Set())
+  const range = getOutlineVirtualRange(metrics, scrollTop, viewportHeight)
+  const renderedItems = items.slice(range.start, range.end)
+  const virtualListStyle = {
+    "--gh-outline-item-height": `${OUTLINE_ITEM_HEIGHT}px`,
+    height: metrics.totalHeight,
+    position: "relative",
+  } as React.CSSProperties
+
+  useEffect(() => {
+    if (!isOutlineVirtualHeightDebugEnabled()) return
+
+    const root = virtualListRef.current
+    if (!root) return
+
+    const frame = window.requestAnimationFrame(() => {
+      root.querySelectorAll<HTMLElement>(".outline-virtual-row").forEach((row) => {
+        const item = row.querySelector<HTMLElement>(".outline-item")
+        if (!item) return
+
+        const nodeIndex = item.dataset.index || "unknown"
+        const itemHeight = item.getBoundingClientRect().height
+        const rowHeight = row.getBoundingClientRect().height
+        const expectedRowHeight = Number(row.dataset.expectedRowHeight || OUTLINE_ITEM_HEIGHT)
+        const itemOverflow = item.scrollHeight - item.clientHeight
+        const itemDrift = Math.abs(itemHeight - OUTLINE_ITEM_HEIGHT)
+        const rowDrift = Math.abs(rowHeight - expectedRowHeight)
+
+        if (
+          itemDrift <= OUTLINE_HEIGHT_DRIFT_TOLERANCE &&
+          rowDrift <= OUTLINE_HEIGHT_DRIFT_TOLERANCE &&
+          itemOverflow <= OUTLINE_HEIGHT_DRIFT_TOLERANCE
+        ) {
+          return
+        }
+
+        const warningKey = [
+          nodeIndex,
+          itemHeight.toFixed(2),
+          rowHeight.toFixed(2),
+          expectedRowHeight,
+          itemOverflow,
+        ].join(":")
+        if (warnedHeightDriftKeysRef.current.has(warningKey)) return
+        warnedHeightDriftKeysRef.current.add(warningKey)
+
+        console.warn("[OutlineTab] Virtual outline row height drift", {
+          nodeIndex,
+          nodeKind: row.dataset.nodeKind,
+          itemHeight,
+          expectedItemHeight: OUTLINE_ITEM_HEIGHT,
+          rowHeight,
+          expectedRowHeight,
+          itemOverflow,
+        })
+      })
+    })
+
+    return () => window.cancelAnimationFrame(frame)
+  }, [range.start, range.end, metrics.totalHeight])
+
+  return (
+    <div
+      ref={virtualListRef}
+      className="outline-list outline-list-virtual"
+      style={virtualListStyle}>
+      {renderedItems.map((item, offset) => {
+        const rowIndex = range.start + offset
+        const spacing = getOutlineVirtualRowSpacing(item, rowIndex)
+
+        return (
+          <div
+            key={item.node.index}
+            className="outline-virtual-row"
+            data-depth={item.depth}
+            data-node-kind={item.node.isUserQuery ? "user-query" : "heading"}
+            data-expected-row-height={metrics.rowHeights[rowIndex]}
+            style={{
+              position: "absolute",
+              top: metrics.rowOffsets[rowIndex],
+              left: 0,
+              right: 0,
+              height: metrics.rowHeights[rowIndex],
+              paddingTop: spacing.top,
+              paddingBottom: spacing.bottom,
+              boxSizing: "border-box",
+            }}>
+            <OutlineNodeView
+              node={item.node}
+              onToggle={onToggle}
+              onClick={onClick}
+              onToggleBookmark={onToggleBookmark}
+              setItemRef={setItemRef}
+              searchQuery={searchQuery}
+              extractUserQueryText={extractUserQueryText}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/src/components/panel/PanelWorkspace.tsx b/src/components/panel/PanelWorkspace.tsx
new file mode 100644
index 000000000..19518e14c
--- /dev/null
+++ b/src/components/panel/PanelWorkspace.tsx
@@ -0,0 +1,140 @@
+import React from "react"
+
+import type { SiteAdapter } from "~adapters/base"
+import { ConversationIcon, OutlineIcon, PromptIcon } from "~components/icons"
+import { TAB_IDS } from "~constants"
+import type { ConversationManager } from "~core/conversation-manager"
+import type { OutlineManager } from "~core/outline-manager"
+import type { PromptManager } from "~core/prompt-manager"
+import { t } from "~utils/i18n"
+import type { Prompt } from "~utils/storage"
+
+import { ConversationsTab } from "../ConversationsTab"
+import { OutlineTab } from "../OutlineTab"
+import { PromptsTab } from "../PromptsTab"
+
+interface PanelWorkspaceProps {
+  visibleTabs: string[]
+  activeTab: string
+  canDragTabs: boolean
+  draggedTab: string | null
+  dragOverTab: string | null
+  promptManager: PromptManager
+  conversationManager: ConversationManager
+  outlineManager: OutlineManager
+  adapter?: SiteAdapter | null
+  selectedPromptId?: string | null
+  onPromptSelect?: (prompt: Prompt | null) => void
+  onInteractionStateChange?: (isActive: boolean) => void
+  onJumpBefore: () => void
+  isCodexOpen: boolean
+  onTabClick: (tab: string) => void
+  onTabKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>, tab: string) => void
+  onTabDragStart: (event: React.DragEvent<HTMLButtonElement>, tab: string) => void
+  onTabDragOver: (event: React.DragEvent<HTMLButtonElement>, tab: string) => void
+  onTabDragLeave: (tab: string) => void
+  onTabDrop: (event: React.DragEvent<HTMLButtonElement>, tab: string) => void
+  onTabDragEnd: () => void
+}
+
+const getPanelTabIcon = (tab: string): React.FC<{ size?: number }> | null => {
+  if (tab === TAB_IDS.OUTLINE) return OutlineIcon
+  if (tab === TAB_IDS.PROMPTS) return PromptIcon
+  if (tab === TAB_IDS.CONVERSATIONS) return ConversationIcon
+  return null
+}
+
+const getPanelTabTipTarget = (tab: string): string | undefined => {
+  if (tab === TAB_IDS.OUTLINE) return "outline-tab"
+  if (tab === TAB_IDS.CONVERSATIONS) return "conversations-tab"
+  if (tab === TAB_IDS.PROMPTS) return "prompts-tab"
+  return undefined
+}
+
+export const PanelWorkspace: React.FC<PanelWorkspaceProps> = ({
+  visibleTabs,
+  activeTab,
+  canDragTabs,
+  draggedTab,
+  dragOverTab,
+  promptManager,
+  conversationManager,
+  outlineManager,
+  adapter,
+  selectedPromptId,
+  onPromptSelect,
+  onInteractionStateChange,
+  onJumpBefore,
+  isCodexOpen,
+  onTabClick,
+  onTabKeyDown,
+  onTabDragStart,
+  onTabDragOver,
+  onTabDragLeave,
+  onTabDrop,
+  onTabDragEnd,
+}) => (
+  <>
+    <div className="gh-panel-tabs" role="tablist" aria-label={t("panelTitle")}>
+      {visibleTabs.map((tab) => {
+        const Icon = getPanelTabIcon(tab)
+
+        return (
+          <button
+            type="button"
+            key={tab}
+            id={`gh-panel-tab-${tab}`}
+            role="tab"
+            draggable={canDragTabs}
+            aria-selected={activeTab === tab}
+            aria-controls={`gh-panel-tabpanel-${tab}`}
+            aria-grabbed={draggedTab === tab}
+            className={`gh-panel-tab-btn ${activeTab === tab ? "active" : ""} ${canDragTabs ? "is-draggable" : ""} ${draggedTab === tab ? "is-dragging" : ""} ${dragOverTab === tab ? "is-drag-over" : ""}`}
+            data-tip-target={getPanelTabTipTarget(tab)}
+            onClick={() => onTabClick(tab)}
+            onKeyDown={(event) => onTabKeyDown(event, tab)}
+            onDragStart={(event) => onTabDragStart(event, tab)}
+            onDragOver={(event) => onTabDragOver(event, tab)}
+            onDragEnter={(event) => onTabDragOver(event, tab)}
+            onDragLeave={() => onTabDragLeave(tab)}
+            onDrop={(event) => onTabDrop(event, tab)}
+            onDragEnd={onTabDragEnd}>
+            <span className="gh-panel-tab-btn-icon">{Icon && <Icon size={16} />}</span>
+            <span className="gh-panel-tab-btn-label">
+              {t(`tab${tab.charAt(0).toUpperCase() + tab.slice(1)}`)}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+
+    <div
+      id={`gh-panel-tabpanel-${activeTab}`}
+      className="gh-panel-content"
+      role="tabpanel"
+      aria-labelledby={`gh-panel-tab-${activeTab}`}>
+      {activeTab === TAB_IDS.PROMPTS && (
+        <PromptsTab
+          manager={promptManager}
+          adapter={adapter}
+          selectedPromptId={selectedPromptId}
+          onPromptSelect={onPromptSelect}
+        />
+      )}
+      {activeTab === TAB_IDS.CONVERSATIONS && (
+        <ConversationsTab
+          manager={conversationManager}
+          onInteractionStateChange={onInteractionStateChange}
+        />
+      )}
+      {activeTab === TAB_IDS.OUTLINE && (
+        <OutlineTab
+          manager={outlineManager}
+          conversationManager={conversationManager}
+          onJumpBefore={onJumpBefore}
+          isCodexOpen={isCodexOpen}
+        />
+      )}
+    </div>
+  </>
+)
diff --git a/src/components/prompts/chain-editor-styles.ts b/src/components/prompts/chain-editor-styles.ts
new file mode 100644
index 000000000..c3dce27ef
--- /dev/null
+++ b/src/components/prompts/chain-editor-styles.ts
@@ -0,0 +1,822 @@
+export const CHAIN_EDITOR_PORTAL_STYLES = `
+.gh-chain-editor {
+  width: min(680px, 92vw);
+  max-height: 86vh;
+  padding: 0 !important;
+  border-radius: 12px;
+  background: var(--gh-bg, #ffffff);
+  color: var(--gh-text, #1f2937);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  box-shadow: var(--gh-shadow-lg, 0 20px 50px rgba(0, 0, 0, 0.3));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slideUp 0.25s ease-out;
+}
+
+.gh-chain-editor-header,
+.gh-chain-editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--gh-border, #e5e7eb);
+}
+
+.gh-chain-editor-footer {
+  justify-content: flex-end;
+  border-top: 1px solid var(--gh-border, #e5e7eb);
+  border-bottom: none;
+}
+
+.gh-chain-editor-title {
+  color: var(--gh-text, #1f2937);
+  font-size: 16px;
+  font-weight: 650;
+}
+
+.gh-chain-editor-subtitle,
+.gh-chain-section-subtitle,
+.gh-chain-field-help {
+  color: var(--gh-text-tertiary, #9ca3af);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.gh-chain-editor-close {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: var(--gh-hover, #f3f4f6);
+  color: var(--gh-text-secondary, #6b7280);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gh-chain-editor-scroll {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 18px;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--gh-text-tertiary, #9ca3af) 64%, transparent)
+    transparent;
+}
+
+.gh-chain-editor-scroll::-webkit-scrollbar {
+  width: 10px;
+}
+
+.gh-chain-editor-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.gh-chain-editor-scroll::-webkit-scrollbar-thumb {
+  min-height: 42px;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--gh-text-tertiary, #9ca3af) 56%, transparent);
+  background-clip: content-box;
+}
+
+.gh-chain-editor-scroll::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--gh-text-secondary, #6b7280) 72%, transparent);
+  background-clip: content-box;
+}
+
+.gh-chain-form-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.gh-chain-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 14px;
+  color: var(--gh-text, #374151);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.gh-chain-field input,
+.gh-chain-field textarea,
+.gh-chain-step-row select {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--gh-input-border, #d1d5db);
+  border-radius: 7px;
+  background: var(--gh-input-bg, var(--gh-bg, #ffffff));
+  color: var(--gh-text, #1f2937);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+}
+
+.gh-chain-field input,
+.gh-chain-step-row select {
+  height: 34px;
+  padding: 0 10px;
+}
+
+.gh-chain-field textarea {
+  min-height: 74px;
+  padding: 8px 10px;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.gh-chain-field input:focus,
+.gh-chain-field textarea:focus,
+.gh-chain-step-row select:focus {
+  border-color: var(--gh-primary, #4285f4);
+  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.12);
+}
+
+.gh-chain-icon-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.gh-chain-visibility-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+  padding: 5px 8px 5px 6px;
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 999px;
+  background: var(--gh-bg-secondary, #f9fafb);
+  color: var(--gh-text, #374151);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.gh-chain-visibility-toggle input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.gh-chain-visibility-switch {
+  position: relative;
+  width: 28px;
+  height: 16px;
+  flex: 0 0 28px;
+  border-radius: 999px;
+  background: var(--gh-border, #d1d5db);
+  transition: background 0.16s;
+}
+
+.gh-chain-visibility-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
+  transition: transform 0.16s;
+}
+
+.gh-chain-visibility-toggle input:checked + .gh-chain-visibility-switch {
+  background: var(--gh-primary, #4285f4);
+}
+
+.gh-chain-visibility-toggle input:checked + .gh-chain-visibility-switch::after {
+  transform: translateX(12px);
+}
+
+.gh-chain-visibility-toggle-text {
+  min-width: 0;
+  line-height: 1.25;
+}
+
+.gh-chain-icon-control-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.gh-chain-icon-preview {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  padding: 10px 14px;
+  box-sizing: border-box;
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 8px;
+  background: var(--gh-bg-secondary, #f9fafb);
+  color: var(--gh-text-secondary, #6b7280);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.gh-chain-icon-preview.empty {
+  color: var(--gh-text-tertiary, #9ca3af);
+  font-weight: 400;
+}
+
+.gh-chain-icon-preview-svg {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gh-chain-icon-preview-svg svg {
+  width: 22px;
+  height: 22px;
+}
+
+.gh-chain-icon-select-btn {
+  min-height: 44px;
+  padding: 0 18px;
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 8px;
+  background: var(--gh-bg, #ffffff);
+  color: var(--gh-primary, #3b82f6);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition:
+    background 0.16s,
+    border-color 0.16s;
+}
+
+.gh-chain-icon-select-btn:hover {
+  border-color: var(--gh-primary, #3b82f6);
+  background: var(--gh-primary-light, #eff6ff);
+}
+
+.gh-chain-editor-section {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--gh-border, #e5e7eb);
+}
+
+.gh-chain-queue-gate {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 10px;
+  margin: 0 0 12px;
+  padding: 12px;
+  border: 1px solid color-mix(in srgb, var(--gh-primary, #4285f4) 22%, var(--gh-border, #e5e7eb));
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--gh-primary, #4285f4) 7%, var(--gh-bg, #ffffff));
+}
+
+.gh-chain-queue-gate.editor {
+  margin-bottom: 14px;
+}
+
+.gh-chain-queue-gate-copy {
+  min-width: 0;
+  width: 100%;
+}
+
+.gh-chain-queue-gate-title {
+  color: var(--gh-text, #111827);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.gh-chain-queue-gate-description {
+  margin-top: 3px;
+  color: var(--gh-text-secondary, #6b7280);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.gh-chain-queue-gate-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.gh-chain-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.gh-chain-section-title {
+  color: var(--gh-text, #1f2937);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.gh-chain-step-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.gh-chain-step-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 14px;
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 10px;
+  background: var(--gh-bg, #ffffff);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+}
+
+.gh-chain-step-row:hover {
+  border-color: var(--gh-border-hover, #d1d5db);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.gh-chain-step-row.dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.gh-chain-step-header-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.gh-chain-step-drag-handle {
+  width: 16px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gh-text-tertiary, #c5c8cc);
+  cursor: grab;
+  flex-shrink: 0;
+  transition: color 0.15s;
+}
+
+.gh-chain-step-drag-handle:hover {
+  color: var(--gh-text-secondary, #6b7280);
+}
+
+.gh-chain-step-row.dragging .gh-chain-step-drag-handle {
+  cursor: grabbing;
+}
+
+.gh-chain-step-index {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: var(--gh-primary, #4285f4);
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.gh-chain-step-mode-switch {
+  display: flex;
+  padding: 2px;
+  border-radius: 7px;
+  background: var(--gh-bg-secondary, #f3f4f6);
+  border: 1px solid var(--gh-border, #e5e7eb);
+  gap: 0;
+  flex: 0 0 auto;
+}
+
+.gh-chain-step-mode-btn {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--gh-text-tertiary, #9ca3af);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+.gh-chain-step-mode-btn:hover {
+  color: var(--gh-text-secondary, #6b7280);
+}
+
+.gh-chain-step-mode-btn.active {
+  background: var(--gh-bg, #ffffff);
+  color: var(--gh-text, #1f2937);
+  font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.gh-chain-step-delete-btn {
+  width: 28px;
+  height: 28px;
+  margin-left: auto;
+  flex-shrink: 0;
+  border-radius: 7px;
+  border: none;
+  background: transparent;
+  color: var(--gh-text-tertiary, #d1d5db);
+  opacity: 0;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.gh-chain-step-row:hover .gh-chain-step-delete-btn {
+  opacity: 1;
+}
+
+.gh-chain-step-delete-btn:hover {
+  background: rgba(254, 226, 226, 1);
+  color: var(--gh-text-danger, #ef4444);
+  transform: scale(1.05);
+}
+
+.gh-chain-step-delete-btn:active {
+  transform: scale(0.95);
+  background: rgba(254, 202, 202, 1);
+}
+
+.gh-chain-step-delete-btn svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2.5;
+}
+
+.gh-chain-step-input-row {
+  width: 100%;
+}
+
+.gh-chain-step-inline-input {
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 80px;
+  padding: 10px 12px;
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 8px;
+  background: var(--gh-bg-secondary, #f9fafb);
+  color: var(--gh-text, #1f2937);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  resize: vertical;
+  outline: none;
+  transition: all 0.15s;
+}
+
+.gh-chain-step-inline-input:focus {
+  border-color: var(--gh-primary, #4285f4);
+  background: var(--gh-bg, #ffffff);
+  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.08);
+}
+
+.gh-chain-step-inline-input::placeholder {
+  color: var(--gh-text-tertiary, #9ca3af);
+}
+
+.gh-chain-step-prompt-select {
+  width: 100%;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 8px;
+  background: var(--gh-bg-secondary, #f9fafb);
+  color: var(--gh-text, #1f2937);
+  font-size: 13px;
+  outline: none;
+  transition: all 0.15s;
+  cursor: pointer;
+}
+
+.gh-chain-step-prompt-select:focus {
+  border-color: var(--gh-primary, #4285f4);
+  background: var(--gh-bg, #ffffff);
+  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.08);
+}
+
+.gh-chain-step-actions {
+  display: flex;
+  gap: 2px;
+}
+
+.gh-chain-step-empty {
+  padding: 20px;
+  border: 1.5px dashed var(--gh-border, #d1d5db);
+  border-radius: 10px;
+  color: var(--gh-text-tertiary, #9ca3af);
+  font-size: 13px;
+  text-align: center;
+}
+
+.gh-chain-variable-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.gh-chain-variable-chip,
+.gh-chain-variable-muted {
+  padding: 4px 7px;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 1.25;
+}
+
+.gh-chain-variable-chip {
+  border: 1px solid rgba(66, 133, 244, 0.25);
+  background: rgba(66, 133, 244, 0.08);
+  color: var(--gh-primary, #4285f4);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.gh-chain-variable-chip.custom {
+  border-color: var(--gh-border, #e5e7eb);
+  background: var(--gh-bg-secondary, #f9fafb);
+  color: var(--gh-text-secondary, #6b7280);
+}
+
+.gh-chain-variable-muted {
+  color: var(--gh-text-tertiary, #9ca3af);
+}
+
+.gh-chain-preview-section {
+  position: relative;
+}
+
+.gh-chain-preview-toggle {
+  padding: 5px 12px;
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 6px;
+  background: var(--gh-bg, #ffffff);
+  color: var(--gh-text-secondary, #6b7280);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.gh-chain-preview-toggle:hover {
+  background: var(--gh-hover, #f3f4f6);
+  color: var(--gh-text, #1f2937);
+}
+
+.gh-chain-preview-nav-float {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  margin: 12px 0 0;
+  border-radius: 8px;
+  background: var(--gh-bg, rgba(255, 255, 255, 0.92));
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--gh-border, #e5e7eb);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  flex-wrap: wrap;
+}
+
+.gh-chain-preview-nav-label {
+  color: var(--gh-text-tertiary, #9ca3af);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-right: 4px;
+  flex-shrink: 0;
+}
+
+.gh-chain-preview-nav-btn {
+  min-width: 28px;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--gh-text-secondary, #6b7280);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  gap: 4px;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gh-chain-preview-nav-btn:hover {
+  background: rgba(66, 133, 244, 0.08);
+  color: var(--gh-primary, #4285f4);
+}
+
+.gh-chain-preview-nav-btn .nav-btn-num {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  background: var(--gh-bg-secondary, #f3f4f6);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.gh-chain-preview-nav-btn .nav-btn-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.gh-chain-preview-nav-btn:hover .nav-btn-num {
+  background: rgba(66, 133, 244, 0.15);
+  color: var(--gh-primary, #4285f4);
+}
+
+.gh-chain-preview-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 8px;
+  padding-bottom: 4px;
+}
+
+.gh-chain-preview-step {
+  border: 1px solid var(--gh-border, #e5e7eb);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--gh-bg, #ffffff);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: box-shadow 0.15s;
+}
+
+.gh-chain-preview-step:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+}
+
+.gh-chain-preview-step-header {
+  padding: 10px 14px;
+  background: var(--gh-bg-secondary, #f9fafb);
+  border-bottom: 1px solid var(--gh-border, #e5e7eb);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.gh-chain-preview-step-number {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: var(--gh-primary, #4285f4);
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.gh-chain-preview-step-title {
+  color: var(--gh-text, #1f2937);
+  font-size: 13px;
+  font-weight: 600;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gh-chain-preview-step-body {
+  padding: 14px;
+  color: var(--gh-text, #1f2937);
+  font-size: 13px;
+  line-height: 1.6;
+  word-break: break-word;
+  max-height: 360px;
+  overflow-y: auto;
+}
+
+.gh-chain-preview-step-body p {
+  margin: 0 0 0.75em;
+}
+
+.gh-chain-preview-step-body p:last-child {
+  margin-bottom: 0;
+}
+
+.gh-chain-preview-step-body code {
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: var(--gh-bg-secondary, #f3f4f6);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.88em;
+}
+
+.gh-chain-preview-step-body pre {
+  margin: 0.75em 0;
+  padding: 12px;
+  border-radius: 8px;
+  background: var(--gh-bg-secondary, #f3f4f6);
+  overflow-x: auto;
+}
+
+.gh-chain-preview-step-body pre code {
+  padding: 0;
+  background: none;
+}
+
+.gh-chain-preview-step-body blockquote {
+  margin: 0.75em 0;
+  padding: 8px 14px;
+  border-left: 3px solid var(--gh-primary, #4285f4);
+  background: rgba(66, 133, 244, 0.04);
+  border-radius: 0 6px 6px 0;
+  color: var(--gh-text-secondary, #6b7280);
+}
+
+.gh-chain-preview-empty {
+  color: var(--gh-text-tertiary, #9ca3af);
+  font-style: italic;
+}
+
+.prompt-action-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+@media (max-width: 520px) {
+  .gh-chain-form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .gh-chain-icon-header,
+  .gh-chain-icon-control-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .gh-chain-visibility-toggle,
+  .gh-chain-icon-select-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .gh-chain-step-header-row {
+    flex-wrap: wrap;
+  }
+
+  .gh-chain-step-mode-switch {
+    order: 10;
+    width: 100%;
+    margin-top: 4px;
+  }
+
+  .gh-chain-preview-nav-float {
+    position: static;
+    backdrop-filter: none;
+  }
+}
+`

From 7d25942b47a5a22b0967758fac06bf0d92c04b39 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 18:15:52 +0800
Subject: [PATCH 10/17] fix(ui): inject queue styles into shadow roots

---
 src/components/QueueOverlay.tsx | 2 --
 src/contents/ui-entry.tsx       | 3 +++
 vite.userscript.config.ts       | 5 +++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/QueueOverlay.tsx b/src/components/QueueOverlay.tsx
index 2af5e82b2..f877d1ba5 100644
--- a/src/components/QueueOverlay.tsx
+++ b/src/components/QueueOverlay.tsx
@@ -26,8 +26,6 @@ import { t } from "~utils/i18n"
 import { parseQueueBatchInput, splitQueueLines, type QueueBatchSplitMode } from "~utils/queue-batch"
 import { showToast } from "~utils/toast"
 
-import "~styles/queue-overlay.css"
-
 interface QueueOverlayProps {
   adapter: SiteAdapter
   dispatcher: QueueDispatcher
diff --git a/src/contents/ui-entry.tsx b/src/contents/ui-entry.tsx
index b299483e7..deb4a9842 100644
--- a/src/contents/ui-entry.tsx
+++ b/src/contents/ui-entry.tsx
@@ -3,6 +3,7 @@ import conversationsCssText from "data-text:~styles/conversations.css"
 import releaseNotesCssText from "data-text:~styles/release-notes.css"
 import settingsCssText from "data-text:~styles/settings.css"
 import overlaysCssText from "data-text:~styles/overlays.css"
+import queueOverlayCssText from "data-text:~styles/queue-overlay.css"
 import type { PlasmoCSConfig, PlasmoMountShadowHost } from "plasmo"
 import React from "react"
 
@@ -74,6 +75,8 @@ export const getStyle = () => {
     settingsCssText +
     "\n" +
     overlaysCssText +
+    "\n" +
+    queueOverlayCssText +
     (earlyThemeCSS ? "\n" + earlyThemeCSS : "")
   return style
 }
diff --git a/vite.userscript.config.ts b/vite.userscript.config.ts
index 800b27d90..35e5428e6 100644
--- a/vite.userscript.config.ts
+++ b/vite.userscript.config.ts
@@ -166,6 +166,10 @@ function buildUserscriptStyleBundle(): string {
     path.resolve(__dirname, "src/styles/overlays.css"),
     "utf-8",
   )
+  const queueOverlayStyle = fs.readFileSync(
+    path.resolve(__dirname, "src/styles/queue-overlay.css"),
+    "utf-8",
+  )
 
   return [
     themeVariablesStyle,
@@ -174,6 +178,7 @@ function buildUserscriptStyleBundle(): string {
     releaseNotesStyle,
     settingsStyle,
     overlaysStyle,
+    queueOverlayStyle,
   ].join("\n")
 }
 

From f5414e3e59ac293be6e2aa05ad48b0bcd7882b8e Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 18:29:08 +0800
Subject: [PATCH 11/17] docs(architecture): align audit remediation guidance

---
 .../architecture-ui-optimization-plan.md      | 528 ------------------
 .../architecture-ui-optimization-tasks.csv    |  24 -
 docs/developer/architecture.md                |  49 +-
 docs/developer/css-architecture.md            |  36 +-
 docs/developer/options-page-ui.md             | 127 ++---
 docs/developer/outline-performance-plan.md    | 358 ------------
 docs/developer/project-audit-2026-07-10.md    |  42 +-
 docs/developer/project-code-audit-2026-07.md  |   7 -
 docs/developer/troubleshooting.md             |  28 +-
 src/components/ConversationDialogs.tsx        |   5 +-
 10 files changed, 164 insertions(+), 1040 deletions(-)
 delete mode 100644 docs/developer/architecture-ui-optimization-plan.md
 delete mode 100644 docs/developer/architecture-ui-optimization-tasks.csv
 delete mode 100644 docs/developer/outline-performance-plan.md
 delete mode 100644 docs/developer/project-code-audit-2026-07.md

diff --git a/docs/developer/architecture-ui-optimization-plan.md b/docs/developer/architecture-ui-optimization-plan.md
deleted file mode 100644
index 988b98b4f..000000000
--- a/docs/developer/architecture-ui-optimization-plan.md
+++ /dev/null
@@ -1,528 +0,0 @@
-# 项目架构与 UI 交互优化计划（2026-07）
-
-本文档记录对当前项目架构、代码设计、UI 与交互实现的审查结论，并给出可拆分执行的优化计划。目标不是一次性大重构，而是用低风险、小步提交的方式降低维护成本、提升可访问性与后续扩展效率。
-
-## 审查范围
-
-本次审查基于以下内容：
-
-- 项目架构文档：`docs/developer/architecture.md`
-- UI 与主题规范：`DESIGN.md`
-- Shadow DOM 与样式注入说明：`docs/developer/css-architecture.md`
-- 核心初始化链路：`src/core/modules-init.ts`
-- 适配器层：`src/adapters/*`
-- 状态与存储：`src/stores/*`、`src/utils/storage.ts`、`src/platform/*`
-- 主要 UI 组件：`src/components/App.tsx`、`MainPanel.tsx`、`SettingsModal.tsx`、`PromptsTab.tsx` 等
-- 样式入口与注入链路：`src/contents/ui-entry.tsx`、`src/style.css`、`src/styles/*`
-
-## 总体结论
-
-当前项目的基础分层方向是正确的：
-
-- `src/adapters/` 承担站点差异。
-- `src/core/` 承担跨站点核心能力。
-- `src/platform/` 抽象扩展与油猴脚本平台差异。
-- `src/stores/` 负责 Zustand 状态与持久化。
-- `src/components/` 承担 Shadow DOM 面板 UI。
-
-主要风险来自功能增长后的复杂度累积：
-
-1. 适配器和 UI 单文件体量过大，修改局部行为时容易牵动大量上下文。
-2. 核心模块生命周期偏全局单例，初始化、热更新、销毁路径不够对称。
-3. 设置与存储相关类型、默认值、迁移、选择器和底层存储工具混在一起，边界偏宽。
-4. UI 可访问性基础存在，但复杂弹层、tab、拖拽排序等交互语义仍可补强。
-5. 样式变量体系和 Shadow DOM 注入链路清晰，但 CSS 文件体量大，直接颜色、`!important` 和 `transition: all` 偏多。
-
-## 关键证据
-
-### 大文件与高复杂度入口
-
-当前体量较大的文件包括：
-
-| 文件 | 近似行数 | 风险 |
-| --- | ---: | --- |
-| `src/adapters/gemini.ts` | 4900 | 单站点适配器职责过多 |
-| `src/components/PromptsTab.tsx` | 3778 | Prompt 列表、编辑、导入、预览、Chain 编辑耦合 |
-| `src/components/App.tsx` | 3618 | 应用壳、全局搜索、弹层、快捷操作、通知等职责集中 |
-| `src/adapters/chatgpt.ts` | 3411 | 单站点适配器职责过多 |
-| `src/adapters/aistudio.ts` | 3276 | 单站点适配器职责过多 |
-| `src/core/outline-manager.ts` | 1747 | 核心能力较重，依赖 DOM 与刷新策略 |
-| `src/adapters/base.ts` | 1733 | 基类接口过宽 |
-
-### 适配器基类偏宽
-
-`SiteAdapter` 目前不只是站点识别和基础 DOM 访问，还覆盖了：
-
-- 输入框查找与 prompt 插入
-- 会话列表与会话导航
-- 大纲提取
-- 导出内容提取
-- 页面宽度、用户问题宽度、Zen Mode、Clean Mode
-- 主题同步
-- Mermaid 支持
-- 快捷引用
-- 复制与公式处理
-- 模型锁定与提交按钮识别
-
-这让新增站点和维护站点都容易复制大量模板逻辑。
-
-### 核心模块生命周期不够统一
-
-`src/core/modules-init.ts` 中使用全局 `modules` 单例，并集中处理初始化与设置热更新。URL 变化监听会 patch `history.pushState` / `replaceState`，同时使用 1 秒兜底轮询。当前接口没有统一返回 cleanup/disposer，后续重挂载或模块重启时不利于验证监听器和定时器是否被完整释放。
-
-全仓核心与 UI 中存在较多异步与监听机制，包括多处 `setInterval`、`setTimeout`、`MutationObserver`、`addEventListener`。这些能力本身有必要，但需要更清晰的生命周期约束。
-
-### 设置与存储边界偏宽
-
-`src/utils/storage.ts` 同时包含：
-
-- `Settings` 类型
-- `DEFAULT_SETTINGS`
-- storage key
-- 站点设置 selector
-- clear/restore flag
-- Prompt、Folder、Tag 等业务类型
-
-`src/stores/settings-store.ts` 还承担 normalize、preview settings、persisted settings、跨上下文 chrome.storage 同步等职责。
-
-此外，`src/utils/storage.ts` 当前 type-only 引用了 `~core/webdav-sync` 的 `WebDAVProvider`。虽然 type-only 引用不会造成运行时代码加载，但从架构边界看，基础 utils 层不应依赖 core 层类型。
-
-### UI 可访问性语义有补强空间
-
-当前 UI 已有一些 `aria-label`、`focus-visible`、`aria-live` 与键盘处理，但复杂交互仍有缺口：
-
-- `SettingsModal` 的主要容器缺少完整 `role="dialog"`、`aria-modal`、`aria-labelledby`、焦点陷阱和关闭后恢复焦点。
-- `MainPanel` 的 tab 使用按钮和 active class，但缺少完整 `tablist` / `tab` / `tabpanel` 语义。
-- 面板 tab、Prompt、Chain 等拖拽排序交互需要非鼠标替代路径。
-- 大量操作依赖 toast，重要状态应区分 toast、inline status、`aria-live` 和确认弹窗。
-
-### 样式系统可继续收敛
-
-样式注入链路整体正确：面板样式通过 `src/contents/ui-entry.tsx` 的 `getStyle()` 合并注入 Shadow DOM，动态主题由 `ThemeManager` 注入。主要问题是维护性：
-
-- `src/style.css` 约 3815 行。
-- `src/styles/settings.css` 约 3048 行。
-- 直接颜色、`rgba()`、`!important` 和 `transition: all` 数量偏多。
-- `prefers-reduced-motion` 已有覆盖，但还可以更系统地约束强交互动效。
-
-## 优化目标
-
-1. 降低大文件和宽接口带来的维护成本。
-2. 让核心模块初始化、更新、销毁路径可预测、可验证。
-3. 清理设置、类型、默认值、迁移与存储之间的边界。
-4. 提升复杂弹层、tab、拖拽排序等交互的可访问性。
-5. 保持 Shadow DOM 与主题系统兼容，逐步拆分 CSS，避免样式继续堆叠。
-6. 保持每个改动可独立验证，不做一次性大爆炸重构。
-
-## 分阶段执行计划
-
-### 第一阶段：低风险、高收益修复
-
-#### 1. 补强设置弹窗可访问性
-
-建议任务：`ux(settings): add accessible dialog semantics and focus management`
-
-范围：
-
-- `src/components/SettingsModal.tsx`
-- 必要时补少量样式到 `src/styles/settings.css`
-
-建议实现：
-
-- 弹窗容器增加 `role="dialog"`、`aria-modal="true"`。
-- 绑定标题 `aria-labelledby`，必要时绑定说明 `aria-describedby`。
-- 打开时聚焦标题或第一个可操作控件。
-- `Tab` / `Shift+Tab` 焦点限制在弹窗内。
-- 关闭后恢复到打开设置的触发元素。
-- 保留 `Escape` 关闭行为。
-
-验收标准：
-
-- 键盘可完整打开、浏览、关闭设置弹窗。
-- 焦点不会逃出弹窗。
-- 关闭后焦点回到原触发位置。
-- 屏幕阅读器能识别弹窗标题和语义。
-
-#### 2. 补强主面板 tab 语义与键盘切换
-
-建议任务：`ux(panel): add ARIA tablist semantics and keyboard navigation`
-
-范围：
-
-- `src/components/MainPanel.tsx`
-- `src/style.css`
-
-建议实现：
-
-- tab 容器增加 `role="tablist"`。
-- 每个 tab 按钮增加 `role="tab"`、`aria-selected`、`aria-controls`、稳定 `id`。
-- 内容区增加 `role="tabpanel"`、`aria-labelledby`。
-- 支持方向键、`Home`、`End` 切换 tab。
-- 拖拽排序保留，同时确保键盘用户仍可完成 tab 切换。
-
-验收标准：
-
-- 鼠标、键盘都能切换 tab。
-- 当前 tab 可被屏幕阅读器识别。
-- 不影响现有拖拽排序和 tab 顺序设置。
-
-#### 3. 修正设置类型边界
-
-建议任务：`refactor(settings): move shared settings types out of storage utilities`
-
-范围：
-
-- 新增 `src/types/settings.ts` 或 `src/types/webdav.ts`
-- `src/utils/storage.ts`
-- `src/core/webdav-sync.ts`
-
-建议实现：
-
-- 将 `WebDAVProvider` 等纯类型移到 `src/types`。
-- `src/utils/storage.ts` 改为引用纯类型文件，不再 type-only 引用 `~core/webdav-sync`。
-- 不改变运行时行为。
-
-验收标准：
-
-- `utils` 不再依赖 `core` 类型。
-- `pnpm typecheck` 通过。
-
-#### 4. 为核心订阅和 URL 监听增加 cleanup
-
-建议任务：`refactor(core): return disposers for module subscriptions and url observer`
-
-范围：
-
-- `src/core/modules-init.ts`
-- 内容脚本初始化入口
-
-建议实现：
-
-- `subscribeModuleUpdates(ctx)` 返回 unsubscribe。
-- `initUrlChangeObserver(ctx)` 返回 cleanup，负责：
-  - 移除 `popstate` / `hashchange` 监听。
-  - 恢复 `history.pushState` / `replaceState`。
-  - 清理兜底 interval。
-  - 清理未完成的 timeout。
-- 暂不改变模块业务逻辑，只补生命周期闭环。
-
-验收标准：
-
-- 现有行为不变。
-- 初始化入口能保存 disposer。
-- 后续模块重启或卸载时有明确清理路径。
-
-#### 5. 替换高风险 `transition: all`
-
-建议任务：`ux(styles): replace broad transitions with explicit properties`
-
-范围：
-
-- `src/style.css`
-- `src/styles/*.css`
-
-建议实现：
-
-- 将 `transition: all` 改为明确属性，例如 `opacity`、`transform`、`background-color`、`border-color`、`box-shadow`。
-- 不调整视觉风格，只降低无意动画和性能风险。
-
-验收标准：
-
-- 视觉效果保持基本一致。
-- `transition: all` 数量明显下降。
-- 不影响主题切换和 Shadow DOM 注入。
-
-### 第二阶段：结构减负
-
-#### 6. 从 `App.tsx` 拆出全局搜索控制器
-
-建议任务：`refactor(app): extract global search controller from app shell`
-
-建议拆分：
-
-- `src/components/global-search/useGlobalSearchController.ts`
-- `src/components/global-search/GlobalSearchOverlay.tsx`
-- `src/components/global-search/globalSearchConstants.ts`
-
-目标：
-
-- `App.tsx` 只负责挂载和传递必要回调。
-- 搜索输入、过滤、键盘导航、预览浮层、shortcut nudge 从应用壳中移出。
-
-验收标准：
-
-- 全局搜索快捷键、设置定位、Prompt 预览、空态、语法提示行为不变。
-- `App.tsx` 行数明显下降。
-
-#### 7. 拆分 `PromptsTab.tsx`
-
-建议任务：`refactor(prompts): split prompt tab into focused components`
-
-建议拆分：
-
-- `PromptList`
-- `PromptCategorySidebar`
-- `PromptEditorDialog`
-- `PromptImportDialog`
-- `PromptPreviewModal`
-- `PromptChainEditor`
-- `usePromptDragSort`
-- `usePromptImportExport`
-
-目标：
-
-- Prompt 列表、分类、编辑、导入导出、Chain 编辑各自维护。
-- 降低拖拽排序和弹窗状态对主组件的耦合。
-
-验收标准：
-
-- Prompt 增删改查、分类、导入导出、Chain 编辑行为不变。
-- 拆分后的组件职责清楚，避免引入新的全局状态。
-
-#### 8. 拆分 settings schema、默认值、normalize 和 selector
-
-建议任务：`refactor(settings): split schema defaults normalization and selectors`
-
-建议结构：
-
-- `src/types/settings.ts`
-- `src/constants/default-settings.ts`
-- `src/utils/settings-normalize.ts`
-- `src/utils/settings-selectors.ts`
-- `src/utils/storage-flags.ts`
-
-目标：
-
-- `src/utils/storage.ts` 不再承载所有设置相关逻辑。
-- 设置迁移、默认值、站点 selector 可分别测试和审查。
-
-验收标准：
-
-- 备份/恢复、设置修改、站点特定设置读取行为不变。
-- `DEFAULT_SETTINGS`、store、UI、备份/恢复兼容逻辑仍同步。
-
-#### 9. 建立核心模块生命周期接口
-
-建议任务：`refactor(core): introduce module lifecycle contract`
-
-建议接口：
-
-```ts
-interface CoreModule {
-  start(): void | Promise<void>
-  update?(settings: Settings): void | Promise<void>
-  stop(): void
-}
-```
-
-目标：
-
-- `modules-init.ts` 从“集中写所有热更新逻辑”转为“模块注册与事件分发”。
-- 模块自己管理自己的 update 和 stop。
-- URL 变化、设置变化、清除数据都走统一事件路径。
-
-验收标准：
-
-- 至少先迁移 1 到 2 个低风险模块作为样板。
-- 后续模块可逐步迁移，不要求一次性改完。
-
-### 第三阶段：长期架构优化
-
-#### 10. 将适配器改为基础适配器 + capability
-
-建议任务：`refactor(adapter): split site capabilities from base adapter`
-
-建议 capability：
-
-- `OutlineCapability`
-- `ConversationListCapability`
-- `ExportCapability`
-- `ThemeCapability`
-- `PromptInputCapability`
-- `LayoutCapability`
-- `QuickQuoteCapability`
-
-目标：
-
-- `SiteAdapter` 只保留站点识别、基础 DOM 和通用查询。
-- 站点按需声明能力。
-- 核心模块通过 capability 判断是否启用，而不是假设所有 adapter 都有所有方法。
-
-验收标准：
-
-- 先选一个小站点适配器试点。
-- 不把站点特定逻辑泄漏到公共基类。
-- 新增站点需要实现的最小接口明显减少。
-
-#### 11. 统一轮询和 observer 预算
-
-建议任务：`perf(core): centralize polling and observer lifecycle`
-
-目标：
-
-- 建立 `PollingTaskRegistry` 或类似调度器。
-- 所有周期任务声明：名称、间隔、启动条件、停止条件、页面隐藏行为。
-- 页面隐藏时统一降频或暂停。
-- 模块销毁时统一清理。
-
-验收标准：
-
-- 新增轮询必须注册到调度器。
-- 能从开发日志或调试面板看出当前活跃轮询任务。
-
-#### 12. 渐进提升 TypeScript 约束
-
-建议任务：`refactor(types): reduce any usage in platform messaging and shared utilities`
-
-优先目录：
-
-- `src/platform`
-- `src/utils/messaging.ts`
-- `src/types`
-- `src/core/network-monitor.ts`
-
-目标：
-
-- 为 `window.__ophel*` 全局字段增加 `global.d.ts` 声明。
-- 为 background message 建立 request/response 映射。
-- 将可替换的 `any` 改为 `unknown`、泛型或明确 DOM 类型。
-- 暂不一次性开启 `strict`，避免大范围无关改动。
-
-验收标准：
-
-- `any` 数量逐步下降。
-- 核心消息和平台能力类型更明确。
-
-## UI 与交互专项建议
-
-### 设置页信息架构
-
-建议逐步优化：
-
-- 设置首页增加“常用设置 / 最近修改 / 当前站点推荐”。
-- 全局设置和当前站点设置在视觉上更明确区分。
-- 对高风险设置增加简短说明和即时预览。
-- 搜索结果点击后滚动到目标设置并高亮 1 到 2 秒。
-- 对扩展版/油猴版能力差异，在帮助区域说明原因，避免用户误解为功能丢失。
-
-### 反馈系统
-
-建议统一反馈分级：
-
-| 类型 | 适用场景 |
-| --- | --- |
-| toast info | 复制成功、轻量完成提示 |
-| toast warning | 非阻塞警告，如没有可导出内容 |
-| toast error | 操作失败，需要说明原因 |
-| inline status | 表单校验、导入失败、同步失败 |
-| `aria-live` | 后台任务、导入导出、队列状态 |
-| confirm dialog | 删除、清空、覆盖导入等破坏性操作 |
-
-目标是避免所有反馈都依赖 toast，让重要状态更可见、更可访问。
-
-### 拖拽排序的非鼠标替代
-
-涉及面板 tab、Prompt、Chain 等排序功能。建议为每类排序至少提供一种替代路径：
-
-- 上移 / 下移按钮。
-- 更多菜单中的“移到顶部 / 移到底部”。
-- 设置页排序列表。
-- 键盘快捷方式说明。
-
-### 动效与 reduced motion
-
-建议建立 motion token：
-
-- `--gh-motion-fast`
-- `--gh-motion-normal`
-- `--gh-motion-slow`
-- `--gh-ease-standard`
-- `--gh-ease-emphasized`
-
-并在 `prefers-reduced-motion: reduce` 下统一限制：
-
-- 强 transform 动画。
-- 循环动画。
-- 自动滚动动画。
-- 拖拽和边缘唤起的强动效。
-
-## CSS 拆分建议
-
-保持现有 `getStyle()` 合并注入 Shadow DOM 的机制不变，但逐步把大 CSS 文件拆为更明确的域：
-
-- `src/styles/panel.css`
-- `src/styles/panel-tabs.css`
-- `src/styles/outline.css`
-- `src/styles/prompts.css`
-- `src/styles/quick-buttons.css`
-- `src/styles/settings-layout.css`
-- `src/styles/settings-controls.css`
-- `src/styles/dialogs.css`
-
-拆分原则：
-
-- 每次只拆一个样式域。
-- 同步更新 `src/contents/ui-entry.tsx` 的 `data-text:` 注入。
-- 不改变动态主题变量由 `ThemeManager` 注入 Shadow Root 末尾的事实。
-- 不把 `::view-transition-*` 等文档根伪元素样式放进 Shadow DOM CSS。
-
-## 建议 PR 拆分
-
-推荐按以下顺序创建独立 PR：
-
-1. `ux(settings): add accessible dialog semantics and focus trap`
-2. `ux(panel): add ARIA tablist semantics and keyboard navigation`
-3. `refactor(settings): move WebDAVProvider to shared types`
-4. `refactor(core): return cleanup functions from module observers`
-5. `ux(styles): replace transition all with explicit transitions`
-6. `refactor(app): extract global search controller`
-7. `refactor(prompts): split prompt tab dialogs and drag logic`
-8. `refactor(settings): split settings schema defaults normalization selectors`
-9. `refactor(core): introduce module lifecycle interface`
-10. `refactor(adapter): pilot capability-based adapter on one small site`
-
-## 验证策略
-
-### 文档或纯类型边界调整
-
-- `pnpm typecheck`
-- 必要时 `pnpm lint:check`
-
-### UI/样式调整
-
-- `pnpm format:check`
-- `pnpm lint:check`
-- `pnpm typecheck`
-- 能实际运行时，在至少一个目标站点做最小冒烟：
-  - 面板打开/关闭。
-  - 设置弹窗打开/关闭。
-  - tab 切换。
-  - 主题切换。
-  - Shadow DOM 样式注入。
-
-### 平台或核心初始化调整
-
-- `pnpm typecheck`
-- `pnpm build`
-- 涉及油猴路径时补充 `pnpm build:userscript`
-
-## 非目标
-
-以下内容不建议在同一个阶段混入：
-
-- 一次性全仓格式化。
-- 一次性开启 TypeScript `strict`。
-- 一次性重写所有适配器。
-- 在架构优化 PR 中顺手调整大量视觉风格。
-- 为绕过类型或 lint 问题升级大版本依赖。
-
-## 维护约定
-
-后续执行本计划时，建议每个 PR 都在描述中说明：
-
-- 对应本文档的哪个阶段和任务。
-- 改动涉及的层：adapter / core / platform / store / UI / CSS。
-- 是否涉及扩展和油猴双平台。
-- 是否涉及 Shadow DOM 样式注入或主题变量。
-- 已运行的验证命令。
-- 未覆盖的风险与后续任务。
diff --git a/docs/developer/architecture-ui-optimization-tasks.csv b/docs/developer/architecture-ui-optimization-tasks.csv
deleted file mode 100644
index 1c77e1207..000000000
--- a/docs/developer/architecture-ui-optimization-tasks.csv
+++ /dev/null
@@ -1,24 +0,0 @@
-"task_id","phase","priority","title","source_section","change_type","primary_files","depends_on","scope","non_breaking_constraints","ui_safeguards","validation_commands","manual_regression","acceptance_criteria","pr_size_limit","rollback_notes"
-"AUI-000","Phase 0 - Guardrails","P0","建立架构与 UI 优化执行检查清单","维护约定; 验证策略; 非目标","docs/process","docs/developer/architecture-ui-optimization-plan.md; docs/developer/architecture-ui-optimization-tasks.csv","","为后续每个优化 PR 固化执行模板：改动层级、平台影响、Shadow DOM/主题影响、验证命令、手动回归点。","只补文档和流程；不修改运行时代码；不改变构建脚本；不把多个实现任务合并到同一 PR。","所有 UI 任务必须声明目标界面、适用 DESIGN.md 章节、主题与 Shadow DOM 注入链路。","python -c ""import csv; rows=list(csv.DictReader(open('docs/developer/architecture-ui-optimization-tasks.csv', encoding='utf-8-sig'))); assert rows""","确认 CSV 可被表格工具打开；确认每个任务都有验证与回滚说明。","后续任务都能按 CSV 独立开 PR；每项任务具备不破坏功能与 UI 的检查项。","文档新增或小幅更新；不超过 1 个文档 PR。","如流程不适用，直接 revert 文档改动，不影响产品代码。"
-"AUI-001","Phase 1 - Low risk fixes","P1","给 SettingsModal 补 dialog 语义","第一阶段/1. 补强设置弹窗可访问性","ui/accessibility","src/components/SettingsModal.tsx; src/styles/settings.css","AUI-000","为设置弹窗容器增加 role=""dialog""、aria-modal、aria-labelledby；补稳定标题 id；不改弹窗布局。","不得改变 onClose 触发条件；不得改变现有设置页路由、activePage、initialSubTab 和 locateRequest 行为；不得重命名现有 class。","视觉保持像素级接近；仅增加语义属性和必要焦点样式；浅色/深色主题下关闭、最大化、侧栏导航保持原样。","pnpm format:check; pnpm lint:check; pnpm typecheck","打开设置弹窗；点击遮罩关闭；点击关闭按钮关闭；按 Escape 关闭；切换设置页面；最大化/还原；浅色和深色主题各检查一次。","屏幕阅读器能识别设置弹窗为 dialog；标题可被 aria-labelledby 关联；现有设置操作无行为变化。","只改 SettingsModal 语义与少量样式；不拆组件。","如发现 UI 或关闭行为异常，revert 本 PR 即可恢复原弹窗行为。"
-"AUI-002","Phase 1 - Low risk fixes","P1","给 SettingsModal 增加焦点陷阱与关闭后焦点恢复","第一阶段/1. 补强设置弹窗可访问性","ui/accessibility","src/components/SettingsModal.tsx; src/hooks/useFocusTrap.ts(optional)","AUI-001","打开设置时聚焦标题或第一个可操作控件；Tab/Shift+Tab 限制在弹窗内；关闭后恢复到触发元素。","不得拦截输入框内正常 Tab 以外的编辑行为；不得影响全局快捷键恢复；不得引入第三方依赖。","焦点环使用现有 focus-visible 风格；不新增遮罩动画；焦点恢复失败时只 warn，不阻断关闭。","pnpm format:check; pnpm lint:check; pnpm typecheck","键盘打开设置；连续 Tab 到末尾回到开头；Shift+Tab 反向循环；在输入框内编辑；关闭后焦点回到设置按钮；验证全局搜索快捷键不被永久吞掉。","键盘用户可完整操作设置弹窗且焦点不逃逸；鼠标操作行为不变。","最多新增一个小 hook；不迁移设置页结构。","如焦点循环影响输入或快捷键，先禁用 focus trap hook 并保留 AUI-001 语义改动。"
-"AUI-003","Phase 1 - Low risk fixes","P1","给主面板 tabs 补 tablist/tab/tabpanel 语义","第一阶段/2. 补强主面板 tab 语义与键盘切换","ui/accessibility","src/components/MainPanel.tsx; src/style.css","AUI-000","为 gh-panel-tabs 增加 role=""tablist""；为 tab button 增加 role=""tab""、aria-selected、aria-controls、id；内容区增加 role=""tabpanel""。","不得改变 activeTab 状态来源；不得改变 visibleTabs、tabOrder、拖拽排序和点击切换逻辑；不得重命名现有 class。","active 样式保持不变；focus-visible 样式沿用现有 gh-panel-tab-btn；不同面板宽度下不新增换行或溢出。","pnpm format:check; pnpm lint:check; pnpm typecheck","点击切换大纲/会话/提示词 tab；拖拽排序 tab；折叠/展开面板；左右停靠；浅色和深色主题检查 active 与 hover 状态。","当前 tab 可被 aria-selected 表达；tabpanel 与 tab 正确关联；现有点击和拖拽行为不变。","只补语义属性和必要 id；不重构 MainPanel。","如 tab 渲染或拖拽异常，revert 本 PR 可恢复原按钮结构。"
-"AUI-004","Phase 1 - Low risk fixes","P1","给主面板 tabs 增加键盘导航","第一阶段/2. 补强主面板 tab 语义与键盘切换","ui/interaction","src/components/MainPanel.tsx","AUI-003","支持 ArrowLeft/ArrowRight、Home、End 在可见 tab 间切换；不改变鼠标点击和拖拽排序。","仅在 tab 按钮获得焦点时处理方向键；不得影响页面滚动、输入框、全局快捷键；不得改变 tabOrder 存储。","键盘切换后焦点留在对应 tab；不触发额外动画；折叠/边缘悬停状态下不强制展开面板。","pnpm format:check; pnpm lint:check; pnpm typecheck","用键盘切换 3 个 tab；自定义 tab 顺序后再切换；隐藏某个 tab 后再切换；确认输入框内方向键仍用于移动光标。","键盘可切换所有可见 tab；不会影响其它快捷键和拖拽排序。","只改 tab 键盘事件；不拆 MainPanel。","如快捷键冲突，移除 onKeyDown 即可回滚到点击切换。"
-"AUI-005","Phase 1 - Low risk fixes","P1","将 WebDAVProvider 移到共享类型文件","第一阶段/3. 修正设置类型边界","refactor/types","src/types/settings.ts or src/types/webdav.ts; src/utils/storage.ts; src/core/webdav-sync.ts","AUI-000","移动 WebDAVProvider 等纯类型，消除 utils/storage 对 core/webdav-sync 的 type-only 依赖。","不得改变 WebDAV 运行时代码、备份格式、Settings 字段名、默认值；不得修改存储 key。","不改 WebDAV 设置 UI 文案、布局和表单行为。","pnpm format:check; pnpm lint:check; pnpm typecheck","打开 WebDAV 设置页；确认 provider 选择、保存、显示状态不变；不需要实际连接远端服务。","typecheck 通过；utils 层不再引用 core/webdav-sync；产物行为无变化。","纯类型移动；不做 settings 拆分。","如出现类型或导入问题，恢复原类型导出位置。"
-"AUI-006","Phase 1 - Low risk fixes","P1","让 subscribeModuleUpdates 返回 unsubscribe","第一阶段/4. 为核心订阅和 URL 监听增加 cleanup","refactor/core-lifecycle","src/core/modules-init.ts; src/contents/main.ts; src/platform/userscript/entry.tsx","AUI-000","将设置订阅函数返回取消订阅函数；初始化入口保存 disposer；不改变任何模块 update 逻辑。","不得改变 settings 热更新顺序；不得移除现有模块更新分支；不得改变用户设置写入和跨上下文同步。","主题切换、布局设置、面板避让、模型锁定等设置变化后 UI 必须即时更新。","pnpm format:check; pnpm lint:check; pnpm typecheck; pnpm build","修改主题；修改面板宽度；切换 Zen/Clean Mode；切换模型锁定；确认无需刷新即可生效。","现有热更新行为不变；调用方可在卸载时取消订阅。","只改订阅返回值和调用方保存；不拆 modules-init。","如设置热更新异常，恢复 subscribeModuleUpdates 原返回 void 实现。"
-"AUI-007","Phase 1 - Low risk fixes","P1","让 initUrlChangeObserver 返回 cleanup","第一阶段/4. 为核心订阅和 URL 监听增加 cleanup","refactor/core-lifecycle","src/core/modules-init.ts; src/contents/main.ts; src/platform/userscript/entry.tsx","AUI-006","URL observer 返回 cleanup，负责移除 popstate/hashchange、恢复 history patch、清理 interval 和 pending timeout。","不得改变 URL 变化事件派发；不得改变阅读历史恢复延迟；不得改变 tabManager、usageCounter、modelLocker 的 URL change 行为。","SPA 切换新对话后大纲、会话标题、使用量计数、阅读历史恢复保持原样。","pnpm format:check; pnpm lint:check; pnpm typecheck; pnpm build; pnpm build:userscript","在 ChatGPT/Gemini/Claude 任一站点切换会话；浏览器后退/前进；新对话；确认大纲刷新、标题更新、阅读历史恢复和计数面板正常。","功能行为不变；初始化入口具备完整 URL observer 清理路径。","只补 cleanup；不改 URL change 业务逻辑。","如 SPA 导航失效，恢复原 patch 和 interval 逻辑。"
-"AUI-008","Phase 1 - Low risk fixes","P2","替换高风险 transition: all","第一阶段/5. 替换高风险 transition: all","ui/css","src/style.css; src/styles/*.css","AUI-000","逐个样式域将 transition: all 改为明确属性；每个 PR 只处理一个样式域。","不得改变 class 名、CSS 变量名、主题 fallback；不得引入新的强动画；不得改布局尺寸。","处理前后截图对比；浅色/深色主题、hover、active、focus-visible、disabled 状态保持一致。","pnpm format:check; pnpm lint:check; pnpm typecheck","检查面板按钮、tab、设置控件、快捷按钮、弹窗打开关闭；确认无闪烁、无状态丢失、无布局跳动。","目标样式域 transition: all 清零或显著减少；视觉行为基本一致。","每个 PR 只处理一个 CSS 文件或一个组件域；不混入视觉重设计。","如出现动效或布局回归，按样式域 revert。"
-"AUI-009","Phase 1 - Low risk fixes","P2","补充 reduced motion 基础覆盖","UI 与交互专项建议/动效与 reduced motion","ui/css-accessibility","src/style.css; src/styles/settings.css; src/styles/queue-overlay.css","AUI-008","为强 transform、循环动画、自动滚动相关视觉效果补 prefers-reduced-motion: reduce 覆盖。","只在用户启用 reduced motion 时改变动画；默认动效不变；不得删除必要状态反馈。","reduced motion 下保留可见状态变化，例如 active、loading、disabled；不让用户失去操作反馈。","pnpm format:check; pnpm lint:check; pnpm typecheck","浏览器模拟 reduced motion；打开面板、设置、队列、快捷按钮；确认无强动画且状态仍清楚。","reduced motion 用户不再看到主要强动效；普通用户视觉不变。","只补 CSS media query；不改组件逻辑。","如 reduced motion 下状态不可见，恢复对应 media query 并重新设计状态反馈。"
-"AUI-010","Phase 2 - Structure reduction","P1","从 App.tsx 抽出全局搜索常量和纯函数","第二阶段/6. 从 App.tsx 拆出全局搜索控制器","refactor/ui","src/components/App.tsx; src/components/global-search/*","AUI-000","先移动全局搜索 category、label、语法、过滤相关纯常量/纯函数；不移动状态和渲染。","不得改变搜索结果排序、过滤语法、快捷键、空态文案；不得新增 i18n key。","搜索浮层视觉、提示、预览位置保持不变。","pnpm format:check; pnpm lint:check; pnpm typecheck","打开全局搜索；搜索设置、Prompt、Tips；使用过滤语法；确认结果和原行为一致。","App.tsx 行数下降；全局搜索结果行为无变化。","只移动纯代码；不改 UI 结构。","如搜索结果变化，恢复常量和纯函数到 App.tsx。"
-"AUI-011","Phase 2 - Structure reduction","P1","从 App.tsx 抽出 useGlobalSearchController","第二阶段/6. 从 App.tsx 拆出全局搜索控制器","refactor/ui","src/components/App.tsx; src/components/global-search/useGlobalSearchController.ts","AUI-010","移动全局搜索状态、输入 debounce、键盘导航、预览延迟和 shortcut nudge 控制逻辑到 hook。","不得改变快捷键绑定、打开来源、搜索 debounce、预览延迟、localStorage nudge key；不得吞掉其它快捷键。","浮层打开位置、键盘高亮、Prompt 预览、空态、语法提示视觉不变。","pnpm format:check; pnpm lint:check; pnpm typecheck; pnpm build","快捷键打开搜索；键盘上下选择；Enter 跳转；Esc 关闭；Prompt 预览；设置定位高亮；连续打开关闭。","全局搜索端到端行为不变；App.tsx 只保留挂载与回调。","只抽 hook；不改搜索 UI 样式。","如搜索交互回归，恢复控制逻辑到 App.tsx。"
-"AUI-012","Phase 2 - Structure reduction","P1","从 PromptsTab.tsx 抽出 PromptEditorDialog","第二阶段/7. 拆分 PromptsTab.tsx","refactor/ui","src/components/PromptsTab.tsx; src/components/prompts/PromptEditorDialog.tsx","AUI-000","先抽出新增/编辑 Prompt 弹窗，保持 props 显式传入，不改变 store 和保存逻辑。","不得改变 Prompt 字段、保存/取消/删除行为、变量识别、分类选择；不得改变已有 i18n key。","弹窗尺寸、按钮顺序、表单 focus、错误提示、浅深主题保持不变。","pnpm format:check; pnpm lint:check; pnpm typecheck","新增 Prompt；编辑 Prompt；取消编辑；分类修改；变量 Prompt 保存；确认列表刷新和选中状态正常。","编辑弹窗独立组件化；Prompt CRUD 行为无变化。","只抽一个弹窗；不碰导入、预览、Chain。","如保存或表单状态异常，恢复弹窗代码到 PromptsTab。"
-"AUI-013","Phase 2 - Structure reduction","P1","从 PromptsTab.tsx 抽出 PromptPreviewModal 和 ImportDialog","第二阶段/7. 拆分 PromptsTab.tsx","refactor/ui","src/components/PromptsTab.tsx; src/components/prompts/PromptPreviewModal.tsx; src/components/prompts/PromptImportDialog.tsx","AUI-012","拆出预览和导入弹窗；导入解析函数保持测试前后结果一致。","不得改变导入格式、错误处理、重复 Prompt 策略、预览 markdown 渲染；不得静默吞掉导入错误。","预览排版、滚动、关闭方式、导入确认流程保持一致。","pnpm format:check; pnpm lint:check; pnpm typecheck","预览普通 Prompt 和变量 Prompt；导入有效 JSON；导入无效 JSON；取消导入；确认错误提示清楚且不写入错误数据。","预览/导入弹窗独立；导入导出兼容旧数据。","只抽预览和导入；不改拖拽或 Chain。","如导入兼容性异常，恢复到原 PromptsTab 实现。"
-"AUI-014","Phase 2 - Structure reduction","P1","从 PromptsTab.tsx 抽出 Prompt/Chain 拖拽排序 hook","第二阶段/7. 拆分 PromptsTab.tsx; UI 与交互专项建议/拖拽排序的非鼠标替代","refactor/ui-interaction","src/components/PromptsTab.tsx; src/components/prompts/usePromptDragSort.ts","AUI-013","将 Prompt 与 Chain 拖拽排序状态、drop indicator、清理逻辑抽成 hook；不改变排序算法。","不得改变拖拽数据结构、排序结果、分类内/跨分类移动行为；拖拽结束必须清理状态。","拖拽 hover、drop indicator、dragging 样式保持一致；键盘替代路径另开任务，不混入。","pnpm format:check; pnpm lint:check; pnpm typecheck","Prompt 同分类排序；跨分类移动；Chain 排序；拖拽取消；拖拽后刷新确认顺序持久化。","拖拽行为完全等价；PromptsTab 职责减少。","只抽 hook；不改 UI 文案或布局。","如排序错乱，恢复原拖拽逻辑。"
-"AUI-015","Phase 2 - Structure reduction","P1","拆分 Settings 类型与默认值","第二阶段/8. 拆分 settings schema、默认值、normalize 和 selector","refactor/settings","src/types/settings.ts; src/constants/default-settings.ts; src/utils/storage.ts","AUI-005","移动 Settings 相关类型和 DEFAULT_SETTINGS 到独立文件；utils/storage 保持兼容 re-export。","不得改变 DEFAULT_SETTINGS 的任何值；不得改变导出名称；不得改变持久化 key 和备份 schema。","设置页默认值、重置设置、站点特定设置显示保持一致。","pnpm format:check; pnpm lint:check; pnpm typecheck; pnpm build","打开设置页；重置设置；切换主题；检查面板默认位置/宽度；确认无默认值漂移。","类型和默认值独立；旧 import 仍可工作或一次性安全迁移。","只移动类型和默认值；不改 normalize。","如默认值或导入异常，恢复 DEFAULT_SETTINGS 到 utils/storage。"
-"AUI-016","Phase 2 - Structure reduction","P1","拆分 settings normalize 和 site selectors","第二阶段/8. 拆分 settings schema、默认值、normalize 和 selector","refactor/settings","src/utils/settings-normalize.ts; src/utils/settings-selectors.ts; src/stores/settings-store.ts; src/utils/storage.ts","AUI-015","将 normalizeSettings 及 getSiteTheme/getSitePageWidth 等 selector 拆出；保持 storage 兼容导出。","不得改变迁移和补默认值逻辑；不得改变 previewSettings 与 persistedSettings 合成行为；不得改变站点设置优先级。","修改任意设置后面板和目标站点即时响应；主题预览和恢复设置正常。","pnpm format:check; pnpm lint:check; pnpm typecheck; pnpm build; pnpm build:userscript","修改站点主题、页面宽度、用户问题宽度、Zen Mode、Clean Mode、模型锁定；备份恢复旧设置样本。","normalize 和 selector 可独立维护；所有设置行为等价。","只拆 settings 工具；不改 UI。","如设置迁移或站点覆盖异常，恢复原 utils/storage 结构。"
-"AUI-017","Phase 2 - Structure reduction","P2","为一个低风险核心模块试点 CoreModule 生命周期接口","第二阶段/9. 建立核心模块生命周期接口","refactor/core-lifecycle","src/core/modules-init.ts; one of src/core/model-locker.ts or src/core/scroll-lock-manager.ts","AUI-006; AUI-007","定义 CoreModule 接口并选择一个低风险模块试点 start/update/stop；modules-init 仍兼容旧模块。","不得一次性迁移全部模块；不得改变模块初始化顺序；不得改变设置热更新结果。","试点模块相关 UI 开关和状态提示必须保持原样。","pnpm format:check; pnpm lint:check; pnpm typecheck; pnpm build","按试点模块选择验证：模型锁定开关/重锁定，或滚动锁定开关/提示/页面滚动行为。","生命周期接口可用；旧模块不受影响；试点模块行为等价。","只迁移一个模块；不碰适配器。","如试点模块异常，恢复该模块原 init/update 调用方式。"
-"AUI-018","Phase 3 - Long-term architecture","P2","选择一个小站点试点 adapter capability","第三阶段/10. 将适配器改为基础适配器 + capability","refactor/adapter","src/adapters/base.ts; one small adapter such as src/adapters/ima.ts; src/core/* consuming capability","AUI-017","先定义一个最小 capability，例如 ConversationListCapability 或 LayoutCapability，并在一个小站点试点。","不得改所有站点；不得删除 SiteAdapter 现有方法；不得改变站点 match 和注册顺序。","试点站点面板、大纲、会话、设置开关表现保持一致；其它站点不应产生 diff 行为。","pnpm format:check; pnpm lint:check; pnpm typecheck; pnpm build; pnpm build:userscript","试点站点：插入 Prompt、切换会话、打开面板、导出或大纲按 capability 范围验证；其它主站点做最小打开面板冒烟。","capability 可被核心模块安全识别；未实现 capability 的站点行为不变。","只试点一个 capability + 一个站点；不做全量迁移。","如站点能力识别异常，保留类型定义但恢复核心调用到旧方法，或整体 revert。"
-"AUI-019","Phase 3 - Long-term architecture","P2","建立轮询任务注册表","第三阶段/11. 统一轮询和 observer 预算","perf/core-lifecycle","src/core/polling-task-registry.ts; selected polling module","AUI-017","新增 PollingTaskRegistry，并选择一个低风险轮询迁入；记录名称、间隔、启动条件、停止条件和 hidden 行为。","不得一次性迁移所有 setInterval；不得改变轮询间隔和触发语义，除非该 PR 明确验证。","迁入模块相关状态更新频率和 UI 提示不能变慢到用户可感知。","pnpm format:check; pnpm lint:check; pnpm typecheck; pnpm build","按迁入模块验证：Mermaid 渲染、复制增强、队列、usage counter 或 tab 状态；切换页面 hidden/visible。","轮询可集中 start/stop；页面隐藏策略明确；原功能等价。","只迁入一个轮询任务。","如更新丢失或频率异常，恢复该模块原 setInterval。"
-"AUI-020","Phase 3 - Long-term architecture","P2","为 window.__ophel* 增加全局类型声明","第三阶段/12. 渐进提升 TypeScript 约束","refactor/types","src/types/global.d.ts; src/contents/*.ts; src/hooks/useShortcuts.ts","AUI-000","声明当前使用的 window.__ophel* 字段，减少 main world/content script 中的 window as any。","只补类型；不得改变注入脚本运行时字段名和值；不得改变跨 world 消息协议。","快捷键、滚动锁定、水印处理等依赖全局标记的功能保持原样。","pnpm format:check; pnpm lint:check; pnpm typecheck","打开页面确认 content script 不重复初始化；快捷键定位大纲/会话；滚动锁定开关。","相关 any 数量下降；运行时行为无变化。","只补 global 类型和局部类型替换。","如类型声明影响编译，恢复具体文件的局部 any。"
-"AUI-021","Phase 3 - Long-term architecture","P2","为 background messaging 建立 request/response 类型映射","第三阶段/12. 渐进提升 TypeScript 约束","refactor/types","src/utils/messaging.ts; src/background.ts; message callers","AUI-020","为现有消息常量建立类型映射，逐步替换 Promise<any>；先覆盖 2 到 3 个高频消息。","不得改变消息 type 字符串、payload 结构、background 处理流程；不得一次性迁移所有消息。","通知、WebDAV、Claude Session Key、全局 URL 打开等调用方 UI 提示保持一致。","pnpm format:check; pnpm lint:check; pnpm typecheck; pnpm build","按覆盖消息验证对应功能；错误场景仍显示原有错误提示。","覆盖消息调用获得明确 response 类型；未覆盖消息行为不变。","每个 PR 覆盖少量消息；不改协议。","如消息类型影响调用，恢复该消息到旧 sendToBackground 泛型。"
-"AUI-022","Phase 2 - UI/Interaction","P2","为拖拽排序提供非鼠标替代路径设计与首个实现","UI 与交互专项建议/拖拽排序的非鼠标替代","ui/accessibility","src/components/MainPanel.tsx or src/components/PromptsTab.tsx; related CSS","AUI-004 or AUI-014","先选择面板 tab 或 Prompt 列表之一，提供上移/下移或移到顶部/底部操作；其它拖拽区域后续跟进。","不得移除现有拖拽；不得改变排序持久化格式；不得改变默认 tab/prompt 顺序。","新增操作入口不能增加视觉噪音；小宽度面板下不挤压主要内容；键盘焦点顺序清晰。","pnpm format:check; pnpm lint:check; pnpm typecheck","鼠标拖拽排序仍可用；键盘或菜单排序可用；刷新后顺序持久化；浅深主题检查新增入口。","至少一个排序场景可不用鼠标完成；原拖拽功能无回归。","只实现一个场景；不全量铺开。","如新增入口造成布局或排序 bug，隐藏入口并保留原拖拽。"
diff --git a/docs/developer/architecture.md b/docs/developer/architecture.md
index 7c2d4ae7f..e109aacfc 100644
--- a/docs/developer/architecture.md
+++ b/docs/developer/architecture.md
@@ -1,5 +1,7 @@
 # Ophel Atlas - AI 对话结构化与导航工具
 
+> 最近校验：2026-07-10。本文描述当前 `refactor/project-audit-remediation` 架构；历史实施计划不作为运行时事实来源。
+
 ## 项目愿景
 
 Ophel 是一款跨平台浏览器扩展（同时支持油猴脚本），将 AI 对话转化为可阅读、可导航、可复用的知识内容。通过实时大纲、会话文件夹与 Prompt 词库，让 AI 对话告别无限滚动，成为可组织、可沉淀的工作流。
@@ -29,10 +31,13 @@ Ophel 是一款跨平台浏览器扩展（同时支持油猴脚本），将 AI 
 本项目采用 **适配器模式 (Adapter Pattern)** 实现多站点支持：
 
 ```
-Content Script (main.ts)
+Content Script (main.ts / userscript entry)
+    |
+    v
+loadAdapter(location) --> hostname/path 轻量路由 --> 动态 import 当前 SiteAdapter
     |
     v
-getAdapter() --> SiteAdapter (抽象基类)
+adapter-runtime.ts --> main、UI 与 userscript 共享当前 adapter 实例
     |               |
     |               +-- GeminiAdapter
     |               +-- GeminiEnterpriseAdapter
@@ -51,7 +56,7 @@ getAdapter() --> SiteAdapter (抽象基类)
     |               +-- ImaAdapter
     |
     v
-initCoreModules(ctx) --> 13 个核心模块
+initCoreModules(ctx) --> 核心模块编排与设置热更新
     |
     v
 App.tsx (Shadow DOM 内的 React 面板)
@@ -282,27 +287,33 @@ import { useSettingsStore } from "~stores/settings-store"
 
 ## 测试策略
 
-**当前状态：项目尚未建立测试体系。** 源码中无 test/spec 文件，`package.json` 中无测试相关命令或依赖（如 Jest、Vitest、Playwright）。
+项目使用 Vitest + jsdom 覆盖纯逻辑、生命周期和关键 UI primitive。测试入口为 `pnpm test` / `pnpm test:run`，当前覆盖：
 
-建议优先引入的测试：
-1. **单元测试**：适配器的 `match()` / `getSiteId()` 逻辑、`backup-validator.ts`、`format.ts`、`syntax.ts`（搜索语法解析）
-2. **集成测试**：`modules-init.ts` 的模块编排、`webdav-sync.ts` 的同步逻辑
-3. **E2E 测试**：使用 Playwright + 浏览器扩展测试框架验证核心用户流程
+1. 适配器轻量路由与共享 runtime。
+2. 设置归一化、persist write gate、备份 schema 与旧格式兼容。
+3. ModelLocker、OutlineManager、PollingTaskRegistry 生命周期。
+4. i18n 按需加载与 11 种语言 key 一致性。
+5. 全局搜索语法、设置深链、主题预置与 token 完整性。
+6. Dialog、Switch、SelectedPromptBar 等交互回归。
+
+生产构建后运行 `pnpm check:bundle-budget`，校验扩展内容脚本和 userscript 的 raw/gzip 预算。UI 响应式和键盘行为使用 Playwright 做最小浏览器冒烟；真实站点 DOM 兼容仍需按 adapter 做手动回归。
 
 ## CSS 架构
 
 ### 样式文件清单
 
-项目共 **7 个 CSS 文件**（纯原生 CSS，无预处理器），总计 ~5,974 行：
+截至 2026-07-10，`src/` 下共有 **9 个 CSS 文件**（纯原生 CSS，无预处理器），总计约 10,484 行：
 
 | 文件路径                         | 行数  | 用途                                            |
 | -------------------------------- | ----- | ----------------------------------------------- |
-| `src/style.css`                  | 1,472 | 主样式（大纲面板、快捷按钮、tooltip 等核心 UI） |
-| `src/styles/settings.css`        | 2,081 | 设置页面（Options Page）样式                    |
-| `src/styles/conversations.css`   | 1,313 | 会话 Tab 样式（文件夹、标签、搜索、批量操作）   |
-| `src/styles/queue-overlay.css`   | 395   | Prompt Queue 排队叠加层样式                     |
-| `src/styles/theme-variables.css` | 286   | CSS 变量定义文件（浅色/深色模式默认值）         |
-| `src/popup.css`                  | 395   | 浏览器扩展 Popup 页面样式                       |
+| `src/style.css`                  | 4,463 | 主样式（面板、大纲、快捷按钮、通用组件）        |
+| `src/styles/settings.css`        | 3,727 | 设置弹窗与 Options 共享样式                     |
+| `src/styles/conversations.css`   | 1,344 | 会话 Tab 样式                                   |
+| `src/styles/queue-overlay.css`   | 778   | Prompt Queue 覆盖层样式                         |
+| `src/styles/release-notes.css`   | 421   | 更新日志弹窗样式                                |
+| `src/styles/overlays.css`        | 264   | Dialog、Menu、Tooltip 等统一覆盖层样式          |
+| `src/styles/theme-variables.css` | 313   | CSS 变量默认值                                  |
+| `src/popup.css`                  | 613   | 浏览器扩展 Popup 页面样式                       |
 | `src/tabs/options.css`           | 32    | Options 页面入口（仅 @import）                  |
 
 ### 样式技术方案
@@ -316,7 +327,7 @@ import { useSettingsStore } from "~stores/settings-store"
 | 样式隔离  | Shadow DOM（`:host` 选择器 + 动态 style 注入）                        |
 | 命名前缀  | `--gh-*`（项目前身 Gemini Helper 缩写）                               |
 | 布局      | Flexbox 为主，Grid 辅助，固定定位用于浮动 UI                          |
-| 响应式    | 极少媒体查询，主要依赖 JS 动态类名（`.is-narrow`）                    |
+| 响应式    | 面板动态状态 + Options 900/720/640 px 明确断点                        |
 | 现代特性  | `color-mix()`、`backdrop-filter`、View Transitions、`scrollbar-width` |
 
 ### 主题系统
@@ -367,15 +378,17 @@ src/utils/themes/
 
 **两种 Shadow Host**：`<plasmo-csui>`（扩展模式）、`<div id="ophel-userscript-root">`（油猴模式）。
 
-**静态样式**（初始化时）：`ui-entry.tsx` 通过 `getStyle()` 将三个 CSS 文件合并注入 Shadow DOM `<style>` 标签。
+**静态样式**（初始化时）：`ui-entry.tsx` 通过 `getStyle()` 合并 `style.css`、`conversations.css`、`release-notes.css`、`settings.css`、`overlays.css` 和 `queue-overlay.css`，注入 Shadow DOM `<style>` 标签。userscript 构建在 `vite.userscript.config.ts` 中生成等价样式资源。
 
 **动态主题变量**（切换时）：`ThemeManager.syncPluginUITheme()` 创建/更新 `<style id="gh-theme-vars">`，注入 `:host { ... }` 规则到各 Shadow Root。
 
 **CSS 导入方式**：
 - Plasmo 扩展：`import cssText from "data-text:~style.css"`（编译时转字符串）
-- 油猴脚本：`import mainStyle from "../../style.css?inline"`（Vite 内联）
+- 油猴脚本：`vite.userscript.config.ts` 的 `buildUserscriptStyleBundle()` 读取并合并 CSS 资源
 - 常规页面：`import "./popup.css"`（直接导入）
 
+普通组件 CSS import 会进入页面级构建产物，不能作为 Shadow UI 的样式来源。面板新增 CSS 必须进入上述 `getStyle()` / userscript 样式资源链路。
+
 ### CSS 动画
 
 项目定义了多个 `@keyframes` 动画：`tooltip-fade-in`、`outlineLocatePulse`（定位呼吸光晕）、`quick-btn-hold-fill`（长按填充进度）、`quick-menu-enter`（菜单弹出缩放）、`gh-scanline`/`gh-mist-drift`（背景纹理动画）等。主题切换使用 View Transitions API 实现圆形扩散过渡效果。
diff --git a/docs/developer/css-architecture.md b/docs/developer/css-architecture.md
index 8ce940dc6..c446e5aaa 100644
--- a/docs/developer/css-architecture.md
+++ b/docs/developer/css-architecture.md
@@ -85,25 +85,35 @@ document
 
 这些文件的样式会被注入到 **Plasmo 的 Shadow DOM** 中，用于插件 UI 组件。
 
-| 文件                             | 用途                                             | 注入方式                              |
-| -------------------------------- | ------------------------------------------------ | ------------------------------------- |
-| `src/style.css`                  | 主样式文件，包含面板、大纲、工具栏等核心 UI 样式 | `data-text:~style.css`                |
-| `src/styles/conversations.css`   | 会话 Tab 专用样式，从油猴脚本迁移                | `data-text:~styles/conversations.css` |
-| `src/styles/theme-variables.css` | CSS 变量定义（浅色/深色模式默认值）              | 被 `style.css` 通过 `@import` 引入    |
+| 文件                             | 用途                                      | 注入方式                                  |
+| -------------------------------- | ----------------------------------------- | ----------------------------------------- |
+| `src/style.css`                  | 面板、大纲、工具栏等核心 UI               | `data-text:~style.css`                    |
+| `src/styles/conversations.css`   | 会话 Tab                                  | `data-text:~styles/conversations.css`     |
+| `src/styles/release-notes.css`   | 更新日志弹窗                              | `data-text:~styles/release-notes.css`     |
+| `src/styles/settings.css`        | 设置弹窗共享样式                          | `data-text:~styles/settings.css`          |
+| `src/styles/overlays.css`        | Dialog、Menu、Tooltip 等覆盖层            | `data-text:~styles/overlays.css`          |
+| `src/styles/queue-overlay.css`   | Prompt Queue 覆盖层                       | `data-text:~styles/queue-overlay.css`     |
+| `src/styles/theme-variables.css` | CSS 变量默认值，由 `style.css` 引入       | `@import`                                 |
 
 **注入代码** (`src/contents/ui-entry.tsx`)：
 
 ```typescript
 import cssText from "data-text:~style.css"
 import conversationsCssText from "data-text:~styles/conversations.css"
+import overlaysCssText from "data-text:~styles/overlays.css"
+import queueOverlayCssText from "data-text:~styles/queue-overlay.css"
 
 export const getStyle = () => {
   const style = document.createElement("style")
-  style.textContent = cssText + "\n" + conversationsCssText
+  style.textContent = [cssText, conversationsCssText, overlaysCssText, queueOverlayCssText].join(
+    "\n",
+  )
   return style
 }
 ```
 
+油猴构建在 `vite.userscript.config.ts` 的 `buildUserscriptStyleBundle()` 中读取同一批 CSS，并作为 Shadow Root 样式资源注入。普通组件里的 `import "*.css"` 会进入页面级构建产物，不能替代这条注入链路。
+
 ### 2.2 动态注入的 CSS（内嵌在 TypeScript 中）
 
 这些样式需要动态注入到**主世界的 `document.head`** 或 **Gemini 的 Shadow DOM** 中，因此作为字符串内嵌在 TS 文件里。
@@ -144,8 +154,8 @@ private injectStyleToShadowRoot(shadowRoot: ShadowRoot) {
 | --------------------------------- | ------------------------------------------ |
 | `src/utils/themes/index.ts`       | 主题系统入口，导出预置列表和工具函数       |
 | `src/utils/themes/types.ts`       | 类型定义 (`ThemePreset`, `ThemeVariables`) |
-| `src/utils/themes/light/index.ts` | 浅色主题预置 (10+ 种配色方案)              |
-| `src/utils/themes/dark/index.ts`  | 深色主题预置 (10+ 种配色方案)              |
+| `src/utils/themes/light/index.ts` | 12 套浅色主题预置                          |
+| `src/utils/themes/dark/index.ts`  | 12 套深色主题预置                          |
 
 ---
 
@@ -341,6 +351,8 @@ src/
 | 大纲组件         | `style.css`                             | Plasmo Shadow DOM          | `getStyle()`            |
 | 会话列表         | `conversations.css`                     | Plasmo Shadow DOM          | `getStyle()`            |
 | 提示词 Tab       | `style.css`                             | Plasmo Shadow DOM          | `getStyle()`            |
+| 通用覆盖层       | `overlays.css`                          | Shadow overlay root        | `getStyle()`            |
+| Prompt Queue     | `queue-overlay.css`                     | Shadow overlay root        | `getStyle()`            |
 | CSS 变量默认值   | `theme-variables.css`                   | Plasmo Shadow DOM          | `@import` by style.css  |
 | 主题预置变量     | `themes/light/*.ts`, `themes/dark/*.ts` | Plasmo Shadow DOM          | `ThemeManager` 动态注入 |
 | 代码高亮         | `markdown.ts`                           | 多个上下文                 | 函数返回字符串          |
@@ -418,10 +430,10 @@ export const getStyle = () => {
 
 **Portal 渲染规则**：
 
-| 挂载位置                   | Portal 目标       | 适用场景                      |
-| -------------------------- | ----------------- | ----------------------------- |
-| `document.body`            | `document.body`   | 默认方案，简单可靠            |
-| `document.documentElement` | Shadow DOM 内容器 | 需要额外的 Context 和样式处理 |
+- 面板内 Dialog、Menu、Tooltip、Loading、Queue、Prompt 编辑/预览默认通过 `OverlayPortalProvider` 渲染到 Shadow Root 内的唯一 overlay root。
+- `useOverlayPortalTarget()` 在 overlay root 尚未注册时返回 `null`；调用方应等待或不渲染，不得静默回退 `document.body`。
+- 只有必须影响宿主文档根的能力（例如 `::view-transition-*`）或页面增强样式，才写入 `document.head`；这类节点不属于面板 overlay。
+- 不要把面板组件 Portal 到 `document.body`，否则会丢失 `ThemeManager` 只注入 Shadow Root 的动态变量，并污染宿主页 DOM/CSS。
 
 详见 [troubleshooting.md #12](./troubleshooting.md#12-chatgpt-面板被-react-hydration-清除)。
 
diff --git a/docs/developer/options-page-ui.md b/docs/developer/options-page-ui.md
index b407af5d2..026d7ccf6 100644
--- a/docs/developer/options-page-ui.md
+++ b/docs/developer/options-page-ui.md
@@ -1,100 +1,77 @@
 # Ophel Atlas 设置页与设置弹窗
 
-本文档记录当前 Options Page 与面板内设置弹窗的实际实现。早期独立设置页设计稿已不再作为实现依据；涉及设置 UI 的任务应以本文件、`DESIGN.md`、`src/utils/storage.ts` 和对应页面源码为准。
+> 最近校验：2026-07-10。设置弹窗与独立 Options 共用导航定义和页面组件；早期独立设计稿不再作为实现依据。
 
 ## 1. 当前入口
 
-- `src/components/SettingsModal.tsx`：内容脚本中的设置弹窗，渲染在扩展 Shadow DOM 内，复用 `src/tabs/options/pages/*` 页面组件。
-- `src/tabs/options.tsx`：独立 Options 页面入口，加载 `tabs/options.html`，用于扩展独立窗口、权限请求窗口等场景。
-- `src/tabs/options.css`：独立页面样式入口，导入 `src/styles/theme-variables.css` 与 `src/styles/settings.css`。
-- `src/contents/ui-entry.tsx`：面板与设置弹窗的 Shadow DOM 样式入口，通过 `data-text:~styles/settings.css` 注入设置页共享样式。
+- `src/components/SettingsModal.tsx`：内容面板内的设置弹窗，运行在 Ophel Shadow DOM。
+- `src/tabs/options.tsx`：独立 Options 页面，使用 `_default` 站点上下文。
+- `src/constants/settings-navigation.ts`：两种载体共用的一级导航唯一来源。
+- `src/tabs/options/pages/*`：两种载体复用的页面组件。
+- `src/styles/settings.css`：设置 UI 共享样式。
+- `src/tabs/options.css`：独立页面入口样式。
+- `src/contents/ui-entry.tsx`：把设置样式注入内容面板 Shadow Root。
 
-## 2. 导航结构
+## 2. 共享导航结构
 
-### 2.1 设置弹窗
+`SETTINGS_NAV_ITEMS` 固定包含九个一级入口：
 
-`SettingsModal.tsx` 使用 `NAV_IDS` 和本地 `NAV_ITEMS` 组织一级导航：
+1. 基本设置：`GeneralPage`
+2. 外观主题：`AppearancePage`
+3. 功能模块：`FeaturesPage`
+4. 站点配置：`SiteSettingsPage`
+5. 全局搜索：`GlobalSearchPage`
+6. 快捷键位：`ShortcutsPage`
+7. 数据管理：`BackupPage`
+8. 权限管理：`PermissionsPage`
+9. 关于：`AboutPage`
 
-- 基本设置：`GeneralPage`
-- 外观主题：`AppearancePage`
-- 功能模块：`FeaturesPage`
-- 站点配置：`SiteSettingsPage`
-- 全局搜索：`GlobalSearchPage`
-- 快捷键位：`ShortcutsPage`
-- 数据管理：`BackupPage`
-- 权限管理：`PermissionsPage`
-- 关于：`AboutPage`
+只有权限入口受 `platform.hasCapability("permissions")` 控制；油猴环境不展示 Chrome permissions 页面。独立 Options 不再隐藏外观、全局搜索或快捷键。缺少当前站点上下文时使用 `_default` 配置，不通过隐藏入口制造第二套信息架构。
 
-油猴脚本环境没有 Chrome permissions API，`platform.hasCapability("permissions")` 为 false 时隐藏权限管理入口。
-
-### 2.2 独立 Options 页面
-
-`src/tabs/options.tsx` 当前提供：
-
-- 基本设置：`GeneralPage`
-- 功能模块：`FeaturesPage`
-- 站点设置：`SiteSettingsPage`
-- 外观主题：`AppearancePage`
-- 备份与同步：`BackupPage`
-- 权限管理：`PermissionsPage`
-- 关于：`AboutPage`
-
-独立页面检测不到内容脚本中的 `__ophelThemeManager` 时，会隐藏外观主题入口；油猴脚本环境同样隐藏权限管理入口。
-
-### 2.3 深链与设置搜索
+## 3. 深链与设置搜索
 
 - 深链解析集中在 `src/constants/ui.ts` 的 `resolveSettingsNavigateDetail()`。
-- 设置搜索索引使用同文件中的 `SETTING_ID_ROUTE_MAP`、`SETTING_ID_ROUTE_RULES`、`SETTING_ID_ALIASES` 和 `SETTINGS_SEARCH_ITEMS`。
-- 新增或移除设置项时，必须同步设置项的 `settingId`、路由规则、搜索索引、i18n 文案和页面控件。
-
-## 3. 页面组件分工
+- `SETTING_ID_ALIASES` 将旧设置路径映射到当前 `data-setting-id`。
+- `SETTING_ID_ROUTE_MAP` 和 `SETTING_ID_ROUTE_RULES` 决定一级页面与二级 tab。
+- 独立 Options 读取 `page`、`subTab`、`settingId` URL 参数；目标挂载后滚动到可视区并短时高亮。
+- 全局搜索设置结果使用同一 `settingId` 和路由函数，不另建跳转表。
 
-- `GeneralPage`：语言、面板行为、快捷按钮、工具箱菜单。
-- `FeaturesPage`：大纲、会话、提示词、标签页行为、提醒、内容增强、阅读历史和用量统计。
-- `SiteSettingsPage`：页面布局、模型锁定、Gemini/AI Studio/ChatGPT/Claude 等站点专属设置。
-- `GlobalSearchPage`：全局搜索触发方式、模糊搜索和提示词回车行为。
-- `ShortcutsPage`：快捷键总开关、全局 URL 和各动作绑定。
-- `AppearancePage`：主题同步、预置主题和自定义样式。
-- `BackupPage`：本地备份/恢复、WebDAV 配置与同步操作。
-- `PermissionsPage`：扩展权限状态与可选权限申请/撤销。
+新增或移动设置项时，必须同步控件的 `data-setting-id`、路由/别名、搜索索引、11 种语言文案和旧数据兼容。
 
-## 4. 设置数据流
+## 4. 响应式布局
 
-- 默认值定义在 `src/utils/storage.ts` 的 `DEFAULT_SETTINGS`。
-- 运行时状态由 `src/stores/settings-store.ts` 管理，使用 Zustand persist 写入平台存储。
-- 扩展端使用 `chrome.storage.local`；油猴端使用平台存储适配器，GM API 的同步读取不要包成 Promise。
-- `settings-store.ts` 监听跨上下文 storage 变化，并通过 `_syncVersion` 触发 UI 更新。
-- 旧数据兼容集中在 `normalizeSettings()`：旧快捷按钮字段会迁移到 `quickButtons`；已移除的未实现设置不应继续进入当前设置结构。
+`src/styles/settings.css` 提供整体断点：
 
-## 5. 样式与主题约束
+- `<= 900px`：收窄侧栏与内容留白。
+- `<= 720px`：侧栏改为顶部横向导航，页面转为单列；导航标签保持可扫读。
+- `<= 640px`：设置行和局部控制进一步纵向排列，二级 tab 可横向滚动且不逐字折行。
 
-- 设置页共享样式放在 `src/styles/settings.css`；独立页面额外通过 `src/tabs/options.css` 引入基础主题变量。
-- 面板内设置弹窗样式必须通过 `src/contents/ui-entry.tsx` 的 `getStyle()` 注入 Shadow DOM。
-- 颜色、边框、阴影和交互态优先使用 `--gh-*` 主题变量。
-- 新增样式文件时，必须确认扩展 Shadow DOM 和独立 Options 页面是否都需要引入。
-- 不要在设置页组件中新增大段内联样式；必要的运行时几何值除外。
+完成标准：600 px 视口无页面或内容横向溢出，导航标签可完整读取，Switch 仍有可访问名称、可见 `focus-visible` 和足够点击区域。
 
-## 6. 权限管理
+## 5. 设置数据流
 
-- Content Script 不能直接调用 `chrome.permissions.request`。
-- 设置弹窗发出权限请求时，Background 打开独立权限请求窗口。
-- Options/权限请求页在扩展上下文中触发 Chrome 原生授权弹窗。
-- 权限撤销后，Background 负责关闭依赖该权限的功能并同步 storage。
+- 设置类型与默认值：`src/types/settings.ts`、`src/constants/default-settings.ts`，通过 `src/utils/storage.ts` 兼容导出。
+- 运行时状态：`src/stores/settings-store.ts`，Zustand persist 写入平台存储。
+- 扩展端：`chrome.storage.local`；油猴端：同步 GM 存储适配器。
+- 跨上下文同步使用精确 persist write gate，只抑制外部 hydration 触发的同次回写，不使用时间窗口吞掉用户写入。
+- 旧数据迁移集中在 `normalizeSettings()`；备份恢复还需检查 `ZUSTAND_KEYS`、`MULTI_PROP_STORES` 和 schema 兼容。
 
-## 7. 平台差异
+## 6. 样式、主题与可访问性
 
-- 扩展端和油猴端共享大部分设置 UI，但权限、通知、跨域请求和默认开关可能不同。
-- `watermarkRemoval`、通知和部分 AI Studio 内容增强默认值会根据 `isUserscriptPlatform()` 分支确定。
-- 文档中的 `settings-schema.json` 以扩展端默认值为静态示例；油猴端差异以源码中的 `DEFAULT_SETTINGS` 平台分支为准。
+- 设置样式优先写入 `src/styles/settings.css`，颜色和状态使用 `--gh-*` 变量。
+- 面板内设置弹窗依赖 `ui-entry.tsx` 的 Shadow DOM 注入；独立 Options 通过 `options.css` 使用同一默认 token。
+- Switch 由原生 checkbox 承担语义，`ToggleRow`/`SettingRow` 提供 label 关联；视觉轨道必须呈现键盘焦点。
+- 不在页面组件中创建 body portal、第二主题源或大段静态内联样式。
+- 修改 UI 前阅读 `DESIGN.md`，默认使用 `preserve` 模式并同时验证浅色、深色和自定义主题。
 
-## 8. 修改清单
+## 7. 修改清单
 
 设置 UI 变更至少检查：
 
-1. `src/utils/storage.ts` 的类型与 `DEFAULT_SETTINGS`
-2. `src/stores/settings-store.ts` 的归一化和旧数据兼容
-3. 对应 `src/tabs/options/pages/*` 页面控件
-4. `src/constants/ui.ts` 的设置深链、别名和搜索索引
-5. `src/locales/*/index.ts` 的 11 种语言文案
-6. `docs/developer/settings-schema.json`
-7. 涉及样式时检查 `DESIGN.md`、`src/styles/settings.css`、`src/tabs/options.css` 和 `src/contents/ui-entry.tsx`
+1. `DEFAULT_SETTINGS`、Settings 类型、store action 与 normalize/migration。
+2. 对应 `src/tabs/options/pages/*` 控件及 `data-setting-id`。
+3. `src/constants/settings-navigation.ts` 与 `src/constants/ui.ts` 深链/搜索。
+4. `src/locales/*/index.ts` 的 11 种语言文案。
+5. 备份/恢复 schema、`docs/developer/settings-schema.json` 和平台默认值差异。
+6. `src/styles/settings.css`、`src/tabs/options.css`、`src/contents/ui-entry.tsx` 注入链路。
+7. `pnpm lint:check`、`pnpm typecheck`；UI 改动做 900/720/600 px 和键盘冒烟。
diff --git a/docs/developer/outline-performance-plan.md b/docs/developer/outline-performance-plan.md
deleted file mode 100644
index 95a75c899..000000000
--- a/docs/developer/outline-performance-plan.md
+++ /dev/null
@@ -1,358 +0,0 @@
-# 大纲系统性能优化与 Bug 修复计划
-
-> 创建日期：2026-04-20  
-> 分析范围：`src/core/outline-manager.ts`、`src/adapters/gemini.ts`、`src/components/OutlineTab.tsx`
-
----
-
-## 问题清单
-
-| #   | 优先级 | 类型 | 位置                                            | 描述                                                         |
-| --- | ------ | ---- | ----------------------------------------------- | ------------------------------------------------------------ |
-| P1  | 🔴 高  | Bug  | `outline-manager.ts` `captureTreeState`         | 同文本同级标题 key 碰撞，折叠状态互覆盖                      |
-| P2  | 🔴 高  | 性能 | `outline-manager.ts` `startAutoUpdate`          | MutationObserver 观察整个 `document.body`，AI 生成时高频触发 |
-| P3  | 🟡 中  | 性能 | `outline-manager.ts` `_doRefresh`               | `treeKey` 拼接所有标题文本，超长字符串比较                   |
-| P4  | 🟡 中  | 性能 | `outline-manager.ts` `updateScrollPositions`    | 批量 `getBoundingClientRect()` 触发 Layout Thrashing         |
-| P5  | 🟢 低  | 性能 | `OutlineTab.tsx`                                | 全量渲染所有节点，无虚拟列表                                 |
-| P6  | 🟡 中  | Bug  | `outline-manager.ts` `_doRefresh` fallback 竞态 | fallback timer 清空 treeKey 可能打断正常状态恢复             |
-| P7  | 🟡 中  | Bug  | `outline-manager.ts` `executeAutoUpdate`        | 生成完成后切 Tab，`postGenerationScheduled` 复位导致漏刷新   |
-
----
-
-## Phase 1：`captureTreeState` key 碰撞 Bug
-
-**状态**：已完成
-
-### 问题描述
-
-`captureTreeState` 使用 `${node.level}_${node.text}` 作为 key：
-
-```ts
-// 当前代码（有 bug）
-const key = `${node.level}_${node.text}`
-```
-
-当同一对话包含两个文本相同的同级标题（如两次 `## 总结`、`## 分析`），后者的折叠状态会覆盖前者，导致大纲刷新后折叠状态错乱。
-
-### 修复方案
-
-优先使用 `node.id`（如果存在），否则用 `node.index`（节点在扁平列表中的全局唯一序号）作为 key 的组成部分：
-
-```ts
-// 修复后
-const key = node.id ? `id:${node.id}` : `${node.level}_${node.text}_${node.index}`
-```
-
-`restoreTreeState` 同步更新 key 逻辑。
-
-### 影响范围
-
-- 仅 `captureTreeState` / `restoreTreeState` 方法
-- 不影响数据结构、序列化、书签逻辑
-- 风险：极低
-
----
-
-## Phase 2：缩小 MutationObserver 观察范围
-
-**状态**：已完成
-
-### 问题描述
-
-```ts
-this.observer.observe(document.body, {
-  childList: true,
-  subtree: true,
-  characterData: true,
-})
-```
-
-`document.body` 全量观察导致：
-
-- AI 流式生成时每个字符都触发 MutationObserver 回调
-- 即使有 debounce，高频写入场景下 debounce 也无法完全抑制
-
-### 修复方案
-
-在 `SiteAdapter` 基类新增方法 `getObserveTarget()`，默认使用 `getResponseContainerSelector()` 返回更小范围的容器；各适配器如有需要仍可覆盖：
-
-```ts
-// base.ts 默认实现（通过 getResponseContainerSelector 自动查找容器）
-getObserveTarget(): Element | null {
-  const selector = this.getResponseContainerSelector()
-  if (!selector) return null
-  return document.querySelector(selector)
-}
-
-// claude.ts 覆盖（使用滚动容器而非单条回复容器）
-getObserveTarget(): Element | null {
-  return this.getScrollContainer()
-}
-```
-
-`startAutoUpdate()` 中使用适配器返回的目标：
-
-```ts
-const target = this.siteAdapter.getObserveTarget() ?? document.body
-this.observer.observe(target, { childList: true, subtree: true, characterData: true })
-```
-
-### 影响范围
-
-- `src/adapters/base.ts` 新增 `getObserveTarget()`（默认用 `getResponseContainerSelector()` 查找容器，不破坏已有适配器）
-- `src/adapters/claude.ts` 覆盖为 `getScrollContainer()`
-- `src/core/outline-manager.ts` 修改 `startAutoUpdate`
-- 其他适配器通过基类默认实现自动生效；未实现 `getResponseContainerSelector()` 的适配器自动 fallback 到 `document.body`
-
----
-
-## Phase 3：`treeKey` 改用 hash
-
-**状态**：已完成
-
-### 问题描述
-
-```ts
-const outlineKey =
-  sessionScopeKey +
-  "|" +
-  showWordCountFlag +
-  "|" +
-  outlineData.map((i) => `${i.text}:${(i as ExtendedOutlineItem).isBookmarked}`).join("|")
-```
-
-1000 个标题时，字符串可能超过 10 万字符，每次 `refresh()` 都要进行超长字符串比较。
-
-### 修复方案
-
-使用 djb2 hash 将全文 key 压缩为 32 位 hex 字符串：
-
-```ts
-function djb2Hash(str: string): string {
-  let hash = 5381
-  for (let i = 0; i < str.length; i++) {
-    hash = ((hash << 5) + hash + str.charCodeAt(i)) >>> 0
-  }
-  return hash.toString(16)
-}
-```
-
-修改 key 生成：
-
-```ts
-const rawKey =
-  sessionScopeKey +
-  "|" +
-  showWordCountFlag +
-  "|" +
-  outlineData.map((i) => `${i.text}:${(i as ExtendedOutlineItem).isBookmarked}`).join("|")
-const outlineKey = djb2Hash(rawKey)
-```
-
-### 影响范围
-
-- 仅 `_doRefresh` 中 key 生成逻辑
-- 风险：极低（理论上存在 hash 碰撞，但 djb2 碰撞概率极低，且碰撞最多跳过一次刷新）
-
----
-
-## Phase 4：~~消除 Layout Thrashing~~（`updateScrollPositions`）
-
-**状态**：跳过（诊断有误）
-
-### 原始诊断（有误）
-
-原计划认为 `getBoundingClientRect()` 循环调用构成 Layout Thrashing。
-
-### 实际分析
-
-经审查，`updateScrollPositions` 中 **不存在 Layout Thrashing**：
-
-- `getClientRects()` / `getBoundingClientRect()` 均为 DOM 只读操作
-- `node.scrollTop = top` / `node.scrollHeight = height` 写的是 JS 对象属性（`OutlineNode`），**不是 DOM 属性**
-- 无 DOM 读写交替，浏览器首次读取后使用缓存布局，不会反复重排
-
-仅有的小优化空间（收益极低，暂不处理）：
-
-1. `getClientRects()` + `getBoundingClientRect()` 每个元素两次 API 调用，可合并为一次
-2. 元素重连接逻辑（`querySelectorAll`）可前置到测量循环外
-
----
-
-## Phase 5：修复 fallback 竞态
-
-**状态**：已完成
-
-### 问题描述
-
-```ts
-// fallbackRefreshTimer 触发时清空 treeKey
-this.fallbackRefreshTimer = setTimeout(() => {
-  this.treeKey = "" // 强制重建
-  this.refresh()
-}, FALLBACK_DELAY)
-```
-
-如果 `refresh()` 在 timer 触发前已正常更新了 `treeKey`，但 timer 里又清空 `treeKey` 强制重建，会导致用户之前手动调整的折叠状态被重置（因为重建时 `currentStateMap` 来自旧树，而树被强制清空重建）。
-
-### 修复方案
-
-在 fallback timer 回调中，先检查当前 `treeKey` 是否与触发 timer 时相同；若已变化（说明正常刷新已发生），跳过本次 fallback：
-
-```ts
-const keyAtSchedule = this.treeKey
-
-this.fallbackRefreshTimer = setTimeout(() => {
-  this.fallbackRefreshTimer = null
-  if (Date.now() - this.lastTreeChangeTime >= OutlineManager.FALLBACK_DELAY - 100) {
-    // 只有 treeKey 没有自然更新时才强制重建
-    if (this.treeKey === keyAtSchedule) {
-      this.treeKey = ""
-      this.refresh()
-    }
-  }
-}, OutlineManager.FALLBACK_DELAY)
-```
-
----
-
-## Phase 6：修复生成完成后切 Tab 漏刷新
-
-**状态**：已完成
-
-### 问题描述
-
-```ts
-if (this.wasGenerating && !isGenerating && !this.postGenerationScheduled) {
-  this.postGenerationScheduled = true
-  setTimeout(() => {
-    this.postGenerationScheduled = false
-    this.treeKey = ""
-    this.refresh()
-  }, 500)
-}
-```
-
-用户在 AI 生成完成前切走 Tab（`setActive(false)` → `stopAutoUpdate()`），500ms 后 `postGenerationScheduled` 复位、500ms 的刷新执行，但此时 observer 已停止——当用户切回 Tab 时，最终的生成结果不会被扫描。
-
-### 修复方案
-
-新增 `pendingPostGenerationRefresh` flag，在 `setActive(true)` 时检查并补一次刷新：
-
-```ts
-private pendingPostGenerationRefresh = false
-
-// 在 postGeneration setTimeout 中
-setTimeout(() => {
-  this.postGenerationScheduled = false
-  if (!this.isActive) {
-    // Tab 已切走，标记为待刷新
-    this.pendingPostGenerationRefresh = true
-    return
-  }
-  this.treeKey = ""
-  this.refresh()
-}, 500)
-
-// 在 setActive 中
-setActive(active: boolean) {
-  this.isActive = active
-  this.updateAutoUpdateState()
-  if (active && this.pendingPostGenerationRefresh) {
-    this.pendingPostGenerationRefresh = false
-    this.treeKey = ""
-    this.refresh()
-  }
-}
-```
-
-### 影响范围
-
-- `outline-manager.ts` `setActive` 和 `executeAutoUpdate` 方法
-- 新增一个 `boolean` 属性，极小改动
-
----
-
-## Phase 7：OutlineTab 渲染优化
-
-**状态**：已完成（方案 A: DOM classList 直接操作）
-
-### 问题描述
-
-`OutlineTab.tsx` 对所有可见节点直接渲染 DOM，1000+ 节点时：
-
-- React reconcile 开销大
-- 所有节点的 `ref` 均保留在内存中
-- **最高频触发**：滚动同步 (`activeIndex` 变化) 导致 1000+ `OutlineNodeView` 全量 re-render，但实际仅 2 个节点需更新
-
-### 分析结论
-
-#### Node 数据模型
-
-`outline-manager.ts` 中 **82% 的操作是原地修改 (Mutation)**，不创建新 node 对象：
-
-| 操作                                           | Node 引用  | 修改的属性                                     |
-| ---------------------------------------------- | ---------- | ---------------------------------------------- |
-| `toggleNode()`                                 | 不变       | `collapsed`, `forceExpanded`                   |
-| `toggleBookmark()`                             | 不变       | `isBookmarked`, `bookmarkId`                   |
-| `setLevel()` / `expandAll()` / `collapseAll()` | 不变       | 全树 `collapsed`                               |
-| `setSearchQuery()`                             | 不变       | `isMatch`, `hasMatchedDescendant`, `collapsed` |
-| `refresh()` / `buildTree()`                    | **新对象** | 全新树                                         |
-
-因此 `React.memo` 的 `prev.node !== next.node` 引用比较在 mutation 场景下**无法区分变化**。
-
-#### 虚拟列表评估
-
-**不建议引入**，原因：
-
-1. 树形结构需要先扁平化，react-window 等库原生不支持
-2. 动态行高（缩进、搜索高亮、换行）需 DOM 测量
-3. 搜索+折叠+书签三重过滤叠加，扁平化映射实时同步复杂
-4. 折叠后可见节点仅 50-200，常见场景下瓶颈不在 DOM 数量
-5. 工程量 5-15 天，回归风险高
-
-### 实施方案
-
-#### 方案 A（当前迭代）: DOM classList 直接操作
-
-**核心收益**：滚动同步是最高频操作（每 16ms），原先 `activeIndex` state 变化导致 1000+ 组件全量 re-render。方案 A 完全绕过 React 渲染，直接操作 DOM classList。
-
-**实现**：
-
-- 删除 `useState(activeIndex)` / `useState(visibleHighlightIndex)`，仅保留 ref
-- `updateActiveIndex()` 通过 `itemRefMap.get(idx).classList.add/remove("sync-highlight")` 直接操作 DOM
-- `updateVisibleHighlightIndex()` 同上，操作 `"sync-highlight-visible"` class
-- `setItemRef()` 在新元素挂载时检查是否为当前 active/highlight 节点，自动应用 class（兜底树重建场景）
-- `OutlineNodeView` 移除 `activeIndex` / `visibleHighlightIndex` props 和相关 className 计算
-
-**安全性**：
-
-- Mutation 操作（展开/折叠/搜索/树重建）仍全量渲染，行为不变
-- 树重建 → `setItemRef` 回调自动重新应用高亮 class
-- 懒加载场景安全：`buildTree()` 创建新 DOM → `setItemRef` 兜底
-- `visibilityMaps` 变化时 `useEffect` 仍会重算 `visibleHighlightIndex`
-
-**为何不用 React.memo**：
-
-1. `OutlineNodeView` 是递归组件——如果父节点被 memo 跳过，子节点也不会被 React 访问，导致深层子节点高亮状态无法更新
-2. 82% 的操作是原地 Mutation，`prev.node === next.node` 时无法区分"谁的属性变了"
-
-#### 方案 B（后续迭代）: 局部优化
-
-- `itemRefMap` 仅保存可见节点的 ref
-- `useMemo` 依赖项拆分（当前 7 个 → 2-3 个分组）
-- 需 React Profiler 量化瓶颈后决定
-
-### 影响范围
-
-- `OutlineTab.tsx` — `OutlineNodeView` 组件
-
----
-
-## 执行规则
-
-1. 严格按 Phase 1 → Phase 2 → ... → Phase 6 → Phase 7 顺序执行
-2. 每完成一个 Phase，需要用户确认再继续下一个
-3. 每个 Phase 在独立提交中完成
-4. Phase 1-6 分支名：`perf/outline-optimizations`
-5. Phase 7 分支名：`perf/outline-memo`
diff --git a/docs/developer/project-audit-2026-07-10.md b/docs/developer/project-audit-2026-07-10.md
index 2f1058953..5f9411d0d 100644
--- a/docs/developer/project-audit-2026-07-10.md
+++ b/docs/developer/project-audit-2026-07-10.md
@@ -22,6 +22,47 @@
 | P2 | 10 | 中期必须修复，存在竞态、泄漏、长期维护或一致性风险 |
 | P3 | 5 | 清理和治理项，可随相关模块修改一起完成 |
 
+### 1.1 Remediation 状态（2026-07-10）
+
+下表记录本审计对应修复分支的最终状态。后续章节中的体积、代码位置和建议保留为“修复前证据”，不再代表当前实现。
+
+| ID | 状态 | 修复结果 |
+| --- | --- | --- |
+| P1-01 | 已完成 | 适配器改为 hostname/path 轻量路由与动态 import；main/UI 共享 adapter runtime；应用语言按需加载。 |
+| P1-02 | 已完成 | 建立 Shadow Root 内唯一 overlay root；Dialog、Menu、Tooltip、Loading、Queue、Prompt 覆盖层统一使用该目标。 |
+| P1-03 | 已完成 | userscript 移除全树永久 observer + 2 秒 interval，改为直接父级 observer 和有界重挂载。 |
+| P1-04 | 已完成 | SelectedPromptBar 改为事件触发和最长 700 ms 有界几何跟踪，不再永久 rAF。 |
+| P1-05 | 已完成 | Options 增加 900/720/640 px 整体断点；600 px 浏览器冒烟无横向溢出。 |
+| P1-06 | 已完成 | Switch/ToggleRow 建立 label、ARIA、整行点击和 `focus-visible`，并有键盘测试。 |
+| P2-01 | 已完成 | 100 ms 全局禁写窗口替换为精确 persist write gate，并有竞态回归测试。 |
+| P2-02 | 已完成 | OutlineManager 增加幂等 destroy，释放事件、store subscription、timer 和 observer。 |
+| P2-03 | 已完成 | ModelLocker 跟踪并取消启动/防抖/验证任务，覆盖关闭和重启场景。 |
+| P2-04 | 已完成 | URL 轮询默认关闭，仅允许 adapter 显式 opt-in fallback。 |
+| P2-05 | 已完成 | Copy、Mermaid、User Query Markdown、Usage、Layout 等周期任务迁移到 PollingTaskRegistry，隐藏页默认暂停。 |
+| P2-06 | 已完成 | 抽出 App runtime managers、MainPanel workspace、Outline 虚拟树和 Prompt chain 样式模块；四个入口分别降至 3526/1557/1677/2642 行。 |
+| P2-07 | 已完成 | SettingsModal 与 Options 共享九项导航，独立 Options 展示外观、全局搜索和快捷键。 |
+| P2-08 | 已完成 | 已确认的硬编码 UI/ARIA 文案全部 i18n 化，并由 11 语 key 一致性测试保护。 |
+| P2-09 | 已完成 | 新增主题 token 校验；101 个引用和 85 个全局 token 默认值通过，24 套预置有测试。 |
+| P2-10 | 已完成 | 引入 Vitest；当前 17 个测试文件、41 项测试覆盖路由、迁移、生命周期、搜索、备份、主题和关键 UI。 |
+| P3-01 | 已完成 | 删除无引用 userscript Chrome polyfill 和不完整 Options barrel。 |
+| P3-02 | 已完成 | scroll-lock 业务逻辑集中到 `src/core/scroll-lock-runtime.ts`，两平台只保留入口桥接。 |
+| P3-03 | 已完成 | Conversation Dialog 复用通用 Dialog primitive，统一焦点、ESC、ARIA 和 Shadow overlay。 |
+| P3-04 | 已完成 | 110 条 warning 清零，`lint:check` 启用 `--max-warnings=0`。 |
+| P3-05 | 已完成 | 更新 architecture、CSS、Options 文档，删除被本审计或最终性能审计完全取代的历史计划。 |
+
+### 1.2 最终体积与门禁
+
+修复后生产构建：
+
+| 产物 | 原始大小 | gzip |
+| --- | ---: | ---: |
+| `main.*.js` | 1,507,680 B | — |
+| `ui-entry.*.js` | 2,257,230 B | — |
+| 两个扩展内容脚本合计 | 3,764,910 B | 约 975.4 KiB |
+| `ophel.user.js` | 1,854,752 B | 约 472.0 KiB |
+
+扩展内容脚本 raw 合计相对审计基线下降约 **49.8%**，超过 40% 完成指标。`scripts/check-bundle-budget.mjs` 对扩展内容入口与 userscript 同时设置 raw/gzip 上限，生产构建后可运行 `pnpm check:bundle-budget`。
+
 ## 2. 审查方法与证据
 
 ### 2.1 静态与构建检查
@@ -440,4 +481,3 @@
 - 24 套主题和自定义主题下，所有 overlay/portal 组件颜色一致。
 - 核心 manager 均具备可验证的 start/update/stop 或 destroy 生命周期。
 - 新增测试覆盖设置迁移、主题 token 和关键生命周期。
-
diff --git a/docs/developer/project-code-audit-2026-07.md b/docs/developer/project-code-audit-2026-07.md
deleted file mode 100644
index 699867f4f..000000000
--- a/docs/developer/project-code-audit-2026-07.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Ophel Atlas 代码与开发者文档审计记录（2026-07-06）
-
-## 性能与维护性风险
-
-| 优先级 | 类型 | 问题                                                                                                            | 证据                                                                                                                                                                                                              | 建议                                                                                                         |
-| ------ | ---- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| P3     | 性能 | 多个模块依赖定时扫描或轮询：URL 兜底 1 秒、Shadow DOM 表格扫描 1 秒、Mermaid fallback 扫描、会话同步 3 秒轮询。 | `src/core/modules-init.ts:744-745`；`src/core/copy-manager.ts:9-10`、`src/core/copy-manager.ts:414-442`；`src/core/assistant-mermaid-renderer.ts:624-636`；`src/core/conversation/manager.ts:660-676`。 | 现状有 `document.hidden`/focus 等保护，不是立即缺陷。后续新增扫描时要先复用已有观察器或事件，避免叠加轮询。 |
diff --git a/docs/developer/troubleshooting.md b/docs/developer/troubleshooting.md
index 83724f757..9d156b770 100644
--- a/docs/developer/troubleshooting.md
+++ b/docs/developer/troubleshooting.md
@@ -722,6 +722,8 @@ Gemini 生成的图片通常托管在 `googleusercontent.com`，但也可能重
 
 **日期**: 2026-01-03
 
+> 2026-07 更新：当前菜单和对话框已统一渲染到 Ophel Shadow Root 内的 `#ophel-overlay-root`。以下 `document.body` Portal 内容仅用于解释历史根因，不得作为新实现模板。
+
 ### 症状
 
 - 面板在边缘吸附（Edge Snap）隐藏状态下，用户悬停显示面板后打开菜单或对话框
@@ -734,7 +736,7 @@ Gemini 生成的图片通常托管在 `googleusercontent.com`，但也可能重
 
 1. 用户可以将面板拖到屏幕边缘，面板会自动吸附并隐藏
 2. 当鼠标悬停在面板区域时，面板通过 CSS `:hover` 或 `.edge-peek` 类显示
-3. 菜单和对话框通过 React Portal 渲染到 `document.body`，不在面板 DOM 内部
+3. 当时菜单和对话框通过 React Portal 渲染到 `document.body`，不在面板 DOM 内部（现已废弃）
 
 相关代码结构：
 
@@ -793,7 +795,7 @@ src/components/
 分析对话框的渲染方式：
 
 ```tsx
-// DialogOverlay 组件
+// 历史 DialogOverlay 组件（现已废弃）
 const dialogContent = (
   <div className="conversations-dialog-overlay" onClick={onClose}>
     {/* 全屏覆盖层，z-index: 1000003 */}
@@ -801,7 +803,7 @@ const dialogContent = (
   </div>
 )
 
-return createPortal(dialogContent, document.body)
+return createPortal(dialogContent, document.body) // 不要在当前代码中复用
 ```
 
 **根因**：
@@ -1763,7 +1765,7 @@ useEffect(() => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
       hideTimerRef.current = setTimeout(() => {
         if (!isInputFocusedRef.current && !isSettingsOpenRef.current && !isInteractionActiveRef.current) {
-          const portalElements = document.body.querySelectorAll(/* Portal 选择器 */)
+          const portalElements = window.__ophelOverlayRoot?.querySelectorAll(/* 覆盖层选择器 */)
           if (portalElements.length === 0) {
             setIsEdgePeeking(false)
           }
@@ -1829,6 +1831,8 @@ onMouseLeave={() => {
 
 **日期**: 2026-01-11
 
+> 2026-07 更新：Shadow Host 仍使用 body 挂载与站点级重挂载保护，但面板覆盖层已固定在 Shadow Root 内；本节关于 body Portal 的比较是历史方案分析。
+
 ### 症状
 
 - 在 ChatGPT 页面上，面板刷新后短暂显示后消失
@@ -1851,7 +1855,7 @@ ChatGPT 是一个 React 应用，使用 **React Hydration** 初始化页面。Pl
 
 将面板挂载到 `document.documentElement`（`<html>`）可以避开 Hydration，但引发了连锁问题：
 
-1. **Portal 渲染问题**：`createPortal(content, document.body)` 渲染的菜单/对话框在 Shadow DOM 外部，样式丢失
+1. **历史 Portal 渲染问题**：当时 `createPortal(content, document.body)` 让菜单/对话框离开 Shadow DOM 并丢失样式
 2. **pointer-events 问题**：`.gh-root` 有 `pointer-events: none`，Portal 容器需要特殊处理
 3. **z-index 管理复杂**：需要为 Portal 容器设置层级，与现有组件的 z-index 产生冲突
 
@@ -1892,15 +1896,13 @@ export const mountShadowHost: PlasmoMountShadowHost = ({ shadowHost }) => {
 }
 ```
 
-### 挂载位置对 Portal 的影响
+### 当前挂载与 Portal 边界
 
-| 维度               | body 挂载                   | html 挂载                         |
-| ------------------ | --------------------------- | --------------------------------- |
-| **Portal 目标**    | `document.body`（主文档）   | 需要 Shadow DOM 内的容器          |
-| **pointer-events** | 自然继承，无需处理          | 需要显式设置                      |
-| **z-index**        | 主文档层叠上下文，清晰      | Shadow DOM 内，需额外管理         |
-| **样式隔离**       | Portal 在主文档，需注入样式 | Portal 在 Shadow DOM 内，自动隔离 |
-| **复杂度**         | ⭐️ 简单                    | ⭐️⭐️⭐️ 复杂                    |
+| 对象 | 当前目标 | 约束 |
+| --- | --- | --- |
+| Shadow Host | `document.body`，部分 SPA 使用延迟挂载/重挂载保护 | 只负责承载 Ophel Shadow Root |
+| 面板覆盖层 | Shadow Root 内的 `#ophel-overlay-root` | 共享主题变量、样式隔离和 z-index 体系 |
+| 文档根伪元素/页面增强 | `document.head` 或目标第三方 Shadow Root | 仅限不能在 Ophel Shadow Root 生效的能力 |
 
 ### 经验总结
 
diff --git a/src/components/ConversationDialogs.tsx b/src/components/ConversationDialogs.tsx
index fc0245c19..2d91f6588 100644
--- a/src/components/ConversationDialogs.tsx
+++ b/src/components/ConversationDialogs.tsx
@@ -38,10 +38,7 @@ interface DialogOverlayProps {
   onClose: () => void
 }
 
-/**
- * 对话框覆盖层 - 使用 Portal 渲染到 document.body
- * 这样对话框会出现在面板外面，覆盖整个页面
- */
+/** 会话业务样式包装；焦点、ESC、ARIA 与 Shadow Portal 由通用 DialogOverlay 负责。 */
 export const DialogOverlay: React.FC<DialogOverlayProps> = ({ children, onClose }) => {
   return (
     <BaseDialogOverlay

From 23174122e51540da26d3f3b5037163aa77ecc093 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 18:36:52 +0800
Subject: [PATCH 12/17] refactor(ui): remove page-level shadow css imports

---
 src/components/ConversationMenus.tsx         | 4 ++--
 src/components/ConversationsTab.tsx          | 2 --
 src/tabs/options/components/LanguageMenu.tsx | 6 +++---
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/ConversationMenus.tsx b/src/components/ConversationMenus.tsx
index bf8c203b3..bb2d4ddab 100644
--- a/src/components/ConversationMenus.tsx
+++ b/src/components/ConversationMenus.tsx
@@ -34,7 +34,7 @@ export interface MenuAnchorPoint {
 }
 
 /**
- * 上下文菜单 - 使用 Portal 渲染到 document.body
+ * 上下文菜单 - 使用 Portal 渲染到 Ophel Shadow overlay root
  * 这样避免被 MainPanel 的 transform 影响 fixed 定位
  */
 export const ContextMenu: React.FC<MenuProps> = ({ anchorEl, anchorPoint, onClose, children }) => {
@@ -121,7 +121,7 @@ export const ContextMenu: React.FC<MenuProps> = ({ anchorEl, anchorPoint, onClos
 
   if ((!anchorEl && !anchorPoint) || !portalTarget) return null
 
-  // 使用 Portal 渲染到 document.body，避免 transform 影响 fixed 定位
+  // 使用 Shadow overlay root，避开面板 overflow，同时继承同一主题变量。
   const menuContent = (
     <div
       ref={menuRef}
diff --git a/src/components/ConversationsTab.tsx b/src/components/ConversationsTab.tsx
index 1c0b843c1..0df9cff96 100644
--- a/src/components/ConversationsTab.tsx
+++ b/src/components/ConversationsTab.tsx
@@ -33,8 +33,6 @@ import { LoadingOverlay } from "./LoadingOverlay"
 import { ConversationMenu, ExportMenu, FolderMenu, type MenuAnchorPoint } from "./ConversationMenus"
 import { SegmentedExportDialog } from "./SegmentedExportDialog"
 
-import "~styles/conversations.css"
-
 // 渐进式加载：每次渲染的会话批次大小
 const PROGRESSIVE_BATCH_SIZE = 30
 
diff --git a/src/tabs/options/components/LanguageMenu.tsx b/src/tabs/options/components/LanguageMenu.tsx
index f665b6d37..cb3df1916 100644
--- a/src/tabs/options/components/LanguageMenu.tsx
+++ b/src/tabs/options/components/LanguageMenu.tsx
@@ -39,8 +39,8 @@ export const LanguageMenu: React.FC<LanguageMenuProps> = ({
   useEffect(() => {
     if (!triggerRef.current) return
     const rect = triggerRef.current.getBoundingClientRect()
-    // Position: Bottom-Right aligned with trigger, appearing ABOVE it
-    // Note: Since we are in Portal (Light DOM), coordinates are relative to viewport, which matches rect.
+    // Position: Bottom-Right aligned with trigger, appearing ABOVE it.
+    // fixed 坐标按 viewport 计算；独立 Options 与面板设置都由各自 overlay root 承载。
     setPosition({
       top: rect.top - 10, // Slight offset
       left: rect.right, // Align to right edge
@@ -49,7 +49,7 @@ export const LanguageMenu: React.FC<LanguageMenuProps> = ({
 
   if (!portalTarget) return null
 
-  // Use createPortal to render outside of any overflow:hidden containers
+  // Render outside overflow:hidden containers while staying in the current overlay root.
   return createPortal(
     <div className="lang-menu-portal" style={{ position: "relative", zIndex: 2147483647 }}>
       {/* Backdrop */}

From b9f735d363e31c06300f668b4a400f1f92d69bf9 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Fri, 10 Jul 2026 18:41:14 +0800
Subject: [PATCH 13/17] ci(audit): enforce tests and bundle budgets

---
 .github/workflows/ci.yml                   | 17 ++++++++++++++++-
 docs/developer/project-audit-2026-07-10.md |  6 +++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 73e701e66..bd3600e1e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -57,5 +57,20 @@ jobs:
       - name: 📐 Type Check (TypeScript)
         run: pnpm typecheck
 
-      - name: 🏗️ Verify Build
+      - name: 🧪 Run Tests (Vitest)
+        run: pnpm test:run
+
+      - name: 🎨 Validate Theme Tokens
+        run: pnpm check:theme-tokens
+
+      - name: 🏗️ Verify Chrome Build
         run: pnpm build
+
+      - name: 🦊 Verify Firefox Build
+        run: pnpm build:firefox
+
+      - name: 🐒 Verify Userscript Build
+        run: pnpm build:userscript
+
+      - name: 📦 Enforce Bundle Budgets
+        run: pnpm check:bundle-budget
diff --git a/docs/developer/project-audit-2026-07-10.md b/docs/developer/project-audit-2026-07-10.md
index 5f9411d0d..9b5245962 100644
--- a/docs/developer/project-audit-2026-07-10.md
+++ b/docs/developer/project-audit-2026-07-10.md
@@ -57,9 +57,9 @@
 | 产物 | 原始大小 | gzip |
 | --- | ---: | ---: |
 | `main.*.js` | 1,507,680 B | — |
-| `ui-entry.*.js` | 2,257,230 B | — |
-| 两个扩展内容脚本合计 | 3,764,910 B | 约 975.4 KiB |
-| `ophel.user.js` | 1,854,752 B | 约 472.0 KiB |
+| `ui-entry.*.js` | 2,257,103 B | — |
+| 两个扩展内容脚本合计 | 3,764,783 B | 约 975.4 KiB |
+| `ophel.user.js` | 1,830,738 B | 约 467.8 KiB |
 
 扩展内容脚本 raw 合计相对审计基线下降约 **49.8%**，超过 40% 完成指标。`scripts/check-bundle-budget.mjs` 对扩展内容入口与 userscript 同时设置 raw/gzip 上限，生产构建后可运行 `pnpm check:bundle-budget`。
 

From 41454dba5b42d23098a0defe0f052d14f3327b7a Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Mon, 13 Jul 2026 20:42:59 +0800
Subject: [PATCH 14/17] fix(runtime): restore locale switching after bundle
 split

---
 docs/developer/architecture.md           |  12 +-
 docs/developer/css-architecture.md       |   5 +-
 scripts/check-bundle-budget.mjs          |  56 +++
 src/adapters/base.ts                     |   5 +-
 src/adapters/grok.ts                     |   3 +-
 src/adapters/qwen-studio.ts              |   4 +-
 src/background.ts                        |  14 +
 src/components/QueueOverlay.tsx          |  11 +-
 src/components/ui/OverlayPortal.test.tsx |  51 +++
 src/components/ui/OverlayPortal.tsx      |  14 +
 src/contents/main.ts                     | 557 +----------------------
 src/contents/site-aistudio.ts            |  11 +
 src/contents/site-chatglm.ts             |  11 +
 src/contents/site-chatgpt.ts             |  11 +
 src/contents/site-claude.ts              |  11 +
 src/contents/site-deepseek.ts            |  11 +
 src/contents/site-doubao.ts              |  11 +
 src/contents/site-gemini-enterprise.ts   |  11 +
 src/contents/site-gemini.ts              |  11 +
 src/contents/site-grok.ts                |  11 +
 src/contents/site-ima.ts                 |  11 +
 src/contents/site-kimi.ts                |  11 +
 src/contents/site-qianwen.ts             |  11 +
 src/contents/site-qwen-studio.ts         |  11 +
 src/contents/site-yuanbao.ts             |  11 +
 src/contents/site-zai.ts                 |  11 +
 src/core/content-script-main.ts          | 550 ++++++++++++++++++++++
 src/core/modules-init.ts                 |   3 +-
 src/locales/loader.test.ts               |  12 +
 src/locales/loader.ts                    |  16 +
 src/styles/queue-overlay.css             |   5 +-
 src/types/global.d.ts                    |   5 +
 src/utils/i18n.test.ts                   | 112 ++++-
 src/utils/i18n.ts                        | 138 ++++--
 src/utils/messaging.ts                   |  27 ++
 35 files changed, 1141 insertions(+), 624 deletions(-)
 create mode 100644 src/components/ui/OverlayPortal.test.tsx
 create mode 100644 src/contents/site-aistudio.ts
 create mode 100644 src/contents/site-chatglm.ts
 create mode 100644 src/contents/site-chatgpt.ts
 create mode 100644 src/contents/site-claude.ts
 create mode 100644 src/contents/site-deepseek.ts
 create mode 100644 src/contents/site-doubao.ts
 create mode 100644 src/contents/site-gemini-enterprise.ts
 create mode 100644 src/contents/site-gemini.ts
 create mode 100644 src/contents/site-grok.ts
 create mode 100644 src/contents/site-ima.ts
 create mode 100644 src/contents/site-kimi.ts
 create mode 100644 src/contents/site-qianwen.ts
 create mode 100644 src/contents/site-qwen-studio.ts
 create mode 100644 src/contents/site-yuanbao.ts
 create mode 100644 src/contents/site-zai.ts
 create mode 100644 src/core/content-script-main.ts
 create mode 100644 src/locales/loader.test.ts
 create mode 100644 src/locales/loader.ts

diff --git a/docs/developer/architecture.md b/docs/developer/architecture.md
index e109aacfc..7f7479d04 100644
--- a/docs/developer/architecture.md
+++ b/docs/developer/architecture.md
@@ -31,10 +31,11 @@ Ophel 是一款跨平台浏览器扩展（同时支持油猴脚本），将 AI 
 本项目采用 **适配器模式 (Adapter Pattern)** 实现多站点支持：
 
 ```
-Content Script (main.ts / userscript entry)
+Content Script (site-*.ts + main.ts / userscript entry)
     |
     v
-loadAdapter(location) --> hostname/path 轻量路由 --> 动态 import 当前 SiteAdapter
+扩展：site-*.ts 静态注册唯一 SiteAdapter --> main.ts 启动公共模块
+油猴：loadAdapter(location) --> hostname/path 轻量路由 --> 动态 import 当前 SiteAdapter
     |
     v
 adapter-runtime.ts --> main、UI 与 userscript 共享当前 adapter 实例
@@ -127,7 +128,7 @@ graph TD
 | `src/core/`       | 核心业务模块（多个管理器），由 `modules-init.ts` 统一编排     | `modules-init.ts`, `outline-manager.ts`, `theme-manager.ts`, `layout-manager.ts`, `conversation/`, `webdav-sync.ts`, `assistant-mermaid-renderer.ts`, `gemini-mystuff-bridge.ts`, `usage-counter-manager.ts`                         |
 | `src/components/` | React UI 层，运行在 Shadow DOM 中                             | `App.tsx`, `MainPanel.tsx`, `OutlineTab.tsx`, `ConversationsTab.tsx`, `SettingsModal.tsx`, `global-search/`                                                                                                                          |
 | `src/stores/`     | Zustand 状态管理，persist 到 chrome.storage.local             | `settings-store.ts`, `conversations-store.ts`, `prompts-store.ts`, `folders-store.ts`, `tags-store.ts`                                                                                                                               |
-| `src/contents/`   | Plasmo Content Script 入口                                    | `main.ts`（逻辑入口）, `ui-entry.tsx`（UI/Shadow DOM）, `monitor-entry.ts`（网络监控）, `aistudio-preload.ts`, `gemini-watermark-main.ts`, `iframe-scroll-main.ts`, `scroll-lock-main.ts`                                            |
+| `src/contents/`   | Plasmo Content Script 入口                                    | `site-*.ts`（站点适配器静态注册）, `main.ts`（公共逻辑入口）, `ui-entry.tsx`（UI/Shadow DOM）, `monitor-entry.ts`（网络监控）, `aistudio-preload.ts`, `gemini-watermark-main.ts`, `iframe-scroll-main.ts`, `scroll-lock-main.ts`                                            |
 | `src/platform/`   | 平台抽象层（浏览器扩展 vs 油猴脚本）                          | `types.ts`, `index.ts`, `extension/`, `userscript/`                                                                                                                                                                                  |
 | `src/utils/`      | 工具函数                                                      | `i18n.ts`, `dom-toolkit.ts`, `exporter.ts`, `markdown.ts`, `themes/`, `scroll-helper.ts`                                                                                                                                             |
 | `src/constants/`  | 常量与默认配置                                                | `defaults.ts`（SITE_IDS）, `ui.ts`, `shortcuts.ts`, `tools-menu.ts`                                                                                                                                                                  |
@@ -190,7 +191,8 @@ pnpm docs:build    # 构建文档
 
 | 入口                      | 路径                                | 说明                                  |
 | ------------------------- | ----------------------------------- | ------------------------------------- |
-| Content Script 逻辑入口   | `src/contents/main.ts`              | 初始化适配器和核心模块                |
+| Content Script 适配器入口 | `src/contents/site-*.ts`            | 按站点静态注册唯一适配器              |
+| Content Script 逻辑入口   | `src/contents/main.ts`              | 使用已注册适配器初始化核心模块        |
 | Content Script UI 入口    | `src/contents/ui-entry.tsx`         | Shadow DOM 内挂载 React App           |
 | Background Service Worker | `src/background.ts`                 | 消息处理、通知、代理请求、Cookie 管理 |
 | Popup 页面                | `src/popup.tsx`                     | 扩展弹出窗口                          |
@@ -446,7 +448,7 @@ feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert, deps, ux
 
 ### 关键路径
 
-- 用户操作流程：`popup.tsx` -> 支持站点检测 -> Content Script 注入 -> `main.ts` 初始化适配器 -> `modules-init.ts` 初始化模块 -> `ui-entry.tsx` 挂载 Shadow DOM -> `App.tsx` 渲染面板
+- 用户操作流程：`popup.tsx` -> 支持站点检测 -> `site-*.ts` 静态注册当前站点适配器 -> `main.ts` 启动公共逻辑 -> `modules-init.ts` 初始化模块 -> `ui-entry.tsx` 挂载 Shadow DOM -> `App.tsx` 渲染面板
 - 设置同步流程：UI 操作 -> `useSettingsStore.updateNestedSetting()` -> Zustand persist -> `chrome.storage.local` -> `subscribeModuleUpdates()` 热更新模块
 - 会话管理流程：`ConversationObserverConfig` 观察 DOM -> `ConversationManager` 聚合数据 -> `conversations-store` 持久化
 - WebDAV 同步流程：`WebDAVSyncManager` -> `MSG_WEBDAV_REQUEST` -> Background SW 代理 -> WebDAV 服务器
diff --git a/docs/developer/css-architecture.md b/docs/developer/css-architecture.md
index c446e5aaa..f8c57c7e3 100644
--- a/docs/developer/css-architecture.md
+++ b/docs/developer/css-architecture.md
@@ -352,7 +352,7 @@ src/
 | 会话列表         | `conversations.css`                     | Plasmo Shadow DOM          | `getStyle()`            |
 | 提示词 Tab       | `style.css`                             | Plasmo Shadow DOM          | `getStyle()`            |
 | 通用覆盖层       | `overlays.css`                          | Shadow overlay root        | `getStyle()`            |
-| Prompt Queue     | `queue-overlay.css`                     | Shadow overlay root        | `getStyle()`            |
+| Prompt Queue     | `queue-overlay.css`                     | Shadow Root ambient layer  | `getStyle()`            |
 | CSS 变量默认值   | `theme-variables.css`                   | Plasmo Shadow DOM          | `@import` by style.css  |
 | 主题预置变量     | `themes/light/*.ts`, `themes/dark/*.ts` | Plasmo Shadow DOM          | `ThemeManager` 动态注入 |
 | 代码高亮         | `markdown.ts`                           | 多个上下文                 | 函数返回字符串          |
@@ -430,7 +430,8 @@ export const getStyle = () => {
 
 **Portal 渲染规则**：
 
-- 面板内 Dialog、Menu、Tooltip、Loading、Queue、Prompt 编辑/预览默认通过 `OverlayPortalProvider` 渲染到 Shadow Root 内的唯一 overlay root。
+- 面板内 Dialog、Menu、Tooltip、Loading、Prompt 编辑/预览默认通过 `OverlayPortalProvider` 渲染到 Shadow Root 内的唯一 overlay root。
+- Prompt Queue 的常驻胶囊和面板渲染到 Shadow Root 环境层，使用低层级避免覆盖站点弹窗；Queue 发起的 Dialog 仍进入统一 overlay root。
 - `useOverlayPortalTarget()` 在 overlay root 尚未注册时返回 `null`；调用方应等待或不渲染，不得静默回退 `document.body`。
 - 只有必须影响宿主文档根的能力（例如 `::view-transition-*`）或页面增强样式，才写入 `document.head`；这类节点不属于面板 overlay。
 - 不要把面板组件 Portal 到 `document.body`，否则会丢失 `ThemeManager` 只注入 Shadow Root 的动态变量，并污染宿主页 DOM/CSS。
diff --git a/scripts/check-bundle-budget.mjs b/scripts/check-bundle-budget.mjs
index 5b2e03567..2ed770428 100644
--- a/scripts/check-bundle-budget.mjs
+++ b/scripts/check-bundle-budget.mjs
@@ -11,6 +11,7 @@ const AUDIT_CONTENT_ENTRY_BASELINE_RAW = 7_494_836
 const MINIMUM_CONTENT_ENTRY_REDUCTION = 0.4
 const budgets = {
   contentEntries: { raw: 4_100_000, gzip: 1_150_000 },
+  siteEntry: { raw: 1_100_000, gzip: 300_000 },
   userscript: { raw: 2_100_000, gzip: 550_000 },
 }
 
@@ -37,6 +38,18 @@ function findSingleFile(directory, pattern, label) {
   return path.join(directory, matches[0])
 }
 
+function findFiles(directory, pattern, label) {
+  if (!fs.existsSync(directory)) {
+    throw new Error(`Missing build directory: ${path.relative(rootDir, directory)}`)
+  }
+
+  const matches = fs.readdirSync(directory).filter((fileName) => pattern.test(fileName))
+  if (matches.length === 0) {
+    throw new Error(`Expected at least one ${label} artifact, found none`)
+  }
+  return matches.map((fileName) => path.join(directory, fileName))
+}
+
 function measure(filePath) {
   const content = readRequiredFile(filePath)
   return {
@@ -61,16 +74,56 @@ function assertBudget(label, measurement, budget) {
 
 try {
   const main = measure(findSingleFile(chromeBuildDir, /^main\.[^.]+\.js$/, "main content entry"))
+  const siteEntries = findFiles(
+    chromeBuildDir,
+    /^site-[^.]+\.[^.]+\.js$/,
+    "site content entry",
+  ).map(measure)
   const uiEntry = measure(
     findSingleFile(chromeBuildDir, /^ui-entry\.[^.]+\.js$/, "UI content entry"),
   )
   const userscript = measure(userscriptFile)
+  const largestSiteEntry = siteEntries.reduce((largest, entry) =>
+    entry.raw > largest.raw ? entry : largest,
+  )
   const contentEntries = {
     raw: main.raw + uiEntry.raw,
     gzip: main.gzip + uiEntry.gzip,
   }
 
+  const manifest = JSON.parse(
+    readRequiredFile(path.join(chromeBuildDir, "manifest.json")).toString("utf8"),
+  )
+  const runtimeBusinessScripts = (manifest.web_accessible_resources || [])
+    .flatMap((entry) => entry.resources || [])
+    .filter((resource) => resource.endsWith(".js") && !resource.startsWith("assets/"))
+
+  if (runtimeBusinessScripts.length > 0) {
+    throw new Error(
+      `Content scripts expose runtime-loaded JS chunks: ${runtimeBusinessScripts.join(", ")}`,
+    )
+  }
+
+  for (const entry of [main, ...siteEntries, uiEntry]) {
+    const source = readRequiredFile(entry.filePath).toString("utf8")
+    if (source.includes(".bundle.root(")) {
+      throw new Error(
+        `${path.basename(entry.filePath)} contains a runtime JS chunk lookup from a content script`,
+      )
+    }
+
+    if (
+      path.basename(entry.filePath).startsWith("site-") &&
+      !source.includes("ophel:adapter-runtime-change")
+    ) {
+      throw new Error(
+        `${path.basename(entry.filePath)} does not register its site adapter in the shared runtime`,
+      )
+    }
+  }
+
   assertBudget("Extension content entries", contentEntries, budgets.contentEntries)
+  assertBudget("Largest site adapter entry", largestSiteEntry, budgets.siteEntry)
   assertBudget("Userscript", userscript, budgets.userscript)
 
   const reduction = 1 - contentEntries.raw / AUDIT_CONTENT_ENTRY_BASELINE_RAW
@@ -83,6 +136,9 @@ try {
   console.log(
     `[bundle-budget] content entries ${formatBytes(contentEntries.raw)} raw / ${formatBytes(contentEntries.gzip)} gzip (${(reduction * 100).toFixed(1)}% below audit baseline)`,
   )
+  console.log(
+    `[bundle-budget] largest site entry ${path.basename(largestSiteEntry.filePath)} ${formatBytes(largestSiteEntry.raw)} raw / ${formatBytes(largestSiteEntry.gzip)} gzip`,
+  )
   console.log(
     `[bundle-budget] userscript ${formatBytes(userscript.raw)} raw / ${formatBytes(userscript.gzip)} gzip`,
   )
diff --git a/src/adapters/base.ts b/src/adapters/base.ts
index f05034a4a..e289a99d8 100644
--- a/src/adapters/base.ts
+++ b/src/adapters/base.ts
@@ -10,7 +10,9 @@ import { extractConversationTitleFromDocumentTitle } from "~utils/conversation-t
 import { DOMToolkit } from "~utils/dom-toolkit"
 import { createExportAssetCollector, type ExportAssetCollector } from "~utils/export-assets"
 import type { ExportBundle, ExportFormat, ExportMessage } from "~utils/exporter"
+import { t } from "~utils/i18n"
 import type { ExportPackaging } from "~utils/storage"
+import { showToast } from "~utils/toast"
 
 // ==================== 类型定义 ====================
 
@@ -1822,9 +1824,6 @@ export abstract class SiteAdapter {
     reason: "button_not_found" | "menu_empty" | "not_found",
   ): Promise<void> {
     try {
-      const { showToast } = await import("~utils/toast")
-      const { t } = await import("~utils/i18n")
-
       let message: string
       switch (reason) {
         case "button_not_found":
diff --git a/src/adapters/grok.ts b/src/adapters/grok.ts
index 38fa731e1..c7dcedb78 100644
--- a/src/adapters/grok.ts
+++ b/src/adapters/grok.ts
@@ -24,6 +24,7 @@ import {
 } from "~utils/export-assets"
 import { htmlToMarkdown, type ExportBundle, type ExportMessage } from "~utils/exporter"
 import { t } from "~utils/i18n"
+import { showToast } from "~utils/toast"
 
 import {
   SiteAdapter,
@@ -173,8 +174,6 @@ export class GrokAdapter extends SiteAdapter {
 
     if (viewAllBtn) {
       // 显示同步提示
-      const { showToast } = await import("~utils/toast")
-      const { t } = await import("~utils/i18n")
       showToast(t("grokSyncingConversations"))
       ;(viewAllBtn as HTMLElement).click()
 
diff --git a/src/adapters/qwen-studio.ts b/src/adapters/qwen-studio.ts
index 7e3fe8fce..c974533e0 100644
--- a/src/adapters/qwen-studio.ts
+++ b/src/adapters/qwen-studio.ts
@@ -23,6 +23,7 @@ import {
 import { htmlToMarkdown, type ExportBundle, type ExportMessage } from "~utils/exporter"
 import { loadCompleteHistoryForExport } from "~utils/history-loader"
 import { t } from "~utils/i18n"
+import { showToast } from "~utils/toast"
 
 import {
   SiteAdapter,
@@ -2376,9 +2377,6 @@ export class QwenAiAdapter extends SiteAdapter {
     reason: QwenAiModelLockFailureReason,
   ): Promise<void> {
     try {
-      const { showToast } = await import("~utils/toast")
-      const { t } = await import("~utils/i18n")
-
       let message: string
       switch (reason) {
         case "button_not_found":
diff --git a/src/background.ts b/src/background.ts
index 47a93935f..6b28f039c 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,4 +1,5 @@
 import { APP_DISPLAY_NAME } from "~utils/config"
+import { loadLocaleMessages } from "~locales/loader"
 import {
   MSG_CLEAR_ALL_DATA,
   MSG_CHECK_CLAUDE_GENERATING,
@@ -8,6 +9,7 @@ import {
   MSG_FOCUS_TAB,
   MSG_GET_AISTUDIO_MODELS,
   MSG_GET_CLAUDE_SESSION_KEY,
+  MSG_GET_LOCALE_MESSAGES,
   MSG_OPEN_OPTIONS_PAGE,
   MSG_OPEN_URL,
   MSG_PROXY_FETCH,
@@ -250,6 +252,18 @@ async function setupDynamicRules() {
 // 消息监听 - 与 Content Script 通信
 chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendResponse) => {
   switch (message.type) {
+    case MSG_GET_LOCALE_MESSAGES: {
+      try {
+        sendResponse({ success: true, messages: loadLocaleMessages(message.locale) })
+      } catch (error) {
+        sendResponse({
+          success: false,
+          error: error instanceof Error ? error.message : String(error),
+        })
+      }
+      break
+    }
+
     case MSG_SHOW_NOTIFICATION: {
       // 将 tabId/windowId 编码进 notifId，SW 重启后点击通知仍可正确跳转
       const tabId = sender.tab?.id
diff --git a/src/components/QueueOverlay.tsx b/src/components/QueueOverlay.tsx
index f877d1ba5..44489573b 100644
--- a/src/components/QueueOverlay.tsx
+++ b/src/components/QueueOverlay.tsx
@@ -12,7 +12,7 @@ import { createPortal } from "react-dom"
 import type { SiteAdapter } from "~adapters/base"
 import { CleanupIcon, ImportIcon, PromptQueueIcon } from "~components/icons"
 import { DialogOverlay, Tooltip } from "~components/ui"
-import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
+import { resolveAmbientPortalTarget, useOverlayPortalTarget } from "~components/ui/OverlayPortal"
 import { extractVariables } from "~components/VariableInputDialog"
 import { formatShortcut, normalizeShortcutBinding } from "~constants/shortcuts"
 import type { QueueDispatcher } from "~core/queue-dispatcher"
@@ -37,7 +37,8 @@ type QueueBatchSource = "text" | "library"
 type QueueLibraryMode = "single" | "line"
 
 export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher }) => {
-  const portalTarget = useOverlayPortalTarget()
+  const overlayPortalTarget = useOverlayPortalTarget()
+  const queuePortalTarget = resolveAmbientPortalTarget(overlayPortalTarget)
   const [isExpanded, setIsExpanded] = useState(false)
   const [isGenerating, setIsGenerating] = useState(false)
   const [inputValue, setInputValue] = useState("")
@@ -549,7 +550,7 @@ export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher
 
   // ==================== 渲染 ====================
 
-  if (!position || !portalTarget) return null
+  if (!position || !queuePortalTarget) return null
 
   // 因为定位点(top, left)标志着组件要显示的右下角（紧贴输入框上方右侧）
   // 所以需要用 translate(-100%, -100%) 把组件从锚定点推上去靠左
@@ -579,7 +580,7 @@ export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher
           </span>
         </div>
       </Tooltip>,
-      portalTarget,
+      queuePortalTarget,
     )
   }
 
@@ -828,7 +829,7 @@ export const QueueOverlay: React.FC<QueueOverlayProps> = ({ adapter, dispatcher
             {shortcutText && <span className="gh-queue-shortcut-hint">{shortcutText}</span>}
           </div>
         </div>,
-        portalTarget,
+        queuePortalTarget,
       )}
 
       {isBatchDialogOpen && (
diff --git a/src/components/ui/OverlayPortal.test.tsx b/src/components/ui/OverlayPortal.test.tsx
new file mode 100644
index 000000000..09ec6a0a4
--- /dev/null
+++ b/src/components/ui/OverlayPortal.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen, within } from "@testing-library/react"
+import React from "react"
+import { describe, expect, it } from "vitest"
+
+import {
+  OverlayPortalProvider,
+  resolveAmbientPortalTarget,
+  useOverlayPortalTarget,
+} from "./OverlayPortal"
+
+const PortalTargetProbe = () => {
+  const overlayTarget = useOverlayPortalTarget()
+  const ambientTarget = resolveAmbientPortalTarget(overlayTarget)
+
+  return (
+    <output data-testid="portal-target">
+      {ambientTarget instanceof ShadowRoot ? "shadow-root" : "overlay-root"}
+    </output>
+  )
+}
+
+describe("OverlayPortalProvider", () => {
+  it("resolves persistent controls to the ambient Shadow Root layer", () => {
+    const host = document.createElement("div")
+    const shadowRoot = host.attachShadow({ mode: "open" })
+    const container = shadowRoot.appendChild(document.createElement("div"))
+    document.body.appendChild(host)
+
+    const { unmount } = render(
+      <OverlayPortalProvider>
+        <PortalTargetProbe />
+      </OverlayPortalProvider>,
+      { container },
+    )
+
+    expect(within(container).getByTestId("portal-target")).toHaveTextContent("shadow-root")
+    expect(window.__ophelOverlayRoot?.getRootNode()).toBe(shadowRoot)
+    unmount()
+    host.remove()
+  })
+
+  it("keeps non-Shadow DOM surfaces on the shared overlay root", () => {
+    render(
+      <OverlayPortalProvider>
+        <PortalTargetProbe />
+      </OverlayPortalProvider>,
+    )
+
+    expect(screen.getByTestId("portal-target")).toHaveTextContent("overlay-root")
+  })
+})
diff --git a/src/components/ui/OverlayPortal.tsx b/src/components/ui/OverlayPortal.tsx
index 46a138d62..d07c15330 100644
--- a/src/components/ui/OverlayPortal.tsx
+++ b/src/components/ui/OverlayPortal.tsx
@@ -33,3 +33,17 @@ export const OverlayPortalProvider: React.FC<OverlayPortalProviderProps> = ({ ch
 export function useOverlayPortalTarget(): HTMLElement | null {
   return useContext(OverlayPortalContext)
 }
+
+/**
+ * Resolve the Shadow Root ambient layer for persistent controls that should stay below page dialogs.
+ */
+export function resolveAmbientPortalTarget(
+  overlayPortalTarget: HTMLElement | null,
+): Element | DocumentFragment | null {
+  if (!overlayPortalTarget) return null
+
+  const rootNode = overlayPortalTarget.getRootNode()
+  return typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot
+    ? rootNode
+    : overlayPortalTarget
+}
diff --git a/src/contents/main.ts b/src/contents/main.ts
index 658147b43..5b886826f 100644
--- a/src/contents/main.ts
+++ b/src/contents/main.ts
@@ -1,452 +1,14 @@
-/**
- * Ophel - Content Script 入口
- *
- * 多站点 AI 对话增强工具
- * 核心模块初始化入口
- */
-
 import type { PlasmoCSConfig } from "plasmo"
 
-import { loadAdapter } from "~adapters"
-import { DEFAULT_FOLDERS, SITE_IDS, getDefaultPromptChains, getDefaultPrompts } from "~constants"
-import {
-  initCoreModules,
-  initUrlChangeObserver,
-  handleClearAllData,
-  subscribeModuleUpdates,
-  type ModulesContext,
-} from "~core/modules-init"
-import { setAdapterRuntime } from "~core/adapter-runtime"
-import { APP_DISPLAY_NAME } from "~utils/config"
-import { INTER_LOCAL_FONT_FACE, getPlatformFontFamily } from "~utils/font"
-import { setLanguage } from "~utils/i18n"
-import { useConversationsStore } from "~stores/conversations-store"
-import { useFoldersStore } from "~stores/folders-store"
-import { usePromptChainsStore } from "~stores/prompt-chains-store"
-import { usePromptsStore } from "~stores/prompts-store"
-import { useReadingHistoryStore } from "~stores/reading-history-store"
-import { getSettingsState, useSettingsStore } from "~stores/settings-store"
-import { useTagsStore } from "~stores/tags-store"
-import {
-  EVENT_EXTENSION_UPDATE_AVAILABLE,
-  MSG_CLEAR_ALL_DATA,
-  MSG_EXTENSION_UPDATE_AVAILABLE,
-  MSG_RESTORE_DATA,
-  MSG_START_NEW_CONVERSATION,
-} from "~utils/messaging"
-
-interface AIStudioModelAdapter {
-  getModelList(): Promise<Array<{ id: string; name: string }>>
-}
-
-function hasAIStudioModelList(adapter: unknown): adapter is AIStudioModelAdapter {
-  return (
-    typeof adapter === "object" &&
-    adapter !== null &&
-    "getModelList" in adapter &&
-    typeof adapter.getModelList === "function"
-  )
-}
-
-const resetAllStores = () => {
-  useSettingsStore.getState().resetSettings()
-  usePromptsStore.getState().setPrompts(getDefaultPrompts())
-  usePromptChainsStore.getState().setChains(getDefaultPromptChains())
-  useFoldersStore.setState({ folders: DEFAULT_FOLDERS })
-  useTagsStore.setState({ tags: [] })
-  useConversationsStore.setState({ conversations: {}, lastUsedFolderId: "inbox" })
-  useReadingHistoryStore.setState({ history: {}, lastCleanupRun: 0 })
-}
-
-const OPHEL_EXTENSION_UPDATE_FALLBACK_ID = "ophel-extension-update-fallback"
-const PLASMO_RUNTIME_RELOAD_PROMPT_ID = "__plasmo-loading__"
-let extensionUpdateFallbackTimer: number | null = null
-
-function getExtensionUpdateCopy(version?: string) {
-  const isZh = navigator.language.toLowerCase().startsWith("zh")
-
-  return {
-    kicker: isZh ? "插件已更新" : "Extension updated",
-    description: version
-      ? isZh
-        ? `${APP_DISPLAY_NAME} 已更新至 v${version}。刷新当前页面后即可继续使用最新版本。`
-        : `${APP_DISPLAY_NAME} has been updated to v${version}. Reload this page to keep using the latest version.`
-      : isZh
-        ? `${APP_DISPLAY_NAME} 已更新。刷新当前页面后即可继续使用最新版本。`
-        : `${APP_DISPLAY_NAME} has been updated. Reload this page to keep using the latest version.`,
-    reloadLabel: isZh ? "刷新页面" : "Reload page",
-    closeLabel: isZh ? "关闭" : "Close",
-  }
-}
-
-function suppressPlasmoReloadPrompt(): void {
-  const prompt = document.getElementById(PLASMO_RUNTIME_RELOAD_PROMPT_ID) as HTMLElement | null
-  if (!prompt) return
-
-  prompt.style.setProperty("display", "none", "important")
-  prompt.style.setProperty("visibility", "hidden", "important")
-  prompt.setAttribute("aria-hidden", "true")
-}
-
-function removeFallbackExtensionUpdateNotice(): void {
-  if (extensionUpdateFallbackTimer !== null) {
-    window.clearTimeout(extensionUpdateFallbackTimer)
-    extensionUpdateFallbackTimer = null
-  }
-
-  const existingHost = document.getElementById(OPHEL_EXTENSION_UPDATE_FALLBACK_ID)
-  existingHost?.remove()
-}
-
-function dispatchExtensionUpdateNotice(version?: string): void {
-  if (window.__OPHEL_EXTENSION_UPDATE_DISMISSED__) return
-
-  window.__OPHEL_PENDING_UPDATE_VERSION__ = version || window.__OPHEL_PENDING_UPDATE_VERSION__
-  window.__OPHEL_EXTENSION_UPDATE_AVAILABLE__ = true
-  window.dispatchEvent(
-    new CustomEvent(EVENT_EXTENSION_UPDATE_AVAILABLE, {
-      detail: { version: version || window.__OPHEL_PENDING_UPDATE_VERSION__ },
-    }),
-  )
-}
-
-function isExtensionContextInvalidatedMessage(message: string): boolean {
-  return /Extension context invalidated/i.test(message)
-}
-
-function suppressDefaultReloadPrompt(): void {
-  suppressPlasmoReloadPrompt()
-
-  const root = document.body || document.documentElement
-  if (!root) return
-
-  const candidates = Array.from(root.querySelectorAll<HTMLElement>("*")).filter((element) => {
-    const text = element.textContent?.replace(/\s+/g, " ").trim()
-    return Boolean(text) && /Context Invalidated/i.test(text)
-  })
-
-  candidates.forEach((candidate) => {
-    let current: HTMLElement | null = candidate
-
-    for (let depth = 0; current && depth < 6; depth += 1) {
-      const style = window.getComputedStyle(current)
-      const rect = current.getBoundingClientRect()
-      const isLikelyPrompt =
-        (style.position === "fixed" || style.position === "sticky") &&
-        rect.width <= 480 &&
-        rect.height <= 220 &&
-        rect.bottom >= window.innerHeight - 240
-
-      if (isLikelyPrompt) {
-        current.style.setProperty("display", "none", "important")
-        break
-      }
-
-      current = current.parentElement
-    }
-  })
-}
-
-function startSuppressingDefaultReloadPrompt(): void {
-  suppressDefaultReloadPrompt()
-
-  window.__ophelExtensionUpdatePromptObserver?.disconnect()
-
-  const observer = new MutationObserver(() => {
-    suppressDefaultReloadPrompt()
-  })
-
-  observer.observe(document.documentElement, {
-    childList: true,
-    subtree: true,
-  })
-
-  window.__ophelExtensionUpdatePromptObserver = observer
-
-  window.setTimeout(() => {
-    if (window.__ophelExtensionUpdatePromptObserver === observer) {
-      observer.disconnect()
-      window.__ophelExtensionUpdatePromptObserver = null
-    }
-  }, 12000)
-}
-
-function renderFallbackExtensionUpdateNotice(version?: string): void {
-  const copy = getExtensionUpdateCopy(version || window.__OPHEL_PENDING_UPDATE_VERSION__)
-  removeFallbackExtensionUpdateNotice()
-
-  const host = document.createElement("div")
-  host.id = OPHEL_EXTENSION_UPDATE_FALLBACK_ID
-  host.style.cssText = [
-    "position: fixed",
-    "right: 24px",
-    "bottom: 24px",
-    "z-index: 2147483647",
-    "pointer-events: auto",
-  ].join(";")
-
-  const shadowRoot = host.attachShadow({ mode: "open" })
-  shadowRoot.innerHTML = `
-    <style>
-      ${INTER_LOCAL_FONT_FACE}
-      :host {
-        all: initial;
-      }
-      .ophel-update-card {
-        width: min(380px, calc(100vw - 32px));
-        border-radius: 20px;
-        border: 1px solid rgba(148, 163, 184, 0.2);
-        background: rgba(255, 255, 255, 0.85);
-        backdrop-filter: blur(24px) saturate(180%);
-        -webkit-backdrop-filter: blur(24px) saturate(180%);
-        box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.15), 0 0 0 1.5px inset rgba(255, 255, 255, 0.5);
-        color: #111827;
-        font-family: ${getPlatformFontFamily()};
-        padding: 20px 24px;
-        position: relative;
-        overflow: hidden;
-        animation: ophel-update-notice-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-      }
-      .ophel-update-card::before {
-        content: "";
-        position: absolute;
-        top: 0; left: 0; width: 100%; height: 100%;
-        background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.15), transparent 50%),
-                    radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.08), transparent 40%);
-        pointer-events: none;
-        z-index: -1;
-      }
-      .ophel-update-kicker {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        color: #2563eb;
-        font-size: 13px;
-        font-weight: 700;
-        letter-spacing: 0.02em;
-        margin-bottom: 8px;
-      }
-      .ophel-update-icon {
-        width: 16px;
-        height: 16px;
-        color: #2563eb;
-        animation: ophel-update-icon-pulse 2s infinite ease-in-out;
-      }
-      @keyframes ophel-update-icon-pulse {
-        0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
-        50% { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
-      }
-      .ophel-update-message {
-        color: #374151;
-        font-size: 14px;
-        line-height: 1.6;
-        margin: 0 0 18px;
-        padding-right: 28px;
-      }
-      .ophel-update-actions {
-        display: flex;
-        justify-content: flex-end;
-      }
-      .ophel-update-button {
-        appearance: none;
-        border: none;
-        border-radius: 12px;
-        background: #2563eb;
-        box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.6);
-        color: #ffffff;
-        cursor: pointer;
-        font-size: 13px;
-        font-weight: 600;
-        padding: 10px 18px;
-        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-        position: relative;
-        overflow: hidden;
-      }
-      .ophel-update-button::after {
-        content: '';
-        position: absolute;
-        top: 0; left: 0; width: 100%; height: 100%;
-        background: linear-gradient(rgba(255,255,255,0.1), transparent);
-        opacity: 0;
-        transition: opacity 0.2s;
-      }
-      .ophel-update-button:hover {
-        transform: translateY(-2px) scale(1.02);
-        box-shadow: 0 12px 28px -6px rgba(37, 99, 235, 0.8);
-      }
-      .ophel-update-button:hover::after {
-        opacity: 1;
-      }
-      .ophel-update-close {
-        position: absolute;
-        top: 16px;
-        right: 16px;
-        appearance: none;
-        border: none;
-        outline: none;
-        background: rgba(107, 114, 128, 0.1);
-        color: #6b7280;
-        cursor: pointer;
-        width: 28px;
-        height: 28px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 18px;
-        line-height: 1;
-        padding: 0;
-        transition: all 0.2s;
-      }
-      .ophel-update-close:hover {
-        background: rgba(107, 114, 128, 0.2);
-        color: #111827;
-        transform: rotate(90deg);
-      }
-      @keyframes ophel-update-notice-enter {
-        0% { opacity: 0; transform: translateY(20px) scale(0.95); }
-        100% { opacity: 1; transform: translateY(0) scale(1); }
-      }
-    </style>
-    <section class="ophel-update-card" role="status" aria-live="polite">
-      <button class="ophel-update-close" type="button" aria-label="${copy.closeLabel}">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
-        </svg>
-      </button>
-      <div class="ophel-update-kicker">
-        <svg class="ophel-update-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
-        </svg>
-        ${copy.kicker}
-      </div>
-      <p class="ophel-update-message">${copy.description.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</p>
-      <div class="ophel-update-actions">
-        <button class="ophel-update-button" type="button">${copy.reloadLabel}</button>
-      </div>
-    </section>
-  `
-
-  shadowRoot
-    .querySelector<HTMLButtonElement>(".ophel-update-button")
-    ?.addEventListener("click", () => {
-      window.location.reload()
-    })
-
-  shadowRoot
-    .querySelector<HTMLButtonElement>(".ophel-update-close")
-    ?.addEventListener("click", () => {
-      window.__OPHEL_EXTENSION_UPDATE_DISMISSED__ = true
-      window.__OPHEL_EXTENSION_UPDATE_AVAILABLE__ = false
-      removeFallbackExtensionUpdateNotice()
-    })
-  ;(document.body || document.documentElement).appendChild(host)
-}
+import { getAdapterRuntime } from "~core/adapter-runtime"
+import { startContentScript } from "~core/content-script-main"
 
-function scheduleFallbackExtensionUpdateNotice(version?: string): void {
-  if (window.__OPHEL_EXTENSION_UPDATE_DISMISSED__) return
-
-  removeFallbackExtensionUpdateNotice()
-
-  extensionUpdateFallbackTimer = window.setTimeout(() => {
-    extensionUpdateFallbackTimer = null
-
-    const hasPrimaryNotice =
-      window.__OPHEL_EXTENSION_UPDATE_NOTICE_ACTIVE__ ||
-      Boolean(document.querySelector(".gh-update-notice"))
-
-    if (hasPrimaryNotice || document.getElementById(OPHEL_EXTENSION_UPDATE_FALLBACK_ID)) {
-      return
-    }
-
-    renderFallbackExtensionUpdateNotice(version)
-  }, 600)
-}
-
-function handleExtensionContextInvalidated(message: string): void {
-  if (!isExtensionContextInvalidatedMessage(message)) return
-
-  dispatchExtensionUpdateNotice()
-  startSuppressingDefaultReloadPrompt()
-  scheduleFallbackExtensionUpdateNotice()
-}
-
-if (!window.__ophelExtensionUpdateGuardsInstalled) {
-  window.__ophelExtensionUpdateGuardsInstalled = true
-
-  suppressPlasmoReloadPrompt()
-
-  const promptObserver = new MutationObserver(() => {
-    suppressPlasmoReloadPrompt()
-  })
-  promptObserver.observe(document.documentElement, {
-    childList: true,
-    subtree: true,
-  })
-
-  window.addEventListener(
-    "error",
-    (event) => {
-      const message =
-        event.error instanceof Error
-          ? event.error.message
-          : typeof event.message === "string"
-            ? event.message
-            : ""
-
-      if (!isExtensionContextInvalidatedMessage(message)) return
-
-      handleExtensionContextInvalidated(message)
-      event.preventDefault()
-      event.stopImmediatePropagation()
-    },
-    true,
-  )
-
-  window.addEventListener(
-    "unhandledrejection",
-    (event) => {
-      const reason = event.reason
-      const message =
-        reason instanceof Error
-          ? reason.message
-          : typeof reason === "string"
-            ? reason
-            : String(reason ?? "")
-
-      if (!isExtensionContextInvalidatedMessage(message)) return
-
-      handleExtensionContextInvalidated(message)
-      event.preventDefault()
-      event.stopImmediatePropagation()
-    },
-    true,
-  )
-}
-
-if (!window.__ophelExtensionUpdateMessageListenerInstalled && typeof chrome !== "undefined") {
-  window.__ophelExtensionUpdateMessageListenerInstalled = true
-
-  chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-    if (message?.type !== MSG_EXTENSION_UPDATE_AVAILABLE) {
-      return false
-    }
-
-    dispatchExtensionUpdateNotice(message.version)
-    startSuppressingDefaultReloadPrompt()
-    sendResponse({ success: true })
-    return true
-  })
-}
-
-// Content Script 配置 - 匹配所有支持的站点
 export const config: PlasmoCSConfig = {
   matches: [
     "https://gemini.google.com/*",
     "https://business.gemini.google/*",
     "https://aistudio.google.com/*",
     "https://grok.com/*",
-    "https://chat.openai.com/*",
     "https://chatgpt.com/*",
     "https://claude.ai/*",
     "https://www.doubao.com/*",
@@ -463,114 +25,9 @@ export const config: PlasmoCSConfig = {
   run_at: "document_idle",
 }
 
-// 防止重复初始化
-async function initializeContentScript(): Promise<void> {
-  const adapter = await loadAdapter()
-
-  if (!adapter) {
-    console.warn("[Ophel] No adapter found for:", window.location.hostname)
-    return
-  }
-
-  setAdapterRuntime(adapter)
-  console.warn(`[Ophel] Loaded ${adapter.getName()} adapter on:`, window.location.hostname)
-
-  // 初始化适配器
-  adapter.afterPropertiesSet({})
-
-  // 等待 Zustand hydration 完成
-  await new Promise<void>((resolve) => {
-    if (useSettingsStore.getState()._hasHydrated) {
-      resolve()
-      return
-    }
-    const unsub = useSettingsStore.subscribe((state) => {
-      if (state._hasHydrated) {
-        unsub()
-        resolve()
-      }
-    })
-  })
-
-  // 获取用户设置
-  const settings = getSettingsState()
-  await setLanguage(settings.language)
-  const siteId = adapter.getSiteId()
-
-  // 创建模块上下文
-  const ctx: ModulesContext = { adapter, settings, siteId }
-
-  // 初始化所有核心模块
-  await initCoreModules(ctx)
-
-  // 订阅设置变化
-  const unsubscribeModuleUpdates = subscribeModuleUpdates(ctx)
-  window.addEventListener("unload", unsubscribeModuleUpdates, { once: true })
-
-  // 初始化 URL 变化监听
-  const cleanupUrlChangeObserver = initUrlChangeObserver(ctx)
-  window.addEventListener("unload", cleanupUrlChangeObserver, { once: true })
-
-  // 监听来自 background 的消息（用于跨页面检测生成状态）
-  chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-    if (message.type === MSG_CLEAR_ALL_DATA) {
-      handleClearAllData()
-      resetAllStores()
-      sendResponse({ success: true })
-      return true
-    }
-
-    if (message.type === MSG_RESTORE_DATA) {
-      // 收到恢复数据的广播时，刷新页面使得数据从 Storage 重新读取并保证 Zustand hydration 最新的内容
-      window.location.reload()
-      sendResponse({ success: true })
-      return true
-    }
-
-    if (message.type === "CHECK_IS_GENERATING") {
-      // 使用 adapter 的 isGenerating 方法检测当前页面是否正在生成
-      const isGenerating = adapter.isGenerating?.() ?? false
-      sendResponse({ isGenerating })
-      return true // 保持消息通道打开
-    }
-
-    if (message.type === MSG_START_NEW_CONVERSATION) {
-      try {
-        const success = adapter.startNewConversation()
-        sendResponse({ success })
-      } catch (err) {
-        console.error("[Ophel] startNewConversation failed:", err)
-        sendResponse({ success: false, error: (err as Error).message })
-      }
-      return true
-    }
-
-    // AI Studio 获取模型列表
-    if (message.type === "GET_MODEL_LIST") {
-      if (siteId === SITE_IDS.AISTUDIO && hasAIStudioModelList(adapter)) {
-        ;(async () => {
-          try {
-            const models = await adapter.getModelList()
-            sendResponse({ success: true, models })
-          } catch (err) {
-            console.error("[Ophel] getModelList failed:", err)
-            sendResponse({ success: false, error: (err as Error).message })
-          }
-        })()
-        return true
-      }
-
-      sendResponse({ success: false, error: "NOT_AISTUDIO" })
-      return true
-    }
-
-    return false
-  })
-}
-
-if (!window.ophelInitialized) {
-  window.ophelInitialized = true
-  void initializeContentScript().catch((error) => {
-    console.error("[Ophel] Content script initialization failed:", error)
-  })
+const adapter = getAdapterRuntime()
+if (adapter) {
+  startContentScript(adapter)
+} else {
+  console.error("[Ophel] Site adapter was not registered for:", window.location.hostname)
 }
diff --git a/src/contents/site-aistudio.ts b/src/contents/site-aistudio.ts
new file mode 100644
index 000000000..f5820ff50
--- /dev/null
+++ b/src/contents/site-aistudio.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { AIStudioAdapter } from "~adapters/aistudio"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://aistudio.google.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new AIStudioAdapter())
diff --git a/src/contents/site-chatglm.ts b/src/contents/site-chatglm.ts
new file mode 100644
index 000000000..67aa903ad
--- /dev/null
+++ b/src/contents/site-chatglm.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { ChatGLMAdapter } from "~adapters/chatglm"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://chatglm.cn/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new ChatGLMAdapter())
diff --git a/src/contents/site-chatgpt.ts b/src/contents/site-chatgpt.ts
new file mode 100644
index 000000000..df6866309
--- /dev/null
+++ b/src/contents/site-chatgpt.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { ChatGPTAdapter } from "~adapters/chatgpt"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://chatgpt.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new ChatGPTAdapter())
diff --git a/src/contents/site-claude.ts b/src/contents/site-claude.ts
new file mode 100644
index 000000000..406aea5e2
--- /dev/null
+++ b/src/contents/site-claude.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { ClaudeAdapter } from "~adapters/claude"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://claude.ai/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new ClaudeAdapter())
diff --git a/src/contents/site-deepseek.ts b/src/contents/site-deepseek.ts
new file mode 100644
index 000000000..7e507500e
--- /dev/null
+++ b/src/contents/site-deepseek.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { DeepSeekAdapter } from "~adapters/deepseek"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://chat.deepseek.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new DeepSeekAdapter())
diff --git a/src/contents/site-doubao.ts b/src/contents/site-doubao.ts
new file mode 100644
index 000000000..25a0183c2
--- /dev/null
+++ b/src/contents/site-doubao.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { DoubaoAdapter } from "~adapters/doubao"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://www.doubao.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new DoubaoAdapter())
diff --git a/src/contents/site-gemini-enterprise.ts b/src/contents/site-gemini-enterprise.ts
new file mode 100644
index 000000000..82997817f
--- /dev/null
+++ b/src/contents/site-gemini-enterprise.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { GeminiEnterpriseAdapter } from "~adapters/gemini-enterprise"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://business.gemini.google/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new GeminiEnterpriseAdapter())
diff --git a/src/contents/site-gemini.ts b/src/contents/site-gemini.ts
new file mode 100644
index 000000000..f6cab22d3
--- /dev/null
+++ b/src/contents/site-gemini.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { GeminiAdapter } from "~adapters/gemini"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://gemini.google.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new GeminiAdapter())
diff --git a/src/contents/site-grok.ts b/src/contents/site-grok.ts
new file mode 100644
index 000000000..86c7b5461
--- /dev/null
+++ b/src/contents/site-grok.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { GrokAdapter } from "~adapters/grok"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://grok.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new GrokAdapter())
diff --git a/src/contents/site-ima.ts b/src/contents/site-ima.ts
new file mode 100644
index 000000000..03fcf799a
--- /dev/null
+++ b/src/contents/site-ima.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { ImaAdapter } from "~adapters/ima"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://ima.qq.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new ImaAdapter())
diff --git a/src/contents/site-kimi.ts b/src/contents/site-kimi.ts
new file mode 100644
index 000000000..7c827533b
--- /dev/null
+++ b/src/contents/site-kimi.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { KimiAdapter } from "~adapters/kimi"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://www.kimi.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new KimiAdapter())
diff --git a/src/contents/site-qianwen.ts b/src/contents/site-qianwen.ts
new file mode 100644
index 000000000..9d68ba862
--- /dev/null
+++ b/src/contents/site-qianwen.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { QianwenAdapter } from "~adapters/qianwen"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://www.qianwen.com/*", "https://qianwen.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new QianwenAdapter())
diff --git a/src/contents/site-qwen-studio.ts b/src/contents/site-qwen-studio.ts
new file mode 100644
index 000000000..20955ac8f
--- /dev/null
+++ b/src/contents/site-qwen-studio.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { QwenAiAdapter } from "~adapters/qwen-studio"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://chat.qwen.ai/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new QwenAiAdapter())
diff --git a/src/contents/site-yuanbao.ts b/src/contents/site-yuanbao.ts
new file mode 100644
index 000000000..e3138026c
--- /dev/null
+++ b/src/contents/site-yuanbao.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { YuanbaoAdapter } from "~adapters/yuanbao"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://yuanbao.tencent.com/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new YuanbaoAdapter())
diff --git a/src/contents/site-zai.ts b/src/contents/site-zai.ts
new file mode 100644
index 000000000..8a94eefd0
--- /dev/null
+++ b/src/contents/site-zai.ts
@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { ZaiAdapter } from "~adapters/zai"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://chat.z.ai/*"],
+  run_at: "document_start",
+}
+
+setAdapterRuntime(new ZaiAdapter())
diff --git a/src/core/content-script-main.ts b/src/core/content-script-main.ts
new file mode 100644
index 000000000..fdaf291f4
--- /dev/null
+++ b/src/core/content-script-main.ts
@@ -0,0 +1,550 @@
+/**
+ * Ophel - Content Script 入口
+ *
+ * 多站点 AI 对话增强工具
+ * 核心模块初始化入口
+ */
+
+import type { SiteAdapter } from "~adapters/base"
+import { DEFAULT_FOLDERS, SITE_IDS, getDefaultPromptChains, getDefaultPrompts } from "~constants"
+import {
+  initCoreModules,
+  initUrlChangeObserver,
+  handleClearAllData,
+  subscribeModuleUpdates,
+  type ModulesContext,
+} from "~core/modules-init"
+import { setAdapterRuntime } from "~core/adapter-runtime"
+import { APP_DISPLAY_NAME } from "~utils/config"
+import { INTER_LOCAL_FONT_FACE, getPlatformFontFamily } from "~utils/font"
+import { setLanguage } from "~utils/i18n"
+import { useConversationsStore } from "~stores/conversations-store"
+import { useFoldersStore } from "~stores/folders-store"
+import { usePromptChainsStore } from "~stores/prompt-chains-store"
+import { usePromptsStore } from "~stores/prompts-store"
+import { useReadingHistoryStore } from "~stores/reading-history-store"
+import { getSettingsState, useSettingsStore } from "~stores/settings-store"
+import { useTagsStore } from "~stores/tags-store"
+import {
+  EVENT_EXTENSION_UPDATE_AVAILABLE,
+  MSG_CLEAR_ALL_DATA,
+  MSG_EXTENSION_UPDATE_AVAILABLE,
+  MSG_RESTORE_DATA,
+  MSG_START_NEW_CONVERSATION,
+} from "~utils/messaging"
+
+interface AIStudioModelAdapter {
+  getModelList(): Promise<Array<{ id: string; name: string }>>
+}
+
+function hasAIStudioModelList(adapter: unknown): adapter is AIStudioModelAdapter {
+  return (
+    typeof adapter === "object" &&
+    adapter !== null &&
+    "getModelList" in adapter &&
+    typeof adapter.getModelList === "function"
+  )
+}
+
+const resetAllStores = () => {
+  useSettingsStore.getState().resetSettings()
+  usePromptsStore.getState().setPrompts(getDefaultPrompts())
+  usePromptChainsStore.getState().setChains(getDefaultPromptChains())
+  useFoldersStore.setState({ folders: DEFAULT_FOLDERS })
+  useTagsStore.setState({ tags: [] })
+  useConversationsStore.setState({ conversations: {}, lastUsedFolderId: "inbox" })
+  useReadingHistoryStore.setState({ history: {}, lastCleanupRun: 0 })
+}
+
+const OPHEL_EXTENSION_UPDATE_FALLBACK_ID = "ophel-extension-update-fallback"
+const PLASMO_RUNTIME_RELOAD_PROMPT_ID = "__plasmo-loading__"
+let extensionUpdateFallbackTimer: number | null = null
+
+function getExtensionUpdateCopy(version?: string) {
+  const isZh = navigator.language.toLowerCase().startsWith("zh")
+
+  return {
+    kicker: isZh ? "插件已更新" : "Extension updated",
+    description: version
+      ? isZh
+        ? `${APP_DISPLAY_NAME} 已更新至 v${version}。刷新当前页面后即可继续使用最新版本。`
+        : `${APP_DISPLAY_NAME} has been updated to v${version}. Reload this page to keep using the latest version.`
+      : isZh
+        ? `${APP_DISPLAY_NAME} 已更新。刷新当前页面后即可继续使用最新版本。`
+        : `${APP_DISPLAY_NAME} has been updated. Reload this page to keep using the latest version.`,
+    reloadLabel: isZh ? "刷新页面" : "Reload page",
+    closeLabel: isZh ? "关闭" : "Close",
+  }
+}
+
+function suppressPlasmoReloadPrompt(): void {
+  const prompt = document.getElementById(PLASMO_RUNTIME_RELOAD_PROMPT_ID) as HTMLElement | null
+  if (!prompt) return
+
+  prompt.style.setProperty("display", "none", "important")
+  prompt.style.setProperty("visibility", "hidden", "important")
+  prompt.setAttribute("aria-hidden", "true")
+}
+
+function removeFallbackExtensionUpdateNotice(): void {
+  if (extensionUpdateFallbackTimer !== null) {
+    window.clearTimeout(extensionUpdateFallbackTimer)
+    extensionUpdateFallbackTimer = null
+  }
+
+  const existingHost = document.getElementById(OPHEL_EXTENSION_UPDATE_FALLBACK_ID)
+  existingHost?.remove()
+}
+
+function dispatchExtensionUpdateNotice(version?: string): void {
+  if (window.__OPHEL_EXTENSION_UPDATE_DISMISSED__) return
+
+  window.__OPHEL_PENDING_UPDATE_VERSION__ = version || window.__OPHEL_PENDING_UPDATE_VERSION__
+  window.__OPHEL_EXTENSION_UPDATE_AVAILABLE__ = true
+  window.dispatchEvent(
+    new CustomEvent(EVENT_EXTENSION_UPDATE_AVAILABLE, {
+      detail: { version: version || window.__OPHEL_PENDING_UPDATE_VERSION__ },
+    }),
+  )
+}
+
+function isExtensionContextInvalidatedMessage(message: string): boolean {
+  return /Extension context invalidated/i.test(message)
+}
+
+function suppressDefaultReloadPrompt(): void {
+  suppressPlasmoReloadPrompt()
+
+  const root = document.body || document.documentElement
+  if (!root) return
+
+  const candidates = Array.from(root.querySelectorAll<HTMLElement>("*")).filter((element) => {
+    const text = element.textContent?.replace(/\s+/g, " ").trim()
+    return Boolean(text) && /Context Invalidated/i.test(text)
+  })
+
+  candidates.forEach((candidate) => {
+    let current: HTMLElement | null = candidate
+
+    for (let depth = 0; current && depth < 6; depth += 1) {
+      const style = window.getComputedStyle(current)
+      const rect = current.getBoundingClientRect()
+      const isLikelyPrompt =
+        (style.position === "fixed" || style.position === "sticky") &&
+        rect.width <= 480 &&
+        rect.height <= 220 &&
+        rect.bottom >= window.innerHeight - 240
+
+      if (isLikelyPrompt) {
+        current.style.setProperty("display", "none", "important")
+        break
+      }
+
+      current = current.parentElement
+    }
+  })
+}
+
+function startSuppressingDefaultReloadPrompt(): void {
+  suppressDefaultReloadPrompt()
+
+  window.__ophelExtensionUpdatePromptObserver?.disconnect()
+
+  const observer = new MutationObserver(() => {
+    suppressDefaultReloadPrompt()
+  })
+
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+  })
+
+  window.__ophelExtensionUpdatePromptObserver = observer
+
+  window.setTimeout(() => {
+    if (window.__ophelExtensionUpdatePromptObserver === observer) {
+      observer.disconnect()
+      window.__ophelExtensionUpdatePromptObserver = null
+    }
+  }, 12000)
+}
+
+function renderFallbackExtensionUpdateNotice(version?: string): void {
+  const copy = getExtensionUpdateCopy(version || window.__OPHEL_PENDING_UPDATE_VERSION__)
+  removeFallbackExtensionUpdateNotice()
+
+  const host = document.createElement("div")
+  host.id = OPHEL_EXTENSION_UPDATE_FALLBACK_ID
+  host.style.cssText = [
+    "position: fixed",
+    "right: 24px",
+    "bottom: 24px",
+    "z-index: 2147483647",
+    "pointer-events: auto",
+  ].join(";")
+
+  const shadowRoot = host.attachShadow({ mode: "open" })
+  shadowRoot.innerHTML = `
+    <style>
+      ${INTER_LOCAL_FONT_FACE}
+      :host {
+        all: initial;
+      }
+      .ophel-update-card {
+        width: min(380px, calc(100vw - 32px));
+        border-radius: 20px;
+        border: 1px solid rgba(148, 163, 184, 0.2);
+        background: rgba(255, 255, 255, 0.85);
+        backdrop-filter: blur(24px) saturate(180%);
+        -webkit-backdrop-filter: blur(24px) saturate(180%);
+        box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.15), 0 0 0 1.5px inset rgba(255, 255, 255, 0.5);
+        color: #111827;
+        font-family: ${getPlatformFontFamily()};
+        padding: 20px 24px;
+        position: relative;
+        overflow: hidden;
+        animation: ophel-update-notice-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+      .ophel-update-card::before {
+        content: "";
+        position: absolute;
+        top: 0; left: 0; width: 100%; height: 100%;
+        background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.15), transparent 50%),
+                    radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.08), transparent 40%);
+        pointer-events: none;
+        z-index: -1;
+      }
+      .ophel-update-kicker {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: #2563eb;
+        font-size: 13px;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+        margin-bottom: 8px;
+      }
+      .ophel-update-icon {
+        width: 16px;
+        height: 16px;
+        color: #2563eb;
+        animation: ophel-update-icon-pulse 2s infinite ease-in-out;
+      }
+      @keyframes ophel-update-icon-pulse {
+        0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
+        50% { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
+      }
+      .ophel-update-message {
+        color: #374151;
+        font-size: 14px;
+        line-height: 1.6;
+        margin: 0 0 18px;
+        padding-right: 28px;
+      }
+      .ophel-update-actions {
+        display: flex;
+        justify-content: flex-end;
+      }
+      .ophel-update-button {
+        appearance: none;
+        border: none;
+        border-radius: 12px;
+        background: #2563eb;
+        box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.6);
+        color: #ffffff;
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 600;
+        padding: 10px 18px;
+        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+        position: relative;
+        overflow: hidden;
+      }
+      .ophel-update-button::after {
+        content: '';
+        position: absolute;
+        top: 0; left: 0; width: 100%; height: 100%;
+        background: linear-gradient(rgba(255,255,255,0.1), transparent);
+        opacity: 0;
+        transition: opacity 0.2s;
+      }
+      .ophel-update-button:hover {
+        transform: translateY(-2px) scale(1.02);
+        box-shadow: 0 12px 28px -6px rgba(37, 99, 235, 0.8);
+      }
+      .ophel-update-button:hover::after {
+        opacity: 1;
+      }
+      .ophel-update-close {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        appearance: none;
+        border: none;
+        outline: none;
+        background: rgba(107, 114, 128, 0.1);
+        color: #6b7280;
+        cursor: pointer;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        line-height: 1;
+        padding: 0;
+        transition: all 0.2s;
+      }
+      .ophel-update-close:hover {
+        background: rgba(107, 114, 128, 0.2);
+        color: #111827;
+        transform: rotate(90deg);
+      }
+      @keyframes ophel-update-notice-enter {
+        0% { opacity: 0; transform: translateY(20px) scale(0.95); }
+        100% { opacity: 1; transform: translateY(0) scale(1); }
+      }
+    </style>
+    <section class="ophel-update-card" role="status" aria-live="polite">
+      <button class="ophel-update-close" type="button" aria-label="${copy.closeLabel}">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+        </svg>
+      </button>
+      <div class="ophel-update-kicker">
+        <svg class="ophel-update-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
+        </svg>
+        ${copy.kicker}
+      </div>
+      <p class="ophel-update-message">${copy.description.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</p>
+      <div class="ophel-update-actions">
+        <button class="ophel-update-button" type="button">${copy.reloadLabel}</button>
+      </div>
+    </section>
+  `
+
+  shadowRoot
+    .querySelector<HTMLButtonElement>(".ophel-update-button")
+    ?.addEventListener("click", () => {
+      window.location.reload()
+    })
+
+  shadowRoot
+    .querySelector<HTMLButtonElement>(".ophel-update-close")
+    ?.addEventListener("click", () => {
+      window.__OPHEL_EXTENSION_UPDATE_DISMISSED__ = true
+      window.__OPHEL_EXTENSION_UPDATE_AVAILABLE__ = false
+      removeFallbackExtensionUpdateNotice()
+    })
+  ;(document.body || document.documentElement).appendChild(host)
+}
+
+function scheduleFallbackExtensionUpdateNotice(version?: string): void {
+  if (window.__OPHEL_EXTENSION_UPDATE_DISMISSED__) return
+
+  removeFallbackExtensionUpdateNotice()
+
+  extensionUpdateFallbackTimer = window.setTimeout(() => {
+    extensionUpdateFallbackTimer = null
+
+    const hasPrimaryNotice =
+      window.__OPHEL_EXTENSION_UPDATE_NOTICE_ACTIVE__ ||
+      Boolean(document.querySelector(".gh-update-notice"))
+
+    if (hasPrimaryNotice || document.getElementById(OPHEL_EXTENSION_UPDATE_FALLBACK_ID)) {
+      return
+    }
+
+    renderFallbackExtensionUpdateNotice(version)
+  }, 600)
+}
+
+function handleExtensionContextInvalidated(message: string): void {
+  if (!isExtensionContextInvalidatedMessage(message)) return
+
+  dispatchExtensionUpdateNotice()
+  startSuppressingDefaultReloadPrompt()
+  scheduleFallbackExtensionUpdateNotice()
+}
+
+if (!window.__ophelExtensionUpdateGuardsInstalled) {
+  window.__ophelExtensionUpdateGuardsInstalled = true
+
+  suppressPlasmoReloadPrompt()
+
+  const promptObserver = new MutationObserver(() => {
+    suppressPlasmoReloadPrompt()
+  })
+  promptObserver.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+  })
+
+  window.addEventListener(
+    "error",
+    (event) => {
+      const message =
+        event.error instanceof Error
+          ? event.error.message
+          : typeof event.message === "string"
+            ? event.message
+            : ""
+
+      if (!isExtensionContextInvalidatedMessage(message)) return
+
+      handleExtensionContextInvalidated(message)
+      event.preventDefault()
+      event.stopImmediatePropagation()
+    },
+    true,
+  )
+
+  window.addEventListener(
+    "unhandledrejection",
+    (event) => {
+      const reason = event.reason
+      const message =
+        reason instanceof Error
+          ? reason.message
+          : typeof reason === "string"
+            ? reason
+            : String(reason ?? "")
+
+      if (!isExtensionContextInvalidatedMessage(message)) return
+
+      handleExtensionContextInvalidated(message)
+      event.preventDefault()
+      event.stopImmediatePropagation()
+    },
+    true,
+  )
+}
+
+if (!window.__ophelExtensionUpdateMessageListenerInstalled && typeof chrome !== "undefined") {
+  window.__ophelExtensionUpdateMessageListenerInstalled = true
+
+  chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+    if (message?.type !== MSG_EXTENSION_UPDATE_AVAILABLE) {
+      return false
+    }
+
+    dispatchExtensionUpdateNotice(message.version)
+    startSuppressingDefaultReloadPrompt()
+    sendResponse({ success: true })
+    return true
+  })
+}
+
+// 防止重复初始化
+async function initializeContentScript(adapter: SiteAdapter): Promise<void> {
+  if (!adapter.match()) {
+    console.warn("[Ophel] No adapter found for:", window.location.hostname)
+    return
+  }
+
+  setAdapterRuntime(adapter)
+  console.warn(`[Ophel] Loaded ${adapter.getName()} adapter on:`, window.location.hostname)
+
+  // 初始化适配器
+  adapter.afterPropertiesSet({})
+
+  // 等待 Zustand hydration 完成
+  await new Promise<void>((resolve) => {
+    if (useSettingsStore.getState()._hasHydrated) {
+      resolve()
+      return
+    }
+    const unsub = useSettingsStore.subscribe((state) => {
+      if (state._hasHydrated) {
+        unsub()
+        resolve()
+      }
+    })
+  })
+
+  // 获取用户设置
+  const settings = getSettingsState()
+  await setLanguage(settings.language)
+  const siteId = adapter.getSiteId()
+
+  // 创建模块上下文
+  const ctx: ModulesContext = { adapter, settings, siteId }
+
+  // 初始化所有核心模块
+  await initCoreModules(ctx)
+
+  // 订阅设置变化
+  const unsubscribeModuleUpdates = subscribeModuleUpdates(ctx)
+  window.addEventListener("unload", unsubscribeModuleUpdates, { once: true })
+
+  // 初始化 URL 变化监听
+  const cleanupUrlChangeObserver = initUrlChangeObserver(ctx)
+  window.addEventListener("unload", cleanupUrlChangeObserver, { once: true })
+
+  // 监听来自 background 的消息（用于跨页面检测生成状态）
+  chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+    if (message.type === MSG_CLEAR_ALL_DATA) {
+      handleClearAllData()
+      resetAllStores()
+      sendResponse({ success: true })
+      return true
+    }
+
+    if (message.type === MSG_RESTORE_DATA) {
+      // 收到恢复数据的广播时，刷新页面使得数据从 Storage 重新读取并保证 Zustand hydration 最新的内容
+      window.location.reload()
+      sendResponse({ success: true })
+      return true
+    }
+
+    if (message.type === "CHECK_IS_GENERATING") {
+      // 使用 adapter 的 isGenerating 方法检测当前页面是否正在生成
+      const isGenerating = adapter.isGenerating?.() ?? false
+      sendResponse({ isGenerating })
+      return true // 保持消息通道打开
+    }
+
+    if (message.type === MSG_START_NEW_CONVERSATION) {
+      try {
+        const success = adapter.startNewConversation()
+        sendResponse({ success })
+      } catch (err) {
+        console.error("[Ophel] startNewConversation failed:", err)
+        sendResponse({ success: false, error: (err as Error).message })
+      }
+      return true
+    }
+
+    // AI Studio 获取模型列表
+    if (message.type === "GET_MODEL_LIST") {
+      if (siteId === SITE_IDS.AISTUDIO && hasAIStudioModelList(adapter)) {
+        ;(async () => {
+          try {
+            const models = await adapter.getModelList()
+            sendResponse({ success: true, models })
+          } catch (err) {
+            console.error("[Ophel] getModelList failed:", err)
+            sendResponse({ success: false, error: (err as Error).message })
+          }
+        })()
+        return true
+      }
+
+      sendResponse({ success: false, error: "NOT_AISTUDIO" })
+      return true
+    }
+
+    return false
+  })
+}
+
+export function startContentScript(adapter: SiteAdapter): void {
+  if (window.ophelInitialized) return
+
+  window.ophelInitialized = true
+  void initializeContentScript(adapter).catch((error) => {
+    console.error("[Ophel] Content script initialization failed:", error)
+  })
+}
diff --git a/src/core/modules-init.ts b/src/core/modules-init.ts
index 0594ec88d..3e2d837ae 100644
--- a/src/core/modules-init.ts
+++ b/src/core/modules-init.ts
@@ -24,6 +24,7 @@ import { WatermarkRemover } from "~core/watermark-remover"
 import { getSettingsState, subscribeSettings } from "~stores/settings-store"
 import { setLanguage, t } from "~utils/i18n"
 import { EVENT_PAGE_URL_CHANGE } from "~utils/messaging"
+import { showToast } from "~utils/toast"
 import {
   getSiteModelLock,
   getSitePanelAvoidance,
@@ -372,7 +373,6 @@ export async function initReadingHistoryManager(ctx: ModulesContext): Promise<vo
     startRecording(settings)
 
     if (settings.readingHistory.autoRestore) {
-      const { showToast } = await import("~utils/toast")
       modules.readingHistoryManager
         .restoreProgress((msg) => showToast(msg, 3000))
         .then((restored) => {
@@ -708,7 +708,6 @@ export function initUrlChangeObserver(ctx: ModulesContext): () => void {
       modules.readingHistoryManager.stopRecording()
       readingHistoryRestoreTimeoutId = setTimeout(async () => {
         readingHistoryRestoreTimeoutId = null
-        const { showToast } = await import("~utils/toast")
         const shouldSkipRestore = consumeSkipReadingHistoryRestoreFlag()
         if (!shouldSkipRestore) {
           const restored = await modules.readingHistoryManager?.restoreProgress((msg) =>
diff --git a/src/locales/loader.test.ts b/src/locales/loader.test.ts
new file mode 100644
index 000000000..f1f9f64b0
--- /dev/null
+++ b/src/locales/loader.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest"
+
+import { resources } from "./resources"
+import { loadLocaleMessages } from "./loader"
+
+describe("locale loader", () => {
+  it("returns every locale synchronously for the MV3 background", () => {
+    for (const locale of Object.keys(resources) as Array<keyof typeof resources>) {
+      expect(loadLocaleMessages(locale)).toBe(resources[locale])
+    }
+  })
+})
diff --git a/src/locales/loader.ts b/src/locales/loader.ts
new file mode 100644
index 000000000..bdad33736
--- /dev/null
+++ b/src/locales/loader.ts
@@ -0,0 +1,16 @@
+import { resources } from "./resources"
+
+import type { AppLocale } from "~utils/messaging"
+
+type LocaleMessages = Record<string, string>
+
+const localeMessages: Record<AppLocale, LocaleMessages> = resources
+
+export function loadLocaleMessages(locale: AppLocale): LocaleMessages {
+  const messages = localeMessages[locale]
+  if (!messages) {
+    throw new Error(`Unsupported locale: ${String(locale)}`)
+  }
+
+  return messages
+}
diff --git a/src/styles/queue-overlay.css b/src/styles/queue-overlay.css
index 81a8919be..b2db78a99 100644
--- a/src/styles/queue-overlay.css
+++ b/src/styles/queue-overlay.css
@@ -3,13 +3,12 @@
 /* 折叠态胶囊 */
 .gh-queue-capsule {
   position: fixed;
-  z-index: 99998;
+  z-index: 20;
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   border-radius: 20px;
-  border-radius: 20px;
   background: var(--gh-bg, #ffffff);
   border: 1px solid var(--gh-border, #e5e7eb);
   color: var(--gh-text, #1f2937);
@@ -66,7 +65,7 @@
 /* 展开态面板 */
 .gh-queue-panel {
   position: fixed;
-  z-index: 99999;
+  z-index: 40;
   width: 420px;
   max-width: calc(100vw - 40px);
   max-height: min(440px, calc(100vh - 32px));
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index b416ec064..bf584c9de 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -5,6 +5,7 @@
 
 import type { ThemeManager } from "~core/theme-manager"
 import type { SiteAdapter } from "~adapters/base"
+import type { AppLocale } from "~utils/messaging"
 
 declare global {
   interface OphelPendingPromptVariableDialogDetail {
@@ -25,6 +26,10 @@ declare global {
     __ophelThemeManager?: ThemeManager
     /** 当前页面已加载的站点适配器 */
     __ophelAdapterRuntime?: SiteAdapter
+    /** 当前隔离世界内跨 bundle 共享的界面语言 */
+    __ophelLanguageRuntime?: AppLocale
+    /** 当前隔离世界内共享界面语言的变更版本 */
+    __ophelLanguageRuntimeVersion?: number
     /** Shadow DOM 内的统一覆盖层 Portal 根节点 */
     __ophelOverlayRoot?: HTMLElement
     /** 滚动锁定初始化标记 */
diff --git a/src/utils/i18n.test.ts b/src/utils/i18n.test.ts
index add4bfeda..d199537a1 100644
--- a/src/utils/i18n.test.ts
+++ b/src/utils/i18n.test.ts
@@ -1,9 +1,41 @@
 import { afterEach, describe, expect, it, vi } from "vitest"
 
-import { getAllLocalizedTexts, setLanguage, subscribeI18nChanges, t } from "./i18n"
+import { resources } from "~locales/resources"
+import {
+  sendToBackground,
+  type GetLocaleMessagesMessage,
+  type GetLocaleMessagesResponse,
+} from "~utils/messaging"
+
+vi.mock("~utils/messaging", () => ({
+  MSG_GET_LOCALE_MESSAGES: "GET_LOCALE_MESSAGES",
+  sendToBackground: vi.fn(async ({ locale }: { locale: keyof typeof resources }) => ({
+    success: true,
+    messages: resources[locale],
+  })),
+}))
+
+import {
+  getAllLocalizedTexts,
+  getCurrentLang,
+  I18N_LANGUAGE_CHANGE_EVENT,
+  setLanguage,
+  subscribeI18nChanges,
+  t,
+} from "./i18n"
+
+const sendLocaleMessage = vi.mocked(
+  sendToBackground as (message: GetLocaleMessagesMessage) => Promise<GetLocaleMessagesResponse>,
+)
 
 describe("i18n", () => {
   afterEach(async () => {
+    sendLocaleMessage.mockImplementation(
+      async ({ locale }: { locale: keyof typeof resources }) => ({
+        success: true,
+        messages: resources[locale],
+      }),
+    )
     await setLanguage("en")
   })
 
@@ -18,6 +50,84 @@ describe("i18n", () => {
     unsubscribe()
   })
 
+  it("broadcasts the selected language through the shared window runtime", async () => {
+    const runtimeListener = vi.fn()
+    window.addEventListener(I18N_LANGUAGE_CHANGE_EVENT, runtimeListener)
+
+    await setLanguage("zh-TW")
+
+    expect(window.__ophelLanguageRuntime).toBe("zh-TW")
+    expect(runtimeListener).toHaveBeenCalledOnce()
+    window.removeEventListener(I18N_LANGUAGE_CHANGE_EVENT, runtimeListener)
+  })
+
+  it("loads language changes broadcast by another content-script bundle", async () => {
+    const listener = vi.fn()
+    const unsubscribe = subscribeI18nChanges(listener)
+
+    window.__ophelLanguageRuntime = "ja"
+    window.__ophelLanguageRuntimeVersion = (window.__ophelLanguageRuntimeVersion ?? 0) + 1
+    window.dispatchEvent(new Event(I18N_LANGUAGE_CHANGE_EVENT))
+
+    await vi.waitFor(() => {
+      expect(getCurrentLang()).toBe("ja")
+      expect(t("untitledConversation")).toBe("無題の会話")
+    })
+    expect(listener).toHaveBeenCalled()
+    unsubscribe()
+  })
+
+  it("ignores language events that do not update the isolated-world runtime", async () => {
+    await setLanguage("en")
+
+    window.dispatchEvent(
+      new CustomEvent(I18N_LANGUAGE_CHANGE_EVENT, {
+        detail: { language: "zh-CN" },
+      }),
+    )
+
+    expect(getCurrentLang()).toBe("en")
+  })
+
+  it("keeps the latest language when an earlier locale request finishes later", async () => {
+    let resolveKorean: ((value: { success: true; messages: typeof resources.ko }) => void) | null =
+      null
+    sendLocaleMessage.mockImplementation(({ locale }: { locale: keyof typeof resources }) => {
+      if (locale === "ko") {
+        return new Promise((resolve) => {
+          resolveKorean = resolve
+        })
+      }
+
+      return Promise.resolve({ success: true, messages: resources[locale] })
+    })
+
+    const koreanRequest = setLanguage("ko")
+    await setLanguage("it")
+    resolveKorean?.({ success: true, messages: resources.ko })
+    await koreanRequest
+
+    expect(getCurrentLang()).toBe("it")
+    expect(t("untitledConversation")).toBe("Conversazione senza titolo")
+  })
+
+  it("reports locale load failures and uses the English fallback", async () => {
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined)
+    sendLocaleMessage.mockResolvedValueOnce({
+      success: false,
+      error: "locale unavailable",
+    })
+
+    await expect(setLanguage("ru")).resolves.toBeUndefined()
+
+    expect(getCurrentLang()).toBe("en")
+    expect(t("untitledConversation")).toBe("Untitled conversation")
+    expect(consoleError).toHaveBeenCalledWith(
+      '[Ophel] Failed to load locale "ru"; using English instead.',
+      expect.any(Error),
+    )
+  })
+
   it("keeps the small cross-locale title compatibility list", () => {
     expect(getAllLocalizedTexts("untitledConversation")).toContain("Untitled conversation")
     expect(getAllLocalizedTexts("untitledConversation")).toContain("未命名會話")
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index 1bef664eb..66e33b3f9 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -1,24 +1,17 @@
 import { en } from "~locales/en"
+import { MSG_GET_LOCALE_MESSAGES, sendToBackground, type AppLocale } from "~utils/messaging"
 
 type LocaleMessages = Record<string, string>
 type I18nChangeListener = () => void
-type SupportedLocale =
-  | "zh-CN"
-  | "zh-TW"
-  | "en"
-  | "ja"
-  | "ko"
-  | "it"
-  | "fr"
-  | "de"
-  | "ru"
-  | "es"
-  | "pt"
+type SupportedLocale = AppLocale
 
 const DEFAULT_LOCALE: SupportedLocale = "en"
+export const I18N_LANGUAGE_CHANGE_EVENT = "ophel:i18n-language-change"
+
 const localeCache: Partial<Record<SupportedLocale, LocaleMessages>> = { en }
 const localeLoads = new Map<SupportedLocale, Promise<LocaleMessages>>()
 const listeners = new Set<I18nChangeListener>()
+const reportedLocaleLoadFailures = new Set<SupportedLocale>()
 
 const ALL_LOCALIZED_TEXTS: Record<string, string[]> = {
   untitledConversation: [
@@ -55,6 +48,10 @@ const getBrowserLang = (): SupportedLocale => {
 function resolveLocale(lang: string | undefined | null): SupportedLocale {
   if (!lang || lang === "auto") return getBrowserLang()
 
+  return isSupportedLocale(lang) ? lang : DEFAULT_LOCALE
+}
+
+function isSupportedLocale(lang: unknown): lang is SupportedLocale {
   switch (lang) {
     case "zh-CN":
     case "zh-TW":
@@ -67,37 +64,21 @@ function resolveLocale(lang: string | undefined | null): SupportedLocale {
     case "ru":
     case "es":
     case "pt":
-      return lang
+      return true
     default:
-      return DEFAULT_LOCALE
+      return false
   }
 }
 
 async function importLocale(locale: SupportedLocale): Promise<LocaleMessages> {
-  switch (locale) {
-    case "zh-CN":
-      return (await import("~locales/zh-CN")).zhCN
-    case "zh-TW":
-      return (await import("~locales/zh-TW")).zhTW
-    case "ja":
-      return (await import("~locales/ja")).ja
-    case "ko":
-      return (await import("~locales/ko")).ko
-    case "it":
-      return (await import("~locales/it")).it
-    case "fr":
-      return (await import("~locales/fr")).fr
-    case "de":
-      return (await import("~locales/de")).de
-    case "ru":
-      return (await import("~locales/ru")).ru
-    case "es":
-      return (await import("~locales/es")).es
-    case "pt":
-      return (await import("~locales/pt")).pt
-    case "en":
-      return en
+  if (locale === DEFAULT_LOCALE) return en
+
+  const response = await sendToBackground({ type: MSG_GET_LOCALE_MESSAGES, locale })
+  if (!response.success || !response.messages) {
+    throw new Error(response.error || `Failed to load locale messages: ${locale}`)
   }
+
+  return response.messages
 }
 
 async function loadLocale(locale: SupportedLocale): Promise<LocaleMessages> {
@@ -107,11 +88,17 @@ async function loadLocale(locale: SupportedLocale): Promise<LocaleMessages> {
   const pending = localeLoads.get(locale)
   if (pending) return pending
 
-  const load = importLocale(locale).then((messages) => {
-    localeCache[locale] = messages
-    localeLoads.delete(locale)
-    return messages
-  })
+  const load = importLocale(locale).then(
+    (messages) => {
+      localeCache[locale] = messages
+      localeLoads.delete(locale)
+      return messages
+    },
+    (error: unknown) => {
+      localeLoads.delete(locale)
+      throw error
+    },
+  )
   localeLoads.set(locale, load)
   return load
 }
@@ -120,19 +107,74 @@ function notifyI18nChange(): void {
   listeners.forEach((listener) => listener())
 }
 
-let currentLang: SupportedLocale = getBrowserLang()
+function getSharedLanguage(): SupportedLocale | null {
+  if (typeof window === "undefined") return null
+  return isSupportedLocale(window.__ophelLanguageRuntime) ? window.__ophelLanguageRuntime : null
+}
+
+let currentLang: SupportedLocale = getSharedLanguage() ?? getBrowserLang()
+let languageRequestVersion = 0
+let observedSharedLanguageVersion =
+  typeof window === "undefined" ? 0 : window.__ophelLanguageRuntimeVersion ?? 0
+
+async function applyLanguage(nextLang: SupportedLocale, broadcast: boolean): Promise<void> {
+  const requestVersion = ++languageRequestVersion
+  let effectiveLang = nextLang
+
+  try {
+    await loadLocale(nextLang)
+  } catch (error) {
+    effectiveLang = DEFAULT_LOCALE
+    if (!reportedLocaleLoadFailures.has(nextLang)) {
+      reportedLocaleLoadFailures.add(nextLang)
+      console.error(`[Ophel] Failed to load locale "${nextLang}"; using English instead.`, error)
+    }
+  }
+
+  // A slower locale request must not overwrite a newer language selection.
+  if (requestVersion !== languageRequestVersion) return
 
-export async function setLanguage(lang: string): Promise<void> {
-  const nextLang = resolveLocale(lang)
   const previousLang = currentLang
-  currentLang = nextLang
+  currentLang = effectiveLang
 
-  await loadLocale(nextLang)
-  if (currentLang === nextLang && (previousLang !== nextLang || nextLang !== DEFAULT_LOCALE)) {
+  if (broadcast && typeof window !== "undefined") {
+    window.__ophelLanguageRuntime = nextLang
+    observedSharedLanguageVersion = (window.__ophelLanguageRuntimeVersion ?? 0) + 1
+    window.__ophelLanguageRuntimeVersion = observedSharedLanguageVersion
+    window.dispatchEvent(new Event(I18N_LANGUAGE_CHANGE_EVENT))
+  }
+
+  if (previousLang !== effectiveLang || nextLang !== DEFAULT_LOCALE) {
     notifyI18nChange()
   }
 }
 
+function handleSharedLanguageChange(): void {
+  const sharedVersion = window.__ophelLanguageRuntimeVersion ?? 0
+  const sharedLanguage = getSharedLanguage()
+  if (sharedVersion <= observedSharedLanguageVersion || !sharedLanguage) return
+
+  observedSharedLanguageVersion = sharedVersion
+  void applyLanguage(sharedLanguage, false).catch((error: unknown) => {
+    console.error("[Ophel] Failed to synchronize i18n language:", error)
+  })
+}
+
+if (typeof window !== "undefined") {
+  window.addEventListener(I18N_LANGUAGE_CHANGE_EVENT, handleSharedLanguageChange)
+
+  const sharedLanguage = getSharedLanguage()
+  if (sharedLanguage && sharedLanguage !== DEFAULT_LOCALE) {
+    void applyLanguage(sharedLanguage, false).catch((error: unknown) => {
+      console.error("[Ophel] Failed to initialize shared i18n language:", error)
+    })
+  }
+}
+
+export async function setLanguage(lang: string): Promise<void> {
+  await applyLanguage(resolveLocale(lang), true)
+}
+
 export function subscribeI18nChanges(listener: I18nChangeListener): () => void {
   listeners.add(listener)
   return () => listeners.delete(listener)
diff --git a/src/utils/messaging.ts b/src/utils/messaging.ts
index aa1c163dd..4ff472b89 100644
--- a/src/utils/messaging.ts
+++ b/src/utils/messaging.ts
@@ -10,6 +10,7 @@ import type { NetworkMonitorRequestBodyRule } from "~adapters/base"
 
 export const MSG_SHOW_NOTIFICATION = "SHOW_NOTIFICATION"
 export const MSG_FOCUS_TAB = "FOCUS_TAB"
+export const MSG_GET_LOCALE_MESSAGES = "GET_LOCALE_MESSAGES"
 
 export interface ShowNotificationPayload {
   title: string
@@ -24,6 +25,30 @@ export interface FocusTabMessage {
   type: typeof MSG_FOCUS_TAB
 }
 
+export type AppLocale =
+  | "zh-CN"
+  | "zh-TW"
+  | "en"
+  | "ja"
+  | "ko"
+  | "it"
+  | "fr"
+  | "de"
+  | "ru"
+  | "es"
+  | "pt"
+
+export interface GetLocaleMessagesMessage {
+  type: typeof MSG_GET_LOCALE_MESSAGES
+  locale: AppLocale
+}
+
+export interface GetLocaleMessagesResponse {
+  success: boolean
+  messages?: Record<string, string>
+  error?: string
+}
+
 export const MSG_PROXY_FETCH = "PROXY_FETCH"
 
 export interface ProxyFetchPayload {
@@ -196,6 +221,7 @@ export interface CheckClaudeGeneratingResponse {
 export type ExtensionMessage =
   | ShowNotificationMessage
   | FocusTabMessage
+  | GetLocaleMessagesMessage
   | ProxyFetchMessage
   | WebDAVRequestMessage
   | CheckPermissionMessage
@@ -247,6 +273,7 @@ export interface AIStudioModelsResponse {
 }
 
 interface BackgroundResponseMap {
+  [MSG_GET_LOCALE_MESSAGES]: GetLocaleMessagesResponse
   [MSG_PROXY_FETCH]: BasicBackgroundResponse & { data?: string | ArrayBuffer | null }
   [MSG_CHECK_PERMISSION]: PermissionCheckResponse
   [MSG_CHECK_PERMISSIONS]: PermissionCheckResponse

From 632a6e8a45c2aef742e47d60951dc1bac4878da2 Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Tue, 14 Jul 2026 19:00:19 +0800
Subject: [PATCH 15/17] fix(runtime): harden site loading and lifecycle cleanup

---
 .github/workflows/ci.yml                      |   3 +
 docs/developer/project-audit-2026-07-10.md    |  20 +-
 .../project-audit-follow-up-2026-07-14.md     | 206 ++++++++
 .../2026-07-10-project-audit-remediation.md   |   3 +-
 package.json                                  |   2 +-
 scripts/check-bundle-budget.mjs               |   3 +
 scripts/check-site-support.mjs                |  13 +
 scripts/site-support-audit.mjs                | 462 ++++++++++++++++++
 src/adapters/base.ts                          |   3 +
 src/adapters/claude.ts                        |   5 +-
 src/adapters/gemini.ts                        | 145 +++++-
 src/adapters/index.test.ts                    |  25 -
 src/adapters/index.ts                         | 186 +++----
 src/adapters/qianwen.ts                       |   2 +-
 src/background.ts                             | 252 ++++++++--
 src/components/App.tsx                        |  43 +-
 src/components/PromptsTab.tsx                 |  24 -
 src/components/app/runtime-lifecycle.ts       |  28 ++
 src/components/prompts/ImportDialog.tsx       | 112 ++---
 src/components/prompts/PromptEditorDialog.tsx | 418 ++++++++--------
 src/components/prompts/PromptPreviewModal.tsx | 103 ++--
 src/components/ui/Dialog.test.tsx             |  51 --
 src/components/ui/Dialog.tsx                  |  34 +-
 src/constants/main-world-scripts.ts           |  93 ++++
 src/constants/supported-sites.json            |  77 +++
 src/constants/supported-sites.ts              |  42 ++
 src/contents/gemini-canvas-main.ts            |   6 +-
 src/contents/gemini-watermark-main.ts         |   5 +-
 src/contents/iframe-scroll-main.ts            |   5 +-
 src/contents/main.ts                          |   1 -
 src/contents/monitor-entry.ts                 |   8 +-
 src/contents/scroll-lock-main.ts              |   8 +-
 src/contents/site-qianwen.ts                  |   2 +-
 src/contents/ui-entry.tsx                     |  15 +-
 src/contents/yuanbao-monaco-main.ts           |   6 +-
 src/core/adapter-runtime.test.ts              |  36 --
 src/core/adapter-runtime.ts                   |   8 +
 src/core/background-clear-all-coordinator.ts  | 132 +++++
 src/core/content-script-main.ts               | 261 ++++++----
 src/core/gemini-mystuff-bridge.ts             |  65 ++-
 src/core/gemini-title-guard.ts                |  85 +++-
 src/core/layout-manager.ts                    |  25 +
 src/core/markdown-fixer.ts                    |  19 +-
 src/core/module-lifecycle.ts                  |  51 ++
 src/core/modules-init.ts                      | 143 ++++--
 src/core/network-monitor.ts                   | 166 ++++---
 src/core/policy-retry-manager.ts              |  19 +-
 src/core/reading-history.ts                   |  81 ++-
 src/core/webdav-sync.ts                       |  69 +--
 src/hooks/useShortcuts.ts                     |   2 +-
 src/platform/extension/index.ts               |  49 ++
 src/platform/types.ts                         |   9 +
 .../userscript/clear-all-coordinator.ts       | 352 +++++++++++++
 src/platform/userscript/entry.tsx             | 190 +++++--
 src/platform/userscript/index.ts              |  23 +-
 src/release-notes/storage.ts                  |   9 +-
 src/stores/chrome-adapter.ts                  | 145 +++++-
 src/tabs/options/pages/BackupPage.tsx         | 128 +++--
 src/types/plasmo-content-script.ts            |   6 +
 src/utils/cleanup-stack.ts                    |  12 +
 src/utils/clear-all-event.ts                  |  47 ++
 src/utils/clear-all-transaction.ts            |  30 ++
 src/utils/messaging.ts                        |  58 +++
 src/utils/storage-area-transaction.ts         | 117 +++++
 src/utils/storage.ts                          |   3 +
 src/utils/usage-monitor-storage.ts            |   5 +-
 tests/adapters/gemini-lifecycle.test.ts       |  32 ++
 tests/adapters/index.test.ts                  |  21 +
 .../components/SelectedPromptBar.test.tsx     |   2 +-
 .../components/app/runtime-lifecycle.test.ts  |  26 +
 .../components/global-search/syntax.test.ts   |   5 +-
 .../components/prompts/PromptDialogs.test.tsx |  49 ++
 tests/components/ui/Dialog.test.tsx           | 122 +++++
 .../components/ui/OverlayPortal.test.tsx      |   2 +-
 {src => tests}/components/ui/Switch.test.tsx  |   0
 .../constants/settings-navigation.test.ts     |   4 +-
 {src => tests}/constants/ui.test.ts           |   7 +-
 tests/core/adapter-runtime.test.ts            |  68 +++
 .../background-clear-all-coordinator.test.ts  | 129 +++++
 {src => tests}/core/model-locker.test.ts      |   2 +-
 tests/core/module-lifecycle.test.ts           |  84 ++++
 tests/core/modules-init-generation.test.ts    |  65 +++
 tests/core/network-monitor.test.ts            | 102 ++++
 {src => tests}/core/outline-manager.test.ts   |   2 +-
 tests/core/policy-retry-manager.test.ts       |  26 +
 .../core/polling-task-registry.test.ts        |   2 +-
 tests/core/reading-history.test.ts            |  84 ++++
 {src => tests}/locales/loader.test.ts         |   4 +-
 {src => tests}/locales/resources.test.ts      |   2 +-
 .../userscript/clear-all-coordinator.test.ts  | 176 +++++++
 {src/test => tests}/setup.ts                  |   0
 tests/stores/chrome-adapter.test.ts           | 110 +++++
 .../stores/persist-write-gate.test.ts         |   2 +-
 {src => tests}/utils/backup-validator.test.ts |   2 +-
 tests/utils/cleanup-stack.test.ts             |  25 +
 tests/utils/clear-all-event.test.ts           |  48 ++
 tests/utils/clear-all-transaction.test.ts     |  75 +++
 {src => tests}/utils/i18n.test.ts             |   2 +-
 tests/utils/messaging.test.ts                 |  17 +
 .../utils/settings-normalize.test.ts          |   2 +-
 tests/utils/storage-area-transaction.test.ts  |  69 +++
 {src => tests}/utils/themes/themes.test.ts    |   4 +-
 tsconfig.json                                 |   9 +-
 vite.userscript.config.ts                     |   2 +-
 vitest.config.ts                              |   3 +-
 105 files changed, 4990 insertions(+), 1152 deletions(-)
 create mode 100644 docs/developer/project-audit-follow-up-2026-07-14.md
 create mode 100644 scripts/check-site-support.mjs
 create mode 100644 scripts/site-support-audit.mjs
 delete mode 100644 src/adapters/index.test.ts
 create mode 100644 src/components/app/runtime-lifecycle.ts
 delete mode 100644 src/components/ui/Dialog.test.tsx
 create mode 100644 src/constants/main-world-scripts.ts
 create mode 100644 src/constants/supported-sites.json
 create mode 100644 src/constants/supported-sites.ts
 delete mode 100644 src/core/adapter-runtime.test.ts
 create mode 100644 src/core/background-clear-all-coordinator.ts
 create mode 100644 src/core/module-lifecycle.ts
 create mode 100644 src/platform/userscript/clear-all-coordinator.ts
 create mode 100644 src/types/plasmo-content-script.ts
 create mode 100644 src/utils/cleanup-stack.ts
 create mode 100644 src/utils/clear-all-event.ts
 create mode 100644 src/utils/clear-all-transaction.ts
 create mode 100644 src/utils/storage-area-transaction.ts
 create mode 100644 tests/adapters/gemini-lifecycle.test.ts
 create mode 100644 tests/adapters/index.test.ts
 rename {src => tests}/components/SelectedPromptBar.test.tsx (95%)
 create mode 100644 tests/components/app/runtime-lifecycle.test.ts
 rename {src => tests}/components/global-search/syntax.test.ts (94%)
 create mode 100644 tests/components/prompts/PromptDialogs.test.tsx
 create mode 100644 tests/components/ui/Dialog.test.tsx
 rename {src => tests}/components/ui/OverlayPortal.test.tsx (97%)
 rename {src => tests}/components/ui/Switch.test.tsx (100%)
 rename {src => tests}/constants/settings-navigation.test.ts (85%)
 rename {src => tests}/constants/ui.test.ts (91%)
 create mode 100644 tests/core/adapter-runtime.test.ts
 create mode 100644 tests/core/background-clear-all-coordinator.test.ts
 rename {src => tests}/core/model-locker.test.ts (95%)
 create mode 100644 tests/core/module-lifecycle.test.ts
 create mode 100644 tests/core/modules-init-generation.test.ts
 create mode 100644 tests/core/network-monitor.test.ts
 rename {src => tests}/core/outline-manager.test.ts (95%)
 create mode 100644 tests/core/policy-retry-manager.test.ts
 rename {src => tests}/core/polling-task-registry.test.ts (94%)
 create mode 100644 tests/core/reading-history.test.ts
 rename {src => tests}/locales/loader.test.ts (76%)
 rename {src => tests}/locales/resources.test.ts (90%)
 create mode 100644 tests/platform/userscript/clear-all-coordinator.test.ts
 rename {src/test => tests}/setup.ts (100%)
 create mode 100644 tests/stores/chrome-adapter.test.ts
 rename {src => tests}/stores/persist-write-gate.test.ts (91%)
 rename {src => tests}/utils/backup-validator.test.ts (95%)
 create mode 100644 tests/utils/cleanup-stack.test.ts
 create mode 100644 tests/utils/clear-all-event.test.ts
 create mode 100644 tests/utils/clear-all-transaction.test.ts
 rename {src => tests}/utils/i18n.test.ts (99%)
 create mode 100644 tests/utils/messaging.test.ts
 rename {src => tests}/utils/settings-normalize.test.ts (96%)
 create mode 100644 tests/utils/storage-area-transaction.test.ts
 rename {src => tests}/utils/themes/themes.test.ts (88%)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index bd3600e1e..016be34ad 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -63,6 +63,9 @@ jobs:
       - name: 🎨 Validate Theme Tokens
         run: pnpm check:theme-tokens
 
+      - name: 🌐 Validate Supported Sites
+        run: pnpm check:site-support
+
       - name: 🏗️ Verify Chrome Build
         run: pnpm build
 
diff --git a/docs/developer/project-audit-2026-07-10.md b/docs/developer/project-audit-2026-07-10.md
index 9b5245962..cbc0edf4f 100644
--- a/docs/developer/project-audit-2026-07-10.md
+++ b/docs/developer/project-audit-2026-07-10.md
@@ -3,6 +3,8 @@
 > 审查日期：2026-07-10  
 > 审查范围：全站共享架构、浏览器扩展与油猴双平台、核心生命周期、状态与存储、Shadow DOM/主题、通用 UI/UX、可访问性、构建体积、死代码与兼容层。  
 > 不在范围：仅影响单个站点选择器或单个站点 DOM 适配的兼容问题。
+>
+> 2026-07-14 对 bundle split、动态 MAIN-world 注册、生命周期、hydration 和 clear-all 事务进行了第二轮复审。新增发现、修复和最终证据见 [project-audit-follow-up-2026-07-14.md](./project-audit-follow-up-2026-07-14.md)。
 
 ## 1. 结论
 
@@ -43,7 +45,7 @@
 | P2-07 | 已完成 | SettingsModal 与 Options 共享九项导航，独立 Options 展示外观、全局搜索和快捷键。 |
 | P2-08 | 已完成 | 已确认的硬编码 UI/ARIA 文案全部 i18n 化，并由 11 语 key 一致性测试保护。 |
 | P2-09 | 已完成 | 新增主题 token 校验；101 个引用和 85 个全局 token 默认值通过，24 套预置有测试。 |
-| P2-10 | 已完成 | 引入 Vitest；当前 17 个测试文件、41 项测试覆盖路由、迁移、生命周期、搜索、备份、主题和关键 UI。 |
+| P2-10 | 已完成 | 引入 Vitest；2026-07-14 最终工作树有 35 个测试文件、101 项测试，覆盖路由、迁移、生命周期、搜索、备份、主题、Dialog 和 clear-all 事务。 |
 | P3-01 | 已完成 | 删除无引用 userscript Chrome polyfill 和不完整 Options barrel。 |
 | P3-02 | 已完成 | scroll-lock 业务逻辑集中到 `src/core/scroll-lock-runtime.ts`，两平台只保留入口桥接。 |
 | P3-03 | 已完成 | Conversation Dialog 复用通用 Dialog primitive，统一焦点、ESC、ARIA 和 Shadow overlay。 |
@@ -56,12 +58,12 @@
 
 | 产物 | 原始大小 | gzip |
 | --- | ---: | ---: |
-| `main.*.js` | 1,507,680 B | — |
-| `ui-entry.*.js` | 2,257,103 B | — |
-| 两个扩展内容脚本合计 | 3,764,783 B | 约 975.4 KiB |
-| `ophel.user.js` | 1,830,738 B | 约 467.8 KiB |
+| `main.*.js` | 1,500,213 B | 394,129 B |
+| `ui-entry.*.js` | 2,266,175 B | 604,312 B |
+| 两个扩展内容脚本合计 | 3,766,388 B | 998,441 B |
+| `ophel.user.js` | 1,848,311 B | 484,011 B |
 
-扩展内容脚本 raw 合计相对审计基线下降约 **49.8%**，超过 40% 完成指标。`scripts/check-bundle-budget.mjs` 对扩展内容入口与 userscript 同时设置 raw/gzip 上限，生产构建后可运行 `pnpm check:bundle-budget`。
+扩展内容脚本 raw 合计相对审计基线下降约 **49.7%**，超过 40% 完成指标。`scripts/check-bundle-budget.mjs` 对扩展内容入口、最大单站点入口与 userscript 同时设置 raw/gzip 上限，生产构建后可运行 `pnpm check:bundle-budget`。
 
 ## 2. 审查方法与证据
 
@@ -75,7 +77,7 @@
 - `pnpm build`：通过。
 - `pnpm build:userscript`：通过。
 
-当前没有正式测试体系，因此“构建通过”不能证明运行时生命周期、主题、键盘操作或窄屏布局正确。
+审计当时没有正式测试体系，因此“构建通过”不能证明运行时生命周期、主题、键盘操作或窄屏布局正确。修复分支现已引入 Vitest 和静态审计门禁；最终覆盖与结果见 2026-07-14 follow-up。
 
 ### 2.2 视觉与键盘冒烟
 
@@ -365,9 +367,9 @@
 
 建议：建立 token 校验脚本，区分“全局主题 token”和“组件局部动态变量”；全局 token 必须同时存在于类型、默认 CSS 和主题预置生成链路。
 
-### P2-10 没有正式测试体系，关键纯逻辑与迁移无回归保护
+### P2-10 审计时没有正式测试体系，关键纯逻辑与迁移无回归保护
 
-目前没有 test/spec 文件、测试命令或测试依赖。以下全局逻辑尤其需要测试：
+审计基线没有 test/spec 文件、测试命令或测试依赖。以下全局逻辑尤其需要测试：
 
 - `settings-normalize.ts` 的旧数据迁移和默认值合并；
 - 备份/恢复 schema、WebDAV 合并；
diff --git a/docs/developer/project-audit-follow-up-2026-07-14.md b/docs/developer/project-audit-follow-up-2026-07-14.md
new file mode 100644
index 000000000..890e12b17
--- /dev/null
+++ b/docs/developer/project-audit-follow-up-2026-07-14.md
@@ -0,0 +1,206 @@
+# Ophel Atlas 重构风险复审与修复跟进
+
+> 复审日期：2026-07-14
+> 基线提交：`41454dba fix(runtime): restore locale switching after bundle split`
+> 分支：`refactor/project-audit-remediation`
+> 前序审计：[project-audit-2026-07-10.md](./project-audit-2026-07-10.md)
+
+## 1. 结论
+
+本轮不是对前序审计的重复检查，而是针对大规模 bundle split、站点入口拆分和生命周期重构做运行时复审。复审确认了多项会导致“扩展看似构建成功，但部分站点无法加载、更新后 MAIN-world 能力失效、清除数据后数据回写、模块重挂载后重复执行”的结构性问题。
+
+主要根因不是单个选择器错误，而是五类跨模块契约缺失：
+
+1. 支持站点列表分散在 manifest、内容脚本、background、userscript 和 adapter loader 中，存在多个真值源。
+2. Plasmo MAIN-world 内容脚本实际由 background 动态注册，源码 config、构建 hash 和浏览器持久 registration 之间缺少对账。
+3. core manager 只有 init/update，没有统一 destroy、初始化回滚和异步任务代际隔离。
+4. Zustand hydration 与 clear-all 把“消息已发送”或“等待超时”误当成状态已稳定。
+5. 扩展多 bundle、MV3 background 和 userscript 多标签之间没有事务级停写确认。
+
+上述问题已按结构性缺陷修复，并增加静态审计、单元测试、生产构建门禁和真实浏览器冒烟。最终验证数据见第 8 节；文档中的“已通过”只以最终工作树命令和浏览器结果为准。
+
+## 2. 支持站点与入口注册
+
+### 2.1 发现
+
+- Kimi 和 Qianwen 已有 adapter 与独立 site entry，但部分 background 查询、monitor 和 scroll-lock 入口遗漏匹配项。
+- `chat.openai.com`、`qianwen.com` 等 redirect-only 域仍残留在部分入口，形成“声明支持但没有真实运行路径”的假覆盖。
+- adapter loader、host permissions、Plasmo content script、userscript `@match` 和 background tab query 各自维护域名列表，修改任一处都可能产生静默漂移。
+- adapter loader 使用宽泛字符串索引，新增站点时 TypeScript 无法证明 loader 穷尽。
+
+### 2.2 修复
+
+- 新增 `src/constants/supported-sites.json` 作为 15 个真实支持站点的唯一 registry。
+- `src/constants/supported-sites.ts` 为运行时代码提供类型化 matches、hostnames 和 entry 信息。
+- adapter loader 使用 registry 推导的穷尽类型，不再允许未登记 module 或漏 loader。
+- main、UI、monitor、scroll-lock、独立 site entry、manifest host permissions、userscript metadata 和 background tab query 全部由审计脚本与 registry 对账。
+- 新增 `scripts/site-support-audit.mjs`、`scripts/check-site-support.mjs` 和 `pnpm check:site-support`，CI 同时检查源码和生产 manifest/产物。
+
+### 2.3 MAIN-world 实际机制
+
+Plasmo 的 MAIN-world entry 不是普通 manifest content script。构建后 background 会调用 `chrome.scripting.registerContentScripts()`，注册项引用带 hash 的产物文件。旧注册若跨扩展更新保留，会继续指向已不存在的旧 hash；仅检查源码 `config.matches` 无法发现该问题。
+
+修复包含：
+
+- 六个 MAIN-world entry 均显式设置 `persist_across_sessions: false`。
+- `src/constants/main-world-scripts.ts` 定义当前构建期望的 id、hash 产物、matches、world 和 runAt。
+- background 启动时读取浏览器实际 registration，比较 id、JS 文件、matches、world、runAt 和 persistence。
+- 若检测到旧 hash 或 matches 漂移，background 注销旧 registration、注册当前产物并 reload 支持站点标签。
+- 生产审计验证六个产物均存在，background 引用当前 hash，且 registration 与源码 config 一致。
+
+### 2.4 Plasmo 静默失败盲区
+
+原生成代码包含对动态注册失败的 `.catch(() => {})`，扩展仍可安装且构建通过，但 MAIN-world 功能不会运行。当前业务层不再把“调用 promise 已 resolve”当成注册正确；启动对账会显式记录最终失败，站点审计也会在构建期阻止缺失产物或错误 registration 进入 CI。
+
+## 3. 生命周期、初始化回滚与 hydration
+
+### 3.1 发现
+
+- `modules-init.ts` 的 manager 初始化中途失败时，已启动模块不会按逆序释放。
+- SPA 重初始化、设置热更新和开发重挂载可能让旧 timer、observer、store subscription 和事件 listener 继续工作。
+- 异步初始化完成后可能覆盖更新一代的 runtime 状态。
+- `SiteAdapter` 没有统一 dispose 契约，站点级 listener 与缓存只能依赖页面 unload。
+- NetworkMonitor、Gemini My Stuff bridge、Gemini TitleGuard、ReadingHistory 和 policy retry 均存在重复 init、迟到 callback 或不可取消等待。
+- 扩展 settings hydration 可永久等待；userscript 路径则可能在数据尚未可靠恢复时伪造 `_hasHydrated=true`。
+
+### 3.2 修复
+
+- 增加 cleanup stack 和 module generation；每次初始化拥有独立代际，旧代异步结果不能提交到新 runtime。
+- `destroyCoreModules()` 按依赖逆序销毁，初始化失败也执行同一回滚路径。
+- `SiteAdapter.dispose()` 成为显式生命周期接口，adapter runtime 清理时同步调用。
+- manager 的 timer、observer、listener、subscription 和 pending retry 均被实例跟踪；destroy/stop 幂等。
+- NetworkMonitor、Gemini My Stuff bridge 和 Gemini TitleGuard 覆盖 `init -> destroy -> init`，避免重复监听和丢失恢复能力。
+- ReadingHistory 的 hydration timeout 不再篡改 Zustand `_hasHydrated`；destroy 可取消等待与迟到恢复。
+- 扩展 settings hydration 设置 5 秒上限并显式失败；userscript 使用同步 GM storage 的真实 hydration，不再用 Promise 或伪成功掩盖状态。
+
+### 3.3 回归保护
+
+新增测试覆盖 cleanup stack、module generation、core lifecycle、adapter runtime、NetworkMonitor、Gemini lifecycle、ReadingHistory、policy retry 和 App runtime writer cleanup。
+
+## 4. Prompt Dialog 与覆盖层交互
+
+### 4.1 发现
+
+Prompt Editor、Import 和 Preview 各自实现 overlay、Escape、ARIA 和焦点恢复。嵌套 Preview 时，父子层会同时处理 Escape；关闭子层后焦点可能回到 body；Tab trap 也可能在非顶层 dialog 生效。
+
+### 4.2 修复
+
+- 三个 Prompt dialog 迁移到统一 `DialogOverlay` 和 Shadow Root overlay portal。
+- dialog stack 使用稳定 token，不依赖渲染顺序或 DOM 查询推断顶层。
+- 只有顶层 dialog 处理 Escape 和 Tab focus trap。
+- 关闭子层恢复其触发器或父层内焦点；再次 Escape 才关闭父层。
+- 保留 `role=dialog`、`aria-modal`、label/description 关联和打开时首焦点。
+
+### 4.3 Design read
+
+本轮属于工作型内容面板覆盖层，按 `DESIGN.md` 的 preserve 模式执行，主要适用 0、1、2、4、5、9、11、12 章；涉及 Shadow DOM overlay 注入和 24 套主题，但未引入新的主题 token 或视觉方向。
+
+## 5. Clear-all 数据事务
+
+### 5.1 原问题
+
+原流程是“通知标签 -> clear local/sync -> 重置各 Zustand store -> reload”。它存在以下竞态：
+
+- background 只要消息 resolve 就认为标签已停止写入，未校验 `{ success: true }`。
+- 传输重试可能掩盖标签显式返回 `{ success: false }`。
+- 多个 bundle 各有独立 Zustand module instance；一个 bundle 的 barrier 无法代表 main、UI 和 App 都已排空。
+- ConversationManager、OutlineManager、Queue 和周期任务可能在 clear 后再次 persist。
+- 已发出但未完成的 `chrome.storage.local.set()` 可在 clear 后落盘。
+- local clear 成功、sync clear 失败会形成半清空；逐 store reset 又会把默认值写回，破坏“全部清除”语义。
+- WebDAV restore、备份导入、发布记录、用量计数和 background 会话键写入绕过 Zustand adapter。
+- `chrome.runtime.lastError` 被忽略时，调用方会收到伪成功。
+
+### 5.2 扩展端事务
+
+当前流程为：
+
+1. Options 发起带 `transactionId` 的 prepare。
+2. 当前 realm 先 suspend barrier，等待已发出的写入 drain，并通过 `waitUntil()` 风格事件收集 main、UI 和 App 的同步注册任务。
+3. background 用 `chrome.storage.session` 持久化 transaction lease，排空 background 自身写入，再向所有活动支持站点广播 prepare。
+4. 每个标签必须显式返回 `{ success: true }`；业务拒绝不会被传输重试吞掉。
+5. snapshot local/sync，执行双 clear；任一步失败都从 snapshot rollback。
+6. commit 只写 clear flag，不再逐个 reset Zustand。
+7. complete/abort 必须携带同一 transaction owner；background 释放 lease 后 reload 其它标签。
+
+background lease 可跨 MV3 service worker 重启恢复。若发起页中途关闭，2 分钟 TTL 会释放 stale transaction，避免永久冻结。所有权不匹配、并发 clear、pending write 失败、worker restart 和 stale lease 均有单元测试。
+
+### 5.3 写入边界
+
+- Zustand `setItem/removeItem` 共享不可逆 suspend barrier。
+- barrier 跟踪 suspend 前已开始的 Promise 写入，prepare 必须等待它们 settle；失败会终止事务。
+- WebDAV restore、Backup import、release notes、usage monitor 和 userscript Claude key 切换使用 `runTrackedPersistenceWrite()`。
+- background settings/Claude key 写入由独立 coordinator 跟踪。
+- snapshot、clear、rollback、generation、prepare/ack/heartbeat 等事务协议写入明确绕过 barrier，避免事务阻塞自身。
+- Chrome callback adapter 会读取 `runtime.lastError` 并 reject，不再静默成功。
+
+## 6. Userscript 多标签事务
+
+Userscript 的 GM storage 在同一脚本的所有标签之间共享，但每个标签有独立 JS realm。仅冻结发起标签会让其它标签在 clear 后立即写回。
+
+当前 coordinator 提供：
+
+- 活跃 runtime heartbeat 与过期清理。
+- prepare signal、目标 runtime 集合和逐标签 ack/error。
+- 有界等待；任一活动标签未确认或确认失败则拒绝 clear。
+- 新打开标签检测正在进行的 prepare，立即冻结并等待 reload。
+- clear generation key；旧 realm 即使错过 prepare 通知，也会因 generation 改变而永久停止写入。
+- `GM_listValues` grant；`get(null)`、snapshot 和 clear 枚举真实 GM keys，不再遗漏 `bookmarks` 等未知或未来 key。
+- complete/abort 清理协议元数据并通知其它 runtime reload。
+
+这套协议不依赖 GM storage 的 Promise 语义；底层 GM get/set/delete 仍保持同步。
+
+## 7. 自动化与真实浏览器证据
+
+### 7.1 自动化范围
+
+- Vitest 限制为 `tests/**/*.test.{ts,tsx}`，测试按源码领域镜像集中存放，不再与生产源码混排，也不会误收集 `output/playwright` 临时脚本。
+- 测试覆盖 adapter routing、MAIN registration 诊断、生命周期、hydration、Dialog、clear transaction、extension background lease、userscript coordinator、storage rollback 和消息 acknowledgement。
+- `check:site-support` 验证 15 个站点、所有入口、host permissions、userscript metadata、15 个 site entry、6 个 MAIN-world entry 和生产 registration。
+- `check:bundle-budget` 同时验证 content entry、最大 site entry、userscript、运行时 JS 暴露和动态 chunk lookup。
+
+### 7.2 浏览器冒烟
+
+使用生产 Chrome 构建验证：
+
+- Options 可打开，无启动错误。
+- ChatGPT、Qianwen、Gemini 均存在扩展 Shadow Root、React App 和 overlay root。
+- Gemini MAIN-world marker 正常。
+- 六个动态 registration 存在，`persistAcrossSessions=false`。
+- 人工制造旧 hash/matches registration 后，background 能自动注销、重注册并恢复当前产物。
+
+临时 Playwright 脚本保存在 `output/playwright`，只作为本地证据，不进入提交。
+
+## 8. 最终验证结果
+
+最终工作树必须通过以下门禁：
+
+```text
+pnpm format:check
+pnpm lint:check
+pnpm typecheck
+pnpm test:run
+pnpm check:theme-tokens
+pnpm check:site-support
+pnpm build
+pnpm build:firefox
+pnpm build:userscript
+pnpm check:bundle-budget
+git diff --check
+```
+
+最终结果：
+
+- 35 个测试文件、101 项测试全部通过。
+- Chrome MV3、Firefox MV3 和 userscript 生产构建全部通过。
+- 15 个 site entry 与 6 个 MAIN-world 产物通过生产 manifest/registration 审计。
+- 扩展 `main + ui-entry`：3,766,388 B raw / 998,441 B gzip，较审计基线下降 49.7%。
+- 最大单站点入口 `site-claude.*.js`：1,018,230 B raw / 292,965 B gzip。
+- userscript：1,848,311 B raw / 484,011 B gzip。
+
+## 9. 残余风险
+
+1. 站点 DOM 和未公开 API 会持续变化；registry 和生命周期门禁不能替代每个站点的真实交互回归。
+2. MAIN-world 自动修复依赖 `chrome.scripting` 可用；最终失败会显式记录，但无法在权限或浏览器实现缺失时自行绕过。
+3. Clear-all 是跨 realm 协调事务，不是数据库原子事务；浏览器进程在 local clear 与 rollback 之间崩溃仍可能留下部分状态。snapshot、ack、generation 和 lease 已降低正常运行中的竞态，但无法保证进程崩溃原子性。
+4. Userscript 活跃标签判断依赖 heartbeat，有界窗口内的休眠/冻结标签可能导致 prepare 超时并安全失败，而不是强行清除。
+5. 浏览器冒烟覆盖代表性站点和注册修复，不等于 15 个站点的完整 E2E。后续应把扩展加载、面板挂载、设置 hydration 和 clear-all 主流程迁入可重复 CI 浏览器测试。
diff --git a/docs/plans/2026-07-10-project-audit-remediation.md b/docs/plans/2026-07-10-project-audit-remediation.md
index 417344b15..d8e7bbfd5 100644
--- a/docs/plans/2026-07-10-project-audit-remediation.md
+++ b/docs/plans/2026-07-10-project-audit-remediation.md
@@ -16,7 +16,7 @@
 - Modify: `package.json`
 - Modify: `pnpm-lock.yaml`
 - Create: `vitest.config.ts`
-- Create: `src/**/*.test.ts`
+- Create: `tests/**/*.test.ts`
 - Create: `scripts/check-theme-tokens.mjs`
 - Create: `scripts/check-bundle-budget.mjs`
 
@@ -195,4 +195,3 @@
 4. 第二轮 review：检查 diff、重复数据源、cleanup、主题、i18n、双平台和安全退化。
 5. 使用 Conventional Commits 提交。
 6. 推送分支并使用英文标题/正文创建 GitHub PR。
-
diff --git a/package.json b/package.json
index 37f5acb77..2dc293311 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "test": "vitest",
     "test:run": "vitest run",
     "check:theme-tokens": "node scripts/check-theme-tokens.mjs",
+    "check:site-support": "node scripts/check-site-support.mjs",
     "check:bundle-budget": "node scripts/check-bundle-budget.mjs",
     "build": "pnpm prepare:mermaid-assets && plasmo build",
     "build:firefox": "pnpm prepare:mermaid-assets && plasmo build --target=firefox-mv3",
@@ -128,7 +129,6 @@
       "https://aistudio.google.com/*",
       "https://*.googleusercontent.com/*",
       "https://chatgpt.com/*",
-      "https://chat.openai.com/*",
       "https://*.oaiusercontent.com/*",
       "https://grok.com/*",
       "https://claude.ai/*",
diff --git a/scripts/check-bundle-budget.mjs b/scripts/check-bundle-budget.mjs
index 2ed770428..5972db6e7 100644
--- a/scripts/check-bundle-budget.mjs
+++ b/scripts/check-bundle-budget.mjs
@@ -3,6 +3,8 @@ import path from "node:path"
 import process from "node:process"
 import { gzipSync } from "node:zlib"
 
+import { validateSiteSupport } from "./site-support-audit.mjs"
+
 const rootDir = process.cwd()
 const chromeBuildDir = path.join(rootDir, "build", "chrome-mv3-prod")
 const userscriptFile = path.join(rootDir, "build", "userscript", "ophel.user.js")
@@ -94,6 +96,7 @@ try {
   const manifest = JSON.parse(
     readRequiredFile(path.join(chromeBuildDir, "manifest.json")).toString("utf8"),
   )
+  validateSiteSupport({ chromeManifest: manifest, chromeBuildDir })
   const runtimeBusinessScripts = (manifest.web_accessible_resources || [])
     .flatMap((entry) => entry.resources || [])
     .filter((resource) => resource.endsWith(".js") && !resource.startsWith("assets/"))
diff --git a/scripts/check-site-support.mjs b/scripts/check-site-support.mjs
new file mode 100644
index 000000000..09d842bd2
--- /dev/null
+++ b/scripts/check-site-support.mjs
@@ -0,0 +1,13 @@
+import process from "node:process"
+
+import { validateSiteSupport } from "./site-support-audit.mjs"
+
+try {
+  const registry = validateSiteSupport()
+  console.log(
+    `[site-support] ${registry.sites.length} adapters cover ${registry.hostnames.length} application hosts`,
+  )
+} catch (error) {
+  console.error(`[site-support] ${error instanceof Error ? error.message : String(error)}`)
+  process.exit(1)
+}
diff --git a/scripts/site-support-audit.mjs b/scripts/site-support-audit.mjs
new file mode 100644
index 000000000..62ecd4f43
--- /dev/null
+++ b/scripts/site-support-audit.mjs
@@ -0,0 +1,462 @@
+import fs from "node:fs"
+import path from "node:path"
+import ts from "typescript"
+
+const rootDir = process.cwd()
+const registryFile = path.join(rootDir, "src", "constants", "supported-sites.json")
+const fullCoverageEntries = [
+  "src/contents/main.ts",
+  "src/contents/ui-entry.tsx",
+  "src/contents/monitor-entry.ts",
+  "src/contents/scroll-lock-main.ts",
+]
+const mainWorldEntries = [
+  {
+    source: "src/contents/gemini-canvas-main.ts",
+    id: "srcContentsGeminiCanvasMain",
+    artifactPattern: /^gemini-canvas-main\.[^.]+\.js$/,
+  },
+  {
+    source: "src/contents/gemini-watermark-main.ts",
+    id: "srcContentsGeminiWatermarkMain",
+    artifactPattern: /^gemini-watermark-main\.[^.]+\.js$/,
+  },
+  {
+    source: "src/contents/iframe-scroll-main.ts",
+    id: "srcContentsIframeScrollMain",
+    artifactPattern: /^iframe-scroll-main\.[^.]+\.js$/,
+  },
+  {
+    source: "src/contents/monitor-entry.ts",
+    id: "srcContentsMonitorEntry",
+    artifactPattern: /^monitor-entry\.[^.]+\.js$/,
+  },
+  {
+    source: "src/contents/scroll-lock-main.ts",
+    id: "srcContentsScrollLockMain",
+    artifactPattern: /^scroll-lock-main\.[^.]+\.js$/,
+  },
+  {
+    source: "src/contents/yuanbao-monaco-main.ts",
+    id: "srcContentsYuanbaoMonacoMain",
+    artifactPattern: /^yuanbao-monaco-main\.[^.]+\.js$/,
+  },
+]
+const auxiliaryHostPermissions = new Set([
+  "https://*.googleusercontent.com/*",
+  "https://*.oaiusercontent.com/*",
+])
+
+function sorted(values) {
+  return [...values].sort()
+}
+
+function assertUnique(values, label) {
+  const duplicates = values.filter((value, index) => values.indexOf(value) !== index)
+  if (duplicates.length > 0) {
+    throw new Error(`${label} contains duplicates: ${sorted(new Set(duplicates)).join(", ")}`)
+  }
+}
+
+function assertSameSet(actual, expected, label) {
+  const actualSet = new Set(actual)
+  const expectedSet = new Set(expected)
+  const missing = expected.filter((value) => !actualSet.has(value))
+  const unexpected = actual.filter((value) => !expectedSet.has(value))
+
+  if (missing.length > 0 || unexpected.length > 0 || actual.length !== expected.length) {
+    const details = [
+      missing.length > 0 ? `missing ${sorted(missing).join(", ")}` : null,
+      unexpected.length > 0 ? `unexpected ${sorted(unexpected).join(", ")}` : null,
+      actual.length !== actualSet.size ? "contains duplicate matches" : null,
+    ].filter(Boolean)
+    throw new Error(`${label} does not match the supported-site registry: ${details.join("; ")}`)
+  }
+}
+
+function readRegistry() {
+  const sites = JSON.parse(fs.readFileSync(registryFile, "utf8"))
+  if (!Array.isArray(sites) || sites.length === 0) {
+    throw new Error("Supported-site registry must be a non-empty array")
+  }
+
+  const entries = []
+  const modules = []
+  const matches = []
+  const hostnames = []
+
+  for (const site of sites) {
+    if (
+      !site ||
+      typeof site.entry !== "string" ||
+      typeof site.module !== "string" ||
+      !Array.isArray(site.matches) ||
+      site.matches.length === 0
+    ) {
+      throw new Error("Each supported site requires entry, module, and at least one match")
+    }
+    if (site.entry !== site.module) {
+      throw new Error(
+        `Supported-site entry and adapter module must match: ${site.entry} != ${site.module}`,
+      )
+    }
+
+    entries.push(site.entry)
+    modules.push(site.module)
+    for (const match of site.matches) {
+      if (typeof match !== "string" || !/^https:\/\/[^/]+\/\*$/.test(match)) {
+        throw new Error(`Invalid supported-site match for ${site.entry}: ${String(match)}`)
+      }
+      matches.push(match)
+      hostnames.push(new URL(match.replace(/\*$/, "")).hostname)
+    }
+  }
+
+  assertUnique(entries, "Supported-site entries")
+  assertUnique(modules, "Supported-site adapter modules")
+  assertUnique(matches, "Supported-site matches")
+  assertUnique(hostnames, "Supported-site hostnames")
+
+  return { sites, modules, matches, hostnames }
+}
+
+function propertyName(node) {
+  if (ts.isIdentifier(node) || ts.isStringLiteral(node)) return node.text
+  return null
+}
+
+function evaluateLiteral(node, variables) {
+  if (!node) return undefined
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) return node.text
+  if (ts.isNumericLiteral(node)) return Number(node.text)
+  if (node.kind === ts.SyntaxKind.TrueKeyword) return true
+  if (node.kind === ts.SyntaxKind.FalseKeyword) return false
+  if (ts.isPrefixUnaryExpression(node) && node.operator === ts.SyntaxKind.ExclamationToken) {
+    return !evaluateLiteral(node.operand, variables)
+  }
+  if (ts.isArrayLiteralExpression(node)) {
+    return node.elements.map((element) => evaluateLiteral(element, variables))
+  }
+  if (ts.isIdentifier(node)) return evaluateLiteral(variables.get(node.text), variables)
+  if (ts.isObjectLiteralExpression(node)) {
+    return Object.fromEntries(
+      node.properties
+        .filter(ts.isPropertyAssignment)
+        .map((property) => [
+          propertyName(property.name),
+          evaluateLiteral(property.initializer, variables),
+        ])
+        .filter(([name]) => name !== null),
+    )
+  }
+  return undefined
+}
+
+function parseContentScriptConfig(relativePath) {
+  const filePath = path.join(rootDir, relativePath)
+  const source = fs.readFileSync(filePath, "utf8")
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    source,
+    ts.ScriptTarget.Latest,
+    true,
+    relativePath.endsWith("x") ? ts.ScriptKind.TSX : ts.ScriptKind.TS,
+  )
+  const variables = new Map()
+
+  for (const statement of sourceFile.statements) {
+    if (!ts.isVariableStatement(statement)) continue
+    for (const declaration of statement.declarationList.declarations) {
+      if (ts.isIdentifier(declaration.name)) {
+        variables.set(declaration.name.text, declaration.initializer)
+      }
+    }
+  }
+
+  const config = evaluateLiteral(variables.get("config"), variables)
+  if (!config || !Array.isArray(config.matches)) {
+    throw new Error(`Unable to read config.matches from ${relativePath}`)
+  }
+  return config
+}
+
+function unwrapExpression(node) {
+  if (
+    ts.isParenthesizedExpression(node) ||
+    ts.isAsExpression(node) ||
+    ts.isSatisfiesExpression(node)
+  ) {
+    return unwrapExpression(node.expression)
+  }
+  return node
+}
+
+function parseAdapterLoaderKeys() {
+  const relativePath = "src/adapters/index.ts"
+  const filePath = path.join(rootDir, relativePath)
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    fs.readFileSync(filePath, "utf8"),
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS,
+  )
+
+  for (const statement of sourceFile.statements) {
+    if (!ts.isVariableStatement(statement)) continue
+    for (const declaration of statement.declarationList.declarations) {
+      if (!ts.isIdentifier(declaration.name) || declaration.name.text !== "adapterLoaders") {
+        continue
+      }
+
+      const initializer = declaration.initializer
+        ? unwrapExpression(declaration.initializer)
+        : undefined
+      if (!initializer || !ts.isObjectLiteralExpression(initializer)) break
+
+      return initializer.properties
+        .filter(ts.isPropertyAssignment)
+        .map((property) => propertyName(property.name))
+        .filter((name) => name !== null)
+    }
+  }
+
+  throw new Error(`Unable to read adapterLoaders from ${relativePath}`)
+}
+
+function parseRuntimeMainWorldRegistrations() {
+  const relativePath = "src/constants/main-world-scripts.ts"
+  const filePath = path.join(rootDir, relativePath)
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    fs.readFileSync(filePath, "utf8"),
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS,
+  )
+
+  for (const statement of sourceFile.statements) {
+    if (!ts.isVariableStatement(statement)) continue
+    for (const declaration of statement.declarationList.declarations) {
+      if (
+        !ts.isIdentifier(declaration.name) ||
+        declaration.name.text !== "MAIN_WORLD_CONTENT_SCRIPTS"
+      ) {
+        continue
+      }
+
+      const initializer = declaration.initializer
+        ? unwrapExpression(declaration.initializer)
+        : undefined
+      if (!initializer || !ts.isArrayLiteralExpression(initializer)) break
+      return initializer.elements.map((element) => evaluateLiteral(element, new Map()))
+    }
+  }
+
+  throw new Error(`Unable to read MAIN_WORLD_CONTENT_SCRIPTS from ${relativePath}`)
+}
+
+function parseUserscriptMatches() {
+  const relativePath = "vite.userscript.config.ts"
+  const source = fs.readFileSync(path.join(rootDir, relativePath), "utf8")
+  const match = source.match(/\bmatch:\s*\[([\s\S]*?)\],\s*grant:/)
+  if (!match) {
+    throw new Error(`Unable to read userscript match metadata from ${relativePath}`)
+  }
+  return [...match[1].matchAll(/["'](https:\/\/[^"']+)["']/g)].map((item) => item[1])
+}
+
+function contentScriptLabel(entry) {
+  return (entry.js || []).join(", ") || "content script without JS"
+}
+
+function findManifestEntry(manifest, pattern) {
+  const entries = (manifest.content_scripts || []).filter((entry) =>
+    (entry.js || []).some((fileName) => pattern.test(fileName)),
+  )
+  if (entries.length !== 1) {
+    throw new Error(
+      `Expected one production manifest entry matching ${pattern}, found ${entries.length}`,
+    )
+  }
+  return entries[0]
+}
+
+function parseRegisteredContentScripts(source) {
+  const sourceFile = ts.createSourceFile(
+    "background.js",
+    source,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.JS,
+  )
+  const registrations = []
+
+  const visit = (node) => {
+    if (
+      ts.isCallExpression(node) &&
+      ts.isPropertyAccessExpression(node.expression) &&
+      node.expression.name.text === "registerContentScripts" &&
+      ts.isArrayLiteralExpression(node.arguments[0])
+    ) {
+      for (const element of node.arguments[0].elements) {
+        if (!ts.isObjectLiteralExpression(element)) continue
+        const registration = evaluateLiteral(element, new Map())
+        if (registration) registrations.push(registration)
+      }
+    }
+    ts.forEachChild(node, visit)
+  }
+
+  visit(sourceFile)
+  return registrations
+}
+
+function findDynamicRegistration(registrations, id) {
+  const matches = registrations.filter((entry) => entry.id === id)
+  if (matches.length !== 1) {
+    throw new Error(`Expected one production dynamic registration ${id}, found ${matches.length}`)
+  }
+  return matches[0]
+}
+
+function findArtifact(artifactNames, pattern, label) {
+  const matches = artifactNames.filter((fileName) => pattern.test(fileName))
+  if (matches.length !== 1) {
+    throw new Error(`Expected one production ${label} artifact, found ${matches.length}`)
+  }
+  return matches[0]
+}
+
+export function validateSiteSupport({ chromeManifest, chromeBuildDir } = {}) {
+  const registry = readRegistry()
+  const adapterLoaderKeys = parseAdapterLoaderKeys()
+  assertUnique(adapterLoaderKeys, "Adapter loader keys")
+  assertSameSet(adapterLoaderKeys, registry.modules, "src/adapters/index.ts adapter loaders")
+  const runtimeRegistrations = parseRuntimeMainWorldRegistrations()
+  assertSameSet(
+    runtimeRegistrations.map((registration) => registration.id),
+    mainWorldEntries.map((entry) => entry.id),
+    "MAIN-world registration diagnostics",
+  )
+
+  for (const relativePath of fullCoverageEntries) {
+    const config = parseContentScriptConfig(relativePath)
+    assertSameSet(config.matches, registry.matches, relativePath)
+  }
+
+  const mainWorldConfigs = new Map()
+  for (const expected of mainWorldEntries) {
+    const config = parseContentScriptConfig(expected.source)
+    if (config.world !== "MAIN") {
+      throw new Error(`${expected.source} must run in the MAIN world`)
+    }
+    if (config.persist_across_sessions !== false) {
+      throw new Error(`${expected.source} must set persist_across_sessions to false`)
+    }
+    mainWorldConfigs.set(expected.id, config)
+  }
+
+  for (const expected of mainWorldEntries) {
+    const sourceConfig = mainWorldConfigs.get(expected.id)
+    const registration = runtimeRegistrations.find(({ id }) => id === expected.id)
+    if (!registration) {
+      throw new Error(`Missing runtime registration diagnostic for ${expected.id}`)
+    }
+    assertSameSet(
+      registration.matches || [],
+      sourceConfig.matches,
+      `${expected.id} runtime matches`,
+    )
+    if (registration.world !== sourceConfig.world) {
+      throw new Error(`${expected.id} runtime world does not match ${expected.source}`)
+    }
+    if ((registration.runAt || "document_idle") !== (sourceConfig.run_at || "document_idle")) {
+      throw new Error(`${expected.id} runtime runAt does not match ${expected.source}`)
+    }
+    if (registration.persistAcrossSessions !== sourceConfig.persist_across_sessions) {
+      throw new Error(`${expected.id} runtime persistence does not match ${expected.source}`)
+    }
+  }
+
+  for (const site of registry.sites) {
+    const relativePath = `src/contents/site-${site.entry}.ts`
+    if (!fs.existsSync(path.join(rootDir, relativePath))) {
+      throw new Error(`Missing adapter registration entry: ${relativePath}`)
+    }
+    assertSameSet(parseContentScriptConfig(relativePath).matches, site.matches, relativePath)
+  }
+
+  const packageJson = JSON.parse(fs.readFileSync(path.join(rootDir, "package.json"), "utf8"))
+  const hostPermissions = packageJson.manifest?.host_permissions || []
+  const publicHostPermissions = hostPermissions.filter(
+    (match) => !auxiliaryHostPermissions.has(match),
+  )
+  assertSameSet(publicHostPermissions, registry.matches, "package.json host_permissions")
+
+  assertSameSet(parseUserscriptMatches(), registry.matches, "userscript @match metadata")
+
+  if (chromeManifest) {
+    const manifestHostPermissions = (chromeManifest.host_permissions || []).filter(
+      (match) => !auxiliaryHostPermissions.has(match),
+    )
+    assertSameSet(manifestHostPermissions, registry.matches, "production manifest host_permissions")
+
+    for (const pattern of [/^main\.[^.]+\.js$/, /^ui-entry\.[^.]+\.js$/]) {
+      const entry = findManifestEntry(chromeManifest, pattern)
+      assertSameSet(entry.matches || [], registry.matches, contentScriptLabel(entry))
+    }
+
+    for (const site of registry.sites) {
+      const entry = findManifestEntry(
+        chromeManifest,
+        new RegExp(`^site-${site.entry.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\.[^.]+\\.js$`),
+      )
+      assertSameSet(entry.matches || [], site.matches, contentScriptLabel(entry))
+    }
+
+    if (!chromeBuildDir) {
+      throw new Error("Production site-support validation requires chromeBuildDir")
+    }
+
+    const backgroundRelativePath = chromeManifest.background?.service_worker
+    if (typeof backgroundRelativePath !== "string") {
+      throw new Error("Production manifest is missing a background service worker")
+    }
+    const backgroundSource = fs.readFileSync(
+      path.join(chromeBuildDir, backgroundRelativePath),
+      "utf8",
+    )
+    const artifactNames = fs.readdirSync(chromeBuildDir)
+    const registrations = parseRegisteredContentScripts(backgroundSource)
+    const mainWorldRegistrations = registrations.filter((entry) => entry.world === "MAIN")
+    assertSameSet(
+      mainWorldRegistrations.map((entry) => entry.id),
+      mainWorldEntries.map((entry) => entry.id),
+      "production MAIN-world registration IDs",
+    )
+
+    for (const expected of mainWorldEntries) {
+      const sourceConfig = mainWorldConfigs.get(expected.id)
+      const registration = findDynamicRegistration(registrations, expected.id)
+      const artifactName = findArtifact(artifactNames, expected.artifactPattern, expected.source)
+      if (!backgroundSource.includes(artifactName)) {
+        throw new Error(`Background service worker does not reference ${artifactName}`)
+      }
+      assertSameSet(registration.matches || [], sourceConfig.matches, expected.id)
+      if (registration.world !== "MAIN") {
+        throw new Error(`${expected.id} must run in the MAIN world`)
+      }
+      if (registration.runAt !== sourceConfig.run_at) {
+        throw new Error(
+          `${expected.id} has runAt ${String(registration.runAt)}, expected ${String(sourceConfig.run_at)}`,
+        )
+      }
+      if (registration.persistAcrossSessions !== false) {
+        throw new Error(`${expected.id} must not persist across sessions`)
+      }
+    }
+  }
+
+  return registry
+}
diff --git a/src/adapters/base.ts b/src/adapters/base.ts
index e289a99d8..e20be8ee3 100644
--- a/src/adapters/base.ts
+++ b/src/adapters/base.ts
@@ -1866,6 +1866,9 @@ export abstract class SiteAdapter {
     }
   }
 
+  /** 释放 afterPropertiesSet() 创建的站点级持久资源。 */
+  dispose(): void {}
+
   /** 判断是否应该将样式注入到指定的 Shadow Host 中 */
   shouldInjectIntoShadow(_host: Element): boolean {
     return true
diff --git a/src/adapters/claude.ts b/src/adapters/claude.ts
index 843decbdd..567ec0bde 100644
--- a/src/adapters/claude.ts
+++ b/src/adapters/claude.ts
@@ -197,10 +197,7 @@ export class ClaudeAdapter extends SiteAdapter {
   private outlineWordCountCache = new WeakMap<Element, ClaudeOutlineWordCountCacheEntry>()
 
   match(): boolean {
-    return (
-      window.location.hostname.includes("claude.ai") ||
-      window.location.hostname.includes("claude.com")
-    )
+    return window.location.hostname === "claude.ai"
   }
 
   getSiteId(): string {
diff --git a/src/adapters/gemini.ts b/src/adapters/gemini.ts
index f030e4a73..e51879bd5 100644
--- a/src/adapters/gemini.ts
+++ b/src/adapters/gemini.ts
@@ -343,7 +343,10 @@ const GEMINI_NEW_CHAT_INPUT_SAFE_AREA_SELECTOR =
 
 class GeminiMyStuffEnhancer {
   private started = false
-  private tooltipBindings = new WeakMap<HTMLElement, DomTooltipBinding>()
+  private cardWatchStop: (() => void) | null = null
+  private refreshTimers = new Set<ReturnType<typeof setTimeout>>()
+  private releaseCleanups = new Set<() => void>()
+  private tooltipBindings = new Map<HTMLElement, DomTooltipBinding>()
   private pendingRequests = new Map<
     string,
     {
@@ -368,17 +371,69 @@ class GeminiMyStuffEnhancer {
     this.started = true
 
     this.injectStyles()
-    DOMToolkit.each(".library-item-card", (element) => this.enhanceMediaCard(element), {
-      shadow: true,
-    })
+    this.cardWatchStop = DOMToolkit.each(
+      ".library-item-card",
+      (element) => this.enhanceMediaCard(element),
+      {
+        shadow: true,
+      },
+    )
 
     document.addEventListener("click", this.handleDocumentClick, true)
     window.addEventListener("message", this.handleWindowMessage)
     window.addEventListener(GEMINI_MYSTUFF_ROUTE_EVENT, this.handleRouteChange)
 
     this.refreshForCurrentRoute(false)
-    setTimeout(() => this.refreshForCurrentRoute(false), 600)
-    setTimeout(() => this.refreshForCurrentRoute(false), 1500)
+    this.scheduleRefresh(600)
+    this.scheduleRefresh(1500)
+  }
+
+  stop(): void {
+    if (!this.started) return
+    this.started = false
+
+    this.cardWatchStop?.()
+    this.cardWatchStop = null
+    for (const timer of this.refreshTimers) {
+      clearTimeout(timer)
+    }
+    this.refreshTimers.clear()
+
+    document.removeEventListener("click", this.handleDocumentClick, true)
+    window.removeEventListener("message", this.handleWindowMessage)
+    window.removeEventListener(GEMINI_MYSTUFF_ROUTE_EVENT, this.handleRouteChange)
+    document.documentElement.classList.remove(GEMINI_MYSTUFF_ACTIVE_CLASS)
+
+    for (const release of this.releaseCleanups) {
+      release()
+    }
+    this.releaseCleanups.clear()
+
+    for (const [button, binding] of this.tooltipBindings) {
+      binding.destroy()
+      button.remove()
+    }
+    this.tooltipBindings.clear()
+
+    for (const request of this.pendingRequests.values()) {
+      clearTimeout(request.timeoutId)
+      request.reject(new Error("mystuff-enhancer-stopped"))
+    }
+    this.pendingRequests.clear()
+    this.recordsByKind.media.clear()
+    this.recordsByKind.document.clear()
+    this.rebuildIndexes()
+    document.getElementById(GEMINI_MYSTUFF_STYLE_ID)?.remove()
+  }
+
+  private scheduleRefresh(delay: number): void {
+    const timer = setTimeout(() => {
+      this.refreshTimers.delete(timer)
+      if (this.started) {
+        this.refreshForCurrentRoute(false)
+      }
+    }, delay)
+    this.refreshTimers.add(timer)
   }
 
   private readonly handleRouteChange = () => {
@@ -537,11 +592,20 @@ class GeminiMyStuffEnhancer {
   }
 
   private enhanceExistingMediaCards(): void {
+    this.cleanupDisconnectedMediaButtons()
     document
       .querySelectorAll(".library-item-card")
       .forEach((element) => this.enhanceMediaCard(element))
   }
 
+  private cleanupDisconnectedMediaButtons(): void {
+    for (const [button, binding] of this.tooltipBindings) {
+      if (button.isConnected) continue
+      binding.destroy()
+      this.tooltipBindings.delete(button)
+    }
+  }
+
   private enhanceMediaCard(element: Element): void {
     if (!this.isMyStuffPath()) return
 
@@ -926,7 +990,10 @@ class GeminiMyStuffEnhancer {
     button.blur()
     button.setAttribute(GEMINI_MYSTUFF_OPEN_BUTTON_SUPPRESS_ATTR, "1")
 
+    let released = false
     const release = () => {
+      if (released) return
+      released = true
       button.removeAttribute(GEMINI_MYSTUFF_OPEN_BUTTON_SUPPRESS_ATTR)
       window.removeEventListener("pointermove", release, true)
       window.removeEventListener("pointerdown", release, true)
@@ -934,8 +1001,10 @@ class GeminiMyStuffEnhancer {
       window.removeEventListener("wheel", release, true)
       window.removeEventListener("touchstart", release, true)
       button.removeEventListener("focus", release, true)
+      this.releaseCleanups.delete(release)
     }
 
+    this.releaseCleanups.add(release)
     window.addEventListener("pointermove", release, true)
     window.addEventListener("pointerdown", release, true)
     window.addEventListener("keydown", release, true)
@@ -955,11 +1024,11 @@ export class GeminiAdapter extends SiteAdapter {
   private accountEmailLastDetectAt = 0
   private myStuffEnhancer: GeminiMyStuffEnhancer | null = null
   private deepResearchPanelWatchStop: (() => void) | null = null
-  private deepResearchPanelObservers = new WeakMap<Element, () => void>()
-  private deepResearchPanelTooltipBindings = new WeakMap<HTMLElement, DomTooltipBinding>()
+  private deepResearchPanelObservers = new Map<Element, () => void>()
+  private deepResearchPanelTooltipBindings = new Map<HTMLElement, DomTooltipBinding>()
   private canvasPanelWatchStop: (() => void) | null = null
-  private canvasPanelObservers = new WeakMap<Element, () => void>()
-  private canvasPanelTooltipBindings = new WeakMap<HTMLElement, DomTooltipBinding>()
+  private canvasPanelObservers = new Map<Element, () => void>()
+  private canvasPanelTooltipBindings = new Map<HTMLElement, DomTooltipBinding>()
   private exportOpenedCanvasPanel = false
   private outlineWordCountCache = new WeakMap<Element, GeminiOutlineWordCountCacheEntry>()
 
@@ -1041,6 +1110,7 @@ export class GeminiAdapter extends SiteAdapter {
   }
 
   private watchDeepResearchPanel(panel: Element): void {
+    this.cleanupDisconnectedDeepResearchPanels()
     this.syncDeepResearchPanelActions(panel)
     if (this.deepResearchPanelObservers.has(panel)) return
 
@@ -1050,6 +1120,7 @@ export class GeminiAdapter extends SiteAdapter {
       () => {
         if (!panel.isConnected) {
           stop?.()
+          this.removeDeepResearchPanelActions(panel)
           this.deepResearchPanelObservers.delete(panel)
           return
         }
@@ -1067,6 +1138,7 @@ export class GeminiAdapter extends SiteAdapter {
   }
 
   private watchGeminiCanvasPanel(panel: Element): void {
+    this.cleanupDisconnectedCanvasPanels()
     this.syncGeminiCanvasPanelActions(panel)
     if (this.canvasPanelObservers.has(panel)) return
 
@@ -1076,6 +1148,7 @@ export class GeminiAdapter extends SiteAdapter {
       () => {
         if (!panel.isConnected) {
           stop?.()
+          this.removeGeminiCanvasPanelActions(panel)
           this.canvasPanelObservers.delete(panel)
           return
         }
@@ -1092,6 +1165,24 @@ export class GeminiAdapter extends SiteAdapter {
     this.canvasPanelObservers.set(panel, stop)
   }
 
+  private cleanupDisconnectedDeepResearchPanels(): void {
+    for (const [panel, stop] of this.deepResearchPanelObservers) {
+      if (panel.isConnected) continue
+      stop()
+      this.removeDeepResearchPanelActions(panel)
+      this.deepResearchPanelObservers.delete(panel)
+    }
+  }
+
+  private cleanupDisconnectedCanvasPanels(): void {
+    for (const [panel, stop] of this.canvasPanelObservers) {
+      if (panel.isConnected) continue
+      stop()
+      this.removeGeminiCanvasPanelActions(panel)
+      this.canvasPanelObservers.delete(panel)
+    }
+  }
+
   private injectGeminiPanelMarkdownActionStyles(): void {
     DOMToolkit.css(
       `
@@ -1219,6 +1310,7 @@ export class GeminiAdapter extends SiteAdapter {
       node.querySelectorAll(`.${GEMINI_PANEL_MARKDOWN_ACTION_CLASS}`).forEach((button) => {
         if (button instanceof HTMLElement) {
           this.deepResearchPanelTooltipBindings.get(button)?.destroy()
+          this.deepResearchPanelTooltipBindings.delete(button)
         }
       })
       node.remove()
@@ -1230,6 +1322,7 @@ export class GeminiAdapter extends SiteAdapter {
       node.querySelectorAll(`.${GEMINI_PANEL_MARKDOWN_ACTION_CLASS}`).forEach((button) => {
         if (button instanceof HTMLElement) {
           this.canvasPanelTooltipBindings.get(button)?.destroy()
+          this.canvasPanelTooltipBindings.delete(button)
         }
       })
       node.remove()
@@ -5651,6 +5744,38 @@ export class GeminiAdapter extends SiteAdapter {
     this.startGeminiCanvasPanelActions()
   }
 
+  dispose(): void {
+    this.myStuffEnhancer?.stop()
+    this.myStuffEnhancer = null
+
+    this.deepResearchPanelWatchStop?.()
+    this.deepResearchPanelWatchStop = null
+    for (const [panel, stop] of this.deepResearchPanelObservers) {
+      stop()
+      this.removeDeepResearchPanelActions(panel)
+    }
+    this.deepResearchPanelObservers.clear()
+    for (const binding of this.deepResearchPanelTooltipBindings.values()) {
+      binding.destroy()
+    }
+    this.deepResearchPanelTooltipBindings.clear()
+
+    this.canvasPanelWatchStop?.()
+    this.canvasPanelWatchStop = null
+    for (const [panel, stop] of this.canvasPanelObservers) {
+      stop()
+      this.removeGeminiCanvasPanelActions(panel)
+    }
+    this.canvasPanelObservers.clear()
+    for (const binding of this.canvasPanelTooltipBindings.values()) {
+      binding.destroy()
+    }
+    this.canvasPanelTooltipBindings.clear()
+
+    document.getElementById(GEMINI_PANEL_MARKDOWN_ACTIONS_STYLE_ID)?.remove()
+    super.dispose()
+  }
+
   // ==================== 模型锁定 ====================
 
   getDefaultLockSettings(): { enabled: boolean; keyword: string } {
diff --git a/src/adapters/index.test.ts b/src/adapters/index.test.ts
deleted file mode 100644
index 63f9924e8..000000000
--- a/src/adapters/index.test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { describe, expect, it } from "vitest"
-
-import { resolveAdapterModuleKey } from "./index"
-
-describe("resolveAdapterModuleKey", () => {
-  it.each([
-    ["business.gemini.google", "gemini-enterprise"],
-    ["gemini.google.com", "gemini"],
-    ["aistudio.google.com", "aistudio"],
-    ["chatgpt.com", "chatgpt"],
-    ["claude.ai", "claude"],
-    ["chat.deepseek.com", "deepseek"],
-    ["www.doubao.com", "doubao"],
-    ["chat.qwen.ai", "qwen-studio"],
-    ["qianwen.com", "qianwen"],
-    ["chat.z.ai", "zai"],
-  ] as const)("routes %s to %s", (hostname, moduleKey) => {
-    expect(resolveAdapterModuleKey(hostname)).toBe(moduleKey)
-  })
-
-  it("does not load an adapter for an unsupported or legacy hostname", () => {
-    expect(resolveAdapterModuleKey("example.com")).toBeNull()
-    expect(resolveAdapterModuleKey("chat.openai.com")).toBeNull()
-  })
-})
diff --git a/src/adapters/index.ts b/src/adapters/index.ts
index 7a99fee21..12e5b1730 100644
--- a/src/adapters/index.ts
+++ b/src/adapters/index.ts
@@ -5,128 +5,82 @@
  */
 
 import type { SiteAdapter } from "./base"
+import {
+  resolveSupportedAdapterModule,
+  type SupportedAdapterModuleKey,
+} from "~constants/supported-sites"
 
-export type AdapterModuleKey =
-  | "aistudio"
-  | "chatglm"
-  | "chatgpt"
-  | "claude"
-  | "deepseek"
-  | "doubao"
-  | "gemini"
-  | "gemini-enterprise"
-  | "grok"
-  | "ima"
-  | "kimi"
-  | "qianwen"
-  | "qwen-studio"
-  | "yuanbao"
-  | "zai"
+export type AdapterModuleKey = SupportedAdapterModuleKey
 
 export function resolveAdapterModuleKey(hostname: string): AdapterModuleKey | null {
-  const normalizedHostname = hostname.toLowerCase()
-
-  switch (normalizedHostname) {
-    case "business.gemini.google":
-      return "gemini-enterprise"
-    case "gemini.google.com":
-      return "gemini"
-    case "aistudio.google.com":
-      return "aistudio"
-    case "grok.com":
-      return "grok"
-    case "chatgpt.com":
-      return "chatgpt"
-    case "claude.ai":
-    case "claude.com":
-      return "claude"
-    case "chat.deepseek.com":
-      return "deepseek"
-    case "www.doubao.com":
-      return "doubao"
-    case "ima.qq.com":
-      return "ima"
-    case "chatglm.cn":
-      return "chatglm"
-    case "www.kimi.com":
-      return "kimi"
-    case "chat.qwen.ai":
-      return "qwen-studio"
-    case "www.qianwen.com":
-    case "qianwen.com":
-      return "qianwen"
-    case "yuanbao.tencent.com":
-      return "yuanbao"
-    case "chat.z.ai":
-      return "zai"
-    default:
-      return null
-  }
+  return resolveSupportedAdapterModule(hostname)
 }
 
+const adapterLoaders = {
+  "gemini-enterprise": async () => {
+    const { GeminiEnterpriseAdapter } = await import("./gemini-enterprise")
+    return new GeminiEnterpriseAdapter()
+  },
+  gemini: async () => {
+    const { GeminiAdapter } = await import("./gemini")
+    return new GeminiAdapter()
+  },
+  aistudio: async () => {
+    const { AIStudioAdapter } = await import("./aistudio")
+    return new AIStudioAdapter()
+  },
+  grok: async () => {
+    const { GrokAdapter } = await import("./grok")
+    return new GrokAdapter()
+  },
+  chatgpt: async () => {
+    const { ChatGPTAdapter } = await import("./chatgpt")
+    return new ChatGPTAdapter()
+  },
+  claude: async () => {
+    const { ClaudeAdapter } = await import("./claude")
+    return new ClaudeAdapter()
+  },
+  deepseek: async () => {
+    const { DeepSeekAdapter } = await import("./deepseek")
+    return new DeepSeekAdapter()
+  },
+  doubao: async () => {
+    const { DoubaoAdapter } = await import("./doubao")
+    return new DoubaoAdapter()
+  },
+  ima: async () => {
+    const { ImaAdapter } = await import("./ima")
+    return new ImaAdapter()
+  },
+  chatglm: async () => {
+    const { ChatGLMAdapter } = await import("./chatglm")
+    return new ChatGLMAdapter()
+  },
+  kimi: async () => {
+    const { KimiAdapter } = await import("./kimi")
+    return new KimiAdapter()
+  },
+  "qwen-studio": async () => {
+    const { QwenAiAdapter } = await import("./qwen-studio")
+    return new QwenAiAdapter()
+  },
+  qianwen: async () => {
+    const { QianwenAdapter } = await import("./qianwen")
+    return new QianwenAdapter()
+  },
+  yuanbao: async () => {
+    const { YuanbaoAdapter } = await import("./yuanbao")
+    return new YuanbaoAdapter()
+  },
+  zai: async () => {
+    const { ZaiAdapter } = await import("./zai")
+    return new ZaiAdapter()
+  },
+} satisfies Record<AdapterModuleKey, () => Promise<SiteAdapter>>
+
 async function createAdapter(moduleKey: AdapterModuleKey): Promise<SiteAdapter> {
-  switch (moduleKey) {
-    case "gemini-enterprise": {
-      const { GeminiEnterpriseAdapter } = await import("./gemini-enterprise")
-      return new GeminiEnterpriseAdapter()
-    }
-    case "gemini": {
-      const { GeminiAdapter } = await import("./gemini")
-      return new GeminiAdapter()
-    }
-    case "aistudio": {
-      const { AIStudioAdapter } = await import("./aistudio")
-      return new AIStudioAdapter()
-    }
-    case "grok": {
-      const { GrokAdapter } = await import("./grok")
-      return new GrokAdapter()
-    }
-    case "chatgpt": {
-      const { ChatGPTAdapter } = await import("./chatgpt")
-      return new ChatGPTAdapter()
-    }
-    case "claude": {
-      const { ClaudeAdapter } = await import("./claude")
-      return new ClaudeAdapter()
-    }
-    case "deepseek": {
-      const { DeepSeekAdapter } = await import("./deepseek")
-      return new DeepSeekAdapter()
-    }
-    case "doubao": {
-      const { DoubaoAdapter } = await import("./doubao")
-      return new DoubaoAdapter()
-    }
-    case "ima": {
-      const { ImaAdapter } = await import("./ima")
-      return new ImaAdapter()
-    }
-    case "chatglm": {
-      const { ChatGLMAdapter } = await import("./chatglm")
-      return new ChatGLMAdapter()
-    }
-    case "kimi": {
-      const { KimiAdapter } = await import("./kimi")
-      return new KimiAdapter()
-    }
-    case "qwen-studio": {
-      const { QwenAiAdapter } = await import("./qwen-studio")
-      return new QwenAiAdapter()
-    }
-    case "qianwen": {
-      const { QianwenAdapter } = await import("./qianwen")
-      return new QianwenAdapter()
-    }
-    case "yuanbao": {
-      const { YuanbaoAdapter } = await import("./yuanbao")
-      return new YuanbaoAdapter()
-    }
-    case "zai": {
-      const { ZaiAdapter } = await import("./zai")
-      return new ZaiAdapter()
-    }
-  }
+  return adapterLoaders[moduleKey]()
 }
 
 /**
diff --git a/src/adapters/qianwen.ts b/src/adapters/qianwen.ts
index 5ac10d270..c12358a78 100644
--- a/src/adapters/qianwen.ts
+++ b/src/adapters/qianwen.ts
@@ -172,7 +172,7 @@ export class QianwenAdapter extends SiteAdapter {
 
   match(): boolean {
     const hostname = window.location.hostname
-    return hostname === "www.qianwen.com" || hostname === "qianwen.com"
+    return hostname === "www.qianwen.com"
   }
 
   getSiteId(): string {
diff --git a/src/background.ts b/src/background.ts
index 6b28f039c..d1ea08b4c 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,14 +1,24 @@
 import { APP_DISPLAY_NAME } from "~utils/config"
+import {
+  MAIN_WORLD_CONTENT_SCRIPT_IDS,
+  MAIN_WORLD_CONTENT_SCRIPTS,
+} from "~constants/main-world-scripts"
+import { SUPPORTED_SITE_MATCHES } from "~constants/supported-sites"
+import { BackgroundClearAllCoordinator } from "~core/background-clear-all-coordinator"
 import { loadLocaleMessages } from "~locales/loader"
 import {
+  MSG_ABORT_CLEAR_ALL_DATA,
   MSG_CLEAR_ALL_DATA,
   MSG_CHECK_CLAUDE_GENERATING,
+  MSG_CHECK_IS_GENERATING,
   MSG_CHECK_PERMISSION,
   MSG_CHECK_PERMISSIONS,
+  MSG_COMPLETE_CLEAR_ALL_DATA,
   MSG_EXTENSION_UPDATE_AVAILABLE,
   MSG_FOCUS_TAB,
   MSG_GET_AISTUDIO_MODELS,
   MSG_GET_CLAUDE_SESSION_KEY,
+  MSG_GET_MODEL_LIST,
   MSG_GET_LOCALE_MESSAGES,
   MSG_OPEN_OPTIONS_PAGE,
   MSG_OPEN_URL,
@@ -22,6 +32,7 @@ import {
   MSG_TEST_CLAUDE_TOKEN,
   MSG_WEBDAV_REQUEST,
   type ExtensionMessage,
+  requireSuccessfulMessageAcknowledgement,
 } from "~utils/messaging"
 import {
   localStorage,
@@ -45,22 +56,76 @@ interface PersistedClaudeSessionKeys {
  * - 代理请求（图片 Base64 转换等）
  */
 
-const OPHEL_TARGET_URLS = [
-  "https://gemini.google.com/*",
-  "https://business.gemini.google/*",
-  "https://aistudio.google.com/*",
-  "https://grok.com/*",
-  "https://chat.openai.com/*",
-  "https://chatgpt.com/*",
-  "https://claude.ai/*",
-  "https://www.doubao.com/*",
-  "https://ima.qq.com/*",
-  "https://chat.deepseek.com/*",
-  "https://chatglm.cn/*",
-  "https://chat.qwen.ai/*",
-  "https://yuanbao.tencent.com/*",
-  "https://chat.z.ai/*",
-]
+const OPHEL_TARGET_URLS = SUPPORTED_SITE_MATCHES
+const MAIN_WORLD_REGISTRATION_CHECK_RETRIES = 4
+const MAIN_WORLD_REGISTRATION_CHECK_DELAY_MS = 100
+const backgroundClearAllCoordinator = new BackgroundClearAllCoordinator(chrome.storage.session)
+
+const sortedStrings = (values: string[] | undefined): string[] => [...(values || [])].sort()
+
+function isExpectedMainWorldRegistration(
+  actual: chrome.scripting.RegisteredContentScript,
+  expected: chrome.scripting.RegisteredContentScript,
+): boolean {
+  return (
+    actual.id === expected.id &&
+    actual.world === expected.world &&
+    actual.runAt === expected.runAt &&
+    actual.persistAcrossSessions === expected.persistAcrossSessions &&
+    JSON.stringify(sortedStrings(actual.js)) === JSON.stringify(sortedStrings(expected.js)) &&
+    JSON.stringify(sortedStrings(actual.matches)) ===
+      JSON.stringify(sortedStrings(expected.matches))
+  )
+}
+
+async function getMainWorldRegistrationDrift(): Promise<string[]> {
+  const registrations = await chrome.scripting.getRegisteredContentScripts({
+    ids: MAIN_WORLD_CONTENT_SCRIPT_IDS,
+  })
+  const byId = new Map(registrations.map((registration) => [registration.id, registration]))
+
+  return MAIN_WORLD_CONTENT_SCRIPTS.flatMap((expected) => {
+    const actual = byId.get(expected.id)
+    return actual && isExpectedMainWorldRegistration(actual, expected) ? [] : [expected.id]
+  })
+}
+
+async function verifyMainWorldContentScriptRegistration(): Promise<void> {
+  for (let attempt = 1; attempt <= MAIN_WORLD_REGISTRATION_CHECK_RETRIES; attempt += 1) {
+    try {
+      const driftedIds = await getMainWorldRegistrationDrift()
+      if (driftedIds.length === 0) return
+
+      if (attempt === MAIN_WORLD_REGISTRATION_CHECK_RETRIES) {
+        console.warn("[Ophel] Repairing MAIN-world content script registrations:", driftedIds)
+        const currentRegistrations = await chrome.scripting.getRegisteredContentScripts({
+          ids: MAIN_WORLD_CONTENT_SCRIPT_IDS,
+        })
+        if (currentRegistrations.length > 0) {
+          await chrome.scripting.unregisterContentScripts({
+            ids: currentRegistrations.map(({ id }) => id),
+          })
+        }
+        await chrome.scripting.registerContentScripts(MAIN_WORLD_CONTENT_SCRIPTS)
+        const remainingDrift = await getMainWorldRegistrationDrift()
+        if (remainingDrift.length > 0) {
+          throw new Error(`Registration drift remains: ${remainingDrift.join(", ")}`)
+        }
+        await reloadOphelTabs()
+        return
+      }
+    } catch (error) {
+      if (attempt === MAIN_WORLD_REGISTRATION_CHECK_RETRIES) {
+        console.error("[Ophel] Failed to verify MAIN-world content script registration:", error)
+        return
+      }
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, MAIN_WORLD_REGISTRATION_CHECK_DELAY_MS))
+  }
+}
+
+void verifyMainWorldContentScriptRegistration()
 
 // 通知 ID 格式："ophel|{tabId}|{windowId}|{uuid}"
 // 将 Tab 信息编码进 notifId，避免 MV3 Service Worker 重启后内存 Map 丢失
@@ -106,20 +171,90 @@ async function queryOphelTabs() {
   return chrome.tabs.query({ url: OPHEL_TARGET_URLS })
 }
 
-async function broadcastToOphelTabs(message: ExtensionMessage) {
+interface TabOperationResult {
+  tabs: chrome.tabs.Tab[]
+  completed: number
+  failures: Array<{ tabId: number; error: string }>
+}
+
+const getErrorMessage = (error: unknown): string =>
+  error instanceof Error ? error.message : String(error)
+
+async function sendTabMessageWithRetry(
+  tabId: number,
+  message: ExtensionMessage,
+  requireAcknowledgement: boolean,
+  maxAttempts = 5,
+): Promise<void> {
+  let lastError: unknown
+
+  for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+    let response: unknown
+    try {
+      response = await chrome.tabs.sendMessage(tabId, message)
+    } catch (error) {
+      lastError = error
+      if (attempt < maxAttempts) {
+        await new Promise((resolve) => setTimeout(resolve, 250))
+        continue
+      }
+      throw lastError
+    }
+
+    if (requireAcknowledgement) {
+      requireSuccessfulMessageAcknowledgement(response)
+    }
+    return
+  }
+
+  throw lastError
+}
+
+async function broadcastToOphelTabs(
+  message: ExtensionMessage,
+  { requireDelivery = false }: { requireDelivery?: boolean } = {},
+): Promise<TabOperationResult> {
   const tabs = await queryOphelTabs()
+  const targetTabs = tabs.filter((tab): tab is chrome.tabs.Tab & { id: number } =>
+    Boolean(tab.id && !tab.discarded),
+  )
+  const results = await Promise.allSettled(
+    targetTabs.map((tab) => sendTabMessageWithRetry(tab.id, message, requireDelivery)),
+  )
+  const failures = results.flatMap((result, index) =>
+    result.status === "rejected"
+      ? [{ tabId: targetTabs[index].id, error: getErrorMessage(result.reason) }]
+      : [],
+  )
 
-  await Promise.all(
-    tabs
-      .filter((tab) => tab.id)
-      .map((tab) =>
-        chrome.tabs.sendMessage(tab.id as number, message).catch(() => {
-          // 忽略未注入内容脚本的页面
-        }),
-      ),
+  if (failures.length > 0) {
+    const label = requireDelivery ? "Required tab broadcast failed" : "Tab broadcast was partial"
+    console.warn(`[Ophel] ${label}:`, failures)
+  }
+  if (requireDelivery && failures.length > 0) {
+    throw new Error(`Failed to stop ${failures.length} active Ophel tab(s)`)
+  }
+
+  return { tabs, completed: targetTabs.length - failures.length, failures }
+}
+
+async function reloadOphelTabs(excludedTabId?: number): Promise<TabOperationResult> {
+  const tabs = await queryOphelTabs()
+  const targetTabs = tabs.filter((tab): tab is chrome.tabs.Tab & { id: number } =>
+    Boolean(tab.id && tab.id !== excludedTabId),
   )
+  const results = await Promise.allSettled(targetTabs.map((tab) => chrome.tabs.reload(tab.id)))
+  const failures = results.flatMap((result, index) =>
+    result.status === "rejected"
+      ? [{ tabId: targetTabs[index].id, error: getErrorMessage(result.reason) }]
+      : [],
+  )
+
+  if (failures.length > 0) {
+    console.error("[Ophel] Failed to reload some Ophel tabs:", failures)
+  }
 
-  return tabs
+  return { tabs, completed: targetTabs.length - failures.length, failures }
 }
 
 // 监听扩展安装/更新
@@ -148,7 +283,9 @@ chrome.permissions.onRemoved.addListener(async (removed) => {
     if (settings && settings.content?.watermarkRemoval) {
       // 关闭去水印
       settings.content.watermarkRemoval = false
-      await localStorage.set("settings", settings)
+      await backgroundClearAllCoordinator.runPersistenceWrite(() =>
+        localStorage.set("settings", settings),
+      )
     }
   }
 })
@@ -510,21 +647,66 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
 
     case MSG_CLEAR_ALL_DATA:
       ;(async () => {
+        const transactionId = message.transactionId
         try {
-          const tabs = await broadcastToOphelTabs({ type: MSG_CLEAR_ALL_DATA })
-          sendResponse({ success: true, tabs: tabs.length })
+          if (!transactionId) {
+            throw new Error("Missing clear-all transaction ID")
+          }
+          await backgroundClearAllCoordinator.begin(transactionId)
+          const result = await broadcastToOphelTabs(
+            { type: MSG_CLEAR_ALL_DATA },
+            { requireDelivery: true },
+          )
+          sendResponse({ success: true, tabs: result.completed })
         } catch (err) {
+          if (transactionId) {
+            try {
+              await backgroundClearAllCoordinator.release(transactionId)
+            } catch (releaseError) {
+              console.error("Failed to release background clear-all transaction:", releaseError)
+            }
+          }
           console.error("Broadcast clear all data failed:", err)
           sendResponse({ success: false, error: (err as Error).message })
         }
       })()
       break
 
+    case MSG_COMPLETE_CLEAR_ALL_DATA:
+    case MSG_ABORT_CLEAR_ALL_DATA:
+      ;(async () => {
+        try {
+          await backgroundClearAllCoordinator.release(message.transactionId)
+          const result = await reloadOphelTabs(sender.tab?.id)
+          sendResponse({
+            success: result.failures.length === 0,
+            tabs: result.completed,
+            failedTabs: result.failures.length,
+            error:
+              result.failures.length > 0
+                ? `Failed to reload ${result.failures.length} Ophel tab(s)`
+                : undefined,
+          })
+        } catch (err) {
+          console.error("Finalize clear all data failed:", err)
+          sendResponse({ success: false, error: (err as Error).message })
+        }
+      })()
+      break
+
     case MSG_RESTORE_DATA:
       ;(async () => {
         try {
-          const tabs = await broadcastToOphelTabs({ type: MSG_RESTORE_DATA })
-          sendResponse({ success: true, tabs: tabs.length })
+          const result = await reloadOphelTabs(sender.tab?.id)
+          sendResponse({
+            success: result.failures.length === 0,
+            tabs: result.completed,
+            failedTabs: result.failures.length,
+            error:
+              result.failures.length > 0
+                ? `Failed to reload ${result.failures.length} Ophel tab(s)`
+                : undefined,
+          })
         } catch (err) {
           console.error("Broadcast restore data failed:", err)
           sendResponse({ success: false, error: (err as Error).message })
@@ -644,7 +826,9 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
           // 5. 更新存储中的当前 Key ID (以保持状态一致)
           if (storageData?.state) {
             storageData.state.currentKeyId = nextKey.id
-            await localStorage.set("claudeSessionKeys", storageData)
+            await backgroundClearAllCoordinator.runPersistenceWrite(() =>
+              localStorage.set("claudeSessionKeys", storageData),
+            )
           }
 
           // 6. 跳转到首页 (而非刷新)
@@ -880,7 +1064,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
             if (!tab.id) continue
             try {
               const result = await chrome.tabs.sendMessage(tab.id, {
-                type: "CHECK_IS_GENERATING",
+                type: MSG_CHECK_IS_GENERATING,
               })
               if (result?.isGenerating) {
                 isGenerating = true
@@ -925,7 +1109,7 @@ chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendRes
 
           try {
             const result = await chrome.tabs.sendMessage(tab.id, {
-              type: "GET_MODEL_LIST",
+              type: MSG_GET_MODEL_LIST,
             })
             sendResponse(result)
           } catch (err) {
diff --git a/src/components/App.tsx b/src/components/App.tsx
index a5551f36f..a17557842 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -34,11 +34,12 @@ import { useConversationsStore } from "~stores/conversations-store"
 import { useFoldersStore } from "~stores/folders-store"
 import { usePromptsStore } from "~stores/prompts-store"
 import { APP_DISPLAY_NAME, APP_VERSION } from "~utils/config"
+import { registerClearAllDataTask } from "~utils/clear-all-event"
 import { DEFAULT_SETTINGS, type Prompt } from "~utils/storage"
 import {
+  EVENT_CLEAR_ALL_DATA,
   EVENT_EXTENSION_UPDATE_AVAILABLE,
   EVENT_PAGE_URL_CHANGE,
-  MSG_CLEAR_ALL_DATA,
 } from "~utils/messaging"
 import { showToast } from "~utils/toast"
 import { setLanguage, subscribeI18nChanges, t } from "~utils/i18n"
@@ -59,6 +60,7 @@ import { SelectedPromptBar } from "./SelectedPromptBar"
 import { SegmentedExportDialog } from "./SegmentedExportDialog"
 import { SettingsModal } from "./SettingsModal"
 import { ExtensionUpdateNotice } from "./app/ExtensionUpdateNotice"
+import { stopAppRuntimeWriters } from "./app/runtime-lifecycle"
 import { useAppRuntimeManagers } from "./app/useAppRuntimeManagers"
 import { GlobalSearchOverlay } from "./global-search/GlobalSearchOverlay"
 import { GlobalSearchResultItemView } from "./global-search/GlobalSearchResultItemView"
@@ -2362,38 +2364,27 @@ export const App: React.FC<AppProps> = ({ adapter }) => {
       // popstate / pushState / replaceState 时 dispatch "gh-url-change"。
       const onUrlChange = () => outlineManager.handleUrlChange()
       const onRefreshOutline = () => outlineManager.refresh()
+      const stopRuntimeWriters = (event?: Event) => {
+        const task = stopAppRuntimeWriters({ conversationManager, outlineManager, queueDispatcher })
+        if (event) {
+          registerClearAllDataTask(event, task)
+        } else {
+          void task.catch((error) => {
+            console.error("[Ophel] Failed to stop app runtime writers:", error)
+          })
+        }
+      }
       window.addEventListener("gh-url-change", onUrlChange)
       window.addEventListener("ophel:refreshOutline", onRefreshOutline)
+      window.addEventListener(EVENT_CLEAR_ALL_DATA, stopRuntimeWriters, { once: true })
       return () => {
         window.removeEventListener("gh-url-change", onUrlChange)
         window.removeEventListener("ophel:refreshOutline", onRefreshOutline)
-        outlineManager.destroy()
-        conversationManager?.destroy()
+        window.removeEventListener(EVENT_CLEAR_ALL_DATA, stopRuntimeWriters)
+        stopRuntimeWriters()
       }
     }
-  }, [promptManager, conversationManager, outlineManager])
-
-  useEffect(() => {
-    if (!conversationManager || typeof chrome === "undefined") return
-
-    const handler = (
-      message: { type?: string } | undefined,
-      _sender: chrome.runtime.MessageSender,
-      sendResponse: (response: { success: boolean }) => void,
-    ) => {
-      if (message?.type === MSG_CLEAR_ALL_DATA) {
-        conversationManager.destroy()
-        sendResponse({ success: true })
-        return true
-      }
-      return false
-    }
-
-    chrome.runtime.onMessage.addListener(handler)
-    return () => {
-      chrome.runtime.onMessage.removeListener(handler)
-    }
-  }, [conversationManager])
+  }, [promptManager, queueDispatcher, conversationManager, outlineManager])
 
   useEffect(() => {
     const handleExtensionUpdateAvailable = (event: Event) => {
diff --git a/src/components/PromptsTab.tsx b/src/components/PromptsTab.tsx
index b639f74f3..9de4f6a05 100644
--- a/src/components/PromptsTab.tsx
+++ b/src/components/PromptsTab.tsx
@@ -1234,10 +1234,7 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
       promptInputState.show ||
       confirmState.show ||
       isCategoryModalOpen ||
-      isModalOpen ||
       chainEditorState.show ||
-      previewModal.show ||
-      importDialogState.show ||
       variableDialogState.show
 
     if (!hasPromptDialogs) {
@@ -1273,23 +1270,8 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
         return
       }
 
-      if (isModalOpen) {
-        closeEditModal()
-        return
-      }
-
       if (chainEditorState.show) {
         closeChainEditor()
-        return
-      }
-
-      if (previewModal.show) {
-        closePreviewModal()
-        return
-      }
-
-      if (importDialogState.show) {
-        closeImportDialog()
       }
     }
 
@@ -1301,17 +1283,11 @@ export const PromptsTab: React.FC<PromptsTabProps> = ({
     closeCategoryModal,
     closeConfirmDialog,
     closeChainEditor,
-    closeEditModal,
-    closeImportDialog,
-    closePreviewModal,
     closePromptInputDialog,
     closeVariableDialog,
     chainEditorState.show,
     confirmState.show,
-    importDialogState.show,
     isCategoryModalOpen,
-    isModalOpen,
-    previewModal.show,
     promptInputState.show,
     variableDialogState.show,
   ])
diff --git a/src/components/app/runtime-lifecycle.ts b/src/components/app/runtime-lifecycle.ts
new file mode 100644
index 000000000..8f28be581
--- /dev/null
+++ b/src/components/app/runtime-lifecycle.ts
@@ -0,0 +1,28 @@
+import type { ConversationManager } from "~core/conversation-manager"
+import type { OutlineManager } from "~core/outline-manager"
+import type { QueueDispatcher } from "~core/queue-dispatcher"
+import { drainPersistenceWrites, suspendPersistenceWrites } from "~stores/chrome-adapter"
+import { drainCleanupStack } from "~utils/cleanup-stack"
+
+interface AppRuntimeWriters {
+  conversationManager: Pick<ConversationManager, "destroy">
+  outlineManager: Pick<OutlineManager, "destroy">
+  queueDispatcher: Pick<QueueDispatcher, "stop">
+}
+
+export function stopAppRuntimeWriters({
+  conversationManager,
+  outlineManager,
+  queueDispatcher,
+}: AppRuntimeWriters): Promise<void> {
+  suspendPersistenceWrites()
+  drainCleanupStack(
+    [
+      () => outlineManager.destroy(),
+      () => conversationManager.destroy(),
+      () => queueDispatcher.stop(),
+    ],
+    "app runtime",
+  )
+  return drainPersistenceWrites()
+}
diff --git a/src/components/prompts/ImportDialog.tsx b/src/components/prompts/ImportDialog.tsx
index d95a872f2..56803a041 100644
--- a/src/components/prompts/ImportDialog.tsx
+++ b/src/components/prompts/ImportDialog.tsx
@@ -1,9 +1,6 @@
 import React from "react"
-import { createPortal } from "react-dom"
 
-import { Button } from "~components/ui"
-import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
-import { OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS } from "~utils/dom-toolkit"
+import { Button, DialogOverlay } from "~components/ui"
 import { t } from "~utils/i18n"
 
 interface ImportDialogProps {
@@ -21,83 +18,48 @@ export const ImportDialog = ({
   onMerge,
   onOverwrite,
 }: ImportDialogProps) => {
-  const portalTarget = useOverlayPortalTarget()
-  if (!isOpen || !portalTarget) return null
+  if (!isOpen) return null
 
-  return createPortal(
-    <div
-      className="import-dialog gh-interactive"
-      {...OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS}
-      onClick={(e) => {
-        if (e.target === e.currentTarget) {
-          onClose()
-        }
-      }}
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: "var(--gh-overlay-bg, rgba(0, 0, 0, 0.5))",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 10001,
-      }}>
+  return (
+    <DialogOverlay
+      onClose={onClose}
+      overlayClassName="import-dialog"
+      ariaLabel={t("promptImportTitle")}
+      dialogStyle={{ width: "90%", maxWidth: "400px", padding: "24px" }}>
+      <div className="gh-dialog-title">{t("promptImportTitle")}</div>
       <div
         style={{
-          width: "90%",
-          maxWidth: "400px",
-          background: "var(--gh-bg, white)",
-          borderRadius: "12px",
-          boxShadow: "var(--gh-shadow-lg)",
-          padding: "24px",
+          fontSize: "14px",
+          color: "var(--gh-text-secondary)",
+          marginBottom: "20px",
+          lineHeight: 1.6,
         }}>
-        <div
-          style={{
-            fontSize: "16px",
-            fontWeight: 600,
-            marginBottom: "12px",
-            color: "var(--gh-text)",
-          }}>
-          {t("promptImportTitle")}
-        </div>
-        <div
+        {t("promptImportMessage2").replace("{count}", promptCount.toString())}
+        <ul style={{ margin: "8px 0 0 0", paddingLeft: "20px" }}>
+          <li>{t("promptImportOverwriteDesc")}</li>
+          <li>{t("promptImportMergeDesc")}</li>
+        </ul>
+      </div>
+      <div style={{ display: "flex", gap: "12px", justifyContent: "flex-end" }}>
+        <Button
+          variant="ghost"
+          onClick={onClose}
+          style={{ background: "var(--gh-hover, #f3f4f6)" }}>
+          {t("cancel")}
+        </Button>
+        <Button
+          variant="ghost"
+          onClick={onMerge}
           style={{
-            fontSize: "14px",
-            color: "var(--gh-text-secondary)",
-            marginBottom: "20px",
-            lineHeight: 1.6,
+            background: "var(--gh-primary-light, #e3f2fd)",
+            color: "var(--gh-primary, #4285f4)",
           }}>
-          {t("promptImportMessage2").replace("{count}", promptCount.toString())}
-          <ul style={{ margin: "8px 0 0 0", paddingLeft: "20px" }}>
-            <li>{t("promptImportOverwriteDesc")}</li>
-            <li>{t("promptImportMergeDesc")}</li>
-          </ul>
-        </div>
-        <div style={{ display: "flex", gap: "12px", justifyContent: "flex-end" }}>
-          <Button
-            variant="ghost"
-            onClick={onClose}
-            style={{ background: "var(--gh-hover, #f3f4f6)" }}>
-            {t("cancel")}
-          </Button>
-          <Button
-            variant="ghost"
-            onClick={onMerge}
-            style={{
-              background: "var(--gh-primary-light, #e3f2fd)",
-              color: "var(--gh-primary, #4285f4)",
-            }}>
-            {t("promptMerge")}
-          </Button>
-          <Button variant="primary" onClick={onOverwrite}>
-            {t("promptOverwrite")}
-          </Button>
-        </div>
+          {t("promptMerge")}
+        </Button>
+        <Button variant="primary" onClick={onOverwrite}>
+          {t("promptOverwrite")}
+        </Button>
       </div>
-    </div>,
-    portalTarget,
+    </DialogOverlay>
   )
 }
diff --git a/src/components/prompts/PromptEditorDialog.tsx b/src/components/prompts/PromptEditorDialog.tsx
index f6bd9ff4c..1aebfa325 100644
--- a/src/components/prompts/PromptEditorDialog.tsx
+++ b/src/components/prompts/PromptEditorDialog.tsx
@@ -1,9 +1,6 @@
-import React from "react"
-import { createPortal } from "react-dom"
+import React, { useId } from "react"
 
-import { Button } from "~components/ui"
-import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
-import { OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS } from "~utils/dom-toolkit"
+import { Button, DialogOverlay } from "~components/ui"
 import { getHighlightStyles, renderMarkdown } from "~utils/markdown"
 import { showCopySuccess } from "~utils/icons"
 import { t } from "~utils/i18n"
@@ -33,249 +30,230 @@ export const PromptEditorDialog: React.FC<PromptEditorDialogProps> = ({
   onClose,
   onSave,
 }) => {
-  const portalTarget = useOverlayPortalTarget()
-  if (!isOpen || !portalTarget) return null
+  const fieldId = useId().replace(/:/g, "")
+  const titleInputId = `gh-prompt-title-${fieldId}`
+  const categoryInputId = `gh-prompt-category-${fieldId}`
+  const contentInputId = `gh-prompt-content-${fieldId}`
+  if (!isOpen) return null
 
-  return createPortal(
-    <div
-      className="prompt-modal gh-interactive"
-      {...OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS}
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: "var(--gh-overlay-bg)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 2147483646,
-        animation: "fadeIn 0.2s",
-      }}>
+  return (
+    <DialogOverlay
+      onClose={onClose}
+      closeOnOverlayClick={false}
+      overlayClassName="prompt-modal"
+      dialogClassName="prompt-modal-content"
+      dialogStyle={{ width: "90%", maxWidth: "500px", padding: "24px" }}>
       <div
-        className="prompt-modal-content"
-        onClick={(e) => e.stopPropagation()}
+        className="gh-dialog-title"
         style={{
-          background: "var(--gh-bg, white)",
-          borderRadius: "12px",
-          width: "90%",
-          maxWidth: "500px",
-          padding: "24px",
-          animation: "slideUp 0.3s",
-          boxShadow: "var(--gh-shadow, 0 20px 50px rgba(0,0,0,0.3))",
+          fontSize: "18px",
+          marginBottom: "20px",
         }}>
-        <div
+        {editingPrompt?.id ? t("editPrompt") : t("addNewPrompt")}
+      </div>
+
+      {/* 标题 */}
+      <div style={{ marginBottom: "16px" }}>
+        <label
+          htmlFor={titleInputId}
           style={{
-            fontSize: "18px",
-            fontWeight: 600,
-            marginBottom: "20px",
-            color: "var(--gh-text, #1f2937)",
+            display: "block",
+            fontSize: "14px",
+            fontWeight: 500,
+            color: "var(--gh-text, #374151)",
+            marginBottom: "6px",
           }}>
-          {editingPrompt?.id ? t("editPrompt") : t("addNewPrompt")}
-        </div>
+          {t("title")}
+        </label>
+        <input
+          id={titleInputId}
+          type="text"
+          value={editingPrompt?.title || ""}
+          onChange={(e) => setEditingPrompt({ ...editingPrompt, title: e.target.value })}
+          style={{
+            width: "100%",
+            padding: "8px 12px",
+            border: "1px solid var(--gh-border, #d1d5db)",
+            borderRadius: "6px",
+            fontSize: "14px",
+            boxSizing: "border-box",
+            background: "var(--gh-bg, #ffffff)",
+            color: "var(--gh-text, #1f2937)",
+          }}
+        />
+      </div>
 
-        {/* 标题 */}
-        <div style={{ marginBottom: "16px" }}>
-          <label
+      {/* 分类 */}
+      <div style={{ marginBottom: "16px" }}>
+        <label
+          htmlFor={categoryInputId}
+          style={{
+            display: "block",
+            fontSize: "14px",
+            fontWeight: 500,
+            color: "var(--gh-text, #374151)",
+            marginBottom: "6px",
+          }}>
+          {t("category")}
+        </label>
+        <input
+          id={categoryInputId}
+          type="text"
+          value={editingPrompt?.category || ""}
+          onChange={(e) => setEditingPrompt({ ...editingPrompt, category: e.target.value })}
+          placeholder={t("categoryPlaceholder")}
+          style={{
+            width: "100%",
+            padding: "8px 12px",
+            border: "1px solid var(--gh-border, #d1d5db)",
+            borderRadius: "6px",
+            fontSize: "14px",
+            boxSizing: "border-box",
+            background: "var(--gh-bg, #ffffff)",
+            color: "var(--gh-text, #1f2937)",
+          }}
+        />
+        {categories.length > 0 && (
+          <div
             style={{
-              display: "block",
-              fontSize: "14px",
-              fontWeight: 500,
-              color: "var(--gh-text, #374151)",
-              marginBottom: "6px",
+              marginTop: "6px",
+              display: "flex",
+              gap: "4px",
+              flexWrap: "wrap",
+              userSelect: "none",
             }}>
-            {t("title")}
-          </label>
-          <input
-            type="text"
-            value={editingPrompt?.title || ""}
-            onChange={(e) => setEditingPrompt({ ...editingPrompt, title: e.target.value })}
-            style={{
-              width: "100%",
-              padding: "8px 12px",
-              border: "1px solid var(--gh-border, #d1d5db)",
-              borderRadius: "6px",
-              fontSize: "14px",
-              boxSizing: "border-box",
-              background: "var(--gh-bg, #ffffff)",
-              color: "var(--gh-text, #1f2937)",
-            }}
-          />
-        </div>
+            {categories.map((cat) => (
+              <button
+                type="button"
+                key={cat}
+                onClick={() => setEditingPrompt({ ...editingPrompt, category: cat })}
+                style={{
+                  padding: "2px 8px",
+                  border: 0,
+                  fontSize: "11px",
+                  background:
+                    editingPrompt?.category === cat
+                      ? "var(--gh-primary, #4285f4)"
+                      : "var(--gh-hover, #f3f4f6)",
+                  color:
+                    editingPrompt?.category === cat
+                      ? "var(--gh-text-on-primary, white)"
+                      : "var(--gh-text-secondary, #6b7280)",
+                  borderRadius: "10px",
+                  cursor: "pointer",
+                  transition: "all 0.15s",
+                }}>
+                {cat}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
 
-        {/* 分类 */}
-        <div style={{ marginBottom: "16px" }}>
-          <label
+      {/* 内容 */}
+      <div style={{ marginBottom: "16px" }}>
+        <div>
+          <div
             style={{
-              display: "block",
-              fontSize: "14px",
-              fontWeight: 500,
-              color: "var(--gh-text, #374151)",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
               marginBottom: "6px",
             }}>
-            {t("category")}
-          </label>
-          <input
-            type="text"
-            value={editingPrompt?.category || ""}
-            onChange={(e) => setEditingPrompt({ ...editingPrompt, category: e.target.value })}
-            placeholder={t("categoryPlaceholder")}
+            <label
+              htmlFor={contentInputId}
+              style={{
+                fontSize: "14px",
+                fontWeight: 500,
+                color: "var(--gh-text, #374151)",
+              }}>
+              {t("content")}
+            </label>
+            <button
+              type="button"
+              onClick={() => setShowPreview(!showPreview)}
+              style={{
+                padding: "2px 8px",
+                fontSize: "12px",
+                background: showPreview ? "var(--gh-primary, #4285f4)" : "var(--gh-hover, #f3f4f6)",
+                color: showPreview ? "white" : "var(--gh-text-secondary, #6b7280)",
+                border: "1px solid var(--gh-border, #d1d5db)",
+                borderRadius: "4px",
+                cursor: "pointer",
+              }}
+              aria-pressed={showPreview}>
+              {t("promptMarkdownPreview")}
+            </button>
+          </div>
+          <textarea
+            id={contentInputId}
+            value={editingPrompt?.content || ""}
+            onChange={(e) => setEditingPrompt({ ...editingPrompt, content: e.target.value })}
             style={{
               width: "100%",
+              minHeight: "120px",
               padding: "8px 12px",
               border: "1px solid var(--gh-border, #d1d5db)",
               borderRadius: "6px",
               fontSize: "14px",
+              resize: "vertical",
               boxSizing: "border-box",
+              fontFamily: "inherit",
               background: "var(--gh-bg, #ffffff)",
               color: "var(--gh-text, #1f2937)",
+              display: showPreview ? "none" : "block",
             }}
           />
-          {categories.length > 0 && (
-            <div
-              style={{
-                marginTop: "6px",
-                display: "flex",
-                gap: "4px",
-                flexWrap: "wrap",
-                userSelect: "none",
-              }}>
-              {categories.map((cat) => (
-                <span
-                  key={cat}
-                  onClick={() => setEditingPrompt({ ...editingPrompt, category: cat })}
-                  style={{
-                    padding: "2px 8px",
-                    fontSize: "11px",
-                    background:
-                      editingPrompt?.category === cat
-                        ? "var(--gh-primary, #4285f4)"
-                        : "var(--gh-hover, #f3f4f6)",
-                    color:
-                      editingPrompt?.category === cat
-                        ? "var(--gh-text-on-primary, white)"
-                        : "var(--gh-text-secondary, #6b7280)",
-                    borderRadius: "10px",
-                    cursor: "pointer",
-                    transition: "all 0.15s",
-                  }}>
-                  {cat}
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* 内容 */}
-        <div style={{ marginBottom: "16px" }}>
-          <div>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: "6px",
-              }}>
-              <label
-                style={{
-                  fontSize: "14px",
-                  fontWeight: 500,
-                  color: "var(--gh-text, #374151)",
-                }}>
-                {t("content")}
-              </label>
-              {/* ⭐ 预览开关 */}
-              <button
-                onClick={() => setShowPreview(!showPreview)}
+          {showPreview && (
+            <>
+              <div
+                className="gh-markdown-preview"
                 style={{
-                  padding: "2px 8px",
-                  fontSize: "12px",
-                  background: showPreview
-                    ? "var(--gh-primary, #4285f4)"
-                    : "var(--gh-hover, #f3f4f6)",
-                  color: showPreview ? "white" : "var(--gh-text-secondary, #6b7280)",
+                  width: "100%",
+                  minHeight: "120px",
+                  maxHeight: "200px",
+                  padding: "8px 12px",
                   border: "1px solid var(--gh-border, #d1d5db)",
-                  borderRadius: "4px",
-                  cursor: "pointer",
-                }}>
-                {t("promptMarkdownPreview")}
-              </button>
-            </div>
-            <textarea
-              value={editingPrompt?.content || ""}
-              onChange={(e) => setEditingPrompt({ ...editingPrompt, content: e.target.value })}
-              style={{
-                width: "100%",
-                minHeight: "120px",
-                padding: "8px 12px",
-                border: "1px solid var(--gh-border, #d1d5db)",
-                borderRadius: "6px",
-                fontSize: "14px",
-                resize: "vertical",
-                boxSizing: "border-box",
-                fontFamily: "inherit",
-                background: "var(--gh-bg, #ffffff)",
-                color: "var(--gh-text, #1f2937)",
-                display: showPreview ? "none" : "block",
-              }}
-            />
-            {/* ⭐ Markdown 预览区域 */}
-            {showPreview && (
-              <>
-                <div
-                  className="gh-markdown-preview"
-                  style={{
-                    width: "100%",
-                    minHeight: "120px",
-                    maxHeight: "200px",
-                    padding: "8px 12px",
-                    border: "1px solid var(--gh-border, #d1d5db)",
-                    borderRadius: "6px",
-                    fontSize: "14px",
-                    boxSizing: "border-box",
-                    background: "var(--gh-bg-secondary, #f9fafb)",
-                    color: "var(--gh-text, #1f2937)",
-                    overflowY: "auto",
-                    lineHeight: 1.6,
-                  }}
-                  ref={editPreviewRef}
-                  onClick={(e) => {
-                    // 事件委托处理复制按钮（支持点击 SVG 内部）
-                    const target = e.target as HTMLElement
-                    const btn = target.closest(".gh-code-copy-btn") as HTMLElement
-                    if (btn) {
-                      const code = btn.nextElementSibling?.textContent || ""
-                      navigator.clipboard.writeText(code).then(() => {
-                        showCopySuccess(btn, { size: 14 })
-                      })
-                    }
-                  }}
-                  dangerouslySetInnerHTML={{
-                    __html: createSafeHTML(renderMarkdown(editingPrompt?.content || "")),
-                  }}
-                />
-                <style>{getHighlightStyles()}</style>
-              </>
-            )}
-          </div>
+                  borderRadius: "6px",
+                  fontSize: "14px",
+                  boxSizing: "border-box",
+                  background: "var(--gh-bg-secondary, #f9fafb)",
+                  color: "var(--gh-text, #1f2937)",
+                  overflowY: "auto",
+                  lineHeight: 1.6,
+                }}
+                ref={editPreviewRef}
+                onClick={(e) => {
+                  const target = e.target as HTMLElement
+                  const btn = target.closest(".gh-code-copy-btn") as HTMLElement
+                  if (btn) {
+                    const code = btn.nextElementSibling?.textContent || ""
+                    navigator.clipboard.writeText(code).then(() => {
+                      showCopySuccess(btn, { size: 14 })
+                    })
+                  }
+                }}
+                dangerouslySetInnerHTML={{
+                  __html: createSafeHTML(renderMarkdown(editingPrompt?.content || "")),
+                }}
+              />
+              <style>{getHighlightStyles()}</style>
+            </>
+          )}
         </div>
+      </div>
 
-        {/* 按钮 */}
-        <div
-          style={{ display: "flex", gap: "12px", justifyContent: "flex-end", marginTop: "24px" }}>
-          <Button
-            variant="ghost"
-            onClick={onClose}
-            style={{ background: "var(--gh-hover, #f3f4f6)" }}>
-            {t("cancel")}
-          </Button>
-          <Button variant="primary" onClick={onSave}>
-            {editingPrompt?.id ? t("save") : t("add")}
-          </Button>
-        </div>
+      <div style={{ display: "flex", gap: "12px", justifyContent: "flex-end", marginTop: "24px" }}>
+        <Button
+          variant="ghost"
+          onClick={onClose}
+          style={{ background: "var(--gh-hover, #f3f4f6)" }}>
+          {t("cancel")}
+        </Button>
+        <Button variant="primary" onClick={onSave}>
+          {editingPrompt?.id ? t("save") : t("add")}
+        </Button>
       </div>
-    </div>,
-    portalTarget,
+    </DialogOverlay>
   )
 }
diff --git a/src/components/prompts/PromptPreviewModal.tsx b/src/components/prompts/PromptPreviewModal.tsx
index 696ce12a2..be81e6140 100644
--- a/src/components/prompts/PromptPreviewModal.tsx
+++ b/src/components/prompts/PromptPreviewModal.tsx
@@ -1,9 +1,7 @@
 import React from "react"
-import { createPortal } from "react-dom"
 
 import { ClearIcon } from "~components/icons"
-import { useOverlayPortalTarget } from "~components/ui/OverlayPortal"
-import { OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS } from "~utils/dom-toolkit"
+import { DialogOverlay } from "~components/ui"
 import { showCopySuccess } from "~utils/icons"
 import { t } from "~utils/i18n"
 import { getHighlightStyles, renderMarkdown } from "~utils/markdown"
@@ -271,8 +269,7 @@ export const PromptPreviewModal = ({
   getCategoryColorIndex,
   getResolvedCategoryColor,
 }: PromptPreviewModalProps) => {
-  const portalTarget = useOverlayPortalTarget()
-  if (!isOpen || !prompt || !portalTarget) return null
+  if (!isOpen || !prompt) return null
 
   const categoryLabel = prompt.category || t("uncategorized")
   const categoryColorIndex = getCategoryColorIndex(categoryLabel)
@@ -281,65 +278,49 @@ export const PromptPreviewModal = ({
     "--gh-prompt-preview-category-text": "#1f2937",
   } as React.CSSProperties
 
-  return createPortal(
-    <>
+  return (
+    <DialogOverlay
+      onClose={onClose}
+      overlayClassName="gh-prompt-preview-overlay"
+      dialogClassName="gh-prompt-preview-dialog"
+      dialogStyle={{ maxWidth: "min(640px, calc(100vw - 40px))", padding: 0 }}
+      ariaLabel={prompt.title}>
       <style>{PROMPT_PREVIEW_MODAL_STYLES}</style>
-      <div
-        className="gh-prompt-preview-overlay gh-interactive"
-        {...OPHEL_HOVER_WIDTH_RETAIN_LAYER_PROPS}
-        onClick={(e) => {
-          if (e.target === e.currentTarget) {
-            onClose()
-          }
-        }}>
-        <div
-          className="gh-prompt-preview-dialog"
-          role="dialog"
-          aria-modal="true"
-          aria-label={prompt.title}
-          onClick={(e) => e.stopPropagation()}>
-          {/* 标题栏 */}
-          <div className="gh-prompt-preview-header">
-            <div className="gh-prompt-preview-title-block">
-              <div className="gh-prompt-preview-title-row">
-                <div className="gh-prompt-preview-title">{prompt.title}</div>
-                <span className="gh-prompt-preview-category" style={categoryStyle}>
-                  {categoryLabel}
-                </span>
-              </div>
-            </div>
-            <button
-              type="button"
-              className="gh-prompt-preview-close"
-              aria-label={t("close")}
-              onClick={onClose}>
-              <ClearIcon size={16} />
-            </button>
+      <div className="gh-prompt-preview-header">
+        <div className="gh-prompt-preview-title-block">
+          <div className="gh-prompt-preview-title-row">
+            <div className="gh-prompt-preview-title">{prompt.title}</div>
+            <span className="gh-prompt-preview-category" style={categoryStyle}>
+              {categoryLabel}
+            </span>
           </div>
-          {/* 内容区域 */}
-          <div
-            className="gh-prompt-preview-body gh-markdown-preview"
-            ref={previewRef}
-            onClick={(e) => {
-              // 事件委托处理复制按钮（支持点击 SVG 内部）
-              const target = e.target as HTMLElement
-              const btn = target.closest(".gh-code-copy-btn") as HTMLElement
-              if (btn) {
-                const code = btn.nextElementSibling?.textContent || ""
-                navigator.clipboard.writeText(code).then(() => {
-                  showCopySuccess(btn, { size: 14 })
-                })
-              }
-            }}
-            dangerouslySetInnerHTML={{
-              __html: createSafeHTML(renderMarkdown(prompt.content)),
-            }}
-          />
-          {/* highlight.js 样式 */}
-          <style>{getHighlightStyles()}</style>
         </div>
+        <button
+          type="button"
+          className="gh-prompt-preview-close"
+          aria-label={t("close")}
+          onClick={onClose}>
+          <ClearIcon size={16} />
+        </button>
       </div>
-    </>,
-    portalTarget,
+      <div
+        className="gh-prompt-preview-body gh-markdown-preview"
+        ref={previewRef}
+        onClick={(e) => {
+          const target = e.target as HTMLElement
+          const btn = target.closest(".gh-code-copy-btn") as HTMLElement
+          if (btn) {
+            const code = btn.nextElementSibling?.textContent || ""
+            navigator.clipboard.writeText(code).then(() => {
+              showCopySuccess(btn, { size: 14 })
+            })
+          }
+        }}
+        dangerouslySetInnerHTML={{
+          __html: createSafeHTML(renderMarkdown(prompt.content)),
+        }}
+      />
+      <style>{getHighlightStyles()}</style>
+    </DialogOverlay>
   )
 }
diff --git a/src/components/ui/Dialog.test.tsx b/src/components/ui/Dialog.test.tsx
deleted file mode 100644
index 57f64b7f0..000000000
--- a/src/components/ui/Dialog.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import React, { useState } from "react"
-import { describe, expect, it, vi } from "vitest"
-
-import { DialogOverlay } from "./Dialog"
-import { OverlayPortalProvider } from "./OverlayPortal"
-
-const DialogHarness = ({ onClose }: { onClose: () => void }) => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <OverlayPortalProvider>
-      <button onClick={() => setIsOpen(true)}>Open</button>
-      {isOpen && (
-        <DialogOverlay
-          onClose={() => {
-            setIsOpen(false)
-            onClose()
-          }}>
-          <div className="gh-dialog-title">Confirm action</div>
-          <button>Cancel</button>
-          <button>Confirm</button>
-        </DialogOverlay>
-      )}
-    </OverlayPortalProvider>
-  )
-}
-
-describe("DialogOverlay", () => {
-  it("renders in the shared overlay root, traps focus, and restores the trigger", async () => {
-    const user = userEvent.setup()
-    const onClose = vi.fn()
-    render(<DialogHarness onClose={onClose} />)
-
-    const trigger = screen.getByRole("button", { name: "Open" })
-    await user.click(trigger)
-
-    const dialog = await screen.findByRole("dialog", { name: "Confirm action" })
-    expect(dialog.closest("#ophel-overlay-root")).not.toBeNull()
-    expect(screen.getByRole("button", { name: "Cancel" })).toHaveFocus()
-
-    await user.tab({ shift: true })
-    expect(screen.getByRole("button", { name: "Confirm" })).toHaveFocus()
-
-    await user.keyboard("{Escape}")
-    await waitFor(() => expect(dialog).not.toBeInTheDocument())
-    expect(onClose).toHaveBeenCalledOnce()
-    expect(trigger).toHaveFocus()
-  })
-})
diff --git a/src/components/ui/Dialog.tsx b/src/components/ui/Dialog.tsx
index 7a1359c69..a11280e9d 100644
--- a/src/components/ui/Dialog.tsx
+++ b/src/components/ui/Dialog.tsx
@@ -18,6 +18,19 @@ const getDeepActiveElement = (): HTMLElement | null => {
   return activeElement instanceof HTMLElement ? activeElement : null
 }
 
+const dialogStack: symbol[] = []
+
+const registerDialog = (token: symbol): void => {
+  dialogStack.push(token)
+}
+
+const unregisterDialog = (token: symbol): void => {
+  const index = dialogStack.lastIndexOf(token)
+  if (index !== -1) dialogStack.splice(index, 1)
+}
+
+const isTopDialog = (token: symbol): boolean => dialogStack.at(-1) === token
+
 // ==================== DialogOverlay ====================
 
 export interface DialogOverlayProps {
@@ -48,16 +61,26 @@ export const DialogOverlay: React.FC<DialogOverlayProps> = ({
   const overlayRef = useRef<HTMLDivElement>(null)
   const dialogRef = useRef<HTMLDivElement>(null)
   const restoreFocusRef = useRef<HTMLElement | null>(null)
+  const dialogTokenRef = useRef(Symbol("dialog"))
+  const onCloseRef = useRef(onClose)
+  const closeOnEscapeRef = useRef(closeOnEscape)
   const titleId = `gh-dialog-title-${useId().replace(/:/g, "")}`
   const [resolvedTitleId, setResolvedTitleId] = useState<string | undefined>(undefined)
 
+  onCloseRef.current = onClose
+  closeOnEscapeRef.current = closeOnEscape
+
   useEffect(() => {
+    const token = dialogTokenRef.current
     restoreFocusRef.current = getDeepActiveElement()
+    registerDialog(token)
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (closeOnEscape && e.key === "Escape") {
+      if (!isTopDialog(token)) return
+
+      if (closeOnEscapeRef.current && e.key === "Escape") {
         e.preventDefault()
-        onClose()
+        onCloseRef.current()
         return
       }
 
@@ -91,9 +114,10 @@ export const DialogOverlay: React.FC<DialogOverlayProps> = ({
     document.addEventListener("keydown", handleKeyDown)
     return () => {
       document.removeEventListener("keydown", handleKeyDown)
+      unregisterDialog(token)
       restoreFocusRef.current?.focus()
     }
-  }, [closeOnEscape, onClose])
+  }, [])
 
   useEffect(() => {
     const dialog = dialogRef.current
@@ -131,7 +155,9 @@ export const DialogOverlay: React.FC<DialogOverlayProps> = ({
       onClick={
         closeOnOverlayClick
           ? (event) => {
-              if (event.target === event.currentTarget) onClose()
+              if (event.target === event.currentTarget && isTopDialog(dialogTokenRef.current)) {
+                onClose()
+              }
             }
           : undefined
       }>
diff --git a/src/constants/main-world-scripts.ts b/src/constants/main-world-scripts.ts
new file mode 100644
index 000000000..2c383d89e
--- /dev/null
+++ b/src/constants/main-world-scripts.ts
@@ -0,0 +1,93 @@
+import geminiCanvasMainUrl from "url:../contents/gemini-canvas-main"
+import geminiWatermarkMainUrl from "url:../contents/gemini-watermark-main"
+import iframeScrollMainUrl from "url:../contents/iframe-scroll-main"
+import monitorEntryUrl from "url:../contents/monitor-entry"
+import scrollLockMainUrl from "url:../contents/scroll-lock-main"
+import yuanbaoMonacoMainUrl from "url:../contents/yuanbao-monaco-main"
+
+const getArtifactName = (url: string): string => url.split("/").pop()?.split("?")[0] || url
+
+export const MAIN_WORLD_CONTENT_SCRIPTS: chrome.scripting.RegisteredContentScript[] = [
+  {
+    id: "srcContentsGeminiCanvasMain",
+    js: [getArtifactName(geminiCanvasMainUrl)],
+    matches: ["https://gemini.google.com/*"],
+    world: "MAIN",
+    runAt: "document_start",
+    persistAcrossSessions: false,
+  },
+  {
+    id: "srcContentsGeminiWatermarkMain",
+    js: [getArtifactName(geminiWatermarkMainUrl)],
+    matches: ["https://gemini.google.com/*"],
+    world: "MAIN",
+    runAt: "document_start",
+    persistAcrossSessions: false,
+  },
+  {
+    id: "srcContentsIframeScrollMain",
+    js: [getArtifactName(iframeScrollMainUrl)],
+    matches: ["https://gemini.google.com/*", "https://business.gemini.google/*"],
+    world: "MAIN",
+    runAt: "document_start",
+    persistAcrossSessions: false,
+  },
+  {
+    id: "srcContentsMonitorEntry",
+    js: [getArtifactName(monitorEntryUrl)],
+    matches: [
+      "https://gemini.google.com/*",
+      "https://business.gemini.google/*",
+      "https://aistudio.google.com/*",
+      "https://grok.com/*",
+      "https://chatgpt.com/*",
+      "https://claude.ai/*",
+      "https://www.doubao.com/*",
+      "https://ima.qq.com/*",
+      "https://chat.deepseek.com/*",
+      "https://www.kimi.com/*",
+      "https://chatglm.cn/*",
+      "https://chat.qwen.ai/*",
+      "https://www.qianwen.com/*",
+      "https://yuanbao.tencent.com/*",
+      "https://chat.z.ai/*",
+    ],
+    world: "MAIN",
+    runAt: "document_idle",
+    persistAcrossSessions: false,
+  },
+  {
+    id: "srcContentsScrollLockMain",
+    js: [getArtifactName(scrollLockMainUrl)],
+    matches: [
+      "https://gemini.google.com/*",
+      "https://business.gemini.google/*",
+      "https://aistudio.google.com/*",
+      "https://chatgpt.com/*",
+      "https://grok.com/*",
+      "https://claude.ai/*",
+      "https://www.doubao.com/*",
+      "https://ima.qq.com/*",
+      "https://chat.deepseek.com/*",
+      "https://www.kimi.com/*",
+      "https://chatglm.cn/*",
+      "https://chat.qwen.ai/*",
+      "https://www.qianwen.com/*",
+      "https://yuanbao.tencent.com/*",
+      "https://chat.z.ai/*",
+    ],
+    world: "MAIN",
+    runAt: "document_start",
+    persistAcrossSessions: false,
+  },
+  {
+    id: "srcContentsYuanbaoMonacoMain",
+    js: [getArtifactName(yuanbaoMonacoMainUrl)],
+    matches: ["https://yuanbao.tencent.com/*"],
+    world: "MAIN",
+    runAt: "document_start",
+    persistAcrossSessions: false,
+  },
+]
+
+export const MAIN_WORLD_CONTENT_SCRIPT_IDS = MAIN_WORLD_CONTENT_SCRIPTS.map(({ id }) => id)
diff --git a/src/constants/supported-sites.json b/src/constants/supported-sites.json
new file mode 100644
index 000000000..7af287131
--- /dev/null
+++ b/src/constants/supported-sites.json
@@ -0,0 +1,77 @@
+[
+  {
+    "entry": "gemini",
+    "module": "gemini",
+    "matches": ["https://gemini.google.com/*"]
+  },
+  {
+    "entry": "gemini-enterprise",
+    "module": "gemini-enterprise",
+    "matches": ["https://business.gemini.google/*"]
+  },
+  {
+    "entry": "aistudio",
+    "module": "aistudio",
+    "matches": ["https://aistudio.google.com/*"]
+  },
+  {
+    "entry": "grok",
+    "module": "grok",
+    "matches": ["https://grok.com/*"]
+  },
+  {
+    "entry": "chatgpt",
+    "module": "chatgpt",
+    "matches": ["https://chatgpt.com/*"]
+  },
+  {
+    "entry": "claude",
+    "module": "claude",
+    "matches": ["https://claude.ai/*"]
+  },
+  {
+    "entry": "doubao",
+    "module": "doubao",
+    "matches": ["https://www.doubao.com/*"]
+  },
+  {
+    "entry": "ima",
+    "module": "ima",
+    "matches": ["https://ima.qq.com/*"]
+  },
+  {
+    "entry": "deepseek",
+    "module": "deepseek",
+    "matches": ["https://chat.deepseek.com/*"]
+  },
+  {
+    "entry": "kimi",
+    "module": "kimi",
+    "matches": ["https://www.kimi.com/*"]
+  },
+  {
+    "entry": "chatglm",
+    "module": "chatglm",
+    "matches": ["https://chatglm.cn/*"]
+  },
+  {
+    "entry": "qwen-studio",
+    "module": "qwen-studio",
+    "matches": ["https://chat.qwen.ai/*"]
+  },
+  {
+    "entry": "qianwen",
+    "module": "qianwen",
+    "matches": ["https://www.qianwen.com/*"]
+  },
+  {
+    "entry": "yuanbao",
+    "module": "yuanbao",
+    "matches": ["https://yuanbao.tencent.com/*"]
+  },
+  {
+    "entry": "zai",
+    "module": "zai",
+    "matches": ["https://chat.z.ai/*"]
+  }
+]
diff --git a/src/constants/supported-sites.ts b/src/constants/supported-sites.ts
new file mode 100644
index 000000000..3cbb22e45
--- /dev/null
+++ b/src/constants/supported-sites.ts
@@ -0,0 +1,42 @@
+import supportedSites from "./supported-sites.json"
+
+export type SupportedAdapterModuleKey =
+  | "aistudio"
+  | "chatglm"
+  | "chatgpt"
+  | "claude"
+  | "deepseek"
+  | "doubao"
+  | "gemini"
+  | "gemini-enterprise"
+  | "grok"
+  | "ima"
+  | "kimi"
+  | "qianwen"
+  | "qwen-studio"
+  | "yuanbao"
+  | "zai"
+
+export interface SupportedSiteDefinition {
+  entry: string
+  module: SupportedAdapterModuleKey
+  matches: string[]
+}
+
+export const SUPPORTED_SITES = supportedSites as SupportedSiteDefinition[]
+
+export const SUPPORTED_SITE_MATCHES = SUPPORTED_SITES.flatMap((site) => site.matches)
+
+export const SUPPORTED_SITE_HOSTNAMES = SUPPORTED_SITES.flatMap((site) =>
+  site.matches.map((match) => new URL(match.replace(/\*$/, "")).hostname),
+)
+
+const moduleByHostname = new Map(
+  SUPPORTED_SITES.flatMap((site) =>
+    site.matches.map((match) => [new URL(match.replace(/\*$/, "")).hostname, site.module] as const),
+  ),
+)
+
+export function resolveSupportedAdapterModule(hostname: string): SupportedAdapterModuleKey | null {
+  return moduleByHostname.get(hostname.toLowerCase()) ?? null
+}
diff --git a/src/contents/gemini-canvas-main.ts b/src/contents/gemini-canvas-main.ts
index 9f5926330..09491a509 100644
--- a/src/contents/gemini-canvas-main.ts
+++ b/src/contents/gemini-canvas-main.ts
@@ -1,11 +1,11 @@
-import type { PlasmoCSConfig } from "plasmo"
-
 import { installGeminiCanvasCodeBridge } from "~core/gemini-canvas-code-bridge"
+import type { MainWorldCSConfig } from "~types/plasmo-content-script"
 
-export const config: PlasmoCSConfig = {
+export const config: MainWorldCSConfig = {
   matches: ["https://gemini.google.com/*"],
   world: "MAIN",
   run_at: "document_start",
+  persist_across_sessions: false,
 }
 
 installGeminiCanvasCodeBridge(window)
diff --git a/src/contents/gemini-watermark-main.ts b/src/contents/gemini-watermark-main.ts
index 46fffbad2..6c53bcf05 100644
--- a/src/contents/gemini-watermark-main.ts
+++ b/src/contents/gemini-watermark-main.ts
@@ -1,17 +1,18 @@
-import type { PlasmoCSConfig } from "plasmo"
 import {
   isGeminiGeneratedImageUrl,
   normalizeGeminiImageUrl,
 } from "~core/watermark/gemini-asset-url"
+import type { MainWorldCSConfig } from "~types/plasmo-content-script"
 
 const OPHEL_WATERMARK_FETCH_TOGGLE = "OPHEL_WATERMARK_FETCH_TOGGLE"
 const OPHEL_WATERMARK_PROCESS_REQUEST = "OPHEL_WATERMARK_PROCESS_REQUEST"
 const OPHEL_WATERMARK_PROCESS_RESPONSE = "OPHEL_WATERMARK_PROCESS_RESPONSE"
 
-export const config: PlasmoCSConfig = {
+export const config: MainWorldCSConfig = {
   matches: ["https://gemini.google.com/*"],
   world: "MAIN",
   run_at: "document_start",
+  persist_across_sessions: false,
 }
 
 if (!window.__ophelGeminiWatermarkMainInitialized) {
diff --git a/src/contents/iframe-scroll-main.ts b/src/contents/iframe-scroll-main.ts
index c1414c406..656172238 100644
--- a/src/contents/iframe-scroll-main.ts
+++ b/src/contents/iframe-scroll-main.ts
@@ -8,13 +8,14 @@
  * 主要用途：图文并茂（Canvas）模式下的滚动控制
  */
 
-import type { PlasmoCSConfig } from "plasmo"
+import type { MainWorldCSConfig } from "~types/plasmo-content-script"
 
 // 配置为主世界运行
-export const config: PlasmoCSConfig = {
+export const config: MainWorldCSConfig = {
   matches: ["https://gemini.google.com/*", "https://business.gemini.google/*"],
   world: "MAIN",
   run_at: "document_start",
+  persist_across_sessions: false,
 }
 
 // 防止重复初始化
diff --git a/src/contents/main.ts b/src/contents/main.ts
index 5b886826f..8879c554a 100644
--- a/src/contents/main.ts
+++ b/src/contents/main.ts
@@ -18,7 +18,6 @@ export const config: PlasmoCSConfig = {
     "https://chatglm.cn/*",
     "https://chat.qwen.ai/*",
     "https://www.qianwen.com/*",
-    "https://qianwen.com/*",
     "https://yuanbao.tencent.com/*",
     "https://chat.z.ai/*",
   ],
diff --git a/src/contents/monitor-entry.ts b/src/contents/monitor-entry.ts
index e5fd47615..873198dca 100644
--- a/src/contents/monitor-entry.ts
+++ b/src/contents/monitor-entry.ts
@@ -1,15 +1,13 @@
-import type { PlasmoCSConfig } from "plasmo"
-
 import { initGeminiTitleGuard } from "~core/gemini-title-guard"
+import type { MainWorldCSConfig } from "~types/plasmo-content-script"
 import { initNetworkMonitor } from "../core/network-monitor"
 
-export const config: PlasmoCSConfig = {
+export const config: MainWorldCSConfig = {
   matches: [
     "https://gemini.google.com/*",
     "https://business.gemini.google/*",
     "https://aistudio.google.com/*",
     "https://grok.com/*",
-    "https://chat.openai.com/*",
     "https://chatgpt.com/*",
     "https://claude.ai/*",
     "https://www.doubao.com/*",
@@ -18,10 +16,12 @@ export const config: PlasmoCSConfig = {
     "https://www.kimi.com/*",
     "https://chatglm.cn/*",
     "https://chat.qwen.ai/*",
+    "https://www.qianwen.com/*",
     "https://yuanbao.tencent.com/*",
     "https://chat.z.ai/*",
   ],
   world: "MAIN",
+  persist_across_sessions: false,
 }
 
 // 初始化 NetworkMonitor
diff --git a/src/contents/scroll-lock-main.ts b/src/contents/scroll-lock-main.ts
index 06b34f505..e13dfd1e6 100644
--- a/src/contents/scroll-lock-main.ts
+++ b/src/contents/scroll-lock-main.ts
@@ -4,17 +4,15 @@
  * 平台入口只负责 Plasmo 配置；滚动拦截逻辑与油猴共用同一运行时实现。
  */
 
-import type { PlasmoCSConfig } from "plasmo"
-
 import { installScrollLockRuntime } from "~core/scroll-lock-runtime"
+import type { MainWorldCSConfig } from "~types/plasmo-content-script"
 
-export const config: PlasmoCSConfig = {
+export const config: MainWorldCSConfig = {
   matches: [
     "https://gemini.google.com/*",
     "https://business.gemini.google/*",
     "https://aistudio.google.com/*",
     "https://chatgpt.com/*",
-    "https://chat.openai.com/*",
     "https://grok.com/*",
     "https://claude.ai/*",
     "https://www.doubao.com/*",
@@ -23,11 +21,13 @@ export const config: PlasmoCSConfig = {
     "https://www.kimi.com/*",
     "https://chatglm.cn/*",
     "https://chat.qwen.ai/*",
+    "https://www.qianwen.com/*",
     "https://yuanbao.tencent.com/*",
     "https://chat.z.ai/*",
   ],
   world: "MAIN",
   run_at: "document_start",
+  persist_across_sessions: false,
 }
 
 installScrollLockRuntime(window)
diff --git a/src/contents/site-qianwen.ts b/src/contents/site-qianwen.ts
index 9d68ba862..4b94d078e 100644
--- a/src/contents/site-qianwen.ts
+++ b/src/contents/site-qianwen.ts
@@ -4,7 +4,7 @@ import { QianwenAdapter } from "~adapters/qianwen"
 import { setAdapterRuntime } from "~core/adapter-runtime"
 
 export const config: PlasmoCSConfig = {
-  matches: ["https://www.qianwen.com/*", "https://qianwen.com/*"],
+  matches: ["https://www.qianwen.com/*"],
   run_at: "document_start",
 }
 
diff --git a/src/contents/ui-entry.tsx b/src/contents/ui-entry.tsx
index deb4a9842..bd77589e1 100644
--- a/src/contents/ui-entry.tsx
+++ b/src/contents/ui-entry.tsx
@@ -10,7 +10,19 @@ import React from "react"
 import { App } from "~components/App"
 import { OverlayPortalProvider } from "~components/ui/OverlayPortal"
 import { getAdapterRuntime, subscribeAdapterRuntime } from "~core/adapter-runtime"
+import { drainPersistenceWrites, suspendPersistenceWrites } from "~stores/chrome-adapter"
+import { registerClearAllDataTask } from "~utils/clear-all-event"
 import { applyOphelPlatformFontClass } from "~utils/font"
+import { EVENT_CLEAR_ALL_DATA } from "~utils/messaging"
+
+window.addEventListener(
+  EVENT_CLEAR_ALL_DATA,
+  (event) => {
+    suspendPersistenceWrites()
+    registerClearAllDataTask(event, drainPersistenceWrites())
+  },
+  { once: true },
+)
 
 export const config: PlasmoCSConfig = {
   matches: [
@@ -18,7 +30,6 @@ export const config: PlasmoCSConfig = {
     "https://business.gemini.google/*",
     "https://aistudio.google.com/*",
     "https://grok.com/*",
-    "https://chat.openai.com/*",
     "https://chatgpt.com/*",
     "https://claude.ai/*",
     "https://www.doubao.com/*",
@@ -28,7 +39,6 @@ export const config: PlasmoCSConfig = {
     "https://chatglm.cn/*",
     "https://chat.qwen.ai/*",
     "https://www.qianwen.com/*",
-    "https://qianwen.com/*",
     "https://yuanbao.tencent.com/*",
     "https://chat.z.ai/*",
   ],
@@ -101,7 +111,6 @@ export const mountShadowHost: PlasmoMountShadowHost = ({
   // ChatGPT、Claude 和 Grok 都是 Next.js 应用，需要延迟挂载
   const needsDelayedMount =
     hostname.includes("chatgpt.com") ||
-    hostname.includes("chat.openai.com") ||
     hostname.includes("grok.com") ||
     hostname.includes("claude.ai") ||
     hostname.includes("deepseek.com") ||
diff --git a/src/contents/yuanbao-monaco-main.ts b/src/contents/yuanbao-monaco-main.ts
index 45f3644a1..5d4bcfece 100644
--- a/src/contents/yuanbao-monaco-main.ts
+++ b/src/contents/yuanbao-monaco-main.ts
@@ -1,11 +1,11 @@
-import type { PlasmoCSConfig } from "plasmo"
-
 import { installYuanbaoMonacoWrap } from "~core/yuanbao-monaco-wrap"
+import type { MainWorldCSConfig } from "~types/plasmo-content-script"
 
-export const config: PlasmoCSConfig = {
+export const config: MainWorldCSConfig = {
   matches: ["https://yuanbao.tencent.com/*"],
   world: "MAIN",
   run_at: "document_start",
+  persist_across_sessions: false,
 }
 
 installYuanbaoMonacoWrap(window)
diff --git a/src/core/adapter-runtime.test.ts b/src/core/adapter-runtime.test.ts
deleted file mode 100644
index b18699dcf..000000000
--- a/src/core/adapter-runtime.test.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest"
-
-import type { SiteAdapter } from "~adapters/base"
-
-import { getAdapterRuntime, setAdapterRuntime, subscribeAdapterRuntime } from "./adapter-runtime"
-
-describe("adapter runtime", () => {
-  afterEach(() => {
-    window.__ophelAdapterRuntime = undefined
-  })
-
-  it("shares the adapter through window and notifies subscribers", () => {
-    const listener = vi.fn()
-    const unsubscribe = subscribeAdapterRuntime(listener)
-    const adapter = {} as SiteAdapter
-
-    setAdapterRuntime(adapter)
-
-    expect(getAdapterRuntime()).toBe(adapter)
-    expect(listener).toHaveBeenCalledOnce()
-
-    unsubscribe()
-  })
-
-  it("does not notify again when registering the same instance", () => {
-    const listener = vi.fn()
-    const unsubscribe = subscribeAdapterRuntime(listener)
-    const adapter = {} as SiteAdapter
-
-    setAdapterRuntime(adapter)
-    setAdapterRuntime(adapter)
-
-    expect(listener).toHaveBeenCalledOnce()
-    unsubscribe()
-  })
-})
diff --git a/src/core/adapter-runtime.ts b/src/core/adapter-runtime.ts
index 495d962dc..a51f1b184 100644
--- a/src/core/adapter-runtime.ts
+++ b/src/core/adapter-runtime.ts
@@ -13,6 +13,14 @@ export function setAdapterRuntime(adapter: SiteAdapter): void {
   window.dispatchEvent(new Event(ADAPTER_RUNTIME_CHANGE_EVENT))
 }
 
+export function clearAdapterRuntime(expectedAdapter?: SiteAdapter): void {
+  if (!window.__ophelAdapterRuntime) return
+  if (expectedAdapter && window.__ophelAdapterRuntime !== expectedAdapter) return
+
+  window.__ophelAdapterRuntime = undefined
+  window.dispatchEvent(new Event(ADAPTER_RUNTIME_CHANGE_EVENT))
+}
+
 export function subscribeAdapterRuntime(listener: () => void): () => void {
   window.addEventListener(ADAPTER_RUNTIME_CHANGE_EVENT, listener)
   return () => window.removeEventListener(ADAPTER_RUNTIME_CHANGE_EVENT, listener)
diff --git a/src/core/background-clear-all-coordinator.ts b/src/core/background-clear-all-coordinator.ts
new file mode 100644
index 000000000..e1c2c4f59
--- /dev/null
+++ b/src/core/background-clear-all-coordinator.ts
@@ -0,0 +1,132 @@
+import { PersistenceWriteBarrier } from "~stores/chrome-adapter"
+
+export const BACKGROUND_CLEAR_TRANSACTION_KEY = "ophel:backgroundClearTransaction"
+export const BACKGROUND_CLEAR_TRANSACTION_TTL_MS = 2 * 60 * 1000
+
+interface BackgroundClearTransaction {
+  id: string
+  startedAt: number
+}
+
+export interface BackgroundSessionStorage {
+  get(key: string): Promise<Record<string, unknown>>
+  set(items: Record<string, unknown>): Promise<void>
+  remove(key: string): Promise<void>
+}
+
+interface BackgroundClearAllCoordinatorOptions {
+  now?: () => number
+  ttlMs?: number
+  warn?: (message: string, context: { transactionId: string }) => void
+}
+
+function parseTransaction(value: unknown): BackgroundClearTransaction | null {
+  if (typeof value !== "object" || value === null) return null
+
+  const transaction = value as Partial<BackgroundClearTransaction>
+  if (typeof transaction.id !== "string" || typeof transaction.startedAt !== "number") {
+    return null
+  }
+  return { id: transaction.id, startedAt: transaction.startedAt }
+}
+
+export class BackgroundClearAllCoordinator {
+  private activeTransaction: BackgroundClearTransaction | null = null
+  private initialization: Promise<void> | null = null
+  private readonly now: () => number
+  private readonly ttlMs: number
+  private readonly warn: NonNullable<BackgroundClearAllCoordinatorOptions["warn"]>
+
+  constructor(
+    private readonly sessionStorage: BackgroundSessionStorage,
+    private readonly writeBarrier = new PersistenceWriteBarrier(),
+    options: BackgroundClearAllCoordinatorOptions = {},
+  ) {
+    this.now = options.now ?? Date.now
+    this.ttlMs = options.ttlMs ?? BACKGROUND_CLEAR_TRANSACTION_TTL_MS
+    this.warn =
+      options.warn ??
+      ((message, context) => {
+        console.warn(message, context)
+      })
+  }
+
+  async begin(transactionId: string): Promise<void> {
+    await this.ensureInitialized()
+    await this.expireStaleTransaction()
+    if (this.activeTransaction) {
+      throw new Error(`Clear-all transaction ${this.activeTransaction.id} is already active`)
+    }
+
+    this.activeTransaction = { id: transactionId, startedAt: this.now() }
+    this.writeBarrier.suspend()
+    try {
+      await this.sessionStorage.set({
+        [BACKGROUND_CLEAR_TRANSACTION_KEY]: this.activeTransaction,
+      })
+      await this.writeBarrier.drain()
+    } catch (error) {
+      try {
+        await this.sessionStorage.remove(BACKGROUND_CLEAR_TRANSACTION_KEY)
+      } catch (cleanupError) {
+        console.error("[Ophel] Failed to remove background clear-all lock:", cleanupError)
+      }
+      this.activeTransaction = null
+      this.writeBarrier.resume()
+      throw error
+    }
+  }
+
+  async release(transactionId: string): Promise<void> {
+    await this.ensureInitialized()
+    await this.expireStaleTransaction()
+    if (this.activeTransaction?.id !== transactionId) {
+      throw new Error("Clear-all transaction ownership does not match")
+    }
+
+    await this.sessionStorage.remove(BACKGROUND_CLEAR_TRANSACTION_KEY)
+    this.activeTransaction = null
+    this.writeBarrier.resume()
+  }
+
+  async runPersistenceWrite(write: () => Promise<void>): Promise<void> {
+    await this.ensureInitialized()
+    await this.expireStaleTransaction()
+    if (this.activeTransaction || this.writeBarrier.isSuspended()) {
+      throw new Error("Background persistence writes are suspended by a clear-all transaction")
+    }
+    await Promise.resolve(this.writeBarrier.track(write()))
+  }
+
+  private ensureInitialized(): Promise<void> {
+    if (!this.initialization) {
+      this.initialization = this.sessionStorage
+        .get(BACKGROUND_CLEAR_TRANSACTION_KEY)
+        .then(async (result) => {
+          this.activeTransaction = parseTransaction(result[BACKGROUND_CLEAR_TRANSACTION_KEY])
+          if (this.activeTransaction) {
+            this.writeBarrier.suspend()
+            await this.expireStaleTransaction()
+          }
+        })
+        .catch((error) => {
+          this.initialization = null
+          throw error
+        })
+    }
+    return this.initialization
+  }
+
+  private async expireStaleTransaction(): Promise<void> {
+    if (!this.activeTransaction || this.now() - this.activeTransaction.startedAt <= this.ttlMs) {
+      return
+    }
+
+    this.warn("[Ophel] Releasing stale background clear-all transaction:", {
+      transactionId: this.activeTransaction.id,
+    })
+    await this.sessionStorage.remove(BACKGROUND_CLEAR_TRANSACTION_KEY)
+    this.activeTransaction = null
+    this.writeBarrier.resume()
+  }
+}
diff --git a/src/core/content-script-main.ts b/src/core/content-script-main.ts
index fdaf291f4..0f6dfb222 100644
--- a/src/core/content-script-main.ts
+++ b/src/core/content-script-main.ts
@@ -6,37 +6,41 @@
  */
 
 import type { SiteAdapter } from "~adapters/base"
-import { DEFAULT_FOLDERS, SITE_IDS, getDefaultPromptChains, getDefaultPrompts } from "~constants"
+import { SITE_IDS } from "~constants"
 import {
   initCoreModules,
+  destroyCoreModules,
   initUrlChangeObserver,
   handleClearAllData,
   subscribeModuleUpdates,
   type ModulesContext,
 } from "~core/modules-init"
-import { setAdapterRuntime } from "~core/adapter-runtime"
+import { clearAdapterRuntime, setAdapterRuntime } from "~core/adapter-runtime"
 import { APP_DISPLAY_NAME } from "~utils/config"
+import { dispatchClearAllDataEvent, registerClearAllDataTask } from "~utils/clear-all-event"
+import { drainCleanupStack } from "~utils/cleanup-stack"
 import { INTER_LOCAL_FONT_FACE, getPlatformFontFamily } from "~utils/font"
 import { setLanguage } from "~utils/i18n"
-import { useConversationsStore } from "~stores/conversations-store"
-import { useFoldersStore } from "~stores/folders-store"
-import { usePromptChainsStore } from "~stores/prompt-chains-store"
-import { usePromptsStore } from "~stores/prompts-store"
-import { useReadingHistoryStore } from "~stores/reading-history-store"
 import { getSettingsState, useSettingsStore } from "~stores/settings-store"
-import { useTagsStore } from "~stores/tags-store"
+import { drainPersistenceWrites, suspendPersistenceWrites } from "~stores/chrome-adapter"
 import {
+  EVENT_CLEAR_ALL_DATA,
   EVENT_EXTENSION_UPDATE_AVAILABLE,
+  MSG_CHECK_IS_GENERATING,
   MSG_CLEAR_ALL_DATA,
   MSG_EXTENSION_UPDATE_AVAILABLE,
+  MSG_GET_MODEL_LIST,
   MSG_RESTORE_DATA,
   MSG_START_NEW_CONVERSATION,
+  type ContentScriptMessage,
 } from "~utils/messaging"
 
 interface AIStudioModelAdapter {
   getModelList(): Promise<Array<{ id: string; name: string }>>
 }
 
+const SETTINGS_HYDRATION_TIMEOUT_MS = 5000
+
 function hasAIStudioModelList(adapter: unknown): adapter is AIStudioModelAdapter {
   return (
     typeof adapter === "object" &&
@@ -46,16 +50,6 @@ function hasAIStudioModelList(adapter: unknown): adapter is AIStudioModelAdapter
   )
 }
 
-const resetAllStores = () => {
-  useSettingsStore.getState().resetSettings()
-  usePromptsStore.getState().setPrompts(getDefaultPrompts())
-  usePromptChainsStore.getState().setChains(getDefaultPromptChains())
-  useFoldersStore.setState({ folders: DEFAULT_FOLDERS })
-  useTagsStore.setState({ tags: [] })
-  useConversationsStore.setState({ conversations: {}, lastUsedFolderId: "inbox" })
-  useReadingHistoryStore.setState({ history: {}, lastCleanupRun: 0 })
-}
-
 const OPHEL_EXTENSION_UPDATE_FALLBACK_ID = "ophel-extension-update-fallback"
 const PLASMO_RUNTIME_RELOAD_PROMPT_ID = "__plasmo-loading__"
 let extensionUpdateFallbackTimer: number | null = null
@@ -426,118 +420,179 @@ if (!window.__ophelExtensionUpdateMessageListenerInstalled && typeof chrome !==
   window.__ophelExtensionUpdateMessageListenerInstalled = true
 
   chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-    if (message?.type !== MSG_EXTENSION_UPDATE_AVAILABLE) {
-      return false
+    if (message?.type === MSG_CLEAR_ALL_DATA) {
+      suspendPersistenceWrites()
+      void Promise.all([drainPersistenceWrites(), dispatchClearAllDataEvent()]).then(
+        () => window.setTimeout(() => sendResponse({ success: true }), 0),
+        (error) => sendResponse({ success: false, error: String(error) }),
+      )
+      return true
     }
 
-    dispatchExtensionUpdateNotice(message.version)
-    startSuppressingDefaultReloadPrompt()
-    sendResponse({ success: true })
-    return true
+    if (message?.type === MSG_RESTORE_DATA) {
+      sendResponse({ success: true })
+      window.location.reload()
+      return true
+    }
+
+    if (message?.type === MSG_EXTENSION_UPDATE_AVAILABLE) {
+      dispatchExtensionUpdateNotice(message.version)
+      startSuppressingDefaultReloadPrompt()
+      sendResponse({ success: true })
+      return true
+    }
+
+    return false
   })
 }
 
 // 防止重复初始化
 async function initializeContentScript(adapter: SiteAdapter): Promise<void> {
   if (!adapter.match()) {
+    clearAdapterRuntime(adapter)
+    window.ophelInitialized = false
     console.warn("[Ophel] No adapter found for:", window.location.hostname)
     return
   }
 
-  setAdapterRuntime(adapter)
-  console.warn(`[Ophel] Loaded ${adapter.getName()} adapter on:`, window.location.hostname)
-
-  // 初始化适配器
-  adapter.afterPropertiesSet({})
-
-  // 等待 Zustand hydration 完成
-  await new Promise<void>((resolve) => {
-    if (useSettingsStore.getState()._hasHydrated) {
-      resolve()
-      return
-    }
-    const unsub = useSettingsStore.subscribe((state) => {
-      if (state._hasHydrated) {
-        unsub()
-        resolve()
-      }
-    })
-  })
-
-  // 获取用户设置
-  const settings = getSettingsState()
-  await setLanguage(settings.language)
-  const siteId = adapter.getSiteId()
-
-  // 创建模块上下文
-  const ctx: ModulesContext = { adapter, settings, siteId }
+  const cleanupTasks: Array<() => void> = []
+  let cleanedUp = false
+  const cleanup = () => {
+    if (cleanedUp) return
+    cleanedUp = true
+    drainCleanupStack(cleanupTasks, "content script")
+    window.ophelInitialized = false
+  }
+  window.addEventListener("unload", cleanup, { once: true })
+  cleanupTasks.push(() => window.removeEventListener("unload", cleanup))
+  const clearDataAndCleanup = (event: Event) => {
+    suspendPersistenceWrites()
+    handleClearAllData()
+    cleanup()
+    registerClearAllDataTask(event, drainPersistenceWrites())
+  }
+  window.addEventListener(EVENT_CLEAR_ALL_DATA, clearDataAndCleanup, { once: true })
+  cleanupTasks.push(() => window.removeEventListener(EVENT_CLEAR_ALL_DATA, clearDataAndCleanup))
 
-  // 初始化所有核心模块
-  await initCoreModules(ctx)
+  try {
+    setAdapterRuntime(adapter)
+    cleanupTasks.push(() => clearAdapterRuntime(adapter))
+    console.warn(`[Ophel] Loaded ${adapter.getName()} adapter on:`, window.location.hostname)
 
-  // 订阅设置变化
-  const unsubscribeModuleUpdates = subscribeModuleUpdates(ctx)
-  window.addEventListener("unload", unsubscribeModuleUpdates, { once: true })
+    cleanupTasks.push(() => adapter.dispose())
+    adapter.afterPropertiesSet({})
 
-  // 初始化 URL 变化监听
-  const cleanupUrlChangeObserver = initUrlChangeObserver(ctx)
-  window.addEventListener("unload", cleanupUrlChangeObserver, { once: true })
+    const hydrated = await new Promise<boolean>((resolve) => {
+      if (useSettingsStore.getState()._hasHydrated) {
+        resolve(true)
+        return
+      }
 
-  // 监听来自 background 的消息（用于跨页面检测生成状态）
-  chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-    if (message.type === MSG_CLEAR_ALL_DATA) {
-      handleClearAllData()
-      resetAllStores()
-      sendResponse({ success: true })
-      return true
-    }
+      let settled = false
+      let timeoutId: number | null = null
+      let unsub = () => undefined
+      const finish = (result: boolean) => {
+        if (settled) return
+        settled = true
+        if (timeoutId !== null) {
+          window.clearTimeout(timeoutId)
+        }
+        unsub()
+        resolve(result)
+      }
+      unsub = useSettingsStore.subscribe((state) => {
+        if (state._hasHydrated) {
+          finish(true)
+        }
+      })
+
+      if (useSettingsStore.getState()._hasHydrated) {
+        finish(true)
+        return
+      }
 
-    if (message.type === MSG_RESTORE_DATA) {
-      // 收到恢复数据的广播时，刷新页面使得数据从 Storage 重新读取并保证 Zustand hydration 最新的内容
-      window.location.reload()
-      sendResponse({ success: true })
-      return true
+      timeoutId = window.setTimeout(() => finish(false), SETTINGS_HYDRATION_TIMEOUT_MS)
+      cleanupTasks.push(() => finish(false))
+    })
+    if (cleanedUp) return
+    if (!hydrated) {
+      throw new Error(`Settings hydration timed out after ${SETTINGS_HYDRATION_TIMEOUT_MS}ms`)
     }
 
-    if (message.type === "CHECK_IS_GENERATING") {
-      // 使用 adapter 的 isGenerating 方法检测当前页面是否正在生成
-      const isGenerating = adapter.isGenerating?.() ?? false
-      sendResponse({ isGenerating })
-      return true // 保持消息通道打开
-    }
+    // 获取用户设置
+    const settings = getSettingsState()
+    await setLanguage(settings.language)
+    if (cleanedUp) return
+    const siteId = adapter.getSiteId()
+
+    // 创建模块上下文
+    const ctx: ModulesContext = { adapter, settings, siteId }
+
+    // 初始化所有核心模块
+    cleanupTasks.push(destroyCoreModules)
+    await initCoreModules(ctx)
+    if (cleanedUp) return
+
+    // 订阅设置变化
+    const unsubscribeModuleUpdates = subscribeModuleUpdates(ctx)
+    cleanupTasks.push(unsubscribeModuleUpdates)
+
+    // 初始化 URL 变化监听
+    const cleanupUrlChangeObserver = initUrlChangeObserver(ctx)
+    cleanupTasks.push(cleanupUrlChangeObserver)
+
+    // 监听来自 background 的消息（用于跨页面检测生成状态）
+    const handleRuntimeMessage = (
+      message: ContentScriptMessage,
+      _sender: chrome.runtime.MessageSender,
+      sendResponse: (response?: unknown) => void,
+    ) => {
+      if (message.type === MSG_CHECK_IS_GENERATING) {
+        // 使用 adapter 的 isGenerating 方法检测当前页面是否正在生成
+        const isGenerating = adapter.isGenerating?.() ?? false
+        sendResponse({ isGenerating })
+        return true // 保持消息通道打开
+      }
 
-    if (message.type === MSG_START_NEW_CONVERSATION) {
-      try {
-        const success = adapter.startNewConversation()
-        sendResponse({ success })
-      } catch (err) {
-        console.error("[Ophel] startNewConversation failed:", err)
-        sendResponse({ success: false, error: (err as Error).message })
+      if (message.type === MSG_START_NEW_CONVERSATION) {
+        try {
+          const success = adapter.startNewConversation()
+          sendResponse({ success })
+        } catch (err) {
+          console.error("[Ophel] startNewConversation failed:", err)
+          sendResponse({ success: false, error: (err as Error).message })
+        }
+        return true
       }
-      return true
-    }
 
-    // AI Studio 获取模型列表
-    if (message.type === "GET_MODEL_LIST") {
-      if (siteId === SITE_IDS.AISTUDIO && hasAIStudioModelList(adapter)) {
-        ;(async () => {
-          try {
-            const models = await adapter.getModelList()
-            sendResponse({ success: true, models })
-          } catch (err) {
-            console.error("[Ophel] getModelList failed:", err)
-            sendResponse({ success: false, error: (err as Error).message })
-          }
-        })()
+      // AI Studio 获取模型列表
+      if (message.type === MSG_GET_MODEL_LIST) {
+        if (siteId === SITE_IDS.AISTUDIO && hasAIStudioModelList(adapter)) {
+          ;(async () => {
+            try {
+              const models = await adapter.getModelList()
+              sendResponse({ success: true, models })
+            } catch (err) {
+              console.error("[Ophel] getModelList failed:", err)
+              sendResponse({ success: false, error: (err as Error).message })
+            }
+          })()
+          return true
+        }
+
+        sendResponse({ success: false, error: "NOT_AISTUDIO" })
         return true
       }
 
-      sendResponse({ success: false, error: "NOT_AISTUDIO" })
-      return true
+      return false
     }
 
-    return false
-  })
+    chrome.runtime.onMessage.addListener(handleRuntimeMessage)
+    cleanupTasks.push(() => chrome.runtime.onMessage.removeListener(handleRuntimeMessage))
+  } catch (error) {
+    cleanup()
+    throw error
+  }
 }
 
 export function startContentScript(adapter: SiteAdapter): void {
diff --git a/src/core/gemini-mystuff-bridge.ts b/src/core/gemini-mystuff-bridge.ts
index c7ef52ef3..e770dc2f6 100644
--- a/src/core/gemini-mystuff-bridge.ts
+++ b/src/core/gemini-mystuff-bridge.ts
@@ -33,9 +33,13 @@ interface GeminiMyStuffParsedResponse {
 }
 
 let initialized = false
+let lifecycleGeneration = 0
 const recordCache = new Map<GeminiMyStuffKind, Map<string, GeminiMyStuffRecord>>()
 const fetchPromises = new Map<GeminiMyStuffKind, Promise<GeminiMyStuffRecord[]>>()
 
+const isActiveGeneration = (generation: number): boolean =>
+  initialized && generation === lifecycleGeneration
+
 function getPageWindow(): typeof globalThis {
   if (typeof unsafeWindow !== "undefined" && unsafeWindow !== window) {
     return unsafeWindow as unknown as typeof globalThis
@@ -242,7 +246,13 @@ function parseResponse(responseText: string, kind: GeminiMyStuffKind): GeminiMyS
   }
 }
 
-async function fetchKind(kind: GeminiMyStuffKind, force: boolean): Promise<GeminiMyStuffRecord[]> {
+async function fetchKind(
+  kind: GeminiMyStuffKind,
+  force: boolean,
+  generation: number,
+): Promise<GeminiMyStuffRecord[]> {
+  if (!isActiveGeneration(generation)) return []
+
   const cache = getCache(kind)
   if (!force && cache.size > 0) {
     return Array.from(cache.values())
@@ -258,6 +268,8 @@ async function fetchKind(kind: GeminiMyStuffKind, force: boolean): Promise<Gemin
     let nextPageToken: string | undefined
 
     for (let page = 0; page < MAX_PAGES; page += 1) {
+      if (!isActiveGeneration(generation)) return []
+
       const tokens = resolveRuntimeTokens()
       if (!tokens) {
         throw new Error("mystuff-runtime-tokens-missing")
@@ -274,6 +286,8 @@ async function fetchKind(kind: GeminiMyStuffKind, force: boolean): Promise<Gemin
       })
 
       const text = await response.text()
+      if (!isActiveGeneration(generation)) return []
+
       if (!response.ok) {
         console.warn(`${LOG_PREFIX} fetch failed`, {
           kind,
@@ -294,6 +308,8 @@ async function fetchKind(kind: GeminiMyStuffKind, force: boolean): Promise<Gemin
       nextPageToken = parsed.nextPageToken
     }
 
+    if (!isActiveGeneration(generation)) return []
+
     cache.clear()
     fetched.forEach((value, key) => cache.set(key, value))
     return Array.from(cache.values())
@@ -304,7 +320,9 @@ async function fetchKind(kind: GeminiMyStuffKind, force: boolean): Promise<Gemin
   try {
     return await promise
   } finally {
-    fetchPromises.delete(kind)
+    if (fetchPromises.get(kind) === promise) {
+      fetchPromises.delete(kind)
+    }
   }
 }
 
@@ -335,17 +353,20 @@ function emitCacheSync(payload: GeminiMyStuffCachePayload): void {
 
 async function handleSyncRequest(
   payload: GeminiMyStuffSyncRequestPayload | undefined,
+  generation: number,
 ): Promise<void> {
-  if (!payload?.requestId || !isMyStuffOrLibraryPath()) return
+  if (!isActiveGeneration(generation) || !payload?.requestId || !isMyStuffOrLibraryPath()) return
 
   const kinds = normalizeKinds(payload.kinds)
   const shouldSync = payload.force || kinds.some((kind) => getCache(kind).size === 0)
 
   try {
     if (shouldSync) {
-      await Promise.all(kinds.map((kind) => fetchKind(kind, Boolean(payload.force))))
+      await Promise.all(kinds.map((kind) => fetchKind(kind, Boolean(payload.force), generation)))
     }
 
+    if (!isActiveGeneration(generation)) return
+
     const items = getCachedItems(kinds)
     emitCacheSync({
       requestId: payload.requestId,
@@ -355,6 +376,8 @@ async function handleSyncRequest(
       timestamp: Date.now(),
     })
   } catch (error) {
+    if (!isActiveGeneration(generation)) return
+
     console.warn(`${LOG_PREFIX} sync request failed`, {
       requestId: payload.requestId,
       kinds,
@@ -370,17 +393,35 @@ async function handleSyncRequest(
   }
 }
 
+const handleWindowSyncRequest = (event: MessageEvent): void => {
+  if (event.data?.type !== EVENT_GEMINI_MYSTUFF_SYNC_REQUEST) return
+  void handleSyncRequest(
+    event.data.payload as GeminiMyStuffSyncRequestPayload | undefined,
+    lifecycleGeneration,
+  )
+}
+
+const handleCustomSyncRequest = (event: Event): void => {
+  const payload = (event as CustomEvent<GeminiMyStuffSyncRequestPayload>).detail
+  void handleSyncRequest(payload, lifecycleGeneration)
+}
+
 export function initGeminiMyStuffBridge(): void {
   if (initialized || !isGeminiHost()) return
   initialized = true
+  lifecycleGeneration += 1
+
+  window.addEventListener("message", handleWindowSyncRequest)
+  window.addEventListener(EVENT_GEMINI_MYSTUFF_SYNC_REQUEST, handleCustomSyncRequest)
+}
 
-  window.addEventListener("message", (event) => {
-    if (event.data?.type !== EVENT_GEMINI_MYSTUFF_SYNC_REQUEST) return
-    void handleSyncRequest(event.data.payload as GeminiMyStuffSyncRequestPayload | undefined)
-  })
+export function destroyGeminiMyStuffBridge(): void {
+  lifecycleGeneration += 1
+  fetchPromises.clear()
+  recordCache.clear()
 
-  window.addEventListener(EVENT_GEMINI_MYSTUFF_SYNC_REQUEST, (event) => {
-    const payload = (event as CustomEvent<GeminiMyStuffSyncRequestPayload>).detail
-    void handleSyncRequest(payload)
-  })
+  if (!initialized) return
+  initialized = false
+  window.removeEventListener("message", handleWindowSyncRequest)
+  window.removeEventListener(EVENT_GEMINI_MYSTUFF_SYNC_REQUEST, handleCustomSyncRequest)
 }
diff --git a/src/core/gemini-title-guard.ts b/src/core/gemini-title-guard.ts
index 93a34f8fb..9ec8586ae 100644
--- a/src/core/gemini-title-guard.ts
+++ b/src/core/gemini-title-guard.ts
@@ -9,6 +9,11 @@ declare const unsafeWindow: Window | undefined
 let installed = false
 let titleObserver: MutationObserver | null = null
 let isApplyingManagedTitle = false
+let titleDescriptorOwner: object | null = null
+let originalTitleDescriptor: PropertyDescriptor | null = null
+let installedTitleGetter: (() => string) | null = null
+let installedTitleSetter: ((value: string | null | undefined) => void) | null = null
+let pendingObserveHead: (() => void) | null = null
 
 function getPageWindow(): typeof globalThis {
   if (typeof unsafeWindow !== "undefined" && unsafeWindow !== window) {
@@ -66,29 +71,37 @@ function installDocumentTitleSetterGuard(): void {
     return
   }
 
-  Object.defineProperty(descriptorOwner, "title", {
-    configurable: true,
-    enumerable: descriptor.enumerable,
-    get() {
-      return descriptor.get?.call(this) ?? ""
-    },
-    set(value: string | null | undefined) {
-      const nextTitle = String(value ?? "")
-
-      if (this === pageWindow.document) {
-        const managedTitle = getManagedTitle()
-        if (managedTitle && nextTitle !== managedTitle) {
-          rememberNativeTitle(nextTitle)
-          descriptor.set?.call(this, managedTitle)
-          return
-        }
-      }
+  const guardedGetter = function (this: Document): string {
+    return descriptor.get?.call(this) ?? ""
+  }
+  const guardedSetter = function (this: Document, value: string | null | undefined): void {
+    const nextTitle = String(value ?? "")
 
-      if (this === pageWindow.document && nextTitle !== getManagedTitle()) {
+    if (this === pageWindow.document) {
+      const managedTitle = getManagedTitle()
+      if (managedTitle && nextTitle !== managedTitle) {
         rememberNativeTitle(nextTitle)
+        descriptor.set?.call(this, managedTitle)
+        return
       }
-      descriptor.set?.call(this, nextTitle)
-    },
+    }
+
+    if (this === pageWindow.document && nextTitle !== getManagedTitle()) {
+      rememberNativeTitle(nextTitle)
+    }
+    descriptor.set?.call(this, nextTitle)
+  }
+
+  titleDescriptorOwner = descriptorOwner
+  originalTitleDescriptor = descriptor
+  installedTitleGetter = guardedGetter
+  installedTitleSetter = guardedSetter
+
+  Object.defineProperty(descriptorOwner, "title", {
+    configurable: true,
+    enumerable: descriptor.enumerable,
+    get: guardedGetter,
+    set: guardedSetter,
   })
 }
 
@@ -114,7 +127,8 @@ function startTitleMutationGuard(): void {
 
   observeHead()
   if (!pageDocument.head) {
-    pageDocument.addEventListener("DOMContentLoaded", observeHead, { once: true })
+    pendingObserveHead = observeHead
+    pageDocument.addEventListener("DOMContentLoaded", pendingObserveHead, { once: true })
   }
 
   if (pageDocument.documentElement) {
@@ -133,3 +147,32 @@ export function initGeminiTitleGuard(): void {
   startTitleMutationGuard()
   applyManagedTitle()
 }
+
+export function destroyGeminiTitleGuard(): void {
+  const pageWindow = getPageWindow()
+  const pageDocument = pageWindow.document
+
+  titleObserver?.disconnect()
+  titleObserver = null
+  if (pendingObserveHead) {
+    pageDocument.removeEventListener("DOMContentLoaded", pendingObserveHead)
+    pendingObserveHead = null
+  }
+
+  if (titleDescriptorOwner && originalTitleDescriptor) {
+    const currentDescriptor = Object.getOwnPropertyDescriptor(titleDescriptorOwner, "title")
+    if (
+      currentDescriptor?.get === installedTitleGetter &&
+      currentDescriptor?.set === installedTitleSetter
+    ) {
+      Object.defineProperty(titleDescriptorOwner, "title", originalTitleDescriptor)
+    }
+  }
+
+  titleDescriptorOwner = null
+  originalTitleDescriptor = null
+  installedTitleGetter = null
+  installedTitleSetter = null
+  isApplyingManagedTitle = false
+  installed = false
+}
diff --git a/src/core/layout-manager.ts b/src/core/layout-manager.ts
index 53e9b9a60..3fb33aff6 100644
--- a/src/core/layout-manager.ts
+++ b/src/core/layout-manager.ts
@@ -1333,4 +1333,29 @@ export class LayoutManager {
       this.processedShadowRoots.delete(shadowRoot)
     })
   }
+
+  /** 释放所有布局样式、观察器和轮询任务。 */
+  destroy() {
+    this.stopPanelAvoidance()
+    this.stopShadowInjection()
+
+    this.pageWidthConfig = { ...this.pageWidthConfig, enabled: false }
+    this.userQueryWidthConfig = null
+    this.zenModeEnabled = false
+    this.cleanModeEnabled = false
+
+    this.removeStyle(this.pageWidthStyle)
+    this.removeStyle(this.userQueryWidthStyle)
+    this.removeStyle(this.zenModeStyle)
+    this.removeStyle(this.cleanModeStyle)
+    this.pageWidthStyle = null
+    this.userQueryWidthStyle = null
+    this.zenModeStyle = null
+    this.cleanModeStyle = null
+
+    this.cleanupZenModeRootClass()
+    this.unmountZenModeExitButton()
+    this.clearAllShadowStyles()
+    this.pollingTasks.stopAll()
+  }
 }
diff --git a/src/core/markdown-fixer.ts b/src/core/markdown-fixer.ts
index 0a954ea86..a4285d227 100644
--- a/src/core/markdown-fixer.ts
+++ b/src/core/markdown-fixer.ts
@@ -33,6 +33,7 @@ export class MarkdownFixer {
   private stopObserver: (() => void) | null = null
   private enabled = false
   private config: MarkdownFixerConfig
+  private pendingTimers = new Set<number>()
 
   constructor(config: MarkdownFixerConfig) {
     this.config = config
@@ -52,7 +53,7 @@ export class MarkdownFixer {
     this.stopObserver = DOMToolkit.each(this.config.selector, (p, isNew) => {
       if (isNew) {
         // 延迟处理，避免和流式输出冲突
-        setTimeout(() => this.fixParagraph(p as HTMLElement), 100)
+        this.scheduleFix(p as HTMLElement, 100)
       }
     })
   }
@@ -67,6 +68,10 @@ export class MarkdownFixer {
       this.stopObserver()
       this.stopObserver = null
     }
+    for (const timer of this.pendingTimers) {
+      window.clearTimeout(timer)
+    }
+    this.pendingTimers.clear()
   }
 
   /**
@@ -83,7 +88,7 @@ export class MarkdownFixer {
    * 修复单个段落
    */
   fixParagraph(p: HTMLElement) {
-    if (!p.isConnected) return
+    if (!this.enabled || !p.isConnected) return
 
     if (this.config.shouldIgnore?.(p)) {
       delete p.dataset.mdFixerHash
@@ -93,7 +98,7 @@ export class MarkdownFixer {
     // 检查是否应跳过（例如正在流式生成）
     if (this.config.shouldSkip?.(p)) {
       // 延迟重试
-      setTimeout(() => this.fixParagraph(p), 500)
+      this.scheduleFix(p, 500)
       return
     }
 
@@ -151,4 +156,12 @@ export class MarkdownFixer {
     // 更新 hash 标记
     p.dataset.mdFixerHash = String(p.innerHTML.length)
   }
+
+  private scheduleFix(element: HTMLElement, delay: number) {
+    const timer = window.setTimeout(() => {
+      this.pendingTimers.delete(timer)
+      this.fixParagraph(element)
+    }, delay)
+    this.pendingTimers.add(timer)
+  }
 }
diff --git a/src/core/module-lifecycle.ts b/src/core/module-lifecycle.ts
new file mode 100644
index 000000000..9ebbf7055
--- /dev/null
+++ b/src/core/module-lifecycle.ts
@@ -0,0 +1,51 @@
+export interface DestroyableModuleInstances {
+  assistantMermaidRenderer: { stop: () => void } | null
+  themeManager: { stopThemeMonitoring: () => void } | null
+  copyManager: { stop: () => void } | null
+  layoutManager: { destroy: () => void } | null
+  markdownFixer: { stop: () => void } | null
+  tabManager: { destroy: () => void } | null
+  watermarkRemover: { stop: () => void } | null
+  readingHistoryManager: { destroy: () => void } | null
+  modelLocker: { stop: () => void } | null
+  scrollLockManager: { stop: () => void } | null
+  userQueryMarkdownRenderer: { destroy: () => void } | null
+  policyRetryManager: { destroy: () => void } | null
+  usageCounterManager: { destroy: () => void } | null
+}
+
+export function destroyModuleInstances(modules: DestroyableModuleInstances): void {
+  const cleanupSteps: Array<[name: string, cleanup: (() => void) | undefined]> = [
+    [
+      "assistantMermaidRenderer",
+      modules.assistantMermaidRenderer?.stop.bind(modules.assistantMermaidRenderer),
+    ],
+    ["themeManager", modules.themeManager?.stopThemeMonitoring.bind(modules.themeManager)],
+    ["copyManager", modules.copyManager?.stop.bind(modules.copyManager)],
+    ["layoutManager", modules.layoutManager?.destroy.bind(modules.layoutManager)],
+    ["markdownFixer", modules.markdownFixer?.stop.bind(modules.markdownFixer)],
+    ["tabManager", modules.tabManager?.destroy.bind(modules.tabManager)],
+    ["watermarkRemover", modules.watermarkRemover?.stop.bind(modules.watermarkRemover)],
+    [
+      "readingHistoryManager",
+      modules.readingHistoryManager?.destroy.bind(modules.readingHistoryManager),
+    ],
+    ["modelLocker", modules.modelLocker?.stop.bind(modules.modelLocker)],
+    ["scrollLockManager", modules.scrollLockManager?.stop.bind(modules.scrollLockManager)],
+    [
+      "userQueryMarkdownRenderer",
+      modules.userQueryMarkdownRenderer?.destroy.bind(modules.userQueryMarkdownRenderer),
+    ],
+    ["policyRetryManager", modules.policyRetryManager?.destroy.bind(modules.policyRetryManager)],
+    ["usageCounterManager", modules.usageCounterManager?.destroy.bind(modules.usageCounterManager)],
+  ]
+
+  for (const [name, cleanup] of cleanupSteps) {
+    if (!cleanup) continue
+    try {
+      cleanup()
+    } catch (error) {
+      console.error(`[Ophel] Failed to destroy core module ${name}:`, error)
+    }
+  }
+}
diff --git a/src/core/modules-init.ts b/src/core/modules-init.ts
index 3e2d837ae..a2c875c1b 100644
--- a/src/core/modules-init.ts
+++ b/src/core/modules-init.ts
@@ -12,6 +12,7 @@ import type { CoreModule } from "~core/core-module"
 import { CopyManager } from "~core/copy-manager"
 import { LayoutManager } from "~core/layout-manager"
 import { MarkdownFixer } from "~core/markdown-fixer"
+import { destroyModuleInstances } from "~core/module-lifecycle"
 import { ModelLocker } from "~core/model-locker"
 import { PolicyRetryManager } from "~core/policy-retry-manager"
 import { ReadingHistoryManager } from "~core/reading-history"
@@ -68,7 +69,7 @@ export interface ModuleInstances {
 }
 
 // 全局模块实例（用于设置变更时的热更新）
-let modules: ModuleInstances = {
+const createEmptyModuleInstances = (): ModuleInstances => ({
   assistantMermaidRenderer: null,
   themeManager: null,
   copyManager: null,
@@ -82,10 +83,14 @@ let modules: ModuleInstances = {
   userQueryMarkdownRenderer: null,
   policyRetryManager: null,
   usageCounterManager: null,
-}
+})
+
+let modules = createEmptyModuleInstances()
 
 let readingHistoryAutoStartTimer: ReturnType<typeof setTimeout> | null = null
+let hostThemeSyncTimer: ReturnType<typeof setTimeout> | null = null
 let assistantMermaidInitPromise: Promise<void> | null = null
+let coreModuleGeneration = 0
 
 const startCoreModule = (module: Pick<CoreModule, "start">): void => {
   module.start()
@@ -123,7 +128,7 @@ export async function initAssistantMermaidRenderer(ctx: ModulesContext): Promise
   }
 
   if (!assistantMermaidInitPromise) {
-    assistantMermaidInitPromise = (async () => {
+    const initPromise = (async () => {
       if (adapter.getAssistantMermaidSupportMode() !== "fallback") {
         return
       }
@@ -137,9 +142,13 @@ export async function initAssistantMermaidRenderer(ctx: ModulesContext): Promise
       } else {
         modules.assistantMermaidRenderer.updateSettings(true)
       }
-    })().finally(() => {
+    })()
+    assistantMermaidInitPromise = initPromise
+    const clearInitPromise = () => {
+      if (assistantMermaidInitPromise !== initPromise) return
       assistantMermaidInitPromise = null
-    })
+    }
+    void initPromise.then(clearInitPromise, clearInitPromise)
   }
 
   await assistantMermaidInitPromise
@@ -162,6 +171,7 @@ export function initThemeManager(ctx: ModulesContext): ThemeManager {
   })
 
   modules.themeManager = themeManager
+  themeManager.startThemeMonitoring()
 
   return themeManager
 }
@@ -339,8 +349,12 @@ export function initWatermarkRemover(ctx: ModulesContext): void {
 /**
  * 初始化阅读历史管理器
  */
-export async function initReadingHistoryManager(ctx: ModulesContext): Promise<void> {
+export async function initReadingHistoryManager(
+  ctx: ModulesContext,
+  generation = coreModuleGeneration,
+): Promise<void> {
   const { adapter, settings } = ctx
+  const isCurrentGeneration = () => generation === coreModuleGeneration
 
   if (settings.readingHistory?.persistence) {
     if (readingHistoryAutoStartTimer) {
@@ -349,19 +363,22 @@ export async function initReadingHistoryManager(ctx: ModulesContext): Promise<vo
     }
 
     const startRecording = (currentSettings: Settings) => {
-      if (modules.readingHistoryManager) return
+      if (!isCurrentGeneration() || modules.readingHistoryManager) return null
       modules.readingHistoryManager = new ReadingHistoryManager(
         adapter,
         currentSettings.readingHistory,
       )
       modules.readingHistoryManager.startRecording()
       modules.readingHistoryManager.cleanup()
+      return modules.readingHistoryManager
     }
 
     const skipAutoRestore = (await consumeClearAllFlag()) || consumeSkipReadingHistoryRestoreFlag()
+    if (!isCurrentGeneration()) return
     if (skipAutoRestore) {
       readingHistoryAutoStartTimer = setTimeout(() => {
         readingHistoryAutoStartTimer = null
+        if (!isCurrentGeneration()) return
         const currentSettings = getSettingsState()
         if (currentSettings.readingHistory?.persistence && !modules.readingHistoryManager) {
           startRecording(currentSettings)
@@ -370,19 +387,22 @@ export async function initReadingHistoryManager(ctx: ModulesContext): Promise<vo
       return
     }
 
-    startRecording(settings)
+    const readingHistoryManager = startRecording(settings)
+    if (!readingHistoryManager) return
 
     if (settings.readingHistory.autoRestore) {
-      modules.readingHistoryManager
+      readingHistoryManager
         .restoreProgress((msg) => showToast(msg, 3000))
         .then((restored) => {
-          if (restored) {
+          if (
+            isCurrentGeneration() &&
+            modules.readingHistoryManager === readingHistoryManager &&
+            restored
+          ) {
             showToast(t("restoredPosition"), 2000)
           }
         })
     }
-
-    modules.readingHistoryManager.cleanup()
   }
 }
 
@@ -426,11 +446,18 @@ export function initUserQueryMarkdownRenderer(ctx: ModulesContext): void {
  * 初始化所有核心模块
  */
 export async function initCoreModules(ctx: ModulesContext): Promise<ModuleInstances> {
+  destroyCoreModules()
+  const generation = coreModuleGeneration
+
   // 1. 主题管理 (优先应用)
   initThemeManager(ctx)
 
   // 延迟同步页面主题
-  setTimeout(() => syncHostThemeWithSettings(ctx), 1000)
+  hostThemeSyncTimer = setTimeout(() => {
+    hostThemeSyncTimer = null
+    if (generation !== coreModuleGeneration) return
+    void syncHostThemeWithSettings(ctx)
+  }, 1000)
 
   // 2. Markdown 修复
   initMarkdownFixer(ctx)
@@ -451,7 +478,8 @@ export async function initCoreModules(ctx: ModulesContext): Promise<ModuleInstan
   initUsageCounterManager(ctx)
 
   // 8. 阅读历史
-  await initReadingHistoryManager(ctx)
+  await initReadingHistoryManager(ctx, generation)
+  if (generation !== coreModuleGeneration) return modules
 
   // 9. 模型锁定
   initModelLocker(ctx)
@@ -464,6 +492,7 @@ export async function initCoreModules(ctx: ModulesContext): Promise<ModuleInstan
 
   // 12. AI 回复 Mermaid 渲染
   await initAssistantMermaidRenderer(ctx)
+  if (generation !== coreModuleGeneration) return modules
 
   // 13. Policy Retry Manager
   initPolicyRetryManager(ctx)
@@ -490,11 +519,14 @@ export function initPolicyRetryManager(ctx: ModulesContext): void {
 export function subscribeModuleUpdates(ctx: ModulesContext): () => void {
   const { adapter, siteId } = ctx
   let lastLanguage = getSettingsState().language
+  let active = true
 
-  return subscribeSettings((newSettings: Settings) => {
+  const unsubscribe = subscribeSettings((newSettings: Settings) => {
+    if (!active) return
     if (newSettings.language && newSettings.language !== lastLanguage) {
       lastLanguage = newSettings.language
       void setLanguage(newSettings.language).then(() => {
+        if (!active) return
         modules.assistantMermaidRenderer?.refreshLocalizedTexts()
         modules.layoutManager?.refreshLocalizedTexts()
       })
@@ -664,6 +696,11 @@ export function subscribeModuleUpdates(ctx: ModulesContext): () => void {
       )
     }
   })
+
+  return () => {
+    active = false
+    unsubscribe()
+  }
 }
 
 /**
@@ -674,9 +711,12 @@ export function initUrlChangeObserver(ctx: ModulesContext): () => void {
 
   let lastHref = window.location.href
   let lastPathname = window.location.pathname
+  let active = true
   let readingHistoryRestoreTimeoutId: ReturnType<typeof setTimeout> | null = null
+  const tabTitleUpdateTimers = new Set<ReturnType<typeof setTimeout>>()
 
-  const handleUrlChange = async () => {
+  const handleUrlChange = () => {
+    if (!active) return
     const currentHref = window.location.href
     if (currentHref === lastHref) return
 
@@ -704,20 +744,24 @@ export function initUrlChangeObserver(ctx: ModulesContext): () => void {
       readingHistoryRestoreTimeoutId = null
     }
 
-    if (modules.readingHistoryManager) {
-      modules.readingHistoryManager.stopRecording()
+    const readingHistoryManager = modules.readingHistoryManager
+    if (readingHistoryManager) {
+      readingHistoryManager.stopRecording()
       readingHistoryRestoreTimeoutId = setTimeout(async () => {
         readingHistoryRestoreTimeoutId = null
+        if (!active || modules.readingHistoryManager !== readingHistoryManager) return
         const shouldSkipRestore = consumeSkipReadingHistoryRestoreFlag()
         if (!shouldSkipRestore) {
-          const restored = await modules.readingHistoryManager?.restoreProgress((msg) =>
+          const restored = await readingHistoryManager.restoreProgress((msg) =>
             showToast(msg, 3000),
           )
-          if (restored) {
+          if (active && modules.readingHistoryManager === readingHistoryManager && restored) {
             showToast(t("restoredPosition"), 2000)
           }
         }
-        modules.readingHistoryManager?.startRecording()
+        if (active && modules.readingHistoryManager === readingHistoryManager) {
+          readingHistoryManager.startRecording()
+        }
       }, 1500)
     }
 
@@ -725,11 +769,18 @@ export function initUrlChangeObserver(ctx: ModulesContext): () => void {
     window.dispatchEvent(new Event("gh-url-change"))
 
     // 3. 标签页标题更新
-    if (modules.tabManager) {
-      modules.tabManager.resetConversationTitleCache()
-      ;[300, 800, 1500].forEach((delay) =>
-        setTimeout(() => modules.tabManager?.updateTabName(true), delay),
-      )
+    const tabManager = modules.tabManager
+    if (tabManager) {
+      tabManager.resetConversationTitleCache()
+      for (const delay of [300, 800, 1500]) {
+        const timer = setTimeout(() => {
+          tabTitleUpdateTimers.delete(timer)
+          if (active && modules.tabManager === tabManager) {
+            tabManager.updateTabName(true)
+          }
+        }, delay)
+        tabTitleUpdateTimers.add(timer)
+      }
     }
 
     // 4. Textarea 重新查找
@@ -768,6 +819,8 @@ export function initUrlChangeObserver(ctx: ModulesContext): () => void {
     : null
 
   return () => {
+    if (!active) return
+    active = false
     window.removeEventListener("popstate", handleUrlChange)
     window.removeEventListener("hashchange", handleUrlChange)
     if (fallbackIntervalId !== null) {
@@ -778,6 +831,10 @@ export function initUrlChangeObserver(ctx: ModulesContext): () => void {
       clearTimeout(readingHistoryRestoreTimeoutId)
       readingHistoryRestoreTimeoutId = null
     }
+    for (const timer of tabTitleUpdateTimers) {
+      clearTimeout(timer)
+    }
+    tabTitleUpdateTimers.clear()
 
     if (history.pushState === patchedPushState) {
       history.pushState = originalPushState
@@ -794,18 +851,7 @@ declare const __PLATFORM__: "extension" | "userscript" | undefined
  * 清除全部数据时的模块清理
  */
 export function handleClearAllData(): void {
-  if (readingHistoryAutoStartTimer) {
-    clearTimeout(readingHistoryAutoStartTimer)
-    readingHistoryAutoStartTimer = null
-  }
-  if (modules.readingHistoryManager) {
-    modules.readingHistoryManager.stopRecording()
-    modules.readingHistoryManager = null
-  }
-  if (modules.usageCounterManager) {
-    modules.usageCounterManager.destroy()
-    modules.usageCounterManager = null
-  }
+  destroyCoreModules()
 
   try {
     const isUserscript = typeof __PLATFORM__ !== "undefined" && __PLATFORM__ === "userscript"
@@ -820,6 +866,27 @@ export function handleClearAllData(): void {
   }
 }
 
+/**
+ * 释放内容脚本 realm 中由 initCoreModules() 创建的全部实例。
+ * ThemeManager 是 App 与 core 共享的 window 单例，因此这里只停止宿主页监听，不销毁订阅者。
+ */
+export function destroyCoreModules(): void {
+  coreModuleGeneration += 1
+  if (hostThemeSyncTimer) {
+    clearTimeout(hostThemeSyncTimer)
+    hostThemeSyncTimer = null
+  }
+  if (readingHistoryAutoStartTimer) {
+    clearTimeout(readingHistoryAutoStartTimer)
+    readingHistoryAutoStartTimer = null
+  }
+
+  destroyModuleInstances(modules)
+
+  modules = createEmptyModuleInstances()
+  assistantMermaidInitPromise = null
+}
+
 /**
  * 获取当前模块实例
  */
diff --git a/src/core/network-monitor.ts b/src/core/network-monitor.ts
index c4eb15589..2f5690159 100644
--- a/src/core/network-monitor.ts
+++ b/src/core/network-monitor.ts
@@ -1,4 +1,4 @@
-import { initGeminiMyStuffBridge } from "~core/gemini-mystuff-bridge"
+import { destroyGeminiMyStuffBridge, initGeminiMyStuffBridge } from "~core/gemini-mystuff-bridge"
 import type { NetworkMonitorRequestBodyRule } from "~adapters/base"
 import {
   EVENT_MONITOR_COMPLETE,
@@ -81,6 +81,8 @@ class NetworkMonitor {
   private _originalFetch: typeof fetch | null = null
   private _originalXhrOpen: XhrOpen | null = null
   private _originalXhrSend: XhrSend | null = null
+  private _hookedXhrOpen: XhrOpen | null = null
+  private _hookedXhrSend: XhrSend | null = null
   private _lastUrl = ""
   private _hasTriggeredStart = false
   private _boundHookedFetch: typeof fetch
@@ -100,18 +102,24 @@ class NetworkMonitor {
     if (this._isMonitoring) return
 
     const pageWindow = getPageWindow()
-    this._originalFetch = pageWindow.fetch
-    pageWindow.fetch = this._boundHookedFetch as typeof fetch
-
-    this._hookXHR()
     this._isMonitoring = true
+
+    try {
+      this._originalFetch = pageWindow.fetch
+      pageWindow.fetch = this._boundHookedFetch as typeof fetch
+      this._hookXHR()
+    } catch (error) {
+      this.stop()
+      throw error
+    }
   }
 
   stop() {
     if (!this._isMonitoring) return
 
     const pageWindow = getPageWindow()
-    if (this._originalFetch) {
+    this._isMonitoring = false
+    if (this._originalFetch && pageWindow.fetch === this._boundHookedFetch) {
       pageWindow.fetch = this._originalFetch
       this._originalFetch = null
     }
@@ -123,7 +131,6 @@ class NetworkMonitor {
       this._silenceTimer = null
     }
 
-    this._isMonitoring = false
     this._activeCount = 0
     this._hasTriggeredStart = false
   }
@@ -177,11 +184,19 @@ class NetworkMonitor {
   private async _hookedFetch(...args: FetchArguments): Promise<Response> {
     // 获取正确的页面上下文（油猴脚本环境使用 unsafeWindow）
     const pageWindow = getPageWindow()
+    const originalFetch = this._originalFetch
+    if (!originalFetch) {
+      throw new Error("NetworkMonitor original fetch is unavailable")
+    }
+    if (!this._isMonitoring) {
+      return this._callOriginalFetch(originalFetch, pageWindow, args)
+    }
+
     const url = this._extractFetchUrl(args)
     const isTarget = this._isTargetUrl(url)
 
     if (!isTarget) {
-      return this._callOriginalFetch(pageWindow, args)
+      return this._callOriginalFetch(originalFetch, pageWindow, args)
     }
 
     this._activeCount++
@@ -196,12 +211,14 @@ class NetworkMonitor {
       this._hasTriggeredStart = true
       try {
         const requestMetadata = await this._extractFetchRequestMetadata(args)
-        this.onStart({ url, timestamp: Date.now(), type: "fetch", ...requestMetadata })
+        if (this._isMonitoring) {
+          this.onStart({ url, timestamp: Date.now(), type: "fetch", ...requestMetadata })
+        }
       } catch {}
     }
 
     try {
-      const response = await this._callOriginalFetch(pageWindow, args)
+      const response = await this._callOriginalFetch(originalFetch, pageWindow, args)
       const clone = response.clone()
       this._readStream(clone).catch(() => {})
       return response
@@ -212,13 +229,11 @@ class NetworkMonitor {
   }
 
   private _callOriginalFetch(
+    originalFetch: typeof fetch,
     pageWindow: Window & typeof globalThis,
     args: FetchArguments,
   ): Promise<Response> {
-    if (!this._originalFetch) {
-      throw new Error("NetworkMonitor original fetch is unavailable")
-    }
-    return Reflect.apply(this._originalFetch, pageWindow, args) as Promise<Response>
+    return Reflect.apply(originalFetch, pageWindow, args) as Promise<Response>
   }
 
   private async _readStream(response: Response) {
@@ -237,6 +252,8 @@ class NetworkMonitor {
 
   private _decrementAndSchedule() {
     this._activeCount = Math.max(0, this._activeCount - 1)
+    if (!this._isMonitoring) return
+
     if (this._silenceTimer) {
       clearTimeout(this._silenceTimer)
     }
@@ -251,7 +268,7 @@ class NetworkMonitor {
     this._originalXhrOpen = PageXHR.prototype.open
     this._originalXhrSend = PageXHR.prototype.send
 
-    PageXHR.prototype.open = function (
+    const hookedXhrOpen = function (
       this: MonitoredXMLHttpRequest,
       method: string,
       url: string | URL,
@@ -259,24 +276,32 @@ class NetworkMonitor {
       username: string | null = null,
       password: string | null = null,
     ) {
-      this.__ophelNetworkMonitorUrl = url ? url.toString() : ""
-      if (!self._originalXhrOpen) {
+      const originalXhrOpen = self._originalXhrOpen
+      if (!originalXhrOpen) {
         throw new Error("NetworkMonitor original XMLHttpRequest.open is unavailable")
       }
-      return self._originalXhrOpen.call(this, method, url, async, username, password)
-    } as typeof XMLHttpRequest.prototype.open
+      if (self._isMonitoring) {
+        this.__ophelNetworkMonitorUrl = url ? url.toString() : ""
+      }
+      return originalXhrOpen.call(this, method, url, async, username, password)
+    } as XhrOpen
 
-    PageXHR.prototype.send = function (
+    const hookedXhrSend = function (
       this: MonitoredXMLHttpRequest,
       body?: Document | XMLHttpRequestBodyInit | null,
     ) {
+      const originalXhrSend = self._originalXhrSend
+      if (!originalXhrSend) {
+        throw new Error("NetworkMonitor original XMLHttpRequest.send is unavailable")
+      }
+      if (!self._isMonitoring) {
+        return originalXhrSend.call(this, body)
+      }
+
       const url = this.__ophelNetworkMonitorUrl || ""
 
       if (!self._isTargetUrl(url)) {
-        if (!self._originalXhrSend) {
-          throw new Error("NetworkMonitor original XMLHttpRequest.send is unavailable")
-        }
-        return self._originalXhrSend.call(this, body)
+        return originalXhrSend.call(this, body)
       }
 
       self._activeCount++
@@ -304,25 +329,29 @@ class NetworkMonitor {
       this.addEventListener("abort", onComplete)
       this.addEventListener("timeout", onComplete)
 
-      if (!self._originalXhrSend) {
-        throw new Error("NetworkMonitor original XMLHttpRequest.send is unavailable")
-      }
-      return self._originalXhrSend.call(this, body)
-    } as typeof XMLHttpRequest.prototype.send
+      return originalXhrSend.call(this, body)
+    } as XhrSend
+
+    this._hookedXhrOpen = hookedXhrOpen
+    this._hookedXhrSend = hookedXhrSend
+    PageXHR.prototype.open = hookedXhrOpen as typeof XMLHttpRequest.prototype.open
+    PageXHR.prototype.send = hookedXhrSend as typeof XMLHttpRequest.prototype.send
   }
 
   private _unhookXHR() {
     const pageWindow = getPageWindow()
     const PageXHR = pageWindow.XMLHttpRequest
 
-    if (this._originalXhrOpen) {
+    if (this._originalXhrOpen && PageXHR.prototype.open === this._hookedXhrOpen) {
       PageXHR.prototype.open = this._originalXhrOpen
       this._originalXhrOpen = null
     }
-    if (this._originalXhrSend) {
+    if (this._originalXhrSend && PageXHR.prototype.send === this._hookedXhrSend) {
       PageXHR.prototype.send = this._originalXhrSend
       this._originalXhrSend = null
     }
+    this._hookedXhrOpen = null
+    this._hookedXhrSend = null
   }
 
   private _extractFetchUrl(args: FetchArguments): string {
@@ -440,6 +469,40 @@ class NetworkMonitor {
 let monitor: NetworkMonitor | null = null
 let isInitialized = false
 
+const handleMonitorMessage = (event: MessageEvent): void => {
+  const message = event.data as WindowMessage | null
+  const type = message?.type
+  const payload = message?.payload as MonitorConfigPayload | undefined
+
+  // 在油猴脚本中，event.source 可能与 window 或 unsafeWindow 不完全相等
+  // 或者由于沙箱机制，window.postMessage 发送的消息 source 可能是 proxy
+  // 主要依赖消息类型进行验证
+  if (event.source !== window) {
+    // 放宽检查：如果是我们关心的消息类型，则允许通过
+    if (
+      type !== EVENT_MONITOR_INIT &&
+      type !== EVENT_MONITOR_COMPLETE &&
+      type !== EVENT_MONITOR_START
+    ) {
+      return
+    }
+  }
+
+  if (type === EVENT_MONITOR_INIT) {
+    if (monitor) monitor.stop()
+    monitor = new NetworkMonitor({
+      urlPatterns: payload?.urlPatterns,
+      urlPathEndsWith: payload?.urlPathEndsWith,
+      silenceThreshold: payload?.silenceThreshold,
+      requestBodyRules: payload?.requestBodyRules,
+      onStart: (info) => window.postMessage({ type: EVENT_MONITOR_START, payload: info }, "*"),
+      onComplete: (info) =>
+        window.postMessage({ type: EVENT_MONITOR_COMPLETE, payload: info }, "*"),
+    })
+    monitor.start()
+  }
+}
+
 /**
  * 初始化 NetworkMonitor 消息监听器
  * 需要显式调用此函数以避免被 tree-shaking 移除
@@ -451,38 +514,15 @@ export function initNetworkMonitor(): void {
   isInitialized = true
 
   initGeminiMyStuffBridge()
+  window.addEventListener("message", handleMonitorMessage)
+}
 
-  window.addEventListener("message", (event) => {
-    const message = event.data as WindowMessage | null
-    const type = message?.type
-    const payload = message?.payload as MonitorConfigPayload | undefined
-
-    // 在油猴脚本中，event.source 可能与 window 或 unsafeWindow 不完全相等
-    // 或者由于沙箱机制，window.postMessage 发送的消息 source 可能是 proxy
-    // 主要依赖消息类型进行验证
-    if (event.source !== window) {
-      // 放宽检查：如果是我们关心的消息类型，则允许通过
-      if (
-        type !== EVENT_MONITOR_INIT &&
-        type !== EVENT_MONITOR_COMPLETE &&
-        type !== EVENT_MONITOR_START
-      ) {
-        return
-      }
-    }
+export function destroyNetworkMonitor(): void {
+  monitor?.stop()
+  monitor = null
+  destroyGeminiMyStuffBridge()
 
-    if (type === EVENT_MONITOR_INIT) {
-      if (monitor) monitor.stop()
-      monitor = new NetworkMonitor({
-        urlPatterns: payload?.urlPatterns,
-        urlPathEndsWith: payload?.urlPathEndsWith,
-        silenceThreshold: payload?.silenceThreshold,
-        requestBodyRules: payload?.requestBodyRules,
-        onStart: (info) => window.postMessage({ type: EVENT_MONITOR_START, payload: info }, "*"),
-        onComplete: (info) =>
-          window.postMessage({ type: EVENT_MONITOR_COMPLETE, payload: info }, "*"),
-      })
-      monitor.start()
-    }
-  })
+  if (!isInitialized) return
+  isInitialized = false
+  window.removeEventListener("message", handleMonitorMessage)
 }
diff --git a/src/core/policy-retry-manager.ts b/src/core/policy-retry-manager.ts
index 28141643a..2c051f579 100644
--- a/src/core/policy-retry-manager.ts
+++ b/src/core/policy-retry-manager.ts
@@ -12,6 +12,7 @@ export class PolicyRetryManager {
   private settings: NonNullable<Settings["geminiEnterprise"]>["policyRetry"]
   private retryCounts = new Map<string, number>() // promptHash -> count
   private monitorInitialized = false
+  private destroyed = false
 
   constructor(
     adapter: SiteAdapter,
@@ -19,7 +20,7 @@ export class PolicyRetryManager {
   ) {
     this.adapter = adapter as GeminiEnterpriseAdapter
     this.settings = settings
-    window.addEventListener("message", this.handleMessage.bind(this))
+    window.addEventListener("message", this.handleMessage)
 
     // 如果功能已启用，立即初始化网络监控
     if (this.settings.enabled) {
@@ -60,7 +61,7 @@ export class PolicyRetryManager {
     }
   }
 
-  private handleMessage(event: MessageEvent) {
+  private handleMessage = (event: MessageEvent) => {
     // 只有 Gemini Enterprise 才启用
     if (this.adapter.getSiteId() !== SITE_IDS.GEMINI_ENTERPRISE) {
       return
@@ -78,6 +79,7 @@ export class PolicyRetryManager {
   private async checkAndRetry() {
     // 延迟一点，确保渲染完成
     await new Promise((resolve) => setTimeout(resolve, 500))
+    if (this.destroyed || !this.settings.enabled) return
 
     // 1. 查找 ucs-conversation 的 Shadow Root
     const ucsConv = DOMToolkit.query("ucs-conversation", { shadow: true }) as Element | null
@@ -121,6 +123,7 @@ export class PolicyRetryManager {
 
     // 5. 计算 Hash 并重试
     const hash = await this.sha256(questionText)
+    if (this.destroyed || !this.settings.enabled) return
     const count = this.retryCounts.get(hash) || 0
 
     if (count < this.settings.maxRetries) {
@@ -179,10 +182,13 @@ export class PolicyRetryManager {
   }
 
   private async performRetry(text: string) {
+    if (this.destroyed || !this.settings.enabled) return
+
     // 1. 填入文本
     // 需要确保清空
     this.adapter.clearTextarea()
     await new Promise((r) => setTimeout(r, 100))
+    if (this.destroyed || !this.settings.enabled) return
 
     const inserted = this.adapter.insertPrompt(text)
     if (!inserted) {
@@ -191,6 +197,7 @@ export class PolicyRetryManager {
     }
 
     await new Promise((r) => setTimeout(r, 300))
+    if (this.destroyed || !this.settings.enabled) return
 
     // 2. 点击提交
     // 使用 adapter 的 helper 或者自己查找
@@ -229,4 +236,12 @@ export class PolicyRetryManager {
     const hashArray = Array.from(new Uint8Array(hashBuffer))
     return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("")
   }
+
+  destroy() {
+    if (this.destroyed) return
+    this.destroyed = true
+    this.settings = { ...this.settings, enabled: false }
+    this.retryCounts.clear()
+    window.removeEventListener("message", this.handleMessage)
+  }
 }
diff --git a/src/core/reading-history.ts b/src/core/reading-history.ts
index e5ed3c3e7..c970596cc 100644
--- a/src/core/reading-history.ts
+++ b/src/core/reading-history.ts
@@ -36,6 +36,9 @@ export class ReadingHistoryManager {
   private lastSaveTime = 0
   private ignoreScrollUntil = 0 // 初始化冷却期
   private positionKeeperRaF = 0 // 位置保持器的动画帧 ID
+  private restoreResetTimer: number | null = null
+  private hydrationWaitCancels = new Set<() => void>()
+  private destroyed = false
 
   public restoredTop: number | undefined
 
@@ -48,30 +51,45 @@ export class ReadingHistoryManager {
    * 等待 store hydration 完成
    */
   async waitForHydration(timeoutMs = ReadingHistoryManager.HYDRATION_TIMEOUT_MS): Promise<boolean> {
+    if (this.destroyed) {
+      return false
+    }
     if (useReadingHistoryStore.getState()._hasHydrated) {
       return true
     }
 
     return new Promise<boolean>((resolve) => {
       let resolved = false
-      let timeoutId = 0
+      let timeoutId: number | null = null
+      let unsubscribe = () => undefined
 
       const finish = (value: boolean) => {
         if (resolved) return
         resolved = true
-        window.clearTimeout(timeoutId)
+        if (timeoutId !== null) {
+          window.clearTimeout(timeoutId)
+        }
         unsubscribe()
+        this.hydrationWaitCancels.delete(cancel)
         resolve(value)
       }
 
-      const unsubscribe = useReadingHistoryStore.subscribe((state) => {
+      const cancel = () => finish(false)
+      this.hydrationWaitCancels.add(cancel)
+
+      unsubscribe = useReadingHistoryStore.subscribe((state) => {
         if (state._hasHydrated) {
           finish(true)
         }
       })
 
+      // Avoid missing hydration if it completed between the initial read and subscription.
+      if (useReadingHistoryStore.getState()._hasHydrated) {
+        finish(true)
+        return
+      }
+
       timeoutId = window.setTimeout(() => {
-        useReadingHistoryStore.setState({ _hasHydrated: true })
         finish(false)
       }, timeoutMs)
     })
@@ -87,7 +105,7 @@ export class ReadingHistoryManager {
   }
 
   startRecording() {
-    if (this.isRecording) return
+    if (this.destroyed || this.isRecording) return
     this.isRecording = true
     this.currentSessionId = null
 
@@ -236,6 +254,7 @@ export class ReadingHistoryManager {
     const deadline = Date.now() + timeoutMs
 
     while (Date.now() <= deadline) {
+      if (this.destroyed) return ""
       const sessionId = this.getSessionId()
       if (this.canUseCurrentSession(sessionId)) {
         return sessionId
@@ -246,6 +265,7 @@ export class ReadingHistoryManager {
       )
     }
 
+    if (this.destroyed) return ""
     const sessionId = this.getSessionId()
     if (this.canUseCurrentSession(sessionId)) {
       return sessionId
@@ -310,15 +330,16 @@ export class ReadingHistoryManager {
   }
 
   async restoreProgress(onProgress?: (msg: string) => void): Promise<boolean> {
-    if (!this.settings.autoRestore) {
+    if (this.destroyed || !this.settings.autoRestore) {
       return false
     }
 
     // 确保 store 已 hydrated
-    await this.waitForHydration()
+    const hydrated = await this.waitForHydration()
+    if (this.destroyed || !hydrated) return false
 
     const sessionId = await this.waitForReadySessionId()
-    if (!sessionId) {
+    if (this.destroyed || !sessionId) {
       return false
     }
 
@@ -349,6 +370,7 @@ export class ReadingHistoryManager {
             textSignature: data.textSignature,
           }
           const contentRestored = await this.adapter.restoreScroll(anchorData)
+          if (this.destroyed) return false
           if (contentRestored) {
             const scrollContainer = this.adapter.getScrollContainer() || document.documentElement
             this.restoredTop = (scrollContainer as HTMLElement).scrollTop || window.scrollY
@@ -376,7 +398,7 @@ export class ReadingHistoryManager {
             },
           })
 
-          if (!result.success) {
+          if (this.destroyed || !result.success) {
             return false
           }
 
@@ -390,6 +412,7 @@ export class ReadingHistoryManager {
 
           // 滚动到目标位置（content script 的 scrollTo 走原始原型链，不受主世界劫持影响）
           await smartScrollTo(this.adapter, newScrollTop)
+          if (this.destroyed) return false
           this.restoredTop = newScrollTop
           restoredSuccessfully = true
         } catch {
@@ -402,13 +425,21 @@ export class ReadingHistoryManager {
       return restoredSuccessfully
     } finally {
       // 立即启动位置保持器（无延迟），对抗平台自动滚动
-      if (restoredSuccessfully && this.restoredTop !== undefined) {
+      if (!this.destroyed && restoredSuccessfully && this.restoredTop !== undefined) {
         this.startPositionKeeper(this.restoredTop)
       }
-      // 延迟重置恢复标志，防止恢复过程中的滚动事件触发保存
-      setTimeout(() => {
+      if (this.destroyed) {
         this.isRestoring = false
-      }, 1000)
+      } else {
+        // 延迟重置恢复标志，防止恢复过程中的滚动事件触发保存
+        if (this.restoreResetTimer !== null) {
+          window.clearTimeout(this.restoreResetTimer)
+        }
+        this.restoreResetTimer = window.setTimeout(() => {
+          this.restoreResetTimer = null
+          this.isRestoring = false
+        }, 1000)
+      }
     }
   }
 
@@ -432,6 +463,7 @@ export class ReadingHistoryManager {
    * - 最长不超过 maxHoldMs（15秒）
    */
   private startPositionKeeper(targetTop: number) {
+    if (this.destroyed) return
     this.stopPositionKeeper()
 
     const startTime = Date.now()
@@ -491,9 +523,26 @@ export class ReadingHistoryManager {
     if (this.positionKeeperRaF) {
       cancelAnimationFrame(this.positionKeeperRaF)
       this.positionKeeperRaF = 0
-      // 释放精确位置锁及清理拦截时间戳
-      delete document.documentElement.dataset.ophelPositionLock
-      delete document.documentElement.dataset.ophelPositionLockLastBlock
     }
+
+    // 释放精确位置锁及清理拦截时间戳
+    delete document.documentElement.dataset.ophelPositionLock
+    delete document.documentElement.dataset.ophelPositionLockLastBlock
+  }
+
+  destroy() {
+    if (this.destroyed) return
+    this.destroyed = true
+    for (const cancel of [...this.hydrationWaitCancels]) {
+      cancel()
+    }
+    this.hydrationWaitCancels.clear()
+    this.stopRecording()
+    this.stopPositionKeeper()
+    if (this.restoreResetTimer !== null) {
+      window.clearTimeout(this.restoreResetTimer)
+      this.restoreResetTimer = null
+    }
+    this.isRestoring = false
   }
 }
diff --git a/src/core/webdav-sync.ts b/src/core/webdav-sync.ts
index 5350de55d..010f7226f 100644
--- a/src/core/webdav-sync.ts
+++ b/src/core/webdav-sync.ts
@@ -4,6 +4,7 @@
  */
 
 import { MULTI_PROP_STORES, ZUSTAND_KEYS } from "~constants/defaults"
+import { runTrackedPersistenceWrite } from "~stores/chrome-adapter"
 import type { WebDAVProvider } from "~types/webdav"
 import { validateBackupData } from "~utils/backup-validator"
 import { APP_NAME } from "~utils/config"
@@ -675,44 +676,50 @@ export class WebDAVSyncManager {
         }),
       )
 
-      await new Promise<void>((resolve, reject) =>
-        chrome.storage.local.set(dehydratedData, () =>
-          chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve(),
-        ),
+      await runTrackedPersistenceWrite(
+        () =>
+          new Promise<void>((resolve, reject) =>
+            chrome.storage.local.set(dehydratedData, () =>
+              chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve(),
+            ),
+          ),
       )
 
       // 3. 恢复当前 WebDAV 配置（保持用户当前的 WebDAV 设置）
       // 直接操作 storage 而非 setSettings()，避免触发 Zustand persist
-      await new Promise<void>((resolve, reject) => {
-        chrome.storage.local.get("settings", (result) => {
-          if (chrome.runtime.lastError) {
-            reject(chrome.runtime.lastError)
-            return
-          }
+      await runTrackedPersistenceWrite(
+        () =>
+          new Promise<void>((resolve, reject) => {
+            chrome.storage.local.get("settings", (result) => {
+              if (chrome.runtime.lastError) {
+                reject(chrome.runtime.lastError)
+                return
+              }
 
-          // 解析当前 storage 中的 settings（刚写入的备份数据）
-          let settingsWrapper = result.settings
-          if (typeof settingsWrapper === "string") {
-            try {
-              settingsWrapper = JSON.parse(settingsWrapper)
-            } catch {
-              // 解析失败，跳过 WebDAV 配置恢复
-              resolve()
-              return
-            }
-          }
+              // 解析当前 storage 中的 settings（刚写入的备份数据）
+              let settingsWrapper = result.settings
+              if (typeof settingsWrapper === "string") {
+                try {
+                  settingsWrapper = JSON.parse(settingsWrapper)
+                } catch {
+                  // 解析失败，跳过 WebDAV 配置恢复
+                  resolve()
+                  return
+                }
+              }
 
-          // 更新 webdav 配置
-          if (settingsWrapper?.state?.settings) {
-            settingsWrapper.state.settings.webdav = currentWebdavConfig
-          }
+              // 更新 webdav 配置
+              if (settingsWrapper?.state?.settings) {
+                settingsWrapper.state.settings.webdav = currentWebdavConfig
+              }
 
-          // 写回 storage
-          chrome.storage.local.set({ settings: JSON.stringify(settingsWrapper) }, () =>
-            chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve(),
-          )
-        })
-      })
+              // 写回 storage
+              chrome.storage.local.set({ settings: JSON.stringify(settingsWrapper) }, () =>
+                chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve(),
+              )
+            })
+          }),
+      )
 
       const now = Date.now()
       await this.saveConfig({ lastSyncTime: now, lastSyncStatus: "success" })
diff --git a/src/hooks/useShortcuts.ts b/src/hooks/useShortcuts.ts
index e4d78a1cf..9424219ae 100644
--- a/src/hooks/useShortcuts.ts
+++ b/src/hooks/useShortcuts.ts
@@ -691,7 +691,7 @@ export function useShortcuts({
   const switchClaudeKey = useCallback(async () => {
     // 仅在 Claude 站点生效 (简单判断)
     // 仅在 Claude 站点生效
-    if (!location.hostname.includes("claude.ai") && !location.hostname.includes("claude.com")) {
+    if (location.hostname !== "claude.ai") {
       showToast(t("claudeShortcutOnlyOnSite"), 2000)
       return
     }
diff --git a/src/platform/extension/index.ts b/src/platform/extension/index.ts
index 64ffe81ef..ab61f6e80 100644
--- a/src/platform/extension/index.ts
+++ b/src/platform/extension/index.ts
@@ -12,6 +12,11 @@ import type {
   PlatformCapability,
   PlatformStorage,
 } from "../types"
+import {
+  MSG_ABORT_CLEAR_ALL_DATA,
+  MSG_CLEAR_ALL_DATA,
+  MSG_COMPLETE_CLEAR_ALL_DATA,
+} from "~utils/messaging"
 
 const notificationSoundPaths: Record<string, string> = {
   default: "assets/notification-sounds/streaming-complete-v2.mp3",
@@ -51,6 +56,12 @@ const extensionStorage: PlatformStorage = {
   },
 }
 
+let activeClearTransactionId: string | null = null
+
+async function sendClearTransactionMessage(type: string, transactionId: string) {
+  return chrome.runtime.sendMessage({ type, transactionId })
+}
+
 /**
  * 浏览器扩展平台实现
  */
@@ -59,6 +70,44 @@ export const platform: Platform = {
 
   storage: extensionStorage,
 
+  async prepareClearAllData(): Promise<void> {
+    if (activeClearTransactionId) {
+      throw new Error("A clear-all transaction is already active")
+    }
+
+    const transactionId = crypto.randomUUID()
+    activeClearTransactionId = transactionId
+    const response = await sendClearTransactionMessage(MSG_CLEAR_ALL_DATA, transactionId)
+    if (!response?.success) {
+      activeClearTransactionId = null
+      throw new Error(response?.error || "Failed to stop extension runtimes")
+    }
+  },
+
+  async completeClearAllData(): Promise<void> {
+    const transactionId = activeClearTransactionId
+    if (!transactionId) {
+      throw new Error("No clear-all transaction is active")
+    }
+
+    const response = await sendClearTransactionMessage(MSG_COMPLETE_CLEAR_ALL_DATA, transactionId)
+    if (!response?.success) {
+      throw new Error(response?.error || "Failed to reload extension runtimes")
+    }
+    activeClearTransactionId = null
+  },
+
+  async abortClearAllData(): Promise<void> {
+    const transactionId = activeClearTransactionId
+    if (!transactionId) return
+
+    const response = await sendClearTransactionMessage(MSG_ABORT_CLEAR_ALL_DATA, transactionId)
+    if (!response?.success) {
+      throw new Error(response?.error || "Failed to abort the clear-all transaction")
+    }
+    activeClearTransactionId = null
+  },
+
   async fetch(url: string, options?: FetchOptions): Promise<FetchResponse> {
     // 通过 background 代理请求
     const response = await chrome.runtime.sendMessage({
diff --git a/src/platform/types.ts b/src/platform/types.ts
index 830cda366..460cd29bc 100644
--- a/src/platform/types.ts
+++ b/src/platform/types.ts
@@ -98,6 +98,15 @@ export interface Platform {
    */
   readonly storage: PlatformStorage
 
+  /** Freeze data writers in every active runtime before clearing storage. */
+  prepareClearAllData(): Promise<void>
+
+  /** Finalize a successful clear and reload other active runtimes. */
+  completeClearAllData(): Promise<void>
+
+  /** Resume or reload runtimes after a failed clear transaction. */
+  abortClearAllData(): Promise<void>
+
   /**
    * 发起网络请求（绕过 CORS）
    */
diff --git a/src/platform/userscript/clear-all-coordinator.ts b/src/platform/userscript/clear-all-coordinator.ts
new file mode 100644
index 000000000..db8e021bd
--- /dev/null
+++ b/src/platform/userscript/clear-all-coordinator.ts
@@ -0,0 +1,352 @@
+import {
+  CLEAR_ALL_FLAG_KEY,
+  CLEAR_ALL_GENERATION_KEY,
+  CLEAR_ALL_PREPARE_KEY,
+  CLEAR_ALL_RESUME_KEY,
+} from "~utils/storage"
+
+export const USERSCRIPT_RUNTIME_HEARTBEAT_PREFIX = "ophel:clearAllRuntime:"
+export const USERSCRIPT_CLEAR_ACK_PREFIX = "ophel:clearAllAck:"
+
+const HEARTBEAT_INTERVAL_MS = 2000
+const HEARTBEAT_TTL_MS = 120000
+const PREPARE_SIGNAL_TTL_MS = 60000
+const ACK_TIMEOUT_MS = 5000
+const ACK_POLL_INTERVAL_MS = 25
+
+interface ClearPrepareSignal {
+  transactionId: string
+  requestedAt: number
+}
+
+interface ClearAcknowledgement {
+  transactionId: string
+  instanceId: string
+  success: boolean
+  error?: string
+}
+
+interface RuntimeHeartbeat {
+  updatedAt: number
+}
+
+type ValueChangeListener = (
+  name: string,
+  oldValue: unknown,
+  newValue: unknown,
+  remote: boolean,
+) => void
+
+export interface UserscriptValueApi {
+  getValue<T>(key: string): T | undefined
+  setValue(key: string, value: unknown): void
+  deleteValue(key: string): void
+  listValues(): string[]
+  addValueChangeListener(key: string, callback: ValueChangeListener): number
+  removeValueChangeListener(listenerId: number): void
+}
+
+interface UserscriptClearCallbacks {
+  prepareCurrentRuntime: () => Promise<void>
+  reloadCurrentRuntime: () => void
+}
+
+interface UserscriptClearCoordinatorOptions {
+  instanceId?: string
+  now?: () => number
+  sleep?: (delay: number) => Promise<void>
+  setInterval?: (callback: () => void, delay: number) => ReturnType<typeof setInterval>
+  clearInterval?: (timer: ReturnType<typeof setInterval>) => void
+  heartbeatTtlMs?: number
+  prepareSignalTtlMs?: number
+  ackTimeoutMs?: number
+  ackPollIntervalMs?: number
+}
+
+const isPrepareSignal = (value: unknown): value is ClearPrepareSignal =>
+  typeof value === "object" &&
+  value !== null &&
+  "transactionId" in value &&
+  typeof value.transactionId === "string" &&
+  "requestedAt" in value &&
+  typeof value.requestedAt === "number"
+
+const isHeartbeat = (value: unknown): value is RuntimeHeartbeat =>
+  typeof value === "object" &&
+  value !== null &&
+  "updatedAt" in value &&
+  typeof value.updatedAt === "number"
+
+const isAcknowledgement = (value: unknown): value is ClearAcknowledgement =>
+  typeof value === "object" &&
+  value !== null &&
+  "transactionId" in value &&
+  typeof value.transactionId === "string" &&
+  "instanceId" in value &&
+  typeof value.instanceId === "string" &&
+  "success" in value &&
+  typeof value.success === "boolean"
+
+export const isUserscriptClearRuntimeKey = (key: string): boolean =>
+  key === CLEAR_ALL_PREPARE_KEY ||
+  key === CLEAR_ALL_GENERATION_KEY ||
+  key.startsWith(USERSCRIPT_RUNTIME_HEARTBEAT_PREFIX) ||
+  key.startsWith(USERSCRIPT_CLEAR_ACK_PREFIX)
+
+export class UserscriptClearAllCoordinator {
+  readonly instanceId: string
+
+  private readonly heartbeatKey: string
+  private readonly now: () => number
+  private readonly sleep: (delay: number) => Promise<void>
+  private readonly scheduleInterval: UserscriptClearCoordinatorOptions["setInterval"]
+  private readonly cancelInterval: UserscriptClearCoordinatorOptions["clearInterval"]
+  private readonly heartbeatTtlMs: number
+  private readonly prepareSignalTtlMs: number
+  private readonly ackTimeoutMs: number
+  private readonly ackPollIntervalMs: number
+  private listeners: number[] = []
+  private heartbeatTimer: ReturnType<typeof setInterval> | null = null
+  private started = false
+  private startupBlocked = false
+  private currentTransactionId: string | null = null
+  private preparationByTransaction = new Map<string, Promise<void>>()
+
+  constructor(
+    private readonly api: UserscriptValueApi,
+    private readonly callbacks: UserscriptClearCallbacks,
+    options: UserscriptClearCoordinatorOptions = {},
+  ) {
+    this.instanceId = options.instanceId ?? crypto.randomUUID()
+    this.heartbeatKey = `${USERSCRIPT_RUNTIME_HEARTBEAT_PREFIX}${this.instanceId}`
+    this.now = options.now ?? Date.now
+    this.sleep = options.sleep ?? ((delay) => new Promise((resolve) => setTimeout(resolve, delay)))
+    this.scheduleInterval = options.setInterval ?? setInterval
+    this.cancelInterval = options.clearInterval ?? clearInterval
+    this.heartbeatTtlMs = options.heartbeatTtlMs ?? HEARTBEAT_TTL_MS
+    this.prepareSignalTtlMs = options.prepareSignalTtlMs ?? PREPARE_SIGNAL_TTL_MS
+    this.ackTimeoutMs = options.ackTimeoutMs ?? ACK_TIMEOUT_MS
+    this.ackPollIntervalMs = options.ackPollIntervalMs ?? ACK_POLL_INTERVAL_MS
+  }
+
+  start(): { clearPending: boolean } {
+    if (this.started) {
+      return { clearPending: this.getCurrentPrepareSignal() !== null }
+    }
+    this.started = true
+
+    this.listeners.push(
+      this.api.addValueChangeListener(CLEAR_ALL_PREPARE_KEY, (_name, _oldValue, value, remote) => {
+        if (!remote) return
+        if (isPrepareSignal(value)) {
+          void this.prepareAndAcknowledge(value)
+        } else if (this.startupBlocked && (value === undefined || value === null)) {
+          this.requestReload()
+        }
+      }),
+      this.api.addValueChangeListener(CLEAR_ALL_FLAG_KEY, (_name, _oldValue, value, remote) => {
+        if (!remote || value === undefined || value === null) return
+        void this.callbacks.prepareCurrentRuntime().finally(() => this.requestReload())
+      }),
+      this.api.addValueChangeListener(CLEAR_ALL_RESUME_KEY, (_name, _oldValue, value, remote) => {
+        if (remote && value !== undefined && value !== null) {
+          this.requestReload()
+        }
+      }),
+    )
+
+    this.writeHeartbeat()
+    this.heartbeatTimer =
+      this.scheduleInterval?.(() => this.writeHeartbeat(), HEARTBEAT_INTERVAL_MS) ?? null
+
+    const pendingSignal = this.getCurrentPrepareSignal()
+    if (pendingSignal) {
+      this.startupBlocked = true
+      void this.prepareAndAcknowledge(pendingSignal)
+      return { clearPending: true }
+    }
+    return { clearPending: false }
+  }
+
+  stop(): void {
+    if (!this.started) return
+    this.started = false
+    for (const listenerId of this.listeners) {
+      this.api.removeValueChangeListener(listenerId)
+    }
+    this.listeners = []
+    if (this.heartbeatTimer !== null) {
+      this.cancelInterval?.(this.heartbeatTimer)
+      this.heartbeatTimer = null
+    }
+    this.api.deleteValue(this.heartbeatKey)
+  }
+
+  async prepareRemoteRuntimes(): Promise<void> {
+    if (!this.started) throw new Error("Userscript clear coordinator is not initialized")
+
+    const signal: ClearPrepareSignal = {
+      transactionId: crypto.randomUUID(),
+      requestedAt: this.now(),
+    }
+    this.currentTransactionId = signal.transactionId
+    const expectedInstances = this.getActiveRuntimeIds().filter((id) => id !== this.instanceId)
+    this.api.setValue(CLEAR_ALL_PREPARE_KEY, signal)
+
+    const deadline = this.now() + this.ackTimeoutMs
+    while (true) {
+      const pending: string[] = []
+      for (const instanceId of expectedInstances) {
+        const acknowledgement = this.api.getValue<unknown>(this.getAckKey(signal, instanceId))
+        if (!isAcknowledgement(acknowledgement)) {
+          pending.push(instanceId)
+          continue
+        }
+        if (!acknowledgement.success) {
+          throw new Error(
+            acknowledgement.error || `Userscript runtime ${instanceId} failed to stop`,
+          )
+        }
+      }
+
+      if (pending.length === 0) return
+      if (this.now() >= deadline) {
+        throw new Error(`Timed out waiting for ${pending.length} userscript runtime(s)`)
+      }
+      await this.sleep(this.ackPollIntervalMs)
+    }
+  }
+
+  complete(): void {
+    this.cleanupCurrentTransaction()
+  }
+
+  abort(): void {
+    const transactionId = this.currentTransactionId
+    this.cleanupCurrentTransaction()
+    this.api.setValue(CLEAR_ALL_RESUME_KEY, {
+      transactionId,
+      requestedAt: this.now(),
+    })
+  }
+
+  private writeHeartbeat(): void {
+    this.api.setValue(this.heartbeatKey, { updatedAt: this.now() } satisfies RuntimeHeartbeat)
+  }
+
+  private requestReload(): void {
+    this.startupBlocked = false
+    this.callbacks.reloadCurrentRuntime()
+  }
+
+  private getCurrentPrepareSignal(): ClearPrepareSignal | null {
+    const signal = this.api.getValue<unknown>(CLEAR_ALL_PREPARE_KEY)
+    if (!isPrepareSignal(signal)) return null
+    if (this.now() - signal.requestedAt <= this.prepareSignalTtlMs) return signal
+
+    this.api.deleteValue(CLEAR_ALL_PREPARE_KEY)
+    return null
+  }
+
+  private getActiveRuntimeIds(): string[] {
+    const cutoff = this.now() - this.heartbeatTtlMs
+    return this.api
+      .listValues()
+      .filter((key) => key.startsWith(USERSCRIPT_RUNTIME_HEARTBEAT_PREFIX))
+      .flatMap((key) => {
+        const heartbeat = this.api.getValue<unknown>(key)
+        return isHeartbeat(heartbeat) && heartbeat.updatedAt >= cutoff
+          ? [key.slice(USERSCRIPT_RUNTIME_HEARTBEAT_PREFIX.length)]
+          : []
+      })
+  }
+
+  private getAckKey(signal: ClearPrepareSignal, instanceId: string): string {
+    return `${USERSCRIPT_CLEAR_ACK_PREFIX}${signal.transactionId}:${instanceId}`
+  }
+
+  private prepareAndAcknowledge(signal: ClearPrepareSignal): Promise<void> {
+    const existing = this.preparationByTransaction.get(signal.transactionId)
+    if (existing) return existing
+
+    const preparation = this.callbacks.prepareCurrentRuntime().then(
+      () => {
+        this.api.setValue(this.getAckKey(signal, this.instanceId), {
+          transactionId: signal.transactionId,
+          instanceId: this.instanceId,
+          success: true,
+        } satisfies ClearAcknowledgement)
+      },
+      (error) => {
+        this.api.setValue(this.getAckKey(signal, this.instanceId), {
+          transactionId: signal.transactionId,
+          instanceId: this.instanceId,
+          success: false,
+          error: error instanceof Error ? error.message : String(error),
+        } satisfies ClearAcknowledgement)
+      },
+    )
+    this.preparationByTransaction.set(signal.transactionId, preparation)
+    void preparation.finally(() => this.preparationByTransaction.delete(signal.transactionId))
+    return preparation
+  }
+
+  private cleanupCurrentTransaction(): void {
+    const transactionId = this.currentTransactionId
+    this.api.deleteValue(CLEAR_ALL_PREPARE_KEY)
+    if (transactionId) {
+      const ackPrefix = `${USERSCRIPT_CLEAR_ACK_PREFIX}${transactionId}:`
+      for (const key of this.api.listValues()) {
+        if (key.startsWith(ackPrefix)) this.api.deleteValue(key)
+      }
+    }
+    this.currentTransactionId = null
+  }
+}
+
+declare function GM_getValue<T>(key: string, defaultValue?: T): T
+declare function GM_setValue(key: string, value: unknown): void
+declare function GM_deleteValue(key: string): void
+declare function GM_listValues(): string[]
+declare function GM_addValueChangeListener(key: string, callback: ValueChangeListener): number
+declare function GM_removeValueChangeListener(listenerId: number): void
+
+const gmValueApi: UserscriptValueApi = {
+  getValue: (key) => GM_getValue(key),
+  setValue: (key, value) => GM_setValue(key, value),
+  deleteValue: (key) => GM_deleteValue(key),
+  listValues: () => GM_listValues(),
+  addValueChangeListener: (key, callback) => GM_addValueChangeListener(key, callback),
+  removeValueChangeListener: (listenerId) => GM_removeValueChangeListener(listenerId),
+}
+
+let activeCoordinator: UserscriptClearAllCoordinator | null = null
+
+export function initUserscriptClearAllCoordinator(callbacks: UserscriptClearCallbacks): {
+  clearPending: boolean
+  cleanup: () => void
+} {
+  if (activeCoordinator) throw new Error("Userscript clear coordinator is already initialized")
+  const coordinator = new UserscriptClearAllCoordinator(gmValueApi, callbacks)
+  activeCoordinator = coordinator
+  const { clearPending } = coordinator.start()
+  return {
+    clearPending,
+    cleanup: () => {
+      coordinator.stop()
+      if (activeCoordinator === coordinator) activeCoordinator = null
+    },
+  }
+}
+
+const getActiveCoordinator = (): UserscriptClearAllCoordinator => {
+  if (!activeCoordinator) throw new Error("Userscript clear coordinator is not initialized")
+  return activeCoordinator
+}
+
+export const prepareUserscriptClearAll = (): Promise<void> =>
+  getActiveCoordinator().prepareRemoteRuntimes()
+
+export const completeUserscriptClearAll = (): void => getActiveCoordinator().complete()
+
+export const abortUserscriptClearAll = (): void => getActiveCoordinator().abort()
diff --git a/src/platform/userscript/entry.tsx b/src/platform/userscript/entry.tsx
index 1cf4a7be6..7ff695299 100644
--- a/src/platform/userscript/entry.tsx
+++ b/src/platform/userscript/entry.tsx
@@ -7,8 +7,18 @@ import { getInitialUserscriptLanguage, primeUserscriptLocales, subscribeI18nChan
 import { injectScrollLock } from "./scroll-lock-inject"
 import { injectYuanbaoMonacoWrap } from "./yuanbao-monaco-wrap-inject"
 import { applyOphelPlatformFontClass } from "~utils/font"
+import { dispatchClearAllDataEvent } from "~utils/clear-all-event"
+import { drainCleanupStack } from "~utils/cleanup-stack"
+import { suspendPersistenceWrites } from "~stores/chrome-adapter"
+import { EVENT_CLEAR_ALL_DATA } from "~utils/messaging"
+
+import {
+  initUserscriptClearAllCoordinator,
+  isUserscriptClearRuntimeKey,
+} from "./clear-all-coordinator"
 
 const USERSCRIPT_OBJECT_URLS = new Set<string>()
+let activeUserscriptRuntimeCleanup: (() => void) | null = null
 
 type ChromeStorageAreaPolyfill = {
   get: (keys: string | string[] | null, callback: (items: Record<string, unknown>) => void) => void
@@ -197,23 +207,11 @@ primeUserscriptLocales(getInitialUserscriptLanguage())
 declare function GM_getValue<T>(key: string, defaultValue?: T): T
 declare function GM_setValue(key: string, value: unknown): void
 declare function GM_deleteValue(key: string): void
+declare function GM_listValues(): string[]
 
 if (typeof chrome === "undefined" || !chrome.storage) {
-  // 创建 chrome.storage.local polyfill
-  // 定义所有已知的 storage keys（用于 get(null) 时获取全部数据）
-  const KNOWN_STORAGE_KEYS = [
-    "settings",
-    "prompts",
-    "promptChains",
-    "folders",
-    "tags",
-    "readingHistory",
-    "claudeSessionKeys",
-    "conversations",
-    "ophel:releaseNotesState",
-    "ophel:clearAllFlag",
-    "ophel:restoreFlag",
-  ]
+  const listDataStorageKeys = () =>
+    GM_listValues().filter((key) => !isUserscriptClearRuntimeKey(key))
 
   userscriptWindow.chrome = {
     storage: {
@@ -223,9 +221,8 @@ if (typeof chrome === "undefined" || !chrome.storage) {
           callback: (items: Record<string, unknown>) => void,
         ) => {
           if (keys === null) {
-            // 获取所有数据 - 遍历已知的 keys
             const result: Record<string, unknown> = {}
-            for (const key of KNOWN_STORAGE_KEYS) {
+            for (const key of listDataStorageKeys()) {
               const value = GM_getValue(key)
               if (value !== undefined && value !== null) {
                 result[key] = value
@@ -257,8 +254,7 @@ if (typeof chrome === "undefined" || !chrome.storage) {
           callback?.()
         },
         clear: (callback?: () => void) => {
-          // 遍历所有已知的 storage keys 并删除
-          for (const key of KNOWN_STORAGE_KEYS) {
+          for (const key of listDataStorageKeys()) {
             GM_deleteValue(key)
           }
           callback?.()
@@ -272,7 +268,7 @@ if (typeof chrome === "undefined" || !chrome.storage) {
         ) => {
           if (keys === null) {
             const result: Record<string, unknown> = {}
-            for (const key of KNOWN_STORAGE_KEYS) {
+            for (const key of listDataStorageKeys()) {
               const value = GM_getValue(key)
               if (value !== undefined && value !== null) {
                 result[key] = value
@@ -304,7 +300,7 @@ if (typeof chrome === "undefined" || !chrome.storage) {
           callback?.()
         },
         clear: (callback?: () => void) => {
-          for (const key of KNOWN_STORAGE_KEYS) {
+          for (const key of listDataStorageKeys()) {
             GM_deleteValue(key)
           }
           callback?.()
@@ -352,6 +348,33 @@ if (window.ophelUserscriptInitialized) {
 }
 window.ophelUserscriptInitialized = true
 
+const clearUserscriptRuntimeCaches = () => {
+  suspendPersistenceWrites()
+  try {
+    localStorage.removeItem("ophel_us_theme_cache")
+    localStorage.removeItem("ophel:global-search-shortcut-nudge:v1")
+  } catch (error) {
+    console.warn("[Ophel] Failed to clear userscript runtime caches:", error)
+  }
+}
+window.addEventListener(EVENT_CLEAR_ALL_DATA, clearUserscriptRuntimeCaches)
+
+const userscriptClearCoordinator = initUserscriptClearAllCoordinator({
+  prepareCurrentRuntime: async () => {
+    suspendPersistenceWrites()
+    await dispatchClearAllDataEvent()
+  },
+  reloadCurrentRuntime: () => window.location.reload(),
+})
+window.addEventListener(
+  "unload",
+  () => {
+    userscriptClearCoordinator.cleanup()
+    window.removeEventListener(EVENT_CLEAR_ALL_DATA, clearUserscriptRuntimeCaches)
+  },
+  { once: true },
+)
+
 // 注入滚动锁定 API 劫持到页面主世界
 // 等效于浏览器扩展中的 scroll-lock-main.ts (MAIN World content script)
 // 必须在 document-start 时同步执行，在页面代码加载前劫持滚动 API
@@ -368,13 +391,31 @@ injectYuanbaoMonacoWrap()
  * document-start 时 DOM 尚未就绪，需等待 document.readyState 变化
  */
 async function init() {
+  const cleanupTasks: Array<() => void> = []
+  let cleanedUp = false
+  const cleanupRuntime = () => {
+    if (cleanedUp) return
+    cleanedUp = true
+    drainCleanupStack(cleanupTasks, "userscript runtime")
+    if (activeUserscriptRuntimeCleanup === cleanupRuntime) {
+      activeUserscriptRuntimeCleanup = null
+    }
+    window.ophelUserscriptInitialized = false
+  }
+  activeUserscriptRuntimeCleanup = cleanupRuntime
+  cleanupTasks.push(cleanupUserscriptObjectUrls)
+  window.addEventListener("unload", cleanupRuntime, { once: true })
+  cleanupTasks.push(() => window.removeEventListener("unload", cleanupRuntime))
+  window.addEventListener(EVENT_CLEAR_ALL_DATA, cleanupRuntime, { once: true })
+  cleanupTasks.push(() => window.removeEventListener(EVENT_CLEAR_ALL_DATA, cleanupRuntime))
+
   const [
     { loadAdapter },
     { App },
     { OverlayPortalProvider },
-    { setAdapterRuntime },
-    { initNetworkMonitor },
-    { initGeminiTitleGuard },
+    { clearAdapterRuntime, setAdapterRuntime },
+    { destroyNetworkMonitor, initNetworkMonitor },
+    { destroyGeminiTitleGuard, initGeminiTitleGuard },
   ] = await Promise.all([
     import("~adapters"),
     import("~components/App"),
@@ -383,22 +424,32 @@ async function init() {
     import("~core/network-monitor"),
     import("~core/gemini-title-guard"),
   ])
+  if (cleanedUp) return
 
+  cleanupTasks.push(destroyNetworkMonitor)
+  cleanupTasks.push(destroyGeminiTitleGuard)
   initGeminiTitleGuard()
 
   const adapter = await loadAdapter()
+  if (cleanedUp) return
 
   if (!adapter) {
-    return
+    throw new Error(`No supported adapter for ${window.location.hostname}`)
   }
 
   setAdapterRuntime(adapter)
+  cleanupTasks.push(() => clearAdapterRuntime(adapter))
 
   // 初始化适配器
+  cleanupTasks.push(() => adapter.dispose())
   adapter.afterPropertiesSet({})
 
   let mountParentObserver: MutationObserver | null = null
   let documentRootObserver: MutationObserver | null = null
+  let mountParentWaitObserver: MutationObserver | null = null
+  let mountParentWaitResolve: (() => void) | null = null
+  let userscriptRoot: ReturnType<typeof ReactDOM.createRoot> | null = null
+  let shadowHost: HTMLElement | null = null
   const mountRetryTimers: number[] = []
 
   const cleanupMountWatchers = () => {
@@ -406,13 +457,23 @@ async function init() {
     mountParentObserver = null
     documentRootObserver?.disconnect()
     documentRootObserver = null
+    mountParentWaitObserver?.disconnect()
+    mountParentWaitObserver = null
+    const resolveMountParentWait = mountParentWaitResolve
+    mountParentWaitResolve = null
+    resolveMountParentWait?.()
     mountRetryTimers.forEach((timer) => window.clearTimeout(timer))
     mountRetryTimers.length = 0
+    userscriptRoot?.unmount()
+    userscriptRoot = null
+    shadowHost?.remove()
+    shadowHost = null
   }
+  cleanupTasks.push(cleanupMountWatchers)
 
   const mountUserscriptApp = async () => {
     try {
-      const shadowHost = document.createElement("div")
+      shadowHost = document.createElement("div")
       shadowHost.id = "ophel-userscript-root"
       applyOphelPlatformFontClass(shadowHost)
       shadowHost.style.cssText =
@@ -423,13 +484,19 @@ async function init() {
       const waitForMountParent = async () => {
         if (getMountParent()) return
         await new Promise<void>((resolve) => {
-          const observer = new MutationObserver(() => {
+          mountParentWaitResolve = resolve
+          mountParentWaitObserver = new MutationObserver(() => {
             if (getMountParent()) {
-              observer.disconnect()
+              mountParentWaitObserver?.disconnect()
+              mountParentWaitObserver = null
+              mountParentWaitResolve = null
               resolve()
             }
           })
-          observer.observe(document.documentElement, { childList: true, subtree: false })
+          mountParentWaitObserver.observe(document.documentElement, {
+            childList: true,
+            subtree: false,
+          })
         })
       }
 
@@ -453,6 +520,7 @@ async function init() {
       }
 
       await waitForMountParent()
+      if (cleanedUp) return
       doMount()
       ;[250, 600, 1200, 2000, 3500, 5000].forEach((delay) => {
         mountRetryTimers.push(window.setTimeout(doMount, delay))
@@ -503,8 +571,8 @@ async function init() {
         )
       }
 
-      const root = ReactDOM.createRoot(container)
-      root.render(React.createElement(UserscriptAppRoot))
+      userscriptRoot = ReactDOM.createRoot(container)
+      userscriptRoot.render(React.createElement(UserscriptAppRoot))
     } catch (error) {
       cleanupMountWatchers()
       throw error
@@ -512,6 +580,7 @@ async function init() {
   }
 
   await mountUserscriptApp()
+  if (cleanedUp) return
 
   // 等待 Zustand hydration 完成后初始化核心模块
   const { useSettingsStore, getSettingsState } = await import("~stores/settings-store")
@@ -526,7 +595,6 @@ async function init() {
   const waitForHydration = (store: {
     getState: () => { _hasHydrated: boolean }
     subscribe: (fn: (state: { _hasHydrated: boolean }) => void) => () => void
-    setState: (partial: Partial<{ _hasHydrated: boolean }>) => void
   }) => {
     if (store.getState()._hasHydrated) {
       return Promise.resolve(true)
@@ -551,9 +619,6 @@ async function init() {
 
       timeoutId = window.setTimeout(() => {
         unsub()
-        // 首次空存储时，persist 可能不会自然结束 hydration。
-        // userscript 环境下这里直接兜底结束 loading，允许默认配置先渲染出来。
-        store.setState({ _hasHydrated: true })
         finish(false)
       }, 5000)
     })
@@ -561,51 +626,70 @@ async function init() {
     return hydrationPromise
   }
 
-  await Promise.all([
-    waitForHydration(useSettingsStore),
-    waitForHydration(useConversationsStore),
-    waitForHydration(useFoldersStore),
-    waitForHydration(useTagsStore),
-    waitForHydration(usePromptsStore),
-    waitForHydration(useClaudeSessionKeysStore),
-    waitForHydration(useReadingHistoryStore),
-  ])
+  const hydrationStores = [
+    ["settings", useSettingsStore],
+    ["conversations", useConversationsStore],
+    ["folders", useFoldersStore],
+    ["tags", useTagsStore],
+    ["prompts", usePromptsStore],
+    ["claudeSessionKeys", useClaudeSessionKeysStore],
+    ["readingHistory", useReadingHistoryStore],
+  ] as const
+  const hydrationResults = await Promise.all(
+    hydrationStores.map(([, store]) => waitForHydration(store)),
+  )
+  if (cleanedUp) return
+  const timedOutStores = hydrationStores
+    .filter((_, index) => !hydrationResults[index])
+    .map(([name]) => name)
+  if (timedOutStores.length > 0) {
+    throw new Error(`Store hydration timed out: ${timedOutStores.join(", ")}`)
+  }
 
   // 获取用户设置
   const settings = getSettingsState()
   const siteId = adapter.getSiteId()
 
   // ========== 初始化所有核心模块（使用共享模块） ==========
-  const { initCoreModules, subscribeModuleUpdates, initUrlChangeObserver } = await import(
-    "~core/modules-init"
-  )
+  const { destroyCoreModules, initCoreModules, subscribeModuleUpdates, initUrlChangeObserver } =
+    await import("~core/modules-init")
+  cleanupTasks.push(destroyCoreModules)
 
   const ctx = { adapter, settings, siteId }
 
   await initCoreModules(ctx)
+  if (cleanedUp) return
 
   // 初始化 NetworkMonitor 消息监听器（必须显式调用以避免 tree-shaking）
   initNetworkMonitor()
 
   // 订阅设置变化
   const unsubscribeModuleUpdates = subscribeModuleUpdates(ctx)
-  window.addEventListener("unload", unsubscribeModuleUpdates, { once: true })
+  cleanupTasks.push(unsubscribeModuleUpdates)
 
   // 初始化 URL 变化监听 (SPA 导航)
   const cleanupUrlChangeObserver = initUrlChangeObserver(ctx)
-  window.addEventListener("unload", cleanupUrlChangeObserver, { once: true })
+  cleanupTasks.push(cleanupUrlChangeObserver)
+}
 
-  window.addEventListener("unload", cleanupMountWatchers)
-  window.addEventListener("unload", cleanupUserscriptObjectUrls)
+function runInit() {
+  void init().catch(async (error) => {
+    activeUserscriptRuntimeCleanup?.()
+    const { destroyCoreModules } = await import("~core/modules-init")
+    destroyCoreModules()
+    window.ophelUserscriptInitialized = false
+    console.error("[Ophel] Userscript initialization failed:", error)
+  })
 }
 
 // 启动：document-start 时 DOM 未就绪，需等待
 // injectScrollLock() 已在上方同步执行，后续初始化延迟到 DOM 就绪
 function startWhenReady() {
+  if (userscriptClearCoordinator.clearPending) return
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () => void init(), { once: true })
+    document.addEventListener("DOMContentLoaded", runInit, { once: true })
   } else {
-    void init()
+    runInit()
   }
 }
 startWhenReady()
diff --git a/src/platform/userscript/index.ts b/src/platform/userscript/index.ts
index 283dce404..ef565d2fd 100644
--- a/src/platform/userscript/index.ts
+++ b/src/platform/userscript/index.ts
@@ -7,6 +7,12 @@
 import { t } from "~utils/i18n"
 import type { ClaudeSessionKey, ClaudeSessionKeysState } from "~utils/storage"
 
+import {
+  abortUserscriptClearAll,
+  completeUserscriptClearAll,
+  prepareUserscriptClearAll,
+} from "./clear-all-coordinator"
+
 import type {
   FetchOptions,
   FetchResponse,
@@ -15,6 +21,7 @@ import type {
   PlatformCapability,
   PlatformStorage,
 } from "../types"
+import { runTrackedPersistenceWrite } from "~stores/chrome-adapter"
 
 declare global {
   interface Window {
@@ -98,6 +105,18 @@ export const platform: Platform = {
 
   storage: userscriptStorage,
 
+  async prepareClearAllData(): Promise<void> {
+    await prepareUserscriptClearAll()
+  },
+
+  async completeClearAllData(): Promise<void> {
+    completeUserscriptClearAll()
+  },
+
+  async abortClearAllData(): Promise<void> {
+    abortUserscriptClearAll()
+  },
+
   async fetch(url: string, options?: FetchOptions): Promise<FetchResponse> {
     return new Promise((resolve, reject) => {
       GM_xmlhttpRequest({
@@ -334,7 +353,9 @@ export const platform: Platform = {
       // 5. 更新存储中的当前 Key ID
       if (storageData?.state) {
         storageData.state.currentKeyId = nextKey.id
-        GM_setValue("claudeSessionKeys", storageData)
+        await runTrackedPersistenceWrite(async () => {
+          GM_setValue("claudeSessionKeys", storageData)
+        })
       }
 
       // 6. 跳转到首页
diff --git a/src/release-notes/storage.ts b/src/release-notes/storage.ts
index c311d3104..afe01d7b3 100644
--- a/src/release-notes/storage.ts
+++ b/src/release-notes/storage.ts
@@ -1,4 +1,5 @@
 import { platform } from "~platform"
+import { runTrackedPersistenceWrite } from "~stores/chrome-adapter"
 
 export interface ReleaseNotesState {
   lastSeenVersion?: string
@@ -19,7 +20,9 @@ export const getReleaseNotesState = async (): Promise<ReleaseNotesState> => {
 }
 
 export const markReleaseNotesSeen = async (version: string): Promise<void> => {
-  await platform.storage.set<ReleaseNotesState>(RELEASE_NOTES_STATE_KEY, {
-    lastSeenVersion: version,
-  })
+  await runTrackedPersistenceWrite(() =>
+    platform.storage.set<ReleaseNotesState>(RELEASE_NOTES_STATE_KEY, {
+      lastSeenVersion: version,
+    }),
+  )
 }
diff --git a/src/stores/chrome-adapter.ts b/src/stores/chrome-adapter.ts
index 1deecd180..a3b017c56 100644
--- a/src/stores/chrome-adapter.ts
+++ b/src/stores/chrome-adapter.ts
@@ -8,6 +8,8 @@
 
 import type { StateStorage } from "zustand/middleware"
 
+import { CLEAR_ALL_GENERATION_KEY, CLEAR_ALL_PREPARE_KEY } from "~utils/storage"
+
 // 构建时注入的平台标识
 declare const __PLATFORM__: "extension" | "userscript"
 
@@ -16,6 +18,91 @@ declare function GM_getValue<T>(key: string, defaultValue?: T): T
 declare function GM_setValue(key: string, value: unknown): void
 declare function GM_deleteValue(key: string): void
 
+export class PersistenceEpochGuard {
+  private warned = false
+
+  constructor(
+    private readonly readGeneration: () => unknown,
+    private readonly readPrepareSignal: () => unknown,
+    private readonly initialGeneration = readGeneration(),
+  ) {}
+
+  shouldSuspend(): boolean {
+    const prepareSignal = this.readPrepareSignal()
+    return (
+      (prepareSignal !== undefined && prepareSignal !== null) ||
+      !Object.is(this.readGeneration(), this.initialGeneration)
+    )
+  }
+
+  warnOnce(): void {
+    if (this.warned) return
+    this.warned = true
+    console.warn("[Ophel] Persistence writes suspended by a clear-all transaction")
+  }
+}
+
+export class PersistenceWriteBarrier {
+  private suspended = false
+  private pendingWrites = new Set<Promise<unknown>>()
+
+  suspend(): void {
+    this.suspended = true
+  }
+
+  resume(): void {
+    this.suspended = false
+  }
+
+  isSuspended(): boolean {
+    return this.suspended
+  }
+
+  track(write: unknown): unknown {
+    if (
+      typeof write !== "object" ||
+      write === null ||
+      !("then" in write) ||
+      typeof write.then !== "function"
+    ) {
+      return write
+    }
+
+    const pendingWrite = Promise.resolve(write)
+    this.pendingWrites.add(pendingWrite)
+    const release = () => this.pendingWrites.delete(pendingWrite)
+    void pendingWrite.then(release, release)
+    return pendingWrite
+  }
+
+  async drain(): Promise<void> {
+    const results = await Promise.allSettled([...this.pendingWrites])
+    const failures = results.flatMap((result) =>
+      result.status === "rejected" ? [result.reason] : [],
+    )
+    if (failures.length > 0) {
+      throw new AggregateError(failures, "Pending persistence writes failed")
+    }
+  }
+}
+
+export function guardPersistenceWrites(
+  storage: StateStorage,
+  barrier: PersistenceWriteBarrier,
+): StateStorage {
+  return {
+    getItem: (name) => storage.getItem(name),
+    setItem: (name, value) => {
+      if (barrier.isSuspended()) return
+      return barrier.track(storage.setItem(name, value))
+    },
+    removeItem: (name) => {
+      if (barrier.isSuspended()) return
+      return barrier.track(storage.removeItem(name))
+    },
+  }
+}
+
 const tryParseJSON = (value: string): unknown => {
   try {
     return JSON.parse(value)
@@ -59,6 +146,14 @@ const normalizeUserscriptPersistValue = (name: string, value: unknown): string |
   return typeof value === "string" ? value : JSON.stringify(value)
 }
 
+const isUserscriptBuild = typeof __PLATFORM__ !== "undefined" && __PLATFORM__ === "userscript"
+const userscriptPersistenceEpoch = isUserscriptBuild
+  ? new PersistenceEpochGuard(
+      () => GM_getValue(CLEAR_ALL_GENERATION_KEY),
+      () => GM_getValue(CLEAR_ALL_PREPARE_KEY),
+    )
+  : null
+
 /**
  * 油猴脚本存储适配器
  *
@@ -80,10 +175,18 @@ const userscriptStorageAdapter: StateStorage = {
   },
 
   setItem: (name: string, value: string): void => {
+    if (userscriptPersistenceEpoch?.shouldSuspend()) {
+      userscriptPersistenceEpoch.warnOnce()
+      return
+    }
     GM_setValue(name, value)
   },
 
   removeItem: (name: string): void => {
+    if (userscriptPersistenceEpoch?.shouldSuspend()) {
+      userscriptPersistenceEpoch.warnOnce()
+      return
+    }
     GM_deleteValue(name)
   },
 }
@@ -95,8 +198,12 @@ const userscriptStorageAdapter: StateStorage = {
  */
 const extensionStorageAdapter: StateStorage = {
   getItem: async (name: string): Promise<string | null> => {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       chrome.storage.local.get(name, (result) => {
+        if (chrome.runtime.lastError) {
+          reject(new Error(chrome.runtime.lastError.message || `Failed to read ${name}`))
+          return
+        }
         const value = result[name]
         if (value === undefined) {
           resolve(null)
@@ -115,17 +222,25 @@ const extensionStorageAdapter: StateStorage = {
   },
 
   setItem: async (name: string, value: string): Promise<void> => {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       // 存储 JSON 字符串
       chrome.storage.local.set({ [name]: value }, () => {
+        if (chrome.runtime.lastError) {
+          reject(new Error(chrome.runtime.lastError.message || `Failed to write ${name}`))
+          return
+        }
         resolve()
       })
     })
   },
 
   removeItem: async (name: string): Promise<void> => {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       chrome.storage.local.remove(name, () => {
+        if (chrome.runtime.lastError) {
+          reject(new Error(chrome.runtime.lastError.message || `Failed to remove ${name}`))
+          return
+        }
         resolve()
       })
     })
@@ -136,7 +251,23 @@ const extensionStorageAdapter: StateStorage = {
  * 导出的跨平台存储适配器
  * 根据 __PLATFORM__ 在编译时选择正确的实现
  */
-export const chromeStorageAdapter: StateStorage =
-  typeof __PLATFORM__ !== "undefined" && __PLATFORM__ === "userscript"
-    ? userscriptStorageAdapter
-    : extensionStorageAdapter
+const persistenceWriteBarrier = new PersistenceWriteBarrier()
+const platformStorageAdapter = isUserscriptBuild
+  ? userscriptStorageAdapter
+  : extensionStorageAdapter
+
+export const suspendPersistenceWrites = (): void => persistenceWriteBarrier.suspend()
+export const drainPersistenceWrites = (): Promise<void> => persistenceWriteBarrier.drain()
+
+export async function runTrackedPersistenceWrite(write: () => Promise<void>): Promise<void> {
+  if (persistenceWriteBarrier.isSuspended() || userscriptPersistenceEpoch?.shouldSuspend()) {
+    userscriptPersistenceEpoch?.warnOnce()
+    throw new Error("Persistence writes are suspended by a clear-all transaction")
+  }
+  await Promise.resolve(persistenceWriteBarrier.track(write()))
+}
+
+export const chromeStorageAdapter: StateStorage = guardPersistenceWrites(
+  platformStorageAdapter,
+  persistenceWriteBarrier,
+)
diff --git a/src/tabs/options/pages/BackupPage.tsx b/src/tabs/options/pages/BackupPage.tsx
index ec958a866..db270459b 100644
--- a/src/tabs/options/pages/BackupPage.tsx
+++ b/src/tabs/options/pages/BackupPage.tsx
@@ -15,13 +15,7 @@ import {
   InfoIcon,
 } from "~components/icons"
 import { ConfirmDialog, Tooltip } from "~components/ui"
-import {
-  DEFAULT_FOLDERS,
-  MULTI_PROP_STORES,
-  ZUSTAND_KEYS,
-  getDefaultPromptChains,
-  getDefaultPrompts,
-} from "~constants/defaults"
+import { MULTI_PROP_STORES, ZUSTAND_KEYS } from "~constants/defaults"
 import {
   WEBDAV_PROVIDER_PRESETS,
   detectProviderFromUrl,
@@ -31,22 +25,29 @@ import {
   type WebDAVProvider,
 } from "~core/webdav-sync"
 import { platform } from "~platform"
-import { useConversationsStore } from "~stores/conversations-store"
-import { useFoldersStore } from "~stores/folders-store"
-import { usePromptChainsStore } from "~stores/prompt-chains-store"
-import { usePromptsStore } from "~stores/prompts-store"
-import { useReadingHistoryStore } from "~stores/reading-history-store"
 import { useSettingsStore } from "~stores/settings-store"
-import { useTagsStore } from "~stores/tags-store"
+import {
+  drainPersistenceWrites,
+  runTrackedPersistenceWrite,
+  suspendPersistenceWrites,
+} from "~stores/chrome-adapter"
 import { validateBackupData } from "~utils/backup-validator"
+import { dispatchClearAllDataEvent } from "~utils/clear-all-event"
+import { runClearAllTransaction } from "~utils/clear-all-transaction"
+import {
+  clearStorageAreas,
+  restoreStorageAreas,
+  snapshotStorageAreas,
+  type StorageAreaSnapshots,
+} from "~utils/storage-area-transaction"
 import { t } from "~utils/i18n"
+import { MSG_CHECK_PERMISSION, MSG_REQUEST_PERMISSIONS, MSG_RESTORE_DATA } from "~utils/messaging"
 import {
-  MSG_CHECK_PERMISSION,
-  MSG_CLEAR_ALL_DATA,
-  MSG_REQUEST_PERMISSIONS,
-  MSG_RESTORE_DATA,
-} from "~utils/messaging"
-import { CLEAR_ALL_FLAG_KEY, DEFAULT_SETTINGS, RESTORE_FLAG_KEY } from "~utils/storage"
+  CLEAR_ALL_FLAG_KEY,
+  CLEAR_ALL_GENERATION_KEY,
+  DEFAULT_SETTINGS,
+  RESTORE_FLAG_KEY,
+} from "~utils/storage"
 import { showToast as showDomToast } from "~utils/toast"
 
 import { PageTitle, SettingCard, SettingRow } from "../components"
@@ -140,7 +141,9 @@ const RemoteBackupModal: React.FC<{
           if (result.success) {
             try {
               if (platform.type === "extension" && typeof chrome !== "undefined") {
-                await platform.storage.set(RESTORE_FLAG_KEY, Date.now())
+                await runTrackedPersistenceWrite(() =>
+                  platform.storage.set(RESTORE_FLAG_KEY, Date.now()),
+                )
                 await chrome.runtime.sendMessage({ type: MSG_RESTORE_DATA })
               }
             } catch {
@@ -380,7 +383,7 @@ const RemoteBackupModal: React.FC<{
 
 // ==================== 主页面组件 ====================
 const BackupPage: React.FC<BackupPageProps> = ({ onNavigate: _onNavigate }) => {
-  const { settings, setSettings, resetSettings } = useSettingsStore()
+  const { settings, setSettings } = useSettingsStore()
 
   // 状态管理
   const [showRemoteBackups, setShowRemoteBackups] = useState(false)
@@ -439,17 +442,20 @@ const BackupPage: React.FC<BackupPageProps> = ({ onNavigate: _onNavigate }) => {
   if (!settings) return null
 
   const writeStorageUpdates = async (updates: Record<string, unknown>) => {
-    await new Promise<void>((resolve, reject) =>
-      chrome.storage.local.set(updates, () =>
-        chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve(),
-      ),
+    await runTrackedPersistenceWrite(
+      () =>
+        new Promise<void>((resolve, reject) =>
+          chrome.storage.local.set(updates, () =>
+            chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve(),
+          ),
+        ),
     )
   }
 
   const notifyPagesToReload = async () => {
     try {
       if (platform.type === "extension" && typeof chrome !== "undefined") {
-        await platform.storage.set(RESTORE_FLAG_KEY, Date.now())
+        await runTrackedPersistenceWrite(() => platform.storage.set(RESTORE_FLAG_KEY, Date.now()))
         await chrome.runtime.sendMessage({ type: MSG_RESTORE_DATA })
       }
     } catch {
@@ -744,16 +750,6 @@ const BackupPage: React.FC<BackupPageProps> = ({ onNavigate: _onNavigate }) => {
     processImport(pasteContent)
   }
 
-  const resetLocalStores = () => {
-    resetSettings()
-    usePromptsStore.getState().setPrompts(getDefaultPrompts())
-    usePromptChainsStore.getState().setChains(getDefaultPromptChains())
-    useFoldersStore.setState({ folders: DEFAULT_FOLDERS })
-    useTagsStore.setState({ tags: [] })
-    useConversationsStore.setState({ conversations: {}, lastUsedFolderId: "inbox" })
-    useReadingHistoryStore.setState({ history: {}, lastCleanupRun: 0 })
-  }
-
   // 清除数据
   const handleClearAll = () => {
     setConfirmConfig({
@@ -763,33 +759,57 @@ const BackupPage: React.FC<BackupPageProps> = ({ onNavigate: _onNavigate }) => {
       danger: true,
       onConfirm: async () => {
         setConfirmConfig((prev) => ({ ...prev, show: false }))
+        let storageSnapshots: StorageAreaSnapshots | null = null
         try {
-          if (platform.type === "extension" && typeof chrome !== "undefined") {
+          await runClearAllTransaction({
+            prepare: async () => {
+              suspendPersistenceWrites()
+              await Promise.all([drainPersistenceWrites(), dispatchClearAllDataEvent()])
+              await platform.prepareClearAllData()
+
+              storageSnapshots = await snapshotStorageAreas(
+                chrome.storage.local,
+                chrome.storage.sync,
+              )
+            },
+            clear: () => clearStorageAreas(chrome.storage.local, chrome.storage.sync),
+            commit: async () => {
+              if (platform.type === "userscript") {
+                await platform.storage.set(CLEAR_ALL_GENERATION_KEY, crypto.randomUUID())
+              }
+              await platform.storage.set(CLEAR_ALL_FLAG_KEY, Date.now())
+            },
+            abort: async () => {
+              try {
+                if (storageSnapshots) {
+                  await restoreStorageAreas(
+                    chrome.storage.local,
+                    chrome.storage.sync,
+                    storageSnapshots,
+                  )
+                }
+              } finally {
+                await platform.abortClearAllData()
+              }
+            },
+          })
+
+          try {
+            await platform.completeClearAllData()
+          } catch (error) {
             try {
-              await chrome.runtime.sendMessage({ type: MSG_CLEAR_ALL_DATA })
-            } catch {
-              // 忽略消息发送失败
+              await platform.abortClearAllData()
+            } catch (abortError) {
+              console.error("[Ophel] Failed to abort clear-all after finalize failure:", abortError)
             }
+            throw error
           }
 
-          await Promise.all([
-            new Promise<void>((resolve, reject) =>
-              chrome.storage.local.clear(() =>
-                chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve(),
-              ),
-            ),
-            new Promise<void>((resolve, reject) =>
-              chrome.storage.sync.clear(() =>
-                chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve(),
-              ),
-            ),
-          ])
-          await platform.storage.set(CLEAR_ALL_FLAG_KEY, Date.now())
-          resetLocalStores()
           showDomToast(t("clearSuccess"))
           setTimeout(() => window.location.reload(), 1500)
         } catch (err) {
           showDomToast(t("error") + ": " + String(err))
+          setTimeout(() => window.location.reload(), 1500)
         }
       },
     })
diff --git a/src/types/plasmo-content-script.ts b/src/types/plasmo-content-script.ts
new file mode 100644
index 000000000..210bc4b8f
--- /dev/null
+++ b/src/types/plasmo-content-script.ts
@@ -0,0 +1,6 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+export type MainWorldCSConfig = PlasmoCSConfig & {
+  world: "MAIN"
+  persist_across_sessions: false
+}
diff --git a/src/utils/cleanup-stack.ts b/src/utils/cleanup-stack.ts
new file mode 100644
index 000000000..21afef05e
--- /dev/null
+++ b/src/utils/cleanup-stack.ts
@@ -0,0 +1,12 @@
+export function drainCleanupStack(tasks: Array<() => void>, context: string): void {
+  while (tasks.length > 0) {
+    const cleanup = tasks.pop()
+    if (!cleanup) continue
+
+    try {
+      cleanup()
+    } catch (error) {
+      console.error(`[Ophel] ${context} cleanup failed:`, error)
+    }
+  }
+}
diff --git a/src/utils/clear-all-event.ts b/src/utils/clear-all-event.ts
new file mode 100644
index 000000000..63d953c6b
--- /dev/null
+++ b/src/utils/clear-all-event.ts
@@ -0,0 +1,47 @@
+import { EVENT_CLEAR_ALL_DATA } from "~utils/messaging"
+
+interface ClearAllDataEventDetail {
+  waitUntil: (task: Promise<unknown>) => void
+}
+
+const getEventDetail = (event: Event): ClearAllDataEventDetail | null => {
+  const detail = (event as CustomEvent<unknown>).detail
+  if (
+    typeof detail !== "object" ||
+    detail === null ||
+    !("waitUntil" in detail) ||
+    typeof detail.waitUntil !== "function"
+  ) {
+    return null
+  }
+  return detail as ClearAllDataEventDetail
+}
+
+export function registerClearAllDataTask(event: Event, task: Promise<unknown>): void {
+  const detail = getEventDetail(event)
+  if (detail) {
+    detail.waitUntil(task)
+    return
+  }
+
+  void task.catch((error) => {
+    console.error("[Ophel] Untracked clear-all task failed:", error)
+  })
+}
+
+export async function dispatchClearAllDataEvent(): Promise<void> {
+  const tasks: Promise<unknown>[] = []
+  const detail: ClearAllDataEventDetail = {
+    waitUntil: (task) => tasks.push(Promise.resolve(task)),
+  }
+
+  window.dispatchEvent(new CustomEvent(EVENT_CLEAR_ALL_DATA, { detail }))
+
+  const results = await Promise.allSettled(tasks)
+  const failures = results.flatMap((result) =>
+    result.status === "rejected" ? [result.reason] : [],
+  )
+  if (failures.length > 0) {
+    throw new AggregateError(failures, "Clear-all runtime preparation failed")
+  }
+}
diff --git a/src/utils/clear-all-transaction.ts b/src/utils/clear-all-transaction.ts
new file mode 100644
index 000000000..a265eac72
--- /dev/null
+++ b/src/utils/clear-all-transaction.ts
@@ -0,0 +1,30 @@
+export interface ClearAllTransactionSteps {
+  prepare: () => void | Promise<void>
+  clear: () => void | Promise<void>
+  commit: () => void | Promise<void>
+  abort: () => void | Promise<void>
+}
+
+/**
+ * Stops writers before clearing storage and resumes them if any transaction step fails.
+ */
+export async function runClearAllTransaction({
+  prepare,
+  clear,
+  commit,
+  abort,
+}: ClearAllTransactionSteps): Promise<void> {
+  try {
+    await prepare()
+    await clear()
+    await commit()
+  } catch (error) {
+    try {
+      await abort()
+    } catch (abortError) {
+      console.error("[Ophel] Failed to resume runtimes after clear-all failure:", abortError)
+    }
+
+    throw error
+  }
+}
diff --git a/src/utils/messaging.ts b/src/utils/messaging.ts
index 4ff472b89..b11e6fe6e 100644
--- a/src/utils/messaging.ts
+++ b/src/utils/messaging.ts
@@ -121,6 +121,26 @@ export interface BasicBackgroundResponse {
   error?: string
 }
 
+export function requireSuccessfulMessageAcknowledgement(response: unknown): void {
+  if (
+    typeof response === "object" &&
+    response !== null &&
+    "success" in response &&
+    response.success === true
+  ) {
+    return
+  }
+
+  const error =
+    typeof response === "object" &&
+    response !== null &&
+    "error" in response &&
+    typeof response.error === "string"
+      ? response.error
+      : "Content script did not acknowledge the message"
+  throw new Error(error)
+}
+
 // 撤销权限
 export const MSG_REVOKE_PERMISSIONS = "REVOKE_PERMISSIONS"
 
@@ -164,9 +184,23 @@ export interface ExtensionUpdateAvailableMessage extends ExtensionUpdateAvailabl
 
 // 清除全部数据（通知各上下文重置内存态）
 export const MSG_CLEAR_ALL_DATA = "CLEAR_ALL_DATA"
+export const MSG_COMPLETE_CLEAR_ALL_DATA = "COMPLETE_CLEAR_ALL_DATA"
+export const MSG_ABORT_CLEAR_ALL_DATA = "ABORT_CLEAR_ALL_DATA"
+export const EVENT_CLEAR_ALL_DATA = "ophel:clear-all-data"
 
 export interface ClearAllDataMessage {
   type: typeof MSG_CLEAR_ALL_DATA
+  transactionId?: string
+}
+
+export interface CompleteClearAllDataMessage {
+  type: typeof MSG_COMPLETE_CLEAR_ALL_DATA
+  transactionId: string
+}
+
+export interface AbortClearAllDataMessage {
+  type: typeof MSG_ABORT_CLEAR_ALL_DATA
+  transactionId: string
 }
 
 // 恢复备份数据（通知各上下文重载页面以加载最新数据）
@@ -232,6 +266,8 @@ export type ExtensionMessage =
   | OpenUrlMessage
   | ExtensionUpdateAvailableMessage
   | ClearAllDataMessage
+  | CompleteClearAllDataMessage
+  | AbortClearAllDataMessage
   | RestoreDataMessage
   | SetClaudeSessionKeyMessage
   | TestClaudeTokenMessage
@@ -260,6 +296,28 @@ export interface StartNewConversationMessage {
   type: typeof MSG_START_NEW_CONVERSATION
 }
 
+// Background -> Content Script: 查询当前页面生成状态
+export const MSG_CHECK_IS_GENERATING = "CHECK_IS_GENERATING"
+
+export interface CheckIsGeneratingMessage {
+  type: typeof MSG_CHECK_IS_GENERATING
+}
+
+// Background -> AI Studio Content Script: 获取当前可选模型
+export const MSG_GET_MODEL_LIST = "GET_MODEL_LIST"
+
+export interface GetModelListMessage {
+  type: typeof MSG_GET_MODEL_LIST
+}
+
+export type ContentScriptMessage =
+  | ClearAllDataMessage
+  | RestoreDataMessage
+  | ExtensionUpdateAvailableMessage
+  | StartNewConversationMessage
+  | CheckIsGeneratingMessage
+  | GetModelListMessage
+
 export interface AIStudioModelInfo {
   id: string
   name: string
diff --git a/src/utils/storage-area-transaction.ts b/src/utils/storage-area-transaction.ts
new file mode 100644
index 000000000..e2f943903
--- /dev/null
+++ b/src/utils/storage-area-transaction.ts
@@ -0,0 +1,117 @@
+export interface StorageAreaSnapshots {
+  local: Record<string, unknown>
+  sync: Record<string, unknown>
+}
+
+type LastErrorProvider = () => { message?: string } | undefined
+
+const getChromeLastError: LastErrorProvider = () => chrome.runtime.lastError
+
+const toStorageError = (error: { message?: string } | undefined): Error | null =>
+  error ? new Error(error.message || "Unknown storage error") : null
+
+function readStorageArea(
+  area: chrome.storage.StorageArea,
+  getLastError: LastErrorProvider,
+): Promise<Record<string, unknown>> {
+  return new Promise((resolve, reject) => {
+    area.get(null, (items) => {
+      const error = toStorageError(getLastError())
+      if (error) {
+        reject(error)
+        return
+      }
+      resolve(items)
+    })
+  })
+}
+
+function clearStorageArea(
+  area: chrome.storage.StorageArea,
+  getLastError: LastErrorProvider,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    area.clear(() => {
+      const error = toStorageError(getLastError())
+      if (error) {
+        reject(error)
+        return
+      }
+      resolve()
+    })
+  })
+}
+
+function writeStorageArea(
+  area: chrome.storage.StorageArea,
+  values: Record<string, unknown>,
+  getLastError: LastErrorProvider,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    area.set(values, () => {
+      const error = toStorageError(getLastError())
+      if (error) {
+        reject(error)
+        return
+      }
+      resolve()
+    })
+  })
+}
+
+function throwStorageFailures(operation: string, results: PromiseSettledResult<unknown>[]): void {
+  const failures = results.flatMap((result, index) =>
+    result.status === "rejected"
+      ? [`${index === 0 ? "local" : "sync"}: ${String(result.reason)}`]
+      : [],
+  )
+  if (failures.length > 0) {
+    throw new Error(`${operation} failed (${failures.join("; ")})`)
+  }
+}
+
+export async function snapshotStorageAreas(
+  local: chrome.storage.StorageArea,
+  sync: chrome.storage.StorageArea,
+  getLastError: LastErrorProvider = getChromeLastError,
+): Promise<StorageAreaSnapshots> {
+  const results = await Promise.allSettled([
+    readStorageArea(local, getLastError),
+    readStorageArea(sync, getLastError),
+  ])
+  throwStorageFailures("Storage snapshot", results)
+
+  return {
+    local: results[0].status === "fulfilled" ? results[0].value : {},
+    sync: results[1].status === "fulfilled" ? results[1].value : {},
+  }
+}
+
+export async function clearStorageAreas(
+  local: chrome.storage.StorageArea,
+  sync: chrome.storage.StorageArea,
+  getLastError: LastErrorProvider = getChromeLastError,
+): Promise<void> {
+  const results = await Promise.allSettled([
+    clearStorageArea(local, getLastError),
+    clearStorageArea(sync, getLastError),
+  ])
+  throwStorageFailures("Storage clear", results)
+}
+
+export async function restoreStorageAreas(
+  local: chrome.storage.StorageArea,
+  sync: chrome.storage.StorageArea,
+  snapshots: StorageAreaSnapshots,
+  getLastError: LastErrorProvider = getChromeLastError,
+): Promise<void> {
+  const restore = async (area: chrome.storage.StorageArea, values: Record<string, unknown>) => {
+    await clearStorageArea(area, getLastError)
+    await writeStorageArea(area, values, getLastError)
+  }
+  const results = await Promise.allSettled([
+    restore(local, snapshots.local),
+    restore(sync, snapshots.sync),
+  ])
+  throwStorageFailures("Storage rollback", results)
+}
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index 26e7ee24e..3f4582aab 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -55,7 +55,10 @@ export const STORAGE_KEYS = {
 } as const
 
 // 清除全部数据标记（用于跳过首次自动恢复/自动同步）
+export const CLEAR_ALL_PREPARE_KEY = "ophel:clearAllPrepare"
 export const CLEAR_ALL_FLAG_KEY = "ophel:clearAllFlag"
+export const CLEAR_ALL_GENERATION_KEY = "ophel:clearAllGeneration"
+export const CLEAR_ALL_RESUME_KEY = "ophel:clearAllResume"
 export const CLEAR_ALL_FLAG_TTL_MS = 5 * 1000
 export const SKIP_READING_HISTORY_RESTORE_PARAM = "ophel_skip_restore"
 
diff --git a/src/utils/usage-monitor-storage.ts b/src/utils/usage-monitor-storage.ts
index 10f04f608..343f2b5cf 100644
--- a/src/utils/usage-monitor-storage.ts
+++ b/src/utils/usage-monitor-storage.ts
@@ -1,4 +1,5 @@
 import { platform } from "~platform"
+import { runTrackedPersistenceWrite } from "~stores/chrome-adapter"
 
 export interface UsageCounterRecord {
   count: number
@@ -136,7 +137,9 @@ export async function readUsageCounterState(): Promise<UsageCounterState> {
 }
 
 export async function writeUsageCounterState(state: UsageCounterState): Promise<void> {
-  await platform.storage.set(USAGE_MONITOR_STORAGE_KEY, normalizeState(state))
+  await runTrackedPersistenceWrite(() =>
+    platform.storage.set(USAGE_MONITOR_STORAGE_KEY, normalizeState(state)),
+  )
 }
 
 export async function getUsageCounterRecord(recordKey: string): Promise<UsageCounterRecord> {
diff --git a/tests/adapters/gemini-lifecycle.test.ts b/tests/adapters/gemini-lifecycle.test.ts
new file mode 100644
index 000000000..ecf805f4b
--- /dev/null
+++ b/tests/adapters/gemini-lifecycle.test.ts
@@ -0,0 +1,32 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import { DOMToolkit } from "~utils/dom-toolkit"
+import { GeminiAdapter } from "~adapters/gemini"
+
+describe("GeminiAdapter lifecycle", () => {
+  afterEach(() => {
+    document.head.innerHTML = ""
+    document.body.innerHTML = ""
+  })
+
+  it("stops persistent adapter observers when disposed", () => {
+    const stopCallbacks = [vi.fn(), vi.fn(), vi.fn()]
+    const each = vi
+      .spyOn(DOMToolkit, "each")
+      .mockImplementationOnce(() => stopCallbacks[0])
+      .mockImplementationOnce(() => stopCallbacks[1])
+      .mockImplementationOnce(() => stopCallbacks[2])
+    const adapter = new GeminiAdapter()
+
+    adapter.afterPropertiesSet()
+    adapter.dispose()
+    adapter.dispose()
+
+    expect(each).toHaveBeenCalledTimes(3)
+    for (const stop of stopCallbacks) {
+      expect(stop).toHaveBeenCalledOnce()
+    }
+    expect(document.getElementById("ophel-gemini-mystuff-style")).toBeNull()
+    expect(document.getElementById("gh-gemini-panel-markdown-actions-style")).toBeNull()
+  })
+})
diff --git a/tests/adapters/index.test.ts b/tests/adapters/index.test.ts
new file mode 100644
index 000000000..6e67e3a9f
--- /dev/null
+++ b/tests/adapters/index.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest"
+
+import { SUPPORTED_SITES } from "~constants/supported-sites"
+import { resolveAdapterModuleKey } from "~adapters/index"
+
+describe("resolveAdapterModuleKey", () => {
+  const supportedHosts = SUPPORTED_SITES.flatMap((site) =>
+    site.matches.map((match) => [new URL(match.replace(/\*$/, "")).hostname, site.module] as const),
+  )
+
+  it.each(supportedHosts)("routes %s to %s", (hostname, moduleKey) => {
+    expect(resolveAdapterModuleKey(hostname)).toBe(moduleKey)
+  })
+
+  it.each(["example.com", "chat.openai.com", "claude.com", "qianwen.com"])(
+    "does not load an adapter for unsupported or redirect-only hostname %s",
+    (hostname) => {
+      expect(resolveAdapterModuleKey(hostname)).toBeNull()
+    },
+  )
+})
diff --git a/src/components/SelectedPromptBar.test.tsx b/tests/components/SelectedPromptBar.test.tsx
similarity index 95%
rename from src/components/SelectedPromptBar.test.tsx
rename to tests/components/SelectedPromptBar.test.tsx
index fadc17612..86a825596 100644
--- a/src/components/SelectedPromptBar.test.tsx
+++ b/tests/components/SelectedPromptBar.test.tsx
@@ -4,7 +4,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 
 import type { SiteAdapter } from "~adapters/base"
 
-import { SelectedPromptBar } from "./SelectedPromptBar"
+import { SelectedPromptBar } from "~components/SelectedPromptBar"
 
 class ResizeObserverStub {
   observe() {}
diff --git a/tests/components/app/runtime-lifecycle.test.ts b/tests/components/app/runtime-lifecycle.test.ts
new file mode 100644
index 000000000..0ff36298f
--- /dev/null
+++ b/tests/components/app/runtime-lifecycle.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it, vi } from "vitest"
+
+import { stopAppRuntimeWriters } from "~components/app/runtime-lifecycle"
+
+describe("stopAppRuntimeWriters", () => {
+  it("stops every UI writer even when one cleanup fails", async () => {
+    const failure = new Error("queue cleanup failed")
+    const queueStop = vi.fn(() => {
+      throw failure
+    })
+    const conversationDestroy = vi.fn()
+    const outlineDestroy = vi.fn()
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined)
+
+    await stopAppRuntimeWriters({
+      queueDispatcher: { stop: queueStop },
+      conversationManager: { destroy: conversationDestroy },
+      outlineManager: { destroy: outlineDestroy },
+    })
+
+    expect(queueStop).toHaveBeenCalledOnce()
+    expect(conversationDestroy).toHaveBeenCalledOnce()
+    expect(outlineDestroy).toHaveBeenCalledOnce()
+    expect(consoleError).toHaveBeenCalledWith("[Ophel] app runtime cleanup failed:", failure)
+  })
+})
diff --git a/src/components/global-search/syntax.test.ts b/tests/components/global-search/syntax.test.ts
similarity index 94%
rename from src/components/global-search/syntax.test.ts
rename to tests/components/global-search/syntax.test.ts
index a25d7a67e..2ced1f808 100644
--- a/src/components/global-search/syntax.test.ts
+++ b/tests/components/global-search/syntax.test.ts
@@ -1,6 +1,9 @@
 import { describe, expect, it } from "vitest"
 
-import { matchGlobalSearchSyntaxFilters, parseGlobalSearchQuery } from "./syntax"
+import {
+  matchGlobalSearchSyntaxFilters,
+  parseGlobalSearchQuery,
+} from "~components/global-search/syntax"
 
 describe("global search syntax", () => {
   it("parses quoted filters while preserving the plain query", () => {
diff --git a/tests/components/prompts/PromptDialogs.test.tsx b/tests/components/prompts/PromptDialogs.test.tsx
new file mode 100644
index 000000000..564617091
--- /dev/null
+++ b/tests/components/prompts/PromptDialogs.test.tsx
@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import React, { useState } from "react"
+import { describe, expect, it, vi } from "vitest"
+
+import { OverlayPortalProvider } from "~components/ui/OverlayPortal"
+import { ImportDialog } from "~components/prompts/ImportDialog"
+
+const ImportDialogHarness = ({ onClose }: { onClose: () => void }) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <OverlayPortalProvider>
+      <button type="button" onClick={() => setIsOpen(true)}>
+        Open import
+      </button>
+      <ImportDialog
+        isOpen={isOpen}
+        promptCount={2}
+        onClose={() => {
+          setIsOpen(false)
+          onClose()
+        }}
+        onMerge={() => undefined}
+        onOverwrite={() => undefined}
+      />
+    </OverlayPortalProvider>
+  )
+}
+
+describe("prompt dialogs", () => {
+  it("uses the shared dialog focus and Escape lifecycle", async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<ImportDialogHarness onClose={onClose} />)
+
+    const trigger = screen.getByRole("button", { name: "Open import" })
+    await user.click(trigger)
+
+    const dialog = await screen.findByRole("dialog")
+    expect(dialog.closest("#ophel-overlay-root")).not.toBeNull()
+    expect(screen.getByRole("button", { name: /cancel/i })).toHaveFocus()
+
+    await user.keyboard("{Escape}")
+    await waitFor(() => expect(dialog).not.toBeInTheDocument())
+    expect(onClose).toHaveBeenCalledOnce()
+    expect(trigger).toHaveFocus()
+  })
+})
diff --git a/tests/components/ui/Dialog.test.tsx b/tests/components/ui/Dialog.test.tsx
new file mode 100644
index 000000000..e3e3a8200
--- /dev/null
+++ b/tests/components/ui/Dialog.test.tsx
@@ -0,0 +1,122 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import React, { useState } from "react"
+import { describe, expect, it, vi } from "vitest"
+
+import { DialogOverlay } from "~components/ui/Dialog"
+import { OverlayPortalProvider } from "~components/ui/OverlayPortal"
+
+const DialogHarness = ({ onClose }: { onClose: () => void }) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <OverlayPortalProvider>
+      <button onClick={() => setIsOpen(true)}>Open</button>
+      {isOpen && (
+        <DialogOverlay
+          onClose={() => {
+            setIsOpen(false)
+            onClose()
+          }}>
+          <div className="gh-dialog-title">Confirm action</div>
+          <button>Cancel</button>
+          <button>Confirm</button>
+        </DialogOverlay>
+      )}
+    </OverlayPortalProvider>
+  )
+}
+
+const NestedDialogHarness = ({
+  onParentClose,
+  onChildClose,
+}: {
+  onParentClose: () => void
+  onChildClose: () => void
+}) => {
+  const [isParentOpen, setIsParentOpen] = useState(false)
+  const [isChildOpen, setIsChildOpen] = useState(false)
+
+  return (
+    <OverlayPortalProvider>
+      <button onClick={() => setIsParentOpen(true)}>Open parent</button>
+      {isParentOpen && (
+        <DialogOverlay
+          onClose={() => {
+            setIsParentOpen(false)
+            onParentClose()
+          }}>
+          <div className="gh-dialog-title">Parent dialog</div>
+          <button onClick={() => setIsChildOpen(true)}>Open child</button>
+          <button>Parent action</button>
+          {isChildOpen && (
+            <DialogOverlay
+              onClose={() => {
+                setIsChildOpen(false)
+                onChildClose()
+              }}>
+              <div className="gh-dialog-title">Child dialog</div>
+              <button>Child cancel</button>
+              <button>Child confirm</button>
+            </DialogOverlay>
+          )}
+        </DialogOverlay>
+      )}
+    </OverlayPortalProvider>
+  )
+}
+
+describe("DialogOverlay", () => {
+  it("renders in the shared overlay root, traps focus, and restores the trigger", async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<DialogHarness onClose={onClose} />)
+
+    const trigger = screen.getByRole("button", { name: "Open" })
+    await user.click(trigger)
+
+    const dialog = await screen.findByRole("dialog", { name: "Confirm action" })
+    expect(dialog.closest("#ophel-overlay-root")).not.toBeNull()
+    expect(screen.getByRole("button", { name: "Cancel" })).toHaveFocus()
+
+    await user.tab({ shift: true })
+    expect(screen.getByRole("button", { name: "Confirm" })).toHaveFocus()
+
+    await user.keyboard("{Escape}")
+    await waitFor(() => expect(dialog).not.toBeInTheDocument())
+    expect(onClose).toHaveBeenCalledOnce()
+    expect(trigger).toHaveFocus()
+  })
+
+  it("limits Escape and focus trapping to the topmost nested dialog", async () => {
+    const user = userEvent.setup()
+    const onParentClose = vi.fn()
+    const onChildClose = vi.fn()
+    render(<NestedDialogHarness onParentClose={onParentClose} onChildClose={onChildClose} />)
+
+    const parentTrigger = screen.getByRole("button", { name: "Open parent" })
+    await user.click(parentTrigger)
+    const childTrigger = await screen.findByRole("button", { name: "Open child" })
+    await user.click(childTrigger)
+
+    const childDialog = await screen.findByRole("dialog", { name: "Child dialog" })
+    expect(screen.getByRole("button", { name: "Child cancel" })).toHaveFocus()
+
+    await user.tab({ shift: true })
+    expect(screen.getByRole("button", { name: "Child confirm" })).toHaveFocus()
+    expect(childDialog).toBeInTheDocument()
+
+    await user.keyboard("{Escape}")
+    await waitFor(() => expect(childDialog).not.toBeInTheDocument())
+    expect(onChildClose).toHaveBeenCalledOnce()
+    expect(onParentClose).not.toHaveBeenCalled()
+    expect(childTrigger).toHaveFocus()
+
+    await user.keyboard("{Escape}")
+    await waitFor(() =>
+      expect(screen.queryByRole("dialog", { name: "Parent dialog" })).not.toBeInTheDocument(),
+    )
+    expect(onParentClose).toHaveBeenCalledOnce()
+    expect(parentTrigger).toHaveFocus()
+  })
+})
diff --git a/src/components/ui/OverlayPortal.test.tsx b/tests/components/ui/OverlayPortal.test.tsx
similarity index 97%
rename from src/components/ui/OverlayPortal.test.tsx
rename to tests/components/ui/OverlayPortal.test.tsx
index 09ec6a0a4..5a158e34a 100644
--- a/src/components/ui/OverlayPortal.test.tsx
+++ b/tests/components/ui/OverlayPortal.test.tsx
@@ -6,7 +6,7 @@ import {
   OverlayPortalProvider,
   resolveAmbientPortalTarget,
   useOverlayPortalTarget,
-} from "./OverlayPortal"
+} from "~components/ui/OverlayPortal"
 
 const PortalTargetProbe = () => {
   const overlayTarget = useOverlayPortalTarget()
diff --git a/src/components/ui/Switch.test.tsx b/tests/components/ui/Switch.test.tsx
similarity index 100%
rename from src/components/ui/Switch.test.tsx
rename to tests/components/ui/Switch.test.tsx
diff --git a/src/constants/settings-navigation.test.ts b/tests/constants/settings-navigation.test.ts
similarity index 85%
rename from src/constants/settings-navigation.test.ts
rename to tests/constants/settings-navigation.test.ts
index 533ea98c2..079b7ed19 100644
--- a/src/constants/settings-navigation.test.ts
+++ b/tests/constants/settings-navigation.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest"
 
-import { NAV_IDS } from "./ui"
-import { getSettingsNavigationItems } from "./settings-navigation"
+import { NAV_IDS } from "~constants/ui"
+import { getSettingsNavigationItems } from "~constants/settings-navigation"
 
 describe("settings navigation", () => {
   it("exposes the same complete navigation to both settings surfaces", () => {
diff --git a/src/constants/ui.test.ts b/tests/constants/ui.test.ts
similarity index 91%
rename from src/constants/ui.test.ts
rename to tests/constants/ui.test.ts
index dddf5eede..1525be8f2 100644
--- a/src/constants/ui.test.ts
+++ b/tests/constants/ui.test.ts
@@ -1,6 +1,11 @@
 import { describe, expect, it } from "vitest"
 
-import { APPEARANCE_TAB_IDS, FEATURES_TAB_IDS, NAV_IDS, resolveSettingsNavigateDetail } from "./ui"
+import {
+  APPEARANCE_TAB_IDS,
+  FEATURES_TAB_IDS,
+  NAV_IDS,
+  resolveSettingsNavigateDetail,
+} from "~constants/ui"
 
 describe("settings deep links", () => {
   it("resolves legacy setting aliases to the canonical page and tab", () => {
diff --git a/tests/core/adapter-runtime.test.ts b/tests/core/adapter-runtime.test.ts
new file mode 100644
index 000000000..c83634836
--- /dev/null
+++ b/tests/core/adapter-runtime.test.ts
@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import type { SiteAdapter } from "~adapters/base"
+
+import {
+  clearAdapterRuntime,
+  getAdapterRuntime,
+  setAdapterRuntime,
+  subscribeAdapterRuntime,
+} from "~core/adapter-runtime"
+
+describe("adapter runtime", () => {
+  afterEach(() => {
+    window.__ophelAdapterRuntime = undefined
+  })
+
+  it("shares the adapter through window and notifies subscribers", () => {
+    const listener = vi.fn()
+    const unsubscribe = subscribeAdapterRuntime(listener)
+    const adapter = {} as SiteAdapter
+
+    setAdapterRuntime(adapter)
+
+    expect(getAdapterRuntime()).toBe(adapter)
+    expect(listener).toHaveBeenCalledOnce()
+
+    unsubscribe()
+  })
+
+  it("does not notify again when registering the same instance", () => {
+    const listener = vi.fn()
+    const unsubscribe = subscribeAdapterRuntime(listener)
+    const adapter = {} as SiteAdapter
+
+    setAdapterRuntime(adapter)
+    setAdapterRuntime(adapter)
+
+    expect(listener).toHaveBeenCalledOnce()
+    unsubscribe()
+  })
+
+  it("clears the current adapter and notifies subscribers", () => {
+    const listener = vi.fn()
+    const unsubscribe = subscribeAdapterRuntime(listener)
+    const adapter = {} as SiteAdapter
+
+    setAdapterRuntime(adapter)
+    clearAdapterRuntime(adapter)
+
+    expect(getAdapterRuntime()).toBeNull()
+    expect(listener).toHaveBeenCalledTimes(2)
+    unsubscribe()
+  })
+
+  it("does not clear an adapter registered by a newer runtime", () => {
+    const listener = vi.fn()
+    const unsubscribe = subscribeAdapterRuntime(listener)
+    const staleAdapter = {} as SiteAdapter
+    const currentAdapter = {} as SiteAdapter
+
+    setAdapterRuntime(currentAdapter)
+    clearAdapterRuntime(staleAdapter)
+
+    expect(getAdapterRuntime()).toBe(currentAdapter)
+    expect(listener).toHaveBeenCalledOnce()
+    unsubscribe()
+  })
+})
diff --git a/tests/core/background-clear-all-coordinator.test.ts b/tests/core/background-clear-all-coordinator.test.ts
new file mode 100644
index 000000000..610f51d6f
--- /dev/null
+++ b/tests/core/background-clear-all-coordinator.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it, vi } from "vitest"
+
+import { PersistenceWriteBarrier } from "~stores/chrome-adapter"
+
+import {
+  BACKGROUND_CLEAR_TRANSACTION_KEY,
+  BackgroundClearAllCoordinator,
+  type BackgroundSessionStorage,
+} from "~core/background-clear-all-coordinator"
+
+const createSessionStorage = (initial: Record<string, unknown> = {}) => {
+  const values: Record<string, unknown> = { ...initial }
+  const storage: BackgroundSessionStorage = {
+    get: vi.fn(async () => ({ ...values })),
+    set: vi.fn(async (items) => {
+      Object.assign(values, items)
+    }),
+    remove: vi.fn(async (key) => {
+      delete values[key]
+    }),
+  }
+  return { storage, values }
+}
+
+describe("BackgroundClearAllCoordinator", () => {
+  it("drains writes that started before acquiring the clear lock", async () => {
+    const session = createSessionStorage()
+    let finishWrite = () => undefined
+    const pendingWrite = new Promise<void>((resolve) => {
+      finishWrite = resolve
+    })
+    const coordinator = new BackgroundClearAllCoordinator(session.storage)
+
+    void coordinator.runPersistenceWrite(() => pendingWrite)
+    await Promise.resolve()
+    let prepared = false
+    const prepare = coordinator.begin("clear-1").then(() => {
+      prepared = true
+    })
+
+    await Promise.resolve()
+    expect(prepared).toBe(false)
+    finishWrite()
+    await prepare
+    expect(prepared).toBe(true)
+  })
+
+  it("blocks new writes and requires the owning transaction to release the lock", async () => {
+    const session = createSessionStorage()
+    const write = vi.fn().mockResolvedValue(undefined)
+    const coordinator = new BackgroundClearAllCoordinator(session.storage)
+
+    await coordinator.begin("clear-1")
+    await expect(coordinator.runPersistenceWrite(write)).rejects.toThrow(
+      "Background persistence writes are suspended",
+    )
+    await expect(coordinator.begin("clear-2")).rejects.toThrow("is already active")
+    await expect(coordinator.release("clear-2")).rejects.toThrow("ownership does not match")
+
+    await coordinator.release("clear-1")
+    await coordinator.runPersistenceWrite(write)
+    expect(write).toHaveBeenCalledOnce()
+  })
+
+  it("restores an active lock after a service worker restart", async () => {
+    const session = createSessionStorage({
+      [BACKGROUND_CLEAR_TRANSACTION_KEY]: { id: "clear-1", startedAt: 1_000 },
+    })
+    const coordinator = new BackgroundClearAllCoordinator(
+      session.storage,
+      new PersistenceWriteBarrier(),
+      { now: () => 1_500 },
+    )
+
+    await expect(coordinator.runPersistenceWrite(async () => undefined)).rejects.toThrow(
+      "Background persistence writes are suspended",
+    )
+    await coordinator.release("clear-1")
+    expect(session.values).toEqual({})
+  })
+
+  it("expires an abandoned lock before allowing the next write", async () => {
+    const session = createSessionStorage({
+      [BACKGROUND_CLEAR_TRANSACTION_KEY]: { id: "stale", startedAt: 1_000 },
+    })
+    const warn = vi.fn()
+    const write = vi.fn().mockResolvedValue(undefined)
+    const coordinator = new BackgroundClearAllCoordinator(
+      session.storage,
+      new PersistenceWriteBarrier(),
+      { now: () => 3_001, ttlMs: 2_000, warn },
+    )
+
+    await coordinator.runPersistenceWrite(write)
+
+    expect(write).toHaveBeenCalledOnce()
+    expect(session.values).toEqual({})
+    expect(warn).toHaveBeenCalledWith("[Ophel] Releasing stale background clear-all transaction:", {
+      transactionId: "stale",
+    })
+  })
+
+  it("removes the persisted lock and resumes writes when preparation fails", async () => {
+    const session = createSessionStorage()
+    const failure = new Error("pending write failed")
+    let failWrite = (_error: Error) => undefined
+    const pendingWrite = new Promise<void>((_resolve, reject) => {
+      failWrite = reject
+    })
+    const coordinator = new BackgroundClearAllCoordinator(session.storage)
+    const write = coordinator.runPersistenceWrite(() => pendingWrite)
+    await Promise.resolve()
+
+    const prepare = coordinator.begin("clear-1")
+    await vi.waitFor(() => {
+      expect(session.storage.set).toHaveBeenCalledOnce()
+    })
+    await Promise.resolve()
+    failWrite(failure)
+
+    await expect(write).rejects.toBe(failure)
+    await expect(prepare).rejects.toThrow("Pending persistence writes failed")
+    expect(session.values).toEqual({})
+
+    const resumedWrite = vi.fn().mockResolvedValue(undefined)
+    await coordinator.runPersistenceWrite(resumedWrite)
+    expect(resumedWrite).toHaveBeenCalledOnce()
+  })
+})
diff --git a/src/core/model-locker.test.ts b/tests/core/model-locker.test.ts
similarity index 95%
rename from src/core/model-locker.test.ts
rename to tests/core/model-locker.test.ts
index 150396299..4736162be 100644
--- a/src/core/model-locker.test.ts
+++ b/tests/core/model-locker.test.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 
 import type { SiteAdapter } from "~adapters/base"
 
-import { ModelLocker } from "./model-locker"
+import { ModelLocker } from "~core/model-locker"
 
 const createAdapter = () =>
   ({
diff --git a/tests/core/module-lifecycle.test.ts b/tests/core/module-lifecycle.test.ts
new file mode 100644
index 000000000..886253d48
--- /dev/null
+++ b/tests/core/module-lifecycle.test.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it, vi } from "vitest"
+
+import { destroyModuleInstances, type DestroyableModuleInstances } from "~core/module-lifecycle"
+
+describe("core module lifecycle", () => {
+  it("destroys every registered module once", () => {
+    const lifecycleCalls = Array.from({ length: 13 }, () => vi.fn())
+    const modules: DestroyableModuleInstances = {
+      assistantMermaidRenderer: { stop: lifecycleCalls[0] },
+      themeManager: { stopThemeMonitoring: lifecycleCalls[1] },
+      copyManager: { stop: lifecycleCalls[2] },
+      layoutManager: { destroy: lifecycleCalls[3] },
+      markdownFixer: { stop: lifecycleCalls[4] },
+      tabManager: { destroy: lifecycleCalls[5] },
+      watermarkRemover: { stop: lifecycleCalls[6] },
+      readingHistoryManager: { destroy: lifecycleCalls[7] },
+      modelLocker: { stop: lifecycleCalls[8] },
+      scrollLockManager: { stop: lifecycleCalls[9] },
+      userQueryMarkdownRenderer: { destroy: lifecycleCalls[10] },
+      policyRetryManager: { destroy: lifecycleCalls[11] },
+      usageCounterManager: { destroy: lifecycleCalls[12] },
+    }
+
+    destroyModuleInstances(modules)
+
+    for (const lifecycleCall of lifecycleCalls) {
+      expect(lifecycleCall).toHaveBeenCalledOnce()
+    }
+  })
+
+  it("accepts an empty registry", () => {
+    const emptyModules = Object.fromEntries(
+      [
+        "assistantMermaidRenderer",
+        "themeManager",
+        "copyManager",
+        "layoutManager",
+        "markdownFixer",
+        "tabManager",
+        "watermarkRemover",
+        "readingHistoryManager",
+        "modelLocker",
+        "scrollLockManager",
+        "userQueryMarkdownRenderer",
+        "policyRetryManager",
+        "usageCounterManager",
+      ].map((key) => [key, null]),
+    ) as unknown as DestroyableModuleInstances
+
+    expect(() => destroyModuleInstances(emptyModules)).not.toThrow()
+  })
+
+  it("continues destroying modules after one cleanup fails", () => {
+    const error = new Error("cleanup failure")
+    const firstCleanup = vi.fn(() => {
+      throw error
+    })
+    const laterCleanup = vi.fn()
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined)
+    const modules: DestroyableModuleInstances = {
+      assistantMermaidRenderer: { stop: firstCleanup },
+      themeManager: { stopThemeMonitoring: laterCleanup },
+      copyManager: null,
+      layoutManager: null,
+      markdownFixer: null,
+      tabManager: null,
+      watermarkRemover: null,
+      readingHistoryManager: null,
+      modelLocker: null,
+      scrollLockManager: null,
+      userQueryMarkdownRenderer: null,
+      policyRetryManager: null,
+      usageCounterManager: null,
+    }
+
+    expect(() => destroyModuleInstances(modules)).not.toThrow()
+    expect(firstCleanup).toHaveBeenCalledOnce()
+    expect(laterCleanup).toHaveBeenCalledOnce()
+    expect(consoleError).toHaveBeenCalledWith(
+      "[Ophel] Failed to destroy core module assistantMermaidRenderer:",
+      error,
+    )
+  })
+})
diff --git a/tests/core/modules-init-generation.test.ts b/tests/core/modules-init-generation.test.ts
new file mode 100644
index 000000000..f5eeca6f4
--- /dev/null
+++ b/tests/core/modules-init-generation.test.ts
@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import type { SiteAdapter } from "~adapters/base"
+import type { Settings } from "~utils/storage"
+
+const { consumeClearAllFlagMock } = vi.hoisted(() => ({
+  consumeClearAllFlagMock: vi.fn(),
+}))
+
+vi.mock("~utils/storage", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("~utils/storage")>()),
+  consumeClearAllFlag: consumeClearAllFlagMock,
+}))
+
+vi.mock("~platform/katex", () => ({
+  getKatexStylesText: () => "",
+  renderKatexToString: () => "",
+}))
+
+vi.mock("~core/reading-history", () => ({
+  ReadingHistoryManager: class {
+    startRecording() {}
+    cleanup() {}
+    destroy() {}
+  },
+}))
+
+import {
+  destroyCoreModules,
+  getModuleInstances,
+  initReadingHistoryManager,
+} from "~core/modules-init"
+
+describe("core module generations", () => {
+  afterEach(() => {
+    destroyCoreModules()
+    consumeClearAllFlagMock.mockReset()
+  })
+
+  it("does not create a reading-history manager after its generation is destroyed", async () => {
+    let resolveClearAllFlag!: (value: boolean) => void
+    consumeClearAllFlagMock.mockReturnValue(
+      new Promise<boolean>((resolve) => {
+        resolveClearAllFlag = resolve
+      }),
+    )
+
+    const initialization = initReadingHistoryManager({
+      adapter: {} as SiteAdapter,
+      settings: {
+        readingHistory: {
+          persistence: true,
+          autoRestore: false,
+        },
+      } as Settings,
+      siteId: "test",
+    })
+
+    destroyCoreModules()
+    resolveClearAllFlag(false)
+    await initialization
+
+    expect(getModuleInstances().readingHistoryManager).toBeNull()
+  })
+})
diff --git a/tests/core/network-monitor.test.ts b/tests/core/network-monitor.test.ts
new file mode 100644
index 000000000..204a9578c
--- /dev/null
+++ b/tests/core/network-monitor.test.ts
@@ -0,0 +1,102 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import { destroyNetworkMonitor, initNetworkMonitor } from "~core/network-monitor"
+import { EVENT_MONITOR_INIT, EVENT_MONITOR_START } from "~utils/messaging"
+
+describe("NetworkMonitor lifecycle", () => {
+  afterEach(() => {
+    destroyNetworkMonitor()
+    vi.restoreAllMocks()
+  })
+
+  it("removes its exact message listener and can initialize again", () => {
+    const addListener = vi.spyOn(window, "addEventListener")
+    const removeListener = vi.spyOn(window, "removeEventListener")
+
+    initNetworkMonitor()
+    const firstRegistration = addListener.mock.calls.find(([type]) => type === "message")
+    expect(firstRegistration).toBeDefined()
+
+    destroyNetworkMonitor()
+    expect(removeListener).toHaveBeenCalledWith("message", firstRegistration?.[1])
+
+    initNetworkMonitor()
+    const registrations = addListener.mock.calls.filter(([type]) => type === "message")
+    expect(registrations).toHaveLength(2)
+    expect(registrations[1]?.[1]).toBe(firstRegistration?.[1])
+  })
+
+  it("does not overwrite fetch or XHR hooks installed after its own hooks", () => {
+    const originalFetch = window.fetch
+    const originalXhrOpen = window.XMLHttpRequest.prototype.open
+    const originalXhrSend = window.XMLHttpRequest.prototype.send
+
+    initNetworkMonitor()
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: { type: EVENT_MONITOR_INIT, payload: {} },
+        source: window,
+      }),
+    )
+
+    const laterFetch = vi.fn(originalFetch)
+    const laterXhrOpen = vi.fn(originalXhrOpen) as unknown as typeof originalXhrOpen
+    const laterXhrSend = vi.fn(originalXhrSend) as unknown as typeof originalXhrSend
+    window.fetch = laterFetch
+    window.XMLHttpRequest.prototype.open = laterXhrOpen
+    window.XMLHttpRequest.prototype.send = laterXhrSend
+
+    destroyNetworkMonitor()
+
+    expect(window.fetch).toBe(laterFetch)
+    expect(window.XMLHttpRequest.prototype.open).toBe(laterXhrOpen)
+    expect(window.XMLHttpRequest.prototype.send).toBe(laterXhrSend)
+
+    window.fetch = originalFetch
+    window.XMLHttpRequest.prototype.open = originalXhrOpen
+    window.XMLHttpRequest.prototype.send = originalXhrSend
+  })
+
+  it("does not emit a fetch start event after destroy while request metadata is pending", async () => {
+    const originalFetch = window.fetch
+    const fetchMock = vi.fn().mockResolvedValue(new Response("ok"))
+    const postMessage = vi.spyOn(window, "postMessage")
+    let resolveBody = (_value: string) => undefined
+    const bodyText = new Promise<string>((resolve) => {
+      resolveBody = resolve
+    })
+    const request = {
+      clone: () => ({ clone: () => request, text: () => bodyText }),
+      text: () => bodyText,
+      toString: () => "https://example.com/generate",
+    }
+    window.fetch = fetchMock
+
+    initNetworkMonitor()
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: {
+          type: EVENT_MONITOR_INIT,
+          payload: {
+            requestBodyRules: [
+              { type: "json-field-exists", field: "prompt", metadata: { mode: "test" } },
+            ],
+          },
+        },
+        source: window,
+      }),
+    )
+
+    const fetchPromise = window.fetch(request as unknown as Request)
+    await Promise.resolve()
+    destroyNetworkMonitor()
+    resolveBody('{"prompt":"hello"}')
+    await fetchPromise
+
+    expect(postMessage).not.toHaveBeenCalledWith(
+      expect.objectContaining({ type: EVENT_MONITOR_START }),
+      "*",
+    )
+    window.fetch = originalFetch
+  })
+})
diff --git a/src/core/outline-manager.test.ts b/tests/core/outline-manager.test.ts
similarity index 95%
rename from src/core/outline-manager.test.ts
rename to tests/core/outline-manager.test.ts
index aabce4987..ebc46cf27 100644
--- a/src/core/outline-manager.test.ts
+++ b/tests/core/outline-manager.test.ts
@@ -4,7 +4,7 @@ import type { SiteAdapter } from "~adapters/base"
 import { useBookmarkStore } from "~stores/bookmarks-store"
 import { DEFAULT_SETTINGS } from "~utils/storage"
 
-import { OutlineManager } from "./outline-manager"
+import { OutlineManager } from "~core/outline-manager"
 
 describe("OutlineManager lifecycle", () => {
   afterEach(() => {
diff --git a/tests/core/policy-retry-manager.test.ts b/tests/core/policy-retry-manager.test.ts
new file mode 100644
index 000000000..8043ff303
--- /dev/null
+++ b/tests/core/policy-retry-manager.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it, vi } from "vitest"
+
+import type { SiteAdapter } from "~adapters/base"
+import { PolicyRetryManager } from "~core/policy-retry-manager"
+
+describe("PolicyRetryManager lifecycle", () => {
+  it("removes the exact window listener once", () => {
+    const addListener = vi.spyOn(window, "addEventListener")
+    const removeListener = vi.spyOn(window, "removeEventListener")
+    const adapter = {
+      getSiteId: () => "gemini-enterprise",
+    } as unknown as SiteAdapter
+
+    const manager = new PolicyRetryManager(adapter, { enabled: false, maxRetries: 3 })
+    const registration = addListener.mock.calls.find(([type]) => type === "message")
+
+    expect(registration).toBeDefined()
+
+    manager.destroy()
+    manager.destroy()
+
+    const removals = removeListener.mock.calls.filter(([type]) => type === "message")
+    expect(removals).toHaveLength(1)
+    expect(removals[0]?.[1]).toBe(registration?.[1])
+  })
+})
diff --git a/src/core/polling-task-registry.test.ts b/tests/core/polling-task-registry.test.ts
similarity index 94%
rename from src/core/polling-task-registry.test.ts
rename to tests/core/polling-task-registry.test.ts
index 3e23048f6..e433292a5 100644
--- a/src/core/polling-task-registry.test.ts
+++ b/tests/core/polling-task-registry.test.ts
@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 
-import { PollingTaskRegistry } from "./polling-task-registry"
+import { PollingTaskRegistry } from "~core/polling-task-registry"
 
 describe("PollingTaskRegistry", () => {
   beforeEach(() => {
diff --git a/tests/core/reading-history.test.ts b/tests/core/reading-history.test.ts
new file mode 100644
index 000000000..6759a4c31
--- /dev/null
+++ b/tests/core/reading-history.test.ts
@@ -0,0 +1,84 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import type { SiteAdapter } from "~adapters/base"
+
+const hydrationStore = vi.hoisted(() => {
+  let state = { _hasHydrated: false }
+  const listeners = new Set<(nextState: typeof state) => void>()
+  const setState = vi.fn((partial: Partial<typeof state>) => {
+    state = { ...state, ...partial }
+    for (const listener of listeners) listener(state)
+  })
+
+  return {
+    getState: () => state,
+    setState,
+    subscribe: (listener: (nextState: typeof state) => void) => {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+    reset: () => {
+      state = { _hasHydrated: false }
+      listeners.clear()
+      setState.mockClear()
+    },
+  }
+})
+
+vi.mock("~stores/reading-history-store", () => ({
+  getReadingHistoryStore: () => ({
+    cleanup: vi.fn(),
+    getPosition: vi.fn(),
+    savePosition: vi.fn(),
+  }),
+  useReadingHistoryStore: {
+    getState: hydrationStore.getState,
+    setState: hydrationStore.setState,
+    subscribe: hydrationStore.subscribe,
+  },
+}))
+
+import { ReadingHistoryManager } from "~core/reading-history"
+
+describe("ReadingHistoryManager lifecycle", () => {
+  afterEach(() => {
+    vi.useRealTimers()
+    hydrationStore.reset()
+  })
+
+  it("cancels a hydration wait without mutating the store after destroy", async () => {
+    vi.useFakeTimers()
+    const manager = new ReadingHistoryManager({} as SiteAdapter, {
+      persistence: true,
+      autoRestore: true,
+      cleanupDays: 3,
+    })
+
+    const hydration = manager.waitForHydration(5000)
+    manager.destroy()
+
+    await expect(hydration).resolves.toBe(false)
+    await vi.advanceTimersByTimeAsync(5000)
+    expect(hydrationStore.setState).not.toHaveBeenCalled()
+  })
+
+  it("does not continue restoring when hydration times out", async () => {
+    vi.useFakeTimers()
+    const adapter = {
+      getSessionId: vi.fn(() => "conversation-id"),
+      isUserConversationPage: vi.fn(() => true),
+    } as unknown as SiteAdapter
+    const manager = new ReadingHistoryManager(adapter, {
+      persistence: true,
+      autoRestore: true,
+      cleanupDays: 3,
+    })
+
+    const restore = manager.restoreProgress()
+    await vi.advanceTimersByTimeAsync(5000)
+
+    await expect(restore).resolves.toBe(false)
+    expect(adapter.getSessionId).not.toHaveBeenCalled()
+    expect(hydrationStore.setState).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/locales/loader.test.ts b/tests/locales/loader.test.ts
similarity index 76%
rename from src/locales/loader.test.ts
rename to tests/locales/loader.test.ts
index f1f9f64b0..cc8163dd1 100644
--- a/src/locales/loader.test.ts
+++ b/tests/locales/loader.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest"
 
-import { resources } from "./resources"
-import { loadLocaleMessages } from "./loader"
+import { resources } from "~locales/resources"
+import { loadLocaleMessages } from "~locales/loader"
 
 describe("locale loader", () => {
   it("returns every locale synchronously for the MV3 background", () => {
diff --git a/src/locales/resources.test.ts b/tests/locales/resources.test.ts
similarity index 90%
rename from src/locales/resources.test.ts
rename to tests/locales/resources.test.ts
index ab072c24d..8286d560c 100644
--- a/src/locales/resources.test.ts
+++ b/tests/locales/resources.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest"
 
-import { resources } from "./resources"
+import { resources } from "~locales/resources"
 
 describe("locale resources", () => {
   it("keeps the same message keys in all 11 languages", () => {
diff --git a/tests/platform/userscript/clear-all-coordinator.test.ts b/tests/platform/userscript/clear-all-coordinator.test.ts
new file mode 100644
index 000000000..c40f5c418
--- /dev/null
+++ b/tests/platform/userscript/clear-all-coordinator.test.ts
@@ -0,0 +1,176 @@
+import { describe, expect, it, vi } from "vitest"
+
+import { CLEAR_ALL_PREPARE_KEY } from "~utils/storage"
+
+import {
+  USERSCRIPT_RUNTIME_HEARTBEAT_PREFIX,
+  UserscriptClearAllCoordinator,
+  type UserscriptValueApi,
+} from "~platform/userscript/clear-all-coordinator"
+
+type Listener = Parameters<UserscriptValueApi["addValueChangeListener"]>[1]
+
+const createSharedValueApis = () => {
+  const values = new Map<string, unknown>()
+  const listeners = new Map<number, { clientId: string; key: string; callback: Listener }>()
+  let nextListenerId = 1
+
+  const createApi = (clientId: string): UserscriptValueApi => ({
+    getValue: (key) => values.get(key) as never,
+    setValue: (key, value) => {
+      const oldValue = values.get(key)
+      values.set(key, value)
+      for (const listener of listeners.values()) {
+        if (listener.key === key) {
+          listener.callback(key, oldValue, value, listener.clientId !== clientId)
+        }
+      }
+    },
+    deleteValue: (key) => {
+      const oldValue = values.get(key)
+      values.delete(key)
+      for (const listener of listeners.values()) {
+        if (listener.key === key) {
+          listener.callback(key, oldValue, undefined, listener.clientId !== clientId)
+        }
+      }
+    },
+    listValues: () => [...values.keys()],
+    addValueChangeListener: (key, callback) => {
+      const listenerId = nextListenerId++
+      listeners.set(listenerId, { clientId, key, callback })
+      return listenerId
+    },
+    removeValueChangeListener: (listenerId) => {
+      listeners.delete(listenerId)
+    },
+  })
+
+  return { values, createApi }
+}
+
+const noHeartbeatTimer = {
+  setInterval: () => 1 as unknown as ReturnType<typeof setInterval>,
+  clearInterval: () => undefined,
+}
+
+describe("UserscriptClearAllCoordinator", () => {
+  it("waits for every active remote runtime acknowledgement", async () => {
+    const shared = createSharedValueApis()
+    const prepareA = vi.fn().mockResolvedValue(undefined)
+    const prepareB = vi.fn().mockResolvedValue(undefined)
+    const coordinatorA = new UserscriptClearAllCoordinator(
+      shared.createApi("a"),
+      { prepareCurrentRuntime: prepareA, reloadCurrentRuntime: vi.fn() },
+      { ...noHeartbeatTimer, instanceId: "a", sleep: async () => Promise.resolve() },
+    )
+    const coordinatorB = new UserscriptClearAllCoordinator(
+      shared.createApi("b"),
+      { prepareCurrentRuntime: prepareB, reloadCurrentRuntime: vi.fn() },
+      { ...noHeartbeatTimer, instanceId: "b" },
+    )
+    coordinatorA.start()
+    coordinatorB.start()
+
+    await coordinatorA.prepareRemoteRuntimes()
+
+    expect(prepareA).not.toHaveBeenCalled()
+    expect(prepareB).toHaveBeenCalledOnce()
+    coordinatorA.complete()
+    expect(shared.values.has(CLEAR_ALL_PREPARE_KEY)).toBe(false)
+    coordinatorA.stop()
+    coordinatorB.stop()
+  })
+
+  it("rejects when a remote runtime reports a preparation failure", async () => {
+    const shared = createSharedValueApis()
+    const coordinatorA = new UserscriptClearAllCoordinator(
+      shared.createApi("a"),
+      { prepareCurrentRuntime: vi.fn(), reloadCurrentRuntime: vi.fn() },
+      { ...noHeartbeatTimer, instanceId: "a", sleep: async () => Promise.resolve() },
+    )
+    const coordinatorB = new UserscriptClearAllCoordinator(
+      shared.createApi("b"),
+      {
+        prepareCurrentRuntime: vi.fn().mockRejectedValue(new Error("runtime cleanup failed")),
+        reloadCurrentRuntime: vi.fn(),
+      },
+      { ...noHeartbeatTimer, instanceId: "b" },
+    )
+    coordinatorA.start()
+    coordinatorB.start()
+
+    await expect(coordinatorA.prepareRemoteRuntimes()).rejects.toThrow("runtime cleanup failed")
+    coordinatorA.abort()
+    coordinatorA.stop()
+    coordinatorB.stop()
+  })
+
+  it("times out instead of clearing while an active runtime is unresponsive", async () => {
+    const shared = createSharedValueApis()
+    let now = 100
+    shared.values.set(`${USERSCRIPT_RUNTIME_HEARTBEAT_PREFIX}missing`, { updatedAt: now })
+    const coordinator = new UserscriptClearAllCoordinator(
+      shared.createApi("a"),
+      { prepareCurrentRuntime: vi.fn(), reloadCurrentRuntime: vi.fn() },
+      {
+        ...noHeartbeatTimer,
+        instanceId: "a",
+        now: () => now,
+        ackTimeoutMs: 20,
+        ackPollIntervalMs: 10,
+        sleep: async (delay) => {
+          now += delay
+        },
+      },
+    )
+    coordinator.start()
+
+    await expect(coordinator.prepareRemoteRuntimes()).rejects.toThrow(
+      "Timed out waiting for 1 userscript runtime(s)",
+    )
+    coordinator.abort()
+    coordinator.stop()
+  })
+
+  it("blocks startup for a live prepare signal and discards a stale signal", async () => {
+    const shared = createSharedValueApis()
+    const prepareCurrentRuntime = vi.fn().mockResolvedValue(undefined)
+    const reloadCurrentRuntime = vi.fn()
+    shared.values.set(CLEAR_ALL_PREPARE_KEY, {
+      transactionId: "live",
+      requestedAt: 900,
+    })
+    const liveCoordinator = new UserscriptClearAllCoordinator(
+      shared.createApi("live"),
+      { prepareCurrentRuntime, reloadCurrentRuntime },
+      { ...noHeartbeatTimer, instanceId: "live", now: () => 1000 },
+    )
+
+    expect(liveCoordinator.start()).toEqual({ clearPending: true })
+    await Promise.resolve()
+    expect(prepareCurrentRuntime).toHaveBeenCalledOnce()
+    shared.createApi("coordinator").deleteValue(CLEAR_ALL_PREPARE_KEY)
+    expect(reloadCurrentRuntime).toHaveBeenCalledOnce()
+    liveCoordinator.stop()
+
+    shared.values.set(CLEAR_ALL_PREPARE_KEY, {
+      transactionId: "stale",
+      requestedAt: 1,
+    })
+    const staleCoordinator = new UserscriptClearAllCoordinator(
+      shared.createApi("stale"),
+      { prepareCurrentRuntime: vi.fn(), reloadCurrentRuntime: vi.fn() },
+      {
+        ...noHeartbeatTimer,
+        instanceId: "stale",
+        now: () => 100000,
+        prepareSignalTtlMs: 1000,
+      },
+    )
+
+    expect(staleCoordinator.start()).toEqual({ clearPending: false })
+    expect(shared.values.has(CLEAR_ALL_PREPARE_KEY)).toBe(false)
+    staleCoordinator.stop()
+  })
+})
diff --git a/src/test/setup.ts b/tests/setup.ts
similarity index 100%
rename from src/test/setup.ts
rename to tests/setup.ts
diff --git a/tests/stores/chrome-adapter.test.ts b/tests/stores/chrome-adapter.test.ts
new file mode 100644
index 000000000..b47c86e47
--- /dev/null
+++ b/tests/stores/chrome-adapter.test.ts
@@ -0,0 +1,110 @@
+import { describe, expect, it, vi } from "vitest"
+import type { StateStorage } from "zustand/middleware"
+
+import {
+  guardPersistenceWrites,
+  PersistenceEpochGuard,
+  PersistenceWriteBarrier,
+} from "~stores/chrome-adapter"
+
+describe("persistence write barrier", () => {
+  it("blocks every write and removal after suspension while preserving reads", async () => {
+    const getItem = vi.fn(() => "stored")
+    const setItem = vi.fn()
+    const removeItem = vi.fn()
+    const storage: StateStorage = { getItem, setItem, removeItem }
+    const barrier = new PersistenceWriteBarrier()
+    const guarded = guardPersistenceWrites(storage, barrier)
+
+    await guarded.setItem("settings", "before")
+    barrier.suspend()
+    await guarded.setItem("settings", "after")
+    await guarded.removeItem("settings")
+
+    expect(await guarded.getItem("settings")).toBe("stored")
+    expect(setItem).toHaveBeenCalledOnce()
+    expect(setItem).toHaveBeenCalledWith("settings", "before")
+    expect(removeItem).not.toHaveBeenCalled()
+    expect(getItem).toHaveBeenCalledWith("settings")
+  })
+
+  it("waits for writes that started before suspension", async () => {
+    let resolveWrite = () => undefined
+    const pendingWrite = new Promise<void>((resolve) => {
+      resolveWrite = resolve
+    })
+    const storage: StateStorage = {
+      getItem: () => null,
+      setItem: () => pendingWrite,
+      removeItem: () => undefined,
+    }
+    const barrier = new PersistenceWriteBarrier()
+    const guarded = guardPersistenceWrites(storage, barrier)
+
+    void guarded.setItem("settings", "pending")
+    barrier.suspend()
+    let drained = false
+    const drain = barrier.drain().then(() => {
+      drained = true
+    })
+
+    await Promise.resolve()
+    expect(drained).toBe(false)
+    resolveWrite()
+    await drain
+    expect(drained).toBe(true)
+  })
+
+  it("surfaces failures from writes that started before suspension", async () => {
+    const failure = new Error("storage write failed")
+    const storage: StateStorage = {
+      getItem: () => null,
+      setItem: () => Promise.reject(failure),
+      removeItem: () => undefined,
+    }
+    const barrier = new PersistenceWriteBarrier()
+    const guarded = guardPersistenceWrites(storage, barrier)
+
+    void Promise.resolve(guarded.setItem("settings", "pending")).catch(() => undefined)
+    barrier.suspend()
+
+    await expect(barrier.drain()).rejects.toThrow("Pending persistence writes failed")
+  })
+
+  it("allows a transaction coordinator to resume writes after an aborted clear", async () => {
+    const setItem = vi.fn()
+    const storage: StateStorage = {
+      getItem: () => null,
+      setItem,
+      removeItem: () => undefined,
+    }
+    const barrier = new PersistenceWriteBarrier()
+    const guarded = guardPersistenceWrites(storage, barrier)
+
+    barrier.suspend()
+    await guarded.setItem("settings", "blocked")
+    barrier.resume()
+    await guarded.setItem("settings", "resumed")
+
+    expect(setItem).toHaveBeenCalledOnce()
+    expect(setItem).toHaveBeenCalledWith("settings", "resumed")
+  })
+})
+
+describe("PersistenceEpochGuard", () => {
+  it("suspends for a prepare lock or a changed clear generation", () => {
+    let generation: unknown = "generation-1"
+    let prepareSignal: unknown
+    const guard = new PersistenceEpochGuard(
+      () => generation,
+      () => prepareSignal,
+    )
+
+    expect(guard.shouldSuspend()).toBe(false)
+    prepareSignal = { transactionId: "clear-1" }
+    expect(guard.shouldSuspend()).toBe(true)
+    prepareSignal = undefined
+    generation = "generation-2"
+    expect(guard.shouldSuspend()).toBe(true)
+  })
+})
diff --git a/src/stores/persist-write-gate.test.ts b/tests/stores/persist-write-gate.test.ts
similarity index 91%
rename from src/stores/persist-write-gate.test.ts
rename to tests/stores/persist-write-gate.test.ts
index 8884e2eb4..98c562896 100644
--- a/src/stores/persist-write-gate.test.ts
+++ b/tests/stores/persist-write-gate.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest"
 
-import { PersistWriteGate } from "./persist-write-gate"
+import { PersistWriteGate } from "~stores/persist-write-gate"
 
 describe("PersistWriteGate", () => {
   it("suppresses only writes triggered by the external update stack", () => {
diff --git a/src/utils/backup-validator.test.ts b/tests/utils/backup-validator.test.ts
similarity index 95%
rename from src/utils/backup-validator.test.ts
rename to tests/utils/backup-validator.test.ts
index 5eac8178a..6e67c8de1 100644
--- a/src/utils/backup-validator.test.ts
+++ b/tests/utils/backup-validator.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest"
 
-import { validateBackupData } from "./backup-validator"
+import { validateBackupData } from "~utils/backup-validator"
 
 describe("validateBackupData", () => {
   it("accepts the current flat version 3 backup schema", () => {
diff --git a/tests/utils/cleanup-stack.test.ts b/tests/utils/cleanup-stack.test.ts
new file mode 100644
index 000000000..14f8ecf60
--- /dev/null
+++ b/tests/utils/cleanup-stack.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from "vitest"
+
+import { drainCleanupStack } from "~utils/cleanup-stack"
+
+describe("drainCleanupStack", () => {
+  it("runs every task in reverse order even when one fails", () => {
+    const calls: string[] = []
+    const error = new Error("cleanup failure")
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined)
+    const tasks = [
+      () => calls.push("first"),
+      () => {
+        calls.push("second")
+        throw error
+      },
+      () => calls.push("third"),
+    ]
+
+    drainCleanupStack(tasks, "test")
+
+    expect(calls).toEqual(["third", "second", "first"])
+    expect(tasks).toHaveLength(0)
+    expect(consoleError).toHaveBeenCalledWith("[Ophel] test cleanup failed:", error)
+  })
+})
diff --git a/tests/utils/clear-all-event.test.ts b/tests/utils/clear-all-event.test.ts
new file mode 100644
index 000000000..7aa321f69
--- /dev/null
+++ b/tests/utils/clear-all-event.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest"
+
+import { EVENT_CLEAR_ALL_DATA } from "~utils/messaging"
+import { dispatchClearAllDataEvent, registerClearAllDataTask } from "~utils/clear-all-event"
+
+describe("clear-all runtime event", () => {
+  it("waits for every synchronously registered realm task", async () => {
+    const calls: string[] = []
+    let release = () => undefined
+    const pending = new Promise<void>((resolve) => {
+      release = resolve
+    })
+    const listener = (event: Event) => {
+      registerClearAllDataTask(
+        event,
+        pending.then(() => {
+          calls.push("drained")
+        }),
+      )
+    }
+    window.addEventListener(EVENT_CLEAR_ALL_DATA, listener)
+
+    let completed = false
+    const dispatch = dispatchClearAllDataEvent().then(() => {
+      completed = true
+    })
+    await Promise.resolve()
+    expect(completed).toBe(false)
+
+    release()
+    await dispatch
+    expect(calls).toEqual(["drained"])
+    window.removeEventListener(EVENT_CLEAR_ALL_DATA, listener)
+  })
+
+  it("rejects when any registered realm cannot drain", async () => {
+    const failure = new Error("UI writer failed")
+    const listener = (event: Event) => {
+      registerClearAllDataTask(event, Promise.reject(failure))
+    }
+    window.addEventListener(EVENT_CLEAR_ALL_DATA, listener)
+
+    await expect(dispatchClearAllDataEvent()).rejects.toThrow(
+      "Clear-all runtime preparation failed",
+    )
+    window.removeEventListener(EVENT_CLEAR_ALL_DATA, listener)
+  })
+})
diff --git a/tests/utils/clear-all-transaction.test.ts b/tests/utils/clear-all-transaction.test.ts
new file mode 100644
index 000000000..108aad7f7
--- /dev/null
+++ b/tests/utils/clear-all-transaction.test.ts
@@ -0,0 +1,75 @@
+import { describe, expect, it, vi } from "vitest"
+
+import { runClearAllTransaction } from "~utils/clear-all-transaction"
+
+describe("runClearAllTransaction", () => {
+  it("runs prepare, clear, and commit in order", async () => {
+    const calls: string[] = []
+
+    await runClearAllTransaction({
+      prepare: () => {
+        calls.push("prepare")
+      },
+      clear: () => {
+        calls.push("clear")
+      },
+      commit: () => {
+        calls.push("commit")
+      },
+      abort: () => {
+        calls.push("abort")
+      },
+    })
+
+    expect(calls).toEqual(["prepare", "clear", "commit"])
+  })
+
+  it.each(["prepare", "clear", "commit"] as const)(
+    "runs abort and preserves the original error when %s fails",
+    async (failedStep) => {
+      const calls: string[] = []
+      const failure = new Error(`${failedStep} failed`)
+      const step = (name: "prepare" | "clear" | "commit") => () => {
+        calls.push(name)
+        if (name === failedStep) throw failure
+      }
+
+      await expect(
+        runClearAllTransaction({
+          prepare: step("prepare"),
+          clear: step("clear"),
+          commit: step("commit"),
+          abort: () => {
+            calls.push("abort")
+          },
+        }),
+      ).rejects.toBe(failure)
+
+      expect(calls.at(-1)).toBe("abort")
+    },
+  )
+
+  it("reports an abort failure without replacing the transaction error", async () => {
+    const failure = new Error("clear failed")
+    const abortFailure = new Error("resume failed")
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined)
+
+    await expect(
+      runClearAllTransaction({
+        prepare: () => undefined,
+        clear: () => {
+          throw failure
+        },
+        commit: () => undefined,
+        abort: () => {
+          throw abortFailure
+        },
+      }),
+    ).rejects.toBe(failure)
+
+    expect(consoleError).toHaveBeenCalledWith(
+      "[Ophel] Failed to resume runtimes after clear-all failure:",
+      abortFailure,
+    )
+  })
+})
diff --git a/src/utils/i18n.test.ts b/tests/utils/i18n.test.ts
similarity index 99%
rename from src/utils/i18n.test.ts
rename to tests/utils/i18n.test.ts
index d199537a1..593aa1504 100644
--- a/src/utils/i18n.test.ts
+++ b/tests/utils/i18n.test.ts
@@ -22,7 +22,7 @@ import {
   setLanguage,
   subscribeI18nChanges,
   t,
-} from "./i18n"
+} from "~utils/i18n"
 
 const sendLocaleMessage = vi.mocked(
   sendToBackground as (message: GetLocaleMessagesMessage) => Promise<GetLocaleMessagesResponse>,
diff --git a/tests/utils/messaging.test.ts b/tests/utils/messaging.test.ts
new file mode 100644
index 000000000..62e487133
--- /dev/null
+++ b/tests/utils/messaging.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest"
+
+import { requireSuccessfulMessageAcknowledgement } from "~utils/messaging"
+
+describe("requireSuccessfulMessageAcknowledgement", () => {
+  it("accepts an explicit success response", () => {
+    expect(() => requireSuccessfulMessageAcknowledgement({ success: true })).not.toThrow()
+  })
+
+  it.each([
+    [undefined, "Content script did not acknowledge the message"],
+    [{}, "Content script did not acknowledge the message"],
+    [{ success: false, error: "runtime cleanup failed" }, "runtime cleanup failed"],
+  ])("rejects an unconfirmed response", (response, expectedMessage) => {
+    expect(() => requireSuccessfulMessageAcknowledgement(response)).toThrow(expectedMessage)
+  })
+})
diff --git a/src/utils/settings-normalize.test.ts b/tests/utils/settings-normalize.test.ts
similarity index 96%
rename from src/utils/settings-normalize.test.ts
rename to tests/utils/settings-normalize.test.ts
index ac56f954b..97890db8c 100644
--- a/src/utils/settings-normalize.test.ts
+++ b/tests/utils/settings-normalize.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest"
 
 import { DEFAULT_SETTINGS } from "~constants/default-settings"
 
-import { normalizeSettings } from "./settings-normalize"
+import { normalizeSettings } from "~utils/settings-normalize"
 
 describe("normalizeSettings", () => {
   it("migrates legacy quick button fields without retaining duplicate sources", () => {
diff --git a/tests/utils/storage-area-transaction.test.ts b/tests/utils/storage-area-transaction.test.ts
new file mode 100644
index 000000000..0996660ea
--- /dev/null
+++ b/tests/utils/storage-area-transaction.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest"
+
+import {
+  clearStorageAreas,
+  restoreStorageAreas,
+  snapshotStorageAreas,
+} from "~utils/storage-area-transaction"
+
+interface FakeStorageArea {
+  area: chrome.storage.StorageArea
+  values: Record<string, unknown>
+  failClear: boolean
+}
+
+const createStorageArea = (initialValues: Record<string, unknown>): FakeStorageArea => {
+  const state: FakeStorageArea = {
+    area: null as unknown as chrome.storage.StorageArea,
+    values: { ...initialValues },
+    failClear: false,
+  }
+  state.area = {
+    get: (_keys: unknown, callback: (items: Record<string, unknown>) => void) =>
+      callback({ ...state.values }),
+    set: (items: Record<string, unknown>, callback?: () => void) => {
+      Object.assign(state.values, items)
+      callback?.()
+    },
+    clear: (callback?: () => void) => {
+      if (!state.failClear) state.values = {}
+      callback?.()
+    },
+  } as unknown as chrome.storage.StorageArea
+  return state
+}
+
+describe("storage area transaction helpers", () => {
+  it("snapshots, clears, and restores local and sync storage", async () => {
+    const local = createStorageArea({ settings: { language: "en" } })
+    const sync = createStorageArea({ legacy: true })
+    const getLastError = () => undefined
+
+    const snapshots = await snapshotStorageAreas(local.area, sync.area, getLastError)
+    await clearStorageAreas(local.area, sync.area, getLastError)
+    expect(local.values).toEqual({})
+    expect(sync.values).toEqual({})
+
+    await restoreStorageAreas(local.area, sync.area, snapshots, getLastError)
+    expect(local.values).toEqual({ settings: { language: "en" } })
+    expect(sync.values).toEqual({ legacy: true })
+  })
+
+  it("waits for both areas and reports a partial clear failure", async () => {
+    const local = createStorageArea({ settings: true })
+    const sync = createStorageArea({ legacy: true })
+    let lastError: { message: string } | undefined
+    local.failClear = true
+    local.area.clear = ((callback?: () => void) => {
+      lastError = { message: "local clear failed" }
+      callback?.()
+      lastError = undefined
+    }) as chrome.storage.StorageArea["clear"]
+
+    await expect(clearStorageAreas(local.area, sync.area, () => lastError)).rejects.toThrow(
+      "local clear failed",
+    )
+    expect(local.values).toEqual({ settings: true })
+    expect(sync.values).toEqual({})
+  })
+})
diff --git a/src/utils/themes/themes.test.ts b/tests/utils/themes/themes.test.ts
similarity index 88%
rename from src/utils/themes/themes.test.ts
rename to tests/utils/themes/themes.test.ts
index cd7e6cf1d..27af6ac02 100644
--- a/src/utils/themes/themes.test.ts
+++ b/tests/utils/themes/themes.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest"
 
-import { darkPresets } from "./dark"
-import { lightPresets } from "./light"
+import { darkPresets } from "~utils/themes/dark"
+import { lightPresets } from "~utils/themes/light"
 
 const REQUIRED_THEME_TOKENS = [
   "--gh-bg",
diff --git a/tsconfig.json b/tsconfig.json
index 80065559a..9de879b07 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,14 @@
 {
   "extends": "plasmo/templates/tsconfig.base.json",
   "exclude": ["node_modules"],
-  "include": [".plasmo/index.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"],
+  "include": [
+    ".plasmo/index.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.d.ts",
+    "tests/**/*.ts",
+    "tests/**/*.tsx",
+  ],
   "compilerOptions": {
     "paths": {
       "~*": ["./src/*"],
diff --git a/vite.userscript.config.ts b/vite.userscript.config.ts
index 35e5428e6..7fac29a35 100644
--- a/vite.userscript.config.ts
+++ b/vite.userscript.config.ts
@@ -464,7 +464,6 @@ export default defineConfig({
           "https://business.gemini.google/*",
           "https://aistudio.google.com/*",
           "https://grok.com/*",
-          "https://chat.openai.com/*",
           "https://chatgpt.com/*",
           "https://claude.ai/*",
           "https://www.doubao.com/*",
@@ -483,6 +482,7 @@ export default defineConfig({
           "GM_getValue",
           "GM_setValue",
           "GM_deleteValue",
+          "GM_listValues",
           "GM_addValueChangeListener",
           "GM_removeValueChangeListener",
           "GM_xmlhttpRequest",
diff --git a/vitest.config.ts b/vitest.config.ts
index 28db2d3f1..6112b698b 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -10,9 +10,10 @@ export default defineConfig({
     alias: [{ find: /^~/, replacement: `${path.resolve(__dirname, "src")}/` }],
   },
   test: {
+    include: ["tests/**/*.test.{ts,tsx}"],
     environment: "jsdom",
     globals: true,
-    setupFiles: ["./src/test/setup.ts"],
+    setupFiles: ["./tests/setup.ts"],
     restoreMocks: true,
     clearMocks: true,
   },

From e81bbdf843eddd387fd64b3c7498d2fb505edbca Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Tue, 14 Jul 2026 19:40:44 +0800
Subject: [PATCH 16/17] fix(runtime): resolve audit lifecycle regressions

---
 ...emediation-functional-review-2026-07-14.md | 157 ++++++++++++++++++
 src/components/App.tsx                        |  20 +--
 src/components/app/runtime-lifecycle.ts       |   8 +-
 src/components/ui/Dialog.tsx                  |  12 +-
 .../components/app/runtime-lifecycle.test.ts  |  51 +++++-
 tests/components/ui/Dialog.test.tsx           |  21 +++
 6 files changed, 247 insertions(+), 22 deletions(-)
 create mode 100644 docs/developer/project-audit-remediation-functional-review-2026-07-14.md

diff --git a/docs/developer/project-audit-remediation-functional-review-2026-07-14.md b/docs/developer/project-audit-remediation-functional-review-2026-07-14.md
new file mode 100644
index 000000000..9f08332d3
--- /dev/null
+++ b/docs/developer/project-audit-remediation-functional-review-2026-07-14.md
@@ -0,0 +1,157 @@
+# 大规模重构功能审计（2026-07-14）
+
+## 结论
+
+审计范围为 `origin/main`（`4692bf09`）到
+`refactor/project-audit-remediation`（`632a6e8a`）的 15 个提交，共 202 个文件、
+约 `+12016/-5539` 行。
+
+审计确认了 2 个回归缺陷：
+
+1. **P1：普通 React 生命周期清理会永久暂停当前 realm 的持久化写入。**
+2. **P2：Provider 首次挂载时已经打开的统一 Dialog 缺失初始焦点和标题 ARIA 关联。**
+
+**两个缺陷已在本分支修复并增加回归测试。** 除此之外，站点注册、扩展与油猴入口、
+MAIN-world 脚本注册、模块初始化、设置深链、备份/清除事务、i18n 懒加载、面板拆分
+和大纲虚拟列表未发现新的确定性功能回归。静态检查、104 个自动化测试以及 Chrome、
+Firefox、油猴三端构建均通过，但这些检查不能覆盖真实站点 DOM、浏览器权限和多标签
+时序，因此仍有必须做人工冒烟的残余风险。
+
+## 确定缺陷
+
+### P1：普通 effect cleanup 永久关闭持久化写入
+
+**状态：已修复。** 普通 runtime cleanup 与 clear-all 准备流程已经拆分；新增测试分别
+验证普通 cleanup 不触发持久化暂停，以及 clear-all 仍会暂停并 drain 在途写入。
+
+**修复前证据**
+
+- `src/components/App.tsx:2367` 把 `stopAppRuntimeWriters()` 同时用于
+  `EVENT_CLEAR_ALL_DATA` 和普通 effect cleanup。
+- `src/components/App.tsx:2384` 在 effect cleanup 中无条件执行该函数。
+- `src/components/app/runtime-lifecycle.ts:18` 中该函数首先调用
+  `suspendPersistenceWrites()`，随后停止运行时管理器并 drain 写入。
+- `src/stores/chrome-adapter.ts:259` 只提供暂停和 drain，没有恢复入口。暂停在当前
+  JS realm 内是永久的。
+
+**触发条件**
+
+该 effect 的任一依赖（`promptManager`、`queueDispatcher`、
+`conversationManager`、`outlineManager`）身份变化，或 App 被卸载后在同一 realm
+重新挂载。生产环境中的管理器通常稳定，因此普通设置更新未必触发；HMR、宿主重挂载、
+初始化边界调整或后续代码让 manager 重建时会触发。
+
+**用户影响**
+
+触发后，Zustand persist 和显式 tracked write 都会持续抛出
+`Persistence writes are suspended by a clear-all transaction`。用户随后修改的设置或
+数据不会落盘，刷新后丢失。错误虽然显式输出，但 UI 不一定向用户显示保存失败。
+
+**根因**
+
+“销毁 UI runtime writers”和“清除全部数据前冻结所有持久化写入”是两个不同生命周期
+动作，却被合并成同一个不可逆 helper。
+
+**建议修复**
+
+拆分为两个明确操作：
+
+- 普通 cleanup 只停止 `queueDispatcher`，销毁 conversation/outline manager；
+- clear-all handler 才执行 `suspendPersistenceWrites()`、停止 writers 和
+  `drainPersistenceWrites()`。
+
+增加回归测试，分别证明普通 cleanup 不暂停持久化、clear-all cleanup 必须暂停并等待
+在途写入。现有 `tests/components/app/runtime-lifecycle.test.ts` 只验证所有 manager
+都会停止，没有覆盖二者的语义差异。
+
+### P2：初始已打开的 Dialog 不会完成焦点初始化
+
+**状态：已修复。** Dialog 的注册、标题解析、初始聚焦和键盘保护现在会等待
+`portalTarget` 就绪；新增测试覆盖 Provider 初次挂载时 Dialog 已打开的场景。
+
+**修复前证据**
+
+- `OverlayPortalProvider` 首次 render 时 context 值为 `null`，portal root 需要 ref
+  commit 后才进入 context。
+- `src/components/ui/Dialog.tsx:122` 的标题解析和初始聚焦 effect 只依赖稳定的
+  `titleId`。
+- Dialog 首次 effect 执行时 `dialogRef.current` 为空并直接返回；Provider 随后
+  rerender，`src/components/ui/Dialog.tsx:179` 才真正创建 portal，但该 effect 不会
+  再次执行。
+
+**触发条件**
+
+`OverlayPortalProvider` 第一次挂载时，其子树中的 Dialog 已处于打开状态。例如首次
+启动提示、恢复出的弹窗状态或由初始 props 直接打开的确认框。用户点击按钮后再打开的
+Dialog 不受影响。
+
+**用户影响**
+
+首个可聚焦控件不会自动获得焦点，Dialog 也不会获得从标题推导出的
+`aria-labelledby`。键盘用户的焦点仍停留在背景页面，读屏软件无法用标题命名弹窗。
+
+**建议修复**
+
+让标题解析、初始聚焦和 editable keyboard guard 在 `portalTarget` 可用后执行，例如
+将 `portalTarget` 加入相关 effect 依赖；同时避免 portal target 变化时重复注册 Dialog
+栈或错误恢复焦点。增加“Provider 初始 render 即打开 Dialog”的测试。现有 Dialog
+测试只覆盖点击后打开。
+
+## 已审计但未发现确定回归
+
+- **站点加载：** 15 个 adapter 与 15 个应用 host、独立 site content entry 对账一致；
+  isolated-world adapter 注册与 `document_idle` 主入口的顺序成立。
+- **跨平台入口：** userscript 的 i18n alias、scroll-lock 注入和平台能力边界未发现
+  扩展 API 泄漏。
+- **MAIN-world：** 构建产物 hash 漂移后的动态注册修复、background 消息 ACK 和
+  clear-all lease 逻辑结构一致。
+- **模块生命周期：** 初始化 generation、热更新和 cleanup stack 未发现重复实例或
+  明确漏清理；P1 所述 App cleanup 除外。
+- **备份与清除：** 当前 realm 先 freeze/drain，跨标签协调后再 snapshot/clear/commit，
+  失败路径保留 rollback；未发现确定的数据破坏路径。
+- **设置与 i18n：** Options 深链、hydration 后语言加载、11 种应用语言资源和
+  userscript 语言实现未发现漏接。
+- **UI 拆分：** `PanelWorkspace`、`VirtualizedOutlineTree` 和 prompts dialog 拆分未
+  发现 props、事件、状态或样式注入链路丢失。
+
+## 验证记录
+
+以下命令通过：
+
+- `pnpm format:check`
+- `pnpm lint:check`
+- `pnpm typecheck`
+- `pnpm test:run`：35 个测试文件、104 个测试通过
+- `pnpm check:theme-tokens`：101 个引用、85 个全局 token 默认值通过
+- `pnpm check:site-support`：15 个 adapter 覆盖 15 个应用 host
+- `pnpm build`：Chrome MV3
+- `pnpm build:firefox`：Firefox MV3
+- `pnpm build:userscript`
+- `pnpm check:bundle-budget`：content gzip 975.0 KiB，较审计基线低 49.7%；
+  userscript gzip 472.7 KiB
+
+曾并行执行三个构建时，Chrome 构建一次报
+`Failed to resolve '~styles/overlays.css'`，同时进行的 Firefox 构建通过。串行重跑
+Chrome 后通过；bundle budget 在构建尚未完成时也曾因找不到产物失败，构建完成后通过。
+这些现象表明 Plasmo 构建/产物目录不适合并行共享，不视为标准 CI 串行流程下的源码
+回归。
+
+## 残余风险与人工验收
+
+以下项目无法仅靠仓库内测试消除，应在合并前完成：
+
+1. 在 15 个真实站点逐项验证面板注入、输入、导航、大纲、导出和 SPA 路由切换。站点
+   DOM 与 CSP 会持续变化，registry 对账只能证明配置一致。
+2. 在 Firefox 实机验证动态 MAIN-world 注册和需要 `chrome.scripting` 的功能。构建
+   通过不能证明浏览器运行时行为一致。
+3. 用至少两个扩展标签页和两个油猴标签页验证 clear-all 的 freeze、ACK、超时、回滚和
+   reload，尤其覆盖一个标签无响应的情形。
+4. 覆盖 Provider 初始挂载即打开 Dialog、嵌套 Dialog、Shadow DOM 焦点恢复。
+5. 核实移除 `chat.openai.com`、裸 `claude.com` 和裸 `qianwen.com` host 后，所有目标
+   浏览器和地区都可靠重定向；否则会造成旧入口不再加载扩展。
+
+## 合并判断
+
+两个已确认缺陷及其回归测试均已完成，仓库内自动门禁未再发现阻断项。合并前仍建议
+完成上述真实站点、Firefox MAIN-world 和多标签 clear-all 人工冒烟；这些运行时风险
+无法由当前自动化测试和构建结果完全排除。
diff --git a/src/components/App.tsx b/src/components/App.tsx
index a17557842..9d039473d 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -60,7 +60,7 @@ import { SelectedPromptBar } from "./SelectedPromptBar"
 import { SegmentedExportDialog } from "./SegmentedExportDialog"
 import { SettingsModal } from "./SettingsModal"
 import { ExtensionUpdateNotice } from "./app/ExtensionUpdateNotice"
-import { stopAppRuntimeWriters } from "./app/runtime-lifecycle"
+import { prepareAppRuntimeForClearAll, stopAppRuntimeWriters } from "./app/runtime-lifecycle"
 import { useAppRuntimeManagers } from "./app/useAppRuntimeManagers"
 import { GlobalSearchOverlay } from "./global-search/GlobalSearchOverlay"
 import { GlobalSearchResultItemView } from "./global-search/GlobalSearchResultItemView"
@@ -2364,24 +2364,18 @@ export const App: React.FC<AppProps> = ({ adapter }) => {
       // popstate / pushState / replaceState 时 dispatch "gh-url-change"。
       const onUrlChange = () => outlineManager.handleUrlChange()
       const onRefreshOutline = () => outlineManager.refresh()
-      const stopRuntimeWriters = (event?: Event) => {
-        const task = stopAppRuntimeWriters({ conversationManager, outlineManager, queueDispatcher })
-        if (event) {
-          registerClearAllDataTask(event, task)
-        } else {
-          void task.catch((error) => {
-            console.error("[Ophel] Failed to stop app runtime writers:", error)
-          })
-        }
+      const runtimeWriters = { conversationManager, outlineManager, queueDispatcher }
+      const prepareForClearAll = (event: Event) => {
+        registerClearAllDataTask(event, prepareAppRuntimeForClearAll(runtimeWriters))
       }
       window.addEventListener("gh-url-change", onUrlChange)
       window.addEventListener("ophel:refreshOutline", onRefreshOutline)
-      window.addEventListener(EVENT_CLEAR_ALL_DATA, stopRuntimeWriters, { once: true })
+      window.addEventListener(EVENT_CLEAR_ALL_DATA, prepareForClearAll, { once: true })
       return () => {
         window.removeEventListener("gh-url-change", onUrlChange)
         window.removeEventListener("ophel:refreshOutline", onRefreshOutline)
-        window.removeEventListener(EVENT_CLEAR_ALL_DATA, stopRuntimeWriters)
-        stopRuntimeWriters()
+        window.removeEventListener(EVENT_CLEAR_ALL_DATA, prepareForClearAll)
+        stopAppRuntimeWriters(runtimeWriters)
       }
     }
   }, [promptManager, queueDispatcher, conversationManager, outlineManager])
diff --git a/src/components/app/runtime-lifecycle.ts b/src/components/app/runtime-lifecycle.ts
index 8f28be581..822e13c31 100644
--- a/src/components/app/runtime-lifecycle.ts
+++ b/src/components/app/runtime-lifecycle.ts
@@ -14,8 +14,7 @@ export function stopAppRuntimeWriters({
   conversationManager,
   outlineManager,
   queueDispatcher,
-}: AppRuntimeWriters): Promise<void> {
-  suspendPersistenceWrites()
+}: AppRuntimeWriters): void {
   drainCleanupStack(
     [
       () => outlineManager.destroy(),
@@ -24,5 +23,10 @@ export function stopAppRuntimeWriters({
     ],
     "app runtime",
   )
+}
+
+export function prepareAppRuntimeForClearAll(writers: AppRuntimeWriters): Promise<void> {
+  suspendPersistenceWrites()
+  stopAppRuntimeWriters(writers)
   return drainPersistenceWrites()
 }
diff --git a/src/components/ui/Dialog.tsx b/src/components/ui/Dialog.tsx
index a11280e9d..d0c095fdb 100644
--- a/src/components/ui/Dialog.tsx
+++ b/src/components/ui/Dialog.tsx
@@ -71,6 +71,8 @@ export const DialogOverlay: React.FC<DialogOverlayProps> = ({
   closeOnEscapeRef.current = closeOnEscape
 
   useEffect(() => {
+    if (!portalTarget) return
+
     const token = dialogTokenRef.current
     restoreFocusRef.current = getDeepActiveElement()
     registerDialog(token)
@@ -117,9 +119,11 @@ export const DialogOverlay: React.FC<DialogOverlayProps> = ({
       unregisterDialog(token)
       restoreFocusRef.current?.focus()
     }
-  }, [])
+  }, [portalTarget])
 
   useEffect(() => {
+    if (!portalTarget) return
+
     const dialog = dialogRef.current
     if (!dialog) return
 
@@ -135,9 +139,11 @@ export const DialogOverlay: React.FC<DialogOverlayProps> = ({
       '[autofocus], input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])',
     )
     ;(initialFocus || dialog).focus()
-  }, [titleId])
+  }, [portalTarget, titleId])
 
   useEffect(() => {
+    if (!portalTarget) return
+
     const overlay = overlayRef.current
     if (!overlay) {
       return
@@ -145,7 +151,7 @@ export const DialogOverlay: React.FC<DialogOverlayProps> = ({
 
     // 通用弹窗内部广泛依赖本地 onKeyDown 逻辑，这里使用冒泡阶段拦截，避免吞掉确认/关闭等键盘行为。
     return attachEditableKeyboardFocusGuard(overlay, { capture: false })
-  }, [])
+  }, [portalTarget])
 
   const dialogContent = (
     <div
diff --git a/tests/components/app/runtime-lifecycle.test.ts b/tests/components/app/runtime-lifecycle.test.ts
index 0ff36298f..421319b2b 100644
--- a/tests/components/app/runtime-lifecycle.test.ts
+++ b/tests/components/app/runtime-lifecycle.test.ts
@@ -1,9 +1,40 @@
-import { describe, expect, it, vi } from "vitest"
+import { beforeEach, describe, expect, it, vi } from "vitest"
 
-import { stopAppRuntimeWriters } from "~components/app/runtime-lifecycle"
+import {
+  prepareAppRuntimeForClearAll,
+  stopAppRuntimeWriters,
+} from "~components/app/runtime-lifecycle"
+import { drainPersistenceWrites, suspendPersistenceWrites } from "~stores/chrome-adapter"
+
+vi.mock("~stores/chrome-adapter", () => ({
+  drainPersistenceWrites: vi.fn(() => Promise.resolve()),
+  suspendPersistenceWrites: vi.fn(),
+}))
+
+const createWriters = () => ({
+  queueDispatcher: { stop: vi.fn() },
+  conversationManager: { destroy: vi.fn() },
+  outlineManager: { destroy: vi.fn() },
+})
 
 describe("stopAppRuntimeWriters", () => {
-  it("stops every UI writer even when one cleanup fails", async () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("stops every UI writer without suspending persistence", () => {
+    const writers = createWriters()
+
+    stopAppRuntimeWriters(writers)
+
+    expect(writers.queueDispatcher.stop).toHaveBeenCalledOnce()
+    expect(writers.conversationManager.destroy).toHaveBeenCalledOnce()
+    expect(writers.outlineManager.destroy).toHaveBeenCalledOnce()
+    expect(suspendPersistenceWrites).not.toHaveBeenCalled()
+    expect(drainPersistenceWrites).not.toHaveBeenCalled()
+  })
+
+  it("stops every UI writer even when one cleanup fails", () => {
     const failure = new Error("queue cleanup failed")
     const queueStop = vi.fn(() => {
       throw failure
@@ -12,7 +43,7 @@ describe("stopAppRuntimeWriters", () => {
     const outlineDestroy = vi.fn()
     const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined)
 
-    await stopAppRuntimeWriters({
+    stopAppRuntimeWriters({
       queueDispatcher: { stop: queueStop },
       conversationManager: { destroy: conversationDestroy },
       outlineManager: { destroy: outlineDestroy },
@@ -23,4 +54,16 @@ describe("stopAppRuntimeWriters", () => {
     expect(outlineDestroy).toHaveBeenCalledOnce()
     expect(consoleError).toHaveBeenCalledWith("[Ophel] app runtime cleanup failed:", failure)
   })
+
+  it("suspends and drains persistence before clear-all continues", async () => {
+    const writers = createWriters()
+
+    await prepareAppRuntimeForClearAll(writers)
+
+    expect(suspendPersistenceWrites).toHaveBeenCalledOnce()
+    expect(writers.queueDispatcher.stop).toHaveBeenCalledOnce()
+    expect(writers.conversationManager.destroy).toHaveBeenCalledOnce()
+    expect(writers.outlineManager.destroy).toHaveBeenCalledOnce()
+    expect(drainPersistenceWrites).toHaveBeenCalledOnce()
+  })
 })
diff --git a/tests/components/ui/Dialog.test.tsx b/tests/components/ui/Dialog.test.tsx
index e3e3a8200..baeb22704 100644
--- a/tests/components/ui/Dialog.test.tsx
+++ b/tests/components/ui/Dialog.test.tsx
@@ -27,6 +27,17 @@ const DialogHarness = ({ onClose }: { onClose: () => void }) => {
   )
 }
 
+const InitiallyOpenDialogHarness = ({ onClose }: { onClose: () => void }) => (
+  <OverlayPortalProvider>
+    <button>Background action</button>
+    <DialogOverlay onClose={onClose}>
+      <div className="gh-dialog-title">Initial dialog</div>
+      <button>Initial cancel</button>
+      <button>Initial confirm</button>
+    </DialogOverlay>
+  </OverlayPortalProvider>
+)
+
 const NestedDialogHarness = ({
   onParentClose,
   onChildClose,
@@ -67,6 +78,16 @@ const NestedDialogHarness = ({
 }
 
 describe("DialogOverlay", () => {
+  it("initializes focus and accessible name when open during provider mount", async () => {
+    render(<InitiallyOpenDialogHarness onClose={vi.fn()} />)
+
+    const dialog = await screen.findByRole("dialog", { name: "Initial dialog" })
+    expect(dialog.closest("#ophel-overlay-root")).not.toBeNull()
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Initial cancel" })).toHaveFocus(),
+    )
+  })
+
   it("renders in the shared overlay root, traps focus, and restores the trigger", async () => {
     const user = userEvent.setup()
     const onClose = vi.fn()

From 50d4a4f1ea036995aff5a1c07ebb64f053a9ffdb Mon Sep 17 00:00:00 2001
From: urzeye <20869204+urzeye@users.noreply.github.com>
Date: Tue, 14 Jul 2026 23:33:37 +0800
Subject: [PATCH 17/17] fix(userscript): drain writes before clear-all
 acknowledgement

---
 ...emediation-functional-review-2026-07-14.md |   6 +
 ...remediation-regression-audit-2026-07-14.md | 219 ++++++++++++++++++
 src/platform/userscript/entry.tsx             |   7 +-
 src/platform/userscript/runtime-lifecycle.ts  |   7 +
 .../userscript/runtime-lifecycle.test.ts      |  60 +++++
 5 files changed, 294 insertions(+), 5 deletions(-)
 create mode 100644 docs/developer/project-audit-remediation-regression-audit-2026-07-14.md
 create mode 100644 src/platform/userscript/runtime-lifecycle.ts
 create mode 100644 tests/platform/userscript/runtime-lifecycle.test.ts

diff --git a/docs/developer/project-audit-remediation-functional-review-2026-07-14.md b/docs/developer/project-audit-remediation-functional-review-2026-07-14.md
index 9f08332d3..039d9fa3b 100644
--- a/docs/developer/project-audit-remediation-functional-review-2026-07-14.md
+++ b/docs/developer/project-audit-remediation-functional-review-2026-07-14.md
@@ -1,5 +1,11 @@
 # 大规模重构功能审计（2026-07-14）
 
+> **历史快照：** 本文审计到 `632a6e8a`，其中两个缺陷随后在 `e81bbdf8`
+> 修复。当前 HEAD 的权威结论请查看
+> [project-audit-remediation-regression-audit-2026-07-14.md](./project-audit-remediation-regression-audit-2026-07-14.md)；
+> 新审计发现了新的回归与协议缺口，并在该报告中继续跟踪修复状态，因此本文的
+> “可以合并”结论已失效。
+
 ## 结论
 
 审计范围为 `origin/main`（`4692bf09`）到
diff --git a/docs/developer/project-audit-remediation-regression-audit-2026-07-14.md b/docs/developer/project-audit-remediation-regression-audit-2026-07-14.md
new file mode 100644
index 000000000..331d90000
--- /dev/null
+++ b/docs/developer/project-audit-remediation-regression-audit-2026-07-14.md
@@ -0,0 +1,219 @@
+# 大规模重构回归审计（2026-07-14）
+
+> - 审计分支：`refactor/project-audit-remediation`
+> - 对比基线：`main` / `4692bf09`（v1.1.5）
+> - 原始审计 HEAD：`e81bbdf8`
+> - 状态更新：**P1 已修复；P2 仍未修复，不建议按“零已知回归”标准合并或发布**
+
+## 结论
+
+原始审计覆盖 `main...e81bbdf8` 的 16 个提交、203 个文件，变更规模约为
+`+12242/-5540` 行。审计确认：
+
+1. **P1 高风险协议缺口（已修复）：油猴远端标签的 clear-all ACK 没有可靠等待该
+   realm 的 tracked persistence writes 排空。**
+2. **P2 确定性功能回归：独立 Options 快速连续切换语言时，旧请求可以提前结束
+   loading，页面可能停留在错误语言。**
+
+前一轮审计发现的“普通 App cleanup 永久暂停持久化”和“初始已打开 Dialog
+缺失焦点/ARIA”已经由 `e81bbdf8` 修复，相关测试通过。但这不改变本报告中新发现的
+问题结论；其中 P1 已由本次后续修复关闭，P2 仍然开放。
+
+P1 已在后续修复中由 userscript 入口直接 suspend 并并行等待 persistence drain 与
+runtime event tasks，新增测试覆盖 pending drain 和失败传播。P2 尚未修复，因此当前
+分支仍然**不满足零已知回归的合并条件**。静态检查、自动化测试和三端生产
+构建全部通过，只能证明类型、打包和已有测试覆盖范围内没有失败，不能推翻下面基于
+事件顺序与异步状态机得到的反例。
+
+## P1：油猴 clear-all ACK 早于写入屏障排空
+
+**状态：已修复。原严重度：P1，高风险事务协议缺口。**
+
+### 修复前证据链
+
+- `src/platform/userscript/entry.tsx:363` 的 `prepareCurrentRuntime()` 只执行
+  `suspendPersistenceWrites()` 和 `dispatchClearAllDataEvent()`，没有直接调用
+  `drainPersistenceWrites()`。
+- `src/platform/userscript/entry.tsx:409` 在 App 挂载前注册 `cleanupRuntime` 作为
+  clear-all listener。
+- `src/components/App.tsx:2373` 在 App effect 中更晚注册 `prepareForClearAll`；
+  真正的 drain 位于该 listener 调用的
+  `prepareAppRuntimeForClearAll()`（`src/components/app/runtime-lifecycle.ts:28`）。
+- clear-all 事件同步分发时，`cleanupRuntime` 先执行。其 cleanup stack 会调用
+  `userscriptRoot.unmount()`；App effect cleanup 随即在同一次事件分发中移除
+  `prepareForClearAll`（`src/components/App.tsx:2377`）。
+- DOM 事件规范下，listener 在轮到它之前被移除，本次 dispatch 不再调用它。本地
+  jsdom 最小复现的调用结果只有 `["runtime-cleanup"]`，后注册的 App prepare
+  listener 没有执行。
+- `dispatchClearAllDataEvent()` 只等待 listener 通过 `waitUntil()` 注册的任务。
+  上述顺序下 App 没有注册 drain task，因此 userscript coordinator 可以写入成功
+  ACK，而没有证明该 realm 的 persistence barrier 已排空。
+- 扩展端没有同一缺口：
+  `src/core/content-script-main.ts:425` 和 `src/contents/ui-entry.tsx:19`
+  都在独立入口直接注册/等待 drain，不依赖 App listener 存活。
+
+### 触发条件与影响
+
+触发条件是油猴环境至少有两个活动标签，远端标签收到 prepare signal，且该 realm
+存在尚未 settle 的 tracked write。
+
+协议宣称 ACK 表示“该标签已经停写且在途写入全部结束”，当前实现只能证明“新写入已
+暂停、runtime cleanup 已开始”。如果 tracked write 的实际存储副作用晚于 ACK，
+发起标签可能在它结束前清空共享 GM storage，旧数据随后回写；如果 pending write
+失败，事务也可能在没有获知该失败时继续。
+
+当前 userscript 的 Zustand adapter 和已检查到的 GM 写入最终都同步调用
+`GM_setValue()`，这降低了现有调用点发生“清除后回写”的概率；但
+`runTrackedPersistenceWrite()` 的公开契约接受任意异步 Promise，clear-all
+coordinator 也明确以 drain 作为正确性边界。不能把“当前多数底层副作用同步”当成
+事务完成证明，更不能据此给出零数据风险结论。
+
+### 根因
+
+clear-all runtime cleanup 与 App clear-all prepare 都挂在同一个 DOM 事件上，但
+前者会卸载后者。事务正确性依赖 listener 注册顺序和 React unmount 副作用，形成了
+隐式且不成立的跨层契约。
+
+### 修复与测试
+
+新增 `src/platform/userscript/runtime-lifecycle.ts`，由 userscript 入口直接把
+coordinator callback 绑定到写入屏障：
+
+```ts
+prepareCurrentRuntime: async () => {
+  suspendPersistenceWrites()
+  await Promise.all([drainPersistenceWrites(), dispatchClearAllDataEvent()])
+}
+```
+
+该修复不依赖 listener 注册顺序；只有 drain 与 runtime event tasks 都完成，
+coordinator callback 才 resolve，随后才能写入成功 ACK。
+
+新增 `tests/platform/userscript/runtime-lifecycle.test.ts`，覆盖：
+
+1. runtime event task 已完成但 persistence drain 仍 pending 时，prepare 不得完成；
+2. drain resolve 后 prepare 才完成；
+3. drain reject 时 prepare 必须 reject，由现有 coordinator 失败 ACK 路径继续处理。
+
+现有 `tests/platform/userscript/clear-all-coordinator.test.ts` 只验证 coordinator
+等待其 callback；新增测试补上了 runtime callback 的真实 drain 契约。
+
+## P2：Options 连续切换语言可停留在错误语言
+
+**状态：未修复。严重度：P2，确定性竞态回归。**
+
+### 证据链
+
+- 本分支将 locale 改为异步按需加载；`setLanguage()` 现在返回 Promise。
+- `src/utils/i18n.ts:120` 附近用 `languageRequestVersion` 阻止旧请求覆盖新语言。
+  旧请求过期时会直接 return，但它的 Promise 仍正常 resolve。
+- `src/tabs/options.tsx:163` 的 effect 每次语言变化都先
+  `setLanguageReady(false)`，随后无条件在对应 Promise resolve 时执行
+  `setLanguageReady(true)`。
+- Options 没有像 `src/components/App.tsx:196` 那样订阅
+  `subscribeI18nChanges()`，因此最终 locale 加载完成不一定产生独立的组件 render。
+
+### 可复现时序
+
+1. 语言 A 的 locale 请求尚未完成。
+2. 用户切换到语言 B；B 请求开始，Options 将 `languageReady` 设为 `false`。
+3. 较早的 A 请求先完成。i18n version guard 正确拒绝应用 A，但 A 的 Promise
+   仍 resolve。
+4. A 对应的 `.then()` 把 `languageReady` 提前设为 `true`，Options 使用当时仍旧的
+   locale 渲染。
+5. B 最终完成并把 i18n current language 更新为 B；它再次执行
+   `setLanguageReady(true)`。由于状态已经是 `true`，React 可以跳过 render。
+6. 页面继续显示旧语言，直到其它状态变化偶然触发重渲染。
+
+该问题由 `a343353d` 的 locale 懒加载改造引入。旧实现的 `setLanguage()` 同步完成，
+不存在跨请求完成顺序。
+
+### 用户影响
+
+独立 Options 中快速连续选择语言，或 locale 消息加载延迟顺序发生反转时，菜单和设置
+内容可能显示上一个语言或默认语言。存储里的 `settings.language` 已经是新值，因此
+刷新后通常恢复，容易表现为偶发且难以复现的“语言切换没生效”。
+
+### 建议修复与测试
+
+Options effect 必须只允许当前请求结束 loading，例如使用 effect cancellation token：
+
+```ts
+useEffect(() => {
+  if (!isHydrated || !settings?.language) return
+
+  let active = true
+  setLanguageReady(false)
+  void setLanguage(settings.language).then(() => {
+    if (active) setLanguageReady(true)
+  })
+
+  return () => {
+    active = false
+  }
+}, [isHydrated, settings?.language])
+```
+
+同时建议 Options 订阅 `subscribeI18nChanges()`，把 i18n 当前语言作为明确的 render
+信号，而不是依赖 loading boolean 恰好变化。
+
+新增组件测试：控制两个 locale Promise 的完成顺序为 `A -> B`，但选择顺序为
+`A -> B`；断言 A 完成时页面仍 loading，B 完成后只显示 B。
+
+## 已审计但未发现新增确定回归
+
+- **站点与入口：** 15 个 adapter、15 个应用 host、独立 site entries 和 registry
+  静态对账一致；未发现 adapter loader 漏注册。
+- **MAIN-world：** 6 个动态注册定义、产物引用、drift 检测和修复流程结构一致。
+- **扩展 clear-all：** main、UI、App、background lease、snapshot/rollback 和消息
+  ACK 链路均有直接 drain；未发现与 P1 相同的 listener 卸载缺口。
+- **模块生命周期：** generation、cleanup stack、adapter dispose、NetworkMonitor、
+  ReadingHistory 和 URL observer 的销毁路径未发现新的确定性重复实例。
+- **UI 拆分：** `PanelWorkspace`、大纲虚拟列表和 prompts dialog 的关键 props、
+  handler、overlay target 未发现丢失。
+- **Shadow DOM 样式：** conversations、settings、overlays、queue overlay 均由
+  `ui-entry.tsx` 注入；Options 也直接引入 overlays CSS。
+- **主题与导航：** 独立 Options 暴露 `_default` 外观配置是本分支有测试约束的显式
+  行为变化，不按回归处理。
+- **先前缺陷：** `e81bbdf8` 已把普通 cleanup 与不可逆 persistence suspend 拆开，
+  并修复 Provider 初始挂载即打开 Dialog 的焦点与 ARIA 初始化。
+
+## 验证记录
+
+P1 修复后重新运行了以下门禁，均通过：
+
+- `pnpm format:check`
+- `pnpm lint:check`
+- `pnpm typecheck`
+- `pnpm test:run`：36 个测试文件、106 项测试通过
+- `pnpm check:theme-tokens`：101 个引用、85 个全局 token 默认值通过
+- `pnpm check:site-support`：15 个 adapter 覆盖 15 个应用 host
+- `pnpm build`：Chrome MV3 生产构建通过
+- `pnpm build:firefox`：Firefox MV3 生产构建通过
+- `pnpm build:userscript`：userscript 生产构建通过
+- `pnpm check:bundle-budget`：
+  - content entries：3678.2 KiB raw / 975.1 KiB gzip，低于审计基线 49.7%
+  - 最大 site entry：994.4 KiB raw / 286.1 KiB gzip
+  - userscript：1805.0 KiB raw / 472.7 KiB gzip
+- `git diff --check`
+
+构建按 Chrome、Firefox、userscript 串行执行，避免 Plasmo 共享产物目录的并发竞态。
+
+## 残余风险与人工验收
+
+即使修复上述两项，也不能用仓库内静态检查数学证明“绝对零 bug”。合并前至少应完成：
+
+1. 两个以上油猴标签的 clear-all：pending write、失败 ACK、超时、abort、complete、
+   generation 和 reload。
+2. 独立 Options 快速连续切换三种未缓存语言，并人为增加 locale 响应延迟。
+3. 15 个真实站点的面板注入、输入、导航、大纲、导出和 SPA 路由切换。
+4. Chrome 与 Firefox 实机的 MAIN-world registration 漂移修复。
+5. Shadow DOM 中初始 Dialog、嵌套 Dialog、焦点恢复和 24 套主题的关键状态冒烟。
+
+## 合并判断
+
+**当前判断：P1 已解除；P2 仍阻止“零已知回归”标准下的合并。**
+
+P1 现在已经建立 ACK 与 drain 的直接保证并有回归测试。P2 仍有完整可达时序，属于
+确定性用户可见回归；如要求本次大规模重构不存在任何已知问题，还需要修复 P2。
+多标签与真实浏览器人工验收仍不能由单元测试替代。
diff --git a/src/platform/userscript/entry.tsx b/src/platform/userscript/entry.tsx
index 7ff695299..3ff073414 100644
--- a/src/platform/userscript/entry.tsx
+++ b/src/platform/userscript/entry.tsx
@@ -7,7 +7,6 @@ import { getInitialUserscriptLanguage, primeUserscriptLocales, subscribeI18nChan
 import { injectScrollLock } from "./scroll-lock-inject"
 import { injectYuanbaoMonacoWrap } from "./yuanbao-monaco-wrap-inject"
 import { applyOphelPlatformFontClass } from "~utils/font"
-import { dispatchClearAllDataEvent } from "~utils/clear-all-event"
 import { drainCleanupStack } from "~utils/cleanup-stack"
 import { suspendPersistenceWrites } from "~stores/chrome-adapter"
 import { EVENT_CLEAR_ALL_DATA } from "~utils/messaging"
@@ -16,6 +15,7 @@ import {
   initUserscriptClearAllCoordinator,
   isUserscriptClearRuntimeKey,
 } from "./clear-all-coordinator"
+import { prepareUserscriptRuntimeForClearAll } from "./runtime-lifecycle"
 
 const USERSCRIPT_OBJECT_URLS = new Set<string>()
 let activeUserscriptRuntimeCleanup: (() => void) | null = null
@@ -360,10 +360,7 @@ const clearUserscriptRuntimeCaches = () => {
 window.addEventListener(EVENT_CLEAR_ALL_DATA, clearUserscriptRuntimeCaches)
 
 const userscriptClearCoordinator = initUserscriptClearAllCoordinator({
-  prepareCurrentRuntime: async () => {
-    suspendPersistenceWrites()
-    await dispatchClearAllDataEvent()
-  },
+  prepareCurrentRuntime: prepareUserscriptRuntimeForClearAll,
   reloadCurrentRuntime: () => window.location.reload(),
 })
 window.addEventListener(
diff --git a/src/platform/userscript/runtime-lifecycle.ts b/src/platform/userscript/runtime-lifecycle.ts
new file mode 100644
index 000000000..c154e3ace
--- /dev/null
+++ b/src/platform/userscript/runtime-lifecycle.ts
@@ -0,0 +1,7 @@
+import { drainPersistenceWrites, suspendPersistenceWrites } from "~stores/chrome-adapter"
+import { dispatchClearAllDataEvent } from "~utils/clear-all-event"
+
+export async function prepareUserscriptRuntimeForClearAll(): Promise<void> {
+  suspendPersistenceWrites()
+  await Promise.all([drainPersistenceWrites(), dispatchClearAllDataEvent()])
+}
diff --git a/tests/platform/userscript/runtime-lifecycle.test.ts b/tests/platform/userscript/runtime-lifecycle.test.ts
new file mode 100644
index 000000000..237877191
--- /dev/null
+++ b/tests/platform/userscript/runtime-lifecycle.test.ts
@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { prepareUserscriptRuntimeForClearAll } from "~platform/userscript/runtime-lifecycle"
+import { drainPersistenceWrites, suspendPersistenceWrites } from "~stores/chrome-adapter"
+import { dispatchClearAllDataEvent } from "~utils/clear-all-event"
+
+vi.mock("~stores/chrome-adapter", () => ({
+  drainPersistenceWrites: vi.fn(),
+  suspendPersistenceWrites: vi.fn(),
+}))
+
+vi.mock("~utils/clear-all-event", () => ({
+  dispatchClearAllDataEvent: vi.fn(),
+}))
+
+const createDeferred = () => {
+  let resolve = () => undefined
+  const promise = new Promise<void>((resolvePromise) => {
+    resolve = resolvePromise
+  })
+  return { promise, resolve }
+}
+
+describe("prepareUserscriptRuntimeForClearAll", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("waits for persistence writes and runtime event tasks before completing", async () => {
+    const persistenceDrain = createDeferred()
+    const runtimeTasks = createDeferred()
+    vi.mocked(drainPersistenceWrites).mockReturnValue(persistenceDrain.promise)
+    vi.mocked(dispatchClearAllDataEvent).mockReturnValue(runtimeTasks.promise)
+
+    let completed = false
+    const preparation = prepareUserscriptRuntimeForClearAll().then(() => {
+      completed = true
+    })
+
+    expect(suspendPersistenceWrites).toHaveBeenCalledOnce()
+    expect(drainPersistenceWrites).toHaveBeenCalledOnce()
+    expect(dispatchClearAllDataEvent).toHaveBeenCalledOnce()
+
+    runtimeTasks.resolve()
+    await Promise.resolve()
+    expect(completed).toBe(false)
+
+    persistenceDrain.resolve()
+    await preparation
+    expect(completed).toBe(true)
+  })
+
+  it("rejects preparation when the persistence drain fails", async () => {
+    const failure = new Error("pending write failed")
+    vi.mocked(drainPersistenceWrites).mockRejectedValue(failure)
+    vi.mocked(dispatchClearAllDataEvent).mockResolvedValue(undefined)
+
+    await expect(prepareUserscriptRuntimeForClearAll()).rejects.toBe(failure)
+  })
+})