feat: refactor frontend to Svelte 5 + TS + Vite & macOS glassmorphism UI

README.en.md

@@ -58,7 +58,7 @@ With any provider enabled, Codex App's model picker shows `<provider> / <real-mo
   - **MCP**: structured JSON editing on the `[mcp_servers.*]` section of `~/.codex/config.toml` (`toml_edit` round-trip preserves comments + sibling config sections); Plugins sub-tab scans `~/.codex/plugins/cache/` for installed bundles (enable toggle / uninstall); all writes are atomic + independent history per SHA-256 path hash (no cross-tab interference)
 - Real-time logs panel auto-refreshing every 2s; unified `tracing::warn!(error_id, detail)` with stable tokens — operators can grep / aggregate
 - Feedback dialog automatically attaches diagnostic material (environment info, sanitized config, recent error snapshot with full request / response) — fewer back-and-forth follow-ups
-- Chinese / English UI; light / dark / green / orange / gray / white themes
+- Chinese / English UI, styled with macOS Classic glassmorphism UI design (Frosted Glass Vibrancy) + auto dark/light theme switching
 - Cross-platform single-instance lock (double-click brings the existing window forward) + cross-process file lock prevents multi-instance config-write lost-updates
 - Windows / macOS / Linux system tray
 
@@ -138,28 +138,18 @@ cargo tauri build --bundles deb,appimage     # Linux x86_64
 
 ### Tweaking the UI
 
-`frontend/css/` is organized as a small component library — no need to grep the whole `style.css`:
+The frontend has been refactored to **Svelte 5 + TypeScript + Vite**, using scoped styles for componentized style management under macOS Classic glassmorphism design:
 
-| What to tweak | Where to edit |
-|---|---|
-| Theme colors / radius / shadow / spacing (design tokens) | `frontend/css/tokens.css` (129 vars + 6 themes) |
-| Global reset / body font / focus ring | `frontend/css/base.css` |
-| Buttons / cards / forms / badges / modals etc. | `frontend/css/components/<name>.css` |
-| Page-specific styles for dashboard / providers / proxy / settings / guide | `frontend/css/pages/<route>.css` |
-| Responsive breakpoints (1100px / 720px) | `frontend/css/responsive.css` |
-
-Preview every component + variant + theme switching:
-
-```bash
-# Open directly in your browser (no dev server needed)
-open frontend/gallery.html        # macOS
-xdg-open frontend/gallery.html    # Linux
-start frontend/gallery.html       # Windows
-```
-
-`gallery.html` has a theme picker + dark/light toggle at the top, refresh after editing component css to see changes. `frontend/index.html`'s `<link href="css/style.css">` does not need to change — `style.css` is just an `@import` entry that aggregates every sub-file.
-
-To add a new component: create `components/<name>.css` + add a line `@import url("components/<name>.css");` to `style.css` + add a section in `gallery.html`.
+- **Global Styles & Design Tokens**: `frontend/src/app.css` defines all global CSS variables (including glassmorphism backgrounds, backdrop blurs, typography, gradients, border radius, etc.) and macOS system-level themes.
+- **Component Styles**: Styles specific to individual components (e.g. `Titlebar.svelte`, `Sidebar.svelte`) are declared directly inside their corresponding `.svelte` files.
+- **Page Styles**: Individual page styles (e.g. Dashboard, Providers, etc.) are located in their respective Svelte pages inside `frontend/src/pages/`.
+- **Local Development**:
+  ```bash
+  cd frontend
+  npm run dev          # Start Vite dev server for frontend previewing
+  # Or in the root directory
+  cargo tauri dev      # Start Tauri app window with hot reloading enabled
+  ```
 
 ## Troubleshooting
 
@@ -220,7 +210,7 @@ Design intent: the client trusts only the build-time embedded public key and nev
 
 - **Backend / forwarding**: Rust 1.80+ · axum 0.8 · reqwest 0.12 (rustls-tls) · tokio
 - **Protocol adapters**: `crates/adapters/` — Responses ↔ Chat / Gemini Native / Gemini CLI OAuth / Anthropic Messages / Grok Web (request body + streaming response state machine + reasoning_content + tool_calls)
-- **Frontend**: HTML + CSS + vanilla JavaScript + Bootstrap 5.3.3 (localized, no CDN dependency)
+- **Frontend**: Svelte 5 + TypeScript + Vite + custom Vanilla CSS glassmorphism UI
 - **Desktop shell**: Tauri 2 + tray-icon 0.23; the `cas://` URI scheme glues frontend/ and axum in-process, no TCP loopback
 - **Storage**: `~/.codex-app-transfer/config.json` (config, compatible with v1.x), `~/.codex-app-transfer/sessions.db` (L2 sqlite session persistence), `~/.codex/{config.toml,auth.json}` (Codex App integration)
 - **Packaging**: `cargo tauri build` single command produces dmg/AppImage/deb/exe/msi; `xtask release-bundle` finalizes sha256 + RSA-3072 sig + latest.json + draft GitHub release

README.md

@@ -58,7 +58,7 @@ Codex App Transfer 是一个面向 **OpenAI Codex APP** 的轻量桌面配置 +
   - **MCP**:结构化 JSON 编辑 `~/.codex/config.toml` 的 `[mcp_servers.*]` 节(`toml_edit` round-trip 保留注释 + 其他配置节)+ Plugins 子页扫 `~/.codex/plugins/cache/` 列已安装 plugin(enable toggle / uninstall);所有改动 atomic write + 独立 history 互不交叉(SHA-256 hash 路径)
 - 实时日志面板,2 秒自动刷新;统一 `tracing::warn!(error_id, detail)` + 稳定 token,operator 可 grep / 聚合
 - 反馈弹窗附带诊断材料(环境信息、脱敏配置、最近错误快照及完整请求 / 响应),减少手工补材料
-- 中文 / 英文界面,浅色 / 深色 / 绿色 / 橙色 / 灰色 / 白色多种主题
+- 中文 / 英文界面, 适配 macOS 经典玻璃质感设计 (Frosted Glass Vibrancy) + 自动深浅色切换
 - 跨平台单实例锁定(双击启动自动唤起已有窗口)+ 跨进程 file lock 防多实例同时写 config 丢更新
 - Windows / macOS / Linux 系统托盘
 
@@ -137,28 +137,18 @@ cargo tauri build --bundles deb,appimage     # Linux x86_64
 
 ### 想改 UI 样式怎么改
 
-`frontend/css/` 走"组件库"形式拆开,不需要全文 grep `style.css`:
+本项目前端已重构为 **Svelte 5 + TypeScript + Vite**，采用 scoped styles 进行组件化样式管理，并遵循 macOS 经典玻璃质感设计规范：
 
-| 想改什么 | 改哪个文件 |
-|---|---|
-| 主题色 / 圆角 / 阴影 / 间距等 design tokens | `frontend/css/tokens.css`(129 vars + 6 套主题) |
-| 全局 reset / body 字体 / focus 描边 | `frontend/css/base.css` |
-| 按钮 / 卡片 / 表单 / 徽章 / 模态等组件 | `frontend/css/components/<name>.css` |
-| 仪表盘 / 提供商 / 转发 / 设置 / 引导某一页专属样式 | `frontend/css/pages/<route>.css` |
-| 响应式断点 / 1100px / 720px | `frontend/css/responsive.css` |
-
-预览所有组件 + 各状态 + 主题切换:
-
-```bash
-# 浏览器直接打开(不需 dev server)
-open frontend/gallery.html        # macOS
-xdg-open frontend/gallery.html    # Linux
-start frontend/gallery.html       # Windows
-```
-
-`gallery.html` 顶部有主题切换 + 深浅色按钮,改 component css 后刷新即看。`frontend/index.html` 主入口 `<link href="css/style.css">` 不需要改 — `style.css` 只是 @import 入口聚合所有子文件。
-
-加新组件: 在 `components/` 建 `<name>.css` + 在 `style.css` 加一行 `@import url("components/<name>.css");` + 在 `gallery.html` 加 section。
+- **全局样式与 Design Tokens**: `frontend/src/app.css` 定义了所有全局 CSS 变量（如玻璃质感的背景色、毛玻璃模糊度、字体、渐变及圆角等）和 macOS 系统级的主题配置。
+- **组件样式**: 各组件的专属样式均直接声明在对应的 `.svelte` 文件内（如 `Titlebar.svelte`、`Sidebar.svelte`）。
+- **页面样式**: 各页面（如 Dashboard、Providers 等）的样式声明在 `frontend/src/pages/` 下的对应 Svelte 页面中。
+- **本地开发**:
+  ```bash
+  cd frontend
+  npm run dev          # 启动 Vite 开发服务器进行前端预览
+  # 或者在根目录下
+  cargo tauri dev      # 启动 Tauri 窗口并启用热重载
+  ```
 
 ## 常见问题
 
@@ -219,7 +209,7 @@ v2.1.12+ 的客户端 **强制** RSA-3072 PKCS#1-v1.5-SHA256 验签 `latest.json
 
 - **后端 / 转发**:Rust 1.80+ · axum 0.8 · reqwest 0.12(rustls-tls)· tokio
 - **协议适配**:`crates/adapters/` — Responses ↔ Chat / Gemini Native / Gemini CLI OAuth / Anthropic Messages / Grok Web 互转(请求 body + 流式响应状态机 + reasoning_content + tool_calls)
-- **前端**:HTML + CSS + 原生 JavaScript + Bootstrap 5.3.3(本地化,无 CDN 依赖)
+- **前端**: Svelte 5 + TypeScript + Vite + custom Vanilla CSS glassmorphism UI
 - **桌面壳**:Tauri 2 + tray-icon 0.23,通过 `cas://` URI scheme 把 frontend/ 与 axum 同进程串起来,无 TCP loopback
 - **存储**:`~/.codex-app-transfer/config.json`(配置,与 v1.x 互通)、`~/.codex-app-transfer/sessions.db`(L2 sqlite 会话持久化)、`~/.codex/{config.toml,auth.json}`(Codex APP 集成)
 - **打包**:`cargo tauri build` 单命令出 dmg/AppImage/deb/exe/msi;`xtask release-bundle` 收口出 sha256 + RSA-3072 sig + latest.json + draft GitHub release