7555d8443b
- Add Web UI page to navigation in zensical.toml - Use absolute paths for video assets in web-ui.md - Add web-workflow demo video to homepage Quick Demo section
3.1 KiB
icon
| icon |
|---|
| lucide/layout-dashboard |
Web UI
Compose Farm includes a web interface for managing services from your browser. Start it with:
cf web
Then open http://localhost:8000.
Features
Command Palette
Press Ctrl+K (or Cmd+K on macOS) to open the command palette. Use fuzzy search to quickly navigate, trigger actions, or change themes.
Service Actions
Navigate to any service and use the command palette to trigger actions like restart, pull, update, or view logs. Output streams in real-time via WebSocket.
Theme Switching
35 themes available via the command palette. Type theme: to filter, then use arrow keys to preview themes live before selecting.
Full Workflow
Dashboard overview, sidebar filtering, service navigation, terminal streaming, and theme switching - all in one flow.
Pages
Dashboard (/)
- Service overview with status indicators
- Host statistics
- Pending operations (migrations, orphaned services)
- Quick actions via command palette
Service Detail (/service/{name})
- Compose file editor (Monaco)
- Environment file editor
- Action buttons: Up, Down, Restart, Update, Pull, Logs
- Container shell access (exec into running containers)
- Terminal output for running commands
Console (/console)
- Full shell access to any host
- File editor for remote files
- Monaco editor with syntax highlighting
Container Shell
Click the Shell button on any running container to exec into it directly from the browser.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Ctrl+K / Cmd+K |
Open command palette |
Ctrl+S / Cmd+S |
Save editors |
Escape |
Close command palette |
Arrow keys |
Navigate command list |
Enter |
Execute selected command |
Starting the Server
# Default: http://0.0.0.0:8000
cf web
# Custom port
cf web --port 3000
# Development mode with auto-reload
cf web --reload
# Bind to specific interface
cf web --host 127.0.0.1
Requirements
The web UI requires additional dependencies:
# If installed via pip
pip install compose-farm[web]
# If installed via uv
uv tool install compose-farm --with web
Architecture
The web UI uses:
- FastAPI - Backend API and WebSocket handling
- HTMX - Dynamic page updates without full reloads
- DaisyUI + Tailwind - Theming and styling
- Monaco Editor - Code editing for compose/env files
- xterm.js - Terminal emulation for logs and shell access