Menu
ClawdBot control panel UI requirements and architecture
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| 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