Merge branch 'main' into feat/ocr

2025-05-26 18:18:48 +08:00
parent 09761f21bc 2ba4e51e93
commit f7e8b1803a
372 changed files with 30452 additions and 12113 deletions
@@ -0,0 +1,86 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 7
+    target-branch: "main"
+    commit-message:
+      prefix: "chore"
+      include: "scope"
+    groups:
+      # 核心框架
+      core-framework:
+        patterns:
+          - "react"
+          - "react-dom"
+          - "electron"
+          - "typescript"
+          - "@types/react*"
+          - "@types/node"
+        update-types:
+          - "minor"
+          - "patch"
+
+      # Electron 生态和构建工具
+      electron-build:
+        patterns:
+          - "electron-*"
+          - "@electron*"
+          - "vite"
+          - "@vitejs/*"
+          - "dotenv-cli"
+          - "rollup-plugin-*"
+          - "@swc/*"
+        update-types:
+          - "minor"
+          - "patch"
+
+      # 测试工具
+      testing-tools:
+        patterns:
+          - "vitest"
+          - "@vitest/*"
+          - "playwright"
+          - "@playwright/*"
+          - "eslint*"
+          - "@eslint*"
+          - "prettier"
+          - "husky"
+          - "lint-staged"
+        update-types:
+          - "minor"
+          - "patch"
+
+      # CherryStudio 自定义包
+      cherrystudio-packages:
+        patterns:
+          - "@cherrystudio/*"
+        update-types:
+          - "minor"
+          - "patch"
+
+      # 兜底其他 dependencies
+      other-dependencies:
+        dependency-type: "production"
+
+      # 兜底其他 devDependencies
+      other-dev-dependencies:
+        dependency-type: "development"
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 3
+    commit-message:
+      prefix: "ci"
+      include: "scope"
+    groups:
+      github-actions:
+        patterns:
+          - "*"
+        update-types:
+          - "minor"
+          - "patch"
@@ -54,5 +54,5 @@ jobs:
          days-before-pr-close: -1 # Completely disable closing for PRs

          # Temporary to reduce the huge issues number
-          operations-per-run: 100
+          operations-per-run: 1000
          debug-only: false
@@ -47,7 +47,13 @@ local
 .cursorrules
 .cursor/rules

-# test
+# vitest
 coverage
 .vitest-cache
 vitest.config.*.timestamp-*
+
+# playwright
+playwright-report
+test-results
+
+YOUR_MEMORY_FILE_PATH
@@ -0,0 +1,159 @@
+diff --git a/out/macPackager.js b/out/macPackager.js
+index 852f6c4d16f86a7bb8a78bf1ed5a14647a279aa1..60e7f5f16a844541eb1909b215fcda1811e924b8 100644
+--- a/out/macPackager.js
+++ b/out/macPackager.js
+@@ -423,7 +423,7 @@ class MacPackager extends platformPackager_1.PlatformPackager {
+         }
+         appPlist.CFBundleName = appInfo.productName;
+         appPlist.CFBundleDisplayName = appInfo.productName;
+-        const minimumSystemVersion = this.platformSpecificBuildOptions.minimumSystemVersion;
+        const minimumSystemVersion = this.platformSpecificBuildOptions.LSMinimumSystemVersion;
+         if (minimumSystemVersion != null) {
+             appPlist.LSMinimumSystemVersion = minimumSystemVersion;
+         }
+diff --git a/out/publish/updateInfoBuilder.js b/out/publish/updateInfoBuilder.js
+index 7924c5b47d01f8dfccccb8f46658015fa66da1f7..1a1588923c3939ae1297b87931ba83f0ebc052d8 100644
+--- a/out/publish/updateInfoBuilder.js
+++ b/out/publish/updateInfoBuilder.js
+@@ -133,6 +133,7 @@ async function createUpdateInfo(version, event, releaseInfo) {
+     const customUpdateInfo = event.updateInfo;
+     const url = path.basename(event.file);
+     const sha512 = (customUpdateInfo == null ? null : customUpdateInfo.sha512) || (await (0, hash_1.hashFile)(event.file));
+    const minimumSystemVersion = customUpdateInfo == null ? null : customUpdateInfo.minimumSystemVersion;
+     const files = [{ url, sha512 }];
+     const result = {
+         // @ts-ignore
+@@ -143,9 +144,13 @@ async function createUpdateInfo(version, event, releaseInfo) {
+         path: url /* backward compatibility, electron-updater 1.x - electron-updater 2.15.0 */,
+         // @ts-ignore
+         sha512 /* backward compatibility, electron-updater 1.x - electron-updater 2.15.0 */,
+        minimumSystemVersion,
+         ...releaseInfo,
+     };
+     if (customUpdateInfo != null) {
+        if (customUpdateInfo.minimumSystemVersion) {
+            delete customUpdateInfo.minimumSystemVersion;
+        }
+         // file info or nsis web installer packages info
+         Object.assign("sha512" in customUpdateInfo ? files[0] : result, customUpdateInfo);
+     }
+diff --git a/out/targets/ArchiveTarget.js b/out/targets/ArchiveTarget.js
+index e1f52a5fa86fff6643b2e57eaf2af318d541f865..47cc347f154a24b365e70ae5e1f6d309f3582ed0 100644
+--- a/out/targets/ArchiveTarget.js
+++ b/out/targets/ArchiveTarget.js
+@@ -69,6 +69,9 @@ class ArchiveTarget extends core_1.Target {
+                     }
+                 }
+             }
+            if (updateInfo != null && this.packager.platformSpecificBuildOptions.minimumSystemVersion) {
+                updateInfo.minimumSystemVersion = this.packager.platformSpecificBuildOptions.minimumSystemVersion;
+            }
+             await packager.info.emitArtifactBuildCompleted({
+                 updateInfo,
+                 file: artifactPath,
+diff --git a/out/targets/nsis/NsisTarget.js b/out/targets/nsis/NsisTarget.js
+index e8bd7bb46c8a54b3f55cf3a853ef924195271e01..f956e9f3fe9eb903c78aef3502553b01de4b89b1 100644
+--- a/out/targets/nsis/NsisTarget.js
+++ b/out/targets/nsis/NsisTarget.js
+@@ -305,6 +305,9 @@ class NsisTarget extends core_1.Target {
+             if (updateInfo != null && isPerMachine && (oneClick || options.packElevateHelper)) {
+                 updateInfo.isAdminRightsRequired = true;
+             }
+            if (updateInfo != null && this.packager.platformSpecificBuildOptions.minimumSystemVersion) {
+                updateInfo.minimumSystemVersion = this.packager.platformSpecificBuildOptions.minimumSystemVersion;
+            }
+             await packager.info.emitArtifactBuildCompleted({
+                 file: installerPath,
+                 updateInfo,
+diff --git a/scheme.json b/scheme.json
+index 433e2efc9cef156ff5444f0c4520362ed2ef9ea7..a89c7a9b0b608fef67902c49106a43ebd0fa8b61 100644
+--- a/scheme.json
+++ b/scheme.json
+@@ -1975,6 +1975,13 @@
+           ],
+           "description": "The mime types in addition to specified in the file associations. Use it if you don't want to register a new mime type, but reuse existing."
+         },
+        "minimumSystemVersion": {
+          "description": "The minimum os kernel version required to install the application.",
+          "type": [
+            "null",
+            "string"
+          ]
+        },
+         "packageCategory": {
+           "description": "backward compatibility + to allow specify fpm-only category for all possible fpm targets in one place",
+           "type": [
+@@ -2327,6 +2334,13 @@
+     "MacConfiguration": {
+       "additionalProperties": false,
+       "properties": {
+        "LSMinimumSystemVersion": {
+          "description": "The minimum version of macOS required for the app to run. Corresponds to `LSMinimumSystemVersion`.",
+          "type": [
+            "null",
+            "string"
+          ]
+        },
+         "additionalArguments": {
+           "anyOf": [
+             {
+@@ -2737,7 +2751,7 @@
+           "type": "boolean"
+         },
+         "minimumSystemVersion": {
+-          "description": "The minimum version of macOS required for the app to run. Corresponds to `LSMinimumSystemVersion`.",
+          "description": "The minimum os kernel version required to install the application.",
+           "type": [
+             "null",
+             "string"
+@@ -2959,6 +2973,13 @@
+     "MasConfiguration": {
+       "additionalProperties": false,
+       "properties": {
+        "LSMinimumSystemVersion": {
+          "description": "The minimum version of macOS required for the app to run. Corresponds to `LSMinimumSystemVersion`.",
+          "type": [
+            "null",
+            "string"
+          ]
+        },
+         "additionalArguments": {
+           "anyOf": [
+             {
+@@ -3369,7 +3390,7 @@
+           "type": "boolean"
+         },
+         "minimumSystemVersion": {
+-          "description": "The minimum version of macOS required for the app to run. Corresponds to `LSMinimumSystemVersion`.",
+          "description": "The minimum os kernel version required to install the application.",
+           "type": [
+             "null",
+             "string"
+@@ -6507,6 +6528,13 @@
+             "string"
+           ]
+         },
+        "minimumSystemVersion": {
+          "description": "The minimum os kernel version required to install the application.",
+          "type": [
+            "null",
+            "string"
+          ]
+        },
+         "protocols": {
+           "anyOf": [
+             {
+@@ -7376,6 +7404,13 @@
+       ],
+       "description": "MAS (Mac Application Store) development options (`mas-dev` target)."
+     },
+    "minimumSystemVersion": {
+      "description": "The minimum os kernel version required to install the application.",
+      "type": [
+        "null",
+        "string"
+      ]
+    },
+     "msi": {
+       "anyOf": [
+         {
@@ -4,4 +4,4 @@ httpTimeout: 300000

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.6.0.cjs
+yarnPath: .yarn/releases/yarn-4.9.1.cjs
@@ -23,9 +23,11 @@ Cherry Studio is a desktop client that supports for multiple LLM providers, avai

 # 🌠 Screenshot

-![](https://github.com/user-attachments/assets/082efa42-c4df-4863-a9cb-80435cecce0f)
-![](https://github.com/user-attachments/assets/f8411a65-c51f-47d3-9273-62ae384cc6f1)
-![](https://github.com/user-attachments/assets/0d235b3e-65ae-45ab-987f-8dbe003c52be)
+![](https://github.com/user-attachments/assets/36dddb2c-e0fb-4a5f-9411-91447bab6e18)
+
+![](https://github.com/user-attachments/assets/f549e8a0-2385-40b4-b52b-2039e39f2930)
+
+![](https://github.com/user-attachments/assets/58e0237c-4d36-40de-b428-53051d982026)

 # 🌟 Key Features

@@ -65,20 +67,42 @@ Cherry Studio is a desktop client that supports for multiple LLM providers, avai
 - 📝 Complete Markdown Rendering
 - 🤲 Easy Content Sharing

-# 📝 TODO
+# 📝 Roadmap

- [x] Quick popup (read clipboard, quick question, explain, translate, summarize)
- [x] Comparison of multi-model answers
- [x] Support login using SSO provided by service providers
- [x] All models support networking
- [x] Launch of the first official version
- [x] Bug fixes and improvements (In progress...)
- [ ] Plugin functionality (JavaScript)
- [ ] Browser extension (highlight text to translate, summarize, add to knowledge base)
- [ ] iOS & Android client
- [ ] AI notes
- [ ] Voice input and output (AI call)
- [ ] Data backup supports custom backup content
+We're actively working on the following features and improvements:
+
+1. 🎯 **Core Features**
+
+- Selection Assistant - Smart content selection enhancement
+- Deep Research - Advanced research capabilities
+- Memory System - Global context awareness
+- Document Preprocessing - Improved document handling
+- MCP Marketplace - Model Context Protocol ecosystem
+
+2. 🗂 **Knowledge Management**
+
+- Notes and Collections
+- Dynamic Canvas visualization
+- OCR capabilities
+- TTS (Text-to-Speech) support
+
+3. 📱 **Platform Support**
+
+- HarmonyOS Edition (PC)
+- Android App (Phase 1)
+- iOS App (Phase 1)
+- Multi-Window support
+- Window Pinning functionality
+
+4. 🔌 **Advanced Features**
+
+- Plugin System
+- ASR (Automatic Speech Recognition)
+- Assistant and Topic Interaction Refactoring
+
+Track our progress and contribute on our [project board](https://github.com/orgs/CherryHQ/projects/7).
+
+Want to influence our roadmap? Join our [GitHub Discussions](https://github.com/CherryHQ/cherry-studio/discussions) to share your ideas and feedback!

 # 🌈 Theme

@@ -96,7 +120,7 @@ Refer to the [development documentation](docs/dev.md)

 Refer to the [Architecture overview documentation](https://deepwiki.com/CherryHQ/cherry-studio)

-Refer to the [Branching Strategy](docs/branching-strategy.md) for contribution guidelines
+Refer to the [Branching Strategy](docs/branching-strategy-en.md) for contribution guidelines

 # 🤝 Contributing

@@ -121,7 +145,7 @@ For more detailed guidelines, please refer to our [Contributing Guide](./CONTRIB

 Thank you for your support and contributions!

-## Related Projects
+# 🔗 Related Projects

 - [one-api](https://github.com/songquanpeng/one-api):LLM API management and distribution system, supporting mainstream models like OpenAI, Azure, and Anthropic. Features unified API interface, suitable for key management and secondary distribution.

@@ -130,7 +154,7 @@ Thank you for your support and contributions!
 # 🚀 Contributors

 <a href="https://github.com/CherryHQ/cherry-studio/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=kangfenmao/cherry-studio" />
+  <img src="https://contrib.rocks/image?repo=CherryHQ/cherry-studio" />
 </a>
 <br /><br />

@@ -6,17 +6,19 @@
 <p align="center">
  <a href="https://github.com/CherryHQ/cherry-studio">English</a> | <a href="./README.zh.md">中文</a> | 日本語 <br>
 </p>
+
 <div align="center">
 <a href="https://trendshift.io/repositories/11772" target="_blank"><img src="https://trendshift.io/api/badge/repositories/11772" alt="kangfenmao%2Fcherry-studio | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 <a href="https://www.producthunt.com/posts/cherry-studio?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cherry&#0045;studio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=496640&theme=light" alt="Cherry&#0032;Studio - AI&#0032;Chatbots&#0044;&#0032;AI&#0032;Desktop&#0032;Client | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 </div>
+
 # 🍒 Cherry Studio

 Cherry Studio は、複数の LLM プロバイダーをサポートするデスクトップクライアントで、Windows、Mac、Linux で利用可能です。

 👏 [Telegram](https://t.me/CherryStudioAI)｜[Discord](https://discord.gg/wez8HtpxqQ) | [QQグループ(575014769)](https://qm.qq.com/q/lo0D4qVZKi)

-❤️ Cherry Studio をお気に入りにしましたか？小さな星をつけてください 🌟 または [スポンサー](sponsor.md) をして開発をサポートしてください！❤️
+❤️ Cherry Studio をお気に入りにしましたか？小さな星をつけてください 🌟 または [スポンサー](sponsor.md) をして開発をサポートしてください！

 # 📖 ガイド

@@ -24,9 +26,11 @@ https://docs.cherry-ai.com

 # 🌠 スクリーンショット

-![](https://github.com/user-attachments/assets/082efa42-c4df-4863-a9cb-80435cecce0f)
-![](https://github.com/user-attachments/assets/f8411a65-c51f-47d3-9273-62ae384cc6f1)
-![](https://github.com/user-attachments/assets/0d235b3e-65ae-45ab-987f-8dbe003c52be)
+![](https://github.com/user-attachments/assets/36dddb2c-e0fb-4a5f-9411-91447bab6e18)
+
+![](https://github.com/user-attachments/assets/f549e8a0-2385-40b4-b52b-2039e39f2930)
+
+![](https://github.com/user-attachments/assets/58e0237c-4d36-40de-b428-53051d982026)

 # 🌟 主な機能

@@ -56,7 +60,7 @@ https://docs.cherry-ai.com
 - 🔤 AI による翻訳機能
 - 🎯 ドラッグ＆ドロップによる整理
 - 🔌 ミニプログラム対応
- ⚙️ MCP（モデルコンテキストプロトコル） サービス
+- ⚙️ MCP（モデルコンテキストプロトコル）サービス

 5. **優れたユーザー体験**：

@@ -66,75 +70,104 @@ https://docs.cherry-ai.com
 - 📝 完全な Markdown レンダリング
 - 🤲 簡単な共有機能

-# 📝 TODO
+# 📝 開発計画

- [x] クイックポップアップ（クリップボードの読み取り、簡単な質問、説明、翻訳、要約）
- [x] 複数モデルの回答の比較
- [x] サービスプロバイダーが提供する SSO を使用したログインをサポート
- [x] すべてのモデルがネットワークをサポート
- [x] 最初の公式バージョンのリリース
- [ ] 錯誤修復と改善 (開発中...)
- [ ] プラグイン機能（JavaScript）
- [ ] ブラウザ拡張機能（テキストをハイライトして翻訳、要約、ナレッジベースに追加）
- [ ] iOS & Android クライアント
- [ ] AIノート
- [ ] 音声入出力（AI コール）
- [ ] データバックアップはカスタムバックアップコンテンツをサポート
+以下の機能と改善に積極的に取り組んでいます：
+
+1. 🎯 **コア機能**
+
+- 選択アシスタント - スマートな内容選択の強化
+- ディープリサーチ - 高度な研究能力
+- メモリーシステム - グローバルコンテキスト認識
+- ドキュメント前処理 - 文書処理の改善
+- MCP マーケットプレイス - モデルコンテキストプロトコルエコシステム
+
+2. 🗂 **ナレッジ管理**
+
+- ノートとコレクション
+- ダイナミックキャンバス可視化
+- OCR 機能
+- TTS（テキスト読み上げ）サポート
+
+3. 📱 **プラットフォーム対応**
+
+- HarmonyOS エディション
+- Android アプリ（フェーズ1）
+- iOS アプリ（フェーズ1）
+- マルチウィンドウ対応
+- ウィンドウピン留め機能
+
+4. 🔌 **高度な機能**
+
+- プラグインシステム
+- ASR（音声認識）
+- アシスタントとトピックの対話機能リファクタリング
+
+[プロジェクトボード](https://github.com/orgs/CherryHQ/projects/7)で進捗を確認し、貢献することができます。
+
+開発計画に影響を与えたいですか？[GitHub ディスカッション](https://github.com/CherryHQ/cherry-studio/discussions)に参加して、アイデアやフィードバックを共有してください！

 # 🌈 テーマ

- テーマギャラリー: https://cherrycss.com
- Aero テーマ: https://github.com/hakadao/CherryStudio-Aero
- PaperMaterial テーマ: https://github.com/rainoffallingstar/CherryStudio-PaperMaterial
- Claude テーマ: https://github.com/bjl101501/CherryStudio-Claudestyle-dynamic
- メープルネオンテーマ: https://github.com/BoningtonChen/CherryStudio_themes
+- テーマギャラリー：https://cherrycss.com
+- Aero テーマ：https://github.com/hakadao/CherryStudio-Aero
+- PaperMaterial テーマ：https://github.com/rainoffallingstar/CherryStudio-PaperMaterial
+- Claude テーマ：https://github.com/bjl101501/CherryStudio-Claudestyle-dynamic
+- メープルネオンテーマ：https://github.com/BoningtonChen/CherryStudio_themes

-より多くのテーマのPRを歓迎します
+より多くのテーマの PR を歓迎します

 # 🖥️ 開発

-参考[開発ドキュメント](dev.md)
+[開発ドキュメント](dev.md)を参照してください
+
+[アーキテクチャ概要ドキュメント](https://deepwiki.com/CherryHQ/cherry-studio)を参照してください
+
+[ブランチ戦略](branching-strategy-en.md)を参照して貢献ガイドラインを確認してください

 # 🤝 貢献

 Cherry Studio への貢献を歓迎します！以下の方法で貢献できます：

-1. **コードの貢献**：新機能を開発するか、既存のコードを最適化します。
-2. **バグの修正**：見つけたバグを修正します。
-3. **問題の管理**：GitHub の問題を管理するのを手伝います。
-4. **製品デザイン**：デザインの議論に参加します。
-5. **ドキュメントの作成**：ユーザーマニュアルやガイドを改善します。
-6. **コミュニティの参加**：ディスカッションに参加し、ユーザーを支援します。
-7. **使用の促進**：Cherry Studio を広めます。
+1. **コードの貢献**：新機能を開発するか、既存のコードを最適化します
+2. **バグの修正**：見つけたバグを修正します
+3. **問題の管理**：GitHub の問題を管理するのを手伝います
+4. **製品デザイン**：デザインの議論に参加します
+5. **ドキュメントの作成**：ユーザーマニュアルやガイドを改善します
+6. **コミュニティの参加**：ディスカッションに参加し、ユーザーを支援します
+7. **使用の促進**：Cherry Studio を広めます

 ## 始め方

-1. **リポジトリをフォーク**：フォークしてローカルマシンにクローンします。
-2. **ブランチを作成**：変更のためのブランチを作成します。
-3. **変更を提出**：変更をコミットしてプッシュします。
-4. **プルリクエストを開く**：変更内容と理由を説明します。
+1. **リポジトリをフォーク**：フォークしてローカルマシンにクローンします
+2. **ブランチを作成**：変更のためのブランチを作成します
+3. **変更を提出**：変更をコミットしてプッシュします
+4. **プルリクエストを開く**：変更内容と理由を説明します

 詳細なガイドラインについては、[貢献ガイド](../CONTRIBUTING.md)をご覧ください。

 ご支援と貢献に感謝します！

-## 関連頁版
+# 🔗 関連プロジェクト

 - [one-api](https://github.com/songquanpeng/one-api)：LLM API の管理・配信システム。OpenAI、Azure、Anthropic などの主要モデルに対応し、統一 API インターフェースを提供。API キー管理と再配布に利用可能。

+- [ublacklist](https://github.com/iorate/ublacklist)：Google 検索結果から特定のサイトを非表示にします
+
 # 🚀 コントリビューター

 <a href="https://github.com/CherryHQ/cherry-studio/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=kangfenmao/cherry-studio" />
+  <img src="https://contrib.rocks/image?repo=CherryHQ/cherry-studio" />
 </a>
+<br /><br />

-# コミュニティ
+# 🌐 コミュニティ

 [Telegram](https://t.me/CherryStudioAI) | [Email](mailto:support@cherry-ai.com) | [Twitter](https://x.com/kangfenmao)

-# スポンサー
+# ☕ スポンサー

-[Buy Me a Coffee](sponsor.md)
+[開発者を支援する](sponsor.md)

 # 📃 ライセンス

@@ -4,7 +4,8 @@
  </a>
 </h1>
 <p align="center">
-  <a href="https://github.com/CherryHQ/cherry-studio">English</a> | 中文 | <a href="./README.ja.md">日本語</a><br></p>
+  <a href="https://github.com/CherryHQ/cherry-studio">English</a> | 中文 | <a href="./README.ja.md">日本語</a><br>
+</p>
 <div align="center">
 <a href="https://trendshift.io/repositories/11772" target="_blank"><img src="https://trendshift.io/api/badge/repositories/11772" alt="kangfenmao%2Fcherry-studio | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 <a href="https://www.producthunt.com/posts/cherry-studio?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cherry&#0045;studio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=496640&theme=light" alt="Cherry&#0032;Studio - AI&#0032;Chatbots&#0044;&#0032;AI&#0032;Desktop&#0032;Client | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
@@ -18,15 +19,25 @@ Cherry Studio 是一款支持多个大语言模型（LLM）服务商的桌面客

 ❤️ 喜欢 Cherry Studio? 点亮小星星 🌟 或 [赞助开发者](sponsor.md)! ❤️

+# GitCode✖️Cherry Studio【新源力】贡献挑战赛
+
+<p align="center">
+  <a href="https://gitcode.com/CherryHQ/cherry-studio/discussion/2">
+    <img src="https://raw.gitcode.com/user-images/assets/5007375/8d8d7559-1141-4691-b90f-d154558c6896/cherry-studio-gitcode.jpg" width="100%" alt="banner" />
+  </a>
+</p>
+
 # 📖 使用教程

 https://docs.cherry-ai.com

 # 🌠 界面

-![](https://github.com/user-attachments/assets/082efa42-c4df-4863-a9cb-80435cecce0f)
-![](https://github.com/user-attachments/assets/f8411a65-c51f-47d3-9273-62ae384cc6f1)
-![](https://github.com/user-attachments/assets/0d235b3e-65ae-45ab-987f-8dbe003c52be)
+![](https://github.com/user-attachments/assets/36dddb2c-e0fb-4a5f-9411-91447bab6e18)
+
+![](https://github.com/user-attachments/assets/f549e8a0-2385-40b4-b52b-2039e39f2930)
+
+![](https://github.com/user-attachments/assets/58e0237c-4d36-40de-b428-53051d982026)

 # 🌟 主要特性

@@ -66,28 +77,50 @@ https://docs.cherry-ai.com
 - 📝 完整的 Markdown 渲染
 - 🤲 便捷的内容分享功能

-# 📝 待辦事項
+# 📝 开发计划

- [x] 快捷弹窗（读取剪贴板、快速提问、解释、翻译、总结）
- [x] 多模型回答对比
- [x] 支持使用服务供应商提供的 SSO 进行登入
- [x] 全部模型支持连网（开发中...）
- [x] 推出第一个正式版
- [x] 错误修复和改进（开发中...）
- [ ] 插件功能（JavaScript）
- [ ] 浏览器插件（划词翻译、总结、新增至知识库）
- [ ] iOS & Android 客户端
- [ ] AI 笔记
- [ ] 语音输入输出（AI 通话）
- [ ] 数据备份支持自定义备份内容
+我们正在积极开发以下功能和改进：
+
+1. 🎯 **核心功能**
+
+- 选择助手 - 智能内容选择增强
+- 深度研究 - 高级研究能力
+- 全局记忆 - 全局上下文感知
+- 文档预处理 - 改进文档处理能力
+- MCP 市场 - 模型上下文协议生态系统
+
+2. 🗂 **知识管理**
+
+- 笔记与收藏功能
+- 动态画布可视化
+- OCR 光学字符识别
+- TTS 文本转语音支持
+
+3. 📱 **平台支持**
+
+- 鸿蒙版本 (PC)
+- Android 应用（第一期）
+- iOS 应用（第一期）
+- 多窗口支持
+- 窗口置顶功能
+
+4. 🔌 **高级特性**
+
+- 插件系统
+- ASR 语音识别
+- 助手与话题交互重构
+
+在我们的[项目面板](https://github.com/orgs/CherryHQ/projects/7)上跟踪进展并参与贡献。
+
+想要影响开发计划？欢迎加入我们的 [GitHub 讨论区](https://github.com/CherryHQ/cherry-studio/discussions) 分享您的想法和反馈！

 # 🌈 主题

 - 主题库：https://cherrycss.com
 - Aero 主题：https://github.com/hakadao/CherryStudio-Aero
- PaperMaterial 主题: https://github.com/rainoffallingstar/CherryStudio-PaperMaterial
- 仿Claude 主题: https://github.com/bjl101501/CherryStudio-Claudestyle-dynamic
- 霓虹枫叶字体主题: https://github.com/BoningtonChen/CherryStudio_themes
+- PaperMaterial 主题：https://github.com/rainoffallingstar/CherryStudio-PaperMaterial
+- 仿 Claude 主题：https://github.com/bjl101501/CherryStudio-Claudestyle-dynamic
+- 霓虹枫叶主题：https://github.com/BoningtonChen/CherryStudio_themes

 欢迎 PR 更多主题

@@ -95,37 +128,43 @@ https://docs.cherry-ai.com

 参考[开发文档](dev.md)

+参考[架构概览文档](https://deepwiki.com/CherryHQ/cherry-studio)
+
+参考[分支策略](branching-strategy-zh.md)了解贡献指南
+
 # 🤝 贡献

 我们欢迎对 Cherry Studio 的贡献！您可以通过以下方式贡献：

-1. **贡献代码**：开发新功能或优化现有代码。
-2. **修复错误**：提交您发现的错误修复。
-3. **维护问题**：帮助管理 GitHub 问题。
-4. **产品设计**：参与设计讨论。
-5. **撰写文档**：改进用户手册和指南。
-6. **社区参与**：加入讨论并帮助用户。
-7. **推广使用**：宣传 Cherry Studio。
+1. **贡献代码**：开发新功能或优化现有代码
+2. **修复错误**：提交您发现的错误修复
+3. **维护问题**：帮助管理 GitHub 问题
+4. **产品设计**：参与设计讨论
+5. **撰写文档**：改进用户手册和指南
+6. **社区参与**：加入讨论并帮助用户
+7. **推广使用**：宣传 Cherry Studio

 ## 入门

-1. **Fork 仓库**：Fork 并克隆到您的本地机器。
-2. **创建分支**：为您的更改创建分支。
-3. **提交更改**：提交并推送您的更改。
-4. **打开 Pull Request**：描述您的更改和原因。
+1. **Fork 仓库**：Fork 并克隆到您的本地机器
+2. **创建分支**：为您的更改创建分支
+3. **提交更改**：提交并推送您的更改
+4. **打开 Pull Request**：描述您的更改和原因

-有关更详细的指南，请参阅我们的 [贡献指南](./CONTRIBUTING.zh.md)。
+有关更详细的指南，请参阅我们的 [贡献指南](./CONTRIBUTING.zh.md)

 感谢您的支持和贡献！

-## 相关项目
+# 🔗 相关项目

 - [one-api](https://github.com/songquanpeng/one-api)：LLM API 管理及分发系统，支持 OpenAI、Azure、Anthropic 等主流模型，统一 API 接口，可用于密钥管理与二次分发。

+- [ublacklist](https://github.com/iorate/ublacklist)：屏蔽特定网站在 Google 搜索结果中显示
+
 # 🚀 贡献者

 <a href="https://github.com/CherryHQ/cherry-studio/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=kangfenmao/cherry-studio" />
+  <img src="https://contrib.rocks/image?repo=CherryHQ/cherry-studio" />
 </a>
 <br /><br />

@@ -135,7 +174,7 @@ https://docs.cherry-ai.com

 # ☕ 赞助

-[微信赞赏码](sponsor.md)
+[赞助开发者](sponsor.md)

 # 📃 许可证

@@ -0,0 +1,71 @@
+# 🌿 Branching Strategy
+
+Cherry Studio implements a structured branching strategy to maintain code quality and streamline the development process.
+
+## Main Branches
+
+- `main`: Main development branch
+
+  - Contains the latest development code
+  - Direct commits are not allowed - changes must come through pull requests
+  - Code may contain features in development and might not be fully stable
+
+- `release/*`: Release branches
+  - Created from `main` branch
+  - Contains stable code ready for release
+  - Only accepts documentation updates and bug fixes
+  - Thoroughly tested before production deployment
+
+## Contributing Branches
+
+When contributing to Cherry Studio, please follow these guidelines:
+
+1. **Feature Branches:**
+
+   - Create from `main` branch
+   - Naming format: `feature/issue-number-brief-description`
+   - Submit PR back to `main`
+
+2. **Bug Fix Branches:**
+
+   - Create from `main` branch
+   - Naming format: `fix/issue-number-brief-description`
+   - Submit PR back to `main`
+
+3. **Documentation Branches:**
+
+   - Create from `main` branch
+   - Naming format: `docs/brief-description`
+   - Submit PR back to `main`
+
+4. **Hotfix Branches:**
+
+   - Create from `main` branch
+   - Naming format: `hotfix/issue-number-brief-description`
+   - Submit PR to both `main` and relevant `release` branches
+
+5. **Release Branches:**
+   - Create from `main` branch
+   - Naming format: `release/version-number`
+   - Used for final preparation work before version release
+   - Only accepts bug fixes and documentation updates
+   - After testing and preparation, merge back to `main` and tag with version
+
+## Workflow Diagram
+
+![](https://github.com/user-attachments/assets/61db64a2-fab1-4a16-8253-0c64c9df1a63)
+
+## Pull Request Guidelines
+
+- All PRs should be submitted to the `main` branch unless fixing a critical production issue
+- Ensure your branch is up to date with the latest `main` changes before submitting
+- Include relevant issue numbers in your PR description
+- Make sure all tests pass and code meets our quality standards
+- Add before/after screenshots if you add a new feature or modify a UI component
+
+## Version Tag Management
+
+- Major releases: v1.0.0, v2.0.0, etc.
+- Feature releases: v1.1.0, v1.2.0, etc.
+- Patch releases: v1.0.1, v1.0.2, etc.
+- Hotfix releases: v1.0.1-hotfix, etc.
@@ -0,0 +1,71 @@
+# 🌿 分支策略
+
+Cherry Studio 采用结构化的分支策略来维护代码质量并简化开发流程。
+
+## 主要分支
+
+- `main`：主开发分支
+
+  - 包含最新的开发代码
+  - 禁止直接提交 - 所有更改必须通过拉取请求（Pull Request）
+  - 此分支上的代码可能包含正在开发的功能，不一定完全稳定
+
+- `release/*`：发布分支
+  - 从 `main` 分支创建
+  - 包含准备发布的稳定代码
+  - 只接受文档更新和 bug 修复
+  - 经过完整测试后可以发布到生产环境
+
+## 贡献分支
+
+在为 Cherry Studio 贡献代码时，请遵循以下准则：
+
+1. **功能开发分支：**
+
+   - 从 `main` 分支创建
+   - 命名格式：`feature/issue-number-brief-description`
+   - 完成后提交 PR 到 `main` 分支
+
+2. **Bug 修复分支：**
+
+   - 从 `main` 分支创建
+   - 命名格式：`fix/issue-number-brief-description`
+   - 完成后提交 PR 到 `main` 分支
+
+3. **文档更新分支：**
+
+   - 从 `main` 分支创建
+   - 命名格式：`docs/brief-description`
+   - 完成后提交 PR 到 `main` 分支
+
+4. **紧急修复分支：**
+
+   - 从 `main` 分支创建
+   - 命名格式：`hotfix/issue-number-brief-description`
+   - 完成后需要同时合并到 `main` 和相关的 `release` 分支
+
+5. **发布分支：**
+   - 从 `main` 分支创建
+   - 命名格式：`release/version-number`
+   - 用于版本发布前的最终准备工作
+   - 只允许合并 bug 修复和文档更新
+   - 完成测试和准备工作后，将代码合并回 `main` 分支并打上版本标签
+
+## 工作流程
+
+![](https://github.com/user-attachments/assets/61db64a2-fab1-4a16-8253-0c64c9df1a63)
+
+## 拉取请求（PR）指南
+
+- 除非是修复生产环境的关键问题，否则所有 PR 都应该提交到 `main` 分支
+- 提交 PR 前确保你的分支已经同步了最新的 `main` 分支内容
+- 在 PR 描述中包含相关的 issue 编号
+- 确保所有测试通过，且代码符合我们的质量标准
+- 如果你添加了新功能或修改了 UI 组件，请附上更改前后的截图
+
+## 版本标签管理
+
+- 主要版本发布：v1.0.0、v2.0.0 等
+- 功能更新发布：v1.1.0、v1.2.0 等
+- 补丁修复发布：v1.0.1、v1.0.2 等
+- 紧急修复发布：v1.0.1-hotfix 等
@@ -1,51 +0,0 @@
-# 🌿 Branching Strategy
-
-Cherry Studio follows a structured branching strategy to maintain code quality and streamline the development process:
-
-## Main Branches
-
- `main`: Production-ready branch containing stable releases
-
-  - All code here is thoroughly tested and ready for production
-  - Direct commits are not allowed - changes must come through pull requests
-  - Each merge to main represents a new release
-
- `develop` (default): Primary development branch
-  - Contains the latest delivered development changes for the next release
-  - Relatively stable but may contain features in progress
-  - This is the default branch for development
-
-## Contributing Branches
-
-When contributing to Cherry Studio, please follow these guidelines:
-
-1. **For bug fixes:**
-
-   - Create a branch from `develop`
-   - Name format: `fix/issue-number-brief-description`
-   - Submit pull request back to `develop`
-
-2. **For new features:**
-
-   - Create a branch from `develop`
-   - Name format: `feature/issue-number-brief-description`
-   - Submit pull request back to `develop`
-
-3. **For documentation:**
-
-   - Create a branch from `develop`
-   - Name format: `docs/brief-description`
-   - Submit pull request back to `develop`
-
-4. **For critical hotfixes:**
-   - Create a branch from `main`
-   - Name format: `hotfix/issue-number-brief-description`
-   - Submit pull request to both `main` and `develop`
-
-## Pull Request Guidelines
-
- Always create pull requests against the `develop` branch unless fixing a critical production issue
- Ensure your branch is up to date with the latest `develop` changes before submitting
- Include relevant issue numbers in your PR description
- Make sure all tests pass and code meets our quality standards
- Critical hotfixes may be submitted against `main` but must also be merged into `develop`
@@ -37,6 +37,14 @@ yarn install
 yarn dev
 ```

+### Debug
+
+```bash
+yarn debug
+```
+
+Then input chrome://inspect in browser
+
 ### Test

 ```bash
@@ -12,9 +12,10 @@ electronLanguages:
 directories:
  buildResources: build
 files:
-  - '!{.vscode,.yarn,.github}'
+  - '**/*'
+  - '!{.vscode,.yarn,.yarn-lock,.github,.cursorrules,.prettierrc}'
  - '!electron.vite.config.{js,ts,mjs,cjs}'
-  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,eslint.config.mjs,dev-app-update.yml,CHANGELOG.md,README.md}'
  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
  - '!src'
@@ -22,20 +23,28 @@ files:
  - '!local'
  - '!docs'
  - '!packages'
+  - '!.swc'
+  - '!.bin'
+  - '!._*'
+  - '!*.log'
  - '!stats.html'
  - '!*.md'
+  - '!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}'
  - '!**/*.{map,ts,tsx,jsx,less,scss,sass,css.d.ts,d.cts,d.mts,md,markdown,yaml,yml}'
-  - '!**/{test,tests,__tests__,coverage}/**'
+  - '!**/{test,tests,__tests__,powered-test,coverage}/**'
+  - '!**/{example,examples}/**'
  - '!**/*.{spec,test}.{js,jsx,ts,tsx}'
  - '!**/*.min.*.map'
  - '!**/*.d.ts'
-  - '!**/{.DS_Store,Thumbs.db}'
-  - '!**/{LICENSE,LICENSE.txt,LICENSE-MIT.txt,*.LICENSE.txt,NOTICE.txt,README.md,CHANGELOG.md}'
+  - '!**/{.DS_Store,Thumbs.db,thumbs.db,__pycache__}'
+  - '!**/{LICENSE,LICENSE.txt,LICENSE-MIT.txt,*.LICENSE.txt,NOTICE.txt,README.md,readme.md,CHANGELOG.md}'
  - '!node_modules/rollup-plugin-visualizer'
  - '!node_modules/js-tiktoken'
  - '!node_modules/@tavily/core/node_modules/js-tiktoken'
  - '!node_modules/pdf-parse/lib/pdf.js/{v1.9.426,v1.10.88,v2.0.550}'
  - '!node_modules/mammoth/{mammoth.browser.js,mammoth.browser.min.js}'
+  - '!node_modules/selection-hook/prebuilds/**/*' # we rebuild .node, don't use prebuilds
+  - '!**/*.{h,iobj,ipdb,tlog,recipe,vcxproj,vcxproj.filters}' # filter .node build files
  - '!node_modules/pdfjs-dist/web/**/*'
  - '!node_modules/pdfjs-dist/legacy/web/*'
 asarUnpack:
@@ -49,6 +58,9 @@ win:
  target:
    - target: nsis
    - target: portable
+  signtoolOptions:
+    sign: scripts/win-sign.js
+  verifyUpdateCodeSignature: false
 nsis:
  artifactName: ${productName}-${version}-${arch}-setup.${ext}
  shortcutName: ${productName}
@@ -65,6 +77,7 @@ mac:
  entitlementsInherit: build/entitlements.mac.plist
  notarize: false
  artifactName: ${productName}-${version}-${arch}.${ext}
+  minimumSystemVersion: '20.1.0' # 最低支持 macOS 11.0
  extendInfo:
    - NSCameraUsageDescription: Application requests access to the device's camera.
    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
@@ -96,9 +109,10 @@ afterSign: scripts/notarize.js
 artifactBuildCompleted: scripts/artifact-build-completed.js
 releaseInfo:
  releaseNotes: |
-    重构消息结构，支持不同类型消息按时间顺序显示
-    智能体支持导入和导出
-    快捷面板增加网络搜索引擎选择
-    显示设置增加缩放控制按钮
-    支持添加自定义小程序
-    性能优化和错误修复
+    ⚠️ 注意：升级前请备份数据，否则将无法降级
+    文生图新增服务商 DMXAPI（限时免费）
+    输入框按钮支持拖拽排序
+    修复知识库搜索结果 100% 问题
+    修复拖拽多选消息相关问题
+    修复翻译回复内容导致内存异常问题
+    常规错误修复和优化
@@ -39,7 +39,11 @@ export default defineConfig({
    build: {
      rollupOptions: {
        external: ['@libsql/client']
-      }
+      },
+      sourcemap: process.env.NODE_ENV === 'development'
+    },
+    optimizeDeps: {
+      noDiscovery: process.env.NODE_ENV === 'development'
    }
  },
  preload: {
@@ -48,6 +52,9 @@ export default defineConfig({
      alias: {
        '@shared': resolve('packages/shared')
      }
+    },
+    build: {
+      sourcemap: process.env.NODE_ENV === 'development'
    }
  },
  renderer: {
@@ -74,13 +81,18 @@ export default defineConfig({
      }
    },
    optimizeDeps: {
-      exclude: []
+      exclude: ['pyodide']
+    },
+    worker: {
+      format: 'es'
    },
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/renderer/index.html'),
-          miniWindow: resolve(__dirname, 'src/renderer/miniWindow.html')
+          miniWindow: resolve(__dirname, 'src/renderer/miniWindow.html'),
+          selectionToolbar: resolve(__dirname, 'src/renderer/selectionToolbar.html'),
+          selectionAction: resolve(__dirname, 'src/renderer/selectionAction.html')
        }
      }
    }
@@ -1,6 +1,6 @@
 {
  "name": "CherryStudio",
-  "version": "1.3.0",
+  "version": "1.3.12",
  "private": true,
  "description": "A powerful AI assistant for producer.",
  "main": "./out/main/index.js",
@@ -20,6 +20,7 @@
  "scripts": {
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
+    "debug": "electron-vite -- --inspect --sourcemap --remote-debugging-port=9222",
    "build": "npm run typecheck && electron-vite build",
    "build:check": "yarn test && yarn typecheck && yarn check:i18n",
    "build:unpack": "dotenv npm run build && electron-builder --dir",
@@ -44,29 +45,30 @@
    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
    "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
    "check:i18n": "node scripts/check-i18n.js",
-    "test": "yarn test:renderer",
-    "test:coverage": "yarn test:renderer:coverage",
-    "test:node": "npx -y tsx --test src/**/*.test.ts",
-    "test:renderer": "vitest run",
-    "test:renderer:ui": "vitest --ui",
-    "test:renderer:coverage": "vitest run --coverage",
+    "test": "vitest run --silent",
+    "test:main": "vitest run --project main",
+    "test:renderer": "vitest run --project renderer",
+    "test:coverage": "vitest run --coverage --silent",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest",
+    "test:e2e": "yarn playwright test",
+    "test:lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "postinstall": "electron-builder install-app-deps",
    "prepare": "husky"
  },
  "dependencies": {
-    "@cherrystudio/embedjs": "^0.1.29",
-    "@cherrystudio/embedjs-libsql": "^0.1.29",
-    "@cherrystudio/embedjs-loader-csv": "^0.1.29",
-    "@cherrystudio/embedjs-loader-image": "^0.1.29",
-    "@cherrystudio/embedjs-loader-markdown": "^0.1.29",
-    "@cherrystudio/embedjs-loader-msoffice": "^0.1.29",
-    "@cherrystudio/embedjs-loader-pdf": "^0.1.29",
-    "@cherrystudio/embedjs-loader-sitemap": "^0.1.29",
-    "@cherrystudio/embedjs-loader-web": "^0.1.29",
-    "@cherrystudio/embedjs-loader-xml": "^0.1.29",
-    "@cherrystudio/embedjs-openai": "^0.1.29",
+    "@cherrystudio/embedjs": "^0.1.31",
+    "@cherrystudio/embedjs-libsql": "^0.1.31",
+    "@cherrystudio/embedjs-loader-csv": "^0.1.31",
+    "@cherrystudio/embedjs-loader-image": "^0.1.31",
+    "@cherrystudio/embedjs-loader-markdown": "^0.1.31",
+    "@cherrystudio/embedjs-loader-msoffice": "^0.1.31",
+    "@cherrystudio/embedjs-loader-pdf": "^0.1.31",
+    "@cherrystudio/embedjs-loader-sitemap": "^0.1.31",
+    "@cherrystudio/embedjs-loader-web": "^0.1.31",
+    "@cherrystudio/embedjs-loader-xml": "^0.1.31",
+    "@cherrystudio/embedjs-openai": "^0.1.31",
    "@electron-toolkit/utils": "^3.0.0",
    "@electron/notarize": "^2.5.0",
    "@langchain/community": "^0.3.36",
@@ -74,11 +76,9 @@
    "@strongtz/win32-arm64-msvc": "^0.4.7",
    "@tanstack/react-query": "^5.27.0",
    "@types/react-infinite-scroll-component": "^5.0.0",
-    "adm-zip": "^0.5.16",
    "archiver": "^7.0.1",
    "async-mutex": "^0.5.0",
    "canvas": "3.1.0",
-    "color": "^5.0.0",
    "diff": "^7.0.0",
    "docx": "^9.0.2",
    "electron-log": "^5.1.5",
@@ -86,11 +86,9 @@
    "electron-updater": "6.6.4",
    "electron-window-state": "^5.0.3",
    "epub": "patch:epub@npm%3A1.3.0#~/.yarn/patches/epub-npm-1.3.0-8325494ffe.patch",
-    "extract-zip": "^2.0.1",
    "fast-xml-parser": "^5.2.0",
    "fetch-socks": "^1.3.2",
    "fs-extra": "^11.2.0",
-    "got-scraping": "^4.1.1",
    "jsdom": "^26.0.0",
    "markdown-it": "^14.1.0",
    "node-stream-zip": "^1.15.0",
@@ -99,12 +97,10 @@
    "pdf-to-img": "^4.4.0",
    "pdfjs-dist": "4.2.67",
    "proxy-agent": "^6.5.0",
-    "rc-virtual-list": "^3.18.6",
-    "react-window": "^1.8.11",
+    "selection-hook": "^0.9.14",
    "tar": "^7.4.3",
    "turndown": "^7.2.0",
    "turndown-plugin-gfm": "^1.0.2",
-    "undici": "^7.4.0",
    "webdav": "^5.8.0",
    "ws": "^8.18.1",
    "zipread": "^1.3.3"
@@ -127,17 +123,18 @@
    "@eslint/js": "^9.22.0",
    "@google/genai": "^0.13.0",
    "@hello-pangea/dnd": "^16.6.0",
-    "@iconify-json/svg-spinners": "^1.2.2",
    "@kangfenmao/keyv-storage": "^0.1.0",
-    "@modelcontextprotocol/sdk": "^1.10.2",
+    "@modelcontextprotocol/sdk": "^1.11.4",
    "@mozilla/readability": "^0.6.0",
    "@notionhq/client": "^2.2.15",
+    "@playwright/test": "^1.52.0",
    "@reduxjs/toolkit": "^2.2.5",
-    "@shikijs/markdown-it": "^3.2.2",
-    "@swc/plugin-styled-components": "^7.1.3",
-    "@tavily/core": "patch:@tavily/core@npm%3A0.3.1#~/.yarn/patches/@tavily-core-npm-0.3.1-fe69bf2bea.patch",
+    "@shikijs/markdown-it": "^3.4.2",
+    "@swc/plugin-styled-components": "^7.1.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
    "@tryfabric/martian": "^1.2.4",
-    "@types/adm-zip": "^0",
    "@types/diff": "^7",
    "@types/fs-extra": "^11",
    "@types/lodash": "^4.17.5",
@@ -151,43 +148,52 @@
    "@types/react-window": "^1",
    "@types/tinycolor2": "^1",
    "@types/ws": "^8",
+    "@uiw/codemirror-extensions-langs": "^4.23.12",
+    "@uiw/codemirror-themes-all": "^4.23.12",
+    "@uiw/react-codemirror": "^4.23.12",
    "@vitejs/plugin-react-swc": "^3.9.0",
-    "@vitest/coverage-v8": "^3.1.1",
-    "@vitest/ui": "^3.1.1",
+    "@vitest/browser": "^3.1.4",
+    "@vitest/coverage-v8": "^3.1.4",
+    "@vitest/ui": "^3.1.4",
+    "@vitest/web-worker": "^3.1.4",
    "@xyflow/react": "^12.4.4",
    "antd": "^5.22.5",
-    "applescript": "^1.0.0",
    "axios": "^1.7.3",
-    "babel-plugin-styled-components": "^2.1.4",
    "browser-image-compression": "^2.0.2",
+    "color": "^5.0.0",
    "dayjs": "^1.11.11",
    "dexie": "^4.0.8",
    "dexie-react-hooks": "^1.1.7",
    "dotenv-cli": "^7.4.2",
-    "electron": "31.7.6",
+    "electron": "35.4.0",
    "electron-builder": "26.0.15",
    "electron-devtools-installer": "^3.2.0",
    "electron-icon-builder": "^2.0.1",
-    "electron-vite": "^2.3.0",
+    "electron-vite": "^3.1.0",
    "emittery": "^1.0.3",
    "emoji-picker-element": "^1.22.1",
    "eslint": "^9.22.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "eslint-plugin-unused-imports": "^4.1.4",
+    "fast-diff": "^1.3.0",
    "html-to-image": "^1.11.13",
    "husky": "^9.1.7",
    "i18next": "^23.11.5",
+    "jest-styled-components": "^7.2.0",
    "lint-staged": "^15.5.0",
    "lodash": "^4.17.21",
    "lru-cache": "^11.1.0",
    "lucide-react": "^0.487.0",
+    "mermaid": "^11.6.0",
    "mime": "^4.0.4",
    "motion": "^12.10.5",
    "npx-scope-finder": "^1.2.0",
    "openai": "patch:openai@npm%3A4.96.0#~/.yarn/patches/openai-npm-4.96.0-0665b05cb9.patch",
    "p-queue": "^8.1.0",
+    "playwright": "^1.52.0",
    "prettier": "^3.5.3",
+    "rc-virtual-list": "^3.18.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hotkeys-hook": "^4.6.1",
@@ -198,6 +204,7 @@
    "react-router": "6",
    "react-router-dom": "6",
    "react-spinners": "^0.14.1",
+    "react-window": "^1.8.11",
    "redux": "^5.0.1",
    "redux-persist": "^6.0.0",
    "rehype-katex": "^7.0.1",
@@ -207,17 +214,16 @@
    "remark-gfm": "^4.0.0",
    "remark-math": "^6.0.0",
    "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.77.2",
-    "shiki": "^3.2.2",
+    "sass": "^1.88.0",
+    "shiki": "^3.4.2",
    "string-width": "^7.2.0",
    "styled-components": "^6.1.11",
    "tiny-pinyin": "^1.3.2",
-    "tinycolor2": "^1.6.0",
    "tokenx": "^0.4.1",
    "typescript": "^5.6.2",
    "uuid": "^10.0.0",
    "vite": "6.2.6",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.4"
  },
  "resolutions": {
    "pdf-parse@npm:1.1.1": "patch:pdf-parse@npm%3A1.1.1#~/.yarn/patches/pdf-parse-npm-1.1.1-04a6109b2a.patch",
@@ -229,10 +235,10 @@
    "canvas": "3.1.0",
    "pkce-challenge@npm:^4.1.0": "patch:pkce-challenge@npm%3A4.1.0#~/.yarn/patches/pkce-challenge-npm-4.1.0-fbc51695a3.patch",
    "app-builder-lib@npm:26.0.13": "patch:app-builder-lib@npm%3A26.0.13#~/.yarn/patches/app-builder-lib-npm-26.0.13-a064c9e1d0.patch",
-    "shiki": "3.2.2",
-    "openai@npm:^4.87.3": "patch:openai@npm%3A4.96.0#~/.yarn/patches/openai-npm-4.96.0-0665b05cb9.patch"
+    "openai@npm:^4.87.3": "patch:openai@npm%3A4.96.0#~/.yarn/patches/openai-npm-4.96.0-0665b05cb9.patch",
+    "app-builder-lib@npm:26.0.15": "patch:app-builder-lib@npm%3A26.0.15#~/.yarn/patches/app-builder-lib-npm-26.0.15-360e5b0476.patch"
  },
-  "packageManager": "yarn@4.6.0",
+  "packageManager": "yarn@4.9.1",
  "lint-staged": {
    "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts}": [
      "prettier --write",
@@ -1 +0,0 @@
-# Cherry Studio Artifacts
@@ -1,19 +0,0 @@
-{
-  "name": "@cherry-studio/artifacts",
-  "version": "0.1.0",
-  "description": "Cherry Studio Artifacts",
-  "main": "index.js",
-  "homepage": "https://github.com/kangfenmao/cherry-studio/blob/main/npm/artifacts",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "artifacts"
-  ],
-  "author": "kangfenmao",
-  "license": "ISC"
-}
@@ -1,108 +0,0 @@
-:root {
-  /* 莫兰迪色系：使用柔和、低饱和度的颜色 */
-  --primary-color: #b6b5a7; /* 莫兰迪灰褐色，用于背景文字 */
-  --secondary-color: #9a8f8f; /* 莫兰迪灰棕色，用于标题背景 */
-  --accent-color: #c5b4a0; /* 莫兰迪淡棕色，用于强调元素 */
-  --background-color: #e8e3de; /* 莫兰迪米色，用于页面背景 */
-  --text-color: #5b5b5b; /* 莫兰迪深灰色，用于主要文字 */
-  --light-text-color: #8c8c8c; /* 莫兰迪中灰色，用于次要文字 */
-  --divider-color: #d1cbc3; /* 莫兰迪浅灰色，用于分隔线 */
-}
-body,
-html {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--background-color); /* 使用莫兰迪米色作为页面背景 */
-  font-family: 'Noto Sans SC', sans-serif;
-  color: var(--text-color); /* 使用莫兰迪深灰色作为主要文字颜色 */
-}
-.card {
-  width: 300px;
-  height: 500px;
-  background-color: #f2ede9; /* 莫兰迪浅米色，用于卡片背景 */
-  border-radius: 20px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-.header {
-  background-color: var(--secondary-color); /* 使用莫兰迪灰棕色作为标题背景 */
-  color: #f2ede9; /* 浅色文字与深色背景形成对比 */
-  padding: 20px;
-  text-align: left;
-  position: relative;
-  z-index: 1;
-}
-h1 {
-  font-family: 'Noto Serif SC', serif;
-  font-size: 20px;
-  margin: 0;
-  font-weight: 700;
-}
-.content {
-  padding: 30px 20px;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-.word {
-  text-align: left;
-  margin-bottom: 20px;
-}
-.word-main {
-  font-family: 'Noto Serif SC', serif;
-  font-size: 36px;
-  color: var(--text-color); /* 使用莫兰迪深灰色作为主要词汇颜色 */
-  margin-bottom: 10px;
-  position: relative;
-}
-.word-main::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: -5px;
-  width: 50px;
-  height: 3px;
-  background-color: var(--accent-color); /* 使用莫兰迪淡棕色作为下划线 */
-}
-.word-sub {
-  font-size: 14px;
-  color: var(--light-text-color); /* 使用莫兰迪中灰色作为次要文字颜色 */
-  margin: 5px 0;
-}
-.divider {
-  width: 100%;
-  height: 1px;
-  background-color: var(--divider-color); /* 使用莫兰迪浅灰色作为分隔线 */
-  margin: 20px 0;
-}
-.explanation {
-  font-size: 18px;
-  line-height: 1.6;
-  text-align: left;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.quote {
-  position: relative;
-  padding-left: 20px;
-  border-left: 3px solid var(--accent-color); /* 使用莫兰迪淡棕色作为引用边框 */
-}
-.background-text {
-  position: absolute;
-  font-size: 150px;
-  color: rgba(182, 181, 167, 0.15); /* 使用莫兰迪灰褐色的透明版本作为背景文字 */
-  z-index: 0;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-weight: bold;
-}
@@ -1,3 +0,0 @@
-data/*
-!data/.gitkeep
-
@@ -1,3 +0,0 @@
-# Cherry Studio Database
-
-Cherry Studio 依赖的数据文件由这个数据库来生成，数据库文件请联系开发者获取
@@ -1,13 +0,0 @@
-{
-  "name": "@cherry-studio/database",
-  "packageManager": "yarn@4.6.0",
-  "dependencies": {
-    "csv-parser": "^3.0.0",
-    "sqlite3": "^5.1.7"
-  },
-  "scripts": {
-    "agents": "node src/agents.js",
-    "email": "yarn csv && node src/email.js",
-    "csv": "node src/csv.js"
-  }
-}
@@ -1,47 +0,0 @@
-const sqlite3 = require('sqlite3').verbose()
-const fs = require('fs')
-
-// 连接到数据库
-const db = new sqlite3.Database('./data/CherryStudio.sqlite3', (err) => {
-  if (err) {
-    console.error('Error connecting to the database:', err.message)
-    return
-  }
-  console.log('Connected to the database.')
-})
-
-// 查询数据并转换为JSON
-db.all('SELECT * FROM agents', [], (err, rows) => {
-  if (err) {
-    console.error('Error querying the database:', err.message)
-    return
-  }
-
-  // 将 ID 类型转换为字符串
-  for (const row of rows) {
-    row.id = row.id.toString()
-    row.group = row.group.toString().split(',')
-    row.group = row.group.map((item) => item.trim().replace('\r\n', ''))
-  }
-
-  // 将查询结果转换为JSON字符串
-  const jsonData = JSON.stringify(rows, null, 2)
-
-  // 将JSON数据写入文件
-  fs.writeFile('../../src/renderer/src/config/agents.json', jsonData, (err) => {
-    if (err) {
-      console.error('Error writing to file:', err.message)
-      return
-    }
-    console.log('Data has been written to agents.json')
-  })
-
-  // 关闭数据库连接
-  db.close((err) => {
-    if (err) {
-      console.error('Error closing the database:', err.message)
-      return
-    }
-    console.log('Database connection closed.')
-  })
-})
@@ -1,77 +0,0 @@
-const fs = require('fs')
-const csv = require('csv-parser')
-const sqlite3 = require('sqlite3').verbose()
-
-// 连接到 SQLite 数据库
-const db = new sqlite3.Database('./data/CherryStudio.sqlite3', (err) => {
-  if (err) {
-    console.error('Error opening database', err)
-    return
-  }
-  console.log('Connected to the SQLite database.')
-})
-
-// 创建一个数组来存储 CSV 数据
-const results = []
-
-// 读取 CSV 文件
-fs.createReadStream('./data/data.csv')
-  .pipe(csv())
-  .on('data', (data) => results.push(data))
-  .on('end', () => {
-    // 准备 SQL 插入语句，使用 INSERT OR IGNORE
-    const stmt = db.prepare('INSERT OR IGNORE INTO emails (email, github, sent) VALUES (?, ?, ?)')
-
-    // 插入每一行数据
-    let inserted = 0
-    let skipped = 0
-    let emptyEmail = 0
-
-    db.serialize(() => {
-      // 开始一个事务以提高性能
-      db.run('BEGIN TRANSACTION')
-
-      results.forEach((row) => {
-        // 检查 email 是否为空
-        if (!row.email || row.email.trim() === '') {
-          emptyEmail++
-          return // 跳过这一行
-        }
-
-        stmt.run(row.email, row['user-href'], 0, function (err) {
-          if (err) {
-            console.error('Error inserting row', err)
-          } else {
-            if (this.changes === 1) {
-              inserted++
-            } else {
-              skipped++
-            }
-          }
-        })
-      })
-
-      // 提交事务
-      db.run('COMMIT', (err) => {
-        if (err) {
-          console.error('Error committing transaction', err)
-        } else {
-          console.log(
-            `Insertion complete. Inserted: ${inserted}, Skipped (duplicate): ${skipped}, Skipped (empty email): ${emptyEmail}`
-          )
-        }
-
-        // 完成插入
-        stmt.finalize()
-
-        // 关闭数据库连接
-        db.close((err) => {
-          if (err) {
-            console.error('Error closing database', err)
-          } else {
-            console.log('Database connection closed.')
-          }
-        })
-      })
-    })
-  })
@@ -1,36 +0,0 @@
-const sqlite3 = require('sqlite3').verbose()
-
-// 连接到数据库
-const db = new sqlite3.Database('./data/CherryStudio.sqlite3', (err) => {
-  if (err) {
-    console.error('Error connecting to the database:', err.message)
-    return
-  }
-})
-
-// 查询数据并转换为JSON
-db.all('SELECT * FROM emails WHERE sent = 0', [], (err, rows) => {
-  if (err) {
-    console.error('Error querying the database:', err.message)
-    return
-  }
-
-  for (const row of rows) {
-    console.log(row.email)
-    // Update row set sent = 1
-    db.run('UPDATE emails SET sent = 1 WHERE id = ?', [row.id], (err) => {
-      if (err) {
-        console.error('Error updating the database:', err.message)
-        return
-      }
-    })
-  }
-
-  // 关闭数据库连接
-  db.close((err) => {
-    if (err) {
-      console.error('Error closing the database:', err.message)
-      return
-    }
-  })
-})
@@ -1,4 +1,5 @@
 export enum IpcChannel {
+  App_GetCacheSize = 'app:get-cache-size',
  App_ClearCache = 'app:clear-cache',
  App_SetLaunchOnBoot = 'app:set-launch-on-boot',
  App_SetLanguage = 'app:set-language',
@@ -20,6 +21,9 @@ export enum IpcChannel {
  App_InstallUvBinary = 'app:install-uv-binary',
  App_InstallBunBinary = 'app:install-bun-binary',

+  Notification_Send = 'notification:send',
+  Notification_OnClick = 'notification:on-click',
+
  Webview_SetOpenLinkExternal = 'webview:set-open-link-external',

  // Open
@@ -51,6 +55,7 @@ export enum IpcChannel {
  Mcp_GetInstallInfo = 'mcp:get-install-info',
  Mcp_ServersChanged = 'mcp:servers-changed',
  Mcp_ServersUpdated = 'mcp:servers-updated',
+  Mcp_CheckConnectivity = 'mcp:check-connectivity',

  //copilot
  Copilot_GetAuthMessage = 'copilot:get-auth-message',
@@ -141,6 +146,9 @@ export enum IpcChannel {
  System_GetDeviceType = 'system:getDeviceType',
  System_GetHostname = 'system:getHostname',

+  // DevTools
+  System_ToggleDevTools = 'system:toggleDevTools',
+
  // events
  BackupProgress = 'backup-progress',
  ThemeChange = 'theme:change',
@@ -172,5 +180,23 @@ export enum IpcChannel {
  StoreSync_Subscribe = 'store-sync:subscribe',
  StoreSync_Unsubscribe = 'store-sync:unsubscribe',
  StoreSync_OnUpdate = 'store-sync:on-update',
-  StoreSync_BroadcastSync = 'store-sync:broadcast-sync'
+  StoreSync_BroadcastSync = 'store-sync:broadcast-sync',
+
+  // Provider
+  Provider_AddKey = 'provider:add-key',
+
+  //Selection Assistant
+  Selection_TextSelected = 'selection:text-selected',
+  Selection_ToolbarHide = 'selection:toolbar-hide',
+  Selection_ToolbarVisibilityChange = 'selection:toolbar-visibility-change',
+  Selection_ToolbarDetermineSize = 'selection:toolbar-determine-size',
+  Selection_WriteToClipboard = 'selection:write-to-clipboard',
+  Selection_SetEnabled = 'selection:set-enabled',
+  Selection_SetTriggerMode = 'selection:set-trigger-mode',
+  Selection_SetFollowToolbar = 'selection:set-follow-toolbar',
+  Selection_ActionWindowClose = 'selection:action-window-close',
+  Selection_ActionWindowMinimize = 'selection:action-window-minimize',
+  Selection_ActionWindowPin = 'selection:action-window-pin',
+  Selection_ProcessAction = 'selection:process-action',
+  Selection_UpdateActionData = 'selection:update-action-data'
 }
@@ -0,0 +1,42 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  // Look for test files, relative to this configuration file.
+  testDir: './tests/e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ]
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://localhost:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+})
@@ -15,6 +15,8 @@ const BUN_PACKAGES = {
  'darwin-x64': 'bun-darwin-x64.zip',
  'win32-x64': 'bun-windows-x64.zip',
  'win32-x64-baseline': 'bun-windows-x64-baseline.zip',
+  'win32-arm64': 'bun-windows-x64.zip',
+  'win32-arm64-baseline': 'bun-windows-x64-baseline.zip',
  'linux-x64': 'bun-linux-x64.zip',
  'linux-x64-baseline': 'bun-linux-x64-baseline.zip',
  'linux-arm64': 'bun-linux-aarch64.zip',
@@ -0,0 +1,19 @@
+const { execSync } = require('child_process')
+
+exports.default = async function (configuration) {
+  if (process.env.WIN_SIGN) {
+    const { path } = configuration
+    if (configuration.path) {
+      try {
+        console.log('Start code signing...')
+        console.log('Signing file:', path)
+        const signCommand = `signtool sign /tr http://timestamp.comodoca.com /td sha256 /fd sha256 /a /v "${path}"`
+        execSync(signCommand, { stdio: 'inherit' })
+        console.log('Code signing completed')
+      } catch (error) {
+        console.error('Code signing failed:', error)
+        throw error
+      }
+    }
+  }
+}
@@ -1,6 +1,5 @@
 import { BaseEmbeddings } from '@cherrystudio/embedjs-interfaces'
 import { VoyageEmbeddings as _VoyageEmbeddings } from '@langchain/community/embeddings/voyage'
-import Logger from 'electron-log'

 export default class VoyageEmbeddings extends BaseEmbeddings {
  private model: _VoyageEmbeddings
@@ -12,7 +11,6 @@ export default class VoyageEmbeddings extends BaseEmbeddings {
    if (!this.configuration.outputDimension) {
      throw new Error('You need to pass in the optional dimensions parameter for this model')
    }
-    Logger.log('VoyageEmbeddings', this.configuration)
    this.model = new _VoyageEmbeddings(this.configuration)
  }
  override async getDimensions(): Promise<number> {
@@ -1,10 +1,12 @@
+import '@main/config'
+
 import { electronApp, optimizer } from '@electron-toolkit/utils'
 import { replaceDevtoolsFont } from '@main/utils/windowUtil'
-import { IpcChannel } from '@shared/IpcChannel'
-import { app, ipcMain } from 'electron'
+import { app } from 'electron'
 import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer'
 import Logger from 'electron-log'

+import { isDev } from './constant'
 import { registerIpc } from './ipc'
 import { configManager } from './services/ConfigManager'
 import mcpService from './services/MCPService'
@@ -14,6 +16,7 @@ import {
  registerProtocolClient,
  setupAppImageDeepLink
 } from './services/ProtocolClient'
+import selectionService, { initSelectionService } from './services/SelectionService'
 import { registerShortcuts } from './services/ShortcutService'
 import { TrayService } from './services/TrayService'
 import { windowService } from './services/WindowService'
@@ -21,11 +24,27 @@ import { setUserDataDir } from './utils/file'

 Logger.initialize()

+// in production mode, handle uncaught exception and unhandled rejection globally
+if (!isDev) {
+  // handle uncaught exception
+  process.on('uncaughtException', (error) => {
+    Logger.error('Uncaught Exception:', error)
+  })
+
+  // handle unhandled rejection
+  process.on('unhandledRejection', (reason, promise) => {
+    Logger.error('Unhandled Rejection at:', promise, 'reason:', reason)
+  })
+}
+
 // Check for single instance lock
 if (!app.requestSingleInstanceLock()) {
  app.quit()
  process.exit(0)
 } else {
+  // Portable dir must be setup before app ready
+  setUserDataDir()
+
  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
@@ -58,23 +77,17 @@ if (!app.requestSingleInstanceLock()) {

    replaceDevtoolsFont(mainWindow)

-    setUserDataDir()
-
    // Setup deep link for AppImage on Linux
    await setupAppImageDeepLink()

-    if (process.env.NODE_ENV === 'development') {
+    if (isDev) {
      installExtension([REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS])
        .then((name) => console.log(`Added Extension:  ${name}`))
        .catch((err) => console.log('An error occurred: ', err))
    }
-    ipcMain.handle(IpcChannel.System_GetDeviceType, () => {
-      return process.platform === 'darwin' ? 'mac' : process.platform === 'win32' ? 'windows' : 'linux'
-    })

-    ipcMain.handle(IpcChannel.System_GetHostname, () => {
-      return require('os').hostname()
-    })
+    //start selection assistant service
+    initSelectionService()
  })

  registerProtocolClient(app)
@@ -101,6 +114,11 @@ if (!app.requestSingleInstanceLock()) {

  app.on('before-quit', () => {
    app.isQuitting = true
+
+    // quit selection service
+    if (selectionService) {
+      selectionService.quit()
+    }
  })

  app.on('will-quit', async () => {
@@ -8,6 +8,7 @@ import { IpcChannel } from '@shared/IpcChannel'
 import { LocalFileSource, Shortcut, ThemeMode } from '@types'
 import { BrowserWindow, ipcMain, nativeTheme, session, shell } from 'electron'
 import log from 'electron-log'
+import { Notification } from 'src/renderer/src/types/notification'

 import { titleBarOverlayDark, titleBarOverlayLight } from './config'
 import AppUpdater from './services/AppUpdater'
@@ -19,20 +20,23 @@ import FileStorage from './services/FileStorage'
 import FileService from './services/FileSystemService'
 import KnowledgeService from './services/KnowledgeService'
 import mcpService from './services/MCPService'
+import NotificationService from './services/NotificationService'
 import * as NutstoreService from './services/NutstoreService'
 import ObsidianVaultService from './services/ObsidianVaultService'
 import { ProxyConfig, proxyManager } from './services/ProxyManager'
 import { FileServiceManager } from './services/remotefile/FileServiceManager'
 import { searchService } from './services/SearchService'
+import { SelectionService } from './services/SelectionService'
 import { registerShortcuts, unregisterAllShortcuts } from './services/ShortcutService'
 import storeSyncService from './services/StoreSyncService'
 import { TrayService } from './services/TrayService'
 import { setOpenLinkExternal } from './services/WebviewService'
 import { windowService } from './services/WindowService'
-import { getResourcePath } from './utils'
+import { calculateDirectorySize, getResourcePath } from './utils'
 import { decrypt, encrypt } from './utils/aes'
-import { getConfigDir, getFilesDir } from './utils/file'
+import { getCacheDir, getConfigDir, getFilesDir } from './utils/file'
 import { compress, decompress } from './utils/zip'
+
 const fileManager = new FileStorage()
 const backupManager = new BackupManager()
 const exportService = new ExportService(fileManager)
@@ -40,6 +44,7 @@ const obsidianVaultService = new ObsidianVaultService()

 export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
  const appUpdater = new AppUpdater(mainWindow)
+  const notificationService = new NotificationService(mainWindow)

  ipcMain.handle(IpcChannel.App_Info, () => ({
    version: app.getVersion(),
@@ -121,11 +126,21 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {

  // theme
  ipcMain.handle(IpcChannel.App_SetTheme, (_, theme: ThemeMode) => {
+    const updateTitleBarOverlay = () => {
+      if (!mainWindow?.setTitleBarOverlay) return
+      const isDark = nativeTheme.shouldUseDarkColors
+      mainWindow.setTitleBarOverlay(isDark ? titleBarOverlayDark : titleBarOverlayLight)
+    }
+
+    const broadcastThemeChange = () => {
+      const isDark = nativeTheme.shouldUseDarkColors
+      const effectiveTheme = isDark ? ThemeMode.dark : ThemeMode.light
+      BrowserWindow.getAllWindows().forEach((win) => win.webContents.send(IpcChannel.ThemeChange, effectiveTheme))
+    }
+
    const notifyThemeChange = () => {
-      const windows = BrowserWindow.getAllWindows()
-      windows.forEach((win) =>
-        win.webContents.send(IpcChannel.ThemeChange, nativeTheme.shouldUseDarkColors ? ThemeMode.dark : ThemeMode.light)
-      )
+      updateTitleBarOverlay()
+      broadcastThemeChange()
    }

    if (theme === ThemeMode.auto) {
@@ -133,11 +148,10 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
      nativeTheme.on('updated', notifyThemeChange)
    } else {
      nativeTheme.themeSource = theme
-      nativeTheme.removeAllListeners('updated')
+      nativeTheme.off('updated', notifyThemeChange)
    }

-    mainWindow?.setTitleBarOverlay &&
-      mainWindow.setTitleBarOverlay(nativeTheme.shouldUseDarkColors ? titleBarOverlayDark : titleBarOverlayLight)
+    updateTitleBarOverlay()
    configManager.setTheme(theme)
    notifyThemeChange()
  })
@@ -170,15 +184,46 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
    }
  })

+  // get cache size
+  ipcMain.handle(IpcChannel.App_GetCacheSize, async () => {
+    const cachePath = getCacheDir()
+    log.info(`Calculating cache size for path: ${cachePath}`)
+
+    try {
+      const sizeInBytes = await calculateDirectorySize(cachePath)
+      const sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2)
+      return `${sizeInMB}`
+    } catch (error: any) {
+      log.error(`Failed to calculate cache size for ${cachePath}: ${error.message}`)
+      return '0'
+    }
+  })
+
  // check for update
  ipcMain.handle(IpcChannel.App_CheckForUpdate, async () => {
-    await appUpdater.checkForUpdates()
+    return await appUpdater.checkForUpdates()
+  })
+
+  // notification
+  ipcMain.handle(IpcChannel.Notification_Send, async (_, notification: Notification) => {
+    await notificationService.sendNotification(notification)
+  })
+  ipcMain.handle(IpcChannel.Notification_OnClick, (_, notification: Notification) => {
+    mainWindow.webContents.send('notification-click', notification)
  })

  // zip
  ipcMain.handle(IpcChannel.Zip_Compress, (_, text: string) => compress(text))
  ipcMain.handle(IpcChannel.Zip_Decompress, (_, text: Buffer) => decompress(text))

+  // system
+  ipcMain.handle(IpcChannel.System_GetDeviceType, () => (isMac ? 'mac' : isWin ? 'windows' : 'linux'))
+  ipcMain.handle(IpcChannel.System_GetHostname, () => require('os').hostname())
+  ipcMain.handle(IpcChannel.System_ToggleDevTools, (e) => {
+    const win = BrowserWindow.fromWebContents(e.sender)
+    win && win.webContents.toggleDevTools()
+  })
+
  // backup
  ipcMain.handle(IpcChannel.Backup_Backup, backupManager.backup)
  ipcMain.handle(IpcChannel.Backup_Restore, backupManager.restore)
@@ -301,6 +346,7 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
  ipcMain.handle(IpcChannel.Mcp_ListResources, mcpService.listResources)
  ipcMain.handle(IpcChannel.Mcp_GetResource, mcpService.getResource)
  ipcMain.handle(IpcChannel.Mcp_GetInstallInfo, mcpService.getInstallInfo)
+  ipcMain.handle(IpcChannel.Mcp_CheckConnectivity, mcpService.checkMcpConnectivity)

  ipcMain.handle(IpcChannel.App_IsBinaryExist, (_, name: string) => isBinaryExists(name))
  ipcMain.handle(IpcChannel.App_GetBinaryPath, (_, name: string) => getBinaryPath(name))
@@ -349,4 +395,7 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {

  // store sync
  storeSyncService.registerIpcHandler()
+
+  // selection assistant
+  SelectionService.registerIpcHandler()
 }
@@ -38,7 +38,7 @@ export default abstract class BaseReranker {
  protected getRerankRequestBody(query: string, searchResults: ExtractChunkData[]) {
    const provider = this.base.rerankModelProvider
    const documents = searchResults.map((doc) => doc.pageContent)
-    const topN = this.base.topN || 5
+    const topN = this.base.documentCount

    if (provider === 'voyageai') {
      return {
@@ -4,8 +4,8 @@ import archiver from 'archiver'
 import { exec } from 'child_process'
 import { app } from 'electron'
 import Logger from 'electron-log'
-import extract from 'extract-zip'
 import * as fs from 'fs-extra'
+import StreamZip from 'node-stream-zip'
 import * as path from 'path'
 import { createClient, CreateDirectoryOptions, FileStat } from 'webdav'

@@ -77,7 +77,8 @@ class BackupManager {
    _: Electron.IpcMainInvokeEvent,
    fileName: string,
    data: string,
-    destinationPath: string = this.backupDir
+    destinationPath: string = this.backupDir,
+    skipBackupFile: boolean = false
  ): Promise<string> {
    const mainWindow = windowService.getMainWindow()

@@ -104,23 +105,30 @@ class BackupManager {

      onProgress({ stage: 'writing_data', progress: 20, total: 100 })

-      // 复制 Data 目录到临时目录
-      const sourcePath = path.join(app.getPath('userData'), 'Data')
-      const tempDataDir = path.join(this.tempDir, 'Data')
+      Logger.log('[BackupManager IPC] ', skipBackupFile)

-      // 获取源目录总大小
-      const totalSize = await this.getDirSize(sourcePath)
-      let copiedSize = 0
+      if (!skipBackupFile) {
+        // 复制 Data 目录到临时目录
+        const sourcePath = path.join(app.getPath('userData'), 'Data')
+        const tempDataDir = path.join(this.tempDir, 'Data')

-      // 使用流式复制
-      await this.copyDirWithProgress(sourcePath, tempDataDir, (size) => {
-        copiedSize += size
-        const progress = Math.min(50, Math.floor((copiedSize / totalSize) * 50))
-        onProgress({ stage: 'copying_files', progress, total: 100 })
-      })
+        // 获取源目录总大小
+        const totalSize = await this.getDirSize(sourcePath)
+        let copiedSize = 0

-      await this.setWritableRecursive(tempDataDir)
-      onProgress({ stage: 'preparing_compression', progress: 50, total: 100 })
+        // 使用流式复制
+        await this.copyDirWithProgress(sourcePath, tempDataDir, (size) => {
+          copiedSize += size
+          const progress = Math.min(50, Math.floor((copiedSize / totalSize) * 50))
+          onProgress({ stage: 'copying_files', progress, total: 100 })
+        })
+
+        await this.setWritableRecursive(tempDataDir)
+        onProgress({ stage: 'preparing_compression', progress: 50, total: 100 })
+      } else {
+        Logger.log('[BackupManager] Skip the backup of the file')
+        await fs.promises.mkdir(path.join(this.tempDir, 'Data')) // 不创建空 Data 目录会导致 restore 失败
+      }

      // 创建输出文件流
      const backupedFilePath = path.join(destinationPath, fileName)
@@ -231,15 +239,10 @@ class BackupManager {

      Logger.log('[backup] step 1: unzip backup file', this.tempDir)

-      // 使用 extract-zip 解压
-      await extract(backupPath, {
-        dir: this.tempDir,
-        onEntry: () => {
-          // 这里可以处理进度，但 extract-zip 不提供总条目数信息
-          onProgress({ stage: 'extracting', progress: 15, total: 100 })
-        }
-      })
-      onProgress({ stage: 'extracting', progress: 25, total: 100 })
+      const zip = new StreamZip.async({ file: backupPath })
+      onProgress({ stage: 'extracting', progress: 15, total: 100 })
+      await zip.extract(null, this.tempDir)
+      onProgress({ stage: 'extracted', progress: 25, total: 100 })

      Logger.log('[backup] step 2: read data.json')
      // 读取 data.json
@@ -252,19 +255,26 @@ class BackupManager {
      const sourcePath = path.join(this.tempDir, 'Data')
      const destPath = path.join(app.getPath('userData'), 'Data')

-      // 获取源目录总大小
-      const totalSize = await this.getDirSize(sourcePath)
-      let copiedSize = 0
+      const dataExists = await fs.pathExists(sourcePath)
+      const dataFiles = dataExists ? await fs.readdir(sourcePath) : []

-      await this.setWritableRecursive(destPath)
-      await fs.remove(destPath)
+      if (dataExists && dataFiles.length > 0) {
+        // 获取源目录总大小
+        const totalSize = await this.getDirSize(sourcePath)
+        let copiedSize = 0

-      // 使用流式复制
-      await this.copyDirWithProgress(sourcePath, destPath, (size) => {
-        copiedSize += size
-        const progress = Math.min(85, 35 + Math.floor((copiedSize / totalSize) * 50))
-        onProgress({ stage: 'copying_files', progress, total: 100 })
-      })
+        await this.setWritableRecursive(destPath)
+        await fs.remove(destPath)
+
+        // 使用流式复制
+        await this.copyDirWithProgress(sourcePath, destPath, (size) => {
+          copiedSize += size
+          const progress = Math.min(85, 35 + Math.floor((copiedSize / totalSize) * 50))
+          onProgress({ stage: 'copying_files', progress, total: 100 })
+        })
+      } else {
+        Logger.log('[backup] skipBackupFile is true, skip restoring Data directory')
+      }

      Logger.log('[backup] step 4: clean up temp directory')
      // 清理临时目录
@@ -284,7 +294,7 @@ class BackupManager {

  async backupToWebdav(_: Electron.IpcMainInvokeEvent, data: string, webdavConfig: WebDavConfig) {
    const filename = webdavConfig.fileName || 'cherry-studio.backup.zip'
-    const backupedFilePath = await this.backup(_, filename, data)
+    const backupedFilePath = await this.backup(_, filename, data, undefined, webdavConfig.skipBackupFile)
    const webdavClient = new WebDav(webdavConfig)
    try {
      const result = await webdavClient.putFileContents(filename, fs.createReadStream(backupedFilePath), {
@@ -5,7 +5,7 @@ import Store from 'electron-store'

 import { locales } from '../utils/locales'

-enum ConfigKeys {
+export enum ConfigKeys {
  Language = 'language',
  Theme = 'theme',
  LaunchToTray = 'launchToTray',
@@ -16,7 +16,10 @@ enum ConfigKeys {
  ClickTrayToShowQuickAssistant = 'clickTrayToShowQuickAssistant',
  EnableQuickAssistant = 'enableQuickAssistant',
  AutoUpdate = 'autoUpdate',
-  EnableDataCollection = 'enableDataCollection'
+  EnableDataCollection = 'enableDataCollection',
+  SelectionAssistantEnabled = 'selectionAssistantEnabled',
+  SelectionAssistantTriggerMode = 'selectionAssistantTriggerMode',
+  SelectionAssistantFollowToolbar = 'selectionAssistantFollowToolbar'
 }

 export class ConfigManager {
@@ -146,6 +149,36 @@ export class ConfigManager {
    this.set(ConfigKeys.EnableDataCollection, value)
  }

+  // Selection Assistant: is enabled the selection assistant
+  getSelectionAssistantEnabled(): boolean {
+    return this.get<boolean>(ConfigKeys.SelectionAssistantEnabled, true)
+  }
+
+  setSelectionAssistantEnabled(value: boolean) {
+    this.set(ConfigKeys.SelectionAssistantEnabled, value)
+    this.notifySubscribers(ConfigKeys.SelectionAssistantEnabled, value)
+  }
+
+  // Selection Assistant: trigger mode (selected, ctrlkey)
+  getSelectionAssistantTriggerMode(): string {
+    return this.get<string>(ConfigKeys.SelectionAssistantTriggerMode, 'selected')
+  }
+
+  setSelectionAssistantTriggerMode(value: string) {
+    this.set(ConfigKeys.SelectionAssistantTriggerMode, value)
+    this.notifySubscribers(ConfigKeys.SelectionAssistantTriggerMode, value)
+  }
+
+  // Selection Assistant: if action window position follow toolbar
+  getSelectionAssistantFollowToolbar(): boolean {
+    return this.get<boolean>(ConfigKeys.SelectionAssistantFollowToolbar, true)
+  }
+
+  setSelectionAssistantFollowToolbar(value: boolean) {
+    this.set(ConfigKeys.SelectionAssistantFollowToolbar, value)
+    this.notifySubscribers(ConfigKeys.SelectionAssistantFollowToolbar, value)
+  }
+
  set(key: string, value: unknown) {
    this.store.set(key, value)
  }
@@ -47,6 +47,8 @@ export class ExportService {
      let linkText = ''
      let linkUrl = ''
      let insideLink = false
+      let boldStack = 0 // 跟踪嵌套的粗体标记
+      let italicStack = 0 // 跟踪嵌套的斜体标记

      for (let i = 0; i < tokens.length; i++) {
        const token = tokens[i]
@@ -82,17 +84,37 @@ export class ExportService {
              insideLink = false
            }
            break
+          case 'strong_open':
+            boldStack++
+            break
+          case 'strong_close':
+            boldStack--
+            break
+          case 'em_open':
+            italicStack++
+            break
+          case 'em_close':
+            italicStack--
+            break
          case 'text':
-            runs.push(new TextRun({ text: token.content, bold: isHeaderRow }))
-            break
-          case 'strong':
-            runs.push(new TextRun({ text: token.content, bold: true }))
-            break
-          case 'em':
-            runs.push(new TextRun({ text: token.content, italics: true }))
+            runs.push(
+              new TextRun({
+                text: token.content,
+                bold: isHeaderRow || boldStack > 0,
+                italics: italicStack > 0
+              })
+            )
            break
          case 'code_inline':
-            runs.push(new TextRun({ text: token.content, font: 'Consolas', size: 20 }))
+            runs.push(
+              new TextRun({
+                text: token.content,
+                font: 'Consolas',
+                size: 20,
+                bold: isHeaderRow || boldStack > 0,
+                italics: italicStack > 0
+              })
+            )
            break
        }
      }
@@ -342,7 +342,7 @@ class FileStorage {
    fileName: string,
    content: string,
    options?: SaveDialogOptions
-  ): Promise<string | null> => {
+  ): Promise<string> => {
    try {
      const result: SaveDialogReturnValue = await dialog.showSaveDialog({
        title: '保存文件',
@@ -350,14 +350,18 @@ class FileStorage {
        ...options
      })

+      if (result.canceled) {
+        return Promise.reject(new Error('User canceled the save dialog'))
+      }
+
      if (!result.canceled && result.filePath) {
        await writeFileSync(result.filePath, content, { encoding: 'utf-8' })
      }

      return result.filePath
-    } catch (err) {
+    } catch (err: any) {
      logger.error('[IPC - Error]', 'An error occurred saving the file:', err)
-      return null
+      return Promise.reject('An error occurred saving the file: ' + err?.message)
    }
  }

@@ -396,7 +400,11 @@ class FileStorage {
    }
  }

-  public downloadFile = async (_: Electron.IpcMainInvokeEvent, url: string): Promise<FileType> => {
+  public downloadFile = async (
+    _: Electron.IpcMainInvokeEvent,
+    url: string,
+    isUseContentType?: boolean
+  ): Promise<FileType> => {
    try {
      const response = await fetch(url)
      if (!response.ok) {
@@ -421,7 +429,7 @@ class FileStorage {
      }

      // 如果文件名没有后缀，根据Content-Type添加后缀
-      if (!filename.includes('.')) {
+      if (isUseContentType || !filename.includes('.')) {
        const contentType = response.headers.get('Content-Type')
        const ext = this.getExtensionFromMimeType(contentType)
        filename += ext
@@ -0,0 +1,79 @@
+import { File, FileState, GoogleGenAI, Pager } from '@google/genai'
+import { FileType } from '@types'
+import fs from 'fs'
+
+import { CacheService } from './CacheService'
+
+export class GeminiService {
+  private static readonly FILE_LIST_CACHE_KEY = 'gemini_file_list'
+  private static readonly CACHE_DURATION = 3000
+
+  static async uploadFile(
+    _: Electron.IpcMainInvokeEvent,
+    file: FileType,
+    { apiKey, baseURL }: { apiKey: string; baseURL: string }
+  ): Promise<File> {
+    const sdk = new GoogleGenAI({
+      vertexai: false,
+      apiKey,
+      httpOptions: {
+        baseUrl: baseURL
+      }
+    })
+
+    return await sdk.files.upload({
+      file: file.path,
+      config: {
+        mimeType: 'application/pdf',
+        name: file.id,
+        displayName: file.origin_name
+      }
+    })
+  }
+
+  static async base64File(_: Electron.IpcMainInvokeEvent, file: FileType) {
+    return {
+      data: Buffer.from(fs.readFileSync(file.path)).toString('base64'),
+      mimeType: 'application/pdf'
+    }
+  }
+
+  static async retrieveFile(_: Electron.IpcMainInvokeEvent, file: FileType, apiKey: string): Promise<File | undefined> {
+    const sdk = new GoogleGenAI({ vertexai: false, apiKey })
+    const cachedResponse = CacheService.get<any>(GeminiService.FILE_LIST_CACHE_KEY)
+    if (cachedResponse) {
+      return GeminiService.processResponse(cachedResponse, file)
+    }
+
+    const response = await sdk.files.list()
+    CacheService.set(GeminiService.FILE_LIST_CACHE_KEY, response, GeminiService.CACHE_DURATION)
+
+    return GeminiService.processResponse(response, file)
+  }
+
+  private static async processResponse(response: Pager<File>, file: FileType) {
+    for await (const f of response) {
+      if (f.state === FileState.ACTIVE) {
+        if (f.displayName === file.origin_name && Number(f.sizeBytes) === file.size) {
+          return f
+        }
+      }
+    }
+
+    return undefined
+  }
+
+  static async listFiles(_: Electron.IpcMainInvokeEvent, apiKey: string): Promise<File[]> {
+    const sdk = new GoogleGenAI({ vertexai: false, apiKey })
+    const files: File[] = []
+    for await (const f of await sdk.files.list()) {
+      files.push(f)
+    }
+    return files
+  }
+
+  static async deleteFile(_: Electron.IpcMainInvokeEvent, fileId: string, apiKey: string) {
+    const sdk = new GoogleGenAI({ vertexai: false, apiKey })
+    await sdk.files.delete({ name: fileId })
+  }
+}
@@ -4,6 +4,7 @@ import path from 'node:path'

 import { createInMemoryMCPServer } from '@main/mcpServers/factory'
 import { makeSureDirExists } from '@main/utils'
+import { buildFunctionCallToolName } from '@main/utils/mcp'
 import { getBinaryName, getBinaryPath } from '@main/utils/process'
 import { Client } from '@modelcontextprotocol/sdk/client/index.js'
 import { SSEClientTransport, SSEClientTransportOptions } from '@modelcontextprotocol/sdk/client/sse.js'
@@ -69,17 +70,7 @@ function withCache<T extends unknown[], R>(

 class McpService {
  private clients: Map<string, Client> = new Map()
-
-  private getServerKey(server: MCPServer): string {
-    return JSON.stringify({
-      baseUrl: server.baseUrl,
-      command: server.command,
-      args: server.args,
-      registryUrl: server.registryUrl,
-      env: server.env,
-      id: server.id
-    })
-  }
+  private pendingClients: Map<string, Promise<Client>> = new Map()

  constructor() {
    this.initClient = this.initClient.bind(this)
@@ -96,9 +87,26 @@ class McpService {
    this.cleanup = this.cleanup.bind(this)
  }

+  private getServerKey(server: MCPServer): string {
+    return JSON.stringify({
+      baseUrl: server.baseUrl,
+      command: server.command,
+      args: Array.isArray(server.args) ? server.args : [],
+      registryUrl: server.registryUrl,
+      env: server.env,
+      id: server.id
+    })
+  }
+
  async initClient(server: MCPServer): Promise<Client> {
    const serverKey = this.getServerKey(server)

+    // If there's a pending initialization, wait for it
+    const pendingClient = this.pendingClients.get(serverKey)
+    if (pendingClient) {
+      return pendingClient
+    }
+
    // Check if we already have a client for this server configuration
    const existingClient = this.clients.get(serverKey)
    if (existingClient) {
@@ -113,209 +121,232 @@ class McpService {
        } else {
          return existingClient
        }
-      } catch (error) {
-        Logger.error(`[MCP] Error pinging server ${server.name}:`, error)
+      } catch (error: any) {
+        Logger.error(`[MCP] Error pinging server ${server.name}:`, error?.message)
        this.clients.delete(serverKey)
      }
    }
-    // Create new client instance for each connection
-    const client = new Client({ name: 'Cherry Studio', version: app.getVersion() }, { capabilities: {} })

-    const args = [...(server.args || [])]
+    // Create a promise for the initialization process
+    const initPromise = (async () => {
+      try {
+        // Create new client instance for each connection
+        const client = new Client({ name: 'Cherry Studio', version: app.getVersion() }, { capabilities: {} })

-    // let transport: StdioClientTransport | SSEClientTransport | InMemoryTransport | StreamableHTTPClientTransport
-    const authProvider = new McpOAuthClientProvider({
-      serverUrlHash: crypto
-        .createHash('md5')
-        .update(server.baseUrl || '')
-        .digest('hex')
-    })
+        const args = [...(server.args || [])]

-    const initTransport = async (): Promise<
-      StdioClientTransport | SSEClientTransport | InMemoryTransport | StreamableHTTPClientTransport
-    > => {
-      // Create appropriate transport based on configuration
-      if (server.type === 'inMemory') {
-        Logger.info(`[MCP] Using in-memory transport for server: ${server.name}`)
-        const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair()
-        // start the in-memory server with the given name and environment variables
-        const inMemoryServer = createInMemoryMCPServer(server.name, args, server.env || {})
-        try {
-          await inMemoryServer.connect(serverTransport)
-          Logger.info(`[MCP] In-memory server started: ${server.name}`)
-        } catch (error: Error | any) {
-          Logger.error(`[MCP] Error starting in-memory server: ${error}`)
-          throw new Error(`Failed to start in-memory server: ${error.message}`)
-        }
-        // set the client transport to the client
-        return clientTransport
-      } else if (server.baseUrl) {
-        if (server.type === 'streamableHttp') {
-          const options: StreamableHTTPClientTransportOptions = {
-            requestInit: {
-              headers: server.headers || {}
-            },
-            authProvider
-          }
-          return new StreamableHTTPClientTransport(new URL(server.baseUrl!), options)
-        } else if (server.type === 'sse') {
-          const options: SSEClientTransportOptions = {
-            eventSourceInit: {
-              fetch: async (url, init) => {
-                const headers = { ...(server.headers || {}), ...(init?.headers || {}) }
+        // let transport: StdioClientTransport | SSEClientTransport | InMemoryTransport | StreamableHTTPClientTransport
+        const authProvider = new McpOAuthClientProvider({
+          serverUrlHash: crypto
+            .createHash('md5')
+            .update(server.baseUrl || '')
+            .digest('hex')
+        })

-                // Get tokens from authProvider to make sure using the latest tokens
-                if (authProvider && typeof authProvider.tokens === 'function') {
-                  try {
-                    const tokens = await authProvider.tokens()
-                    if (tokens && tokens.access_token) {
-                      headers['Authorization'] = `Bearer ${tokens.access_token}`
+        const initTransport = async (): Promise<
+          StdioClientTransport | SSEClientTransport | InMemoryTransport | StreamableHTTPClientTransport
+        > => {
+          // Create appropriate transport based on configuration
+          if (server.type === 'inMemory') {
+            Logger.info(`[MCP] Using in-memory transport for server: ${server.name}`)
+            const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair()
+            // start the in-memory server with the given name and environment variables
+            const inMemoryServer = createInMemoryMCPServer(server.name, args, server.env || {})
+            try {
+              await inMemoryServer.connect(serverTransport)
+              Logger.info(`[MCP] In-memory server started: ${server.name}`)
+            } catch (error: Error | any) {
+              Logger.error(`[MCP] Error starting in-memory server: ${error}`)
+              throw new Error(`Failed to start in-memory server: ${error.message}`)
+            }
+            // set the client transport to the client
+            return clientTransport
+          } else if (server.baseUrl) {
+            if (server.type === 'streamableHttp') {
+              const options: StreamableHTTPClientTransportOptions = {
+                requestInit: {
+                  headers: server.headers || {}
+                },
+                authProvider
+              }
+              return new StreamableHTTPClientTransport(new URL(server.baseUrl!), options)
+            } else if (server.type === 'sse') {
+              const options: SSEClientTransportOptions = {
+                eventSourceInit: {
+                  fetch: async (url, init) => {
+                    const headers = { ...(server.headers || {}), ...(init?.headers || {}) }
+
+                    // Get tokens from authProvider to make sure using the latest tokens
+                    if (authProvider && typeof authProvider.tokens === 'function') {
+                      try {
+                        const tokens = await authProvider.tokens()
+                        if (tokens && tokens.access_token) {
+                          headers['Authorization'] = `Bearer ${tokens.access_token}`
+                        }
+                      } catch (error) {
+                        Logger.error('Failed to fetch tokens:', error)
+                      }
                    }
-                  } catch (error) {
-                    Logger.error('Failed to fetch tokens:', error)
+
+                    return fetch(url, { ...init, headers })
                  }
+                },
+                requestInit: {
+                  headers: server.headers || {}
+                },
+                authProvider
+              }
+              return new SSEClientTransport(new URL(server.baseUrl!), options)
+            } else {
+              throw new Error('Invalid server type')
+            }
+          } else if (server.command) {
+            let cmd = server.command
+
+            if (server.command === 'npx') {
+              cmd = await getBinaryPath('bun')
+              Logger.info(`[MCP] Using command: ${cmd}`)
+
+              // add -x to args if args exist
+              if (args && args.length > 0) {
+                if (!args.includes('-y')) {
+                  args.unshift('-y')
+                }
+                if (!args.includes('x')) {
+                  args.unshift('x')
+                }
+              }
+              if (server.registryUrl) {
+                server.env = {
+                  ...server.env,
+                  NPM_CONFIG_REGISTRY: server.registryUrl
                }

-                return fetch(url, { ...init, headers })
+                // if the server name is mcp-auto-install, use the mcp-registry.json file in the bin directory
+                if (server.name.includes('mcp-auto-install')) {
+                  const binPath = await getBinaryPath()
+                  makeSureDirExists(binPath)
+                  server.env.MCP_REGISTRY_PATH = path.join(binPath, '..', 'config', 'mcp-registry.json')
+                }
+              }
+            } else if (server.command === 'uvx' || server.command === 'uv') {
+              cmd = await getBinaryPath(server.command)
+              if (server.registryUrl) {
+                server.env = {
+                  ...server.env,
+                  UV_DEFAULT_INDEX: server.registryUrl,
+                  PIP_INDEX_URL: server.registryUrl
+                }
              }
-            },
-            requestInit: {
-              headers: server.headers || {}
-            },
-            authProvider
-          }
-          return new SSEClientTransport(new URL(server.baseUrl!), options)
-        } else {
-          throw new Error('Invalid server type')
-        }
-      } else if (server.command) {
-        let cmd = server.command
-
-        if (server.command === 'npx') {
-          cmd = await getBinaryPath('bun')
-          Logger.info(`[MCP] Using command: ${cmd}`)
-
-          // add -x to args if args exist
-          if (args && args.length > 0) {
-            if (!args.includes('-y')) {
-              args.unshift('-y')
-            }
-            if (!args.includes('x')) {
-              args.unshift('x')
-            }
-          }
-          if (server.registryUrl) {
-            server.env = {
-              ...server.env,
-              NPM_CONFIG_REGISTRY: server.registryUrl
            }

-            // if the server name is mcp-auto-install, use the mcp-registry.json file in the bin directory
-            if (server.name.includes('mcp-auto-install')) {
-              const binPath = await getBinaryPath()
-              makeSureDirExists(binPath)
-              server.env.MCP_REGISTRY_PATH = path.join(binPath, '..', 'config', 'mcp-registry.json')
-            }
-          }
-        } else if (server.command === 'uvx' || server.command === 'uv') {
-          cmd = await getBinaryPath(server.command)
-          if (server.registryUrl) {
-            server.env = {
-              ...server.env,
-              UV_DEFAULT_INDEX: server.registryUrl,
-              PIP_INDEX_URL: server.registryUrl
+            Logger.info(`[MCP] Starting server with command: ${cmd} ${args ? args.join(' ') : ''}`)
+            // Logger.info(`[MCP] Environment variables for server:`, server.env)
+            const loginShellEnv = await this.getLoginShellEnv()
+
+            // Bun not support proxy https://github.com/oven-sh/bun/issues/16812
+            if (cmd.includes('bun')) {
+              this.removeProxyEnv(loginShellEnv)
            }
+
+            const stdioTransport = new StdioClientTransport({
+              command: cmd,
+              args,
+              env: {
+                ...loginShellEnv,
+                ...server.env
+              },
+              stderr: 'pipe'
+            })
+            stdioTransport.stderr?.on('data', (data) =>
+              Logger.info(`[MCP] Stdio stderr for server: ${server.name} `, data.toString())
+            )
+            return stdioTransport
+          } else {
+            throw new Error('Either baseUrl or command must be provided')
          }
        }

-        Logger.info(`[MCP] Starting server with command: ${cmd} ${args ? args.join(' ') : ''}`)
-        // Logger.info(`[MCP] Environment variables for server:`, server.env)
-        const loginShellEnv = await this.getLoginShellEnv()
-        const stdioTransport = new StdioClientTransport({
-          command: cmd,
-          args,
-          env: {
-            ...loginShellEnv,
-            ...server.env
-          },
-          stderr: 'pipe'
-        })
-        stdioTransport.stderr?.on('data', (data) =>
-          Logger.info(`[MCP] Stdio stderr for server: ${server.name} `, data.toString())
-        )
-        return stdioTransport
-      } else {
-        throw new Error('Either baseUrl or command must be provided')
-      }
-    }
+        const handleAuth = async (client: Client, transport: SSEClientTransport | StreamableHTTPClientTransport) => {
+          Logger.info(`[MCP] Starting OAuth flow for server: ${server.name}`)
+          // Create an event emitter for the OAuth callback
+          const events = new EventEmitter()

-    const handleAuth = async (client: Client, transport: SSEClientTransport | StreamableHTTPClientTransport) => {
-      Logger.info(`[MCP] Starting OAuth flow for server: ${server.name}`)
-      // Create an event emitter for the OAuth callback
-      const events = new EventEmitter()
+          // Create a callback server
+          const callbackServer = new CallBackServer({
+            port: authProvider.config.callbackPort,
+            path: authProvider.config.callbackPath || '/oauth/callback',
+            events
+          })

-      // Create a callback server
-      const callbackServer = new CallBackServer({
-        port: authProvider.config.callbackPort,
-        path: authProvider.config.callbackPath || '/oauth/callback',
-        events
-      })
+          // Set a timeout to close the callback server
+          const timeoutId = setTimeout(() => {
+            Logger.warn(`[MCP] OAuth flow timed out for server: ${server.name}`)
+            callbackServer.close()
+          }, 300000) // 5 minutes timeout

-      // Set a timeout to close the callback server
-      const timeoutId = setTimeout(() => {
-        Logger.warn(`[MCP] OAuth flow timed out for server: ${server.name}`)
-        callbackServer.close()
-      }, 300000) // 5 minutes timeout
+          try {
+            // Wait for the authorization code
+            const authCode = await callbackServer.waitForAuthCode()
+            Logger.info(`[MCP] Received auth code: ${authCode}`)

-      try {
-        // Wait for the authorization code
-        const authCode = await callbackServer.waitForAuthCode()
-        Logger.info(`[MCP] Received auth code: ${authCode}`)
+            // Complete the OAuth flow
+            await transport.finishAuth(authCode)

-        // Complete the OAuth flow
-        await transport.finishAuth(authCode)
+            Logger.info(`[MCP] OAuth flow completed for server: ${server.name}`)

-        Logger.info(`[MCP] OAuth flow completed for server: ${server.name}`)
+            const newTransport = await initTransport()
+            // Try to connect again
+            await client.connect(newTransport)

-        const newTransport = await initTransport()
-        // Try to connect again
-        await client.connect(newTransport)
+            Logger.info(`[MCP] Successfully authenticated with server: ${server.name}`)
+          } catch (oauthError) {
+            Logger.error(`[MCP] OAuth authentication failed for server ${server.name}:`, oauthError)
+            throw new Error(
+              `OAuth authentication failed: ${oauthError instanceof Error ? oauthError.message : String(oauthError)}`
+            )
+          } finally {
+            // Clear the timeout and close the callback server
+            clearTimeout(timeoutId)
+            callbackServer.close()
+          }
+        }

-        Logger.info(`[MCP] Successfully authenticated with server: ${server.name}`)
-      } catch (oauthError) {
-        Logger.error(`[MCP] OAuth authentication failed for server ${server.name}:`, oauthError)
-        throw new Error(
-          `OAuth authentication failed: ${oauthError instanceof Error ? oauthError.message : String(oauthError)}`
-        )
+        try {
+          const transport = await initTransport()
+          try {
+            await client.connect(transport)
+          } catch (error: Error | any) {
+            if (
+              error instanceof Error &&
+              (error.name === 'UnauthorizedError' || error.message.includes('Unauthorized'))
+            ) {
+              Logger.info(`[MCP] Authentication required for server: ${server.name}`)
+              await handleAuth(client, transport as SSEClientTransport | StreamableHTTPClientTransport)
+            } else {
+              throw error
+            }
+          }
+
+          // Store the new client in the cache
+          this.clients.set(serverKey, client)
+
+          Logger.info(`[MCP] Activated server: ${server.name}`)
+          return client
+        } catch (error: any) {
+          Logger.error(`[MCP] Error activating server ${server.name}:`, error?.message)
+          throw new Error(`[MCP] Error activating server ${server.name}: ${error.message}`)
+        }
      } finally {
-        // Clear the timeout and close the callback server
-        clearTimeout(timeoutId)
-        callbackServer.close()
+        // Clean up the pending promise when done
+        this.pendingClients.delete(serverKey)
      }
-    }
+    })()

-    try {
-      const transport = await initTransport()
-      try {
-        await client.connect(transport)
-      } catch (error: Error | any) {
-        if (error instanceof Error && (error.name === 'UnauthorizedError' || error.message.includes('Unauthorized'))) {
-          Logger.info(`[MCP] Authentication required for server: ${server.name}`)
-          await handleAuth(client, transport as SSEClientTransport | StreamableHTTPClientTransport)
-        } else {
-          throw error
-        }
-      }
+    // Store the pending promise
+    this.pendingClients.set(serverKey, initPromise)

-      // Store the new client in the cache
-      this.clients.set(serverKey, client)
-
-      Logger.info(`[MCP] Activated server: ${server.name}`)
-      return client
-    } catch (error: any) {
-      Logger.error(`[MCP] Error activating server ${server.name}:`, error)
-      throw new Error(`[MCP] Error activating server ${server.name}: ${error.message}`)
-    }
+    return initPromise
  }

  async closeClient(serverKey: string) {
@@ -357,12 +388,32 @@ class McpService {
    for (const [key] of this.clients) {
      try {
        await this.closeClient(key)
-      } catch (error) {
-        Logger.error(`[MCP] Failed to close client: ${error}`)
+      } catch (error: any) {
+        Logger.error(`[MCP] Failed to close client: ${error?.message}`)
      }
    }
  }

+  /**
+   * Check connectivity for an MCP server
+   */
+  public async checkMcpConnectivity(_: Electron.IpcMainInvokeEvent, server: MCPServer): Promise<boolean> {
+    Logger.info(`[MCP] Checking connectivity for server: ${server.name}`)
+    try {
+      const client = await this.initClient(server)
+      // Attempt to list tools as a way to check connectivity
+      await client.listTools()
+      Logger.info(`[MCP] Connectivity check successful for server: ${server.name}`)
+      return true
+    } catch (error) {
+      Logger.error(`[MCP] Connectivity check failed for server: ${server.name}`, error)
+      // Close the client if connectivity check fails to ensure a clean state for the next attempt
+      const serverKey = this.getServerKey(server)
+      await this.closeClient(serverKey)
+      return false
+    }
+  }
+
  private async listToolsImpl(server: MCPServer): Promise<MCPTool[]> {
    Logger.info(`[MCP] Listing tools for server: ${server.name}`)
    const client = await this.initClient(server)
@@ -372,15 +423,15 @@ class McpService {
      tools.map((tool: any) => {
        const serverTool: MCPTool = {
          ...tool,
-          id: `f${nanoid()}`,
+          id: buildFunctionCallToolName(server.name, tool.name),
          serverId: server.id,
          serverName: server.name
        }
        serverTools.push(serverTool)
      })
      return serverTools
-    } catch (error) {
-      Logger.error(`[MCP] Failed to list tools for server: ${server.name}`, error)
+    } catch (error: any) {
+      Logger.error(`[MCP] Failed to list tools for server: ${server.name}`, error?.message)
      return []
    }
  }
@@ -439,8 +490,8 @@ class McpService {
   * List prompts available on an MCP server
   */
  private async listPromptsImpl(server: MCPServer): Promise<MCPPrompt[]> {
-    Logger.info(`[MCP] Listing prompts for server: ${server.name}`)
    const client = await this.initClient(server)
+    Logger.info(`[MCP] Listing prompts for server: ${server.name}`)
    try {
      const { prompts } = await client.listPrompts()
      return prompts.map((prompt: any) => ({
@@ -449,8 +500,11 @@ class McpService {
        serverId: server.id,
        serverName: server.name
      }))
-    } catch (error) {
-      Logger.error(`[MCP] Failed to list prompts for server: ${server.name}`, error)
+    } catch (error: any) {
+      // -32601 is the code for the method not found
+      if (error?.code !== -32601) {
+        Logger.error(`[MCP] Failed to list prompts for server: ${server.name}`, error?.message)
+      }
      return []
    }
  }
@@ -508,19 +562,21 @@ class McpService {
   * List resources available on an MCP server (implementation)
   */
  private async listResourcesImpl(server: MCPServer): Promise<MCPResource[]> {
-    Logger.info(`[MCP] Listing resources for server: ${server.name}`)
    const client = await this.initClient(server)
+    Logger.info(`[MCP] Listing resources for server: ${server.name}`)
    try {
      const result = await client.listResources()
      const resources = result.resources || []
-      const serverResources = (Array.isArray(resources) ? resources : []).map((resource: any) => ({
+      return (Array.isArray(resources) ? resources : []).map((resource: any) => ({
        ...resource,
        serverId: server.id,
        serverName: server.name
      }))
-      return serverResources
-    } catch (error) {
-      Logger.error(`[MCP] Failed to list resources for server: ${server.name}`, error)
+    } catch (error: any) {
+      // -32601 is the code for the method not found
+      if (error?.code !== -32601) {
+        Logger.error(`[MCP] Failed to list resources for server: ${server.name}`, error?.message)
+      }
      return []
    }
  }
@@ -563,7 +619,7 @@ class McpService {
        contents: contents
      }
    } catch (error: Error | any) {
-      Logger.error(`[MCP] Failed to get resource ${uri} from server: ${server.name}`, error)
+      Logger.error(`[MCP] Failed to get resource ${uri} from server: ${server.name}`, error.message)
      throw new Error(`Failed to get resource ${uri} from server: ${server.name}: ${error.message}`)
    }
  }
@@ -600,7 +656,14 @@ class McpService {
      return {}
    }
  })
+
+  private removeProxyEnv(env: Record<string, string>) {
+    delete env.HTTPS_PROXY
+    delete env.HTTP_PROXY
+    delete env.grpc_proxy
+    delete env.http_proxy
+    delete env.https_proxy
+  }
 }

-const mcpService = new McpService()
-export default mcpService
+export default new McpService()
@@ -0,0 +1,31 @@
+import { BrowserWindow, Notification as ElectronNotification } from 'electron'
+import { Notification } from 'src/renderer/src/types/notification'
+
+import icon from '../../../build/icon.png?asset'
+
+class NotificationService {
+  private window: BrowserWindow
+
+  constructor(window: BrowserWindow) {
+    // Initialize the service
+    this.window = window
+  }
+
+  public async sendNotification(notification: Notification) {
+    // 使用 Electron Notification API
+    const electronNotification = new ElectronNotification({
+      title: notification.title,
+      body: notification.message,
+      icon: icon
+    })
+
+    electronNotification.on('click', () => {
+      this.window.show()
+      this.window.webContents.send('notification-click', notification)
+    })
+
+    electronNotification.show()
+  }
+}
+
+export default NotificationService
@@ -6,6 +6,7 @@ import { promisify } from 'node:util'
 import { app } from 'electron'
 import Logger from 'electron-log'

+import { handleProvidersProtocolUrl } from './urlschema/handle-providers'
 import { handleMcpProtocolUrl } from './urlschema/mcp-install'
 import { windowService } from './WindowService'

@@ -34,6 +35,9 @@ export function handleProtocolUrl(url: string) {
    case 'mcp':
      handleMcpProtocolUrl(urlObj)
      return
+    case 'providers':
+      handleProvidersProtocolUrl(urlObj)
+      return
  }

  // You can send the data to your renderer process
@@ -1,8 +1,7 @@
 import { ProxyConfig as _ProxyConfig, session } from 'electron'
-import { socksDispatcher } from 'fetch-socks'
 import { getSystemProxy } from 'os-proxy-config'
 import { ProxyAgent as GeneralProxyAgent } from 'proxy-agent'
-import { ProxyAgent, setGlobalDispatcher } from 'undici'
+// import { ProxyAgent, setGlobalDispatcher } from 'undici'

 type ProxyMode = 'system' | 'custom' | 'none'

@@ -121,22 +120,22 @@ export class ProxyManager {
    return this.config.url || ''
  }

-  setGlobalProxy() {
-    const proxyUrl = this.config.url
-    if (proxyUrl) {
-      const [protocol, address] = proxyUrl.split('://')
-      const [host, port] = address.split(':')
-      if (!protocol.includes('socks')) {
-        setGlobalDispatcher(new ProxyAgent(proxyUrl))
-      } else {
-        global[Symbol.for('undici.globalDispatcher.1')] = socksDispatcher({
-          port: parseInt(port),
-          type: protocol === 'socks5' ? 5 : 4,
-          host: host
-        })
-      }
-    }
-  }
+  // setGlobalProxy() {
+  //   const proxyUrl = this.config.url
+  //   if (proxyUrl) {
+  //     const [protocol, address] = proxyUrl.split('://')
+  //     const [host, port] = address.split(':')
+  //     if (!protocol.includes('socks')) {
+  //       setGlobalDispatcher(new ProxyAgent(proxyUrl))
+  //     } else {
+  //       global[Symbol.for('undici.globalDispatcher.1')] = socksDispatcher({
+  //         port: parseInt(port),
+  //         type: protocol === 'socks5' ? 5 : 4,
+  //         host: host
+  //       })
+  //     }
+  //   }
+  // }
 }

 export const proxyManager = new ProxyManager()
@@ -6,12 +6,8 @@ import { session, shell, webContents } from 'electron'
 */
 export function initSessionUserAgent() {
  const wvSession = session.fromPartition('persist:webview')
-  const newChromeVersion = '135.0.7049.96'
  const originUA = wvSession.getUserAgent()
-  const newUA = originUA
-    .replace(/CherryStudio\/\S+\s/, '')
-    .replace(/Electron\/\S+\s/, '')
-    .replace(/Chrome\/\d+\.\d+\.\d+\.\d+/, `Chrome/${newChromeVersion}`)
+  const newUA = originUA.replace(/CherryStudio\/\S+\s/, '').replace(/Electron\/\S+\s/, '')

  wvSession.setUserAgent(newUA)
 }
@@ -75,7 +75,9 @@ export class WindowService {
        sandbox: false,
        webSecurity: false,
        webviewTag: true,
-        allowRunningInsecureContent: true
+        allowRunningInsecureContent: true,
+        zoomFactor: configManager.getZoomFactor(),
+        backgroundThrottling: false
      }
    })

@@ -184,6 +186,12 @@ export class WindowService {
      mainWindow.webContents.setZoomFactor(configManager.getZoomFactor())
    })

+    // set the zoom factor again when the window is going to restore
+    // minimize and restore will cause zoom reset
+    mainWindow.on('restore', () => {
+      mainWindow.webContents.setZoomFactor(configManager.getZoomFactor())
+    })
+
    // ARCH: as `will-resize` is only for Win & Mac,
    // linux has the same problem, use `resize` listener instead
    // but `resize` will fliker the ui
@@ -198,10 +206,21 @@ export class WindowService {
      // 当按下Escape键且窗口处于全屏状态时退出全屏
      if (input.key === 'Escape' && !input.alt && !input.control && !input.meta && !input.shift) {
        if (mainWindow.isFullScreen()) {
-          event.preventDefault()
-          mainWindow.setFullScreen(false)
+          // 获取 shortcuts 配置
+          const shortcuts = configManager.getShortcuts()
+          const exitFullscreenShortcut = shortcuts.find((s) => s.key === 'exit_fullscreen')
+          if (exitFullscreenShortcut == undefined) {
+            mainWindow.setFullScreen(false)
+            return
+          }
+          if (exitFullscreenShortcut?.enabled) {
+            event.preventDefault()
+            mainWindow.setFullScreen(false)
+            return
+          }
        }
      }
+      return
    })
  }

@@ -306,7 +325,7 @@ export class WindowService {

      /**
       * 上述逻辑以下:
-       * win/linux: 是“开启托盘+设置关闭时最小化到托盘”的情况
+       * win/linux: 是"开启托盘+设置关闭时最小化到托盘"的情况
       * mac: 任何情况都会到这里，因此需要单独处理mac
       */

@@ -429,7 +448,8 @@ export class WindowService {
        preload: join(__dirname, '../preload/index.js'),
        sandbox: false,
        webSecurity: false,
-        webviewTag: true
+        webviewTag: true,
+        backgroundThrottling: false
      }
    })

@@ -47,7 +47,7 @@ function getLoginShellEnvironment(): Promise<Record<string, string>> {
      commandArgs = ['-ilc', shellCommandToGetEnv] // -i for interactive, -l for login, -c to execute command
    }

-    Logger.log(`Spawning shell: ${shellPath} with args: ${commandArgs.join(' ')} in ${homeDirectory}`)
+    Logger.log(`[ShellEnv] Spawning shell: ${shellPath} with args: ${commandArgs.join(' ')} in ${homeDirectory}`)

    const child = spawn(shellPath, commandArgs, {
      cwd: homeDirectory, // Run the command in the user's home directory
@@ -85,7 +85,7 @@ function getLoginShellEnvironment(): Promise<Record<string, string>> {
        Logger.warn(`Shell process stderr output (even with exit code 0):\n${errorOutput.trim()}`)
      }

-      const env = {}
+      const env: Record<string, string> = {}
      const lines = output.split('\n')

      lines.forEach((line) => {
@@ -110,6 +110,8 @@ function getLoginShellEnvironment(): Promise<Record<string, string>> {
        Logger.warn('Raw output from shell:\n', output)
      }

+      env.PATH = env.Path || env.PATH || ''
+
      resolve(env)
    })
  })
@@ -0,0 +1,37 @@
+import { IpcChannel } from '@shared/IpcChannel'
+import Logger from 'electron-log'
+
+import { windowService } from '../WindowService'
+
+export function handleProvidersProtocolUrl(url: URL) {
+  const params = new URLSearchParams(url.search)
+  switch (url.pathname) {
+    case '/api-keys': {
+      // jsonConfig example:
+      // {
+      //   "id": "tokenflux",
+      //   "baseUrl": "https://tokenflux.ai/v1",
+      //   "apiKey": "sk-xxxx"
+      // }
+      // cherrystudio://providers/api-keys?data={base64Encode(JSON.stringify(jsonConfig))}
+      const data = params.get('data')
+      if (data) {
+        const stringify = Buffer.from(data, 'base64').toString('utf8')
+        Logger.info('get api keys from urlschema: ', stringify)
+        const jsonConfig = JSON.parse(stringify)
+        Logger.info('get api keys from urlschema: ', jsonConfig)
+        const mainWindow = windowService.getMainWindow()
+        if (mainWindow && !mainWindow.isDestroyed()) {
+          mainWindow.webContents.send(IpcChannel.Provider_AddKey, jsonConfig)
+          mainWindow.webContents.executeJavaScript(`window.navigate('/settings/provider?id=${jsonConfig.id}')`)
+        }
+      } else {
+        Logger.error('No data found in URL')
+      }
+      break
+    }
+    default:
+      console.error(`Unknown MCP protocol URL: ${url}`)
+      break
+  }
+}
@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+
+import { decrypt, encrypt } from '../aes'
+
+const key = '12345678901234567890123456789012' // 32字节
+const iv = '1234567890abcdef1234567890abcdef' // 32字节hex，实际应16字节hex
+
+function getIv16() {
+  // 取前16字节作为 hex
+  return iv.slice(0, 32)
+}
+
+describe('aes utils', () => {
+  it('should encrypt and decrypt normal string', () => {
+    const text = 'hello world'
+    const { iv: outIv, encryptedData } = encrypt(text, key, getIv16())
+    expect(typeof encryptedData).toBe('string')
+    expect(outIv).toBe(getIv16())
+    const decrypted = decrypt(encryptedData, getIv16(), key)
+    expect(decrypted).toBe(text)
+  })
+
+  it('should support unicode and special chars', () => {
+    const text = '你好，世界！🌟🚀'
+    const { encryptedData } = encrypt(text, key, getIv16())
+    const decrypted = decrypt(encryptedData, getIv16(), key)
+    expect(decrypted).toBe(text)
+  })
+
+  it('should handle empty string', () => {
+    const text = ''
+    const { encryptedData } = encrypt(text, key, getIv16())
+    const decrypted = decrypt(encryptedData, getIv16(), key)
+    expect(decrypted).toBe(text)
+  })
+
+  it('should encrypt and decrypt long string', () => {
+    const text = 'a'.repeat(100_000)
+    const { encryptedData } = encrypt(text, key, getIv16())
+    const decrypted = decrypt(encryptedData, getIv16(), key)
+    expect(decrypted).toBe(text)
+  })
+
+  it('should throw error for wrong key', () => {
+    const text = 'test'
+    const { encryptedData } = encrypt(text, key, getIv16())
+    expect(() => decrypt(encryptedData, getIv16(), 'wrongkeywrongkeywrongkeywrongkey')).toThrow()
+  })
+
+  it('should throw error for wrong iv', () => {
+    const text = 'test'
+    const { encryptedData } = encrypt(text, key, getIv16())
+    expect(() => decrypt(encryptedData, 'abcdefabcdefabcdefabcdefabcdefab', key)).toThrow()
+  })
+
+  it('should throw error for invalid key/iv length', () => {
+    expect(() => encrypt('test', 'shortkey', getIv16())).toThrow()
+    expect(() => encrypt('test', key, 'shortiv')).toThrow()
+  })
+
+  it('should throw error for invalid encrypted data', () => {
+    expect(() => decrypt('nothexdata', getIv16(), key)).toThrow()
+  })
+
+  it('should throw error for non-string input', () => {
+    // @ts-expect-error purposely pass wrong type to test error branch
+    expect(() => encrypt(null, key, getIv16())).toThrow()
+    // @ts-expect-error purposely pass wrong type to test error branch
+    expect(() => decrypt(null, getIv16(), key)).toThrow()
+  })
+})
@@ -0,0 +1,243 @@
+import * as fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+
+import { FileTypes } from '@types'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { getAllFiles, getAppConfigDir, getConfigDir, getFilesDir, getFileType, getTempDir } from '../file'
+
+// Mock dependencies
+vi.mock('node:fs')
+vi.mock('node:os')
+vi.mock('node:path')
+vi.mock('uuid', () => ({
+  v4: () => 'mock-uuid'
+}))
+vi.mock('electron', () => ({
+  app: {
+    getPath: vi.fn((key) => {
+      if (key === 'temp') return '/mock/temp'
+      if (key === 'userData') return '/mock/userData'
+      return '/mock/unknown'
+    })
+  }
+}))
+
+describe('file', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Mock path.extname
+    vi.mocked(path.extname).mockImplementation((file) => {
+      const parts = file.split('.')
+      return parts.length > 1 ? `.${parts[parts.length - 1]}` : ''
+    })
+
+    // Mock path.basename
+    vi.mocked(path.basename).mockImplementation((file) => {
+      const parts = file.split('/')
+      return parts[parts.length - 1]
+    })
+
+    // Mock path.join
+    vi.mocked(path.join).mockImplementation((...args) => args.join('/'))
+
+    // Mock os.homedir
+    vi.mocked(os.homedir).mockReturnValue('/mock/home')
+  })
+
+  afterEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('getFileType', () => {
+    it('should return IMAGE for image extensions', () => {
+      expect(getFileType('.jpg')).toBe(FileTypes.IMAGE)
+      expect(getFileType('.jpeg')).toBe(FileTypes.IMAGE)
+      expect(getFileType('.png')).toBe(FileTypes.IMAGE)
+      expect(getFileType('.gif')).toBe(FileTypes.IMAGE)
+      expect(getFileType('.webp')).toBe(FileTypes.IMAGE)
+      expect(getFileType('.bmp')).toBe(FileTypes.IMAGE)
+    })
+
+    it('should return VIDEO for video extensions', () => {
+      expect(getFileType('.mp4')).toBe(FileTypes.VIDEO)
+      expect(getFileType('.avi')).toBe(FileTypes.VIDEO)
+      expect(getFileType('.mov')).toBe(FileTypes.VIDEO)
+      expect(getFileType('.mkv')).toBe(FileTypes.VIDEO)
+      expect(getFileType('.flv')).toBe(FileTypes.VIDEO)
+    })
+
+    it('should return AUDIO for audio extensions', () => {
+      expect(getFileType('.mp3')).toBe(FileTypes.AUDIO)
+      expect(getFileType('.wav')).toBe(FileTypes.AUDIO)
+      expect(getFileType('.ogg')).toBe(FileTypes.AUDIO)
+      expect(getFileType('.flac')).toBe(FileTypes.AUDIO)
+      expect(getFileType('.aac')).toBe(FileTypes.AUDIO)
+    })
+
+    it('should return TEXT for text extensions', () => {
+      expect(getFileType('.txt')).toBe(FileTypes.TEXT)
+      expect(getFileType('.md')).toBe(FileTypes.TEXT)
+      expect(getFileType('.html')).toBe(FileTypes.TEXT)
+      expect(getFileType('.json')).toBe(FileTypes.TEXT)
+      expect(getFileType('.js')).toBe(FileTypes.TEXT)
+      expect(getFileType('.ts')).toBe(FileTypes.TEXT)
+      expect(getFileType('.css')).toBe(FileTypes.TEXT)
+      expect(getFileType('.java')).toBe(FileTypes.TEXT)
+      expect(getFileType('.py')).toBe(FileTypes.TEXT)
+    })
+
+    it('should return DOCUMENT for document extensions', () => {
+      expect(getFileType('.pdf')).toBe(FileTypes.DOCUMENT)
+      expect(getFileType('.pptx')).toBe(FileTypes.DOCUMENT)
+      expect(getFileType('.docx')).toBe(FileTypes.DOCUMENT)
+      expect(getFileType('.xlsx')).toBe(FileTypes.DOCUMENT)
+      expect(getFileType('.odt')).toBe(FileTypes.DOCUMENT)
+    })
+
+    it('should return OTHER for unknown extensions', () => {
+      expect(getFileType('.unknown')).toBe(FileTypes.OTHER)
+      expect(getFileType('')).toBe(FileTypes.OTHER)
+      expect(getFileType('.')).toBe(FileTypes.OTHER)
+      expect(getFileType('...')).toBe(FileTypes.OTHER)
+      expect(getFileType('.123')).toBe(FileTypes.OTHER)
+    })
+
+    it('should handle case-insensitive extensions', () => {
+      expect(getFileType('.JPG')).toBe(FileTypes.IMAGE)
+      expect(getFileType('.PDF')).toBe(FileTypes.DOCUMENT)
+      expect(getFileType('.Mp3')).toBe(FileTypes.AUDIO)
+      expect(getFileType('.HtMl')).toBe(FileTypes.TEXT)
+      expect(getFileType('.Xlsx')).toBe(FileTypes.DOCUMENT)
+    })
+
+    it('should handle extensions without leading dot', () => {
+      expect(getFileType('jpg')).toBe(FileTypes.OTHER)
+      expect(getFileType('pdf')).toBe(FileTypes.OTHER)
+      expect(getFileType('mp3')).toBe(FileTypes.OTHER)
+    })
+
+    it('should handle extreme cases', () => {
+      expect(getFileType('.averylongfileextensionname')).toBe(FileTypes.OTHER)
+      expect(getFileType('.tar.gz')).toBe(FileTypes.OTHER)
+      expect(getFileType('.文件')).toBe(FileTypes.OTHER)
+      expect(getFileType('.файл')).toBe(FileTypes.OTHER)
+    })
+  })
+
+  describe('getAllFiles', () => {
+    it('should return all valid files recursively', () => {
+      // Mock file system
+      // @ts-ignore - override type for testing
+      vi.spyOn(fs, 'readdirSync').mockImplementation((dirPath) => {
+        if (dirPath === '/test') {
+          return ['file1.txt', 'file2.pdf', 'subdir']
+        } else if (dirPath === '/test/subdir') {
+          return ['file3.md', 'file4.docx']
+        }
+        return []
+      })
+
+      vi.mocked(fs.statSync).mockImplementation((filePath) => {
+        const isDir = String(filePath).endsWith('subdir')
+        return {
+          isDirectory: () => isDir,
+          size: 1024
+        } as fs.Stats
+      })
+
+      const result = getAllFiles('/test')
+
+      expect(result).toHaveLength(4)
+      expect(result[0].id).toBe('mock-uuid')
+      expect(result[0].name).toBe('file1.txt')
+      expect(result[0].type).toBe(FileTypes.TEXT)
+      expect(result[1].name).toBe('file2.pdf')
+      expect(result[1].type).toBe(FileTypes.DOCUMENT)
+    })
+
+    it('should skip hidden files', () => {
+      // @ts-ignore - override type for testing
+      vi.spyOn(fs, 'readdirSync').mockReturnValue(['.hidden', 'visible.txt'])
+      vi.mocked(fs.statSync).mockReturnValue({
+        isDirectory: () => false,
+        size: 1024
+      } as fs.Stats)
+
+      const result = getAllFiles('/test')
+
+      expect(result).toHaveLength(1)
+      expect(result[0].name).toBe('visible.txt')
+    })
+
+    it('should skip unsupported file types', () => {
+      // @ts-ignore - override type for testing
+      vi.spyOn(fs, 'readdirSync').mockReturnValue(['image.jpg', 'video.mp4', 'audio.mp3', 'document.pdf'])
+      vi.mocked(fs.statSync).mockReturnValue({
+        isDirectory: () => false,
+        size: 1024
+      } as fs.Stats)
+
+      const result = getAllFiles('/test')
+
+      // Should only include document.pdf as the others are excluded types
+      expect(result).toHaveLength(1)
+      expect(result[0].name).toBe('document.pdf')
+      expect(result[0].type).toBe(FileTypes.DOCUMENT)
+    })
+
+    it('should return empty array for empty directory', () => {
+      // @ts-ignore - override type for testing
+      vi.spyOn(fs, 'readdirSync').mockReturnValue([])
+
+      const result = getAllFiles('/empty')
+
+      expect(result).toHaveLength(0)
+    })
+
+    it('should handle file system errors', () => {
+      // @ts-ignore - override type for testing
+      vi.spyOn(fs, 'readdirSync').mockImplementation(() => {
+        throw new Error('Directory not found')
+      })
+
+      // Since the function doesn't have error handling, we expect it to propagate
+      expect(() => getAllFiles('/nonexistent')).toThrow('Directory not found')
+    })
+  })
+
+  describe('getTempDir', () => {
+    it('should return correct temp directory path', () => {
+      const tempDir = getTempDir()
+      expect(tempDir).toBe('/mock/temp/CherryStudio')
+    })
+  })
+
+  describe('getFilesDir', () => {
+    it('should return correct files directory path', () => {
+      const filesDir = getFilesDir()
+      expect(filesDir).toBe('/mock/userData/Data/Files')
+    })
+  })
+
+  describe('getConfigDir', () => {
+    it('should return correct config directory path', () => {
+      const configDir = getConfigDir()
+      expect(configDir).toBe('/mock/home/.cherrystudio/config')
+    })
+  })
+
+  describe('getAppConfigDir', () => {
+    it('should return correct app config directory path', () => {
+      const appConfigDir = getAppConfigDir('test-app')
+      expect(appConfigDir).toBe('/mock/home/.cherrystudio/config/test-app')
+    })
+
+    it('should handle empty app name', () => {
+      const appConfigDir = getAppConfigDir('')
+      expect(appConfigDir).toBe('/mock/home/.cherrystudio/config/')
+    })
+  })
+})
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+
+import { compress, decompress } from '../zip'
+
+const jsonStr = JSON.stringify({ foo: 'bar', num: 42, arr: [1, 2, 3] })
+
+// 辅助函数：生成大字符串
+function makeLargeString(size: number) {
+  return 'a'.repeat(size)
+}
+
+describe('zip', () => {
+  describe('compress & decompress', () => {
+    it('should compress and decompress a normal JSON string', async () => {
+      const compressed = await compress(jsonStr)
+      expect(compressed).toBeInstanceOf(Buffer)
+
+      const decompressed = await decompress(compressed)
+      expect(decompressed).toBe(jsonStr)
+    })
+
+    it('should handle empty string', async () => {
+      const compressed = await compress('')
+      expect(compressed).toBeInstanceOf(Buffer)
+      const decompressed = await decompress(compressed)
+      expect(decompressed).toBe('')
+    })
+
+    it('should handle large string', async () => {
+      const largeStr = makeLargeString(100_000)
+      const compressed = await compress(largeStr)
+      expect(compressed).toBeInstanceOf(Buffer)
+      expect(compressed.length).toBeLessThan(largeStr.length)
+      const decompressed = await decompress(compressed)
+      expect(decompressed).toBe(largeStr)
+    })
+
+    it('should throw error when decompressing invalid buffer', async () => {
+      const invalidBuffer = Buffer.from('not a valid gzip', 'utf-8')
+      await expect(decompress(invalidBuffer)).rejects.toThrow()
+    })
+
+    it('should throw error when compress input is not string', async () => {
+      // @ts-expect-error purposely pass wrong type to test error branch
+      await expect(compress(null)).rejects.toThrow()
+      // @ts-expect-error purposely pass wrong type to test error branch
+      await expect(compress(undefined)).rejects.toThrow()
+      // @ts-expect-error purposely pass wrong type to test error branch
+      await expect(compress(123)).rejects.toThrow()
+    })
+
+    it('should throw error when decompress input is not buffer', async () => {
+      // @ts-expect-error purposely pass wrong type to test error branch
+      await expect(decompress(null)).rejects.toThrow()
+      // @ts-expect-error purposely pass wrong type to test error branch
+      await expect(decompress(undefined)).rejects.toThrow()
+      // @ts-expect-error purposely pass wrong type to test error branch
+      await expect(decompress('string')).rejects.toThrow()
+    })
+  })
+})
@@ -82,6 +82,10 @@ export function getConfigDir() {
  return path.join(os.homedir(), '.cherrystudio', 'config')
 }

+export function getCacheDir() {
+  return path.join(app.getPath('userData'), 'Cache')
+}
+
 export function getAppConfigDir(name: string) {
  return path.join(getConfigDir(), name)
 }
@@ -1,4 +1,5 @@
 import fs from 'node:fs'
+import fsAsync from 'node:fs/promises'
 import path from 'node:path'

 import { app } from 'electron'
@@ -52,3 +53,20 @@ export function makeSureDirExists(dir: string) {
    fs.mkdirSync(dir, { recursive: true })
  }
 }
+
+export async function calculateDirectorySize(directoryPath: string): Promise<number> {
+  let totalSize = 0
+  const items = await fsAsync.readdir(directoryPath)
+
+  for (const item of items) {
+    const itemPath = path.join(directoryPath, item)
+    const stats = await fsAsync.stat(itemPath)
+
+    if (stats.isFile()) {
+      totalSize += stats.size
+    } else if (stats.isDirectory()) {
+      totalSize += await calculateDirectorySize(itemPath)
+    }
+  }
+  return totalSize
+}
@@ -0,0 +1,34 @@
+export function buildFunctionCallToolName(serverName: string, toolName: string) {
+  const sanitizedServer = serverName.trim().replace(/-/g, '_')
+  const sanitizedTool = toolName.trim().replace(/-/g, '_')
+
+  // Combine server name and tool name
+  let name = sanitizedTool
+  if (!sanitizedTool.includes(sanitizedServer.slice(0, 7))) {
+    name = `${sanitizedServer.slice(0, 7) || ''}-${sanitizedTool || ''}`
+  }
+
+  // Replace invalid characters with underscores or dashes
+  // Keep a-z, A-Z, 0-9, underscores and dashes
+  name = name.replace(/[^a-zA-Z0-9_-]/g, '_')
+
+  // Ensure name starts with a letter or underscore (for valid JavaScript identifier)
+  if (!/^[a-zA-Z]/.test(name)) {
+    name = `tool-${name}`
+  }
+
+  // Remove consecutive underscores/dashes (optional improvement)
+  name = name.replace(/[_-]{2,}/g, '_')
+
+  // Truncate to 63 characters maximum
+  if (name.length > 63) {
+    name = name.slice(0, 63)
+  }
+
+  // Handle edge case: ensure we still have a valid name if truncation left invalid chars at edges
+  if (name.endsWith('_') || name.endsWith('-')) {
+    name = name.slice(0, -1)
+  }
+
+  return name
+}
@@ -1,5 +1,7 @@
 import { BrowserWindow } from 'electron'

+import { isDev, isWin } from '../constant'
+
 function isTilingWindowManager() {
  if (process.platform === 'darwin') {
    return false
@@ -15,31 +17,59 @@ function isTilingWindowManager() {
  return tilingSystems.some((system) => desktopEnv?.includes(system))
 }

+//see: https://github.com/electron/electron/issues/42055#issuecomment-2449365647
 export const replaceDevtoolsFont = (browserWindow: BrowserWindow) => {
-  if (process.platform === 'win32') {
+  //only for windows and dev, don't do this in production to avoid performance issues
+  if (isWin && isDev) {
    browserWindow.webContents.on('devtools-opened', () => {
      const css = `
        :root {
            --sys-color-base: var(--ref-palette-neutral100);
-            --source-code-font-family: consolas;
+            --source-code-font-family: consolas !important;
            --source-code-font-size: 12px;
-            --monospace-font-family: consolas;
+            --monospace-font-family: consolas !important;
            --monospace-font-size: 12px;
            --default-font-family: system-ui, sans-serif;
            --default-font-size: 12px;
+            --ref-palette-neutral99: #ffffffff;
        }
-        .-theme-with-dark-background {
+        .theme-with-dark-background {
            --sys-color-base: var(--ref-palette-secondary25);
        }
        body {
-            --default-font-family: system-ui,sans-serif;
-        }`
-
+            --default-font-family: system-ui, sans-serif;
+        }
+    `
      browserWindow.webContents.devToolsWebContents?.executeJavaScript(`
        const overriddenStyle = document.createElement('style');
        overriddenStyle.innerHTML = '${css.replaceAll('\n', ' ')}';
        document.body.append(overriddenStyle);
-        document.body.classList.remove('platform-windows');`)
+        document.querySelectorAll('.platform-windows').forEach(el => el.classList.remove('platform-windows'));
+        addStyleToAutoComplete();
+        const observer = new MutationObserver((mutationList, observer) => {
+            for (const mutation of mutationList) {
+                if (mutation.type === 'childList') {
+                    for (let i = 0; i < mutation.addedNodes.length; i++) {
+                        const item = mutation.addedNodes[i];
+                        if (item.classList.contains('editor-tooltip-host')) {
+                            addStyleToAutoComplete();
+                        }
+                    }
+                }
+            }
+        });
+        observer.observe(document.body, {childList: true});
+        function addStyleToAutoComplete() {
+            document.querySelectorAll('.editor-tooltip-host').forEach(element => {
+                if (element.shadowRoot.querySelectorAll('[data-key="overridden-dev-tools-font"]').length === 0) {
+                    const overriddenStyle = document.createElement('style');
+                    overriddenStyle.setAttribute('data-key', 'overridden-dev-tools-font');
+                    overriddenStyle.innerHTML = '.cm-tooltip-autocomplete ul[role=listbox] {font-family: consolas !important;}';
+                    element.shadowRoot.append(overriddenStyle);
+                }
+            });
+        }
+    `)
    })
  }
 }
@@ -9,10 +9,10 @@ const gunzipPromise = util.promisify(zlib.gunzip)

 /**
 * 压缩字符串
+ * @param {string} str 要压缩的 JSON 字符串
 * @returns {Promise<Buffer>} 压缩后的 Buffer
- * @param str
 */
-export async function compress(str) {
+export async function compress(str: string): Promise<Buffer> {
  try {
    const buffer = Buffer.from(str, 'utf-8')
    return await gzipPromise(buffer)
@@ -27,7 +27,7 @@ export async function compress(str) {
 * @param {Buffer} compressedBuffer - 压缩的 Buffer
 * @returns {Promise<string>} 解压缩后的 JSON 字符串
 */
-export async function decompress(compressedBuffer) {
+export async function decompress(compressedBuffer: Buffer): Promise<string> {
  try {
    const buffer = await gunzipPromise(compressedBuffer)
    return buffer.toString('utf-8')
@@ -2,9 +2,12 @@ import type { ExtractChunkData } from '@cherrystudio/embedjs-interfaces'
 import { electronAPI } from '@electron-toolkit/preload'
 import { IpcChannel } from '@shared/IpcChannel'
 import { FileType, KnowledgeBaseParams, KnowledgeItem, MCPServer, Shortcut, WebDavConfig } from '@types'
-import { contextBridge, ipcRenderer, OpenDialogOptions, shell } from 'electron'
+import { contextBridge, ipcRenderer, OpenDialogOptions, shell, webUtils } from 'electron'
+import { Notification } from 'src/renderer/src/types/notification'
 import { CreateDirectoryOptions } from 'webdav'

+import type { ActionItem } from '../renderer/src/types/selectionTypes'
+
 // Custom APIs for renderer
 const api = {
  getAppInfo: () => ipcRenderer.invoke(IpcChannel.App_Info),
@@ -23,18 +26,25 @@ const api = {
    ipcRenderer.invoke(IpcChannel.App_HandleZoomFactor, delta, reset),
  setAutoUpdate: (isActive: boolean) => ipcRenderer.invoke(IpcChannel.App_SetAutoUpdate, isActive),
  openWebsite: (url: string) => ipcRenderer.invoke(IpcChannel.Open_Website, url),
+  getCacheSize: () => ipcRenderer.invoke(IpcChannel.App_GetCacheSize),
  clearCache: () => ipcRenderer.invoke(IpcChannel.App_ClearCache),
+  notification: {
+    send: (notification: Notification) => ipcRenderer.invoke(IpcChannel.Notification_Send, notification)
+  },
  system: {
    getDeviceType: () => ipcRenderer.invoke(IpcChannel.System_GetDeviceType),
    getHostname: () => ipcRenderer.invoke(IpcChannel.System_GetHostname)
  },
+  devTools: {
+    toggle: () => ipcRenderer.invoke(IpcChannel.System_ToggleDevTools)
+  },
  zip: {
    compress: (text: string) => ipcRenderer.invoke(IpcChannel.Zip_Compress, text),
    decompress: (text: Buffer) => ipcRenderer.invoke(IpcChannel.Zip_Decompress, text)
  },
  backup: {
-    backup: (fileName: string, data: string, destinationPath?: string) =>
-      ipcRenderer.invoke(IpcChannel.Backup_Backup, fileName, data, destinationPath),
+    backup: (fileName: string, data: string, destinationPath?: string, skipBackupFile?: boolean) =>
+      ipcRenderer.invoke(IpcChannel.Backup_Backup, fileName, data, destinationPath, skipBackupFile),
    restore: (backupPath: string) => ipcRenderer.invoke(IpcChannel.Backup_Restore, backupPath),
    backupToWebdav: (data: string, webdavConfig: WebDavConfig) =>
      ipcRenderer.invoke(IpcChannel.Backup_BackupToWebdav, data, webdavConfig),
@@ -68,9 +78,12 @@ const api = {
    saveImage: (name: string, data: string) => ipcRenderer.invoke(IpcChannel.File_SaveImage, name, data),
    binaryImage: (fileId: string) => ipcRenderer.invoke(IpcChannel.File_BinaryImage, fileId),
    base64Image: (fileId: string) => ipcRenderer.invoke(IpcChannel.File_Base64Image, fileId),
+    download: (url: string, isUseContentType?: boolean) =>
+      ipcRenderer.invoke(IpcChannel.File_Download, url, isUseContentType),
+    copy: (fileId: string, destPath: string) => ipcRenderer.invoke(IpcChannel.File_Copy, fileId, destPath),
+    binaryImage: (fileId: string) => ipcRenderer.invoke(IpcChannel.File_BinaryImage, fileId),
    base64File: (fileId: string) => ipcRenderer.invoke(IpcChannel.File_Base64File, fileId),
-    download: (url: string) => ipcRenderer.invoke(IpcChannel.File_Download, url),
-    copy: (fileId: string, destPath: string) => ipcRenderer.invoke(IpcChannel.File_Copy, fileId, destPath)
+    getPathForFile: (file: File) => webUtils.getPathForFile(file)
  },
  fs: {
    read: (path: string) => ipcRenderer.invoke(IpcChannel.Fs_Read, path)
@@ -149,7 +162,8 @@ const api = {
    listResources: (server: MCPServer) => ipcRenderer.invoke(IpcChannel.Mcp_ListResources, server),
    getResource: ({ server, uri }: { server: MCPServer; uri: string }) =>
      ipcRenderer.invoke(IpcChannel.Mcp_GetResource, { server, uri }),
-    getInstallInfo: () => ipcRenderer.invoke(IpcChannel.Mcp_GetInstallInfo)
+    getInstallInfo: () => ipcRenderer.invoke(IpcChannel.Mcp_GetInstallInfo),
+    checkMcpConnectivity: (server: any) => ipcRenderer.invoke(IpcChannel.Mcp_CheckConnectivity, server)
  },
  shell: {
    openExternal: (url: string, options?: Electron.OpenExternalOptions) => shell.openExternal(url, options)
@@ -199,6 +213,20 @@ const api = {
    subscribe: () => ipcRenderer.invoke(IpcChannel.StoreSync_Subscribe),
    unsubscribe: () => ipcRenderer.invoke(IpcChannel.StoreSync_Unsubscribe),
    onUpdate: (action: any) => ipcRenderer.invoke(IpcChannel.StoreSync_OnUpdate, action)
+  },
+  selection: {
+    hideToolbar: () => ipcRenderer.invoke(IpcChannel.Selection_ToolbarHide),
+    writeToClipboard: (text: string) => ipcRenderer.invoke(IpcChannel.Selection_WriteToClipboard, text),
+    determineToolbarSize: (width: number, height: number) =>
+      ipcRenderer.invoke(IpcChannel.Selection_ToolbarDetermineSize, width, height),
+    setEnabled: (enabled: boolean) => ipcRenderer.invoke(IpcChannel.Selection_SetEnabled, enabled),
+    setTriggerMode: (triggerMode: string) => ipcRenderer.invoke(IpcChannel.Selection_SetTriggerMode, triggerMode),
+    setFollowToolbar: (isFollowToolbar: boolean) =>
+      ipcRenderer.invoke(IpcChannel.Selection_SetFollowToolbar, isFollowToolbar),
+    processAction: (actionItem: ActionItem) => ipcRenderer.invoke(IpcChannel.Selection_ProcessAction, actionItem),
+    closeActionWindow: () => ipcRenderer.invoke(IpcChannel.Selection_ActionWindowClose),
+    minimizeActionWindow: () => ipcRenderer.invoke(IpcChannel.Selection_ActionWindowMinimize),
+    pinActionWindow: (isPinned: boolean) => ipcRenderer.invoke(IpcChannel.Selection_ActionWindowPin, isPinned)
  }
 }

@@ -1,20 +0,0 @@
-import { vi } from 'vitest'
-
-vi.mock('electron-log/renderer', () => {
-  return {
-    default: {
-      info: console.log,
-      error: console.error,
-      warn: console.warn,
-      debug: console.debug,
-      verbose: console.log,
-      silly: console.log,
-      log: console.log,
-      transports: {
-        console: {
-          level: 'info'
-        }
-      }
-    }
-  }
-})
@@ -5,7 +5,7 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="initial-scale=1, width=device-width" />
  <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; frame-src * file:" />
+    content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' 'unsafe-inline' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; frame-src * file:" />
  <title>Cherry Studio</title>

  <style>
@@ -21,7 +21,7 @@
      flex-direction: row;
      justify-content: center;
      align-items: center;
-      display: none;
+      display: flex;
    }

    #spinner img {
@@ -36,6 +36,9 @@
  <div id="spinner">
    <img src="/src/assets/images/logo.png" />
  </div>
+  <script>
+    console.time('init')
+  </script>
  <script type="module" src="/src/init.ts"></script>
  <script type="module" src="/src/entryPoint.tsx"></script>
 </body>
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <meta http-equiv="Content-Security-Policy"
+        content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; frame-src * file:" />
+    <title>Cherry Studio Selection Assistant</title>
+
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/windows/selection/action/entryPoint.tsx"></script>
+    <style>
+        html {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            width: 100vw;
+            height: 100vh;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        #root {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+        }
+    </style>
+</body>
+
+</html>
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <meta http-equiv="Content-Security-Policy"
+        content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; frame-src * file:" />
+    <title>Cherry Studio Selection Toolbar</title>
+
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/windows/selection/toolbar/entryPoint.tsx"></script>
+    <style>
+        html {
+            margin: 0;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            width: 100vw;
+            height: 100vh;
+
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        #root {
+            margin: 0;
+            padding: 0;
+            width: max-content !important;
+            height: fit-content !important;
+        }
+    </style>
+</body>
+
+</html>
@@ -8,8 +8,9 @@ import { PersistGate } from 'redux-persist/integration/react'
 import Sidebar from './components/app/Sidebar'
 import TopViewContainer from './components/TopView'
 import AntdProvider from './context/AntdProvider'
+import { CodeStyleProvider } from './context/CodeStyleProvider'
+import { NotificationProvider } from './context/NotificationProvider'
 import StyleSheetManager from './context/StyleSheetManager'
-import { SyntaxHighlighterProvider } from './context/SyntaxHighlighterProvider'
 import { ThemeProvider } from './context/ThemeProvider'
 import NavigationHandler from './handler/NavigationHandler'
 import AgentsPage from './pages/agents/AgentsPage'
@@ -27,26 +28,28 @@ function App(): React.ReactElement {
      <StyleSheetManager>
        <ThemeProvider>
          <AntdProvider>
-            <SyntaxHighlighterProvider>
-              <PersistGate loading={null} persistor={persistor}>
-                <TopViewContainer>
-                  <HashRouter>
-                    <NavigationHandler />
-                    <Sidebar />
-                    <Routes>
-                      <Route path="/" element={<HomePage />} />
-                      <Route path="/agents" element={<AgentsPage />} />
-                      <Route path="/paintings/*" element={<PaintingsRoutePage />} />
-                      <Route path="/translate" element={<TranslatePage />} />
-                      <Route path="/files" element={<FilesPage />} />
-                      <Route path="/knowledge" element={<KnowledgePage />} />
-                      <Route path="/apps" element={<AppsPage />} />
-                      <Route path="/settings/*" element={<SettingsPage />} />
-                    </Routes>
-                  </HashRouter>
-                </TopViewContainer>
-              </PersistGate>
-            </SyntaxHighlighterProvider>
+            <NotificationProvider>
+              <CodeStyleProvider>
+                <PersistGate loading={null} persistor={persistor}>
+                  <TopViewContainer>
+                    <HashRouter>
+                      <NavigationHandler />
+                      <Sidebar />
+                      <Routes>
+                        <Route path="/" element={<HomePage />} />
+                        <Route path="/agents" element={<AgentsPage />} />
+                        <Route path="/paintings/*" element={<PaintingsRoutePage />} />
+                        <Route path="/translate" element={<TranslatePage />} />
+                        <Route path="/files" element={<FilesPage />} />
+                        <Route path="/knowledge" element={<KnowledgePage />} />
+                        <Route path="/apps" element={<AppsPage />} />
+                        <Route path="/settings/*" element={<SettingsPage />} />
+                      </Routes>
+                    </HashRouter>
+                  </TopViewContainer>
+                </PersistGate>
+              </CodeStyleProvider>
+            </NotificationProvider>
          </AntdProvider>
        </ThemeProvider>
      </StyleSheetManager>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
@@ -17,7 +17,7 @@
 }

 .ant-tabs-tab-btn {
-  outline: none;
+  outline: none !important;
 }

 .ant-segmented-group {
@@ -0,0 +1,131 @@
+:root {
+  --color-white: #ffffff;
+  --color-white-soft: rgba(255, 255, 255, 0.8);
+  --color-white-mute: rgba(255, 255, 255, 0.94);
+
+  --color-black: #181818;
+  --color-black-soft: #222222;
+  --color-black-mute: #333333;
+
+  --color-gray-1: #515c67;
+  --color-gray-2: #414853;
+  --color-gray-3: #32363f;
+
+  --color-text-1: rgba(255, 255, 245, 0.9);
+  --color-text-2: rgba(235, 235, 245, 0.6);
+  --color-text-3: rgba(235, 235, 245, 0.38);
+
+  --color-background: var(--color-black);
+  --color-background-soft: var(--color-black-soft);
+  --color-background-mute: var(--color-black-mute);
+  --color-background-opacity: rgba(34, 34, 34, 0.7);
+  --inner-glow-opacity: 0.3; // For the glassmorphism effect in the dropdown menu
+
+  --color-primary: #00b96b;
+  --color-primary-soft: #00b96b99;
+  --color-primary-mute: #00b96b33;
+
+  --color-text: var(--color-text-1);
+  --color-icon: #ffffff99;
+  --color-icon-white: #ffffff;
+  --color-border: #ffffff19;
+  --color-border-soft: #ffffff10;
+  --color-border-mute: #ffffff05;
+  --color-error: #f44336;
+  --color-link: #338cff;
+  --color-code-background: #323232;
+  --color-hover: rgba(40, 40, 40, 1);
+  --color-active: rgba(55, 55, 55, 1);
+  --color-frame-border: #333;
+  --color-group-background: var(--color-background-soft);
+
+  --color-reference: #404040;
+  --color-reference-text: #ffffff;
+  --color-reference-background: #0b0e12;
+
+  --modal-background: #1f1f1f;
+
+  --color-highlight: rgba(0, 0, 0, 1);
+  --color-background-highlight: rgba(255, 255, 0, 0.9);
+  --color-background-highlight-accent: rgba(255, 150, 50, 0.9);
+
+  --navbar-background-mac: rgba(20, 20, 20, 0.55);
+  --navbar-background: #1f1f1f;
+
+  --navbar-height: 40px;
+  --sidebar-width: 50px;
+  --status-bar-height: 40px;
+  --input-bar-height: 100px;
+
+  --assistants-width: 275px;
+  --topic-list-width: 275px;
+  --settings-width: 250px;
+  --scrollbar-width: 5px;
+
+  --chat-background: #111111;
+  --chat-background-user: #28b561;
+  --chat-background-assistant: #2c2c2c;
+  --chat-text-user: var(--color-black);
+
+  --list-item-border-radius: 16px;
+}
+
+[theme-mode='light'] {
+  --color-white: #ffffff;
+  --color-white-soft: rgba(0, 0, 0, 0.04);
+  --color-white-mute: #eee;
+
+  --color-black: #1b1b1f;
+  --color-black-soft: #262626;
+  --color-black-mute: #363636;
+
+  --color-gray-1: #8e8e93;
+  --color-gray-2: #aeaeb2;
+  --color-gray-3: #c7c7cc;
+
+  --color-text-1: rgba(0, 0, 0, 1);
+  --color-text-2: rgba(0, 0, 0, 0.6);
+  --color-text-3: rgba(0, 0, 0, 0.38);
+
+  --color-background: var(--color-white);
+  --color-background-soft: var(--color-white-soft);
+  --color-background-mute: var(--color-white-mute);
+  --color-background-opacity: rgba(235, 235, 235, 0.7);
+  --inner-glow-opacity: 0.1;
+
+  --color-primary: #00b96b;
+  --color-primary-soft: #00b96b99;
+  --color-primary-mute: #00b96b33;
+
+  --color-text: var(--color-text-1);
+  --color-icon: #00000099;
+  --color-icon-white: #000000;
+  --color-border: #00000019;
+  --color-border-soft: #00000010;
+  --color-border-mute: #00000005;
+  --color-error: #f44336;
+  --color-link: #1677ff;
+  --color-code-background: #e3e3e3;
+  --color-hover: var(--color-white-mute);
+  --color-active: var(--color-white-soft);
+  --color-frame-border: #ddd;
+  --color-group-background: var(--color-white);
+
+  --color-reference: #cfe1ff;
+  --color-reference-text: #000000;
+  --color-reference-background: #f1f7ff;
+
+  --modal-background: var(--color-white);
+
+  --color-highlight: initial;
+  --color-background-highlight: rgba(255, 255, 0, 0.5);
+  --color-background-highlight-accent: rgba(255, 150, 50, 0.5);
+
+  --navbar-background-mac: rgba(255, 255, 255, 0.55);
+  --navbar-background: rgba(244, 244, 244);
+
+  --chat-background: #f3f3f3;
+  --chat-background-user: #95ec69;
+  --chat-background-assistant: #ffffff;
+  --chat-text-user: var(--color-text);
+}
@@ -4,3 +4,9 @@
  border-top-left-radius: 10px;
  border-left: 0.5px solid var(--color-border);
 }
+
+.group-container {
+  .context-menu-container {
+    width: 100%;
+  }
+}
@@ -0,0 +1,13 @@
+:root {
+  --font-family:
+    Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Cantarell, 'Open Sans',
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+
+  --font-family-serif:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Ubuntu, Roboto, Oxygen, Cantarell, 'Open Sans',
+    'Helvetica Neue', serif, Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+
+  --code-font-family: 'Cascadia Code', 'Fira Code', 'Consolas', Menlo, Courier, monospace;
+}
@@ -1,3 +1,5 @@
+@use './color.scss';
+@use './font.scss';
@use './markdown.scss';
@use './ant.scss';
@use './scrollbar.scss';
@@ -6,136 +8,6 @@
@import '../fonts/icon-fonts/iconfont.css';
@import '../fonts/ubuntu/ubuntu.css';

-:root {
-  --color-white: #ffffff;
-  --color-white-soft: rgba(255, 255, 255, 0.8);
-  --color-white-mute: rgba(255, 255, 255, 0.94);
-
-  --color-black: #181818;
-  --color-black-soft: #222222;
-  --color-black-mute: #333333;
-
-  --color-gray-1: #515c67;
-  --color-gray-2: #414853;
-  --color-gray-3: #32363f;
-
-  --color-text-1: rgba(255, 255, 245, 0.9);
-  --color-text-2: rgba(235, 235, 245, 0.6);
-  --color-text-3: rgba(235, 235, 245, 0.38);
-
-  --color-background: var(--color-black);
-  --color-background-soft: var(--color-black-soft);
-  --color-background-mute: var(--color-black-mute);
-  --color-background-opacity: rgba(34, 34, 34, 0.7);
-  --inner-glow-opacity: 0.3; // For the glassmorphism effect in the dropdown menu
-
-  --color-primary: #00b96b;
-  --color-primary-soft: #00b96b99;
-  --color-primary-mute: #00b96b33;
-
-  --color-text: var(--color-text-1);
-  --color-icon: #ffffff99;
-  --color-icon-white: #ffffff;
-  --color-border: #ffffff19;
-  --color-border-soft: #ffffff10;
-  --color-border-mute: #ffffff05;
-  --color-error: #f44336;
-  --color-link: #338cff;
-  --color-code-background: #323232;
-  --color-hover: rgba(40, 40, 40, 1);
-  --color-active: rgba(55, 55, 55, 1);
-  --color-frame-border: #333;
-  --color-group-background: var(--color-background-soft);
-
-  --color-reference: #404040;
-  --color-reference-text: #ffffff;
-  --color-reference-background: #0b0e12;
-
-  --modal-background: #1f1f1f;
-
-  --navbar-background-mac: rgba(20, 20, 20, 0.55);
-  --navbar-background: rgba(20, 20, 20, 0.4);
-
-  --navbar-height: 40px;
-  --sidebar-width: 50px;
-  --status-bar-height: 40px;
-  --input-bar-height: 100px;
-
-  --assistants-width: 275px;
-  --topic-list-width: 275px;
-  --settings-width: 250px;
-
-  --chat-background: #111111;
-  --chat-background-user: #28b561;
-  --chat-background-assistant: #2c2c2c;
-  --chat-text-user: var(--color-black);
-
-  --list-item-border-radius: 16px;
-}
-
-body {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-body[theme-mode='light'] {
-  --color-white: #ffffff;
-  --color-white-soft: rgba(0, 0, 0, 0.04);
-  --color-white-mute: #eee;
-
-  --color-black: #1b1b1f;
-  --color-black-soft: #262626;
-  --color-black-mute: #363636;
-
-  --color-gray-1: #8e8e93;
-  --color-gray-2: #aeaeb2;
-  --color-gray-3: #c7c7cc;
-
-  --color-text-1: rgba(0, 0, 0, 1);
-  --color-text-2: rgba(0, 0, 0, 0.6);
-  --color-text-3: rgba(0, 0, 0, 0.38);
-
-  --color-background: var(--color-white);
-  --color-background-soft: var(--color-white-soft);
-  --color-background-mute: var(--color-white-mute);
-  --color-background-opacity: rgba(235, 235, 235, 0.7);
-  --inner-glow-opacity: 0.1;
-
-  --color-primary: #00b96b;
-  --color-primary-soft: #00b96b99;
-  --color-primary-mute: #00b96b33;
-
-  --color-text: var(--color-text-1);
-  --color-icon: #00000099;
-  --color-icon-white: #000000;
-  --color-border: #00000019;
-  --color-border-soft: #00000010;
-  --color-border-mute: #00000005;
-  --color-error: #f44336;
-  --color-link: #1677ff;
-  --color-code-background: #e3e3e3;
-  --color-hover: var(--color-white-mute);
-  --color-active: var(--color-white-soft);
-  --color-frame-border: #ddd;
-  --color-group-background: var(--color-white);
-
-  --color-reference: #cfe1ff;
-  --color-reference-text: #000000;
-  --color-reference-background: #f1f7ff;
-
-  --modal-background: var(--color-white);
-
-  --navbar-background-mac: rgba(255, 255, 255, 0.55);
-  --navbar-background: rgba(255, 255, 255, 0.4);
-
-  --chat-background: #f3f3f3;
-  --chat-background-user: #95ec69;
-  --chat-background-assistant: #ffffff;
-  --chat-text-user: var(--color-text);
-}
-
 *,
 *::before,
 *::after {
@@ -152,8 +24,18 @@ body[theme-mode='light'] {
  -webkit-tap-highlight-color: transparent;
 }

-ul {
-  list-style: none;
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+#root {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
 }

 body {
@@ -163,13 +45,17 @@ body {
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--font-family);
  text-rendering: optimizeLegibility;
+  transition: background-color 0.3s linear;
+
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  transition: background-color 0.3s linear;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }

 input,
@@ -190,20 +76,8 @@ a {
  -webkit-user-drag: none;
 }

-html,
-body,
-#root {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-}
-
-#root {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  flex: 1;
+ul {
+  list-style: none;
 }

 .loader {
@@ -230,6 +104,7 @@ body,
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
+  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
@@ -290,3 +165,11 @@ body,
 .lucide {
  color: var(--color-icon);
 }
+
+span.highlight {
+  background-color: var(--color-background-highlight);
+  color: var(--color-highlight);
+}
+span.highlight.selected {
+  background-color: var(--color-background-highlight-accent);
+}
@@ -20,10 +20,8 @@
  h5,
  h6 {
    margin: 1em 0 1em 0;
-    font-weight: 800;
-    font-family:
-      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-      sans-serif;
+    font-weight: bold;
+    font-family: var(--font-family);
  }

  h1 {
@@ -117,7 +115,7 @@
  }

  code {
-    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+    font-family: var(--code-font-family);
  }

  pre {
@@ -125,7 +123,9 @@
    overflow-x: auto;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    background-color: var(--color-background-mute);
-    &:has(> .mermaid) {
+    &:has(.mermaid),
+    &:has(.plantuml-preview),
+    &:has(.svg-preview) {
      background-color: transparent;
    }
    &:not(pre pre) {
@@ -153,7 +153,7 @@
    padding-left: 1em;
    color: var(--color-text-light);
    border-left: 4px solid var(--color-border);
-    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-family: var(--font-family);
  }

  table {
@@ -171,9 +171,7 @@
  th {
    background-color: var(--color-background-mute);
    font-weight: bold;
-    font-family:
-      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-      sans-serif;
+    font-family: var(--font-family);
  }

  img {
@@ -304,3 +302,26 @@ emoji-picker {
 mjx-container {
  overflow-x: auto;
 }
+
+/* CodeMirror 相关样式 */
+.cm-editor {
+  .cm-scroller {
+    font-family: var(--code-font-family);
+    padding: 1px;
+    border-radius: 5px;
+
+    .cm-gutters {
+      line-height: 1.6;
+    }
+
+    .cm-content {
+      line-height: 1.6;
+      padding-left: 0.25em;
+    }
+
+    .cm-lineWrapping * {
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+  }
+}
@@ -18,7 +18,8 @@ body[theme-mode='light'] {
  height: 6px;
 }

-::-webkit-scrollbar-track {
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
  background: transparent;
 }

@@ -30,7 +31,7 @@ body[theme-mode='light'] {
  }
 }

-pre::-webkit-scrollbar-thumb {
+pre:not(.shiki)::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.08);
  &:hover {
@@ -0,0 +1,26 @@
+@use './font.scss';
+
+html {
+  font-family: var(--font-family);
+}
+
+:root {
+  --color-selection-toolbar-background: rgba(20, 20, 20, 0.95);
+  --color-selection-toolbar-border: rgba(55, 55, 55, 0.5);
+  --color-selection-toolbar-shadow: rgba(50, 50, 50, 0.3);
+
+  --color-selection-toolbar-text: rgba(255, 255, 245, 0.9);
+  --color-selection-toolbar-hover-bg: #222222;
+
+  --color-primary: #00b96b;
+  --color-error: #f44336;
+}
+
+[theme-mode='light'] {
+  --color-selection-toolbar-background: rgba(245, 245, 245, 0.95);
+  --color-selection-toolbar-border: rgba(200, 200, 200, 0.5);
+  --color-selection-toolbar-shadow: rgba(50, 50, 50, 0.3);
+
+  --color-selection-toolbar-text: rgba(0, 0, 0, 1);
+  --color-selection-toolbar-hover-bg: rgba(0, 0, 0, 0.04);
+}
@@ -0,0 +1,32 @@
+import { Alert } from 'antd'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const LOCALSTORAGE_KEY = 'openai_alert_closed'
+
+const OpenAIAlert = () => {
+  const { t } = useTranslation()
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const closed = localStorage.getItem(LOCALSTORAGE_KEY)
+    setVisible(!closed)
+  }, [])
+
+  if (!visible) return null
+
+  return (
+    <Alert
+      style={{ width: '100%', marginTop: 5, marginBottom: 5 }}
+      message={t('settings.provider.openai.alert')}
+      closable
+      afterClose={() => {
+        localStorage.setItem(LOCALSTORAGE_KEY, '1')
+        setVisible(false)
+      }}
+      type="warning"
+    />
+  )
+}
+
+export default OpenAIAlert
@@ -0,0 +1,52 @@
+import React, { memo } from 'react'
+import styled from 'styled-components'
+
+interface EmojiAvatarProps {
+  children: string
+  size?: number
+  fontSize?: number
+  onClick?: React.MouseEventHandler<HTMLDivElement>
+  className?: string
+  style?: React.CSSProperties
+}
+
+const EmojiAvatar = ({
+  ref,
+  children,
+  size = 31,
+  fontSize,
+  onClick,
+  className,
+  style
+}: EmojiAvatarProps & { ref?: React.RefObject<HTMLDivElement | null> }) => (
+  <StyledEmojiAvatar
+    ref={ref}
+    $size={size}
+    $fontSize={fontSize ?? size * 0.5}
+    onClick={onClick}
+    className={className}
+    style={style}>
+    {children}
+  </StyledEmojiAvatar>
+)
+
+EmojiAvatar.displayName = 'EmojiAvatar'
+
+const StyledEmojiAvatar = styled.div<{ $size: number; $fontSize: number }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-background-soft);
+  border: 0.5px solid var(--color-border);
+  border-radius: 20%;
+  cursor: pointer;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  font-size: ${(props) => props.$fontSize}px;
+  transition: opacity 0.3s ease;
+  &:hover {
+    opacity: 0.8;
+  }
+`
+
+export default memo(EmojiAvatar)
@@ -0,0 +1,305 @@
+import { CodeTool, TOOL_SPECS, useCodeTool } from '@renderer/components/CodeToolbar'
+import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { uuid } from '@renderer/utils'
+import { getReactStyleFromToken } from '@renderer/utils/shiki'
+import { ChevronsDownUp, ChevronsUpDown, Text as UnWrapIcon, WrapText as WrapIcon } from 'lucide-react'
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ThemedToken } from 'shiki/core'
+import styled from 'styled-components'
+
+interface CodePreviewProps {
+  children: string
+  language: string
+  setTools?: (value: React.SetStateAction<CodeTool[]>) => void
+}
+
+/**
+ * Shiki 流式代码高亮组件
+ *
+ * - 通过 shiki tokenizer 处理流式响应
+ * - 为了正确执行语法高亮，必须保证流式响应都依次到达 tokenizer，不能跳过
+ */
+const CodePreview = ({ children, language, setTools }: CodePreviewProps) => {
+  const { codeShowLineNumbers, fontSize, codeCollapsible, codeWrappable } = useSettings()
+  const { activeShikiTheme, highlightCodeChunk, cleanupTokenizers } = useCodeStyle()
+  const [isExpanded, setIsExpanded] = useState(!codeCollapsible)
+  const [isUnwrapped, setIsUnwrapped] = useState(!codeWrappable)
+  const [tokenLines, setTokenLines] = useState<ThemedToken[][]>([])
+  const codeContentRef = useRef<HTMLDivElement>(null)
+  const prevCodeLengthRef = useRef(0)
+  const safeCodeStringRef = useRef(children)
+  const highlightQueueRef = useRef<Promise<void>>(Promise.resolve())
+  const callerId = useRef(`${Date.now()}-${uuid()}`).current
+  const shikiThemeRef = useRef(activeShikiTheme)
+
+  const { t } = useTranslation()
+
+  const { registerTool, removeTool } = useCodeTool(setTools)
+
+  // 展开/折叠工具
+  useEffect(() => {
+    registerTool({
+      ...TOOL_SPECS.expand,
+      icon: isExpanded ? <ChevronsDownUp className="icon" /> : <ChevronsUpDown className="icon" />,
+      tooltip: isExpanded ? t('code_block.collapse') : t('code_block.expand'),
+      visible: () => {
+        const scrollHeight = codeContentRef.current?.scrollHeight
+        return codeCollapsible && (scrollHeight ?? 0) > 350
+      },
+      onClick: () => setIsExpanded((prev) => !prev)
+    })
+
+    return () => removeTool(TOOL_SPECS.expand.id)
+  }, [codeCollapsible, isExpanded, registerTool, removeTool, t])
+
+  // 自动换行工具
+  useEffect(() => {
+    registerTool({
+      ...TOOL_SPECS.wrap,
+      icon: isUnwrapped ? <WrapIcon className="icon" /> : <UnWrapIcon className="icon" />,
+      tooltip: isUnwrapped ? t('code_block.wrap.on') : t('code_block.wrap.off'),
+      visible: () => codeWrappable,
+      onClick: () => setIsUnwrapped((prev) => !prev)
+    })
+
+    return () => removeTool(TOOL_SPECS.wrap.id)
+  }, [codeWrappable, isUnwrapped, registerTool, removeTool, t])
+
+  // 更新展开状态
+  useEffect(() => {
+    setIsExpanded(!codeCollapsible)
+  }, [codeCollapsible])
+
+  // 更新换行状态
+  useEffect(() => {
+    setIsUnwrapped(!codeWrappable)
+  }, [codeWrappable])
+
+  // 处理尾部空白字符
+  const safeCodeString = useMemo(() => {
+    return typeof children === 'string' ? children.trimEnd() : ''
+  }, [children])
+
+  const highlightCode = useCallback(async () => {
+    if (!safeCodeString) return
+
+    if (prevCodeLengthRef.current === safeCodeString.length) return
+
+    // 捕获当前状态
+    const startPos = prevCodeLengthRef.current
+    const endPos = safeCodeString.length
+
+    // 添加到处理队列，确保按顺序处理
+    highlightQueueRef.current = highlightQueueRef.current.then(async () => {
+      // FIXME: 长度有问题，或者破坏了流式内容，需要清理 tokenizer 并使用完整代码重新高亮
+      if (prevCodeLengthRef.current > safeCodeString.length || !safeCodeString.startsWith(safeCodeStringRef.current)) {
+        cleanupTokenizers(callerId)
+        prevCodeLengthRef.current = 0
+        safeCodeStringRef.current = ''
+
+        const result = await highlightCodeChunk(safeCodeString, language, callerId)
+        setTokenLines(result.lines)
+
+        prevCodeLengthRef.current = safeCodeString.length
+        safeCodeStringRef.current = safeCodeString
+
+        return
+      }
+
+      // 跳过 race condition，延迟到后续任务
+      if (prevCodeLengthRef.current !== startPos) {
+        return
+      }
+
+      const incrementalCode = safeCodeString.slice(startPos, endPos)
+      const result = await highlightCodeChunk(incrementalCode, language, callerId)
+      setTokenLines((lines) => [...lines.slice(0, Math.max(0, lines.length - result.recall)), ...result.lines])
+      prevCodeLengthRef.current = endPos
+      safeCodeStringRef.current = safeCodeString
+    })
+  }, [callerId, cleanupTokenizers, highlightCodeChunk, language, safeCodeString])
+
+  // 主题变化时强制重新高亮
+  useEffect(() => {
+    if (shikiThemeRef.current !== activeShikiTheme) {
+      prevCodeLengthRef.current++
+      shikiThemeRef.current = activeShikiTheme
+    }
+  }, [activeShikiTheme])
+
+  // 组件卸载时清理资源
+  useEffect(() => {
+    return () => cleanupTokenizers(callerId)
+  }, [callerId, cleanupTokenizers])
+
+  // 处理第二次开始的代码高亮
+  useEffect(() => {
+    if (prevCodeLengthRef.current > 0) {
+      setTimeout(highlightCode, 0)
+    }
+  }, [highlightCode])
+
+  // 视口检测逻辑，只处理第一次代码高亮
+  useEffect(() => {
+    const codeElement = codeContentRef.current
+    if (!codeElement || prevCodeLengthRef.current > 0) return
+
+    let isMounted = true
+
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && isMounted) {
+        setTimeout(highlightCode, 0)
+        observer.disconnect()
+      }
+    })
+
+    observer.observe(codeElement)
+
+    return () => {
+      isMounted = false
+      observer.disconnect()
+    }
+  }, [highlightCode])
+
+  const hasHighlightedCode = useMemo(() => {
+    return tokenLines.length > 0
+  }, [tokenLines.length])
+
+  return (
+    <ContentContainer
+      ref={codeContentRef}
+      $lineNumbers={codeShowLineNumbers}
+      $wrap={codeWrappable && !isUnwrapped}
+      $fadeIn={hasHighlightedCode}
+      style={{
+        fontSize: fontSize - 1,
+        maxHeight: codeCollapsible && !isExpanded ? '350px' : 'none'
+      }}>
+      {hasHighlightedCode ? (
+        <ShikiTokensRenderer language={language} tokenLines={tokenLines} />
+      ) : (
+        <CodePlaceholder>{children}</CodePlaceholder>
+      )}
+    </ContentContainer>
+  )
+}
+
+/**
+ * 渲染 Shiki 高亮后的 tokens
+ *
+ * 独立出来，方便将来做 virtual list
+ */
+const ShikiTokensRenderer: React.FC<{ language: string; tokenLines: ThemedToken[][] }> = memo(
+  ({ language, tokenLines }) => {
+    const { getShikiPreProperties } = useCodeStyle()
+    const rendererRef = useRef<HTMLPreElement>(null)
+
+    // 设置 pre 标签属性
+    useEffect(() => {
+      getShikiPreProperties(language).then((properties) => {
+        const pre = rendererRef.current
+        if (pre) {
+          pre.className = properties.class
+          pre.style.cssText = properties.style
+          pre.tabIndex = properties.tabindex
+        }
+      })
+    }, [language, getShikiPreProperties])
+
+    return (
+      <pre className="shiki" ref={rendererRef}>
+        <code>
+          {tokenLines.map((lineTokens, lineIndex) => (
+            <span key={`line-${lineIndex}`} className="line">
+              {lineTokens.map((token, tokenIndex) => (
+                <span key={`token-${tokenIndex}`} style={getReactStyleFromToken(token)}>
+                  {token.content}
+                </span>
+              ))}
+            </span>
+          ))}
+        </code>
+      </pre>
+    )
+  }
+)
+
+const ContentContainer = styled.div<{
+  $lineNumbers: boolean
+  $wrap: boolean
+  $fadeIn: boolean
+}>`
+  display: block;
+  position: relative;
+  overflow: auto;
+  border: 0.5px solid transparent;
+  border-radius: 5px;
+  margin-top: 0;
+
+  .shiki {
+    display: flex;
+    min-width: 100%;
+    padding: 1em;
+
+    code {
+      display: block;
+
+      .line {
+        display: block;
+        min-height: 1.3rem;
+        padding-left: ${(props) => (props.$lineNumbers ? '2rem' : '0')};
+
+        * {
+          overflow-wrap: ${(props) => (props.$wrap ? 'break-word' : 'normal')};
+          white-space: ${(props) => (props.$wrap ? 'pre-wrap' : 'pre')};
+        }
+      }
+    }
+  }
+
+  ${(props) =>
+    props.$lineNumbers &&
+    `
+      code {
+        counter-reset: step;
+        counter-increment: step 0;
+        position: relative;
+      }
+
+      code .line::before {
+        content: counter(step);
+        counter-increment: step;
+        width: 1rem;
+        position: absolute;
+        left: 0;
+        text-align: right;
+        opacity: 0.35;
+      }
+    `}
+
+  @keyframes contentFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  animation: ${(props) => (props.$fadeIn ? 'contentFadeIn 0.3s ease-in-out forwards' : 'none')};
+`
+
+const CodePlaceholder = styled.div`
+  display: block;
+  opacity: 0.1;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-x: hidden;
+  min-height: 1.3rem;
+`
+
+CodePreview.displayName = 'CodePreview'
+
+export default memo(CodePreview)
@@ -1,4 +1,4 @@
-import { DownloadOutlined, ExpandOutlined, LinkOutlined } from '@ant-design/icons'
+import { ExpandOutlined, LinkOutlined } from '@ant-design/icons'
 import { AppLogo } from '@renderer/config/env'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
 import { extractTitle } from '@renderer/utils/formats'
@@ -13,7 +13,6 @@ interface Props {

 const Artifacts: FC<Props> = ({ html }) => {
  const { t } = useTranslation()
-  const title = extractTitle(html) || 'Artifacts ' + t('chat.artifacts.button.preview')
  const { openMinapp } = useMinappPopup()

  /**
@@ -23,6 +22,7 @@ const Artifacts: FC<Props> = ({ html }) => {
    const path = await window.api.file.create('artifacts-preview.html')
    await window.api.file.write(path, html)
    const filePath = `file://${path}`
+    const title = extractTitle(html) || 'Artifacts ' + t('chat.artifacts.button.preview')
    openMinapp({
      id: 'artifacts-preview',
      name: title,
@@ -46,13 +46,6 @@ const Artifacts: FC<Props> = ({ html }) => {
    }
  }

-  /**
-   * 下载文件
-   */
-  const onDownload = () => {
-    window.api.file.save(`${title}.html`, html)
-  }
-
  return (
    <Container>
      <Button icon={<ExpandOutlined />} onClick={handleOpenInApp}>
@@ -62,10 +55,6 @@ const Artifacts: FC<Props> = ({ html }) => {
      <Button icon={<LinkOutlined />} onClick={handleOpenExternal}>
        {t('chat.artifacts.button.openExternal')}
      </Button>
-
-      <Button icon={<DownloadOutlined />} onClick={onDownload}>
-        {t('chat.artifacts.button.download')}
-      </Button>
    </Container>
  )
 }
@@ -0,0 +1,101 @@
+import { nanoid } from '@reduxjs/toolkit'
+import { CodeTool, usePreviewToolHandlers, usePreviewTools } from '@renderer/components/CodeToolbar'
+import { useMermaid } from '@renderer/hooks/useMermaid'
+import { Flex } from 'antd'
+import React, { memo, startTransition, useCallback, useEffect, useRef, useState } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  children: string
+  setTools?: (value: React.SetStateAction<CodeTool[]>) => void
+}
+
+const MermaidPreview: React.FC<Props> = ({ children, setTools }) => {
+  const { mermaid, isLoading, error: mermaidError } = useMermaid()
+  const mermaidRef = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string | null>(null)
+  const diagramId = useRef<string>(`mermaid-${nanoid(6)}`).current
+  const errorTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  // 使用通用图像工具
+  const { handleZoom, handleCopyImage, handleDownload } = usePreviewToolHandlers(mermaidRef, {
+    imgSelector: 'svg',
+    prefix: 'mermaid',
+    enableWheelZoom: true
+  })
+
+  // 使用工具栏
+  usePreviewTools({
+    setTools,
+    handleZoom,
+    handleCopyImage,
+    handleDownload
+  })
+
+  const render = useCallback(async () => {
+    try {
+      if (!children) return
+
+      // 验证语法，提前抛出异常
+      await mermaid.parse(children)
+
+      if (!mermaidRef.current) return
+      const { svg } = await mermaid.render(diagramId, children, mermaidRef.current)
+
+      // 避免不可见时产生 undefined 和 NaN
+      const fixedSvg = svg.replace(/translate\(undefined,\s*NaN\)/g, 'translate(0, 0)')
+      mermaidRef.current.innerHTML = fixedSvg
+
+      // 没有语法错误时清除错误记录和定时器
+      setError(null)
+      if (errorTimeoutRef.current) {
+        clearTimeout(errorTimeoutRef.current)
+        errorTimeoutRef.current = null
+      }
+    } catch (error) {
+      // 延迟显示错误
+      if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current)
+      errorTimeoutRef.current = setTimeout(() => {
+        setError((error as Error).message)
+      }, 500)
+    }
+  }, [children, diagramId, mermaid])
+
+  // 渲染Mermaid图表
+  useEffect(() => {
+    if (isLoading) return
+
+    startTransition(render)
+
+    // 清理定时器
+    return () => {
+      if (errorTimeoutRef.current) {
+        clearTimeout(errorTimeoutRef.current)
+        errorTimeoutRef.current = null
+      }
+    }
+  }, [isLoading, render])
+
+  return (
+    <Flex vertical>
+      {(mermaidError || error) && <StyledError>{mermaidError || error}</StyledError>}
+      <StyledMermaid ref={mermaidRef} className="mermaid" />
+    </Flex>
+  )
+}
+
+const StyledMermaid = styled.div`
+  overflow: auto;
+`
+
+const StyledError = styled.div`
+  overflow: auto;
+  padding: 16px;
+  color: #ff4d4f;
+  border: 1px solid #ff4d4f;
+  border-radius: 4px;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+`
+
+export default memo(MermaidPreview)
@@ -0,0 +1,195 @@
+import { LoadingOutlined } from '@ant-design/icons'
+import { CodeTool, usePreviewToolHandlers, usePreviewTools } from '@renderer/components/CodeToolbar'
+import { Spin } from 'antd'
+import pako from 'pako'
+import React, { memo, useCallback, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+const PlantUMLServer = 'https://www.plantuml.com/plantuml'
+function encode64(data: Uint8Array) {
+  let r = ''
+  for (let i = 0; i < data.length; i += 3) {
+    if (i + 2 === data.length) {
+      r += append3bytes(data[i], data[i + 1], 0)
+    } else if (i + 1 === data.length) {
+      r += append3bytes(data[i], 0, 0)
+    } else {
+      r += append3bytes(data[i], data[i + 1], data[i + 2])
+    }
+  }
+  return r
+}
+
+function encode6bit(b: number) {
+  if (b < 10) {
+    return String.fromCharCode(48 + b)
+  }
+  b -= 10
+  if (b < 26) {
+    return String.fromCharCode(65 + b)
+  }
+  b -= 26
+  if (b < 26) {
+    return String.fromCharCode(97 + b)
+  }
+  b -= 26
+  if (b === 0) {
+    return '-'
+  }
+  if (b === 1) {
+    return '_'
+  }
+  return '?'
+}
+
+function append3bytes(b1: number, b2: number, b3: number) {
+  const c1 = b1 >> 2
+  const c2 = ((b1 & 0x3) << 4) | (b2 >> 4)
+  const c3 = ((b2 & 0xf) << 2) | (b3 >> 6)
+  const c4 = b3 & 0x3f
+  let r = ''
+  r += encode6bit(c1 & 0x3f)
+  r += encode6bit(c2 & 0x3f)
+  r += encode6bit(c3 & 0x3f)
+  r += encode6bit(c4 & 0x3f)
+  return r
+}
+/**
+ * https://plantuml.com/zh/code-javascript-synchronous
+ * To use PlantUML image generation, a text diagram description have to be :
+    1. Encoded in UTF-8
+    2. Compressed using Deflate algorithm
+    3. Reencoded in ASCII using a transformation _close_ to base64
+ */
+function encodeDiagram(diagram: string): string {
+  const utf8text = new TextEncoder().encode(diagram)
+  const compressed = pako.deflateRaw(utf8text)
+  return encode64(compressed)
+}
+
+async function downloadUrl(url: string, filename: string) {
+  const response = await fetch(url)
+  if (!response.ok) {
+    window.message.warning({ content: response.statusText, duration: 1.5 })
+    return
+  }
+  const blob = await response.blob()
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(link.href)
+}
+
+type PlantUMLServerImageProps = {
+  format: 'png' | 'svg'
+  diagram: string
+  onClick?: React.MouseEventHandler<HTMLDivElement>
+  className?: string
+}
+
+function getPlantUMLImageUrl(format: 'png' | 'svg', diagram: string, isDark?: boolean) {
+  const encodedDiagram = encodeDiagram(diagram)
+  if (isDark) {
+    return `${PlantUMLServer}/d${format}/${encodedDiagram}`
+  }
+  return `${PlantUMLServer}/${format}/${encodedDiagram}`
+}
+
+const PlantUMLServerImage: React.FC<PlantUMLServerImageProps> = ({ format, diagram, onClick, className }) => {
+  const [loading, setLoading] = useState(true)
+  // FIXME: 黑暗模式背景太黑了，目前让 PlantUML 和 SVG 一样保持白色背景
+  const url = getPlantUMLImageUrl(format, diagram, false)
+  return (
+    <StyledPlantUML onClick={onClick} className={className}>
+      <Spin
+        spinning={loading}
+        indicator={
+          <LoadingOutlined
+            spin
+            style={{
+              fontSize: 32
+            }}
+          />
+        }>
+        <img
+          src={url}
+          onLoad={() => {
+            setLoading(false)
+          }}
+          onError={(e) => {
+            setLoading(false)
+            const target = e.target as HTMLImageElement
+            target.style.opacity = '0.5'
+            target.style.filter = 'blur(2px)'
+          }}
+        />
+      </Spin>
+    </StyledPlantUML>
+  )
+}
+
+interface PlantUMLProps {
+  children: string
+  setTools?: (value: React.SetStateAction<CodeTool[]>) => void
+}
+
+const PlantUmlPreview: React.FC<PlantUMLProps> = ({ children, setTools }) => {
+  const { t } = useTranslation()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const encodedDiagram = encodeDiagram(children)
+
+  // 自定义 PlantUML 下载方法
+  const customDownload = useCallback(
+    (format: 'svg' | 'png') => {
+      const timestamp = Date.now()
+      const url = `${PlantUMLServer}/${format}/${encodedDiagram}`
+      const filename = `plantuml-diagram-${timestamp}.${format}`
+      downloadUrl(url, filename).catch(() => {
+        window.message.error(t('code_block.download.failed.network'))
+      })
+    },
+    [encodedDiagram, t]
+  )
+
+  // 使用通用图像工具，提供自定义下载方法
+  const { handleZoom, handleCopyImage } = usePreviewToolHandlers(containerRef, {
+    imgSelector: '.plantuml-preview img',
+    prefix: 'plantuml-diagram',
+    enableWheelZoom: true,
+    customDownloader: customDownload
+  })
+
+  // 使用工具栏
+  usePreviewTools({
+    setTools,
+    handleZoom,
+    handleCopyImage,
+    handleDownload: customDownload
+  })
+
+  return (
+    <div ref={containerRef}>
+      <PlantUMLServerImage format="svg" diagram={children} className="plantuml-preview" />
+    </div>
+  )
+}
+
+const StyledPlantUML = styled.div`
+  max-height: calc(80vh - 100px);
+  text-align: left;
+  overflow-y: auto;
+  background-color: white;
+  img {
+    max-width: 100%;
+    height: auto;
+    min-height: 100px;
+    transition: transform 0.2s ease;
+  }
+`
+
+export default memo(PlantUmlPreview)
@@ -0,0 +1,22 @@
+import { FC, memo } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  children: string
+}
+
+const StatusBar: FC<Props> = ({ children }) => {
+  return <Container>{children}</Container>
+}
+
+const Container = styled.div`
+  margin: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  padding-bottom: 10px;
+  overflow-y: auto;
+  text-wrap: wrap;
+`
+
+export default memo(StatusBar)
@@ -0,0 +1,40 @@
+import { CodeTool, usePreviewToolHandlers, usePreviewTools } from '@renderer/components/CodeToolbar'
+import { memo, useRef } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  children: string
+  setTools?: (value: React.SetStateAction<CodeTool[]>) => void
+}
+
+const SvgPreview: React.FC<Props> = ({ children, setTools }) => {
+  const svgContainerRef = useRef<HTMLDivElement>(null)
+
+  // 使用通用图像工具
+  const { handleCopyImage, handleDownload } = usePreviewToolHandlers(svgContainerRef, {
+    imgSelector: '.svg-preview svg',
+    prefix: 'svg-image'
+  })
+
+  // 使用工具栏
+  usePreviewTools({
+    setTools,
+    handleCopyImage,
+    handleDownload
+  })
+
+  return (
+    <SvgPreviewContainer ref={svgContainerRef} className="svg-preview" dangerouslySetInnerHTML={{ __html: children }} />
+  )
+}
+
+const SvgPreviewContainer = styled.div`
+  padding: 1em;
+  background-color: white;
+  overflow: auto;
+  border: 0.5px solid var(--color-code-background);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+`
+
+export default memo(SvgPreview)
@@ -0,0 +1,298 @@
+import { LoadingOutlined } from '@ant-design/icons'
+import CodeEditor from '@renderer/components/CodeEditor'
+import { CodeTool, CodeToolbar, TOOL_SPECS, useCodeTool } from '@renderer/components/CodeToolbar'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { pyodideService } from '@renderer/services/PyodideService'
+import { extractTitle } from '@renderer/utils/formats'
+import { isValidPlantUML } from '@renderer/utils/markdown'
+import dayjs from 'dayjs'
+import { CirclePlay, CodeXml, Copy, Download, Eye, Square, SquarePen, SquareSplitHorizontal } from 'lucide-react'
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import CodePreview from './CodePreview'
+import HtmlArtifacts from './HtmlArtifacts'
+import MermaidPreview from './MermaidPreview'
+import PlantUmlPreview from './PlantUmlPreview'
+import StatusBar from './StatusBar'
+import SvgPreview from './SvgPreview'
+
+type ViewMode = 'source' | 'special' | 'split'
+
+interface Props {
+  children: string
+  language: string
+  onSave?: (newContent: string) => void
+}
+
+/**
+ * 代码块视图
+ *
+ * 视图类型：
+ * - preview: 预览视图，其中非源代码的是特殊视图
+ * - edit: 编辑视图
+ *
+ * 视图模式：
+ * - source: 源代码视图模式
+ * - special: 特殊视图模式（Mermaid、PlantUML、SVG）
+ * - split: 分屏模式（源代码和特殊视图并排显示）
+ *
+ * 顶部 sticky 工具栏：
+ * - quick 工具
+ * - core 工具
+ */
+const CodeBlockView: React.FC<Props> = ({ children, language, onSave }) => {
+  const { t } = useTranslation()
+  const { codeEditor, codeExecution } = useSettings()
+  const [viewMode, setViewMode] = useState<ViewMode>('special')
+  const [isRunning, setIsRunning] = useState(false)
+  const [output, setOutput] = useState('')
+
+  const [tools, setTools] = useState<CodeTool[]>([])
+  const { registerTool, removeTool } = useCodeTool(setTools)
+
+  const isExecutable = useMemo(() => {
+    return codeExecution.enabled && language === 'python'
+  }, [codeExecution.enabled, language])
+
+  const hasSpecialView = useMemo(() => ['mermaid', 'plantuml', 'svg'].includes(language), [language])
+
+  const isInSpecialView = useMemo(() => {
+    return hasSpecialView && viewMode === 'special'
+  }, [hasSpecialView, viewMode])
+
+  const handleCopySource = useCallback(() => {
+    navigator.clipboard.writeText(children)
+    window.message.success({ content: t('code_block.copy.success'), key: 'copy-code' })
+  }, [children, t])
+
+  const handleDownloadSource = useCallback(() => {
+    let fileName = ''
+
+    // 尝试提取标题
+    if (language === 'html' && children.includes('</html>')) {
+      const title = extractTitle(children)
+      if (title) {
+        fileName = `${title}.html`
+      }
+    }
+
+    // 默认使用日期格式命名
+    if (!fileName) {
+      fileName = `${dayjs().format('YYYYMMDDHHmm')}.${language}`
+    }
+
+    window.api.file.save(fileName, children)
+  }, [children, language])
+
+  const handleRunScript = useCallback(() => {
+    setIsRunning(true)
+    setOutput('')
+
+    pyodideService
+      .runScript(children, {}, codeExecution.timeoutMinutes * 60000)
+      .then((formattedOutput) => {
+        setOutput(formattedOutput)
+      })
+      .catch((error) => {
+        console.error('Unexpected error:', error)
+        setOutput(`Unexpected error: ${error.message || 'Unknown error'}`)
+      })
+      .finally(() => {
+        setIsRunning(false)
+      })
+  }, [children, codeExecution.timeoutMinutes])
+
+  useEffect(() => {
+    // 复制按钮
+    registerTool({
+      ...TOOL_SPECS.copy,
+      icon: <Copy className="icon" />,
+      tooltip: t('code_block.copy.source'),
+      onClick: handleCopySource
+    })
+
+    // 下载按钮
+    registerTool({
+      ...TOOL_SPECS.download,
+      icon: <Download className="icon" />,
+      tooltip: t('code_block.download.source'),
+      onClick: handleDownloadSource
+    })
+    return () => {
+      removeTool(TOOL_SPECS.copy.id)
+      removeTool(TOOL_SPECS.download.id)
+    }
+  }, [handleCopySource, handleDownloadSource, registerTool, removeTool, t])
+
+  // 特殊视图的编辑按钮，在分屏模式下不可用
+  useEffect(() => {
+    if (!hasSpecialView || viewMode === 'split') return
+
+    const viewSourceToolSpec = codeEditor.enabled ? TOOL_SPECS.edit : TOOL_SPECS['view-source']
+
+    if (codeEditor.enabled) {
+      registerTool({
+        ...viewSourceToolSpec,
+        icon: viewMode === 'source' ? <Eye className="icon" /> : <SquarePen className="icon" />,
+        tooltip: viewMode === 'source' ? t('code_block.preview') : t('code_block.edit'),
+        onClick: () => setViewMode(viewMode === 'source' ? 'special' : 'source')
+      })
+    } else {
+      registerTool({
+        ...viewSourceToolSpec,
+        icon: viewMode === 'source' ? <Eye className="icon" /> : <CodeXml className="icon" />,
+        tooltip: viewMode === 'source' ? t('code_block.preview') : t('code_block.preview.source'),
+        onClick: () => setViewMode(viewMode === 'source' ? 'special' : 'source')
+      })
+    }
+
+    return () => removeTool(viewSourceToolSpec.id)
+  }, [codeEditor.enabled, hasSpecialView, viewMode, registerTool, removeTool, t])
+
+  // 特殊视图的分屏按钮
+  useEffect(() => {
+    if (!hasSpecialView) return
+
+    registerTool({
+      ...TOOL_SPECS['split-view'],
+      icon: viewMode === 'split' ? <Square className="icon" /> : <SquareSplitHorizontal className="icon" />,
+      tooltip: viewMode === 'split' ? t('code_block.split.restore') : t('code_block.split'),
+      onClick: () => setViewMode(viewMode === 'split' ? 'special' : 'split')
+    })
+
+    return () => removeTool(TOOL_SPECS['split-view'].id)
+  }, [hasSpecialView, viewMode, registerTool, removeTool, t])
+
+  // 运行按钮
+  useEffect(() => {
+    if (!isExecutable) return
+
+    registerTool({
+      ...TOOL_SPECS.run,
+      icon: isRunning ? <LoadingOutlined /> : <CirclePlay className="icon" />,
+      tooltip: t('code_block.run'),
+      onClick: () => !isRunning && handleRunScript()
+    })
+
+    return () => isExecutable && removeTool(TOOL_SPECS.run.id)
+  }, [isExecutable, isRunning, handleRunScript, registerTool, removeTool, t])
+
+  // 源代码视图组件
+  const sourceView = useMemo(() => {
+    if (codeEditor.enabled) {
+      return (
+        <CodeEditor
+          value={children}
+          language={language}
+          onSave={onSave}
+          options={{ stream: true }}
+          setTools={setTools}
+        />
+      )
+    } else {
+      return (
+        <CodePreview language={language} setTools={setTools}>
+          {children}
+        </CodePreview>
+      )
+    }
+  }, [children, codeEditor.enabled, language, onSave, setTools])
+
+  // 特殊视图组件映射
+  const specialView = useMemo(() => {
+    if (language === 'mermaid') {
+      return <MermaidPreview setTools={setTools}>{children}</MermaidPreview>
+    } else if (language === 'plantuml' && isValidPlantUML(children)) {
+      return <PlantUmlPreview setTools={setTools}>{children}</PlantUmlPreview>
+    } else if (language === 'svg') {
+      return <SvgPreview setTools={setTools}>{children}</SvgPreview>
+    }
+    return null
+  }, [children, language])
+
+  const renderHeader = useMemo(() => {
+    const langTag = '<' + language.toUpperCase() + '>'
+    return <CodeHeader $isInSpecialView={isInSpecialView}>{isInSpecialView ? '' : langTag}</CodeHeader>
+  }, [isInSpecialView, language])
+
+  // 根据视图模式和语言选择组件，优先展示特殊视图，fallback是源代码视图
+  const renderContent = useMemo(() => {
+    const showSpecialView = specialView && ['special', 'split'].includes(viewMode)
+    const showSourceView = !specialView || viewMode !== 'special'
+
+    return (
+      <SplitViewWrapper className="split-view-wrapper">
+        {showSpecialView && specialView}
+        {showSourceView && sourceView}
+      </SplitViewWrapper>
+    )
+  }, [specialView, sourceView, viewMode])
+
+  const renderArtifacts = useMemo(() => {
+    if (language === 'html') {
+      return <HtmlArtifacts html={children} />
+    }
+    return null
+  }, [children, language])
+
+  return (
+    <CodeBlockWrapper className="code-block" $isInSpecialView={isInSpecialView}>
+      {renderHeader}
+      <CodeToolbar tools={tools} />
+      {renderContent}
+      {renderArtifacts}
+      {isExecutable && output && <StatusBar>{output}</StatusBar>}
+    </CodeBlockWrapper>
+  )
+}
+
+const CodeBlockWrapper = styled.div<{ $isInSpecialView: boolean }>`
+  /* FIXME: 在 bubble style 中撑开一些宽度*/
+  position: relative;
+
+  .code-toolbar {
+    background-color: ${(props) => (props.$isInSpecialView ? 'transparent' : 'var(--color-background-mute)')};
+    border-radius: ${(props) => (props.$isInSpecialView ? '0' : '4px')};
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    transform: translateZ(0);
+    will-change: opacity;
+    &.show {
+      opacity: 1;
+    }
+  }
+  &:hover {
+    .code-toolbar {
+      opacity: 1;
+    }
+  }
+`
+
+const CodeHeader = styled.div<{ $isInSpecialView: boolean }>`
+  display: flex;
+  align-items: center;
+  color: var(--color-text);
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0 10px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  margin-top: ${(props) => (props.$isInSpecialView ? '6px' : '0')};
+  height: ${(props) => (props.$isInSpecialView ? '16px' : '34px')};
+`
+
+const SplitViewWrapper = styled.div`
+  display: flex;
+  width: 100%;
+
+  > * {
+    flex: 1 1 0;
+    width: 0;
+    min-width: 0;
+    max-width: 100%;
+  }
+`
+
+export default memo(CodeBlockView)
@@ -0,0 +1,65 @@
+import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
+import { Extension } from '@uiw/react-codemirror'
+import { useEffect, useState } from 'react'
+
+let linterPromise: Promise<any> | null = null
+function importLintPackage() {
+  if (!linterPromise) {
+    linterPromise = import('@codemirror/lint').then((mod) => mod.linter)
+  }
+  return linterPromise
+}
+
+// 语言对应的 linter 加载器
+const linterLoaders: Record<string, () => Promise<any>> = {
+  json: async () => {
+    const [linter, jsonParseLinter] = await Promise.all([
+      importLintPackage(),
+      import('@codemirror/lang-json').then((mod) => mod.jsonParseLinter)
+    ])
+    return linter(jsonParseLinter())
+  }
+}
+
+export const useLanguageExtensions = (language: string, lint?: boolean) => {
+  const { languageMap } = useCodeStyle()
+  const [extensions, setExtensions] = useState<Extension[]>([])
+
+  // 加载语言
+  useEffect(() => {
+    let normalizedLang = languageMap[language as keyof typeof languageMap] || language.toLowerCase()
+
+    // 如果语言名包含 `-`，转换为驼峰命名法
+    if (normalizedLang.includes('-')) {
+      normalizedLang = normalizedLang.replace(/-([a-z])/g, (_, char) => char.toUpperCase())
+    }
+
+    import('@uiw/codemirror-extensions-langs')
+      .then(({ loadLanguage }) => {
+        const extension = loadLanguage(normalizedLang as any)
+        if (extension) {
+          setExtensions((prev) => [...prev, extension])
+        }
+      })
+      .catch((error) => {
+        console.debug(`Failed to load language: ${normalizedLang}`, error)
+      })
+  }, [language, languageMap])
+
+  useEffect(() => {
+    if (!lint) return
+
+    const loader = linterLoaders[language]
+    if (loader) {
+      loader()
+        .then((extension) => {
+          setExtensions((prev) => [...prev, extension])
+        })
+        .catch((error) => {
+          console.error(`Failed to load linter for ${language}`, error)
+        })
+    }
+  }, [language, lint])
+
+  return extensions
+}
@@ -0,0 +1,275 @@
+import { CodeTool, TOOL_SPECS, useCodeTool } from '@renderer/components/CodeToolbar'
+import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
+import { useSettings } from '@renderer/hooks/useSettings'
+import CodeMirror, { Annotation, BasicSetupOptions, EditorView, Extension, keymap } from '@uiw/react-codemirror'
+import diff from 'fast-diff'
+import {
+  ChevronsDownUp,
+  ChevronsUpDown,
+  Save as SaveIcon,
+  Text as UnWrapIcon,
+  WrapText as WrapIcon
+} from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useLanguageExtensions } from './hook'
+
+// 标记非用户编辑的变更
+const External = Annotation.define<boolean>()
+
+interface Props {
+  value: string
+  placeholder?: string | HTMLElement
+  language: string
+  onSave?: (newContent: string) => void
+  onChange?: (newContent: string) => void
+  setTools?: (value: React.SetStateAction<CodeTool[]>) => void
+  minHeight?: string
+  maxHeight?: string
+  /** 用于覆写编辑器的某些设置 */
+  options?: {
+    stream?: boolean // 用于流式响应场景，默认 false
+    lint?: boolean
+    collapsible?: boolean
+    wrappable?: boolean
+    keymap?: boolean
+  } & BasicSetupOptions
+  /** 用于追加 extensions */
+  extensions?: Extension[]
+  /** 用于覆写编辑器的样式，会直接传给 CodeMirror 的 style 属性 */
+  style?: React.CSSProperties
+}
+
+/**
+ * 源代码编辑器，基于 CodeMirror，封装了 ReactCodeMirror。
+ *
+ * 目前必须和 CodeToolbar 配合使用。
+ */
+const CodeEditor = ({
+  value,
+  placeholder,
+  language,
+  onSave,
+  onChange,
+  setTools,
+  minHeight,
+  maxHeight,
+  options,
+  extensions,
+  style
+}: Props) => {
+  const {
+    fontSize,
+    codeShowLineNumbers: _lineNumbers,
+    codeCollapsible: _collapsible,
+    codeWrappable: _wrappable,
+    codeEditor
+  } = useSettings()
+  const collapsible = useMemo(() => options?.collapsible ?? _collapsible, [options?.collapsible, _collapsible])
+  const wrappable = useMemo(() => options?.wrappable ?? _wrappable, [options?.wrappable, _wrappable])
+  const enableKeymap = useMemo(() => options?.keymap ?? codeEditor.keymap, [options?.keymap, codeEditor.keymap])
+
+  // 合并 codeEditor 和 options 的 basicSetup，options 优先
+  const customBasicSetup = useMemo(() => {
+    return {
+      lineNumbers: _lineNumbers,
+      ...(codeEditor as BasicSetupOptions),
+      ...(options as BasicSetupOptions)
+    }
+  }, [codeEditor, _lineNumbers, options])
+
+  const { activeCmTheme } = useCodeStyle()
+  const [isExpanded, setIsExpanded] = useState(!collapsible)
+  const [isUnwrapped, setIsUnwrapped] = useState(!wrappable)
+  const initialContent = useRef(options?.stream ? (value ?? '').trimEnd() : (value ?? ''))
+  const [editorReady, setEditorReady] = useState(false)
+  const editorViewRef = useRef<EditorView | null>(null)
+  const { t } = useTranslation()
+
+  const langExtensions = useLanguageExtensions(language, options?.lint)
+
+  const { registerTool, removeTool } = useCodeTool(setTools)
+
+  // 展开/折叠工具
+  useEffect(() => {
+    registerTool({
+      ...TOOL_SPECS.expand,
+      icon: isExpanded ? <ChevronsDownUp className="icon" /> : <ChevronsUpDown className="icon" />,
+      tooltip: isExpanded ? t('code_block.collapse') : t('code_block.expand'),
+      visible: () => {
+        const scrollHeight = editorViewRef?.current?.scrollDOM?.scrollHeight
+        return collapsible && (scrollHeight ?? 0) > 350
+      },
+      onClick: () => setIsExpanded((prev) => !prev)
+    })
+
+    return () => removeTool(TOOL_SPECS.expand.id)
+  }, [collapsible, isExpanded, registerTool, removeTool, t, editorReady])
+
+  // 自动换行工具
+  useEffect(() => {
+    registerTool({
+      ...TOOL_SPECS.wrap,
+      icon: isUnwrapped ? <WrapIcon className="icon" /> : <UnWrapIcon className="icon" />,
+      tooltip: isUnwrapped ? t('code_block.wrap.on') : t('code_block.wrap.off'),
+      visible: () => wrappable,
+      onClick: () => setIsUnwrapped((prev) => !prev)
+    })
+
+    return () => removeTool(TOOL_SPECS.wrap.id)
+  }, [wrappable, isUnwrapped, registerTool, removeTool, t])
+
+  const handleSave = useCallback(() => {
+    const currentDoc = editorViewRef.current?.state.doc.toString() ?? ''
+    onSave?.(currentDoc)
+  }, [onSave])
+
+  // 保存按钮
+  useEffect(() => {
+    registerTool({
+      ...TOOL_SPECS.save,
+      icon: <SaveIcon className="icon" />,
+      tooltip: t('code_block.edit.save'),
+      onClick: handleSave
+    })
+
+    return () => removeTool(TOOL_SPECS.save.id)
+  }, [handleSave, registerTool, removeTool, t])
+
+  // 流式响应过程中计算 changes 来更新 EditorView
+  // 无法处理用户在流式响应过程中编辑代码的情况（应该也不必处理）
+  useEffect(() => {
+    if (!editorViewRef.current) return
+
+    const newContent = options?.stream ? (value ?? '').trimEnd() : (value ?? '')
+    const currentDoc = editorViewRef.current.state.doc.toString()
+
+    const changes = prepareCodeChanges(currentDoc, newContent)
+
+    if (changes && changes.length > 0) {
+      editorViewRef.current.dispatch({
+        changes,
+        annotations: [External.of(true)]
+      })
+    }
+  }, [options?.stream, value])
+
+  useEffect(() => {
+    setIsExpanded(!collapsible)
+  }, [collapsible])
+
+  useEffect(() => {
+    setIsUnwrapped(!wrappable)
+  }, [wrappable])
+
+  // 保存功能的快捷键
+  const saveKeymap = useMemo(() => {
+    return keymap.of([
+      {
+        key: 'Mod-s',
+        run: () => {
+          handleSave()
+          return true
+        },
+        preventDefault: true
+      }
+    ])
+  }, [handleSave])
+
+  const customExtensions = useMemo(() => {
+    return [
+      ...(extensions ?? []),
+      ...langExtensions,
+      ...(isUnwrapped ? [] : [EditorView.lineWrapping]),
+      ...(enableKeymap ? [saveKeymap] : [])
+    ]
+  }, [extensions, langExtensions, isUnwrapped, enableKeymap, saveKeymap])
+
+  return (
+    <CodeMirror
+      // 维持一个稳定值，避免触发 CodeMirror 重置
+      value={initialContent.current}
+      placeholder={placeholder}
+      width="100%"
+      minHeight={minHeight}
+      maxHeight={collapsible && !isExpanded ? (maxHeight ?? '350px') : 'none'}
+      editable={true}
+      // @ts-ignore 强制使用，见 react-codemirror 的 Example.tsx
+      theme={activeCmTheme}
+      extensions={customExtensions}
+      onCreateEditor={(view: EditorView) => {
+        editorViewRef.current = view
+        setEditorReady(true)
+      }}
+      onChange={(value, viewUpdate) => {
+        if (onChange && viewUpdate.docChanged) onChange(value)
+      }}
+      basicSetup={{
+        dropCursor: true,
+        allowMultipleSelections: true,
+        indentOnInput: true,
+        bracketMatching: true,
+        closeBrackets: true,
+        rectangularSelection: true,
+        crosshairCursor: true,
+        highlightActiveLineGutter: false,
+        highlightSelectionMatches: true,
+        closeBracketsKeymap: enableKeymap,
+        searchKeymap: enableKeymap,
+        foldKeymap: enableKeymap,
+        completionKeymap: enableKeymap,
+        lintKeymap: enableKeymap,
+        ...customBasicSetup // override basicSetup
+      }}
+      style={{
+        fontSize: `${fontSize - 1}px`,
+        border: '0.5px solid transparent',
+        borderRadius: '5px',
+        marginTop: 0,
+        ...style
+      }}
+    />
+  )
+}
+
+CodeEditor.displayName = 'CodeEditor'
+
+/**
+ * 使用 fast-diff 计算代码变更，再转换为 CodeMirror 的 changes。
+ * 可以处理所有类型的变更，不过流式响应过程中多是插入操作。
+ * @param oldCode 旧的代码内容
+ * @param newCode 新的代码内容
+ * @returns 用于 EditorView.dispatch 的 changes 数组
+ */
+function prepareCodeChanges(oldCode: string, newCode: string) {
+  const diffResult = diff(oldCode, newCode)
+
+  const changes: { from: number; to: number; insert: string }[] = []
+  let offset = 0
+
+  // operation: 1=插入, -1=删除, 0=相等
+  for (const [operation, text] of diffResult) {
+    if (operation === 1) {
+      changes.push({
+        from: offset,
+        to: offset,
+        insert: text
+      })
+    } else if (operation === -1) {
+      changes.push({
+        from: offset,
+        to: offset + text.length,
+        insert: ''
+      })
+      offset += text.length
+    } else {
+      offset += text.length
+    }
+  }
+
+  return changes
+}
+
+export default memo(CodeEditor)
@@ -0,0 +1,76 @@
+import { CodeToolSpec } from './types'
+
+export const TOOL_SPECS: Record<string, CodeToolSpec> = {
+  // Core tools
+  copy: {
+    id: 'copy',
+    type: 'core',
+    order: 10
+  },
+  download: {
+    id: 'download',
+    type: 'core',
+    order: 11
+  },
+  edit: {
+    id: 'edit',
+    type: 'core',
+    order: 12
+  },
+  'view-source': {
+    id: 'view-source',
+    type: 'core',
+    order: 12
+  },
+  save: {
+    id: 'save',
+    type: 'core',
+    order: 13
+  },
+  expand: {
+    id: 'expand',
+    type: 'core',
+    order: 20
+  },
+  // Quick tools
+  'split-view': {
+    id: 'split-view',
+    type: 'quick',
+    order: 10
+  },
+  run: {
+    id: 'run',
+    type: 'quick',
+    order: 11
+  },
+  wrap: {
+    id: 'wrap',
+    type: 'quick',
+    order: 20
+  },
+  'copy-image': {
+    id: 'copy-image',
+    type: 'quick',
+    order: 30
+  },
+  'download-svg': {
+    id: 'download-svg',
+    type: 'quick',
+    order: 31
+  },
+  'download-png': {
+    id: 'download-png',
+    type: 'quick',
+    order: 32
+  },
+  'zoom-in': {
+    id: 'zoom-in',
+    type: 'quick',
+    order: 40
+  },
+  'zoom-out': {
+    id: 'zoom-out',
+    type: 'quick',
+    order: 41
+  }
+}
@@ -0,0 +1,26 @@
+import { useCallback } from 'react'
+
+import { CodeTool } from './types'
+
+export const useCodeTool = (setTools?: (value: React.SetStateAction<CodeTool[]>) => void) => {
+  // 注册工具，如果已存在同ID工具则替换
+  const registerTool = useCallback(
+    (tool: CodeTool) => {
+      setTools?.((prev) => {
+        const filtered = prev.filter((t) => t.id !== tool.id)
+        return [...filtered, tool].sort((a, b) => b.order - a.order)
+      })
+    },
+    [setTools]
+  )
+
+  // 移除工具
+  const removeTool = useCallback(
+    (id: string) => {
+      setTools?.((prev) => prev.filter((tool) => tool.id !== id))
+    },
+    [setTools]
+  )
+
+  return { registerTool, removeTool }
+}
@@ -0,0 +1,5 @@
+export * from './constants'
+export * from './hook'
+export * from './toolbar'
+export * from './types'
+export * from './usePreviewTools'
@@ -0,0 +1,115 @@
+import { HStack } from '@renderer/components/Layout'
+import { Tooltip } from 'antd'
+import { EllipsisVertical } from 'lucide-react'
+import React, { memo, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import { CodeTool } from './types'
+
+interface CodeToolButtonProps {
+  tool: CodeTool
+}
+
+const CodeToolButton: React.FC<CodeToolButtonProps> = memo(({ tool }) => {
+  return (
+    <Tooltip key={tool.id} title={tool.tooltip} mouseEnterDelay={0.5}>
+      <ToolWrapper onClick={() => tool.onClick()}>{tool.icon}</ToolWrapper>
+    </Tooltip>
+  )
+})
+
+export const CodeToolbar: React.FC<{ tools: CodeTool[] }> = memo(({ tools }) => {
+  const [showQuickTools, setShowQuickTools] = useState(false)
+  const { t } = useTranslation()
+
+  // 根据条件显示工具
+  const visibleTools = tools.filter((tool) => !tool.visible || tool.visible())
+
+  // 按类型分组
+  const coreTools = visibleTools.filter((tool) => tool.type === 'core')
+  const quickTools = visibleTools.filter((tool) => tool.type === 'quick')
+
+  // 点击了 more 按钮或者只有一个快捷工具时
+  const quickToolButtons = useMemo(() => {
+    if (quickTools.length === 1 || (quickTools.length > 1 && showQuickTools)) {
+      return quickTools.map((tool) => <CodeToolButton key={tool.id} tool={tool} />)
+    }
+
+    return null
+  }, [quickTools, showQuickTools])
+
+  if (visibleTools.length === 0) {
+    return null
+  }
+
+  return (
+    <StickyWrapper>
+      <ToolbarWrapper className="code-toolbar">
+        {/* 有多个快捷工具时通过 more 按钮展示 */}
+        {quickToolButtons}
+        {quickTools.length > 1 && (
+          <Tooltip title={t('code_block.more')} mouseEnterDelay={0.5}>
+            <ToolWrapper onClick={() => setShowQuickTools(!showQuickTools)} className={showQuickTools ? 'active' : ''}>
+              <EllipsisVertical className="icon" />
+            </ToolWrapper>
+          </Tooltip>
+        )}
+
+        {/* 始终显示核心工具 */}
+        {coreTools.map((tool) => (
+          <CodeToolButton key={tool.id} tool={tool} />
+        ))}
+      </ToolbarWrapper>
+    </StickyWrapper>
+  )
+})
+
+const StickyWrapper = styled.div`
+  position: sticky;
+  top: 28px;
+  z-index: 10;
+`
+
+const ToolbarWrapper = styled(HStack)`
+  position: absolute;
+  align-items: center;
+  bottom: 0.3rem;
+  right: 0.5rem;
+  height: 24px;
+  gap: 4px;
+`
+
+const ToolWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  color: var(--color-text-3);
+
+  &:hover {
+    background-color: var(--color-background-soft);
+    .icon {
+      color: var(--color-text-1);
+    }
+  }
+
+  &.active {
+    color: var(--color-primary);
+    .icon {
+      color: var(--color-primary);
+    }
+  }
+
+  /* For Lucide icons */
+  .icon {
+    width: 14px;
+    height: 14px;
+    color: var(--color-text-3);
+  }
+`
@@ -0,0 +1,25 @@
+/**
+ * 代码块工具基本信息
+ */
+export interface CodeToolSpec {
+  id: string
+  type: 'core' | 'quick'
+  order: number
+}
+
+/**
+ * 代码块工具定义接口
+ * @param id 唯一标识符
+ * @param type 工具类型
+ * @param icon 按钮图标
+ * @param tooltip 提示文本
+ * @param condition 显示条件
+ * @param onClick 点击动作
+ * @param order 显示顺序，越小越靠右
+ */
+export interface CodeTool extends CodeToolSpec {
+  icon: React.ReactNode
+  tooltip: string
+  visible?: () => boolean
+  onClick: () => void
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>