docs: 更新文档以反映0.2.0版本新增的Web UI功能

添加Web UI相关文档和截图
更新快速开始指南和命令参考
调整文档结构以支持双模式界面

Author: echoVic

BLADE.md

@@ -9,33 +9,40 @@ always respond in Chinese
 - **项目类型**: CLI 工具（TUI 应用）+ Web UI + VSCode 扩展
 - **主要语言**: TypeScript
 - **运行时**: Node.js >=20.0.0（开发使用 Bun）
-- **UI 框架**: React 18 + Ink（终端 UI）/ React 18 + Vite（Web UI）
+- **UI 框架**: React 19 + Ink（终端 UI）/ React 19 + Vite（Web UI）
 - **状态管理**: Zustand
 - **配置管理**: 支持 JSON 配置和环境变量插值
 - **测试框架**: Vitest
 - **代码质量**: Biome（Lint + Format）
 - **包管理**: pnpm workspace
+- **当前版本**: 0.2.0
 
 ## 核心特性
 
 - 🤖 智能对话，支持上下文理解和多轮对话
-- 🛠️ 内置 18+ 工具（文件读写、代码搜索、Shell 执行、Git 操作等）
+- 🌐 **双模式界面**：CLI 终端 + Web UI，随心切换
+- 🛠️ 内置 20+ 工具（文件读写、代码搜索、Shell 执行、Git 操作等）
 - 🔗 支持 Model Context Protocol (MCP)，可扩展外部工具
 - 💾 会话管理（多会话、继续对话、会话 Fork）
-- 🔒 三级权限系统（allow/ask/deny）、工具白名单、操作确认
+- 🔒 多级权限系统（default/autoEdit/plan/yolo/spec）、工具白名单、操作确认
 - 🎨 现代 UI，支持 Markdown 渲染和语法高亮
-- 🌐 Web UI 支持，可在浏览器中使用
+- 🖥️ Web UI 支持，可在浏览器中使用（0.2.0 新增）
 
 ## 关键命令
 
 ### 开发命令
 ```bash
-pnpm dev              # 并行启动所有包的开发模式
-pnpm dev:cli          # 仅启动 CLI 开发模式
-pnpm dev:web          # 仅启动 Web UI 开发模式
-pnpm build            # 构建所有包
-pnpm build:cli        # 仅构建 CLI
-pnpm build:web        # 仅构建 Web UI
+pnpm dev              # 启动 CLI 开发模式（watch）
+pnpm dev:serve        # 启动 CLI 开发模式 + Web 服务器
+pnpm build            # 构建 CLI
+```
+
+### 运行命令
+```bash
+blade                 # 启动交互式 CLI
+blade web             # 启动 Web UI（自动打开浏览器）
+blade serve           # 启动无头服务器
+blade serve --port 3000 --hostname 0.0.0.0  # 指定端口和主机
 ```
 
 ### 测试命令
@@ -50,9 +57,8 @@ pnpm test:coverage    # 带覆盖率测试
 ### 代码质量
 ```bash
 pnpm lint             # Lint 检查
-pnpm format           # 格式化代码
+pnpm lint:fix         # Lint 并自动修复
 pnpm type-check       # 类型检查
-pnpm preflight        # 全面检查（清理、安装、格式化、Lint、构建、类型检查、测试）
 ```
 
 ## 架构概览
@@ -62,32 +68,31 @@ pnpm preflight        # 全面检查（清理、安装、格式化、Lint、构
 ```
 Blade/
 ├── packages/
-│   ├── cli/            # @blade/cli - CLI 核心工具
+│   ├── cli/            # blade-code - CLI 核心工具（npm 包）
 │   │   ├── src/
 │   │   │   ├── agent/          # Agent 核心（无状态设计）
 │   │   │   ├── tools/          # 工具系统（内置工具、执行管道、注册系统）
+│   │   │   ├── server/         # Web 服务器（Hono）
 │   │   │   ├── mcp/            # MCP 协议支持
 │   │   │   ├── context/        # 上下文管理
 │   │   │   ├── config/         # 配置管理
 │   │   │   ├── ui/             # UI 组件（React + Ink）
 │   │   │   ├── store/          # 状态管理（Zustand）
-│   │   │   ├── services/       # 服务层
-│   │   │   ├── cli/            # CLI 相关
-│   │   │   ├── commands/       # 命令处理
+│   │   │   ├── services/       # 服务层（Chat、Session 等）
+│   │   │   ├── commands/       # CLI 子命令（serve、web、mcp 等）
 │   │   │   ├── prompts/        # 提示词
-│   │   │   ├── utils/          # 工具函数
 │   │   │   ├── slash-commands/ # Slash 命令
+│   │   │   ├── skills/         # Skills 系统
+│   │   │   ├── hooks/          # Hooks 系统
+│   │   │   ├── spec/           # Spec 模式
 │   │   │   └── blade.tsx       # 应用入口
 │   │   └── tests/              # 测试文件
-│   ├── web/            # @blade/web - Web UI 前端
-│   │   └── src/
-│   ├── vscode/         # @blade/vscode - VSCode 扩展
-│   │   └── src/
-│   └── shared/         # @blade/shared - 共享代码
+│   └── vscode/         # blade-vscode - VSCode 扩展
 │       └── src/
-├── docs/               # 文档
-├── pnpm-workspace.yaml # Workspace 配置
-├── tsconfig.base.json  # 共享 TypeScript 配置
+├── docs/               # 用户文档（Docsify）
+├── .blade/             # 项目级 Blade 配置
+│   ├── commands/       # 自定义 Slash 命令
+│   └── skills/         # 自定义 Skills
 └── package.json        # 根 package.json
 ```
 

CLAUDE.md

@@ -6,19 +6,25 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-Blade Code is a modern AI-powered CLI coding assistant built with React + Ink and TypeScript. The project uses **pnpm workspace monorepo** architecture.
+Blade Code is a modern AI-powered coding assistant with CLI + Web UI, built with React + Ink (CLI) and React + Vite (Web), using TypeScript. Current version: **0.2.0**.
 
 ## Quick Commands
 
 ```bash
-pnpm dev              # Start all packages in dev mode
-pnpm dev:cli          # Start CLI dev mode only
-pnpm dev:web          # Start Web UI dev mode only
-pnpm build            # Build all packages
+# Development
+pnpm dev              # Start CLI dev mode (watch)
+pnpm dev:serve        # Start CLI + Web server
+pnpm build            # Build CLI
+
+# Running
+blade                 # Start interactive CLI
+blade web             # Start Web UI (opens browser)
+blade serve           # Start headless server
+
+# Testing & Quality
 pnpm test:all         # Run all tests
 pnpm lint             # Run linter
 pnpm type-check       # TypeScript type checking
-pnpm preflight        # Full check (clean, install, format, lint, build, type-check, test)
 ```
 
 ## Architecture
@@ -28,27 +34,27 @@ pnpm preflight        # Full check (clean, install, format, lint, build, type-ch
 ```
 Blade/
 ├── packages/
-│   ├── cli/            # @blade/cli - CLI core
+│   ├── cli/            # blade-code - CLI core (npm package)
 │   │   └── src/
 │   │       ├── agent/          # Stateless Agent core
 │   │       ├── tools/          # Tool system (builtin, execution, registry)
+│   │       ├── server/         # Web server (Hono)
 │   │       ├── mcp/            # MCP protocol support
 │   │       ├── context/        # Context management
 │   │       ├── config/         # Configuration management
-│   │       ├── ui/             # UI components (React + Ink)
+│   │       ├── ui/             # Terminal UI (React + Ink)
 │   │       ├── store/          # State management (Zustand)
-│   │       ├── services/       # Service layer
-│   │       ├── cli/            # CLI configuration
-│   │       ├── commands/       # Command handlers
+│   │       ├── services/       # Service layer (Chat, Session, etc.)
+│   │       ├── commands/       # CLI subcommands (serve, web, mcp, etc.)
 │   │       ├── prompts/        # Prompt templates
 │   │       ├── slash-commands/ # Slash commands
+│   │       ├── skills/         # Skills system
+│   │       ├── hooks/          # Hooks system
+│   │       ├── spec/           # Spec mode
 │   │       └── blade.tsx       # Entry point
-│   ├── web/            # @blade/web - Web UI
-│   ├── vscode/         # @blade/vscode - VSCode extension
-│   └── shared/         # @blade/shared - Shared utilities
-├── docs/               # Documentation
-├── pnpm-workspace.yaml # Workspace config
-└── tsconfig.base.json  # Shared TypeScript config
+│   └── vscode/         # blade-vscode - VSCode extension
+├── docs/               # User documentation (Docsify)
+└── .blade/             # Project-level config
 ```
 
 ## Key Design Principles

CONTRIBUTING.md

@@ -52,21 +52,29 @@
 
 2. **开发模式**：
    ```bash
-   pnpm dev:cli   # 启动 CLI 开发模式
-   pnpm dev:web   # 启动 Web UI 开发模式
-   pnpm dev       # 并行启动所有包
+   cd packages/cli
+   pnpm dev           # 启动 CLI 开发模式（watch）
+   pnpm dev:serve     # 启动 CLI + Web 服务器
    ```
 
-3. **代码质量检查**：
+3. **测试 Web UI**：
+   ```bash
+   # 构建后启动 Web UI
+   pnpm build
+   blade web          # 启动 Web UI 并打开浏览器
+   blade serve        # 启动无头服务器模式
+   ```
+
+4. **代码质量检查**：
    ```bash
    pnpm lint          # 运行 linting 检查
    pnpm type-check    # TypeScript 类型检查
    pnpm test:all      # 运行测试
    ```
 
-4. **构建验证**：
+5. **构建验证**：
    ```bash
-   pnpm build         # 构建所有包
+   pnpm build         # 构建 CLI
    ```
 
 #### 代码规范
@@ -112,30 +120,30 @@
 ```
 Blade/
 ├── packages/
-│   ├── cli/            # @blade/cli - CLI 核心工具
+│   ├── cli/            # blade-code - CLI 核心工具（npm 包）
 │   │   ├── src/
 │   │   │   ├── agent/          # Agent 核心逻辑
-│   │   │   ├── cli/            # CLI 配置和中间件
-│   │   │   ├── commands/       # CLI 命令实现
+│   │   │   ├── commands/       # CLI 子命令（serve、web、mcp 等）
+│   │   │   ├── server/         # Web 服务器（Hono）
 │   │   │   ├── config/         # 配置管理
 │   │   │   ├── context/        # 上下文管理
-│   │   │   ├── ide/            # IDE 集成
-│   │   │   ├── logging/        # 日志系统
 │   │   │   ├── mcp/            # MCP 协议
 │   │   │   ├── prompts/        # 提示模板
-│   │   │   ├── services/       # 核心服务
+│   │   │   ├── services/       # 核心服务（Chat、Session 等）
 │   │   │   ├── slash-commands/ # 斜杠命令
+│   │   │   ├── skills/         # Skills 系统
+│   │   │   ├── hooks/          # Hooks 系统
+│   │   │   ├── spec/           # Spec 模式
 │   │   │   ├── tools/          # 工具系统
-│   │   │   ├── ui/             # 用户界面
-│   │   │   ├── utils/          # 工具函数
+│   │   │   ├── ui/             # 终端 UI（React + Ink）
+│   │   │   ├── store/          # 状态管理（Zustand）
 │   │   │   └── blade.tsx       # 应用入口
 │   │   └── tests/              # 测试文件
-│   ├── web/            # @blade/web - Web UI 前端
-│   ├── vscode/         # @blade/vscode - VSCode 扩展
-│   └── shared/         # @blade/shared - 共享代码
-├── docs/               # 文档
-├── pnpm-workspace.yaml # Workspace 配置
-├── tsconfig.base.json  # 共享 TypeScript 配置
+│   └── vscode/         # blade-vscode - VSCode 扩展
+├── docs/               # 用户文档（Docsify）
+├── .blade/             # 项目级配置
+│   ├── commands/       # 自定义 Slash 命令
+│   └── skills/         # 自定义 Skills
 └── package.json        # 根 package.json
 ```
 

README.en.md

@@ -2,7 +2,7 @@
 
 # 🗡️ Blade Code
 
-**Next-Generation AI Coding Assistant (CLI)**
+**Next-Generation AI Coding Assistant (CLI + Web UI)**
 
 [![npm version](https://img.shields.io/npm/v/blade-code.svg?style=flat-square)](https://www.npmjs.com/package/blade-code)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)
@@ -15,31 +15,53 @@ English | [简体中文](README.md)
 
 ---
 
+## 📸 Screenshots
+
+<div align="center">
+  <img src="./assets/screenshots/startup.png" alt="Blade Code CLI" width="800" />
+  <p><em>CLI Terminal Interface</em></p>
+</div>
+
+<div align="center">
+  <img src="./assets/screenshots/web.png" alt="Blade Code Web UI" width="800" />
+  <p><em>Web UI Interface (new in 0.2.0)</em></p>
+</div>
+
+---
+
 ## ✨ Key Features
 
 - 🤖 **Smart Chat** - Context-aware, multi-turn collaboration with session continuity
 - 🆓 **Out of the Box** - Built-in free GLM-4.7 model (with chain-of-thought), plus custom models
+- 🌐 **Dual Interface** - CLI terminal + Web UI, switch as you like
 - 🛠️ **Rich Tooling** - 20+ built-in tools: file/search/shell/git/web and more
-- 🌐 **Smart Search** - WebSearch with multi-provider fallback (Exa → DuckDuckGo → SearXNG)
+- 🔍 **Smart Search** - WebSearch with multi-provider fallback (Exa → DuckDuckGo → SearXNG)
 - 🔗 **Extensible** - MCP, plugins, and Skills system
 - 📋 **Structured Workflows** - Spec / Plan / Subagents
 - 🔒 **Secure Control** - Permission modes: default/autoEdit/plan/yolo/spec + allow/deny lists
-- 🎨 **Modern UI** - React + Ink TUI with Markdown and syntax highlighting
+- 🎨 **Modern UI** - React + Ink TUI / React + Vite Web UI
 
 ---
 
 ## 🚀 Quick Start
 
 ```bash
+# Quick try
 npx blade-code
 
+# Global install
 npm install -g blade-code
 # or
 pnpm add -g blade-code
 
+# CLI mode
 blade
 blade "Help me analyze this project"
 blade --print "Write a quicksort"
+
+# Web UI mode (new in 0.2.0)
+blade web                    # Start and open browser
+blade serve --port 3000      # Headless server mode
 ```
 
 > Uses the built-in free model by default; run `blade` to configure your own provider.
@@ -66,11 +88,12 @@ See docs for the full schema.
 
 **Common Commands**
 
-- `blade` start interactive UI
+- `blade` start interactive CLI
+- `blade web` start Web UI (new in 0.2.0)
+- `blade serve` start headless server (new in 0.2.0)
 - `blade mcp` manage MCP servers
 - `blade doctor` environment check
 - `blade update` check for updates
-- `blade install` install a specific version (experimental)
 
 **Common Options**