Orion UI

The admin dashboard for the Orion rules engine.

Manage rules, connectors, channels, and invocations from a single interface. Visualize rule workflows, inspect audit trails, and monitor engine health — no CLI required.

---

Quick Start

1. Start the Orion backend (if not already running):

brew install GoPlasmatic/tap/orion   # or: curl installer, cargo install
orion-server

2. Install and run the UI:

npm install
npm run dev

3. Open the dashboard:

Visit http://localhost:5173 — the dev server proxies all API requests to the Orion backend automatically.

By default the backend is expected at http://localhost:8080. Override with:

ORION_URL=http://your-backend:8080 npm run dev

---

Features

Feature	Description
Dashboard	Engine status, health checks, active rule counts, and uptime at a glance
Rule Workflows	Visual DAG of task pipelines with condition nodes, powered by React Flow
Invocations	Paginated, sortable job list with status badges and computed durations
Audit Trails	Drill into any invocation to see a step-by-step timeline of changes
Connectors	Browse and inspect connector configurations
Channels	Channel overview with associated rules
Data Processing	Send test payloads directly from the UI

How It Works

┌──────────────────────────────────────────────────────┐
│                     Orion UI                         │
│                                                      │
│   ┌───────────┐  ┌────────────┐  ┌──────────────┐   │
│   │ Dashboard │  │   Rules    │  │ Invocations  │   │
│   │  Health   │  │  Workflow  │  │ Audit Trails │   │
│   └─────┬─────┘  └─────┬──────┘  └──────┬───────┘   │
│         │              │                │            │
│         └──────────┬───┘────────────────┘            │
│                    │                                 │
│              TanStack Query                          │
│              (cache + fetch)                         │
│                    │                                 │
└────────────────────┼─────────────────────────────────┘
                     │  /api/v1/*
                     ▼
            ┌────────────────┐
            │  Orion Server  │
            │  (Rust, :8080) │
            └────────────────┘

Scripts

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

Project Structure

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)
│   └── rules/      # Rule-specific components (workflow graph, nodes)
└── lib/            # Utilities (cn, formatDate, truncate)

Pages

Route	Description
/	Dashboard — engine status, health, rule counts
/invocations	Job list with sortable columns and pagination
/invocations/:id	Job detail with audit trail timeline
/channels	Channel overview
/connectors	Connector list
/connectors/:id	Connector detail and configuration
/data	Data processing interface

Built With

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
React Flow	Rule workflow DAG visualization
Lucide React	Icons
CVA	Type-safe component variants

Contributing

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             # Lint

License

Apache-2.0 — see LICENSE for details.