The operations console for the Orion services runtime.
Live dashboards, a system map of your channels and connectors, visual workflow authoring, trace drill-downs, and full channel/workflow/connector management — no CLI required.
|
|
|
|
All screenshots are generated from a live instance by the recording pipeline in the main repo — the ~50-second console walkthrough GIF there shows this UI taking a service from nothing to live without writing code.
The UI ships as a production-ready container image (nginx, multi-arch amd64/arm64):
docker run -p 8081:8080 \
-e ORION_URL=http://host.docker.internal:8080 \
ghcr.io/goplasmatic/orion-ui:latestOpen http://localhost:8081. ORION_URL points at your Orion server; the bundled
nginx reverse-proxies all /api/ requests to it.
With the Orion repo checked out as a sibling directory, one command brings up the server and the UI together:
docker compose --profile prod up # server + production UI on :8081
docker compose --profile dev up # server + Vite dev server with HMR on :5173# 1. Start the Orion backend (if not already running)
brew install GoPlasmatic/tap/orion-server && orion-server
# 2. Install and run the UI
npm install
npm run devVisit http://localhost:5173 — the dev server proxies API requests to the backend
(default http://localhost:8080, override with ORION_URL=http://your-backend:8080 npm run dev).
| Feature | Description |
|---|---|
| Operations | Live KPIs at a glance — requests/min, error rate, average and p95 latency, and a "what needs attention" feed |
| System Map | Topology view: trace any channel through its workflow, downstream channels, and connectors |
| Channels | Full lifecycle management — create, edit, version, activate/archive, bulk import, structured config editor (rate limits with key logic, cache, dedup, CORS, validation logic, tracing, Kafka transport) |
| Workflows | Full authoring — create/edit drafts with a visual JSONLogic condition editor, server-side validation, dry-run testing, import/export, version compare, and canary rollout controls; visual DAG (tree/flow/graph views) |
| Connectors | Create and manage HTTP, database, Kafka, cache, storage, and Elasticsearch connectors — including per-operation gates on db/es (make a connector delete-proof with one toggle) |
| Functions | Searchable reference of every workflow function and its input schema, straight from the server registry |
| Circuit Breakers | Monitor and reset per-connector circuit breakers |
| Traces | Execution history with per-task detail and latency/error analytics |
| Audit Log | Who changed what, when — across every admin operation |
| Data Console | Send test requests to any channel — including REST-routed channels by method and path — with optional profiling |
| Backups | Create and list database backups from Settings (SQLite) |
| Polish | Command palette (⌘K), light/dark themes, density modes, empty states, import wizards |
| Route | Description |
|---|---|
/ |
Operations dashboard — live KPIs and attention feed |
/system-map |
Channel → workflow → connector topology graph |
/channels, /channels/new, /channels/:id, /channels/:id/edit |
Channel list, creation, detail, editing |
/workflows, /workflows/new, /workflows/:id, /workflows/:id/edit |
Workflow list, authoring, visual DAG detail with dry-run and rollout |
/functions |
Workflow function reference (input schemas) |
/connectors, /connectors/new, /connectors/:id, /connectors/:id/edit |
Connector management |
/circuit-breakers |
Circuit breaker status and reset |
/traces, /traces/:id |
Execution traces and per-task drill-down |
/audit |
Audit log |
/console |
Data console for test requests (channel or REST method + path) |
/settings |
Engine reload, backups, and API docs |
┌────────────────────────────────────────────────────────┐
│ Orion UI │
│ │
│ ┌────────────┐ ┌────────────┐ ┌─────────────────┐ │
│ │ Operations │ │ System Map │ │ Channels / │ │
│ │ Dashboards │ │ Topology │ │ Workflows / │ │
│ │ & Traces │ │ Graph │ │ Connectors CRUD │ │
│ └──────┬─────┘ └─────┬──────┘ └────────┬────────┘ │
│ └──────────────┼──────────────────┘ │
│ TanStack Query │
│ (cache + fetch) │
└────────────────────────┼───────────────────────────────┘
│ /api/v1/*
▼
┌────────────────┐
│ Orion Server │
│ (Rust, :8080) │
└────────────────┘
In production the container serves the built SPA with nginx and reverse-proxies
/api/, health, and metrics endpoints to the Orion server (ORION_URL).
| Command | Description |
|---|---|
npm run dev |
Start dev server with HMR |
npm run build |
Type-check with tsc then bundle |
npm run lint |
Run ESLint |
npm run preview |
Serve the production build locally |
src/
├── api/ # Typed fetch client and per-domain endpoint modules
├── hooks/ # TanStack Query wrappers (one file per domain)
├── pages/ # Route-level page components
├── components/
│ ├── ui/ # Reusable primitives (Button, Card, Badge, Table, …)
│ ├── layout/ # App shell (sidebar, header, command palette)
│ ├── graph/ # Topology and relationship graphs
│ └── traces/ # Trace analytics and detail views
└── lib/ # Utilities, theme/density providers, topology builders
| Library | Purpose |
|---|---|
| React 19 | UI framework |
| React Router 7 | Client-side routing |
| TanStack Query | Server state, caching, and mutations |
| TanStack Table | Headless data tables with sorting and pagination |
| Tailwind CSS v4 | Utility-first styling with CSS variable theming |
| @goplasmatic/dataflow-ui | Workflow DAG visualization (tree/flow/graph) |
| @goplasmatic/datalogic-ui | JSONLogic condition editor |
| Recharts | Trace analytics charts |
| Lucide React | Icons |
- Orion — the services runtime this console operates
- Orion CLI — terminal + MCP-server companion
- Orion Documentation — concepts, API reference, tutorials
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
npm install # Install dependencies
npm run dev # Development server
npm run build # Type-check and build
npm run lint # LintApache-2.0 — see LICENSE for details.