chore: import upstream snapshot with attribution

docs/user_guide/en/web_ui_guide.md

@@ -0,0 +1,99 @@
+# Frontend Web UI Quick Start Guide
+
+This guide helps users quickly get started with the DevAll Web UI, covering main functional pages and operation workflows.
+
+## 1. System Entry
+
+After starting frontend and backend services, visit `http://localhost:5173` to access the Web UI.
+
+## 2. Main Pages
+
+### 2.1 Home
+
+System homepage providing quick navigation links.
+
+### 2.2 Workflow List
+
+View and manage all available workflow YAML files.
+
+**Features**:
+- Browse workflows in `yaml_instance/` directory
+- Preview YAML configuration content
+- Select workflow to execute or edit
+
+### 2.3 Launch View
+
+The main interface for workflow execution, the most commonly used page.
+
+**Operation Flow**:
+1. **Select workflow**: Choose YAML file from the left panel
+2. **Upload attachments** (optional): Click upload button to add files (CSV data, images, etc.)
+3. **Enter task prompt**: Input instructions in the text box to guide workflow execution
+4. **Click Launch**: Start workflow execution
+
+**During Execution**:
+- **Nodes View**: Observe node status changes (pending → running → success/failed)
+- **Output Panel**: View real-time execution logs, node output context, and generated artifacts (all share the same panel)
+
+**Human Input**:
+- When execution reaches a `human` node, the interface displays an input prompt
+- Fill in text content or upload attachments, then submit to continue execution
+
+### 2.4 Workflow Workbench
+
+Visual workflow editor.
+
+**Features**:
+- Drag-and-drop node editing
+- Node configuration panel
+- Edge connections and condition settings
+- Export to YAML file
+
+### 2.5 Tutorial
+
+Built-in tutorial to help new users understand system features.
+
+## 3. Common Operations
+
+### 3.1 Running a Workflow
+
+1. Go to **Launch View**
+2. Select workflow from the left panel
+3. Enter Task Prompt
+4. Click **Launch** button
+5. Monitor execution progress and wait for completion
+
+### 3.2 Downloading Results
+
+After execution completes:
+1. Click the **Download** button on the right panel
+2. Download the complete Session archive (includes context.json, attachments, logs, etc.)
+
+### 3.3 Human Review Node Interaction
+
+When workflow contains `human` nodes:
+1. Execution pauses and displays prompt message
+2. Read context content
+3. Enter review comments or action instructions
+4. Click submit to continue execution
+
+## 4. Keyboard Shortcuts
+
+| Shortcut | Function |
+|----------|----------|
+| `Ctrl/Cmd + Enter` | Submit input |
+| `Esc` | Close popup/panel |
+
+## 5. Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| Page won't load | Confirm frontend `npm run dev` is running |
+| Cannot connect to backend | Confirm backend `uv run python server_main.py` is running |
+| Empty workflow list | Check `yaml_instance/` directory for YAML files |
+| Execution unresponsive | Check browser DevTools Network/Console logs |
+| WebSocket disconnected | Refresh page to re-establish connection |
+
+## 6. Related Documentation
+
+- [Workflow Authoring](workflow_authoring.md) - YAML writing guide