Menu
ClawdBot control panel UI requirements and architecture
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | clawdbot-ui-development |
| description | ClawdBot control panel UI requirements and architecture |
Complete guide for building the ClawdBot Control Panel - a PyQt6 desktop app for managing ClawdBot gateway, plugins, and settings.
clawdbot-ui/
├── pyproject.toml
├── main.py # Entry point
├── src/
│ ├── app.py # Application setup
│ ├── ui/
│ │ ├── window.py # Main window (all pages in one file)
│ │ ├── terminal.py # Log viewer widget
│ │ ├── command_dialog.py # Modal command runner
│ │ └── styles.py # Dark theme CSS
│ ├── core/
│ │ ├── process.py # Background process runner
│ │ └── version.py # Version checking (GitHub API)
│ └── utils/
│ └── platform.py # Platform detection
└── .agent/skills/ # 9 skills
4 Pages (tabs in sidebar):
Sidebar Features:
Main landing page for ClawdBot - manages gateway lifecycle and displays real-time logs.
Service Status Indicator
Control Buttons (all 110px width)
http://127.0.0.1:18789 (visible when running)clawdbot dashboard, opens in browser (visible when running)Install ClawdBot (green button)
Update Available
Uninstall (red outline button)
clawdbot uninstall --all --yes━━━━━━━) after each command for clarityKey Methods:
_on_start() # Start gateway
_on_stop() # Stop gateway
_on_open_gateway() # Open http://127.0.0.1:18789
_on_open_ui() # Get token, open dashboard
_on_install() # Install ClawdBot
_on_update() # Update ClawdBot
_copy_logs() # Copy terminal to clipboard
Plugin and skills manager for ClawdBot.
Installation Status (auto-detected)
Action Buttons (fixed widths)
[Install] (green) → npm install -g clawdhub undici[Update] (white) → npm update -g clawdhub undici[Uninstall] (red) → npm uninstall -g clawdhubSkill Count Display: "X skills installed"
{user_home}/clawd/skills/Open Skills Folder Button (140px)
C:\Users\{username}\clawd\skills\ (Windows)Input Field
spotify or self-improving-agentclawdhub installExample Skills:
spotify
youtube
self-improving-agent
Key Methods:
_on_install_clawdhub() # Install ClawdHub
_on_update_clawdhub() # Update ClawdHub
_on_uninstall_clawdhub() # Remove ClawdHub
_check_clawdhub() # Detect install status
_on_run_clawdhub_cmd() # Install skill (auto-prepends clawdhub install)
_on_open_skills_folder() # Open skills folder
Run any command with admin privileges - general-purpose command execution.
Input Field
clawdbot configure or npm --versionAdmin Execution (Windows)
Start-Process -Verb RunAsosascript for admin privilegessudo -SButtons:
Output Features:
$ clawdbot configure✓ Command completed successfully or ✗ Command failed━━━━━━ after each commandKey Methods:
_on_execute_terminal_cmd() # Execute command with admin
_on_terminal_cmd_finished() # Handle completion
_copy_terminal_logs() # Copy output to clipboard
_clear_terminal_logs() # Clear terminal
Configuration and maintenance operations.
Version Information (auto-updated)
Version: v2026.1.24-3
Latest: v2026.1.24-3
Gateway: Running on port 18789
Action Buttons
clawdbot updateclawdbot reset --yesclawdbot uninstall --all --yesAll open in CommandDialog for progress display.
Key Methods:
_on_update() # Update ClawdBot
_on_reset() # Reset workspace/config
_on_uninstall() # Remove ClawdBot
File: src/ui/styles.py
All buttons use fixed widths for consistency:
# actionBtn - White with black text
padding: 6px 14px
font-size: 12px
font-weight: 500
# dangerBtn - Red outline (matches actionBtn size)
background: transparent
color: #f85149
border: 1px solid #f85149
padding: 6px 14px
font-size: 12px
# primaryBtn - Cyan/teal
background: #00bfa5
color: #000000
# successBtn - Green
background: #22c55e
color: #000000
Background: #0a0f1a
Sidebar: #0f1419
Cards: #1a2535
Borders: #2a3545
Text: #ffffff / #b0b8c4 / #6b7280
Success: #22c55e
Error: #ef4444
Warning: #f59e0b
["powershell", "-Command", "clawdbot gateway"]
["clawdbot", "gateway"]
Platform detection via is_windows() utility.
# ✅ Thread-safe
signal.emit(data)
# ❌ NOT thread-safe from worker thread
widget.setText(x)
# Store runner as class variable
self.gateway_runner = ProcessRunner(cmd)
self.gateway_runner.output.connect(self.terminal.log)
self.gateway_runner.start()
def closeEvent(self, event):
if self.gateway_runner:
self.gateway_runner.stop()
self.gateway_runner.wait(3000)
event.accept()
After each command completion:
self.terminal.log("━" * 60)
Makes logs more readable when multiple commands run.
Why window.py is NOT split:
self.terminal, self.version_status, etc.)_create_*_page() methodsWhat IS separate:
terminal.py - Reusable widgetcommand_dialog.py - Reusable modalstyles.py - Centralized stylingsetFixedWidth() for uniform appearancesetVisible() based on state_check_version() after all install/update/uninstall opsComplete GitHub Actions workflow for automated releases with CHANGELOG-based versioning
Robust two-phase process termination pattern for PyQt6 apps with UI feedback and guaranteed cleanup
Build Python/PyQt6 apps into standalone executables using Nuitka
Non-blocking subprocess execution with real-time output streaming
Complete ClawdBot CLI command reference for all operations
Code style rules - clean, minimal, comment-first approach