ome-cockpit/docs/DESIGN.md

Design

1. Product intent

OME Cockpit is a mission-control surface, not a generic admin table. The first viewport must read as one composition: brand + live fleet fabric + actionable chrome.

Primary users: ATC admins who need to see, triage, connect, and handoff quickly during demos and live ops.

---

2. Visual language

Brand

• Dell mark (dell.png) is a first-class signal in the top bar and modal headers
• Brand click returns to cockpit home (/), never external dell.com

Palette (CSS variables in styles.css)

Token	Role
Dell blue / bright	Primary actions, brand accents
Cyan	Live/connected signals, KPI values
Amber	Warning / offline emphasis
Red	Critical
Deep navy panels	Rails, drawers, modals over dark stage

Typography

• IBM Plex Sans — UI chrome, headings
• IBM Plex Mono — IPs, KPIs, telemetry, terminal-adjacent metadata

Motion

Intentional, not decorative noise:

1. Link pulse packets on connected OME edges
2. Node lerp when layouts/filters change
3. Notification cards slide in for new devices

Pulse can be disabled (Animate link pulse) for calm viewing.

---

3. Spatial layout

┌──────────────────────────────────────────────────────────────┐
│ TOPBAR: brand | KPI strip | Reset / OME / Ops / Chat         │
├──────────┬───────────────────────────────┬───────────────────┤
│ LEFT     │ STAGE                         │ RIGHT             │
│ RAIL     │ ctx-bar                       │ INSPECTOR         │
│ viz      │ canvas topology               │                   │
│ filters  │ live feed (dockable)          │                   │
│ color    │ legend / hints                │                   │
│ gpu      │                               │                   │
│ alerts   │                               │                   │
│ nets…    │                               │                   │
├──────────┴───────────────────────────────┴───────────────────┤
│ TICKER: OME · pulse · watts · connected · alerts · visible   │
└──────────────────────────────────────────────────────────────┘

Drawers (chat, ops, AI iframe) slide from the right over a scrim. Modals center for connect / SSH / triage / KPI context / tickets.

---

4. Interaction model

Everything clickable

Surface	Click behavior
KPI tiles	Open Fleet context popup (list + detail + actions)
Topology node	Inspector; double-click → Quick Connect
Alerts / feed items	Triage modal / focus device
Ticker chips	Focus modes / triage
SSH actions	In-app terminal login (no hardcoded root@)

Filters (include semantics)

• Servers / iDRACs are include toggles
• Both off ⇒ empty map with on-canvas guidance (never silently show all)
• Reset filters restores defaults (Servers on, pulse on)
• Reset view re-layouts and fits camera to visible nodes

Inspector inventory

Button Load full inventory + app landscape fetches OME inventory types and renders:

• OS, firmware landscape, software/components, management agents, licenses
• Hardware sections (CPU, memory, disks, RAID, NIC, PSU, FRU, location, health, …)

Inventory is cached per device and survives soft fleet refreshes (softRefreshInspector).

---

5. Topology design

Layouts

Mode	Idea
Orbit	Hub + concentric subnet rings
Galaxy	Spiral arms per subnet
Clusters	Subnet islands around OME
Lanes	Horizontal subnet highways
Helix	Depth coil sorted by connectivity/power

Color modes

Status · Power (W) · Connection · Model · Subnet

Camera

Pan (drag), zoom (wheel), fit (Reset view / auto-fit on filter & layout changes).

---

6. Modals & drawers (design contracts)

KPI Fleet context

• Summary pills (counts, watts, subnets)
• Search + sort
• Left list / right detail
• Actions: Focus, SSH, Quick Connect, Inventory, Chat, iDRAC Web
• Apply / clear map filter

SSH terminal

• Login form first (host prefilled from fleet IP, username/password user-owned)
• Then xterm session
• Host must be in current OME fleet allowlist

Ops desk

• Acting-as identity (Jody / Laurens)
• Ticket list filters, accept/assign/status/notes/delete

Notifications

New/removed server or iDRAC → toast + stacked notify cards (click focuses device).

---

7. Accessibility & ops UX notes

• Modals use aria-hidden and Escape-to-close
• Scrim closes the active overlay mode (kpi, ssh, connect, drawers, …)
• Orange accent is reserved for SSH / iDRAC connection affordances (.conn-link), not general chrome
• Index served with Cache-Control: no-store to reduce stale-UI issues after deploys

---

8. Non-goals (design)

• Not a full CMDB or change-management suite
• Not a replacement for the OME HTML console (linked out)
• Not multi-region HA UI (single lab instance)