User Interface
The dxflow user interface provides a comprehensive web-based platform for managing workflows, data, and system resources through an intuitive and responsive design.
http://localhost or your server's IP address to access the full-featured web interface.Prerequisites
To access the user interface, ensure the dxflow engine is installed and running with the console served. The --console flag serves the web console and auto-enables HTTP:
dxflow boot up --console
Engine successfully booted (use 'CTRL+C' to stop) [~/.dxflow/unix.sock] [0.0.0.0:80] [console]Interface overview
The dxflow interface is organized into three explorer sections — Workflows, Artifacts, and Shells — plus an Agent panel, each providing specialized functionality:
Workflows
Workflows - Deploy and manage containerized applications
- Docker Compose integration
- Real-time monitoring and logging
- Pipeline creation and management
Artifacts
Artifacts - File handling system
- Upload/download support
- New Artifact / New directory actions
- Archive (zip/unzip) and sharing
Getting started
Step 1: Start the engine
Launch your dxflow engine with the web console served:
dxflow boot up --console
Step 2: Access the interface
Open your web browser and navigate to:
- Local access:
http://localhost - Remote access:
http://<your-server-ip>
Step 3: Authenticate
Pick a session duration — 1 hour or 24 hours — and sign in with your private key (.pem or .key). The key stays on your device, so the next sign-in is a single click, and Sign out & forget key clears it. The menu bar shows when the session expires; once it does, the sign-in dialog returns and issues a fresh session from the saved key.
Access control
- Key-based authentication: sign in with an RSA key pair; multiple authorized keys can be registered on one engine
- Per-key permissions: grant any of
SHELL,ARTIFACT,RUNTIME,WORKFLOW,PROXY,BRIDGE - Read-only mode: restrict a key to non-mutating operations
- Master permission: full administrative access, including key management and engine restart
Navigation guide
Main navigation
The interface is built around a top menu bar, a collapsible explorer sidebar, a tabbed pane workspace, a right-hand agent panel, and a status bar along the bottom:
Three dropdown menus across the top of the window:
- dxflow — Engine Monitor, Engine License, and a Documentation link
- View — switch between Light/Dark theme and set the Interface Scale
- Resources — New workflow, New Artifact, and New shell
The right side of the bar shows when your session expires, with a button to sign out.
A left sidebar with three collapsible sections — Workflows, Artifacts, and Shells. The expanded/collapsed state of each section persists across reloads (at least one section stays open). Toggle the whole sidebar from the header.
The workspace opens on a Welcome tab with the engine's guide. Workflow diagrams and artifacts open as tabs in the main pane; workflow logs and shells open in the secondary pane, which can be expanded to fullscreen. When tabs overflow the toolbar width they collapse into a "more" dropdown that lists the hidden tabs, and an empty main pane offers shortcuts into the three explorer sections.
A right-hand panel holding your agent sessions and the conversation with the one you have open. Toggle it from the footer.
The footer carries the host name with a latency dot, live CPU and memory percentages, the current background activity, and toggles for the secondary pane and the agent panel.
Quick actions
Engine Monitor
Monitor System Health (dxflow → Engine Monitor)
- Host information and engine status
- CPU, Memory, Disk, and Network stat cards with sparklines and peak values
- The Network card headlines the download rate and labels the upload rate below it
Create Workflow
Run a Workflow (Resources → New workflow)
- Upload a YAML (Docker Compose-style) definition
- Inspect the diagram and live logs
- Start, stop, and remove from the node menu
Manage Artifacts
Handle Files
- Upload and download files
- Organize with directories
- Zip / unzip and edit in the browser
Interface customization
Theme options
The View menu offers a single theme toggle that switches between Light Theme and Dark Theme (the system preference is used as the initial default). The palette is fixed — iris primary, azure secondary, zinc neutral.
Interface scale
The View → Interface Scale submenu sets the overall UI scale, with a check marking the active option. Your choice persists across reloads:
- Small · 100%
- Medium · 125%
- Large · 150%
Keyboard shortcuts
| Shortcut | Where | Action |
|---|---|---|
Enter | Rename field | Commit the new name |
Esc | Rename field | Cancel the rename |
Ctrl / Cmd + S | Artifact editor | Save the file |
Tab | Artifact editor | Insert 4 spaces |
Enter | Agent prompt | Send the message |
Shift + Enter | Agent prompt | Start a new line |
Small screens
Below 768px the console focuses on browsing workflows and artifacts:
- The sidebar covers the window and closes as soon as you open an item
- The Workflows and Artifacts sections stay available, and diagrams and files fill the main pane
- Workflow logs, shells, the agent panel, and the Interface Scale submenu run on wider screens
Browser compatibility
Works in any modern browser with WebSocket and ES6 support — Chrome/Edge 80+, Firefox 75+, Safari 13+, and their mobile equivalents.
Troubleshooting
Interface not loading:
- Verify the dxflow engine is running:
dxflow engine ping - Check firewall settings allow access to the configured port
- Ensure you're accessing the correct IP address and port
Authentication failures:
- Verify your private key exists:
dxflow key list - Check that the key hasn't been corrupted
- Generate a new key if needed:
dxflow key generate
Slow interface response:
- Check system resources and engine health
- Close unnecessary browser tabs and applications
- Clear browser cache and cookies
WebSocket connection problems:
- Verify network stability
- Check proxy/firewall configurations
- Try refreshing the browser page
For interface-related assistance:
- Check browser console for error messages
- Verify engine status:
dxflow engine healthcheck - Review the CLI documentation for alternative access
- Report issues at GitHub