---
name: premium-dashboard-ui-lit
description: Apply InfiniBot's premium glass-morphism dashboard styling, SVG arc-gauge visualizations, and fleet/multi-node grid patterns to existing Lit element views without breaking data wiring.
---
# Premium Dashboard UI (Lit)
## When to use
- User asks to "restyle", "upgrade", "make premium", or "add glass-morphism" to an InfiniBot dashboard view (hardware-analysis, agent-activity, terminals, etc.).
- User wants higher-quality gauge / metric visualizations (concentric arcs, sparklines, animated fills) in a Lit-based UI view.
- User asks for a "Fleet Overview", "all devices at once", or multi-node aggregate mode on an existing single-device view.
- The target file is a single large `LitElement` view under `ui/src/ui/views/*.ts` with existing fetch/SSE wiring.

## How to apply
1. **Read first, restyle only.** Open the full file. Identify the fetch/SSE/state code paths and leave them untouched. Restyling and new render branches are the only changes.
2. **Audit for corruption.** Large Lit files often accumulate duplicated CSS blocks from prior edits (e.g. `card-row { transform: rotate(90deg) }` repeated). Grep for duplicate selectors and remove the older block before adding new styles.
3. **Glass-morphism recipe** (apply to card containers, not page background):
   - `backdrop-filter: blur(24px) saturate(180%);` (and `-webkit-backdrop-filter` mirror)
   - Background: layered linear-gradient at low alpha (`rgba(255,255,255,0.04)` → `rgba(255,255,255,0.01)`).
   - Border: `1px solid rgba(255,255,255,0.08)`.
   - Outer shadow: deep + soft — `0 20px 60px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.05) inset`.
   - Per-metric tint: overlay a faint radial-gradient using the metric's accent color (CPU = cyan, RAM = magenta, GPU = amber, network = green).
4. **SVG arc gauge helpers.** Add two pure functions next to the render methods:
   - `arcPath(cx, cy, r, startDeg, endDeg)` — returns an SVG path `d` string using `Math.cos/sin` on `(deg - 90) * π/180` so 0° is at top; emit `M`, `A` (large-arc-flag = endDeg-startDeg > 180 ? 1 : 0, sweep-flag = 1).
   - `sparklineAreaPath(samples, w, h, min, max)` — returns a closed area path (`M x0,h L … L xn,h Z`) for fill under the line.
   Compose the gauge as: 270° background arc + animated fill arc + glowing tip circle + trailing N-sample average arc + sparkline area + center label.
5. **Fleet/multi-node mode.**
   - Add `@state() fleetMode = false;` and `@state() expandedNodeId: string | null = null;`.
   - Render a toggle button in the existing command bar, gated on `federationRole === "master"` (or the equivalent role check in that view).
   - Use a responsive CSS grid: `grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))` so it collapses 3→2→1.
   - Each fleet card is a compact version of the main card: mini-gauges (~80px arc), one sparkline, status badge, click → expand overlay.
   - Source the per-node data from the same SSE/fetch path; do not add a second wiring layer.
6. **Verify with build, not just types.** Run the project's UI build (`bun run build` or equivalent for `ui/`). A Lit template with a mismatched `</div>` will type-check but render blank.

## Rules
- Never touch fetch/SSE/state-management code when the task is "restyle" or "add view mode" — restyling regressions to data flow are the most common failure here.
- Never add a parallel data path for fleet/multi-node mode; reuse the existing snapshot/stream and aggregate client-side.
- Always grep for duplicate CSS selectors in large view files before appending new styles; corrupt duplicate blocks must be removed in the same edit.
- Always gate fleet/multi-node toggles on the federation role (`master`) — satellite nodes should not see the toggle.
- Always express arc math with 0° at the top of the circle (`(deg - 90) * π/180`); mixing conventions mid-file produces upside-down gauges.
- Never introduce new dependencies for charts — SVG + Lit templates are the house style for these views.
- Always run the actual UI build after large Lit edits; type-check alone misses template structural errors.