# MLA-V3 Web UI User Guide

> MLA-V3 Web UI provides an intuitive graphical interface for interacting with Agents and managing task files.

- Skill: `tools-only/mla-v3-web-ui-user-guide` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/mla-v3-web-ui-user-guide`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/mla-v3-web-ui-user-guide/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-29
- Page: https://skillmd.com/skills/tools-only/mla-v3-web-ui-user-guide

---

# MLA-V3 Web UI User Guide

## Overview

MLA-V3 Web UI provides an intuitive graphical interface for interacting with Agents and managing task files.

## Interface Layout

The interface is divided into two main areas:

### Left Panel: Chat Area
- **Conversation Interface**: Real-time interaction with Agents
- **Message Stream**: Displays Agent responses, tool calls, and task progress
- **Input Box**: Enter task instructions and replies

### Right Panel: File Browser Area
- **File Browsing**: View all files in the current workspace
- **File Upload**: Upload files to the current workspace
- **File Download**: Download files from the workspace
- **Real-time Updates**: Files created or modified by Agents are displayed in real-time

## Usage Workflow

### 1. Create/Select Task

1. Enter a **Task ID** in the top input box
2. Click the **Confirm** button
3. The system will automatically create or switch to the corresponding workspace

### 2. Interact with Agent

1. Enter task instructions in the bottom input box
2. Press **Enter** or click **Send** to send the message
3. The Agent will start executing the task, displaying progress and results in real-time
4. View files generated by the Agent in the right file browser panel

### 3. Human-in-Loop Interaction

When the Agent calls the `human_in_loop` tool:

1. **The chat box will flash red**, indicating that your input is required
2. Enter your reply in the input box
3. Click **Send** to submit your reply
4. The Agent will continue executing the task based on your response

> 💡 **Tip**: During HIL interaction, you can view files in the right file browser to better understand the task progress and make informed decisions.

### 4. Copy Task

After completing a task, if you need to save a copy of the current task:

1. Click the **Copy Task** button
2. Enter a new Task ID
3. The system will copy all files from the current workspace to the new task

### 5. Clear Task

If you need to delete a task and all its data:

1. Click the **Clear Task** button
2. The system will delete:
   - All files in the workspace directory
   - Conversation files in the home directory

> ⚠️ **Warning**: The clear operation is irreversible. Please proceed with caution.

## Video Demonstration

<video width="100%" controls>
  <source src="web_intro.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>

## Notes

- Each Task ID corresponds to an independent workspace
- Chat history is automatically saved and can be restored after page refresh
- The file browser synchronizes file changes in the workspace in real-time
- Supports multi-task switching by changing the Task ID and clicking Confirm