🎛️ Control UI

Control UI là giao diện tương tác nâng cao của OpenClaw, cho phép bạn:

• Chat real-time với AI Agent
• Xem tool execution live
• Kiểm soát và approve actions
• Quản lý files và workspace

Truy cập Control UI

openclaw dashboard

Sau đó navigate đến tab Control hoặc truy cập:

http://127.0.0.1:18789/control

---

Giao diện

Layout

┌─────────────────────────────────────────────────────────┐
│ 🎛️ Control UI                          [Settings] [?]  │
├─────────────────────────────────────────────────────────┤
│ ┌───────────────────────┐  ┌──────────────────────────┐ │
│ │                       │  │ 📁 Workspace             │ │
│ │    💬 Chat Panel      │  │ ├── file1.txt           │ │
│ │                       │  │ ├── folder/             │ │
│ │ You: Hello!           │  │ │   └── file2.py        │ │
│ │                       │  │ └── notes.md            │ │
│ │ Bot: Hi! How can I    │  │                         │ │
│ │ help you today?       │  │ 🛠️ Tools                │ │
│ │                       │  │ ├── read_file ✅        │ │
│ │ [Tool: read_file]     │  │ ├── write_file ⚠️      │ │
│ │ Reading config.json...│  │ └── exec ❌             │ │
│ │                       │  │                         │ │
│ │ ────────────────────  │  │ 📊 Status               │ │
│ │ [📎] [🖼️] [💻 Type...] │  │ Tokens: 1,234          │ │
│ └───────────────────────┘  │ Cost: $0.05            │ │
│                            └──────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

---

Tính năng

1. 💬 Real-time Chat

Chat trực tiếp với AI Agent:

• Streaming responses
• Markdown rendering
• Code syntax highlighting
• File/image attachments

2. 🛠️ Tool Execution Viewer

Xem AI thực thi tools:

[Tool: read_file]
📄 Reading: ~/project/config.json
✅ Success (234 bytes)

[Tool: write_file]  
📄 Writing: ~/project/output.txt
⚠️ Requires approval [Approve] [Deny]

[Tool: exec]
🚫 Blocked by sandbox policy

3. ✅ Action Approvals

Khi AI yêu cầu thực hiện hành động nguy hiểm:

┌─────────────────────────────────────┐
│ ⚠️ Action Requires Approval         │
├─────────────────────────────────────┤
│ Tool: write_file                    │
│ Path: ~/important/data.txt          │
│ Content: [Preview...]               │
│                                     │
│ [✅ Approve] [❌ Deny] [🔍 Details]  │
└─────────────────────────────────────┘

4. 📁 Workspace Browser

Browse và quản lý files trong workspace:

• View file contents
• Download files
• Upload files
• Create folders

5. 📊 Usage Stats

Real-time monitoring:

• Token count
• Estimated cost
• Response time
• Tool usage

---

Keyboard Shortcuts

Shortcut	Action
Ctrl+Enter	Send message
Esc	Cancel current action
Ctrl+K	Focus search/command
Ctrl+/	Show shortcuts

---

Configuration

Sandbox Modes

Control what AI can do:

{
  "agents": {
    "defaults": {
      "sandbox": {
        "mode": "non-main"
      }
    }
  }
}

Modes:

• off: Full access (dangerous)
• non-main: Sandbox enabled except for main agent
• all: Always sandboxed

Tool Permissions

{
  "routing": {
    "agents": {
      "main": {
        "tools": {
          "allowed": ["read_file", "write_file"],
          "denied": ["exec"]
        }
      }
    }
  }
}

---

Mobile Support

Control UI responsive cho mobile:

• Touch-friendly interface
• Swipe gestures
• Mobile keyboard support

Truy cập qua Tailscale hoặc VPN để dùng từ điện thoại.

---

Canvas Integration

Control UI tích hợp với Canvas cho:

• Whiteboard/drawing
• Diagram creation
• Image annotation
• Collaborative editing

# Build Canvas assets
pnpm canvas:a2ui:bundle

---

Troubleshooting

UI không load

# Rebuild UI
openclaw ui:rebuild

# Check console errors
# Open browser DevTools (F12)

WebSocket errors

• Kiểm tra gateway đang chạy
• Kiểm tra CORS settings
• Try hard refresh (Ctrl+Shift+R)

Slow performance

• Reduce conversation history
• Clear old logs
• Check system resources

---

Next Steps

• Tool Configuration
• Sandbox Security
• Multi-Agent Setup

---

Có thắc mắc? Hỏi trong Discord #support