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