new UI and fix some bugs

Author: Zongwei9888

README.md

@@ -158,6 +158,22 @@
 
 ## 📰 News
 
+🎨 **[2025-02] New Web UI Experience Upgrade!**
+
+- 🔄 **User-in-Loop Interaction**: Support real-time user interaction during workflows - AI asks clarifying questions directly in the chat
+- 💬 **Inline Interaction Design**: Interaction prompts appear naturally within the chat flow for a seamless experience
+- 🚀 **One-Click Launch**: Simply run `deepcode` to start the new UI (cross-platform: Windows/macOS/Linux)
+- 🔧 **Improved Process Management**: Enhanced service start/stop mechanism with automatic port cleanup
+- 📡 **WebSocket Real-time Communication**: Fixed message loss issues, ensuring proper interaction state synchronization
+
+<div align="center">
+  <img src="./assets/NewUI.png" alt="DeepCode New UI" width="85%" style="border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);" />
+  <br/>
+  <sub><em>DeepCode New Web UI - Modern React-based Interface</em></sub>
+</div>
+
+---
+
 🎉 **[2025-10] 🎉 [2025-10-28] DeepCode Achieves SOTA on PaperBench!**
 
 DeepCode sets new benchmarks on OpenAI's PaperBench Code-Dev across all categories:
@@ -525,7 +541,39 @@ Implementation Generation • Testing • Documentation
 
 ## 🚀 Quick Start
 
+### 📋 **Prerequisites**
+
+Before installing DeepCode, ensure you have the following:
+
+| Requirement | Version | Purpose |
+|-------------|---------|---------|
+| **Python** | 3.9+ | Core runtime |
+| **Node.js** | 18+ | New UI frontend |
+| **npm** | 8+ | Package management |
 
+```bash
+# Check your versions
+python --version   # Should be 3.9+
+node --version     # Should be 18+
+npm --version      # Should be 8+
+```
+
+<details>
+<summary><strong>📥 Install Node.js (if not installed)</strong></summary>
+
+```bash
+# macOS (using Homebrew)
+brew install node
+
+# Ubuntu/Debian
+curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
+sudo apt-get install -y nodejs
+
+# Windows
+# Download from https://nodejs.org/
+```
+
+</details>
 
 ### 📦 **Step 1: Installation**
 
@@ -714,28 +762,64 @@ bocha-mcp:
 
 ### ⚡ **Step 2: Launch Application**
 
-#### 🚀 **Using Installed Package (Recommended)**
+#### 🚀 **Using `deepcode` Command (Recommended)**
 
 ```bash
-# 🌐 Launch web interface directly
+# 🌐 Launch the new React-based web interface
 deepcode
 
-# The application will automatically start at http://localhost:8501
+# Frontend: http://localhost:5173
+# Backend API: http://localhost:8000
+# Press Ctrl+C to stop all services
+```
+<div align="center">
+  <img src="https://img.shields.io/badge/Frontend-localhost:5173-00d4ff?style=flat-square&logo=react&logoColor=white" alt="Frontend" />
+  <img src="https://img.shields.io/badge/Backend-localhost:8000-4ecdc4?style=flat-square&logo=fastapi&logoColor=white" alt="Backend" />
+</div>
+
+> **📦 Auto Install**: On first run, dependencies are automatically installed (`pip install` for backend, `npm install` for frontend)
+
+> **✨ Features**: User-in-Loop interaction, real-time progress tracking, inline chat interaction
+
+#### 🛠️ **Alternative Launch Methods**
+
+<table>
+<tr>
+<td><strong>🍎 macOS / 🐧 Linux</strong></td>
+<td><strong>🪟 Windows</strong></td>
+</tr>
+<tr>
+<td>
+
+```bash
+# Using run.sh
+./run.sh
+
+# Or using Python directly
+python deepcode.py
 ```
 
-#### 🛠️ **Using Source Code**
+</td>
+<td>
+
+```cmd
+# Using run.bat
+run.bat
+
+# Or using Python directly
+python deepcode.py
+```
 
-Choose your preferred interface:
+</td>
+</tr>
+</table>
 
-##### 🌐 **Web Interface** (Recommended)
 ```bash
-# Using UV
-uv run streamlit run ui/streamlit_app.py
-# Or using traditional Python
-streamlit run ui/streamlit_app.py
+# Classic Streamlit UI (all platforms)
+deepcode --classic
 ```
 <div align="center">
-  <img src="https://img.shields.io/badge/Access-localhost:8501-00d4ff?style=flat-square&logo=streamlit&logoColor=white" alt="Web Access" />
+  <img src="https://img.shields.io/badge/Classic_UI-localhost:8501-00d4ff?style=flat-square&logo=streamlit&logoColor=white" alt="Classic UI" />
 </div>
 
 ##### 🖥️ **CLI Interface** (Advanced Users)

README_ZH.md

@@ -156,6 +156,22 @@
 
 ## 📰 新闻
 
+🎨 **[2025-02] 全新 Web UI 体验升级！**
+
+- 🔄 **用户交互循环 (User-in-Loop)**: 支持工作流程中的实时用户交互，AI 会在对话中向您提问以澄清需求
+- 💬 **内联交互设计**: 交互问题直接显示在对话框中，体验更自然流畅
+- 🚀 **一键启动**: 运行 `deepcode` 即可启动新版 UI（跨平台支持：Windows/macOS/Linux）
+- 🔧 **优化的进程管理**: 改进了服务启停机制，自动清理端口占用
+- 📡 **WebSocket 实时通信**: 修复了消息丢失问题，确保交互状态正确同步
+
+<div align="center">
+  <img src="./assets/NewUI.png" alt="DeepCode 全新 UI" width="85%" style="border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);" />
+  <br/>
+  <sub><em>DeepCode 全新 Web UI - 基于 React 的现代界面</em></sub>
+</div>
+
+---
+
 🎉 **[2025-10] 🎉 [2025-10-28] DeepCode在PaperBench上达到最先进水平！**
 
 DeepCode在OpenAI的PaperBench Code-Dev所有类别中创造新基准：
@@ -522,7 +538,39 @@ DeepCode利用**模型上下文协议 (MCP)** 标准与各种工具和服务无
 
 ## 🚀 快速开始
 
+### 📋 **前置条件**
+
+在安装 DeepCode 之前，请确保您已安装以下软件：
+
+| 要求 | 版本 | 用途 |
+|------|------|------|
+| **Python** | 3.9+ | 核心运行环境 |
+| **Node.js** | 18+ | 新版 UI 前端 |
+| **npm** | 8+ | 包管理工具 |
 
+```bash
+# 检查您的版本
+python --version   # 应为 3.9+
+node --version     # 应为 18+
+npm --version      # 应为 8+
+```
+
+<details>
+<summary><strong>📥 安装 Node.js（如果未安装）</strong></summary>
+
+```bash
+# macOS (使用 Homebrew)
+brew install node
+
+# Ubuntu/Debian
+curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
+sudo apt-get install -y nodejs
+
+# Windows
+# 从 https://nodejs.org/ 下载安装
+```
+
+</details>
 
 ### 📦 **步骤1: 安装**
 
@@ -711,28 +759,64 @@ bocha-mcp:
 
 ### ⚡ **步骤2: 启动应用程序**
 
-#### 🚀 **使用已安装的包 (推荐)**
+#### 🚀 **使用 `deepcode` 命令 (推荐)**
 
 ```bash
-# 🌐 直接启动Web界面
+# 🌐 启动新版 React 界面
 deepcode
 
-# 应用程序将自动在 http://localhost:8501 启动
+# 前端: http://localhost:5173
+# 后端 API: http://localhost:8000
+# 按 Ctrl+C 停止所有服务
+```
+<div align="center">
+  <img src="https://img.shields.io/badge/前端-localhost:5173-00d4ff?style=flat-square&logo=react&logoColor=white" alt="Frontend" />
+  <img src="https://img.shields.io/badge/后端-localhost:8000-4ecdc4?style=flat-square&logo=fastapi&logoColor=white" alt="Backend" />
+</div>
+
+> **📦 自动安装**: 首次运行时会自动安装依赖（后端 `pip install`，前端 `npm install`）
+
+> **✨ 特性**: 用户交互循环、实时进度跟踪、内联对话交互
+
+#### 🛠️ **其他启动方式**
+
+<table>
+<tr>
+<td><strong>🍎 macOS / 🐧 Linux</strong></td>
+<td><strong>🪟 Windows</strong></td>
+</tr>
+<tr>
+<td>
+
+```bash
+# 使用 run.sh
+./run.sh
+
+# 或直接使用 Python
+python deepcode.py
 ```
 
-#### 🛠️ **使用源码**
+</td>
+<td>
+
+```cmd
+# 使用 run.bat
+run.bat
+
+# 或直接使用 Python
+python deepcode.py
+```
 
-选择您首选的界面:
+</td>
+</tr>
+</table>
 
-##### 🌐 **Web界面** (推荐)
 ```bash
-# 使用UV
-uv run streamlit run ui/streamlit_app.py
-# 或使用传统Python
-streamlit run ui/streamlit_app.py
+# 经典 Streamlit UI (所有平台)
+deepcode --classic
 ```
 <div align="center">
-  <img src="https://img.shields.io/badge/访问-localhost:8501-00d4ff?style=flat-square&logo=streamlit&logoColor=white" alt="Web Access" />
+  <img src="https://img.shields.io/badge/经典_UI-localhost:8501-00d4ff?style=flat-square&logo=streamlit&logoColor=white" alt="Classic UI" />
 </div>
 
 ##### 🖥️ **CLI界面** (高级用户)