diff --git a/docs/linear/changli.jpg b/docs/linear/changli.jpg
new file mode 100644
index 0000000..31c8207
Binary files /dev/null and b/docs/linear/changli.jpg differ
diff --git a/docs/research/antigravity-improvement.md b/docs/research/antigravity-improvement.md
new file mode 100644
index 0000000..361d79d
--- /dev/null
+++ b/docs/research/antigravity-improvement.md
@@ -0,0 +1,101 @@
+# Antigravity 换肤伴侣 (agent-theme) 优化提升方案
+
+本项目 `agent-theme` 是一款基于 Rust (Tauri v2) + Svelte 构建的无侵入式样式注入工具，其主要通过 Chrome DevTools Protocol (CDP) 调试端口向 Codex Desktop、Antigravity 等代理应用的 WebView 中动态注入 CSS 样式，以此实现磨砂玻璃与定制角色背景的视觉主题效果。
+
+为了进一步拓宽项目的功能边界、提升运行效率并改善用户体验，本文在调研了市面上相似的主题定制及样式注入开源项目的基础上，提出了如下优化与提升方案。
+
+---
+
+## 一、 相似项目与竞品分析
+
+在开源社区中，针对桌面混合应用（基于 Electron 或 CEF/Chromium 的客户端）进行主题定制与样式注入的项目主要有以下几类：
+
+| 开源项目 | 注入原理 | 主题管理方式 | 主要特点与借鉴点 |
+| :--- | :--- | :--- | :--- |
+| **Spicetify-cli** | 通过 CLI 对 Spotify 客户端的 App 包进行二进制补丁（Patching），注入特定入口 JS。 | 自定义 `color.ini` (配置颜色变量) 与 `user.css`，支持高度模块化和变量化。 | 支持一键扩展（Extensions）和 App 插件；提供 `watch` 模式实时热重载 CSS 变更。 |
+| **BetterDiscord / Vencord** | 拦截或挂载到 Discord 客户端的渲染进程/Webpack 模块中。 | 通过特定的 Themes 文件夹读取本地 CSS 文件，支持在线导入。 | 内置 Monaco Editor，提供实时的 CSS 自定义与热重载；通过系统窗口透明化实现原生的毛玻璃穿透效果。 |
+| **BeautifulDiscord** | 修改客户端的启动 JS 脚本以加载外部 CSS 文件。 | 监控一个本地 CSS 文件。 | 极其轻量，专注于 CSS 注入，不提供 JS 插件功能，保持客户端的稳定和高性能。 |
+| **vscode-background** | 修改 VS Code 的核心 CSS 文件以注入背景图。 | 在配置文件中指定本地图片路径并自动转为 base64。 | 专为 VS Code 内部结构定制，提供不透明度、毛玻璃程度和位置配置。 |
+
+### 本项目的核心优势
+- **无侵入性 (Non-invasive)**：不修改目标应用的二进制文件或安装包（不需要重包或 Patching），依靠标准的 CDP 协议进行“软注入”，升级主应用不会导致签名失效或文件损毁。
+- **跨应用适配**：通过不同的 CSS 选择器与适配规则，同时支持 Codex、Antigravity 和 Linear 等多种基于 Chromium 的桌面客户端。
+
+---
+
+## 二、 当前架构局限与痛点
+
+1. **Base64 图片注入带来的性能与内存压力**：
+   目前 `agent-theme` 将背景图片转为 Base64 编码，再嵌入到 JS 中通过 CDP 的 `Runtime.evaluate` 传输并注入。当图片文件过大时，会导致 CDP 传输的 JS 字符串极其庞大，带来内存开销，甚至可能导致目标应用在注入瞬间卡死或渲染抖动。
+2. **轮询机制（Polling）开销**：
+   当前检测目标应用进程状态是通过高频定时轮询，这在一定程度上占用了 CPU 资源，并且从目标应用启动到 `agent-theme` 捕获到进程并完成注入存在明显的时延。
+3. **局限于单平台**：
+   `agent.rs` 目前硬编码了 macOS 的 `Application Support` 目录，对于 Windows (`%APPDATA%`) 和 Linux (`~/.config/`) 的用户无法开箱即用。
+4. **缺乏实时调试与高阶配置**：
+   目前只提供了静态预设主题和通过弹窗上传主题，用户在上传后难以微调 CSS 的细节（如毛玻璃模糊度、特定元素的文字颜色等），缺乏实时预览和修改的沙盒环境。
+
+---
+
+## 三、 核心优化与提升方案
+
+### 1. 静态资源本地服务化 (Local Static Asset Server / Proxy)
+- **问题背景**：Base64 字符串极大增加了 CDP 的传输负担。
+- **方案设计**：
+  - 在 `agent-theme` Rust 后端启动一个极轻量的、仅监听 `127.0.0.1` 环回地址上随机可用端口的 HTTP 静态服务（例如使用 Rust 的 `axum` 或 `warp`，或者直接利用 Tauri v2 内置的本地文件协议代理）。
+  - 注入样式时，不再通过 Base64 编码，而是注入如下形式的 CSS：
+    ```css
+    body {
+      background-image: url('http://127.0.0.1:随机端口/themes/changli/bg.jpg') !important;
+    }
+    ```
+  - **收益**：注入的 JS 脚本将从数 MB 骤降到几百字节，显著提升 CDP 注入的速度，消除因大图注入导致的目标窗口卡顿。
+
+### 2. 基于文件监听（File Watcher）的即时零延迟注入
+- **问题背景**：定期轮询占用 CPU，且检测存在时间差。
+- **方案设计**：
+  - 使用 Rust 的 `notify` 库，监控主应用的数据存储目录（如 `~/Library/Application Support/Codex`）。
+  - 目标是监控 `DevToolsActivePort` 文件的创建。当目标应用启动、该文件被写入的一瞬间，操作系统会立即触发文件变更事件，`agent-theme` 捕获该事件并提取端口，即可在毫秒级内发起 CDP 连接并注入样式。
+  - **收益**：彻底废弃定时 Polling，降低 CPU 开销，并且让用户感知不到任何样式注入延迟（实现应用刚启动时界面就是换肤后的状态）。
+
+### 3. 多平台支持与自适应路径查找 (Multi-Platform Support)
+- **方案设计**：
+  - 引入 `dirs` 库，并在 `agent.rs` 中利用 Rust 的 `#[cfg(target_os = "...")]` 宏针对 macOS、Windows、Linux 分别做路径匹配：
+    - **macOS**: `~/Library/Application Support/<Agent>`
+    - **Windows**: `%APPDATA%\<Agent>`
+    - **Linux**: `~/.config/<Agent>`
+  - 适配各自平台的进程名称（如 Windows 下为 `Codex.exe` 等）。
+  - **收益**：让其他操作系统的开发者和用户也能无缝享受到换肤体验。
+
+### 4. 自定义 CSS 实时沙盒与可视化微调 (Live CSS Editor & Fine-tuning)
+- **方案设计**：
+  - 在 Svelte 前端引入微型编辑器（如 `monaco-editor` 或是轻量级的 `code-jar`），并在 UI 上增设“实时调试”面板。
+  - 提供可视化滑动条，供用户实时微调关键 CSS 变量，例如：
+    - 背景图毛玻璃模糊度 (`backdrop-filter: blur(Npx)`)
+    - 背景图片透明度/遮罩深浅 (`rgba(0,0,0, N)`)
+    - 主题主色调及字体强调色 (`--cl-accent` / `--ink`)
+  - 每次滑动滑块或修改编辑器内容，均通过 CDP 的 `Runtime.evaluate` 动态更新 WebView 中的自定义 `<style>` 标签。
+  - **收益**：提供所见即所得的主题微调体验，释放极客用户自定义主题的创造力。
+
+### 5. 主题配置标准化与社区/外部导入
+- **方案设计**：
+  - 规范化自定义主题格式，除了当前的 `bg.jpg`、`preview.jpg`、`theme.json` 之外，支持在 `theme.json` 中配置一个自定义的样式重载域。
+  - 允许直接通过 URL（如 GitHub Raw 链接）直接导入第三方主题，或者提供“主题市场/广场”的简单展示与一键安装功能。
+  - **收益**：丰富主题生态，降低用户分享和获取主题的成本。
+
+---
+
+## 四、 实施路线图推荐
+
+### 第一阶段：性能与基础体验优化（高性价比）
+1. **引入 `notify` 文件监听** 替代低效的轮询，降低功耗，达成瞬间注入效果。
+2. **引入 `cfg` 适配 Windows 和 Linux 平台路径**，解锁多平台用户。
+3. **规范化图片传输**，设计本地资源静态代理服务，干掉 Base64 注入方案。
+
+### 第二阶段：自定义与易用性增强
+1. 在 Svelte 端增加 **“样式调节滑块”**（毛玻璃模糊值、暗色遮罩比例）。
+2. 提供 **“自定义 CSS 注入沙盒”**，允许玩家手动追加 CSS 补丁，并将其自动保存到用户配置的自定义主题 JSON 中。
+
+### 第三阶段：生态与扩展性建设
+1. 推出简易的 **“主题在线导入”** 功能，支持解析远程 URL 的主题压缩包。
+2. 沉淀更好的适配器架构，方便开发者通过简单的选择器配置文件添加对其他 WebView 桌面程序（如 Notion, Slack 等）的主题注入支持。
+*** End Patch
diff --git a/docs/research/roadmap-competitive-research.md b/docs/research/roadmap-competitive-research.md
new file mode 100644
index 0000000..d9ec910
--- /dev/null
+++ b/docs/research/roadmap-competitive-research.md
@@ -0,0 +1,252 @@
+# Agent Theme 优化提升方案
+
+> 基于同类产品与开源项目的竞品调研，为 agent-theme 制定的改进路线图。
+> 调研时间：2026-06-13
+
+---
+
+## 一、竞品全景
+
+### 1. 直接竞品：Codex Desktop 主题工具
+
+| 项目 | 技术方案 | 特点 | 状态 |
+|---|---|---|---|
+| **[jstxn/codex-themes](https://github.com/jstxn/codex-themes)** | Shell 启动器 + Node.js 脚本注入 CSS | 轻量 CLI 工具，JSON 主题格式，自定义调色板 | ⚠️ 已归档，因 Codex 官方支持主题 |
+| **[rzh0504/codex-themes-fix](https://github.com/rzh0504/codex-themes-fix)** | jstxn 的 fork，扩展 Windows 支持 | 修复了部分兼容性问题，跨平台 Shell/PowerShell 启动器 | 维护中 |
+| **agent-theme（本项目）** | 独立 Tauri v2 桌面应用 + CDP 注入 | GUI 操作、背景图 + 磨砂玻璃、自定义裁剪、11 套内置主题 | 活跃开发中 |
+
+**关键发现：** OpenAI 于 2026 年 3 月在 Codex Desktop 中内置了官方主题系统（`codex-theme-v1` JSON 格式），支持基础主题选择、每通道颜色控制、字体覆盖。这对所有第三方 Codex 主题工具构成了直接竞争压力。
+
+### 2. 相邻领域：AI 聊天应用换肤工具
+
+| 项目 | 目标应用 | 技术方案 | 亮点 |
+|---|---|---|---|
+| **[StylerGPT](https://stylergpt.com/)** | ChatGPT Web | Chrome 扩展 | 壁纸、字体、对比度、间距、代码块主题、Prompt 管理器、对话文件夹、本地导出；4.7/5 评分 |
+| **[ChatGPT-Color-Tweak](https://github.com/LuisGot/ChatGPT-Color-Tweak)** | ChatGPT Web | WXT + TypeScript 浏览器扩展 | CSS 变量注入、实时预览、浏览器 storage 持久化 |
+| **[custom-chatgpt-themes](https://github.com/sbukkap/custom-chatgpt-themes)** | ChatGPT Web | Chrome 扩展 (Manifest V3) | 预设主题 + 颜色拾取器自定义、chrome.storage.sync 跨设备同步 |
+| **[Claude Desktop Custom Themes](https://github.com/patrickjaja/claude-desktop-bin/tree/master/themes)** | Claude Desktop (Electron) | 修改 app.asar + CSS 变量覆盖 | HSL 三元组变量体系、多窗口主题一致性 |
+| **[TweakCC](https://claudelog.com/claude-code-mcps/tweakcc/)** | Claude Code (TUI) | React + Ink 终端交互 | 终端内主题创建器、实时预览 |
+
+### 3. 同类模式参考：桌面应用 CSS 注入生态
+
+| 项目 | 目标应用 | 模式 | 规模 |
+|---|---|---|---|
+| **[BetterDiscord](https://betterdiscord.app/)** | Discord | 客户端 Mod + CSS 主题 | 数千套社区主题，最成熟的桌面应用换肤生态 |
+| **Vencord / Equicord** | Discord | BetterDiscord 替代品 | 跨平台、插件 + 主题库、透明窗口效果 |
+| **[Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css)** | VS Code | 扩展注入 | VS Code 扩展商店最流行的外观定制方案 |
+| **[Seelen UI](https://seelen.io/apps/seelen-ui)** | Windows 桌面 | Rust + Tauri | 任务栏替换、窗口平铺、动态壁纸、桌面小部件 |
+
+---
+
+## 二、核心挑战与机遇
+
+### 威胁
+1. **Codex 官方主题已上线** — 颜色/字体定制已被内置，第三方工具需要提供官方不覆盖的差异化价值
+2. **竞品技术门槛低** — codex-themes 用一个 Shell 脚本就实现了基本换肤，用户迁移成本极低
+
+### 机遇
+1. **官方主题不支持背景图** — agent-theme 的角色壁纸 + 磨砂玻璃是独有的视觉卖点
+2. **官方主题不支持多代理切换** — Codex + Antigravity 双代理支持是独有功能
+3. **AI 应用多样化** — Claude Desktop、Cursor、Windsurf 等产品都在用 Electron，换肤需求广泛存在
+4. **社区主题生态空白** — 目前没有任何 AI 聊天工具有 BetterDiscord 级别的主题社区
+
+---
+
+## 三、优化提升方案
+
+### P0 — 生存线（解决核心竞争力问题）
+
+#### 1. 定位升级：从「Codex 换肤工具」到「AI 桌面应用主题引擎」
+
+**现状：** 仅支持 Codex Desktop 和 Antigravity 两个目标。
+
+**改进：**
+- 新增目标支持：Claude Desktop（Electron，修改 `app.asar` 的 CSS 变量）、Cursor / Windsurf（VS Code 系，可复用 CDP 注入逻辑）、ChatGPT Desktop（如有 Electron 版）
+- 将「代理类型」选择器扩展为「应用目标」管理面板，每个目标独立配置注入策略
+- 品牌叙事从「Codex 的皮肤伴侣」转向「AI 工作空间的主题引擎」
+
+**参考：** BetterDiscord 的成功在于它不只是「Discord 皮肤」，而是整个 Discord 客户端的增强框架。
+
+#### 2. 背景图动态效果
+
+**现状：** 仅支持静态 `.jpg` 背景图。
+
+**改进：**
+- 支持 **视频背景**（`.mp4` / `.webm`），类似 Wallpaper Engine 的桌面动态壁纸
+- 支持 **CSS 动画背景**（粒子效果、渐变流动、星空等），通过 CDP 注入 `@keyframes` 动画
+- 新增「呼吸光晕」效果：根据聊天消息流动产生微妙的光效变化
+- 背景图支持 **视差滚动**（parallax），鼠标移动时背景微移，增强空间感
+
+**参考：** Seelen UI 的动态壁纸系统、Wallpaper Engine 的视频壁纸方案。
+
+#### 3. 主题在线分享市场
+
+**现状：** 11 套内置主题 + 用户自定义上传，无分享机制。
+
+**改进：**
+- 建立 **主题仓库**（GitHub Pages 或独立网站），类似 BetterDiscord 的 [themes.betterdiscord.app](https://betterdiscord.app/themes)
+- 定义 `agent-theme-v1` 主题包格式（JSON 配置 + 预览图 + 背景资源 + CSS 附加样式）
+- 应用内集成 **主题浏览器**，支持一键安装社区主题
+- 提交机制：用户创建的主题可导出为主题包文件，提交到 GitHub 仓库的 PR
+- 热门主题排行榜、标签分类（二次元、风景、极简、赛博朋克等）
+
+**参考：** BetterDiscord 主题生态、Vencord 主题库 [themes.equicord.org](https://themes.equicord.org/)。
+
+### P1 — 差异化（建立护城河）
+
+#### 4. 可视化主题编辑器
+
+**现状：** 自定义主题仅支持上传背景图 + 裁剪。
+
+**改进：**
+- 内置 **实时可视化编辑器**：拖拽颜色拾取器调整每个 CSS 变量，实时预览代理界面变化
+- 编辑器面板分组：玻璃效果（模糊度、透明度、边框）、配色方案（文字、强调色、表面色）、背景控制（位置、缩放、滤镜）
+- **吸色工具**：从背景图中自动提取主色调，一键生成匹配的配色方案
+- **AI 生成主题**：输入文字描述（如「赛博朋克夜间城市」），AI 自动生成配色 + 推荐背景图
+- 导出为 `agent-theme-v1` JSON，方便分享
+
+**参考：** StylerGPT 的颜色拾取器、[bdeditor.dev](https://bdeditor.dev/)（BetterDiscord 主题在线编辑器）、ChatGPT-Color-Tweak 的实时 CSS 变量注入。
+
+#### 5. 窗口透明与系统级视觉融合
+
+**现状：** agent-theme 自身的窗口使用标准 Tauri 窗口外观。
+
+**改进：**
+- 使用 [tauri-apps/window-vibrancy](https://github.com/tauri-apps/window-vibrancy) 为伴侣应用自身窗口添加 **macOS vibrancy（NSVisualEffectView）** 效果
+- 支持 **透明窗口模式**：伴侣面板半透明悬浮，与桌面壁纸自然融合
+- 支持 **菜单栏模式**（Menu Bar Only）：伴侣缩小为菜单栏图标 + 下拉面板，减少桌面占用
+- 圆角窗口 + 无边框设计，更像原生 macOS 工具
+
+**参考：** window-vibrancy 对 macOS `NSVisualEffectView` 的封装、Vencord 的透明窗口主题。
+
+#### 6. CDP 注入健壮性与智能重连
+
+**现状：** 通过 `Page.addScriptToEvaluateOnNewDocument` 注入，代理重启后丢失。
+
+**改进：**
+- 实现 **CDP 连接池** 和 **指数退避重连**，避免端口漂移时注入失败
+- **增量注入**：只在主题变更时重新注入，而非每次全量注入
+- **注入状态可视化**：在 UI 中实时显示 CDP 连接状态、注入是否生效、上次注入时间
+- **注入失败自动恢复**：当检测到页面刷新或导航时，自动重新注入当前主题
+- 支持 `Page.addScriptToEvaluateOnNewDocument` + `Runtime.evaluate` 双通道，前者用于持久注入，后者用于即时样式更新（无需刷新即可生效）
+
+**参考：** Claude Desktop 主题方案通过修改 `app.asar` 实现持久化（不会因重启丢失），这是 CDP 注入的天然弱点，需要更好的恢复机制来弥补。
+
+### P2 — 生态扩展（规模化增长）
+
+#### 7. 跨平台支持
+
+**现状：** 仅支持 macOS，`agent.rs` 硬编码 macOS 路径和进程检测逻辑。
+
+**改进：**
+- **Windows 适配**：
+  - 进程检测改用 `wmic` / `tasklist` 或 Windows API
+  - 配置路径改用 `%APPDATA%\agent-theme\`
+  - WebView2 的 CDP 端口发现逻辑（Edge WebView2 的 DevToolsActivePort 路径不同）
+- **Linux 适配**：
+  - 进程检测改用 `/proc` 或 `pgrep`
+  - 配置路径改用 `~/.config/agent-theme/`
+  - WebKitGTK 的调试端口发现
+- 构建抽象层：将平台相关逻辑抽到 `platform/` 模块，使用 `#[cfg(target_os)]` 条件编译
+
+**参考：** rzh0504/codex-themes-fix 已实现跨平台（macOS + Windows）的 Shell/PowerShell 启动器。
+
+#### 8. 主题自动调度
+
+**改进：**
+- **时间调度**：白天自动切换到明亮主题，夜间切换到暗色主题
+- **代理联动**：检测到当前代理状态变化时自动切换对应主题配置
+- **快捷键**：全局热键快速切换主题或开关主题注入
+- **情景模式**：为不同工作场景（编码、写作、休息）预设主题组合
+
+#### 9. 分发与更新
+
+**现状：** 通过 GitHub Releases 手动下载 `.dmg`，无自动更新。
+
+**改进：**
+- **Homebrew Cask**：`brew install --cask agent-theme`，方便 macOS 用户安装
+- **Tauri 内置自动更新**：利用 Tauri v2 的 [updater plugin](https://v2.tauri.app/plugin/updater/)，配合 GitHub Releases 实现静默下载 + 一键安装
+- **macOS 公证（Notarization）**：完成 Apple 公证流程，消除首次打开的 Gatekeeper 弹窗
+- **Sparkle 框架集成**（macOS 原生更新方案）作为备选
+
+**参考：** StylerGPT 通过 Chrome Web Store 分发、BetterDiscord 有独立安装器和自动更新。
+
+### P3 — 锦上添花（体验打磨）
+
+#### 10. 主题音效系统
+
+- 为每个主题配置 **环境音效**（雨声、咖啡厅、白噪音等）
+- 切换主题时同时切换音效氛围
+- 音量控制和独立开关
+
+#### 11. 智能配色推荐
+
+- 上传背景图后，使用颜色提取算法（如 `color-thief`）自动推荐匹配的配色方案
+- 提供 3-5 个风格预设（柔和、高对比、霓虹、复古等）
+
+#### 12. 主题预览增强
+
+- **3D 预览**：以透视角度展示主题在代理界面中的效果
+- **预览视频**：为主题生成短视频展示动画效果
+- **实时对比**：分屏对比两个主题的效果
+
+#### 13. 本地主题配置同步
+
+- 通过 iCloud / OneDrive 同步 `~/.codex/agent-theme/` 配置目录
+- 支持导出/导入完整配置包（所有主题 + 偏好设置）
+
+---
+
+## 四、技术架构建议
+
+### 当前架构优势
+- Tauri v2 + Rust 后端 = 极小的二进制体积（~5MB vs Electron 的 ~150MB）
+- CDP 注入方案安全可逆，不修改代理源码
+- Svelte + Tailwind 前端 = 快速的 UI 响应
+
+### 建议改进的技术栈
+
+| 领域 | 当前 | 建议 | 理由 |
+|---|---|---|---|
+| 主题包格式 | 自定义 `theme.json` | 对齐 `codex-theme-v1` + 扩展字段 | 兼容官方格式，降低用户迁移成本 |
+| CDP 库 | 手写 WebSocket | `chromiumoxide` crate | 更成熟的 CDP 客户端，自动重连、类型安全 |
+| 配色提取 | 无 | `color-thief-rust` 或 `palette` crate | 自动从背景图提取主色调 |
+| 窗口效果 | 标准窗口 | `window-vibrancy` | macOS vibrancy、Windows acrylic/mica |
+| 自动更新 | 无 | Tauri updater plugin | 官方方案，安全签名验证 |
+| 跨平台路径 | 硬编码 | `dirs` crate | 标准化各平台配置路径 |
+
+### 代码质量改进
+
+1. **错误处理**：`theme.rs`（70KB）是项目最大的文件，建议拆分为 `theme/discovery.rs`、`theme/css.rs`、`theme/custom.rs` 等子模块
+2. **配置迁移**：当 `AppConfig` 结构变更时，实现版本化迁移逻辑，保证旧用户升级不丢配置
+3. **测试覆盖**：当前无单元测试，建议为 CSS 生成、主题发现、配置读写添加测试
+4. **CI 增强**：在 CI 中添加 `cargo test`、前端单元测试（Vitest）、以及 Tauri 构建产物的 smoke test
+
+---
+
+## 五、优先级排序建议
+
+```
+紧急度高 ─────────────────────────────────── 紧急度低
+
+  P0-1 多应用支持    P0-3 主题市场    P1-5 窗口透明    P2-8 自动调度    P3-10 音效
+  P0-2 动态背景      P1-4 编辑器      P1-6 CDP 健壮    P2-9 分发更新    P3-11 配色推荐
+                                                            P2-7 跨平台      P3-12 预览增强
+                                                                               P3-13 配置同步
+```
+
+**建议执行顺序：**
+1. **短期（1-2 周）**：P1-6 CDP 健壮性改进（提升现有体验）、P3-11 智能配色推荐（低成本高感知）
+2. **中期（1-2 月）**：P0-2 动态背景、P1-4 可视化编辑器、P0-3 主题市场的基础架构
+3. **长期（3-6 月）**：P0-1 多应用支持、P2-7 跨平台、P2-9 分发与自动更新
+
+---
+
+## 六、总结
+
+agent-theme 在 AI 桌面应用换肤领域目前是 **唯一的 Tauri 原生 GUI 方案**，与 codex-themes 的 CLI 方案和各种浏览器扩展方案形成了明显的技术差异化。面对 Codex 官方主题系统的上线，核心应对策略是：
+
+1. **做官方做不到的事**：角色壁纸、磨砂玻璃、动态背景、多代理切换 —— 这些是官方不太会做的重视觉功能
+2. **扩大目标范围**：从 Codex 专属工具升级为 AI 工作空间主题引擎，覆盖更多 AI 应用
+3. **建立社区飞轮**：主题市场 + 社区创作 = 用户粘性 + 内容壁垒
+4. **打磨体验细节**：自动配色、编辑器、音效、自动调度 —— 让「换肤」从功能变成享受
diff --git a/index.html b/index.html
index d946ee5..e1b25f4 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Agent Theme Companion</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
   <div id="app"></div>
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 7528dfc..e9f506f 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -20,7 +20,7 @@ tauri-build = { version = "2.6.2", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
-tauri = { version = "2.11.2", features = [] }
+tauri = { version = "2.11.2", features = ["macos-private-api", "tray-icon"] }
 tauri-plugin-log = "2"
 sysinfo = "0.36.1"
 reqwest = { version = "0.13.3", features = ["json"] }
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index dfb19b5..48f2723 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -186,15 +186,59 @@ async fn delete_custom_theme_cmd(_app: AppHandle) -> Result<(), String> {
     Ok(())
 }
 
+/// Show / focus the main window (used by the tray and single-instance hook).
+fn show_main_window(app: &AppHandle) {
+    if let Some(window) = app.get_webview_window("main") {
+        let _ = window.show();
+        let _ = window.unminimize();
+        let _ = window.set_focus();
+    }
+}
+
+/// Menu-bar tray icon: left-click shows the window, right-click opens a menu
+/// (Show Window / Quit). This is the only way to fully quit the app.
+fn setup_tray(app: &AppHandle) -> tauri::Result<()> {
+    use tauri::menu::{Menu, MenuItem};
+    use tauri::tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent};
+
+    let show_item = MenuItem::with_id(app, "show", "Show Window", true, None::<&str>)?;
+    let quit_item = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
+    let menu = Menu::with_items(app, &[&show_item, &quit_item])?;
+
+    let mut builder = TrayIconBuilder::with_id("main-tray")
+        .tooltip("Agent Theme")
+        .menu(&menu)
+        .show_menu_on_left_click(false)
+        .on_menu_event(|app, event| match event.id.as_ref() {
+            "show" => show_main_window(app),
+            "quit" => app.exit(0),
+            _ => {}
+        })
+        .on_tray_icon_event(|tray, event| {
+            if let TrayIconEvent::Click {
+                button: MouseButton::Left,
+                button_state: MouseButtonState::Up,
+                ..
+            } = event
+            {
+                show_main_window(tray.app_handle());
+            }
+        });
+
+    if let Some(icon) = app.default_window_icon() {
+        builder = builder.icon(icon.clone());
+    }
+
+    builder.build(app)?;
+    Ok(())
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
         .plugin(tauri_plugin_log::Builder::default().build())
         .plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
-            let _ = app
-                .get_webview_window("main")
-                .expect("no main window")
-                .set_focus();
+            show_main_window(app);
         }))
         .manage(AppState {
             cdp_port: Mutex::new(None),
@@ -212,7 +256,21 @@ pub fn run() {
             upload_custom_theme,
             delete_custom_theme_cmd,
         ])
+        .on_window_event(|window, event| {
+            // Closing the window keeps the background monitor alive — hide to the
+            // menu bar instead of quitting. Quit via the tray's Quit item.
+            if let tauri::WindowEvent::CloseRequested { api, .. } = event {
+                api.prevent_close();
+                let _ = window.hide();
+            }
+        })
         .setup(|app| {
+            // Menu-bar app: hide the Dock icon.
+            #[cfg(target_os = "macos")]
+            app.set_activation_policy(tauri::ActivationPolicy::Accessory);
+
+            setup_tray(app.handle())?;
+
             // Background monitor: discover existing debug ports and re-inject theme.
             let monitor_handle = app.handle().clone();
             tauri::async_runtime::spawn(async move {
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 6878269..f0a931a 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -10,13 +10,25 @@
   },
   "app": {
     "withGlobalTauri": false,
+    "macOSPrivateApi": true,
     "windows": [
       {
         "title": "",
-        "width": 800,
-        "height": 600,
+        "width": 560,
+        "height": 640,
+        "minWidth": 480,
+        "minHeight": 520,
         "resizable": true,
-        "fullscreen": false
+        "fullscreen": false,
+        "decorations": true,
+        "transparent": true,
+        "titleBarStyle": "Transparent",
+        "hiddenTitle": true,
+        "windowEffects": {
+          "effects": ["sidebar"],
+          "state": "active",
+          "radius": 18
+        }
       }
     ],
     "security": {
diff --git a/src/App.svelte b/src/App.svelte
index a629709..46c614a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import AgentSelector from './lib/components/AgentSelector.svelte';
-  import StatusBar from './lib/components/StatusBar.svelte';
+  import TopBar from './lib/components/TopBar.svelte';
   import ThemeGrid from './lib/components/ThemeGrid.svelte';
   import UploadModal from './lib/components/UploadModal.svelte';
   import { lastErrorStore } from './lib/stores';
@@ -13,21 +12,18 @@
   });
 </script>
 
-<main class="min-h-screen bg-[linear-gradient(135deg,#f8fbff_0%,#eef6ff_45%,#f6fbf7_100%)] text-[#1e293b]">
-  <div class="mx-auto flex max-w-[1180px] flex-col gap-[28px] px-[24px] py-[28px]">
-    <header class="flex flex-col items-center gap-[18px]">
-      <h1 class="text-[1.9rem] font-semibold tracking-[0] text-[#0f172a]">
-        Agent Theme Companion
-      </h1>
-      <AgentSelector />
-      <StatusBar />
-      {#if $lastErrorStore}
-        <p class="max-w-[680px] rounded-[8px] border border-red-200 bg-red-50 px-[14px] py-[10px] text-center text-[0.86rem] leading-[1.45] text-red-700">
-          {$lastErrorStore}
-        </p>
-      {/if}
-    </header>
+<main class="flex h-screen flex-col text-[var(--ink)]">
+  <TopBar />
 
+  <div class="flex-1 overflow-y-auto px-[16px] py-[14px]">
+    {#if $lastErrorStore}
+      <p
+        class="mb-[12px] rounded-[7px] px-[12px] py-[8px] text-[12px] leading-[1.45]"
+        style="color:var(--red); border:1px solid color-mix(in srgb,var(--red) 30%,transparent); background:color-mix(in srgb,var(--red) 12%,transparent);"
+      >
+        {$lastErrorStore}
+      </p>
+    {/if}
     <ThemeGrid />
   </div>
 
diff --git a/src/app.css b/src/app.css
index f1d8c73..1e66ea7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1 +1,111 @@
 @import "tailwindcss";
+
+/* ============================================================
+   Design tokens — native macOS, mokopaste-style
+   Light is primary; dark follows the system automatically.
+   ============================================================ */
+:root {
+  /* surfaces (sit on top of native vibrancy) */
+  --panel: rgba(250, 250, 252, 0.70);
+  --panel-elevated: rgba(255, 255, 255, 0.82);
+
+  /* text */
+  --ink: rgba(0, 0, 0, 0.85);
+  --ink-2: rgba(0, 0, 0, 0.50);
+  --ink-3: rgba(0, 0, 0, 0.30);
+
+  /* lines & control fills */
+  --separator: rgba(0, 0, 0, 0.08);
+  --fill: rgba(0, 0, 0, 0.05);
+  --fill-hover: rgba(0, 0, 0, 0.08);
+  --fill-active: rgba(0, 0, 0, 0.12);
+
+  /* accent (macOS system blue) */
+  --accent: #007aff;
+  --accent-hover: #0a84ff;
+  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
+  --on-accent: #ffffff;
+
+  /* system semantic colors */
+  --green: #34c759;
+  --red: #ff3b30;
+  --yellow: #ff9f0a;
+
+  /* elevation & shape */
+  --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.18);
+  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.10);
+  --radius-panel: 18px;
+  --radius-card: 10px;
+  --radius-control: 7px;
+  --radius-chip: 6px;
+
+  /* typography */
+  --font-ui: -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --panel: rgba(30, 30, 32, 0.55);
+    --panel-elevated: rgba(48, 48, 52, 0.72);
+
+    --ink: rgba(255, 255, 255, 0.92);
+    --ink-2: rgba(255, 255, 255, 0.55);
+    --ink-3: rgba(255, 255, 255, 0.35);
+
+    --separator: rgba(255, 255, 255, 0.10);
+    --fill: rgba(255, 255, 255, 0.06);
+    --fill-hover: rgba(255, 255, 255, 0.10);
+    --fill-active: rgba(255, 255, 255, 0.14);
+
+    --accent: #0a84ff;
+    --accent-hover: #409cff;
+
+    --green: #30d158;
+    --red: #ff453a;
+    --yellow: #ffd60a;
+
+    --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.45);
+    --shadow-card-hover: 0 2px 10px rgba(0, 0, 0, 0.35);
+  }
+}
+
+/* ============================================================
+   Base — transparent webview so the native vibrancy shows through;
+   the whole #app is the rounded floating panel.
+   ============================================================ */
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: transparent !important;
+  color: var(--ink);
+  font-family: var(--font-ui);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+#app {
+  height: 100vh;
+  overflow: hidden;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+/* thin, unobtrusive macOS-style scrollbars */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--fill-active);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
diff --git a/src/lib/components/AgentSelector.svelte b/src/lib/components/AgentSelector.svelte
index 092e499..70c94b7 100644
--- a/src/lib/components/AgentSelector.svelte
+++ b/src/lib/components/AgentSelector.svelte
@@ -9,25 +9,16 @@
     antigravity: 'Antigravity',
     linear: 'Linear',
   };
-
-  function handleClick(agent: AgentKind) {
-    switchAgent(agent);
-  }
 </script>
 
-<div class="flex self-center w-fit justify-center gap-[5px] p-[4px] rounded-[10px]
-  border border-[rgba(59,130,246,0.12)]
-  shadow-[inset_0_2px_4px_rgba(30,41,59,0.1),inset_0_-1px_2px_rgba(255,255,255,0.6)]
-  bg-[rgba(59,130,246,0.03)] overflow-hidden">
+<div class="grid grid-cols-3 gap-[2px] rounded-[var(--radius-control)] bg-[var(--fill)] p-[2px]">
   {#each agents as agent}
     <button
-      class="w-[120px] py-[6px] text-[0.85rem] font-medium text-center cursor-pointer
-        rounded-[6px] border-none transition-all duration-200
-        border-t border-b
+      class="rounded-[5px] py-[5px] text-center text-[12px] font-medium transition-colors duration-150
         {$configStore?.selectedAgent === agent
-          ? 'text-white bg-[linear-gradient(180deg,#7bb3f9_0%,#4a8de8_100%)] border-t-[rgba(255,255,255,0.4)] border-b-[rgba(30,80,160,0.25)] shadow-[0_2px_6px_rgba(37,99,235,0.3),0_-1px_0_rgba(255,255,255,0.3)_inset]'
-          : 'text-[#1e293b] bg-[linear-gradient(180deg,rgba(255,255,255,0.9)_0%,rgba(230,238,250,0.85)_100%)] border-t-[rgba(255,255,255,0.95)] border-b-[rgba(180,200,230,0.35)] shadow-[0_1px_3px_rgba(30,41,59,0.12),0_-1px_0_rgba(255,255,255,0.8)_inset]'}"
-      on:click={() => handleClick(agent)}
+          ? 'bg-[var(--accent)] text-[var(--on-accent)] shadow-[0_1px_2px_rgba(0,0,0,0.12)]'
+          : 'text-[var(--ink-2)] hover:bg-[var(--fill-hover)] hover:text-[var(--ink)]'}"
+      on:click={() => switchAgent(agent)}
     >
       {labels[agent]}
     </button>
diff --git a/src/lib/components/DropZone.svelte b/src/lib/components/DropZone.svelte
index 9160504..4ca5803 100644
--- a/src/lib/components/DropZone.svelte
+++ b/src/lib/components/DropZone.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Icon from './Icon.svelte';
+
   export let onFileSelected: (file: File) => void;
 
   let isDragOver = false;
@@ -28,11 +30,11 @@
 </script>
 
 <div
-  class="border-2 border-dashed rounded-[12px] p-[40px_20px] text-center cursor-pointer
-    flex flex-col items-center gap-[12px] transition-all duration-200
+  class="flex cursor-pointer flex-col items-center gap-[10px] rounded-[10px] border border-dashed
+    p-[36px_20px] text-center transition-colors
     {isDragOver
-      ? 'border-[#3b82f6] bg-[rgba(59,130,246,0.05)]'
-      : 'border-[rgba(59,130,246,0.15)]'}"
+      ? 'border-[var(--accent)] bg-[var(--accent-soft)]'
+      : 'border-[var(--separator)] hover:border-[var(--ink-3)]'}"
   on:drop={handleDrop}
   on:dragover={handleDragOver}
   on:dragleave={handleDragLeave}
@@ -41,9 +43,11 @@
   role="button"
   tabindex="0"
 >
-  <span class="text-[3rem]">📤</span>
-  <p class="text-[#475569]">Drag image here, or <span class="text-[#3b82f6] font-semibold">Browse Files</span></p>
-  <span class="text-[0.75rem] text-[#94a3b8]">JPG, PNG supported, max 20MB</span>
+  <span class="text-[var(--ink-3)]"><Icon name="upload" size={28} strokeWidth={1.4} /></span>
+  <p class="text-[13px] text-[var(--ink-2)]">
+    Drag image here, or <span class="font-medium text-[var(--accent)]">browse files</span>
+  </p>
+  <span class="text-[11px] text-[var(--ink-3)]">JPG, PNG · up to 20MB</span>
   <input
     bind:this={fileInput}
     type="file"
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
new file mode 100644
index 0000000..612044c
--- /dev/null
+++ b/src/lib/components/Icon.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  // SF Symbols-style line icons. currentColor + stroke, so they inherit
+  // text color and the accent everywhere. Replaces all emoji in the UI.
+  export let name:
+    | 'xmark'
+    | 'plus'
+    | 'minus'
+    | 'checkmark'
+    | 'arrow-clockwise'
+    | 'upload'
+    | 'chevron-left'
+    | 'chevron-right';
+  export let size: number = 16;
+  export let strokeWidth: number = 1.6;
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+  style="display:block"
+>
+  {#if name === 'xmark'}
+    <path d="M6 6l12 12M18 6L6 18" />
+  {:else if name === 'plus'}
+    <path d="M12 5v14M5 12h14" />
+  {:else if name === 'minus'}
+    <path d="M5 12h14" />
+  {:else if name === 'checkmark'}
+    <path d="M5 12.5l4.5 4.5L19 6" />
+  {:else if name === 'arrow-clockwise'}
+    <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+    <path d="M21 3v6h-6" />
+  {:else if name === 'upload'}
+    <path d="M12 15.5V5" />
+    <path d="M8 9l4-4 4 4" />
+    <path d="M5 19h14" />
+  {:else if name === 'chevron-left'}
+    <path d="M15 6l-6 6 6 6" />
+  {:else if name === 'chevron-right'}
+    <path d="M9 6l6 6-6 6" />
+  {/if}
+</svg>
diff --git a/src/lib/components/ImageCropper.svelte b/src/lib/components/ImageCropper.svelte
index 74d6da7..48c7abe 100644
--- a/src/lib/components/ImageCropper.svelte
+++ b/src/lib/components/ImageCropper.svelte
@@ -104,12 +104,12 @@
   }
 </script>
 
-<div class="flex flex-col gap-[20px] items-center">
+<div class="flex flex-col items-center gap-[16px]">
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={cropContainer}
-    class="w-full h-[350px] bg-[#e2e8f0] rounded-[12px] overflow-hidden relative
-      border border-[rgba(59,130,246,0.15)] flex items-center justify-center select-none"
+    class="relative flex h-[320px] w-full select-none items-center justify-center overflow-hidden rounded-[10px] border border-[var(--separator)]"
+    style="background:var(--fill);"
     on:mousedown={handleMouseDown}
     on:mousemove={handleMouseMove}
     on:mouseup={handleMouseUp}
@@ -119,51 +119,51 @@
     <img
       bind:this={cropImage}
       src={imageSrc}
-      alt="To Crop"
-      class="max-w-full max-h-full absolute cursor-move select-none"
+      alt="To crop"
+      class="absolute max-h-full max-w-full cursor-move select-none"
       style="transform: translate({imageX}px, {imageY}px) scale({imageScale}); transform-origin: 0 0;"
       on:load={onImageLoad}
       draggable="false"
     />
     <div
-      class="absolute w-[300px] h-[300px] border-2 border-[#3b82f6]
-        shadow-[0_0_0_9999px_rgba(30,41,59,0.2)] pointer-events-none rounded-[4px]"
+      class="pointer-events-none absolute h-[300px] w-[300px] rounded-[4px]"
+      style="border:2px solid var(--accent); box-shadow:0 0 0 9999px rgba(0,0,0,0.35);"
     ></div>
   </div>
 
   <div class="w-full">
-    <div class="flex items-center gap-[16px]">
-      <label for="zoom-slider" class="font-medium text-[#475569]">Zoom:</label>
+    <div class="flex items-center gap-[12px]">
+      <label for="zoom-slider" class="text-[12px] font-medium text-[var(--ink-2)]">Zoom</label>
       <input
-        type="range" id="zoom-slider"
+        type="range"
+        id="zoom-slider"
         min="10"
         max="200"
         value="100"
-        class="flex-grow accent-[#3b82f6]"
+        class="flex-grow"
+        style="accent-color:var(--accent)"
         on:input={handleZoom}
       />
     </div>
-    <p class="text-[0.8rem] text-[#94a3b8] mt-[8px] text-center">
-      💡 Tip: Drag on the image to adjust crop position.
+    <p class="mt-[8px] text-center text-[11px] text-[var(--ink-3)]">
+      Drag the image to reposition the crop.
     </p>
   </div>
 
-  <div class="flex gap-[12px] justify-end w-full">
+  <div class="flex w-full justify-end gap-[10px]">
     <button
-      class="px-[20px] py-[10px] rounded-[10px] text-[0.9rem] font-medium cursor-pointer
-        bg-[rgba(59,130,246,0.07)] text-[#1e293b] border border-[rgba(59,130,246,0.1)]
-        hover:bg-[rgba(59,130,246,0.12)] transition-colors"
+      class="rounded-[var(--radius-control)] bg-[var(--fill)] px-[16px] py-[8px] text-[13px]
+        font-medium text-[var(--ink)] transition-colors hover:bg-[var(--fill-hover)]"
       on:click={onCancel}
     >
       Re-select
     </button>
     <button
-      class="px-[20px] py-[10px] rounded-[10px] text-[0.9rem] font-medium cursor-pointer
-        bg-[#3b82f6] text-white shadow-[0_4px_14px_rgba(59,130,246,0.35)]
-        hover:bg-[#60a5fa] transition-colors"
+      class="rounded-[var(--radius-control)] bg-[var(--accent)] px-[16px] py-[8px] text-[13px]
+        font-semibold text-white transition-colors hover:bg-[var(--accent-hover)]"
       on:click={performCrop}
     >
-      Save & Apply
+      Save &amp; Apply
     </button>
   </div>
 </div>
diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
index e3e16ea..3d333d6 100644
--- a/src/lib/components/StatusBar.svelte
+++ b/src/lib/components/StatusBar.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { statusStore, configStore, isRestartingStore } from '../stores';
-  import { restartAgent, setEnabled } from '../actions';
+  import { statusStore } from '../stores';
   import StatusDot from './StatusDot.svelte';
-  import Toggle from './Toggle.svelte';
 
   $: hasDebugPort = Boolean($statusStore?.cdpPort);
   $: dotStatus = ($statusStore === null
@@ -11,65 +9,23 @@
       ? 'online'
       : $statusStore.running
         ? 'checking'
-      : 'offline') as 'online' | 'offline' | 'checking';
+        : 'offline') as 'online' | 'offline' | 'checking';
 
   $: statusText = $statusStore === null
-    ? 'Checking...'
+    ? 'Checking…'
     : $statusStore.running && hasDebugPort
       ? 'Ready'
       : $statusStore.running
         ? 'No debug port'
-      : 'Not running';
+        : 'Not running';
 
-  $: cdpPort = $statusStore?.cdpPort ?? '-';
-
-  function handleToggle(value: boolean) {
-    setEnabled(value);
-  }
-
-  function handleRestart() {
-    restartAgent();
-  }
+  $: cdpPort = $statusStore?.cdpPort ?? null;
 </script>
 
-<div class="flex flex-nowrap items-center p-[12px_16px] gap-[20px]
-  w-fit self-center bg-white/75 rounded-[16px]
-  border border-[rgba(59,130,246,0.15)]
-  backdrop-blur-[20px] shadow-[0_8px_32px_rgba(30,41,59,0.08)]">
-
-  <div class="flex flex-col items-center w-[120px]">
-    <div class="flex items-center gap-2">
-      <StatusDot status={dotStatus} />
-      <span class="text-[1rem] font-semibold text-[#1e293b]">{statusText}</span>
-    </div>
-  </div>
-
-  <div class="flex flex-col items-center w-[120px]">
-    <span class="text-[1rem] font-semibold text-[#0ea5e9]">{cdpPort}</span>
-  </div>
-
-  <div class="flex flex-col items-center w-[120px]">
-    <Toggle
-      checked={$configStore?.enabled ?? false}
-      onChange={handleToggle}
-    />
-  </div>
-
-  <div class="flex flex-col items-center w-[132px]">
-    <button
-      class="h-[36px] w-[120px] rounded-[8px]
-        border border-[rgba(37,99,235,0.18)]
-        bg-[linear-gradient(180deg,#ffffff_0%,#eef5ff_100%)]
-        text-[0.86rem] font-semibold text-[#2563eb]
-        shadow-[0_1px_3px_rgba(30,41,59,0.12),0_-1px_0_rgba(255,255,255,0.9)_inset]
-        transition-all duration-200
-        hover:border-[rgba(37,99,235,0.32)] hover:bg-[linear-gradient(180deg,#ffffff_0%,#e3efff_100%)]
-        disabled:cursor-not-allowed disabled:opacity-60"
-      disabled={$isRestartingStore}
-      title="Restart selected app with local debug port"
-      on:click={handleRestart}
-    >
-      {$isRestartingStore ? 'Restarting' : 'Restart App'}
-    </button>
-  </div>
+<div data-tauri-drag-region class="flex items-center gap-[7px]">
+  <StatusDot status={dotStatus} />
+  <span class="text-[13px] font-medium text-[var(--ink)]">{statusText}</span>
+  {#if cdpPort}
+    <span class="text-[12px] text-[var(--ink-3)]" style="font-family:var(--font-mono)">:{cdpPort}</span>
+  {/if}
 </div>
diff --git a/src/lib/components/StatusDot.svelte b/src/lib/components/StatusDot.svelte
index 9d27bfc..e03a65a 100644
--- a/src/lib/components/StatusDot.svelte
+++ b/src/lib/components/StatusDot.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
   export let status: 'online' | 'offline' | 'checking' = 'checking';
+
+  const colors = {
+    online: 'var(--green)',
+    offline: 'var(--red)',
+    checking: 'var(--yellow)',
+  } as const;
 </script>
 
 <span
-  class="inline-block w-[10px] h-[10px] rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.2),inset_0_1px_2px_rgba(255,255,255,0.4)]"
-  class:bg-[radial-gradient(circle_at_35%_35%,#4ade80,#16a34a)]={status === 'online'}
-  class:bg-[radial-gradient(circle_at_35%_35%,#f87171,#dc2626)]={status === 'offline'}
-  class:bg-[radial-gradient(circle_at_35%_35%,#fbbf24,#d97706)]={status === 'checking'}
+  class="inline-block h-[8px] w-[8px] shrink-0 rounded-full"
+  style="background:{colors[status]}; box-shadow:0 0 0 3px color-mix(in srgb, {colors[status]} 20%, transparent);"
 ></span>
diff --git a/src/lib/components/ThemeCard.svelte b/src/lib/components/ThemeCard.svelte
index b63a227..280ec1e 100644
--- a/src/lib/components/ThemeCard.svelte
+++ b/src/lib/components/ThemeCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { configStore } from '../stores';
   import { applyTheme, deleteTheme } from '../actions';
+  import Icon from './Icon.svelte';
   import type { Theme } from '../types';
 
   export let theme: Theme;
@@ -24,54 +25,43 @@
 </script>
 
 <div
-  class="relative rounded-[16px] overflow-hidden cursor-pointer
-    border transition-all duration-300 h-[250px]
-    {isActive
-      ? 'border-[#3b82f6] shadow-[0_0_16px_rgba(59,130,246,0.25)]'
-      : 'border-[rgba(59,130,246,0.15)] hover:border-[rgba(59,130,246,0.35)]'}"
+  class="group relative h-[120px] cursor-pointer overflow-hidden rounded-[var(--radius-card)]
+    transition duration-200 hover:brightness-[1.03]"
+  style="box-shadow:{isActive ? '0 0 0 2px var(--accent)' : '0 0 0 1px var(--separator)'};"
   on:click={handleApply}
   on:keydown={(e) => e.key === 'Enter' && handleApply()}
   role="button"
   tabindex="0"
 >
-  <!-- Preview Image -->
-  <img
-    src={previewSrc}
-    alt={theme.displayName.en}
-    class="w-full h-full object-cover"
-  />
+  <img src={previewSrc} alt={theme.displayName.en} class="h-full w-full object-cover" />
 
-  <!-- Gradient Overlay -->
-  <div class="absolute inset-0 bg-gradient-to-t from-[rgba(241,245,250,0.92)] via-[rgba(241,245,250,0.4)] to-transparent pointer-events-none"></div>
+  <!-- neutral bottom scrim -->
+  <div
+    class="pointer-events-none absolute inset-x-0 bottom-0 h-[56px]"
+    style="background:linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.30) 45%, transparent);"
+  ></div>
 
-  <!-- Bottom Info -->
-  <div class="absolute bottom-0 left-0 right-0 p-[12px_16px] flex items-end justify-between">
-    <div>
-      <h3 class="text-[0.95rem] font-semibold text-[#1e293b]">{theme.displayName.en}</h3>
-      <p class="text-[0.75rem] text-[#94a3b8]">
-        {theme.isCustom ? 'User uploaded' : 'Built-in'}
-      </p>
+  <div class="absolute inset-x-0 bottom-0 flex items-end justify-between gap-[6px] p-[8px_10px]">
+    <div class="min-w-0">
+      <h3 class="truncate text-[12px] font-semibold text-white">{theme.displayName.en}</h3>
     </div>
+  </div>
 
-    <div class="flex items-center gap-2">
-      {#if theme.isCustom}
-        <button
-          class="w-[24px] h-[24px] rounded-full flex items-center justify-center
-            bg-[rgba(239,68,68,0.2)] border border-[rgba(239,68,68,0.4)]
-            text-white text-[0.7rem] font-bold hover:bg-[rgba(239,68,68,0.4)]
-            transition-colors"
-          title="Delete custom theme"
-          on:click|stopPropagation={handleDelete}
-        >
-          ✕
-        </button>
-      {/if}
-
-      {#if isActive}
-        <span class="text-[0.75rem] font-semibold text-[#10b981]">Applied</span>
-      {:else}
-        <span class="text-[0.75rem] font-semibold text-[#3b82f6]">Use Theme</span>
-      {/if}
+  {#if isActive}
+    <div
+      class="absolute right-[8px] top-[8px] flex h-[20px] w-[20px] items-center justify-center rounded-full text-white"
+      style="background:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,0.3);"
+    >
+      <Icon name="checkmark" size={13} strokeWidth={2.2} />
     </div>
-  </div>
+  {:else if theme.isCustom}
+    <button
+      class="absolute right-[8px] top-[8px] flex h-[20px] w-[20px] items-center justify-center rounded-full
+        bg-black/45 text-white opacity-0 transition-colors hover:bg-[var(--red)] group-hover:opacity-100"
+      title="Delete custom theme"
+      on:click|stopPropagation={handleDelete}
+    >
+      <Icon name="xmark" size={12} strokeWidth={2} />
+    </button>
+  {/if}
 </div>
diff --git a/src/lib/components/ThemeGrid.svelte b/src/lib/components/ThemeGrid.svelte
index 1a99d01..4057cc6 100644
--- a/src/lib/components/ThemeGrid.svelte
+++ b/src/lib/components/ThemeGrid.svelte
@@ -1,12 +1,64 @@
 <script lang="ts">
   import { themesStore } from '../stores';
   import ThemeCard from './ThemeCard.svelte';
-  import UploadCard from './UploadCard.svelte';
+  import Icon from './Icon.svelte';
+
+  const PAGE_SIZE = 9;
+  let page = 1;
+
+  $: total = $themesStore.length;
+  $: pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  $: if (page > pageCount) page = pageCount;
+  $: start = (page - 1) * PAGE_SIZE;
+  $: pageThemes = $themesStore.slice(start, start + PAGE_SIZE);
+
+  function go(p: number) {
+    page = Math.min(pageCount, Math.max(1, p));
+  }
 </script>
 
-<div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-[24px]">
-  {#each $themesStore as theme (theme.id)}
-    <ThemeCard {theme} />
-  {/each}
-  <UploadCard />
+<div class="flex flex-col gap-[14px]">
+  <div class="grid grid-cols-3 gap-[12px]">
+    {#each pageThemes as theme (theme.id)}
+      <ThemeCard {theme} />
+    {/each}
+  </div>
+
+  {#if pageCount > 1}
+    <div class="flex items-center justify-center gap-[4px]">
+      <button
+        class="flex h-[24px] w-[24px] items-center justify-center rounded-[6px] text-[var(--ink-2)]
+          transition-colors hover:bg-[var(--fill-hover)] hover:text-[var(--ink)]
+          disabled:opacity-30 disabled:hover:bg-transparent"
+        disabled={page === 1}
+        aria-label="Previous page"
+        on:click={() => go(page - 1)}
+      >
+        <Icon name="chevron-left" size={14} />
+      </button>
+
+      {#each Array(pageCount) as _, i}
+        <button
+          class="h-[24px] min-w-[24px] rounded-[6px] px-[7px] text-[12px] font-medium transition-colors
+            {page === i + 1
+              ? 'bg-[var(--accent)] text-[var(--on-accent)]'
+              : 'text-[var(--ink-2)] hover:bg-[var(--fill-hover)] hover:text-[var(--ink)]'}"
+          on:click={() => go(i + 1)}
+        >
+          {i + 1}
+        </button>
+      {/each}
+
+      <button
+        class="flex h-[24px] w-[24px] items-center justify-center rounded-[6px] text-[var(--ink-2)]
+          transition-colors hover:bg-[var(--fill-hover)] hover:text-[var(--ink)]
+          disabled:opacity-30 disabled:hover:bg-transparent"
+        disabled={page === pageCount}
+        aria-label="Next page"
+        on:click={() => go(page + 1)}
+      >
+        <Icon name="chevron-right" size={14} />
+      </button>
+    </div>
+  {/if}
 </div>
diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
index 8d0b441..e1347ca 100644
--- a/src/lib/components/Toggle.svelte
+++ b/src/lib/components/Toggle.svelte
@@ -4,27 +4,23 @@
   export let onChange: (value: boolean) => void = () => {};
 </script>
 
-<label class="relative inline-block w-[48px] h-[24px]">
+<label
+  class="relative inline-block h-[22px] w-[38px] shrink-0"
+  class:opacity-50={disabled}
+>
   <input
     type="checkbox"
     bind:checked
     {disabled}
     on:change={() => onChange(checked)}
-    class="opacity-0 w-0 h-0"
+    class="sr-only"
   />
   <span
-    class="slider absolute cursor-pointer inset-0 rounded-[24px] transition-all duration-300
-      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),0_1px_0_rgba(255,255,255,0.5)]
-      {checked
-        ? 'bg-[linear-gradient(180deg,#6ee7b7_0%,#22c55e_100%)] border-[rgba(34,197,94,0.4)]'
-        : 'bg-[linear-gradient(180deg,#d1d5db_0%,#9ca3af_100%)] border-[rgba(100,110,130,0.3)]'}"
-  >
-    <span
-      class="absolute content-[''] h-[16px] w-[16px] left-[3px] bottom-[3px]
-        bg-[radial-gradient(circle_at_40%_35%,#ffffff,#e5e7eb)]
-        shadow-[0_1px_3px_rgba(0,0,0,0.25),inset_0_1px_1px_rgba(255,255,255,0.8)]
-        rounded-full transition-all duration-300"
-      style={checked ? 'transform: translateX(24px);' : ''}
-    ></span>
-  </span>
+    class="absolute inset-0 rounded-full transition-colors duration-200"
+    style="background:{checked ? 'var(--green)' : 'var(--fill-active)'};"
+  ></span>
+  <span
+    class="absolute left-[2px] top-[2px] h-[18px] w-[18px] rounded-full bg-white transition-transform duration-200"
+    style="box-shadow:0 1px 2px rgba(0,0,0,0.25);{checked ? ' transform:translateX(16px);' : ''}"
+  ></span>
 </label>
diff --git a/src/lib/components/TopBar.svelte b/src/lib/components/TopBar.svelte
new file mode 100644
index 0000000..cc2ebfd
--- /dev/null
+++ b/src/lib/components/TopBar.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { configStore, isRestartingStore, showUploadModal } from '../stores';
+  import { restartAgent, setEnabled } from '../actions';
+  import StatusBar from './StatusBar.svelte';
+  import AgentSelector from './AgentSelector.svelte';
+  import Toggle from './Toggle.svelte';
+  import Icon from './Icon.svelte';
+
+  function handleToggle(value: boolean) {
+    setEnabled(value);
+  }
+  function handleRestart() {
+    restartAgent();
+  }
+</script>
+
+<header
+  data-tauri-drag-region
+  class="flex flex-col gap-[8px] border-b border-[var(--separator)] px-[16px] pb-[10px]"
+>
+  <!-- title-bar row: native traffic lights sit on the left, controls on the right -->
+  <div data-tauri-drag-region class="flex h-[30px] items-center justify-end gap-[8px] pl-[68px]">
+    <Toggle checked={$configStore?.enabled ?? false} onChange={handleToggle} />
+    <button
+      class="flex h-[24px] w-[24px] items-center justify-center rounded-[6px] text-[var(--ink-2)]
+        transition-colors hover:bg-[var(--fill-hover)] hover:text-[var(--ink)]
+        disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-[var(--ink-2)]"
+      title="Restart agent with debug port"
+      disabled={$isRestartingStore}
+      on:click={handleRestart}
+    >
+      <span class="flex" class:animate-spin={$isRestartingStore}>
+        <Icon name="arrow-clockwise" size={14} />
+      </span>
+    </button>
+  </div>
+
+  <!-- status + custom upload -->
+  <div data-tauri-drag-region class="flex items-center justify-between">
+    <StatusBar />
+    <button
+      class="flex items-center gap-[5px] rounded-[var(--radius-control)] bg-[var(--fill)] px-[10px] py-[5px]
+        text-[12px] font-medium text-[var(--ink)] transition-colors hover:bg-[var(--fill-hover)]"
+      title="Upload custom background"
+      on:click={() => showUploadModal.set(true)}
+    >
+      <Icon name="plus" size={13} />
+      Custom
+    </button>
+  </div>
+
+  <AgentSelector />
+</header>
diff --git a/src/lib/components/UploadCard.svelte b/src/lib/components/UploadCard.svelte
deleted file mode 100644
index f40bcd4..0000000
--- a/src/lib/components/UploadCard.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { showUploadModal } from '../stores';
-</script>
-
-<div
-  class="rounded-[16px] h-[250px] flex flex-col items-center justify-center cursor-pointer
-    transition-all duration-300 gap-[12px]
-    border-2 border-dashed border-[rgba(59,130,246,0.2)]
-    bg-[rgba(59,130,246,0.02)]
-    hover:border-[#3b82f6] hover:bg-[rgba(59,130,246,0.05)]"
-  on:click={() => showUploadModal.set(true)}
-  on:keydown={(e) => e.key === 'Enter' && showUploadModal.set(true)}
-  role="button"
-  tabindex="0"
->
-  <span class="text-[2.2rem] transition-transform duration-300 hover:scale-110">📤</span>
-  <span class="font-semibold text-[1rem] text-[#475569]">Custom Background</span>
-</div>
diff --git a/src/lib/components/UploadModal.svelte b/src/lib/components/UploadModal.svelte
index 355e5aa..94ddd79 100644
--- a/src/lib/components/UploadModal.svelte
+++ b/src/lib/components/UploadModal.svelte
@@ -3,6 +3,7 @@
   import { uploadTheme } from '../actions';
   import DropZone from './DropZone.svelte';
   import ImageCropper from './ImageCropper.svelte';
+  import Icon from './Icon.svelte';
 
   let imageSrc: string | null = null;
   let mode: 'select' | 'crop' = 'select';
@@ -16,11 +17,6 @@
     reader.readAsDataURL(file);
   }
 
-  function handleCancel() {
-    mode = 'select';
-    imageSrc = null;
-  }
-
   function handleReSelect() {
     mode = 'select';
     imageSrc = null;
@@ -41,42 +37,34 @@
 {#if $showUploadModal}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="fixed inset-0 z-[1000] flex items-center justify-center p-[20px]
-      bg-[rgba(15,23,42,0.4)] backdrop-blur-[10px]"
+    class="fixed inset-0 z-[1000] flex items-center justify-center p-[20px]"
+    style="background:rgba(0,0,0,0.32); backdrop-filter:blur(8px);"
     on:click={closeModal}
     on:keydown={(e) => e.key === 'Escape' && closeModal()}
   >
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      class="w-full max-w-[680px] flex flex-col bg-white/75 rounded-[16px]
-        border border-[rgba(59,130,246,0.15)] backdrop-blur-[20px]
-        shadow-[0_8px_32px_rgba(30,41,59,0.08)]"
+      class="flex w-full max-w-[520px] flex-col overflow-hidden rounded-[14px]"
+      style="background:var(--panel-elevated); border:1px solid var(--separator); box-shadow:var(--shadow-panel); backdrop-filter:blur(30px) saturate(180%);"
       on:click|stopPropagation
       on:keydown|stopPropagation
     >
-      <!-- Header -->
-      <div class="flex justify-between items-center p-[20px_24px]
-        border-b border-[rgba(59,130,246,0.15)]">
-        <h3 class="text-[1.3rem] font-semibold text-[#1e293b]">Upload Custom Background</h3>
+      <div class="flex items-center justify-between border-b border-[var(--separator)] px-[18px] py-[14px]">
+        <h3 class="text-[14px] font-semibold text-[var(--ink)]">Upload Custom Background</h3>
         <button
-          class="bg-none border-none text-[#475569] text-[1.8rem] cursor-pointer
-            leading-none hover:text-[#3b82f6]"
+          class="flex h-[24px] w-[24px] items-center justify-center rounded-[6px] text-[var(--ink-3)]
+            transition-colors hover:bg-[var(--fill-hover)] hover:text-[var(--ink)]"
           on:click={closeModal}
         >
-          &times;
+          <Icon name="xmark" size={14} />
         </button>
       </div>
 
-      <!-- Body -->
-      <div class="p-[24px] flex flex-col gap-[20px]">
+      <div class="flex flex-col gap-[16px] p-[18px]">
         {#if mode === 'select'}
           <DropZone onFileSelected={handleFileSelected} />
         {:else if imageSrc}
-          <ImageCropper
-            {imageSrc}
-            onSave={handleSave}
-            onCancel={handleReSelect}
-          />
+          <ImageCropper {imageSrc} onSave={handleSave} onCancel={handleReSelect} />
         {/if}
       </div>
     </div>
diff --git a/web/index.html b/web/index.html
index cd60745..aafe6cf 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,11 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Agent Theme Companion</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  <script type="module" crossorigin src="/assets/index-LprIUB1-.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-BfvG7pE6.css">
+  <script type="module" crossorigin src="/assets/index-BwAPleIV.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-BVZSxOel.css">
 </head>
 <body>
   <div id="app"></div>