refactor: 将所有 ASCII 字符图转换为 Mermaid 图表

- 14 个文件的 18 个 ASCII art <pre> 块转为 Mermaid/HTML/CodeBlock
- 流程图/架构图 → MermaidDiagram 组件
- 表格 (TaskTracking) → HTML <table>
- 目录树 (ConfigSystem, ExtensionSystem) → CodeBlock
- 修复 SubagentResolutionAnimation 卡片布局溢出
- 移除未使用的 .ascii-diagram CSS 类

Author: tt-a1i

src/pages/Checkpointing.tsx

@@ -775,61 +775,38 @@ async function restoreAction(
  {/* 架构图 */}
  <section>
  <h3 className="text-xl font-semibold text-heading mb-4">Checkpointing 架构</h3>
- <div className="bg-surface rounded-lg p-6">
- <pre className="text-sm text-body overflow-x-auto">
-{`┌─────────────────────────────────────────────────────────────────┐
-│ 用户批准工具执行 │
-└──────────────────────────┬──────────────────────────────────────┘
- │
- ▼
-┌─────────────────────────────────────────────────────────────────┐
-│ CheckpointService │
-│ │
-│ ┌─────────────────────────────────────────────────────────┐ │
-│ │ createCheckpoint() │ │
-│ │ │ │
-│ │ 1. 获取当前文件状态 │ │
-│ │ 2. 复制到影子仓库 │ │
-│ │ 3. Git commit │ │
-│ │ 4. 保存对话历史 │ │
-│ │ 5. 保存工具调用信息 │ │
-│ │ │ │
-│ └─────────────────────────────────────────────────────────┘ │
-│ │
-└──────────────────────────┬──────────────────────────────────────┘
- │
- ┌──────────────────┼──────────────────┐
- │ │ │
- ▼ ▼ ▼
-┌──────────────┐ ┌──────────────┐ ┌──────────────────────┐
-│ 影子 Git 仓库 │ │ 对话历史文件 │ │ 工具调用 JSON │
-│ │ │ │ │ │
-│ ~/.gemini/ │ │ ~/.gemini/ │ │ ~/.gemini/tmp/ │
-│ history/ │ │ tmp/<hash>/ │ │ <hash>/checkpoints/ │
-│ <hash>/ │ │ checkpoints/ │ │ <timestamp>.json │
-│ │ │ │ │ │
-│ ┌──────────┐ │ │ conversation │ │ { │
-│ │ commit 1 │ │ │ history │ │ toolName, │
-│ │ commit 2 │ │ │ │ │ toolCall, │
-│ │ ... │ │ │ │ │ targetFile │
-│ └──────────┘ │ │ │ │ } │
-└──────────────┘ └──────────────┘ └──────────────────────┘
-
- /restore 命令
- │
- ▼
-┌─────────────────────────────────────────────────────────────────┐
-│ restoreCheckpoint() │
-│ │
-│ 1. 读取检查点 JSON │
-│ 2. git checkout <commit> 在影子仓库 │
-│ 3. 复制文件回项目目录 │
-│ 4. 恢复对话历史 │
-│ 5. 重新提议工具调用 │
-│ │
-└─────────────────────────────────────────────────────────────────┘`}
- </pre>
- </div>
+ <MermaidDiagram chart={`flowchart TD
+ Approve["用户批准工具执行"]
+
+ subgraph CPS["CheckpointService"]
+  Create["createCheckpoint<br/>1. 获取当前文件状态<br/>2. 复制到影子仓库<br/>3. Git commit<br/>4. 保存对话历史<br/>5. 保存工具调用信息"]
+ end
+
+ ShadowGit["影子 Git 仓库<br/>~/.gemini/history/hash/<br/>commit 1, commit 2, ..."]
+ ConvoHistory["对话历史文件<br/>~/.gemini/tmp/hash/<br/>checkpoints/<br/>conversation history"]
+ ToolJSON["工具调用 JSON<br/>~/.gemini/tmp/hash/<br/>checkpoints/timestamp.json<br/>toolName, toolCall, targetFile"]
+
+ Approve --> CPS
+ Create --> ShadowGit
+ Create --> ConvoHistory
+ Create --> ToolJSON
+
+ Restore["/restore 命令"]
+ RestoreFn["restoreCheckpoint<br/>1. 读取检查点 JSON<br/>2. git checkout commit 在影子仓库<br/>3. 复制文件回项目目录<br/>4. 恢复对话历史<br/>5. 重新提议工具调用"]
+
+ ShadowGit --> Restore
+ ConvoHistory --> Restore
+ ToolJSON --> Restore
+ Restore --> RestoreFn
+
+ style Approve fill:${getThemeColor("--mermaid-info-fill", "#dbeafe")},color:${getThemeColor("--color-text", "#1c1917")}
+ style CPS fill:${getThemeColor("--mermaid-warning-fill", "#fef3c7")},color:${getThemeColor("--color-text", "#1c1917")}
+ style ShadowGit fill:${getThemeColor("--mermaid-purple-fill", "#ede9fe")},color:${getThemeColor("--color-text", "#1c1917")}
+ style ConvoHistory fill:${getThemeColor("--mermaid-purple-fill", "#ede9fe")},color:${getThemeColor("--color-text", "#1c1917")}
+ style ToolJSON fill:${getThemeColor("--mermaid-purple-fill", "#ede9fe")},color:${getThemeColor("--color-text", "#1c1917")}
+ style Restore fill:${getThemeColor("--mermaid-success-fill", "#dcfce7")},color:${getThemeColor("--color-text", "#1c1917")}
+ style RestoreFn fill:${getThemeColor("--mermaid-success-fill", "#dcfce7")},color:${getThemeColor("--color-text", "#1c1917")}
+`} title="Checkpointing 架构" />
  </section>
 
  {/* 注意事项 */}

src/pages/ConfigSystem.tsx

@@ -1382,31 +1382,31 @@ if (!trustedFolder && approvalMode !== ApprovalMode.DEFAULT) {
  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div className="bg-elevated/10 border-2 border-edge rounded-lg p-4">
  <h4 className="text-heading font-bold mb-2">~/.gemini/ (用户级)</h4>
- <pre className="text-sm text-body whitespace-pre-wrap">{`├── settings.json # 用户配置
-├── GEMINI.md # 用户级记忆
-├── oauth_creds.json # OAuth 凭据
-├── mcp-oauth-tokens.json # MCP OAuth tokens
-├── agents/ # 用户级子代理
-├── commands/ # 用户级自定义命令
-├── extensions/ # 用户级扩展
-├── themes/ # 主题文件
-└── tmp/ # 临时文件
- └── <project_hash>/
- ├── chats/ # 聊天记录
- ├── checkpoints/ # 检查点
- └── shell_history # Shell 历史`}</pre>
+ <CodeBlock code={`├── settings.json          # 用户配置
+├── GEMINI.md              # 用户级记忆
+├── oauth_creds.json       # OAuth 凭据
+├── mcp-oauth-tokens.json  # MCP OAuth tokens
+├── agents/                # 用户级子代理
+├── commands/              # 用户级自定义命令
+├── extensions/            # 用户级扩展
+├── themes/                # 主题文件
+└── tmp/                   # 临时文件
+    └── <project_hash>/
+        ├── chats/         # 聊天记录
+        ├── checkpoints/   # 检查点
+        └── shell_history  # Shell 历史`} language="text" title="~/.gemini/ (用户级)" />
  </div>
 
  <div className="bg-elevated border-2 border-edge rounded-lg p-4">
  <h4 className="text-heading font-bold mb-2">.gemini/ (项目级)</h4>
- <pre className="text-sm text-body whitespace-pre-wrap">{`├── settings.json # 项目配置
-├── GEMINI.md # 项目级记忆
-├── agents/ # 项目级子代理
-├── commands/ # 项目级自定义命令
-├── extensions/ # 项目级扩展
-├── sandbox.Dockerfile # 自定义沙箱镜像
-├── sandbox.bashrc # 沙箱 shell 配置
-└── sandbox-macos-*.sb # macOS 沙箱 profile`}</pre>
+ <CodeBlock code={`├── settings.json        # 项目配置
+├── GEMINI.md            # 项目级记忆
+├── agents/              # 项目级子代理
+├── commands/            # 项目级自定义命令
+├── extensions/          # 项目级扩展
+├── sandbox.Dockerfile   # 自定义沙箱镜像
+├── sandbox.bashrc       # 沙箱 shell 配置
+└── sandbox-macos-*.sb   # macOS 沙箱 profile`} language="text" title=".gemini/ (项目级)" />
  </div>
  </div>
  </Layer>

src/pages/EnterpriseDeployment.tsx

@@ -264,19 +264,37 @@ npm run build:portable
 
  <div className="bg-surface rounded-lg p-4 border border-edge">
  <h4 className="text-heading font-semibold mb-3">产物结构</h4>
- <pre className="text-sm text-body font-mono">
-{`portable-win-x64/
-├── node/ # Node.js 运行时 (v20.19.0)
-│ └── node.exe
-├── app/ # 应用代码
-│ ├── cli.js # esbuild 打包的主程序
-│ ├── vendor/ # 内置工具 (ripgrep 等)
-│ └── *.sb # 沙箱配置文件
-├── gemini.bat # Windows 启动器
-├── gemini.ps1 # PowerShell 启动器
-├── install.bat # 自动安装脚本
-└── INSTALL.md # 用户说明`}
- </pre>
+ <MermaidDiagram chart={`graph LR
+ Root["portable-win-x64/"]
+
+ Node["node/<br/>Node.js 运行时 v20.19.0"]
+ NodeExe["node.exe"]
+
+ App["app/<br/>应用代码"]
+ CliJS["cli.js<br/>esbuild 打包的主程序"]
+ Vendor["vendor/<br/>内置工具 ripgrep 等"]
+ SB["*.sb<br/>沙箱配置文件"]
+
+ Bat["gemini.bat<br/>Windows 启动器"]
+ PS1["gemini.ps1<br/>PowerShell 启动器"]
+ Install["install.bat<br/>自动安装脚本"]
+ InstallMD["INSTALL.md<br/>用户说明"]
+
+ Root --> Node
+ Node --> NodeExe
+ Root --> App
+ App --> CliJS
+ App --> Vendor
+ App --> SB
+ Root --> Bat
+ Root --> PS1
+ Root --> Install
+ Root --> InstallMD
+
+ style Root fill:${getThemeColor("--mermaid-info-fill", "#dbeafe")},color:${getThemeColor("--color-text", "#1c1917")}
+ style Node fill:${getThemeColor("--mermaid-success-fill", "#dcfce7")},color:${getThemeColor("--color-text", "#1c1917")}
+ style App fill:${getThemeColor("--mermaid-warning-fill", "#fef3c7")},color:${getThemeColor("--color-text", "#1c1917")}
+`} title="产物结构" />
  </div>
 
  <CodeBlock

src/pages/ErrorHandling.tsx

@@ -784,18 +784,30 @@ function attemptJSONFix(
  <h3 className="text-xl font-semibold text-heading mb-4">错误类型定义</h3>
  <CodeBlock code={errorTypesCode} language="typescript" title="自定义错误类" />
 
- <div className="mt-4 bg-surface rounded-lg p-4">
- <h4 className="font-semibold text-heading mb-2">错误类型层级</h4>
- <pre className="text-sm text-body">
-{`CLIError (基类)
-├── APIError - API 调用错误 (状态码、响应)
-├── AuthenticationError - 认证错误 (登录失败)
-├── ToolExecutionError - 工具执行错误 (Shell、文件操作)
-├── ConfigurationError - 配置错误 (无效配置)
-├── NetworkError - 网络错误 (连接失败)
-└── TimeoutError - 超时错误 (操作超时)`}
- </pre>
- </div>
+ <MermaidDiagram chart={`graph TD
+ CLIError["CLIError<br/>基类"]
+ APIError["APIError<br/>API 调用错误<br/>状态码、响应"]
+ AuthError["AuthenticationError<br/>认证错误<br/>登录失败"]
+ ToolError["ToolExecutionError<br/>工具执行错误<br/>Shell、文件操作"]
+ ConfigError["ConfigurationError<br/>配置错误<br/>无效配置"]
+ NetworkError["NetworkError<br/>网络错误<br/>连接失败"]
+ TimeoutError["TimeoutError<br/>超时错误<br/>操作超时"]
+
+ CLIError --> APIError
+ CLIError --> AuthError
+ CLIError --> ToolError
+ CLIError --> ConfigError
+ CLIError --> NetworkError
+ CLIError --> TimeoutError
+
+ style CLIError fill:${getThemeColor("--mermaid-info-fill", "#dbeafe")},color:${getThemeColor("--color-text", "#1c1917")}
+ style APIError fill:${getThemeColor("--mermaid-danger-fill", "#fee2e2")},color:${getThemeColor("--color-text", "#1c1917")}
+ style AuthError fill:${getThemeColor("--mermaid-warning-fill", "#fef3c7")},color:${getThemeColor("--color-text", "#1c1917")}
+ style ToolError fill:${getThemeColor("--mermaid-danger-fill", "#fee2e2")},color:${getThemeColor("--color-text", "#1c1917")}
+ style ConfigError fill:${getThemeColor("--mermaid-warning-fill", "#fef3c7")},color:${getThemeColor("--color-text", "#1c1917")}
+ style NetworkError fill:${getThemeColor("--mermaid-danger-fill", "#fee2e2")},color:${getThemeColor("--color-text", "#1c1917")}
+ style TimeoutError fill:${getThemeColor("--mermaid-warning-fill", "#fef3c7")},color:${getThemeColor("--color-text", "#1c1917")}
+`} title="错误类型层级" />
  </section>
 
  {/* 错误分类器 */}
@@ -931,62 +943,51 @@ function attemptJSONFix(
  {/* 架构图 */}
  <section>
  <h3 className="text-xl font-semibold text-heading mb-4">错误处理架构</h3>
- <div className="bg-surface rounded-lg p-6">
- <pre className="text-sm text-body overflow-x-auto">
-{`┌──────────────────────────────────────────────────────────────────┐
-│ Error Sources │
-│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
-│ │ API │ │ Tool │ │ Network │ │ UI │ │
-│ │ Calls │ │ Execute │ │ Request │ │ Render │ │
-│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
-│ │ │ │ │ │
-└───────┼────────────┼────────────┼────────────┼───────────────────┘
- │ │ │ │
- └────────────┴────────────┴────────────┘
- │
- ▼
-┌──────────────────────────────────────────────────────────────────┐
-│ Error Capture Layer │
-│ ┌───────────────────┐ ┌───────────────────┐ │
-│ │ Try-Catch │ │ Error Boundary │ │
-│ │ (Sync/Async) │ │ (React UI) │ │
-│ └─────────┬─────────┘ └─────────┬─────────┘ │
-│ │ │ │
-│ └──────────┬───────────┘ │
-│ │ │
-│ ┌────────────────────▼──────────────────────┐ │
-│ │ Global Error Handler │ │
-│ │ unhandledRejection | uncaughtException │ │
-│ └────────────────────┬──────────────────────┘ │
-│ │ │
-└───────────────────────┼──────────────────────────────────────────┘
- │
- ▼
-┌──────────────────────────────────────────────────────────────────┐
-│ Error Classification │
-│ ┌──────────────────────────────────────────────────────────┐ │
-│ │ Error Classifier │ │
-│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
-│ │ │ Category │ │ Severity │ │Recoverable│ │ Action │ │ │
-│ │ │ API │ │ MEDIUM │ │ true │ │ RETRY │ │ │
-│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │
-│ └──────────────────────────────────────────────────────────┘ │
-│ │
-└───────────────────────┬──────────────────────────────────────────┘
- │
- ┌───────────────┴───────────────┐
- │ │
- ▼ ▼
-┌───────────────────┐ ┌───────────────────┐
-│ Recovery Handler │ │ Error Reporter │
-│ ┌───────────────┐ │ │ ┌───────────────┐ │
-│ │ Retry Logic │ │ │ │ User Display │ │
-│ │ Fallback │ │ │ │ File Logging │ │
-│ │ State Reset │ │ │ │ Telemetry │ │
-│ └───────────────┘ │ │ └───────────────┘ │
-└───────────────────┘ └───────────────────┘`}
- </pre>
- </div>
+ <MermaidDiagram chart={`flowchart TD
+ subgraph Sources["Error Sources"]
+  API["API Calls"]
+  Tool["Tool Execute"]
+  Network["Network Request"]
+  UI["UI Render"]
+ end
+
+ subgraph Capture["Error Capture Layer"]
+  TryCatch["Try-Catch<br/>Sync/Async"]
+  ErrorBoundary["Error Boundary<br/>React UI"]
+  TryCatch --> GlobalHandler
+  ErrorBoundary --> GlobalHandler
+  GlobalHandler["Global Error Handler<br/>unhandledRejection | uncaughtException"]
+ end
+
+ subgraph Classification["Error Classification"]
+  Classifier["Error Classifier"]
+  Category["Category: API"]
+  Severity["Severity: MEDIUM"]
+  Recoverable["Recoverable: true"]
+  Action["Action: RETRY"]
+  Classifier --> Category
+  Classifier --> Severity
+  Classifier --> Recoverable
+  Classifier --> Action
+ end
+
+ Recovery["Recovery Handler<br/>Retry Logic<br/>Fallback<br/>State Reset"]
+ Reporter["Error Reporter<br/>User Display<br/>File Logging<br/>Telemetry"]
+
+ API --> Capture
+ Tool --> Capture
+ Network --> Capture
+ UI --> Capture
+ GlobalHandler --> Classification
+ Classifier --> Recovery
+ Classifier --> Reporter
+
+ style Sources fill:${getThemeColor("--mermaid-danger-fill", "#fee2e2")},color:${getThemeColor("--color-text", "#1c1917")}
+ style Capture fill:${getThemeColor("--mermaid-warning-fill", "#fef3c7")},color:${getThemeColor("--color-text", "#1c1917")}
+ style Classification fill:${getThemeColor("--mermaid-info-fill", "#dbeafe")},color:${getThemeColor("--color-text", "#1c1917")}
+ style Recovery fill:${getThemeColor("--mermaid-success-fill", "#dcfce7")},color:${getThemeColor("--color-text", "#1c1917")}
+ style Reporter fill:${getThemeColor("--mermaid-purple-fill", "#ede9fe")},color:${getThemeColor("--color-text", "#1c1917")}
+`} title="错误处理架构" />
  </section>
 
  {/* 失败场景速查表 */}