Pages Hard
Dashboard — Ops command center (live tiles)
A dark, real-time operations command center built with vanilla HTML, CSS and JavaScript. A wall of service status tiles tracks every node with colored health dots, KPI cards stream requests-per-second, p95 latency, error rate and fleet CPU with deltas and sparklines, and a scrolling inline-SVG throughput chart updates each second. An aria-live incident feed captures alerts as services flip to degraded or down, a region heat grid shows global load, and a pause control freezes the whole stream.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--brand: #5b5bf0;
--brand-d: #4646d6;
--brand-700: #3a3ab8;
--brand-50: #eef0ff;
--accent: #00b4a6;
--accent-soft: #d8f5f2;
--ink: #101322;
--ink-2: #3a4060;
--muted: #6c7393;
--bg: #f6f7fb;
--white: #ffffff;
--surface: #ffffff;
--line: rgba(16, 19, 34, 0.1);
--line-2: rgba(16, 19, 34, 0.16);
--ok: #2f9e6f;
--warn: #d98a2b;
--danger: #d4503e;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--sh-1: 0 1px 2px rgba(16, 19, 34, 0.08);
--sh-2: 0 8px 24px rgba(16, 19, 34, 0.08);
/* Dark ops surfaces */
--panel: #11131f;
--panel-2: #171a29;
--panel-3: #1d2133;
--panel-line: rgba(255, 255, 255, 0.08);
--panel-line-2: rgba(255, 255, 255, 0.14);
--panel-ink: #eef0fb;
--panel-ink-2: #b6bbd6;
--panel-muted: #7c83a6;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: "Inter", system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 4px;
}
/* ===== Layout shell ===== */
.app {
display: grid;
grid-template-columns: 248px 1fr;
min-height: 100vh;
background: var(--panel);
}
/* ===== Sidebar ===== */
.sidebar {
background: var(--panel);
border-right: 1px solid var(--panel-line);
display: flex;
flex-direction: column;
padding: 20px 14px;
gap: 18px;
position: sticky;
top: 0;
height: 100vh;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 8px;
}
.brand-mark {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), var(--accent));
color: #fff;
font-size: 18px;
box-shadow: 0 4px 14px rgba(91, 91, 240, 0.45);
}
.brand-name {
font-weight: 800;
font-size: 17px;
letter-spacing: -0.02em;
color: var(--panel-ink);
}
.brand-sub {
color: var(--accent);
font-weight: 700;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.nav-item {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 12px;
border-radius: var(--r-sm);
color: var(--panel-ink-2);
font-size: 14px;
font-weight: 500;
transition: background 0.16s, color 0.16s;
}
.nav-item:hover {
background: var(--panel-2);
color: var(--panel-ink);
}
.nav-item.is-active {
background: linear-gradient(90deg, rgba(91, 91, 240, 0.22), rgba(91, 91, 240, 0.06));
color: #fff;
box-shadow: inset 2px 0 0 var(--brand);
}
.nav-ic {
font-size: 15px;
width: 18px;
text-align: center;
opacity: 0.9;
}
.nav-pill {
margin-left: auto;
min-width: 20px;
height: 20px;
padding: 0 6px;
display: grid;
place-items: center;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
background: var(--danger);
color: #fff;
opacity: 0;
transform: scale(0.7);
transition: opacity 0.2s, transform 0.2s;
}
.nav-pill.show {
opacity: 1;
transform: scale(1);
}
.sidebar-foot {
margin-top: auto;
}
.op-card {
display: flex;
align-items: center;
gap: 11px;
padding: 12px;
border-radius: var(--r-md);
background: var(--panel-2);
border: 1px solid var(--panel-line);
}
.op-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 4px rgba(47, 158, 111, 0.18);
flex: none;
}
.op-dot.warn {
background: var(--warn);
box-shadow: 0 0 0 4px rgba(217, 138, 43, 0.2);
}
.op-dot.down {
background: var(--danger);
box-shadow: 0 0 0 4px rgba(212, 80, 62, 0.22);
}
.op-label {
font-size: 11px;
color: var(--panel-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.op-state {
font-size: 14px;
font-weight: 700;
color: var(--panel-ink);
}
/* ===== Main ===== */
.main-wrap {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--panel);
}
.topbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 16px;
padding: 18px 24px;
background: rgba(17, 19, 31, 0.86);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--panel-line);
flex-wrap: wrap;
}
.menu-toggle {
display: none;
}
.page-head {
min-width: 0;
}
.page-title {
margin: 0;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--panel-ink);
}
.page-sub {
margin: 2px 0 0;
font-size: 13px;
color: var(--panel-muted);
}
.region-tag {
color: var(--panel-ink-2);
font-weight: 600;
}
.toolbar {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.seg {
display: inline-flex;
padding: 3px;
border-radius: 10px;
background: var(--panel-2);
border: 1px solid var(--panel-line);
gap: 2px;
}
.seg-btn {
border: 0;
background: transparent;
color: var(--panel-ink-2);
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
border-radius: 7px;
transition: background 0.16s, color 0.16s;
}
.seg-btn:hover {
color: var(--panel-ink);
}
.seg-btn.is-active {
background: var(--brand);
color: #fff;
box-shadow: 0 2px 8px rgba(91, 91, 240, 0.45);
}
.live-state {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 700;
color: var(--accent);
padding: 7px 11px;
border-radius: 999px;
background: rgba(0, 180, 166, 0.12);
border: 1px solid rgba(0, 180, 166, 0.3);
}
.live-state[data-state="paused"] {
color: var(--warn);
background: rgba(217, 138, 43, 0.12);
border-color: rgba(217, 138, 43, 0.3);
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
animation: pulse 1.6s ease-in-out infinite;
}
.live-state[data-state="paused"] .live-dot {
background: var(--warn);
animation: none;
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(0, 180, 166, 0.5);
}
50% {
box-shadow: 0 0 0 6px rgba(0, 180, 166, 0);
}
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border: 0;
border-radius: 10px;
background: var(--brand);
color: #fff;
font-size: 13px;
font-weight: 700;
box-shadow: 0 4px 14px rgba(91, 91, 240, 0.4);
transition: background 0.16s, transform 0.1s;
}
.btn-primary:hover {
background: var(--brand-d);
}
.btn-primary:active {
transform: translateY(1px);
}
.btn-ic {
font-size: 12px;
}
.icon-btn {
border: 1px solid var(--panel-line);
background: var(--panel-2);
color: var(--panel-ink-2);
border-radius: var(--r-sm);
width: 32px;
height: 32px;
display: grid;
place-items: center;
font-size: 15px;
transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.icon-btn:hover {
background: var(--panel-3);
color: var(--panel-ink);
border-color: var(--panel-line-2);
}
#clearAlerts {
width: auto;
padding: 0 12px;
font-size: 12px;
font-weight: 600;
}
/* ===== Content ===== */
.content {
padding: 22px 24px 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* KPI row */
.kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.kpi {
background: var(--panel-2);
border: 1px solid var(--panel-line);
border-radius: var(--r-md);
padding: 16px 16px 10px;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
overflow: hidden;
}
.kpi::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--brand);
opacity: 0.7;
}
.kpi-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.kpi-name {
font-size: 12px;
font-weight: 600;
color: var(--panel-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.kpi-delta {
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 3px;
}
.kpi-delta.up {
color: var(--ok);
}
.kpi-delta.down {
color: var(--danger);
}
.kpi-delta.up::before {
content: "▲";
font-size: 9px;
}
.kpi-delta.down::before {
content: "▼";
font-size: 9px;
}
.kpi-value {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--panel-ink);
font-variant-numeric: tabular-nums;
}
.kpi-unit {
font-size: 15px;
font-weight: 600;
color: var(--panel-muted);
margin-left: 2px;
}
.spark {
width: 100%;
height: 30px;
margin-top: 2px;
}
.spark polyline {
stroke: var(--brand);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
#kpi-lat .spark polyline,
#kpi-lat::before {
stroke: var(--accent);
background: var(--accent);
}
#kpi-err .spark polyline,
#kpi-err::before {
stroke: var(--warn);
background: var(--warn);
}
#kpi-cpu .spark polyline,
#kpi-cpu::before {
stroke: var(--accent);
background: var(--accent);
}
/* ===== Widget grid ===== */
.grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 18px;
}
.card {
background: var(--panel-2);
border: 1px solid var(--panel-line);
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
min-width: 0;
transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s, opacity 0.16s;
}
.card-wide {
grid-column: 1 / -1;
}
.card.dragging {
opacity: 0.5;
border-color: var(--brand);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.card.drop-target {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
.card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid var(--panel-line);
}
.card-title {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--panel-ink);
display: flex;
align-items: center;
gap: 8px;
}
.drag-grip {
color: var(--panel-muted);
cursor: grab;
font-size: 13px;
letter-spacing: -2px;
}
.card:active .drag-grip {
cursor: grabbing;
}
.card-meta {
margin: 3px 0 0 22px;
font-size: 12px;
color: var(--panel-muted);
}
.card-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.card-body {
padding: 16px 18px;
flex: 1;
}
.legend {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--panel-ink-2);
font-weight: 500;
}
.legend i {
width: 10px;
height: 3px;
border-radius: 2px;
display: inline-block;
}
.dot-edge {
background: var(--brand);
}
.dot-core {
background: var(--accent);
}
/* Streaming chart */
.stream-body {
position: relative;
}
.stream-chart {
width: 100%;
height: 200px;
display: block;
}
.stream-line {
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.stream-line.edge {
stroke: var(--brand);
}
.stream-line.core {
stroke: var(--accent);
opacity: 0.85;
}
.grid-lines line {
stroke: var(--panel-line);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.stream-now {
position: absolute;
top: 12px;
right: 14px;
display: flex;
align-items: baseline;
gap: 6px;
padding: 6px 12px;
background: rgba(17, 19, 31, 0.7);
border: 1px solid var(--panel-line);
border-radius: 999px;
backdrop-filter: blur(4px);
}
.now-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--panel-muted);
}
.now-val {
font-size: 18px;
font-weight: 800;
color: var(--brand);
font-variant-numeric: tabular-nums;
}
.now-unit {
font-size: 11px;
color: var(--panel-muted);
}
/* Region grid */
.region-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 7px;
}
.region-cell {
aspect-ratio: 1;
border-radius: var(--r-sm);
background: var(--panel-3);
border: 1px solid var(--panel-line);
position: relative;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 700;
color: var(--panel-ink-2);
transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
cursor: default;
}
.region-cell:hover {
transform: translateY(-2px);
border-color: var(--panel-line-2);
}
.region-cell .rc-dot {
position: absolute;
top: 5px;
right: 5px;
width: 7px;
height: 7px;
border-radius: 50%;
}
.region-cell[data-h="ok"] {
background: rgba(47, 158, 111, 0.14);
border-color: rgba(47, 158, 111, 0.32);
color: #8be3bf;
}
.region-cell[data-h="ok"] .rc-dot {
background: var(--ok);
}
.region-cell[data-h="warn"] {
background: rgba(217, 138, 43, 0.16);
border-color: rgba(217, 138, 43, 0.38);
color: #f3c48a;
}
.region-cell[data-h="warn"] .rc-dot {
background: var(--warn);
animation: pulse-warn 1.4s ease-in-out infinite;
}
.region-cell[data-h="down"] {
background: rgba(212, 80, 62, 0.18);
border-color: rgba(212, 80, 62, 0.45);
color: #f0a89c;
}
.region-cell[data-h="down"] .rc-dot {
background: var(--danger);
animation: pulse-warn 1s ease-in-out infinite;
}
@keyframes pulse-warn {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.4);
opacity: 0.6;
}
}
.region-legend {
display: flex;
gap: 16px;
margin-top: 14px;
font-size: 12px;
color: var(--panel-muted);
}
.region-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hp {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
.hp-ok {
background: var(--ok);
}
.hp-warn {
background: var(--warn);
}
.hp-down {
background: var(--danger);
}
/* Service tiles */
.filter {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
}
.chip {
border: 1px solid var(--panel-line);
background: var(--panel);
color: var(--panel-ink-2);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.chip:hover {
border-color: var(--panel-line-2);
color: var(--panel-ink);
}
.chip.is-active {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.tile {
background: var(--panel-3);
border: 1px solid var(--panel-line);
border-radius: var(--r-md);
padding: 13px 14px;
display: flex;
flex-direction: column;
gap: 9px;
transition: border-color 0.16s, transform 0.16s, background 0.16s;
}
.tile:hover {
transform: translateY(-2px);
border-color: var(--panel-line-2);
}
.tile.hidden {
display: none;
}
.tile.flash {
animation: tileFlash 1s ease;
}
@keyframes tileFlash {
0% {
box-shadow: 0 0 0 0 rgba(212, 80, 62, 0.6);
}
100% {
box-shadow: 0 0 0 8px rgba(212, 80, 62, 0);
}
}
.tile-top {
display: flex;
align-items: center;
gap: 8px;
}
.svc-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex: none;
background: var(--ok);
box-shadow: 0 0 0 3px rgba(47, 158, 111, 0.18);
}
.tile[data-status="degraded"] .svc-dot {
background: var(--warn);
box-shadow: 0 0 0 3px rgba(217, 138, 43, 0.2);
animation: pulse-warn 1.4s ease-in-out infinite;
}
.tile[data-status="down"] .svc-dot {
background: var(--danger);
box-shadow: 0 0 0 3px rgba(212, 80, 62, 0.22);
animation: pulse-warn 1s ease-in-out infinite;
}
.svc-name {
font-size: 13px;
font-weight: 700;
color: var(--panel-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svc-status {
margin-left: auto;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 999px;
color: var(--ok);
background: rgba(47, 158, 111, 0.14);
}
.tile[data-status="degraded"] .svc-status {
color: var(--warn);
background: rgba(217, 138, 43, 0.16);
}
.tile[data-status="down"] .svc-status {
color: var(--danger);
background: rgba(212, 80, 62, 0.18);
}
.tile-stats {
display: flex;
justify-content: space-between;
gap: 8px;
}
.stat {
display: flex;
flex-direction: column;
}
.stat-val {
font-size: 15px;
font-weight: 700;
color: var(--panel-ink);
font-variant-numeric: tabular-nums;
}
.stat-lbl {
font-size: 10px;
color: var(--panel-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* mini bar */
.tile-bar {
height: 5px;
border-radius: 999px;
background: var(--panel-line);
overflow: hidden;
}
.tile-bar > i {
display: block;
height: 100%;
border-radius: 999px;
background: var(--brand);
transition: width 0.5s ease;
}
.tile[data-status="degraded"] .tile-bar > i {
background: var(--warn);
}
.tile[data-status="down"] .tile-bar > i {
background: var(--danger);
}
/* Alert feed */
.feed-body {
padding: 8px;
max-height: 360px;
overflow-y: auto;
}
.feed {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.feed-item {
display: flex;
gap: 11px;
padding: 11px 12px;
border-radius: var(--r-md);
background: var(--panel-3);
border: 1px solid var(--panel-line);
animation: feedIn 0.34s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes feedIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.feed-ic {
flex: none;
width: 26px;
height: 26px;
border-radius: 8px;
display: grid;
place-items: center;
font-size: 13px;
font-weight: 700;
}
.feed-item[data-sev="critical"] .feed-ic {
background: rgba(212, 80, 62, 0.18);
color: #f0a89c;
}
.feed-item[data-sev="warning"] .feed-ic {
background: rgba(217, 138, 43, 0.18);
color: #f3c48a;
}
.feed-item[data-sev="info"] .feed-ic {
background: rgba(0, 180, 166, 0.16);
color: #7fe3d9;
}
.feed-item[data-sev="resolved"] .feed-ic {
background: rgba(47, 158, 111, 0.16);
color: #8be3bf;
}
.feed-main {
min-width: 0;
flex: 1;
}
.feed-title {
font-size: 13px;
font-weight: 600;
color: var(--panel-ink);
}
.feed-svc {
font-weight: 700;
color: var(--panel-ink);
}
.feed-time {
font-size: 11px;
color: var(--panel-muted);
font-variant-numeric: tabular-nums;
}
.feed-empty {
text-align: center;
color: var(--panel-muted);
font-size: 13px;
padding: 30px 12px;
}
/* scrollbar */
.feed-body::-webkit-scrollbar {
width: 8px;
}
.feed-body::-webkit-scrollbar-thumb {
background: var(--panel-line-2);
border-radius: 999px;
}
/* Scrim + toast */
.scrim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 30;
}
.toast-wrap {
position: fixed;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
z-index: 60;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
pointer-events: none;
}
.toast {
background: var(--ink);
color: #fff;
padding: 11px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
box-shadow: var(--sh-2);
border: 1px solid var(--panel-line-2);
animation: toastIn 0.28s ease;
display: flex;
align-items: center;
gap: 8px;
}
.toast.warn {
border-color: var(--warn);
}
.toast.danger {
border-color: var(--danger);
}
@keyframes toastIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== Responsive ===== */
@media (max-width: 1040px) {
.kpi-row {
grid-template-columns: repeat(2, 1fr);
}
.grid {
grid-template-columns: 1fr;
}
.card-wide {
grid-column: auto;
}
}
@media (max-width: 720px) {
.app {
grid-template-columns: 1fr;
}
.sidebar {
position: fixed;
z-index: 40;
width: 248px;
transform: translateX(-100%);
transition: transform 0.24s ease;
}
.app.nav-open .sidebar {
transform: translateX(0);
}
.menu-toggle {
display: grid;
}
.topbar {
padding: 14px 16px;
}
.content {
padding: 16px 14px 36px;
}
.toolbar {
width: 100%;
margin-left: 0;
}
.region-grid {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 480px) {
.kpi-row {
grid-template-columns: 1fr 1fr;
}
.page-title {
font-size: 18px;
}
.kpi-value {
font-size: 24px;
}
.tile-grid {
grid-template-columns: 1fr;
}
.region-grid {
grid-template-columns: repeat(4, 1fr);
}
.seg-btn {
padding: 6px 9px;
}
}
@media (max-width: 360px) {
.toolbar {
gap: 8px;
}
.region-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}/* Helios Ops — Command Center
Vanilla JS, no libraries. Live tiles, scrolling SVG chart, incident feed,
region heat grid, filters, time-window, drag-to-rearrange, pause/resume. */
(function () {
"use strict";
var $ = function (s, r) { return (r || document).querySelector(s); };
var $$ = function (s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); };
var clamp = function (v, lo, hi) { return Math.max(lo, Math.min(hi, v)); };
var rnd = function (lo, hi) { return lo + Math.random() * (hi - lo); };
var pick = function (arr) { return arr[Math.floor(Math.random() * arr.length)]; };
/* ============ State ============ */
var paused = false;
var windowMul = 1; // time-window scales noise/scroll feel
var WINDOW_LABEL = { "1h": 1, "6h": 1.6, "24h": 2.4 };
var alertSeq = 0;
/* ============ Toast ============ */
var toastWrap = $("#toastWrap");
function toast(msg, kind) {
if (!toastWrap) return;
var t = document.createElement("div");
t.className = "toast" + (kind ? " " + kind : "");
t.setAttribute("role", "status");
t.textContent = msg;
toastWrap.appendChild(t);
setTimeout(function () {
t.style.transition = "opacity .3s, transform .3s";
t.style.opacity = "0";
t.style.transform = "translateY(10px)";
setTimeout(function () { t.remove(); }, 320);
}, 2600);
}
/* ============ Clock ============ */
// (no #clock element in this build; topbar shows static region tag) — skip.
/* ============ KPI metrics ============ */
var kpis = {
rps: { el: $("#kpi-rps"), v: 48210, base: 48210, fmt: fmtInt, hist: [], better: "up" },
lat: { el: $("#kpi-lat"), v: 182, base: 182, fmt: fmtMs, hist: [], better: "down" },
err: { el: $("#kpi-err"), v: 0.34, base: 0.34, fmt: fmtPct2, hist: [], better: "down" },
cpu: { el: $("#kpi-cpu"), v: 61, base: 61, fmt: fmtPct0, hist: [], better: "down" }
};
function fmtInt(n) { return Math.round(n).toLocaleString("en-US"); }
function fmtMs(n) { return Math.round(n) + '<span class="kpi-unit">ms</span>'; }
function fmtPct2(n) { return n.toFixed(2) + '<span class="kpi-unit">%</span>'; }
function fmtPct0(n) { return Math.round(n) + '<span class="kpi-unit">%</span>'; }
// seed sparkline history
Object.keys(kpis).forEach(function (k) {
var m = kpis[k];
for (var i = 0; i < 24; i++) m.hist.push(m.base * (0.92 + Math.random() * 0.16));
});
function sparkPoints(hist) {
var n = hist.length;
var min = Math.min.apply(null, hist), max = Math.max.apply(null, hist);
var span = (max - min) || 1;
return hist.map(function (v, i) {
var x = (i / (n - 1)) * 120;
var y = 30 - ((v - min) / span) * 28 - 1;
return x.toFixed(1) + "," + y.toFixed(1);
}).join(" ");
}
function renderKpi(k) {
var m = kpis[k];
if (!m.el) return;
var valEl = m.el.querySelector("[data-value]");
var deltaEl = m.el.querySelector("[data-delta]");
var spark = m.el.querySelector("[data-spark]");
if (valEl) valEl.innerHTML = m.fmt(m.v);
// delta vs base
var pct = ((m.v - m.base) / m.base) * 100;
if (deltaEl) {
var rising = pct >= 0;
var good = (m.better === "up") ? rising : !rising;
deltaEl.className = "kpi-delta " + (good ? "up" : "down");
var sign = rising ? "+" : "";
deltaEl.textContent = sign + pct.toFixed(k === "err" ? 2 : 1) + "%";
}
if (spark) spark.setAttribute("points", sparkPoints(m.hist));
}
function tickKpis() {
// requests/sec wanders with daily-ish drift
kpis.rps.v = clamp(kpis.rps.v + rnd(-900, 950) * windowMul, 38000, 61000);
kpis.lat.v = clamp(kpis.lat.v + rnd(-9, 10) * windowMul, 120, 340);
kpis.err.v = clamp(kpis.err.v + rnd(-0.05, 0.055) * windowMul, 0.05, 2.4);
kpis.cpu.v = clamp(kpis.cpu.v + rnd(-3, 3.2) * windowMul, 28, 94);
Object.keys(kpis).forEach(function (k) {
var m = kpis[k];
m.hist.push(m.v);
if (m.hist.length > 24) m.hist.shift();
renderKpi(k);
});
}
/* ============ Streaming SVG chart ============ */
var W = 600, H = 200, N = 60; // 60 samples across width
var edge = [], core = [];
var streamArea = $("#streamArea");
var streamEdge = $("#streamLineEdge");
var streamCore = $("#streamLineCore");
var streamNow = $("#streamNow");
var streamGrid = $("#streamGrid");
(function seedStream() {
var e = 0.6, c = 0.45;
for (var i = 0; i < N; i++) {
e = clamp(e + rnd(-0.08, 0.08), 0.2, 0.95);
c = clamp(c + rnd(-0.06, 0.06), 0.1, 0.8);
edge.push(e); core.push(c);
}
})();
(function drawGrid() {
if (!streamGrid) return;
var html = "";
for (var i = 1; i < 5; i++) {
var y = (H / 5) * i;
html += '<line x1="0" y1="' + y + '" x2="' + W + '" y2="' + y + '" />';
}
streamGrid.innerHTML = html;
})();
function toPts(arr) {
return arr.map(function (v, i) {
var x = (i / (N - 1)) * W;
var y = H - v * (H - 14) - 6;
return x.toFixed(1) + "," + y.toFixed(1);
}).join(" ");
}
function renderStream() {
if (!streamEdge) return;
var ePts = toPts(edge);
streamEdge.setAttribute("points", ePts);
streamCore.setAttribute("points", toPts(core));
if (streamArea) streamArea.setAttribute("points", "0," + H + " " + ePts + " " + W + "," + H);
if (streamNow) streamNow.textContent = Math.round(28000 + edge[edge.length - 1] * 33000).toLocaleString("en-US");
}
function tickStream() {
var e = clamp(edge[edge.length - 1] + rnd(-0.1, 0.1) * windowMul, 0.18, 0.96);
var c = clamp(core[core.length - 1] + rnd(-0.08, 0.08) * windowMul, 0.1, 0.82);
edge.push(e); edge.shift();
core.push(c); core.shift();
renderStream();
}
/* ============ Services ============ */
var SERVICES = [
{ id: "edge-gw", name: "Edge Gateway", status: "up" },
{ id: "auth", name: "Auth Service", status: "up" },
{ id: "ingest", name: "Event Ingest", status: "up" },
{ id: "search", name: "Search API", status: "degraded" },
{ id: "billing", name: "Billing Core", status: "up" },
{ id: "media", name: "Media CDN", status: "up" },
{ id: "queue", name: "Job Queue", status: "up" },
{ id: "db-primary", name: "DB Primary", status: "up" },
{ id: "db-replica", name: "DB Replica", status: "up" },
{ id: "notify", name: "Notify Hub", status: "up" }
];
SERVICES.forEach(function (s) {
s.lat = Math.round(rnd(40, 160));
s.load = Math.round(rnd(28, 78));
});
var serviceGrid = $("#serviceGrid");
var serviceMeta = $("#serviceMeta");
var activeFilter = "all";
var STATUS_LBL = { up: "Operational", degraded: "Degraded", down: "Down" };
function renderServices() {
if (!serviceGrid) return;
serviceGrid.innerHTML = SERVICES.map(function (s) {
var loadColor = s.status;
return '' +
'<div class="tile" data-status="' + s.status + '" data-id="' + s.id + '" tabindex="0" role="group" aria-label="' + s.name + ', ' + STATUS_LBL[s.status] + '">' +
'<div class="tile-top">' +
'<span class="svc-dot" aria-hidden="true"></span>' +
'<span class="svc-name">' + s.name + '</span>' +
'<span class="svc-status">' + (s.status === "up" ? "up" : s.status) + '</span>' +
'</div>' +
'<div class="tile-stats">' +
'<span class="stat"><span class="stat-val" data-lat>' + s.lat + 'ms</span><span class="stat-lbl">p95</span></span>' +
'<span class="stat"><span class="stat-val" data-load>' + s.load + '%</span><span class="stat-lbl">load</span></span>' +
'</div>' +
'<div class="tile-bar" aria-hidden="true"><i style="width:' + s.load + '%"></i></div>' +
'</div>';
}).join("");
applyFilter();
updateMeta();
}
function updateMeta() {
if (!serviceMeta) return;
var bad = SERVICES.filter(function (s) { return s.status !== "up"; }).length;
serviceMeta.textContent = SERVICES.length + " services monitored" + (bad ? " · " + bad + " with issues" : " · all healthy");
}
function applyFilter() {
$$(".tile", serviceGrid).forEach(function (t) {
var st = t.getAttribute("data-status");
var show = activeFilter === "all" || st === activeFilter;
t.classList.toggle("hidden", !show);
});
}
function tickServices() {
SERVICES.forEach(function (s) {
var jitter = s.status === "up" ? rnd(-6, 6) : rnd(-4, 12);
s.lat = clamp(Math.round(s.lat + jitter), 30, s.status === "down" ? 999 : 480);
s.load = clamp(Math.round(s.load + rnd(-5, 5)), 8, 99);
var tile = serviceGrid && serviceGrid.querySelector('.tile[data-id="' + s.id + '"]');
if (tile) {
var latEl = tile.querySelector("[data-lat]");
var loadEl = tile.querySelector("[data-load]");
var bar = tile.querySelector(".tile-bar > i");
if (latEl) latEl.textContent = (s.status === "down" ? "—" : s.lat + "ms");
if (loadEl) loadEl.textContent = s.load + "%";
if (bar) bar.style.width = s.load + "%";
}
});
}
/* ============ Region heat grid ============ */
var REGIONS = [
"us-east-1", "us-east-2", "us-west-1", "us-west-2",
"eu-west-1", "eu-west-2", "eu-central", "eu-north",
"ap-south-1", "ap-east-1", "ap-se-2", "sa-east-1",
"af-south", "me-central"
];
var regionGrid = $("#regionGrid");
var regionState = {};
REGIONS.forEach(function (r) {
regionState[r] = { h: Math.random() < 0.12 ? "warn" : "ok", load: Math.round(rnd(20, 80)) };
});
function shortCode(r) {
var p = r.split("-");
return (p[0] + (p[1] || "")).slice(0, 4).toUpperCase();
}
function renderRegions() {
if (!regionGrid) return;
regionGrid.innerHTML = REGIONS.map(function (r) {
var s = regionState[r];
return '<div class="region-cell" data-h="' + s.h + '" data-r="' + r + '" ' +
'title="' + r + ' · ' + s.load + '% load · ' + (s.h === "ok" ? "healthy" : s.h === "warn" ? "degraded" : "down") + '" ' +
'role="img" aria-label="' + r + ', ' + (s.h === "ok" ? "healthy" : s.h === "warn" ? "degraded" : "down") + ', ' + s.load + ' percent load">' +
'<span class="rc-dot" aria-hidden="true"></span>' + shortCode(r) +
'</div>';
}).join("");
}
function tickRegions() {
REGIONS.forEach(function (r) {
var s = regionState[r];
s.load = clamp(Math.round(s.load + rnd(-7, 7)), 8, 99);
var cell = regionGrid && regionGrid.querySelector('.region-cell[data-r="' + r + '"]');
if (cell) {
cell.setAttribute("title", r + " · " + s.load + "% load · " + (s.h === "ok" ? "healthy" : s.h === "warn" ? "degraded" : "down"));
cell.setAttribute("data-h", s.h);
}
});
}
/* ============ Alert / incident feed ============ */
var alertFeed = $("#alertFeed");
var navPill = $("#navIncidentCount");
var globalDot = $("#globalDot");
var globalState = $("#globalState");
var activeIncidents = 0;
var FEED_EMPTY = '<li class="feed-empty">No active alerts. Fleet nominal.</li>';
function relTime(ts) {
var s = Math.round((Date.now() - ts) / 1000);
if (s < 5) return "just now";
if (s < 60) return s + "s ago";
var m = Math.floor(s / 60);
return m + "m ago";
}
var feedItems = [];
function pushAlert(sev, svc, msg) {
if (!alertFeed) return;
var empty = alertFeed.querySelector(".feed-empty");
if (empty) empty.remove();
var id = ++alertSeq;
var ts = Date.now();
feedItems.unshift({ id: id, ts: ts });
var ICON = { critical: "!", warning: "△", info: "i", resolved: "✓" };
var li = document.createElement("li");
li.className = "feed-item";
li.setAttribute("data-sev", sev);
li.setAttribute("data-id", id);
li.innerHTML =
'<span class="feed-ic" aria-hidden="true">' + ICON[sev] + '</span>' +
'<div class="feed-main">' +
'<div class="feed-title"><span class="feed-svc">' + svc + '</span> — ' + msg + '</div>' +
'<div class="feed-time" data-ts="' + ts + '">just now</div>' +
'</div>';
alertFeed.insertBefore(li, alertFeed.firstChild);
// cap feed length
while (alertFeed.children.length > 30) alertFeed.removeChild(alertFeed.lastChild);
return li;
}
function refreshFeedTimes() {
$$(".feed-time", alertFeed).forEach(function (el) {
var ts = +el.getAttribute("data-ts");
el.textContent = relTime(ts);
});
}
function setGlobalStatus() {
var down = SERVICES.filter(function (s) { return s.status === "down"; }).length;
var deg = SERVICES.filter(function (s) { return s.status === "degraded"; }).length;
if (!globalDot || !globalState) return;
globalDot.classList.remove("warn", "down");
if (down) { globalDot.classList.add("down"); globalState.textContent = "Major outage"; }
else if (deg) { globalDot.classList.add("warn"); globalState.textContent = "Degraded"; }
else { globalState.textContent = "Operational"; }
}
function updateNavPill() {
activeIncidents = SERVICES.filter(function (s) { return s.status !== "up"; }).length;
if (!navPill) return;
navPill.textContent = activeIncidents;
navPill.classList.toggle("show", activeIncidents > 0);
}
/* Random service health flips → drive feed + region + status */
var DEGRADE_MSG = [
"p95 latency above 400ms",
"elevated 5xx error rate",
"connection pool saturation",
"replica lag detected",
"cache hit-rate dropping"
];
var DOWN_MSG = [
"health check failing",
"circuit breaker open",
"node unreachable"
];
var RECOVER_MSG = [
"auto-recovered, traffic restored",
"failover complete, healthy",
"latency back to baseline"
];
function maybeFlip() {
var s = pick(SERVICES);
var roll = Math.random();
if (s.status === "up") {
if (roll < 0.55) {
s.status = "degraded";
pushAlert("warning", s.name, pick(DEGRADE_MSG));
flashTile(s.id);
toast(s.name + " degraded", "warn");
} else if (roll < 0.68) {
s.status = "down";
s.lat = 0;
pushAlert("critical", s.name, pick(DOWN_MSG));
flashTile(s.id);
toast(s.name + " is DOWN", "danger");
} else {
pushAlert("info", s.name, "deploy v" + (200 + Math.floor(rnd(0, 60))) + " rolled out");
}
} else {
// recover
s.status = "up";
s.lat = Math.round(rnd(40, 140));
pushAlert("resolved", s.name, pick(RECOVER_MSG));
}
renderServices();
setGlobalStatus();
updateNavPill();
syncRegionHealth();
}
function flashTile(id) {
var tile = serviceGrid && serviceGrid.querySelector('.tile[data-id="' + id + '"]');
if (tile) { tile.classList.add("flash"); setTimeout(function () { tile.classList.remove("flash"); }, 1000); }
}
// Mirror worst service state into a couple of region cells for visual coherence
function syncRegionHealth() {
var down = SERVICES.some(function (s) { return s.status === "down"; });
var deg = SERVICES.some(function (s) { return s.status === "degraded"; });
REGIONS.forEach(function (r) { regionState[r].h = "ok"; });
if (deg) regionState[REGIONS[3]].h = "warn";
if (down) { regionState[REGIONS[8]].h = "down"; regionState[REGIONS[0]].h = "warn"; }
renderRegions();
}
/* ============ Controls ============ */
// Pause / resume
var pauseBtn = $("#pauseBtn");
var pauseLabel = $("#pauseLabel");
var liveState = $("#liveState");
var liveLabel = $("#liveLabel");
function setPaused(p) {
paused = p;
if (pauseBtn) {
pauseBtn.setAttribute("aria-pressed", String(p));
var ic = pauseBtn.querySelector(".btn-ic");
if (ic) ic.textContent = p ? "▶" : "⏸";
}
if (pauseLabel) pauseLabel.textContent = p ? "Resume" : "Pause";
if (liveState) liveState.setAttribute("data-state", p ? "paused" : "live");
if (liveLabel) liveLabel.textContent = p ? "Paused" : "Live";
toast(p ? "Live updates paused" : "Live updates resumed");
}
if (pauseBtn) pauseBtn.addEventListener("click", function () { setPaused(!paused); });
// Time window segmented control
$$(".seg-btn[data-window]").forEach(function (btn) {
btn.addEventListener("click", function () {
$$(".seg-btn[data-window]").forEach(function (b) {
b.classList.remove("is-active");
b.setAttribute("aria-selected", "false");
});
btn.classList.add("is-active");
btn.setAttribute("aria-selected", "true");
var w = btn.getAttribute("data-window");
windowMul = WINDOW_LABEL[w] || 1;
toast("Window: " + w.toUpperCase());
});
});
// Service status filter chips
$$(".chip[data-filter]").forEach(function (chip) {
chip.addEventListener("click", function () {
$$(".chip[data-filter]").forEach(function (c) { c.classList.remove("is-active"); });
chip.classList.add("is-active");
activeFilter = chip.getAttribute("data-filter");
applyFilter();
});
});
// Clear alerts
var clearBtn = $("#clearAlerts");
if (clearBtn) clearBtn.addEventListener("click", function () {
if (alertFeed) alertFeed.innerHTML = FEED_EMPTY;
feedItems = [];
toast("Alert feed cleared");
});
// Mobile nav toggle
var menuToggle = $("#menuToggle");
var scrim = $("#scrim");
var app = $("#app");
function closeNav() {
if (app) app.classList.remove("nav-open");
if (scrim) scrim.hidden = true;
if (menuToggle) menuToggle.setAttribute("aria-expanded", "false");
}
if (menuToggle) menuToggle.addEventListener("click", function () {
var open = app && app.classList.toggle("nav-open");
if (scrim) scrim.hidden = !open;
menuToggle.setAttribute("aria-expanded", String(!!open));
});
if (scrim) scrim.addEventListener("click", closeNav);
$$(".nav-item").forEach(function (a) {
a.addEventListener("click", function (e) {
e.preventDefault();
$$(".nav-item").forEach(function (n) { n.classList.remove("is-active"); n.removeAttribute("aria-current"); });
a.classList.add("is-active");
a.setAttribute("aria-current", "page");
closeNav();
});
});
// Card "⋯" menus
$$("[data-menu]").forEach(function (b) {
b.addEventListener("click", function () { toast("Widget options"); });
});
/* ============ Drag to rearrange widgets ============ */
var grid = $("#grid");
var dragEl = null;
if (grid) {
$$(".card", grid).forEach(function (card) {
card.addEventListener("dragstart", function (e) {
dragEl = card;
card.classList.add("dragging");
e.dataTransfer.effectAllowed = "move";
try { e.dataTransfer.setData("text/plain", card.getAttribute("data-card") || ""); } catch (err) {}
});
card.addEventListener("dragend", function () {
card.classList.remove("dragging");
$$(".card", grid).forEach(function (c) { c.classList.remove("drop-target"); });
dragEl = null;
toast("Layout updated");
});
card.addEventListener("dragover", function (e) {
e.preventDefault();
if (!dragEl || dragEl === card) return;
card.classList.add("drop-target");
e.dataTransfer.dropEffect = "move";
});
card.addEventListener("dragleave", function () { card.classList.remove("drop-target"); });
card.addEventListener("drop", function (e) {
e.preventDefault();
card.classList.remove("drop-target");
if (!dragEl || dragEl === card) return;
var cards = $$(".card", grid);
var from = cards.indexOf(dragEl);
var to = cards.indexOf(card);
if (from < to) grid.insertBefore(dragEl, card.nextSibling);
else grid.insertBefore(dragEl, card);
});
});
}
/* ============ Boot + loops ============ */
Object.keys(kpis).forEach(renderKpi);
renderStream();
renderServices();
renderRegions();
setGlobalStatus();
updateNavPill();
if (alertFeed && !alertFeed.children.length) alertFeed.innerHTML = FEED_EMPTY;
// seed feed with a couple of historical entries
pushAlert("info", "Search API", "running on warm cache, p95 elevated");
pushAlert("resolved", "Auth Service", "token refresh storm subsided");
// Fast loop: KPIs + stream scroll (~1s)
setInterval(function () {
if (paused) return;
tickKpis();
tickStream();
tickServices();
tickRegions();
}, 1000);
// Slow loop: feed timestamps refresh (~5s)
setInterval(refreshFeedTimes, 5000);
// Occasional event loop: flip a service / emit alert (~7s, ~45% chance)
setInterval(function () {
if (paused) return;
if (Math.random() < 0.45) maybeFlip();
}, 7000);
// Expose toast for demos
window.toast = toast;
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Helios Ops — Command Center</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="app" id="app">
<!-- Sidebar -->
<nav class="sidebar" aria-label="Primary">
<div class="brand">
<span class="brand-mark" aria-hidden="true">◎</span>
<span class="brand-name">Helios<span class="brand-sub">Ops</span></span>
</div>
<ul class="nav-list">
<li><a class="nav-item is-active" href="#" aria-current="page"><span class="nav-ic" aria-hidden="true">▦</span>Command center</a></li>
<li><a class="nav-item" href="#"><span class="nav-ic" aria-hidden="true">◔</span>Services</a></li>
<li><a class="nav-item" href="#"><span class="nav-ic" aria-hidden="true">⚑</span>Incidents <span class="nav-pill" id="navIncidentCount">0</span></a></li>
<li><a class="nav-item" href="#"><span class="nav-ic" aria-hidden="true">⤳</span>Traffic</a></li>
<li><a class="nav-item" href="#"><span class="nav-ic" aria-hidden="true">◈</span>Regions</a></li>
<li><a class="nav-item" href="#"><span class="nav-ic" aria-hidden="true">⚙</span>Settings</a></li>
</ul>
<div class="sidebar-foot">
<div class="op-card">
<span class="op-dot" id="globalDot" aria-hidden="true"></span>
<div>
<div class="op-label">System status</div>
<div class="op-state" id="globalState">Operational</div>
</div>
</div>
</div>
</nav>
<!-- Main -->
<div class="main-wrap">
<header class="topbar">
<button class="icon-btn menu-toggle" id="menuToggle" aria-label="Toggle navigation" aria-expanded="false">☰</button>
<div class="page-head">
<h1 class="page-title">Command center</h1>
<p class="page-sub">Live fleet telemetry · <span class="region-tag">us-east, eu-west, ap-south</span></p>
</div>
<div class="toolbar" role="group" aria-label="Dashboard controls">
<div class="seg" role="tablist" aria-label="Time window">
<button class="seg-btn is-active" role="tab" aria-selected="true" data-window="1h">1H</button>
<button class="seg-btn" role="tab" aria-selected="false" data-window="6h">6H</button>
<button class="seg-btn" role="tab" aria-selected="false" data-window="24h">24H</button>
</div>
<div class="live-state" id="liveState" data-state="live">
<span class="live-dot" aria-hidden="true"></span>
<span id="liveLabel">Live</span>
</div>
<button class="btn-primary" id="pauseBtn" aria-pressed="false">
<span class="btn-ic" aria-hidden="true">⏸</span><span id="pauseLabel">Pause</span>
</button>
</div>
</header>
<main class="content" aria-label="Operations dashboard">
<!-- KPI row -->
<section class="kpi-row" aria-label="Key metrics">
<article class="kpi" id="kpi-rps">
<header class="kpi-head"><span class="kpi-name">Requests / sec</span><span class="kpi-delta up" data-delta>+4.2%</span></header>
<div class="kpi-value" data-value>0</div>
<svg class="spark" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true"><polyline data-spark fill="none" points=""></polyline></svg>
</article>
<article class="kpi" id="kpi-lat">
<header class="kpi-head"><span class="kpi-name">p95 latency</span><span class="kpi-delta down" data-delta>-2.8%</span></header>
<div class="kpi-value" data-value>0<span class="kpi-unit">ms</span></div>
<svg class="spark" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true"><polyline data-spark fill="none" points=""></polyline></svg>
</article>
<article class="kpi" id="kpi-err">
<header class="kpi-head"><span class="kpi-name">Error rate</span><span class="kpi-delta up" data-delta>+0.1%</span></header>
<div class="kpi-value" data-value>0<span class="kpi-unit">%</span></div>
<svg class="spark" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true"><polyline data-spark fill="none" points=""></polyline></svg>
</article>
<article class="kpi" id="kpi-cpu">
<header class="kpi-head"><span class="kpi-name">Fleet CPU</span><span class="kpi-delta up" data-delta>+1.4%</span></header>
<div class="kpi-value" data-value>0<span class="kpi-unit">%</span></div>
<svg class="spark" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true"><polyline data-spark fill="none" points=""></polyline></svg>
</article>
</section>
<!-- Widget grid (draggable) -->
<section class="grid" id="grid" aria-label="Widgets">
<!-- Streaming throughput chart -->
<article class="card card-wide" draggable="true" data-card="stream">
<header class="card-head">
<div class="card-titles">
<h2 class="card-title"><span class="drag-grip" aria-hidden="true">⠿</span>Throughput stream</h2>
<p class="card-meta">requests/sec · rolling 60s</p>
</div>
<div class="card-actions">
<span class="legend"><i class="dot-edge"></i>edge</span>
<span class="legend"><i class="dot-core"></i>core</span>
<button class="icon-btn" aria-label="Stream options" data-menu>⋯</button>
</div>
</header>
<div class="card-body stream-body">
<svg class="stream-chart" id="streamChart" viewBox="0 0 600 200" preserveAspectRatio="none" role="img" aria-label="Live throughput line chart">
<defs>
<linearGradient id="fillEdge" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="var(--brand)" stop-opacity="0.28" />
<stop offset="100%" stop-color="var(--brand)" stop-opacity="0" />
</linearGradient>
</defs>
<g class="grid-lines" id="streamGrid"></g>
<polygon id="streamArea" fill="url(#fillEdge)" points=""></polygon>
<polyline id="streamLineEdge" class="stream-line edge" fill="none" points=""></polyline>
<polyline id="streamLineCore" class="stream-line core" fill="none" points=""></polyline>
</svg>
<div class="stream-now">
<span class="now-label">now</span>
<span class="now-val" id="streamNow">0</span>
<span class="now-unit">req/s</span>
</div>
</div>
</article>
<!-- Region grid -->
<article class="card" draggable="true" data-card="regions">
<header class="card-head">
<div class="card-titles">
<h2 class="card-title"><span class="drag-grip" aria-hidden="true">⠿</span>Regions</h2>
<p class="card-meta">14 edge zones</p>
</div>
<button class="icon-btn" aria-label="Region options" data-menu>⋯</button>
</header>
<div class="card-body">
<div class="region-grid" id="regionGrid" aria-label="Region health"></div>
<div class="region-legend">
<span><i class="hp hp-ok"></i>healthy</span>
<span><i class="hp hp-warn"></i>degraded</span>
<span><i class="hp hp-down"></i>down</span>
</div>
</div>
</article>
<!-- Service status tiles -->
<article class="card card-wide" draggable="true" data-card="services">
<header class="card-head">
<div class="card-titles">
<h2 class="card-title"><span class="drag-grip" aria-hidden="true">⠿</span>Service fleet</h2>
<p class="card-meta" id="serviceMeta">0 services monitored</p>
</div>
<div class="card-actions">
<div class="filter" role="group" aria-label="Filter services by status">
<button class="chip is-active" data-filter="all">All</button>
<button class="chip" data-filter="up">Up</button>
<button class="chip" data-filter="degraded">Degraded</button>
<button class="chip" data-filter="down">Down</button>
</div>
</div>
</header>
<div class="card-body">
<div class="tile-grid" id="serviceGrid" aria-label="Service status tiles"></div>
</div>
</article>
<!-- Alert / incident feed -->
<article class="card" draggable="true" data-card="alerts">
<header class="card-head">
<div class="card-titles">
<h2 class="card-title"><span class="drag-grip" aria-hidden="true">⠿</span>Alert feed</h2>
<p class="card-meta">newest first</p>
</div>
<button class="icon-btn" id="clearAlerts" aria-label="Clear alert feed">clear</button>
</header>
<div class="card-body feed-body">
<ul class="feed" id="alertFeed" aria-live="polite" aria-label="Incident and alert feed"></ul>
</div>
</article>
</section>
</main>
</div>
<div class="scrim" id="scrim" hidden></div>
<div class="toast-wrap" id="toastWrap" aria-live="polite" aria-atomic="true"></div>
</div>
<script src="script.js"></script>
</body>
</html>Ops command center (live tiles)
A dark-friendly operations command center for the fictional Helios Grid edge fleet. The page opens with four KPI cards (requests/sec, p95 latency, error rate, fleet CPU) that each show a live value, an up/down delta colored against --ok/--danger, and a tiny inline-SVG sparkline. Below them sits a widget grid: a wide scrolling throughput chart, a service-health tile wall with colored status dots, a 14-zone region heat grid, and an incident feed. Everything is rendered with inline SVG and pure CSS — no chart libraries, no canvas, no images.
The dashboard is genuinely live. A one-second loop ticks every metric, scrolls the SVG line chart leftward, and jitters per-service latency and load bars. Every few seconds a service may flip to degraded or down, which pushes a timestamped entry into the aria-live incident feed, flashes the affected tile, recolors region cells, updates the sidebar system-status dot, and bumps the nav incident badge. Recovered services emit a resolved alert. A toast helper announces each event.
Interactions all work without a framework: the time-window segmented control rescales the stream, the status chips filter the service wall (All / Up / Degraded / Down), widget cards can be dragged to rearrange the grid, the feed can be cleared, and a Pause/Resume button freezes or resumes the entire live stream while flipping the LIVE pill. The layout collapses to a single column with an off-canvas sidebar around 720px and stays usable down to ~360px, and it honors prefers-reduced-motion.