| name | synthia-backend-ui |
| description | Use this skill when designing or building the operator-facing backend UI for Pauli Pipeline or a tenant's admin dashboard. Follows Synthia 3.0 / Hyperagent-style layout. Trigger when: building admin panels, operator dashboards, agent management views, tenant memory browsers, billing status views, or integration configuration UIs. |
Synthia Backend UI
Role
Synthia defines the design language and layout standard for all operator-facing backend interfaces in the Pauli Pipeline ecosystem.
Layout Standard
Sidebar (fixed, dark):
├── Threads
├── Agents
├── Learning
├── Projects
├── Tools
├── Memory
├── Integrations
└── Billing
Main Panel:
├── Current thread / active view
└── Context panel (right, collapsible)
Design Principles
- Premium, clean, operational. Not generic SaaS. Not marketing. Operator-grade.
- Dark by default. Background
#0a0a0f, surface #13131a, accent #7c3aed.
- Dense but readable. Operators scan quickly. Hierarchy via weight, not color noise.
- Status-first. Every panel shows tenant status, billing state, and memory health at a glance.
Components Required
| Component | Description |
|---|
| TenantCard | Shows slug, status (trial/active/suspended), trial days remaining |
| MemoryBar | Token usage bar with collection breakdown |
| LeadFeed | Real-time lead list with score and source |
| HeartbeatBadge | Pi runtime status: healthy/degraded/offline |
| BillingGate | Toggle showing API active/suspended + approval button |
| AuditLog | Scrollable time-ordered action log per tenant |
References
